FIX: Skeleton 컴포넌트 재배포 (#190)

* chore : add radix/theme

* chore: install radix-ui/themes

* feat: publish Skeleton component

* cs

* chore: remove radix-ui/themes

* feat: publish Skeleton Component.

* docs: Add Skeleton Storybook Docs.

* feat: children 여부에 따라 자동으로 크기 조절, JSDdoc 작성

* publish storybook

* fix story name

* chore: upgrade chromatic

* fix: migrate eslint config file (https://eslint.org/docs/latest/use/configure/migration-guide)

* fix

* fix: eslint script and setting

* fix: file name

* docs: 스토리북 문서 보강

* fix: revert chromatic version

.changeset/late-icons-boil.md

@@ -0,0 +1,5 @@
+---
+'@sopt-makers/ui': minor
+---
+
+Add Skeleton Component.

apps/docs/.eslintrc.cjs

@@ -1,14 +1,17 @@
 module.exports = {
   root: true,
   env: { browser: true, es2020: true },
-  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', 'plugin:storybook/recommended'],
+  files: ['**/*.ts', '**/*.tsx'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:storybook/recommended',
+  ],
   ignorePatterns: ['dist', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',
   plugins: ['react-refresh'],
   rules: {
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
-    ],
+    'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
   },
-}
+};

apps/docs/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint . --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",

apps/docs/src/stories/Skeleton.stories.tsx

@@ -0,0 +1,87 @@
+import { colors } from '@sopt-makers/colors';
+import { Skeleton, SkeletonProps, Button as MDSButton, Toggle } from '@sopt-makers/ui';
+import { Meta, StoryObj } from '@storybook/react';
+
+/**
+ * #### Skeleton 컴포넌트는 요소의 로딩 상태를 나타낼 때 사용합니다.
+ */
+const meta: Meta<SkeletonProps> = {
+  title: 'Components/Skeleton',
+  component: Skeleton,
+  tags: ['autodocs'],
+  argTypes: { width: { controls: 'string' }, height: { controls: 'string' }, variant: { controls: 'radio' } },
+  args: { width: 350, height: 40, variant: 'default' },
+};
+
+export default meta;
+
+/**
+ * > 기본 형태는 width, height를 조절하여 사용합니다.
+ */
+export const Default: StoryObj<SkeletonProps> = {
+  render: (args) => {
+    return <Skeleton {...args} />;
+  },
+};
+
+/**
+ * `border-radius : '100%'` <br/>
+ * width, height 값을 같은 값으로 설정하는것을 권장합니다.
+ */
+export const Circular: StoryObj<SkeletonProps> = {
+  args: { width: 40, variant: 'circular' },
+  render: (args) => {
+    return <Skeleton {...args} />;
+  },
+};
+
+/**
+ * > **컴포넌트의 형태에 맞춰 스켈레톤의 모양을 설정**하고 싶다면, <br/>
+ * **Skeleton의 children에** 해당하는 컴포넌트를 넣어줍니다..
+ *
+ * #### 예시 코드
+ * ```tsx
+ * <Skeleton>
+ *  <Button>버튼버튼버튼</Button>
+ * </Skeleton>
+ * <Skeleton>
+ *  <Toggle />
+ * </Skeleton>
+ * ```
+ */
+export const HasChildren: StoryObj<SkeletonProps> = {
+  render: () => {
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+        <Skeleton>
+          <MDSButton>버튼버튼버튼</MDSButton>
+        </Skeleton>
+        <Skeleton>
+          <Toggle />
+        </Skeleton>
+      </div>
+    );
+  },
+};
+
+export const BannerExample: StoryObj<SkeletonProps> = {
+  render: () => {
+    return (
+      <div
+        style={{
+          display: 'flex',
+          padding: '16px',
+          alignItems: 'center',
+          backgroundColor: `${colors.gray800}`,
+          borderRadius: '14px',
+          gap: '8px',
+        }}
+      >
+        <Skeleton width={28} height={28} />
+        <Skeleton width={47} height={20} />
+        <Skeleton width={286} height={20} />
+        <Skeleton width={28} height={28} />
+      </div>
+    );
+  },
+};

packages/ui/Skeleton/Skeleton.tsx

