@remember-web/primitive 0.0.0-alpha.1

package/src/Buttons/Button/styles.ts

@@ -0,0 +1,116 @@
+'use client';
+
+import type { DataAttributes } from 'styled-components';
+import styled, { css } from 'styled-components';
+
+import {
+  bg100,
+  disabled,
+  getTypographyStyles,
+  primary100,
+  primary200,
+} from '@remember-web/mixin';
+
+import { BUTTON_COLORS, BUTTON_SIZES, ICON_GAP_MAP } from './const';
+import type { ButtonStyleProps } from './types';
+
+export const StyledButton = styled.button<ButtonStyleProps & DataAttributes>(
+  ({ $size, $layout, $color, ...props }) => [
+    // 공용 스타일
+    css`
+      all: unset;
+      appearance: none;
+
+      box-sizing: border-box;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+      user-select: none;
+      -webkit-tap-highlight-color: transparent;
+      -webkit-user-select: none;
+
+      display: ${$layout === 'inline' ? 'inline-flex' : 'flex'};
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+      gap: ${ICON_GAP_MAP[$size]};
+
+      ${getTypographyStyles(BUTTON_SIZES[$size].typography)}
+      text-align: center;
+
+      width: fit-content;
+      ${$layout === 'fullBlock' && `width: 100%;`}
+      min-width: ${BUTTON_SIZES[$size].minWidth};
+      height: ${BUTTON_SIZES[$size].height};
+      padding: ${BUTTON_SIZES[$size].padding};
+      border-radius: 4px;
+
+      color: ${(props.$variant.startsWith('outline') ? $color : null) ??
+      BUTTON_COLORS[props.$variant].color};
+
+      &:focus-visible:not(:disabled) {
+        outline: 2px solid ${primary100};
+        outline-offset: 2px;
+      }
+
+      &:disabled {
+        cursor: not-allowed;
+
+        &::before {
+          display: none;
+        }
+      }
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: ${primary200};
+        opacity: 0;
+        pointer-events: none;
+
+        transition: opacity 0.2s;
+      }
+      @media (hover: hover) {
+        &:hover::before {
+          opacity: 0.1;
+        }
+      }
+      &:active::before {
+        opacity: 0.2;
+      }
+    `,
+
+    // primary 스타일
+    props.$variant === 'primary' &&
+      css`
+        background-color: ${$color ??
+        BUTTON_COLORS[props.$variant].backgroundColor};
+        &:disabled {
+          background-color: ${disabled};
+        }
+        &::before {
+          background-color: ${primary200};
+        }
+      `,
+
+    // outline 스타일
+    props.$variant === 'outline' &&
+      css`
+        background-color: ${props.$filled
+          ? bg100
+          : BUTTON_COLORS[props.$variant].backgroundColor};
+        border: 1px solid ${$color ?? BUTTON_COLORS[props.$variant].borderColor};
+        &:disabled {
+          border-color: ${disabled};
+          color: ${disabled};
+        }
+        &::before {
+          background-color: ${$color ?? primary100};
+        }
+      `,
+  ]
+);

package/src/Buttons/Button/types.ts

@@ -0,0 +1,32 @@
+import type { ElementType } from 'react';
+
+import type { ConvertTransientProps } from '@remember-web/shared/types';
+import type { ColorVariable } from '@remember-web/mixin';
+
+export type ButtonSize = 'small' | 'medium' | 'large' | 'xLarge';
+
+export type ButtonVariant = 'primary' | 'outline';
+
+export type ButtonLayout = 'inline' | 'block' | 'fullBlock';
+
+export type ButtonColor = ColorVariable | string;
+
+export interface ButtonStyleProps {
+  $size: ButtonSize;
+  $color?: ButtonColor;
+  $variant: ButtonVariant;
+  $layout: ButtonLayout;
+  $isLoading: boolean;
+  $filled?: boolean;
+}
+
+type ConvertProps = ConvertTransientProps<Partial<ButtonStyleProps>>;
+
+export type ButtonProps<AsT extends ElementType> = Omit<
+  React.ComponentPropsWithoutRef<AsT>,
+  keyof ButtonStyleProps | 'icon' | 'iconPosition'
+> &
+  ConvertProps & {
+    icon?: React.ReactNode;
+    iconPosition?: 'left' | 'right';
+  };

