Designsystem chromatic deploy add and a11y testing add (#38)

* 🔖 Typescript and prettier version up and little change

* ✨ Generate arg types utilfunction add

* ✨ Button 컴포넌트 제작 완료

* ✨ Font 설정 추가

* 🚧 Font 순서맞게 정렬

* ➕ Radix alert dialog dependency add

* 🚧 Alertdialog 작업

* ✨ 폴더 구조 정립

* ✨ Jsx a11y addon add

* ✨ Chromatic deploy add

* 🚧 루트에서 실행하도록 변경

* 🚧 권장에 맞추어 checkoutv1로 다운그레이드

* 🚧 Token workspace 버전을 쓰도록 변경

* 🚧 Eslint rule import/no-unresolved off

* 🚧 Auto accept change option add

* 🚧 Chromatic flow wㅔ거

* 🚧 Chromatic ci 설정 변경

* 🚧 Chromatic install 옵션 변경

* 🚧 Packagejosn qusrud

* 🚧 Working directory 추가

* 🚧 Token reoslve

* 🚧 Chromatic

* 🚧 Chromatic 수동으로 변경

* 🚧 Env설정 변경

* 🚧 Working directory wㅔ거

* 🚧 Build 문제인가 싶어서 추가

* 🚧 Pullrequest 조건 추가

* 🚧 전부 빌드하는건 비효율적이어서 token 만 빌드

* 🚧 Dependency resolve

.eslintrc.js

@@ -36,5 +36,8 @@ module.exports = {
     'react/react-in-jsx-scope': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/ban-ts-comment': 'off',
+    '@typescript-eslint/no-unused-vars': 'off',
+    'react/prop-types': 'off',
+    'import/no-unresolved': 'off',
   },
 };

.github/workflows/chromatic.yml

@@ -0,0 +1,36 @@
+name: 'Chromatic'
+
+on:
+  pull_request:
+    branches:
+      - main
+    paths:
+      - '/packages/design-system'
+
+env:
+  CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+
+jobs:
+  chromatic:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: build all
+        run: yarn token build
+
+      - name: Run Chromatic
+        run: yarn chromatic

.gitignore

@@ -21,3 +21,6 @@ coverage
 *storybook.log
 
 .env.local
+storybook-static
+
+.env

configs/prettier/package.json