@@ -0,0 +1,53 @@
+import { forwardRef } from 'react';
+import type { HTMLAttributes } from 'react';
+import { root, hasChildren } from './style.css';
+import createSkeletonStyle from './utils';
+import type { SkeletonVariant } from './types';
+
+export interface SkeletonProps extends HTMLAttributes<HTMLSpanElement> {
+  /**
+   * ### Skeleton의 너비를 수동으로 지정할 떄 사용합니다.
+   */
+  width?: number | string;
+  /**
+   * ### Skeleton의 높이를 수동으로 지정할 떄 사용합니다.
+   */
+  height?: number | string;
+  /**
+   * ### `default` | `circular` | `rounded` 의 세 가지 값을 가집니다.
+   * @example
+   * default - borderRadius : '12px'
+   * circular && rounded - borderRadius: '100%'
+   */
+  variant?: SkeletonVariant;
+  /**
+   * ### children prop을 사용할 경우 스켈레톤의 사이즈가 자식 요소에 맞춰집니다.
+   * @example
+   * ```tsx
+   * // width: 'fit-content', height: 'auto'
+   * <Skeleton>
+   *   <Toggle />
+   * </Skeleton>
+   * ```
+   */
+  children?: React.ReactNode;
+}
+
+export const Skeleton = forwardRef<HTMLSpanElement, SkeletonProps>((props, forwardedRef) => {
+  const { width, height, variant = 'default', children, ...restProps } = props;
+
+  const styleClass = createSkeletonStyle(variant);
+
+  return (
+    <span
+      className={`${root} ${styleClass} ${children ? hasChildren : ''}`}
+      ref={forwardedRef}
+      style={{ width, height }}
+      {...restProps}
+    >
+      {children}
+    </span>
+  );
+});
+
+Skeleton.displayName = 'Skeleton';

packages/ui/Skeleton/constants.ts

@@ -0,0 +1,9 @@
+import type { SkeletonVariant } from './types';
+
+const SkeletonBorderRadius: Record<SkeletonVariant, string> = {
+  default: '12px',
+  circular: '100%',
+  rounded: '100%',
+};
+
+export default SkeletonBorderRadius;

packages/ui/Skeleton/index.ts

@@ -0,0 +1 @@
+export * from './Skeleton';

packages/ui/Skeleton/style.css.ts

@@ -0,0 +1,39 @@
+import { colors } from '@sopt-makers/colors';
+import { keyframes, style, globalStyle } from '@vanilla-extract/css';
+import { createSprinkles, defineProperties } from '@vanilla-extract/sprinkles';
+import SkeletonBorderRadius from './constants';
+
+const pulseKeyframe = keyframes({
+  '0%': {
+    opacity: 1,
+  },
+  '50%': {
+    opacity: 0.4,
+  },
+  '100%': {
+    opacity: 1,
+  },
+});
+
+export const root = style({
+  display: 'block',
+  backgroundColor: colors.gray700,
+  animation: `${pulseKeyframe} 2s ease-in-out 0.5s infinite`,
+});
+
+export const hasChildren = style({
+  maxWidth: 'fit-content',
+  height: 'auto',
+});
+
+globalStyle(`${hasChildren} > *`, {
+  visibility: 'hidden',
+});
+
+const sprinkleProperties = defineProperties({
+  properties: {
+    borderRadius: SkeletonBorderRadius,
+  },
+});
+
+export const sprinkles = createSprinkles(sprinkleProperties);

packages/ui/Skeleton/types.ts

@@ -0,0 +1 @@
+export type SkeletonVariant = 'default' | 'circular' | 'rounded';

packages/ui/Skeleton/utils.ts

@@ -0,0 +1,8 @@
+import { sprinkles } from './style.css';
+import type { SkeletonVariant } from './types';
+
+const createSkeletonStyle = (variant: SkeletonVariant) => {
+  return sprinkles({ borderRadius: variant });
+};
+
+export default createSkeletonStyle;

packages/ui/index.ts

@@ -12,6 +12,7 @@ export { default as Tag } from './Tag';
 export { default as Chip } from './Chip';
 export { default as Callout } from './Callout';
 export { default as Tab } from './Tab';
+export * from './Skeleton';
 export * from './FieldBox';
 // test component
 export { default as Test } from './Test';