@kimdw-rtk/ui 0.0.0 → 0.0.2

package/.vscode/settings.json

@@ -1,4 +0,0 @@
-{
-  "typescript.preferences.importModuleSpecifier": "non-relative",
-  "typescript.tsdk": "node_modules\\typescript\\lib"
-}

package/eslint.config.mjs

@@ -1,4 +0,0 @@
-import { config } from "@repo/eslint-config/react-internal";
-
-/** @type {import("eslint").Linter.Config} */
-export default config;

package/jest.config.json

@@ -1,10 +0,0 @@
-{
-  "testEnvironment": "jsdom",
-  "setupFilesAfterEnv": ["<rootDir>/jest.setup.js"],
-  "transform": {
-    "\\.css\\.ts$": "@vanilla-extract/jest-transform",
-    "^.+\\.(ts|tsx)?$": "ts-jest",
-    "^.+\\.[t|j]sx?$": "babel-jest"
-  },
-  "testPathIgnorePatterns": ["/node_modules/", "/dist/"]
-}

package/jest.setup.js

@@ -1,2 +0,0 @@
-import '@testing-library/jest-dom';
-import '@vanilla-extract/css/disableRuntimeStyles';

package/src/components/Accordion/Accordion.css.ts

@@ -1,29 +0,0 @@
-import { createVar } from '@vanilla-extract/css';
-
-import { recipeWithLayer } from '#styleUtils';
-import { theme } from '#themes';
-
-export const paddingVar = createVar();
-
-export const accordion = recipeWithLayer({
-  base: {
-    width: '100%',
-    borderBottom: `1px solid rgb(${theme.color.border})`,
-  },
-
-  variants: {
-    isPadding: {
-      true: {
-        vars: {
-          [paddingVar]: '0.75em',
-        },
-      },
-
-      false: {
-        vars: {
-          [paddingVar]: '0.75em 0',
-        },
-      },
-    },
-  },
-});

package/src/components/Accordion/Accordion.spec.tsx

@@ -1,6 +0,0 @@
-import { Accordion } from '.';
-import { uiTest } from '../../tests/uiTest';
-
-describe('Accordion 컴포넌트', () => {
-  uiTest(Accordion, 'Accordion');
-});

package/src/components/Accordion/Accordion.tsx

@@ -1,44 +0,0 @@
-'use client';
-
-import { forwardRef, useReducer } from 'react';
-
-import clsx from 'clsx';
-
-import { sx } from '#styles';
-import type { UIComponent } from '#types';
-
-import * as s from './Accordion.css';
-import { AccordionContext, accordionReducer } from './AccordionContext';
-
-interface AccordionProps extends UIComponent<'div', typeof s.accordion> {
-  isExpanded?: boolean;
-}
-
-export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
-  (
-    {
-      children,
-      className,
-      isPadding = true,
-      isExpanded: initIsExpaned = false,
-      sx: propSx,
-      ...props
-    },
-    ref,
-  ) => {
-    const [isExpanded, dispatch] = useReducer(accordionReducer, initIsExpaned);
-
-    return (
-      <div
-        ref={ref}
-        className={clsx(s.accordion({ isPadding }), className, sx(propSx))}
-        {...props}
-      >
-        <AccordionContext.Provider value={{ isExpanded, dispatch }}>
-          {children}
-        </AccordionContext.Provider>
-      </div>
-    );
-  },
-);
-Accordion.displayName = 'Accordion';

package/src/components/Accordion/AccordionContent.css.ts

@@ -1,29 +0,0 @@
-import { recipeWithLayer, styleWithLayer } from '#styleUtils';
-
-import { paddingVar } from './Accordion.css';
-
-export const container = recipeWithLayer({
-  base: {
-    overflow: 'hidden',
-
-    transition: 'height 0.2s ease, opacity 0.2s ease',
-  },
-
-  variants: {
-    isExpanded: {
-      true: {
-        opacity: '1',
-      },
-
-      false: {
-        height: '0',
-
-        opacity: '0',
-      },
-    },
-  },
-});
-
-export const inner = styleWithLayer({
-  padding: paddingVar,
-});

package/src/components/Accordion/AccordionContent.tsx