@@ -2,7 +2,7 @@
   "name": "@xionhub/prettier",
   "packageManager": "yarn@4.1.1",
   "license": "MIT",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "main": "./prettierrc.base.json",
   "exports": {
     "./fsd": "./prettierrc.fsd.json",

configs/prettier/prettierrc.fsd.js

@@ -9,6 +9,7 @@ module.exports = {
     '^~widget/(.*)$',
     '^~page/(.*)$',
     '^~app/(.*)$',
+    '^~/(.*)$',
     '^[./]',
     '^[../]',
   ],

configs/prettier/prettierrc.fsd.json

@@ -2,14 +2,14 @@
   "plugins": ["@trivago/prettier-plugin-sort-imports"],
   "importOrder": [
     "<THIRD_PARTY_MODULES>",
+    "^[@/]",
     "^~shared/(.*)$",
     "^~entities/(.*)$",
-    "^~feature/(.*)$",
-    "^~widget/(.*)$",
-    "^~page/(.*)$",
-    "^~app/(.*)$",
-
-    "^[~/]",
+    "^~features/(.*)$",
+    "^~widgets/(.*)$",
+    "^~pages/(.*)$",
+    "^~apps/(.*)$",
+    "~/(.*)$",
     "^[./]",
     "^[../]"
   ],

configs/typescript/package.json

@@ -2,7 +2,7 @@
   "name": "@xionhub/typescript",
   "packageManager": "yarn@4.1.1",
   "license": "MIT",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "main": "./tsconfig.base.json",
   "exports": {
     "./fsd": "./tsconfig.fsd.json",

configs/typescript/tsconfig.fsd.json

@@ -3,9 +3,9 @@
     "baseUrl": ".",
     "paths": {
       "~app/*": ["./src/app/*"],
-      "~page/*": ["./src/page/*"],
-      "~widget/*": ["./src/widget/*"],
-      "~feature/*": ["./src/feature/*"],
+      "~pages/*": ["./src/pages/*"],
+      "~widgets/*": ["./src/widgets/*"],
+      "~features/*": ["./src/features/*"],
       "~entities/*": ["./src/entities/*"],
       "~shared/*": ["./src/shared/*"],
       "~/*": ["./*"]

package.json

@@ -14,10 +14,13 @@
     "react": "yarn workspace @xionhub/react-hook",
     "util": "yarn workspace @xionhub/util",
     "token": "yarn workspace @xionhub/token",
+    "ds": "yarn workspace @xionhub/xds",
     "build": "ultra -r build",
     "release": "yarn changeset publish",
     "lint": "eslint packages/* --fix",
-    "storybook": "yarn workspace @xionhub/xds storybook"
+    "storybook": "yarn workspace @xionhub/xds storybook",
+    "build-storybook": "yarn workspace @xionhub/xds build-storybook",
+    "chromatic": "yarn workspace @xionhub/xds chromatic"
   },
   "devDependencies": {
     "@changesets/cli": "^2.27.1",
@@ -31,6 +34,7 @@
     "@types/react-dom": "^18",
     "@typescript-eslint/eslint-plugin": "^6.13.1",
     "@typescript-eslint/parser": "^6.13.1",
+    "cross-env": "^7.0.3",
     "esbuild": "^0.19.8",
     "esbuild-node-externals": "^1.11.0",
     "eslint": "latest",

packages/design-system/.storybook/main.ts

@@ -1,6 +1,5 @@
 import type { StorybookConfig } from '@storybook/react-vite';
 import { join, dirname } from 'path';
-import { transform } from 'typescript';
 
 /**
  * This function is used to resolve the absolute path of a package.
@@ -21,6 +20,7 @@ const config: StorybookConfig = {
     getAbsolutePath('@storybook/addon-essentials'),
     getAbsolutePath('@chromatic-com/storybook'),
     getAbsolutePath('@storybook/addon-interactions'),
+    getAbsolutePath('@storybook/addon-a11y'),
   ],
   framework: {
     name: getAbsolutePath('@storybook/react-vite'),

packages/design-system/.storybook/preview.ts → packages/design-system/.storybook/preview.tsx

@@ -1,6 +1,8 @@
+import React from 'react';
 import type { Preview } from '@storybook/react';
 import '../src/tailwind.css';
 import '../src/token.css';
+import '../src/font.css';
 const preview: Preview = {
   parameters: {
     controls: {
@@ -10,6 +12,13 @@ const preview: Preview = {
       },
     },
   },
+  decorators: [
+    Story => (
+      <div className=" font-suit">
+        <Story />
+      </div>
+    ),
+  ],
 };
 
 export default preview;

packages/design-system/package.json

@@ -10,9 +10,11 @@
     "build:tsc": "yarn tsc --emitDeclarationOnly",
     "build:js": "rollup -c",
     "build:css": "tailwindcss -i src/tailwind.css -o dist/xds.css --minify",
-    "storybook": "storybook dev -p 6006",
+    "build:storybook": "storybook build",
     "build-storybook": "storybook build",
-    "copy:font": "mkdir dist/font && cp src/font/SUIT-Bold.woff2 dist/font/SUIT-Bold.woff2 && cp src/font/SUIT-Light.woff2 dist/font/SUIT-Light.woff2 && cp src/font/SUIT-Medium.woff2 dist/font/SUIT-Medium.woff2 && && cp src/font/SUIT-Regular.woff2 dist/font/SUIT-Regular.woff2 && cp src/font/SUIT-SemiBold.woff2 dist/font/SUIT-SemiBold.woff2"
+    "storybook": "storybook dev -p 6006",
+    "chromatic": "npx chromatic --auto-accept-changes",
+    "copy:font": "mkdir dist/font && cp src/font/SUIT-Bold.woff2 dist/font/SUIT-Bold.woff2 && cp src/font/SUIT-Light.woff2 dist/font/SUIT-Light.woff2 && cp src/font/SUIT-Medium.woff2 dist/font/SUIT-Medium.woff2 && cp src/font/SUIT-Regular.woff2 dist/font/SUIT-Regular.woff2 && cp src/font/SUIT-SemiBold.woff2 dist/font/SUIT-SemiBold.woff2"
   },
   "exports": {
     ".": {
@@ -26,6 +28,7 @@
     "dist"
   ],
   "peerDependencies": {
+    "@radix-ui/react-alert-dialog": ">=1.0.0",
     "@xionhub/token": ">=0.1.9",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
@@ -35,6 +38,8 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.2.22",
+    "@radix-ui/react-alert-dialog": "^1.0.5",
+    "@storybook/addon-a11y": "8.0.4",
     "@storybook/addon-essentials": "^8.0.4",
     "@storybook/addon-interactions": "^8.0.4",
     "@storybook/addon-links": "^8.0.0",
@@ -47,16 +52,19 @@
     "@types/react": "^18.2.39",
     "@types/react-dom": "^18",
     "@xionhub/rollup": "workspace:^",
-    "@xionhub/token": "workspace:^",
+    "@xionhub/token": "0.1.8",
     "@xionhub/typescript": "workspace:^",
     "autoprefixer": "^10.4.18",
+    "chromatic": "^11.3.0",
     "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
     "postcss": "^8.4.35",
     "postcss-import": "^16.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rollup": "^4.13.0",
     "storybook": "^8.0.4",
+    "tailwind-merge": "1.14.0",
     "tailwindcss": "^3.4.1",
     "tslib": "^2.6.2",
     "typescript": "^5.4.2",

packages/design-system/src/components/alert-dialog/alert-dialog.tsx

@@ -0,0 +1,26 @@
+import React, { forwardRef } from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { cn } from '../../utils/cn';
+const AlertDialogRoot = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => {
+  return <AlertDialogPrimitive.Overlay ref={ref} className={cn(className)} {...props} />;
+});
+
+AlertDialogOverlay.displayName = 'AlertDialogOverlay';
+
+const AlertDialogContent = forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => {
+  return <AlertDialogContent ref={ref} className={cn(className)} {...props} />;
+});
+
+AlertDialogContent.displayName = 'ALertDialogContent';

packages/design-system/src/components/alert-dialog/index.ts

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

packages/design-system/src/components/button/button.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { argTypes } from '../../utils/arg-types';
+import { Button } from './button';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const selectListRounded = ['default', 'xs', 'sm', 'md', 'xl', 'full'] as const;
+const selectListSize = ['full', 'half', 'none'] as const;
+const selectListPress = ['default', 'press'] as const;
+const selectListVariants = [
+  'primary',
+  'secondary',
+  'tetiary',
+  'ghost',
+  'danger-primary',
+  'danger-secondary',
+  'danger-tetiary',
+  'danger-ghost',
+  'neutral-primary',
+  'neutral-secondary',
+  'neutral-tetiory',
+  'neutral-ghost',
+  'neutral-focus-ghost',
+] as const;
+
+const meta = {
+  title: 'Xds/Button',
+  component: Button,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    variant: argTypes({ control: 'select', options: selectListVariants }),
+    size: argTypes({ control: 'select', options: selectListSize }),
+    press: argTypes({ control: 'select', options: selectListPress }),
+    rounded: argTypes({ control: 'select', options: selectListRounded }),
+    disabled: argTypes({ control: 'boolean' }),
+    slot: argTypes({ control: 'text' }),
+    slotDirection: argTypes({ control: 'select', options: ['start', 'end', 'none'] }),
+  },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: { variant: 'primary' },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const PrimaryButton: Story = {
+  args: {
+    children: 'button',
+    variant: 'primary',
+    rounded: 'default',
+    size: 'full',
+    press: 'default',
+  },
+};