package/src/Buttons/index.ts

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

package/src/Common/Divider/Divider.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Flex } from '../Flex';
+import { Divider } from './index';
+
+type Story = StoryObj<typeof Divider>;
+
+const meta = {
+  title: 'Common/Divider',
+  component: Divider,
+} satisfies Meta<typeof Divider>;
+
+export const Default: Story = {
+  render: () => (
+    <div
+      style={{
+        width: '100%',
+        maxWidth: 300,
+        padding: '15px',
+        background: 'white',
+      }}
+    >
+      <p style={{ fontWeight: 500 }}>리멤버 디자인시스템</p>
+      <p>An open-source design system library.</p>
+      <Divider style={{ margin: '15px 0' }} />
+      <Flex height="20px">
+        <p>Blog</p>
+        <Divider
+          decorative
+          orientation="vertical"
+          style={{ margin: '0 15px' }}
+        />
+        <p>Docs</p>
+        <Divider
+          decorative
+          orientation="vertical"
+          style={{ margin: '0 15px' }}
+        />
+        <p>Source</p>
+      </Flex>
+    </div>
+  ),
+};
+
+export default meta;

package/src/Common/Divider/index.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import styled from 'styled-components';
+
+import { divider } from '@remember-web/mixin';
+
+export interface DividerProps extends SeparatorPrimitive.SeparatorProps {
+  color?: string;
+}
+
+const StyledDivider = styled(SeparatorPrimitive.Root)<DividerProps>`
+  background-color: ${({ color = divider }) => color};
+  &[data-orientation='horizontal'] {
+    height: 1px;
+    width: 100%;
+  }
+
+  &[data-orientation='vertical'] {
+    height: 100%;
+    width: 1px;
+  }
+`;
+
+/**
+ * @prop {"horizontal" | "vertical"} orientation - default: "horizontal"
+ * @prop {boolean} decorative - pure한 장식 컴포넌트 여부. true일 경우 웹 접근성 속성에서 제거됨.
+ */
+export const Divider = (props: DividerProps) => <StyledDivider {...props} />;

package/src/Common/Flex/index.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import type { CSSProperties, ElementType, HTMLAttributes } from 'react';
+import styled, { css } from 'styled-components';
+
+import type { ConvertTransientProps } from '@remember-web/shared/types/styles';
+
+export interface FlexProps extends HTMLAttributes<HTMLDivElement> {
+  as?: ElementType;
+  $align?: CSSProperties['alignItems'];
+  $direction?: CSSProperties['flexDirection'];
+  $justify?: CSSProperties['justifyContent'];
+  $wrap?: CSSProperties['flexWrap'];
+  $gap?: string | number;
+  $width?: string | number;
+  $height?: string | number;
+}
+
+const StyledFlex = styled.div<Partial<FlexProps>>(
+  ({
+    $align = 'center',
+    $direction = 'row',
+    $justify = 'center',
+    $wrap = 'nowrap',
+    $gap = 0,
+    $width = 'auto',
+    $height = 'auto',
+  }) => css`
+    box-sizing: border-box;
+    display: flex;
+    width: ${typeof $width === 'number' ? `${$width}px` : $width};
+    height: ${typeof $height === 'number' ? `${$height}px` : $height};
+
+    gap: ${typeof $gap === 'number' ? `${$gap}px` : $gap};
+    align-items: ${$align};
+    justify-content: ${$justify};
+    flex-direction: ${$direction};
+    flex-wrap: ${$wrap};
+  `
+);
+
+/**
+ * @prop {string} width
+ * @prop {string} height
+ * @prop {string} gap
+ * @prop {CSSProperties['alignItems']} align
+ * @prop {CSSProperties['justifyContent']} justify
+ * @prop {CSSProperties['flexDirection']} direction
+ * @prop {CSSProperties['flexWrap']} wrap
+ */
+export const Flex = ({
+  as,
+  width,
+  height,
+  direction,
+  gap,
+  align,
+  justify,
+  wrap,
+  ...props
+}: ConvertTransientProps<FlexProps>) => (
+  <StyledFlex
+    as={as}
+    $width={width}
+    $height={height}
+    $direction={direction}
+    $gap={gap}
+    $align={align}
+    $justify={justify}
+    $wrap={wrap}
+    {...props}
+  />
+);