@@ -1,87 +0,0 @@
-'use client';
-
-import {
-  type ReactNode,
-  useContext,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-} from 'react';
-
-import * as s from './AccordionContent.css';
-import { AccordionContext } from './AccordionContext';
-
-interface AccordionContentProps {
-  children: ReactNode;
-}
-
-export const AccordionContent = ({ children }: AccordionContentProps) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const accordionContext = useContext(AccordionContext);
-  const initRef = useRef<boolean>(true);
-
-  if (!accordionContext) {
-    throw new Error(
-      'AccordionContent must be used within an Accordion component.',
-    );
-  }
-
-  const { isExpanded } = accordionContext;
-
-  useLayoutEffect(() => {
-    const container = containerRef.current;
-    if (!container) {
-      return;
-    }
-
-    if (!isExpanded) {
-      container.style.height = `${container.scrollHeight}px`;
-      container.className = s.container({ isExpanded });
-      //eslint-disable-next-line
-      container.offsetTop;
-      container.style.height = '0';
-      initRef.current = false;
-      return;
-    }
-
-    if (initRef.current) {
-      container.style.height = 'auto';
-    } else {
-      container.style.height = `${container.scrollHeight}px`;
-    }
-    container.className = s.container({ isExpanded });
-
-    initRef.current = false;
-  }, [isExpanded]);
-
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container) {
-      return;
-    }
-
-    const handleTransitionEnd = (e: TransitionEvent) => {
-      if (
-        e.target !== container ||
-        e.propertyName !== 'height' ||
-        !isExpanded
-      ) {
-        return;
-      }
-
-      container.style.height = 'auto';
-    };
-
-    container.addEventListener('transitionend', handleTransitionEnd);
-
-    return () => {
-      container.removeEventListener('transitionend', handleTransitionEnd);
-    };
-  }, [containerRef, isExpanded]);
-
-  return (
-    <div ref={containerRef} className={s.container({ isExpanded })}>
-      <div className={s.inner}>{children}</div>
-    </div>
-  );
-};

package/src/components/Accordion/AccordionContext.ts

@@ -1,9 +0,0 @@
-import { createContext, type Dispatch } from 'react';
-
-export const AccordionContext = createContext<
-  { isExpanded: boolean; dispatch: Dispatch<boolean> } | undefined
->(undefined);
-
-export const accordionReducer = (_: boolean, action: boolean) => {
-  return action;
-};

package/src/components/Accordion/AccordionTrigger.css.ts

@@ -1,46 +0,0 @@
-import { recipeWithLayer } from '#styleUtils';
-
-import { paddingVar } from './Accordion.css';
-
-export const triggerContainer = recipeWithLayer({
-  base: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: '0.25em',
-
-    width: '100%',
-    padding: paddingVar,
-
-    cursor: 'pointer',
-
-    ':hover': {
-      textDecoration: 'underline',
-    },
-  },
-  variants: {
-    iconPosition: {
-      text: {},
-      right: {
-        justifyContent: 'space-between',
-      },
-    },
-  },
-});
-
-export const arrow = recipeWithLayer({
-  base: {
-    lineHeight: '0',
-
-    transition: 'transform 0.2s ease',
-  },
-  variants: {
-    expand: {
-      true: {
-        transform: 'rotate(-180deg)',
-      },
-      false: {
-        transform: 'rotate(0)',
-      },
-    },
-  },
-});

package/src/components/Accordion/AccordionTrigger.tsx

@@ -1,41 +0,0 @@
-'use client';
-
-import { type ReactNode, useContext } from 'react';
-
-import { ChevronDownIcon } from 'lucide-react';
-
-import { AccordionContext } from './AccordionContext';
-import * as s from './AccordionTrigger.css';
-
-interface AccordionTriggerProps {
-  children: ReactNode;
-  iconPosition?: 'text' | 'right';
-}
-
-export const AccordionTrigger = ({
-  children,
-  iconPosition = 'right',
-}: AccordionTriggerProps) => {
-  const accordionContext = useContext(AccordionContext);
-
-  if (!accordionContext) {
-    throw new Error(
-      'AccordionTrigger must be used within an Accordion component.',
-    );
-  }
-
-  const { dispatch, isExpanded } = accordionContext;
-
-  return (
-    <div
-      className={s.triggerContainer({ iconPosition })}
-      aria-expanded={isExpanded}
-      onClick={() => dispatch(!isExpanded)}
-    >
-      <span>{children}</span>
-      <span className={s.arrow({ expand: isExpanded })}>
-        <ChevronDownIcon size="1em" />
-      </span>
-    </div>
-  );
-};

package/src/components/Accordion/index.ts

@@ -1,3 +0,0 @@
-export * from './Accordion';
-export * from './AccordionContent';
-export * from './AccordionTrigger';

package/src/components/Alert/index.tsx

