@remember-web/primitive 0.0.0-alpha.1

package/package.json

@@ -0,0 +1,100 @@
+{
+  "name": "@remember-web/primitive",
+  "version": "0.0.0-alpha.1",
+  "description": "RUI Primitive Components",
+  "homepage": "https://dramancompany.github.io/rui/",
+  "author": "Remember",
+  "license": "MIT",
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dramancompany/rui.git"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "rollup -c && yarn fix:dts-alias",
+    "fix:dts-alias": "yarn tsc-alias -p tsconfig.alias.json",
+    "type-check": "tsc -p ./tsconfig.json",
+    "lint": "eslint src --fix --ext .js,.jsx,.ts,.tsx"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "type": "module",
+  "source": "./src/index.ts",
+  "main": "./dist/primitive/src/index.cjs",
+  "module": "./dist/primitive/src/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/primitive/src/index.js",
+      "require": "./dist/primitive/src/index.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "dependencies": {
+    "@babel/runtime": "^7",
+    "@radix-ui/react-dialog": "^1",
+    "@radix-ui/react-label": "^2",
+    "@radix-ui/react-popover": "^1",
+    "@radix-ui/react-separator": "^1",
+    "@radix-ui/react-switch": "^1",
+    "@radix-ui/react-tooltip": "^1.0.7",
+    "@remember-web/icon": "^0.1.1",
+    "@remember-web/mixin": "^0.1.4"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.12",
+    "@babel/plugin-transform-runtime": "^7.19.6",
+    "@babel/preset-env": "^7.22.9",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.5",
+    "@remember-web/shared": "workspace:^",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@storybook/addon-a11y": "^7",
+    "@storybook/addon-actions": "^7",
+    "@storybook/addon-backgrounds": "^7",
+    "@storybook/addon-docs": "^7",
+    "@storybook/addon-essentials": "^7",
+    "@storybook/addon-interactions": "^7",
+    "@storybook/addon-links": "^7",
+    "@storybook/addon-measure": "^7",
+    "@storybook/addon-outline": "^7",
+    "@storybook/addons": "^7",
+    "@storybook/client-api": "^7",
+    "@storybook/client-logger": "^7",
+    "@storybook/react": "^7",
+    "@storybook/react-vite": "^7",
+    "@storybook/testing-library": "^0.2.2",
+    "@types/react": "^18.2.39",
+    "@types/react-dom": "^18.2.17",
+    "eslint-config-rui": "workspace:*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rollup": "^4.13.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-preserve-directives": "^0.4.0",
+    "rollup-plugin-ts": "^3.4.5",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "rollup-plugin-visualizer": "^5.9.0",
+    "storybook": "^7",
+    "styled-components": ">=6",
+    "tsc-alias": "^1.8.6",
+    "tsconfig": "workspace:*",
+    "tslib": "^2.5.0",
+    "typescript": "^5.4.2"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "styled-components": ">=6"
+  },
+  "bugs": {
+    "url": "https://github.com/dramancompany/rui/issues"
+  }
+}

package/src/Avatars/Avatar/Avatar.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { bg200 } from '@remember-web/mixin';
+
+import { avatarSize } from '@/Avatars/Avatar/styles';
+
+import Avatar from '.';
+
+type Story = StoryObj<typeof Avatar>;
+
+const meta = {
+  title: 'Avatars/Avatar',
+  component: Avatar,
+  argTypes: {
+    rounded: {
+      options: [true, false],
+      control: { type: 'radio' },
+    },
+    size: {
+      options: Object.keys(avatarSize),
+      control: { type: 'select' },
+    },
+    imageUrl: {
+      options: [
+        undefined,
+        'https://images.unsplash.com/photo-1611695434398-4f4b330623e6?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=MnwxfDB8MXxyYW5kb218MHx8ZmFjZXx8fHx8fDE3MDY5NTExNTk&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=300',
+      ],
+      control: { type: 'select' },
+    },
+    children: {
+      options: [undefined, 'YS'],
+      control: { type: 'radio' },
+    },
+    backgroundColor: {
+      control: { type: 'color' },
+    },
+  },
+} satisfies Meta<typeof Avatar>;
+
+export const Default: Story = {
+  args: {
+    rounded: true,
+    size: 'medium',
+    backgroundColor: bg200,
+  },
+};
+export default meta;