package/src/Common/Grid/index.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import type { CSSProperties, HTMLAttributes } from 'react';
+import styled from 'styled-components';
+
+export interface GridProps extends HTMLAttributes<HTMLDivElement> {
+  width?: string;
+  height?: string;
+  align?: CSSProperties['alignItems'];
+  justify?: CSSProperties['justifyContent'];
+  flow?: CSSProperties['gridAutoFlow'];
+  columns?: number;
+  gap?: string;
+  columnGap?: string;
+  rowGap?: string;
+}
+
+const StyledGrid = styled.div<Partial<GridProps>>`
+  box-sizing: border-box;
+  display: grid;
+  width: ${({ width = '100%' }) => width};
+  height: ${({ height = '100%' }) => height};
+  align-items: ${({ align = 'center' }) => align};
+  justify-content: ${({ justify = 'center' }) => justify};
+  grid-auto-flow: ${({ flow = 'center' }) => flow};
+  grid-template-columns: ${({ columns = 1 }) => `repeat(${columns}, 1fr)`};
+  gap: ${({ gap = '0px' }) => gap};
+  column-gap: ${({ columnGap = '0px' }) => columnGap};
+  row-gap: ${({ rowGap = '0px' }) => rowGap};
+`;
+
+/**
+ * @prop {string} width
+ * @prop {string} height
+ * @prop {CSSProperties['alignItems']} align
+ * @prop {CSSProperties['justifyContent']} justify
+ * @prop {CSSProperties['gridAutoFlow']} flow
+ * @prop {number} columns
+ * @prop {string} gap
+ * @prop {string} columnGap
+ * @prop {string} rowGap
+ */
+export const Grid = (props: GridProps) => <StyledGrid {...props} />;

package/src/Common/Spinner/Spinner.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { divider } from '@remember-web/mixin';
+
+import { Spinner } from './index';
+
+type Story = StoryObj<typeof Spinner>;
+
+const meta = {
+  title: 'Common/Spinner',
+  component: Spinner,
+  args: {},
+} satisfies Meta<typeof Spinner>;
+
+export const Default: Story = {
+  render: (args) => (
+    <div
+      style={{
+        border: `solid 1px ${divider}`,
+        height: '100px',
+        width: '100px',
+      }}
+    >
+      <Spinner {...args} />
+    </div>
+  ),
+};
+
+export default meta;

package/src/Common/Spinner/index.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { IconSpinner } from '@remember-web/icon';
+
+import { Container } from './styles';
+import type { SpinnerProps } from './types';
+
+export const Spinner = ({
+  size = 'small',
+  className,
+  color,
+  layout = 'block',
+}: SpinnerProps) => (
+  <Container className={className} $color={color} layout={layout}>
+    <IconSpinner size={size} />
+  </Container>
+);

package/src/Common/Spinner/styles.ts