@@ -1,25 +0,0 @@
-import { type ReactNode } from 'react';
-
-import { useOverlay, usePreventKeyboardInput } from '@kimdw-rtk/utils';
-
-import { Button, Dialog, DialogContent, DialogFooter } from '#components';
-
-interface AlertProps {
-  children: ReactNode;
-}
-
-export const Alert = ({ children }: AlertProps) => {
-  const { close } = useOverlay();
-  usePreventKeyboardInput();
-
-  return (
-    <Dialog>
-      <DialogContent>{children}</DialogContent>
-      <DialogFooter>
-        <Button size="sm" onClick={close}>
-          확인
-        </Button>
-      </DialogFooter>
-    </Dialog>
-  );
-};

package/src/components/Box/Box.css.ts

@@ -1,18 +0,0 @@
-import { recipeWithLayer } from '#styleUtils';
-import { theme } from '#themes';
-
-export const box = recipeWithLayer({
-  variants: {
-    flex: {
-      true: {
-        display: 'flex',
-      },
-    },
-
-    rounded: {
-      true: {
-        borderRadius: theme.borderRadius,
-      },
-    },
-  },
-});

package/src/components/Box/Box.spec.tsx

@@ -1,6 +0,0 @@
-import { Box } from '.';
-import { uiTest } from '../../tests/uiTest';
-
-describe('Box 컴포넌트', () => {
-  uiTest(Box, 'Box');
-});

package/src/components/Box/index.tsx

@@ -1,41 +0,0 @@
-import { forwardRef } from 'react';
-
-import { clsx } from 'clsx';
-
-import { sprinkles, sx, type SprinklesProps } from '#styles';
-import type { UIComponent } from '#types';
-import { filterSprinkles, omitSprinkles } from '#utils';
-
-import * as s from './Box.css';
-
-type BoxProps = UIComponent<'div', typeof s.box> & SprinklesProps;
-
-export const Box = forwardRef<HTMLDivElement, BoxProps>(
-  (
-    {
-      children,
-      flex = false,
-      rounded = false,
-      className,
-      sx: propSx,
-      ...props
-    },
-    ref,
-  ) => {
-    return (
-      <div
-        ref={ref}
-        className={clsx(
-          className,
-          s.box({ flex, rounded }),
-          sx(propSx),
-          sprinkles(filterSprinkles(props)),
-        )}
-        {...omitSprinkles(props)}
-      >
-        {children}
-      </div>
-    );
-  },
-);
-Box.displayName = 'Box';

package/src/components/Button/Button.css.ts