package/src/Avatars/Avatar/index.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { forwardRef } from 'react';
+import type { ForwardRefRenderFunction, ComponentPropsWithoutRef } from 'react';
+import { bg200, divider } from '@remember-web/mixin';
+
+import type { StyledAvatarProps } from '@/Avatars/Avatar/styles';
+import { StyledAvatar } from '@/Avatars/Avatar/styles';
+import { IconAvatarEmpty } from '@remember-web/icon';
+import type { ConvertTransientProps } from '@remember-web/shared/types/styles';
+
+export type AvatarProps = Partial<ConvertTransientProps<StyledAvatarProps>> &
+  ComponentPropsWithoutRef<'div'>;
+
+const Avatar: ForwardRefRenderFunction<HTMLDivElement, AvatarProps> = (
+  {
+    size = 'medium',
+    backgroundColor = bg200,
+    border = { color: divider, width: '1px' },
+    rounded = true,
+    imageUrl,
+    children,
+  }: AvatarProps,
+  ref
+) => (
+  <StyledAvatar
+    ref={ref}
+    $size={size}
+    $backgroundColor={backgroundColor}
+    $border={border}
+    $rounded={rounded}
+  >
+    {imageUrl ? (
+      <img src={imageUrl} loading="lazy" alt="avatar" />
+    ) : (
+      children ?? <IconAvatarEmpty size="100%" />
+    )}
+  </StyledAvatar>
+);
+
+export default forwardRef(Avatar);

package/src/Avatars/Avatar/styles.ts

@@ -0,0 +1,47 @@
+import styled from 'styled-components';
+import type { CSSProperties } from 'react';
+
+export const avatarSize = {
+  xxlarge: 64,
+  xlarge: 56,
+  large: 48,
+  medium: 40,
+  small: 32,
+  xsmall: 24,
+  xxsmall: 20,
+};
+
+export interface StyledAvatarProps {
+  $size: keyof typeof avatarSize;
+  $border?: {
+    width?: NonNullable<CSSProperties['borderWidth']>;
+    color?: NonNullable<CSSProperties['borderColor']>;
+  };
+  $rounded?: boolean;
+  $imageUrl?: string;
+  $backgroundColor?: CSSProperties['backgroundColor'];
+}
+
+export const StyledAvatar = styled.div<StyledAvatarProps>(
+  ({ $size, $border, $backgroundColor, $rounded }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: `${avatarSize[$size]}px`,
+    maxWidth: `${avatarSize[$size]}px`,
+    maxHeight: `${avatarSize[$size]}px`,
+    aspectRatio: '1 / 1',
+    boxSizing: 'border-box',
+    border: $border ? `${$border.width} solid ${$border.color}` : 'none',
+    borderRadius: $rounded ? '50%' : 'none',
+
+    backgroundColor: $backgroundColor,
+
+    contain: 'strict',
+
+    img: {
+      width: '100%',
+      height: '100%',
+    },
+  })
+);

package/src/Avatars/index.ts

@@ -0,0 +1 @@
+export { default as Avatar } from './Avatar';

package/src/Badge/Badge.stories.tsx

@@ -0,0 +1,85 @@
+import type { StoryObj } from '@storybook/react';
+import styled from 'styled-components';
+import { badgePseudo } from '@/Badge/utils';
+import type { BadgeAttribute } from '@/Badge/types';
+
+import { Badge } from '@/Badge/Badge';
+
+type Story = StoryObj<typeof Badge>;
+
+const meta = {
+  title: 'Badge/Badge',
+} as const;
+
+type Args = {
+  type: 'string' | 'number';
+  value_max?: number;
+  value_current?: number;
+  value_string?: string;
+};
+
+export const Default = {
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['number', 'string'],
+    },
+    value_max: {
+      if: { arg: 'type', eq: 'number' },
+      control: 'number',
+    },
+    value_current: {
+      if: { arg: 'type', eq: 'number' },
+      control: 'number',
+    },
+    value_string: {
+      if: { arg: 'type', eq: 'string' },
+      control: 'text',
+    },
+  },
+  args: {
+    type: 'number',
+    value_current: 152,
+  },
+  render: (props: Args) => {
+    if (props.type === 'number') {
+      return (
+        <Badge value={{ current: props.value_current, max: props.value_max }} />
+      );
+    }
+    return <Badge value={props.value_string ?? ''} />;
+  },
+};
+
+const { getBadgePseudoCss, getBadgeAttr } = badgePseudo;
+
+export const PseudoBadge: Story = {
+  render: () => (
+    <>
+      <AddonBadgeComponent>
+        data-badge-value attribute empty
+      </AddonBadgeComponent>
+      <br />
+      <AddonBadgeComponent {...getBadgeAttr({ current: 152 })}>
+        숫자
+      </AddonBadgeComponent>
+      <br />
+      <AddonBadgeComponent {...getBadgeAttr('하이하이')}>
+        한글
+      </AddonBadgeComponent>
+      <br />
+      <AddonBadgeComponent {...getBadgeAttr('')}>값 없음</AddonBadgeComponent>
+    </>
+  ),
+};
+
+const AddonBadgeComponent = styled.div<BadgeAttribute>`
+  position: relative;
+  padding: 16px;
+  width: max-content;
+  background: aliceblue;
+  border-radius: 8px;
+
+  ${getBadgePseudoCss('after')};
+`;
+export default meta;