@@ -0,0 +1,30 @@
+'use client';
+
+import styled, { css, keyframes } from 'styled-components';
+
+import type { SpinnerStyleProps } from './types';
+
+const RotateAnimation = keyframes`
+  to { transform: rotate(360deg); };
+`;
+
+export const Container = styled.div<SpinnerStyleProps>(
+  ({ $color, layout }) => css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: fit-content;
+    height: fit-content;
+    ${layout === 'full' &&
+    css`
+      width: 100%;
+      height: 100%;
+    `}
+
+    ${$color && `color: ${$color};`};
+
+    & > svg {
+      animation: ${RotateAnimation} 1.5s linear infinite;
+    }
+  `
+);

package/src/Common/Spinner/types.ts

@@ -0,0 +1,16 @@
+import type { ConvertTransientProps } from '@remember-web/shared/types/styles';
+import type { ColorVariable } from '@remember-web/mixin';
+
+export type SpinnerLayout = 'full' | 'block';
+export type SpinnerSize = 'small' | 'medium' | 'large' | number;
+
+export interface SpinnerStyleProps {
+  $color?: ColorVariable | string;
+  layout?: SpinnerLayout;
+}
+
+export interface SpinnerProps extends ConvertTransientProps<SpinnerStyleProps> {
+  children?: React.ReactNode;
+  className?: string;
+  size?: SpinnerSize;
+}

package/src/Common/Typography/Typography.stories.tsx

@@ -0,0 +1,96 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { renderToStaticMarkup } from 'react-dom/server';
+
+import {
+  Paper,
+  Table,
+  TableBody,
+  TableColumn,
+  TableHeader,
+  TableRow,
+  TitleContainer,
+} from '@/stories/common.styles';
+import type { TypographyStyle } from '@remember-web/mixin';
+import { TYPOGRAPHY_STYLES } from '@remember-web/mixin';
+
+import Typography from '.';
+
+type Story = StoryObj<typeof Typography>;
+
+const meta = {
+  title: 'Typography/Typography',
+  component: Typography,
+} satisfies Meta<typeof Typography>;
+
+export const Overview: Story = {
+  render: () => (
+    <Paper $minWidth={640} $maxWidth={800}>
+      <TitleContainer>
+        <Typography variant="Headline2_B">Typography</Typography>
+      </TitleContainer>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableColumn isHeader>StyleName</TableColumn>
+            <TableColumn isHeader align="center">
+              FontSize
+            </TableColumn>
+            <TableColumn isHeader align="center">
+              LineHeight
+            </TableColumn>
+            <TableColumn isHeader align="center">
+              FontWeight
+            </TableColumn>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {Object.entries(TYPOGRAPHY_STYLES).map(([key, value]) => {
+            const { fontSize, fontWeight, lineHeight } = value;
+            return (
+              <TableRow key={key}>
+                <TableColumn>
+                  <Typography variant={key as TypographyStyle}>
+                    {key}
+                  </Typography>
+                </TableColumn>
+                <TableColumn align="center">{fontSize}px</TableColumn>
+                <TableColumn align="center">{lineHeight}px</TableColumn>
+                <TableColumn align="center">{fontWeight}</TableColumn>
+              </TableRow>
+            );
+          })}
+        </TableBody>
+      </Table>
+    </Paper>
+  ),
+};
+
+export const Variants: Story = {
+  render: (args) => (
+    <Paper>
+      <TitleContainer>
+        <Typography variant="Headline4_B">적용 스타일</Typography>
+        <Typography {...args}>{args.children || args.variant}</Typography>
+      </TitleContainer>
+      <Typography variant="Headline4_B">실제 마크업</Typography>
+      {renderToStaticMarkup(
+        <Typography {...args}>{args.children || args.variant}</Typography>
+      )}
+    </Paper>
+  ),
+  args: { variant: 'Headline2_B' },
+};
+
+export const Ellipsis: Story = {
+  render: ({ variant, ...args }) => (
+    <Paper>
+      <Typography variant="Body1" ellipsis={1} maxWidth={160} {...args}>
+        아주긴이름아주긴이름아주긴이 름아주긴이름아주
+        긴이름아주긴이름아주긴이름아주긴이름
+      </Typography>
+    </Paper>
+  ),
+  args: { variant: 'Headline2_B' },
+};
+
+export default meta;

package/src/Common/Typography/index.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import type {
+  ComponentPropsWithoutRef,
+  ComponentPropsWithRef,
+  CSSProperties,
+  ElementType,
+  ReactElement,
+  ReactNode,
+} from 'react';
+import { forwardRef } from 'react';
+
+import { type TypographyStyle } from '@remember-web/mixin';
+
+import { StyledTypography } from './styles';
+
+const Typography = <T extends ElementType>(
+  {
+    variant,
+    as,
+    color,
+    children,
+    ellipsis,
+    maxWidth,
+    ...props
+  }: TypographyProps<T>,
+  ref: ComponentPropsWithRef<T>['ref']
+) => (
+  <StyledTypography
+    ref={ref}
+    as={as}
+    $variant={variant}
+    $color={color}
+    $ellipsis={ellipsis}
+    $maxWidth={maxWidth}
+    {...props}
+  >
+    {children}
+  </StyledTypography>
+);
+
+type TypographyProps<T extends ElementType> = {
+  variant: TypographyStyle;
+  as?: T;
+  color?: string;
+  children?: ReactNode;
+  ellipsis?: number;
+  maxWidth?: CSSProperties['maxWidth'];
+} & ComponentPropsWithoutRef<T>;
+
+type TypographyComponentWithRef = <T extends ElementType = 'div'>(
+  props: TypographyProps<T> & { ref?: ComponentPropsWithRef<T>['ref'] }
+) => ReactElement | null;
+
+export default forwardRef(Typography) as TypographyComponentWithRef;

package/src/Common/Typography/styles.ts

@@ -0,0 +1,23 @@
+'use client';
+
+import styled, { css } from 'styled-components';
+import type { CSSProperties } from 'react';
+
+import {
+  ellipsis,
+  getTypographyStyles,
+  type TypographyStyle,
+} from '@remember-web/mixin';
+
+export const StyledTypography = styled.div<{
+  $variant: TypographyStyle;
+  $color?: string;
+  $ellipsis?: number;
+  $maxWidth?: CSSProperties['maxWidth'];
+}>`
+  ${({ $color, $variant, $ellipsis, $maxWidth }) => [
+    getTypographyStyles($variant),
+    $ellipsis && ellipsis($ellipsis),
+    css({ color: $color, maxWidth: $maxWidth }),
+  ]};
+`;

package/src/Common/index.ts

@@ -0,0 +1,5 @@
+export * from './Divider';
+export * from './Flex';
+export * from './Grid';
+export * from './Spinner';
+export { default as Typography } from './Typography';

package/src/Control/BaseToggle/ToggleIcon/index.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import {
+  ControlBookmarkOff,
+  ControlBookmarkOn,
+  ControlCheckOff,
+  ControlCheckOn,
+  ControlCheckboxOff,
+  ControlCheckboxOn,
+  ControlFavoriteOff,
+  ControlFavoriteOn,
+  ControlRadioOff,
+  ControlRadioOn,
+} from '@remember-web/icon';
+
+import {
+  SVG_SIZES,
+  isSvgRegularSize,
+  type SvgSizeProps,
+  type WithSvgSizeComponentType,
+} from '@remember-web/icon/util';
+
+import type { ToggleStatusType, ToggleVariantType } from '../types';
+
+const ICON_NAME = {
+  check: { on: ControlCheckOn, off: ControlCheckOff },
+  checkbox: { on: ControlCheckboxOn, off: ControlCheckboxOff },
+  favorite: { on: ControlFavoriteOn, off: ControlFavoriteOff },
+  bookmark: { on: ControlBookmarkOn, off: ControlBookmarkOff },
+  radio: { on: ControlRadioOn, off: ControlRadioOff },
+} as const satisfies Record<
+  ToggleVariantType,
+  Record<ToggleStatusType, WithSvgSizeComponentType>
+>;
+
+export function ToggleIcon({
+  size,
+  status,
+  variant,
+  className,
+}: {
+  variant: ToggleVariantType;
+  status: ToggleStatusType;
+  className?: string;
+} & SvgSizeProps) {
+  const iconSize =
+    typeof size === 'string' && isSvgRegularSize(size) ? SVG_SIZES[size] : size;
+  const Icon = ICON_NAME[variant][status];
+
+  return <Icon className={className} size={iconSize} />;
+}