@kimdw-rtk/ui 0.0.0

package/.vscode/settings.json

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

package/eslint.config.mjs

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

package/jest.config.json

@@ -0,0 +1,10 @@
+{
+  "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

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

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@kimdw-rtk/ui",
+  "version": "0.0.0",
+  "private": false,
+  "type": "module",
+  "imports": {
+    "#*": "./src/*/index.ts",
+    "#styleUtils": "./src/utils/styleUtils.css.ts"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./*": "./src/*/index.ts"
+  },
+  "dependencies": {
+    "@vanilla-extract/css": "^1.17.0",
+    "@vanilla-extract/dynamic": "^2.1.0",
+    "@vanilla-extract/recipes": "^0.5.0",
+    "@vanilla-extract/sprinkles": "^1.6.0",
+    "clsx": "^2.1.0",
+    "lucide-react": "^0.503.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "@kimdw-rtk/utils": "0.1.0"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.26.9",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.27.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@turbo/gen": "^2.4.4",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^22.13.10",
+    "@types/react": "^18.0.0 || ^19.0.0",
+    "@types/react-dom": "^18.0.0 || ^19.0.0",
+    "@vanilla-extract/jest-transform": "^1.1.14",
+    "eslint": "^9.22.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "ts-jest": "^29.3.4",
+    "typescript": "5.8.2",
+    "@repo/eslint-config": "0.0.0",
+    "@repo/typescript-config": "0.0.0"
+  },
+  "scripts": {
+    "lint": "eslint . --max-warnings 0",
+    "generate:component": "turbo gen react-component",
+    "check-types": "tsc --noEmit",
+    "test": "jest --verbose"
+  }
+}

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

@@ -0,0 +1,29 @@
+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

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

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,44 @@
+'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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,87 @@
+'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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,46 @@
+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

@@ -0,0 +1,41 @@
+'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

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

package/src/components/Alert/index.tsx

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,18 @@
+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

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

package/src/components/Box/index.tsx

@@ -0,0 +1,41 @@
+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';