@@ -1,241 +0,0 @@
-import { createVar, globalStyle, keyframes, style } from '@vanilla-extract/css';
-
-import { recipeWithLayer, styleWithLayer } from '#styleUtils';
-import { theme } from '#themes';
-import { semanticColor } from '#tokens';
-
-import { SCALE_COLOR, type ScaleColor } from '../../tokens/scale/color';
-
-const backgroundVar = createVar();
-const foregroundVar = createVar();
-
-const semanticColors = semanticColor.reduce(
-  (prev, color) => ({
-    ...prev,
-    [color]: styleWithLayer({
-      vars: {
-        [backgroundVar]: theme.color[color],
-        [foregroundVar]: theme.color[`${color}-foreground`],
-      },
-    }),
-  }),
-  {} as Record<(typeof semanticColor)[number], string>,
-);
-
-const scaleColors = SCALE_COLOR.reduce(
-  (prev, value) => ({
-    ...prev,
-    [value]: styleWithLayer({
-      vars: {
-        [backgroundVar]: theme.color[value][500],
-        [foregroundVar]: theme.color.background,
-      },
-    }),
-  }),
-  {} as Record<ScaleColor, string>,
-);
-
-const pulse = keyframes({
-  '0%': {
-    backgroundPosition: '-300% 0',
-  },
-
-  '100%': {
-    backgroundPosition: '300% 0',
-  },
-});
-
-export const span = recipeWithLayer({
-  base: {
-    lineHeight: '0',
-  },
-  variants: {
-    size: {
-      sm: {
-        fontSize: '0.875em',
-      },
-
-      md: {
-        fontSize: '1em',
-      },
-
-      lg: {
-        fontSize: '1.125em',
-      },
-
-      'icon-sm': {
-        fontSize: '1em',
-      },
-
-      'icon-md': {
-        fontSize: '1.25em',
-      },
-
-      'icon-lg': {
-        fontSize: '1.5em',
-      },
-    },
-  },
-});
-
-export const button = recipeWithLayer({
-  base: {
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    position: 'relative',
-    overflow: 'hidden',
-
-    border: '0',
-    borderRadius: theme.borderRadius,
-
-    fontSize: '1em',
-
-    transition: 'background-color 0.2s ease, color 0.2s ease',
-
-    cursor: 'pointer',
-    userSelect: 'none',
-  },
-
-  variants: {
-    hasIcon: {
-      true: {
-        gap: '0.5em',
-      },
-    },
-
-    color: {
-      ...semanticColors,
-      ...scaleColors,
-    },
-
-    size: {
-      sm: {
-        height: '2.25em',
-        padding: '0 0.75em',
-      },
-
-      md: {
-        height: '2.5em',
-        padding: '0 0.875em',
-      },
-
-      lg: {
-        height: '2.75em',
-        padding: '0 1em',
-      },
-
-      'icon-sm': {
-        width: '2em',
-        height: '2em',
-      },
-
-      'icon-md': {
-        width: '2.5em',
-        height: '2.5em',
-      },
-
-      'icon-lg': {
-        width: '2.75em',
-        height: '2.75em',
-      },
-    },
-
-    variant: {
-      contained: {
-        boxShadow: `inset 0 0 0 1px rgba(255, 255, 255, 0.08)`,
-        backgroundColor: `rgb(${backgroundVar})`,
-        color: `rgb(${foregroundVar})`,
-
-        ':disabled': {
-          backgroundColor: `rgb(${theme.color.muted})`,
-
-          color: `rgb(${theme.color['muted-foreground']})`,
-
-          cursor: 'default',
-        },
-      },
-
-      outlined: {
-        boxShadow: `inset 0 0 0 1px rgb(${backgroundVar})`,
-        backgroundColor: `rgb(${theme.color.background})`,
-        color: `rgb(${theme.color.foreground})`,
-
-        ':disabled': {
-          backgroundColor: `rgb(${theme.color.muted})`,
-
-          color: `rgb(${theme.color['muted-foreground']})`,
-
-          cursor: 'default',
-        },
-      },
-
-      ghost: {
-        background: 'transparent',
-
-        color: `rgb(${theme.color.foreground})`,
-
-        ':hover': {
-          backgroundColor: `rgba(${backgroundVar}, 0.8)`,
-
-          color: `rgb(${foregroundVar})`,
-        },
-
-        ':disabled': {
-          color: `rgb(${theme.color['muted-foreground']})`,
-
-          cursor: 'default',
-        },
-      },
-
-      glass: {
-        boxShadow: `inset 0 0 0 1px rgba(255, 255, 255, 0.08)`,
-        backgroundColor: `rgba(${backgroundVar}, 0.75)`,
-        backdropFilter: 'blur(1rem)',
-
-        color: `rgb(${theme.color.foreground})`,
-
-        ':disabled': {
-          backgroundColor: `rgb(${theme.color.muted})`,
-
-          color: `rgb(${theme.color['muted-foreground']})`,
-
-          cursor: 'default',
-        },
-      },
-    },
-
-    pulse: {
-      true: {
-        '::after': {
-          content: '',
-          position: 'absolute',
-          inset: '0',
-
-          background:
-            'linear-gradient(90deg, transparent 30%, #ffffff33 65%, transparent 100%)',
-          backgroundSize: '300% 100%',
-
-          animation: `${pulse} 5s linear 0s infinite`,
-        },
-      },
-    },
-  },
-});
-
-export const icon = style({
-  lineHeight: '0',
-});
-
-globalStyle(`${icon} > *`, {
-  width: '1em',
-  height: '1em',
-  lineHeight: '0',
-
-  pointerEvents: 'none',
-});
-
-globalStyle(`${button.classNames.base} svg`, {
-  width: '1em',
-  height: '1em',
-});

package/src/components/Button/Button.spec.tsx

@@ -1,30 +0,0 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-
-import { uiTest } from '../../tests/uiTest';
-import { Button } from './';
-
-describe('Button 컴포넌트', () => {
-  uiTest(Button, 'Button');
-
-  it('Button을 클릭하면 onClick이 호출되어야 한다', () => {
-    const handleClick = jest.fn();
-    render(<Button onClick={handleClick}>Click</Button>);
-
-    fireEvent.click(screen.getByRole('button', { name: 'Click' }));
-
-    expect(handleClick).toHaveBeenCalledTimes(1);
-  });
-
-  it('disabled Button을 클릭하면 onClick이 호출되지 않아야 한다', () => {
-    const handleClick = jest.fn();
-    render(
-      <Button onClick={handleClick} disabled>
-        Click
-      </Button>,
-    );
-
-    fireEvent.click(screen.getByRole('button', { name: 'Click' }));
-
-    expect(handleClick).not.toHaveBeenCalledTimes(1);
-  });
-});