package/src/Badge/Badge.tsx

@@ -0,0 +1,9 @@
+import { StyledBadge } from '@/Badge/style';
+import type { BadgeValueProps } from '@/Badge/types';
+import { getBadgeValue } from '@/Badge/utils';
+
+export type BadgeProps = { value: BadgeValueProps };
+
+export function Badge({ value }: BadgeProps) {
+  return <StyledBadge>{getBadgeValue(value)}</StyledBadge>;
+}

package/src/Badge/index.ts

@@ -0,0 +1,3 @@
+export { badgePseudo } from './utils';
+export * from './Badge';
+export * from './types';

package/src/Badge/style.tsx

@@ -0,0 +1,45 @@
+import styled, { css } from 'styled-components';
+import {
+  contents999,
+  getTypographyStyles,
+  secondary100,
+} from '@remember-web/mixin';
+
+/**
+ * pseudo로 사용시 data-badge-value attribue가 필요합니다.
+ */
+export const badgeCss = css`
+  ${getTypographyStyles('Subtitle2')}
+
+  display: inline-block;
+  box-sizing: border-box;
+  line-height: 16px;
+  min-height: 8px;
+  background: ${secondary100};
+  color: ${contents999};
+  border-radius: 8px;
+  padding: 1px 4px 0 4px;
+`;
+
+/**
+ * @param pseudo - default: 'after'
+ * @param top - default: 0
+ * @param right - default: 0
+ */
+export const getBadgePseudoCss = (
+  pseudo: 'after' | 'before' = 'after',
+  { top = 0, right = 0 } = {}
+) => css`
+  &[data-badge-value]::${pseudo} {
+    ${badgeCss};
+    content: attr(data-badge-value);
+    position: absolute;
+    top: ${top};
+    right: ${right};
+    transform: translate(50%, -50%);
+  }
+`;
+
+export const StyledBadge = styled.span`
+  ${badgeCss};
+`;

package/src/Badge/types.ts

@@ -0,0 +1,15 @@
+import type { badgePseudo } from '@/Badge/utils';
+
+export type BadgeValueProps =
+  | {
+      /**
+       * @default 99
+       */
+      max?: number;
+      current?: number;
+    }
+  | string;
+
+export type BadgeAttribute = Partial<
+  ReturnType<(typeof badgePseudo)['getBadgeAttr']>
+>;

package/src/Badge/utils.ts

@@ -0,0 +1,20 @@
+import type { BadgeValueProps } from '@/Badge/types';
+
+import { getBadgePseudoCss } from '@/Badge/style';
+
+export const getBadgeValue = (props: BadgeValueProps): string => {
+  if (typeof props === 'string') {
+    return props;
+  }
+
+  const { max = 99, current = 0 } = props;
+
+  return current > max ? `${max}+` : `${current}`;
+};
+
+export const badgePseudo = {
+  getBadgePseudoCss,
+  getBadgeAttr: (props: BadgeValueProps) => ({
+    'data-badge-value': getBadgeValue(props),
+  }),
+};

package/src/Buttons/Button/Button.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { createElement } from 'react';
+
+import {
+  getIconComponentFromName,
+  iconNames,
+  isIconName,
+} from '@/stories/util';
+
+import Button from '.';
+
+type Story = StoryObj<typeof Button>;
+
+const meta = {
+  title: 'Buttons/Button',
+  component: Button,
+  argTypes: {
+    icon: { control: 'select', options: iconNames },
+    color: { control: 'color' },
+    variant: { control: 'select', options: ['primary', 'outline'] },
+    size: { control: 'select', options: ['small', 'medium', 'large'] },
+    children: { control: 'text' },
+    layout: {
+      control: 'select',
+      options: ['inline', 'block', 'fullBlock'],
+    },
+    type: {
+      control: 'select',
+      options: ['button', 'submit', 'reset'],
+    },
+    isLoading: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+  },
+  args: {
+    children: '버튼',
+  },
+} satisfies Meta<typeof Button>;
+
+export const Default: Story = {
+  render: ({ icon, ...args }) => {
+    const iconString = String(icon);
+    const iconElement =
+      icon &&
+      isIconName(iconString) &&
+      createElement(getIconComponentFromName(iconString));
+
+    return <Button {...args} icon={iconElement} />;
+  },
+};
+
+export const AnchorButton: Story = {
+  render: ({ icon, ...args }) => {
+    const iconString = String(icon);
+    const iconElement =
+      icon &&
+      isIconName(iconString) &&
+      createElement(getIconComponentFromName(iconString));
+
+    return <Button {...args} icon={iconElement} as="a" href="#" />;
+  },
+};
+
+export default meta;

package/src/Buttons/Button/const.ts

@@ -0,0 +1,57 @@
+import type { SpinnerSize } from '@/Common/Spinner/types';
+import { contents000, contents300, contents999 } from '@remember-web/mixin';
+
+import type { ButtonSize, ButtonVariant } from './types';
+
+export const BUTTON_SIZES = {
+  small: {
+    typography: 'Body2_M',
+    height: '32px',
+    minWidth: '68px',
+    padding: '0 16px',
+  },
+  medium: {
+    typography: 'Body1_M',
+    height: '36px',
+    minWidth: '78px',
+    padding: '0 20px',
+  },
+  large: {
+    typography: 'Headline4_M',
+    height: '44px',
+    minWidth: '108px',
+    padding: '0 20px',
+  },
+  xLarge: {
+    typography: 'Headline4_M',
+    height: '52px',
+    minWidth: '116px',
+    padding: '0 24px',
+  },
+} as const satisfies Record<ButtonSize, unknown>;
+
+export const BUTTON_COLORS = {
+  primary: {
+    backgroundColor: contents000,
+    color: contents999,
+  },
+  outline: {
+    backgroundColor: 'transparent',
+    color: contents000,
+    borderColor: contents300,
+  },
+} as const satisfies Record<ButtonVariant, unknown>;
+
+export const SPINNER_SIZE_MAP = {
+  small: 'small',
+  medium: 'small',
+  large: 'medium',
+  xLarge: 'medium',
+} as const satisfies Record<ButtonSize, SpinnerSize>;
+
+export const ICON_GAP_MAP = {
+  small: '4px',
+  medium: '4px',
+  large: '8px',
+  xLarge: '8px',
+} as const satisfies Record<ButtonSize, string>;

package/src/Buttons/Button/index.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import type { ElementType, ForwardRefRenderFunction } from 'react';
+import { forwardRef } from 'react';
+
+import type { As } from '@remember-web/shared/types';
+import { Spinner } from '@/Common';
+
+import { SPINNER_SIZE_MAP } from './const';
+import { StyledButton } from './styles';
+import type { ButtonProps, ButtonSize } from './types';
+
+const Button: ForwardRefRenderFunction<
+  HTMLButtonElement,
+  ButtonProps<'button'> & As<ElementType>
+> = (
+  {
+    children,
+    color,
+    size = 'small',
+    variant = 'primary',
+    layout = 'block',
+    isLoading = false,
+    filled = variant === 'primary',
+    icon,
+    iconPosition = 'left',
+    ...props
+  },
+  ref
+) => (
+  <StyledButton
+    $color={color}
+    $size={size}
+    $variant={variant}
+    $layout={layout}
+    $isLoading={isLoading}
+    $filled={filled}
+    aria-live="polite"
+    aria-busy={isLoading}
+    ref={ref}
+    {...props}
+  >
+    {isLoading ? (
+      <Spinner size={SPINNER_SIZE_MAP[size]} />
+    ) : (
+      <>
+        {iconPosition === 'left' && icon}
+        {children}
+        {iconPosition === 'right' && icon}
+      </>
+    )}
+  </StyledButton>
+);
+
+type ButtonComponentWithRef = <T extends ElementType = 'button'>(
+  props: { as?: T | null } & ButtonProps<T> & {
+      ref?: React.ComponentPropsWithRef<T>['ref'];
+    }
+) => React.ReactElement | null;
+
+export default forwardRef(Button) as ButtonComponentWithRef;