config: 스토리북 배포

Co-Authored-By: 박유현 <[email protected]>

.github/workflows/chromatic.yml

@@ -0,0 +1,31 @@
+
+# Workflow name
+name: 'Chromatic Deployment'
+
+# Event for the workflow
+on:
+  push:
+    branches:
+      - main
+
+# List of jobs
+jobs:
+  test:
+    # Operating System
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      - uses: actions/setup-node@v3
+        with:
+              node-version-file: .nvmrc
+              cache: yarn
+      - name: Corepack Enable
+        run: corepack enable
+      - uses: actions/checkout@v1
+        run: yarn
+        #👇 Adds Chromatic as a step in the workflow
+      - uses: chromaui/action@v1
+        # Options required for Chromatic's GitHub Action
+        with:
+          #👇 Chromatic projectToken, see https://storybook.js.org/tutorials/intro-to-storybook/react/ko/deploy/ to obtain it
+          projectToken: ${{ secrets.CHROMATIC_PAGE_TOKEN }}

.gitignore

@@ -47,3 +47,4 @@ next-env.d.ts
 .idea
 .obsidian
 .vscode
+build-storybook.log

.nvmrc

@@ -0,0 +1 @@
+v21.1.0

package.json

@@ -8,7 +8,8 @@
     "start": "next start",
     "lint": "next lint",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "chromatic": "npx chromatic --project-token=chpt_2c58d8828cea154"
   },
   "dependencies": {
     "@vanilla-extract/css": "^1.14.0",
@@ -33,6 +34,7 @@
     "@typescript-eslint/parser": "^6.19.0",
     "@vanilla-extract/next-plugin": "^2.3.3",
     "@vanilla-extract/webpack-plugin": "^2.3.2",
+    "chromatic": "^10.3.1",
     "css-loader": "^6.9.1",
     "eslint": "^8.56.0",
     "eslint-config-airbnb": "^19.0.4",
@@ -50,5 +52,7 @@
     "typescript": "^5",
     "webpack": "^5.89.0"
   },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "readme": "ERROR: No README data found!",
+  "_id": "[email protected]"
 }

src/components/Button/Button.css.ts

@@ -0,0 +1,92 @@
+import { style, styleVariants } from "@vanilla-extract/css";
+
+import color from "../../tokens/color";
+import typography from "../../tokens/typography";
+import { borderRadius } from "../../tokens/utils.css";
+
+export const buttonBase = style([
+  typography.$semantic.title4Regular,
+  borderRadius,
+  {
+    height: 42,
+    border: "1px solid transparent",
+    padding: "8px 13px",
+
+    ":disabled": {
+      borderColor: color.$semantic.bgDisabled,
+      color: color.$semantic.textDisabled,
+      backgroundColor: color.$semantic.bgDisabled,
+    },
+  },
+]);
+
+export const buttonVariants = styleVariants({
+  primaryFill: {
+    color: color.$semantic.textWhite,
+    backgroundColor: color.$semantic.primary,
+
+    selectors: {
+      "&:hover:not(:disabled)": {
+        backgroundColor: color.$semantic.primaryHover,
+      },
+    },
+  },
+
+  secondaryFill: {
+    color: color.$semantic.textWhite,
+    backgroundColor: color.$semantic.secondary,
+
+    selectors: {
+      "&:hover:not(:disabled)": {
+        backgroundColor: color.$semantic.secondaryHover,
+      },
+    },
+  },
+
+  primaryLine: {
+    border: `1px solid ${color.$semantic.primary}`,
+    color: color.$semantic.primary,
+    backgroundColor: color.$semantic.bgWhite,
+
+    selectors: {
+      "&:hover:not(:disabled)": {
+        backgroundColor: color.$semantic.primaryLow,
+      },
+    },
+  },
+
+  secondaryLine: {
+    border: `1px solid ${color.$semantic.secondary}`,
+    color: color.$semantic.secondary,
+    backgroundColor: color.$semantic.bgWhite,
+
+    selectors: {
+      "&:hover:not(:disabled)": {
+        color: color.$semantic.secondary,
+        backgroundColor: color.$semantic.secondaryLow,
+      },
+    },
+  },
+
+  primaryLow: {
+    color: color.$semantic.primary,
+    backgroundColor: color.$semantic.primaryLow,
+
+    selectors: {
+      "&:hover:not(:disabled)": {
+        backgroundColor: color.$semantic.primaryLowHover,
+      },
+    },
+  },
+
+  secondaryLow: {
+    color: color.$semantic.secondary,
+    backgroundColor: color.$semantic.secondaryLow,
+
+    selectors: {
+      "&:hover:not(:disabled)": {
+        backgroundColor: color.$semantic.secondaryLowHover,
+      },
+    },
+  },
+});

src/components/Button/Button.stories.tsx

@@ -0,0 +1,37 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { Button } from "./Button";
+
+const meta: Meta<typeof Button> = {
+  title: "Button",
+  component: Button,
+  argTypes: {
+    onClick: { action: "clicked" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Variants: Story = {
+  args: {
+    variant: "primaryFill",
+    children: "variants",
+  },
+};
+
+export const FullWidth: Story = {
+  args: {
+    variant: "primaryFill",
+    children: "full width",
+    full: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    variant: "primaryFill",
+    children: "disabled",
+    disabled: true,
+  },
+};

src/components/Button/Button.tsx

@@ -0,0 +1,47 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+
+import { widthFull } from "../../tokens/utils.css";
+import classnames from "../../utils/classnames";
+
+import * as styles from "./Button.css";
+
+export type ButtonVariantType = keyof typeof styles.buttonVariants;
+
+export interface ButtonProps
+  extends Pick<
+    ButtonHTMLAttributes<HTMLButtonElement>,
+    "type" | "disabled" | "onClick"
+  > {
+  full?: boolean;
+  variant: ButtonVariantType;
+  children: ReactNode;
+  className?: string;
+}
+
+export function Button({
+  full = false,
+  variant,
+  children,
+  type = "button",
+  disabled = false,
+  onClick,
+  className = "",
+}: ButtonProps) {
+  const buttonStyle = classnames(
+    styles.buttonBase,
+    styles.buttonVariants[variant],
+    full ? widthFull : "",
+    className,
+  );
+
+  return (
+    <button
+      type={type === "button" ? "button" : "submit"}
+      className={buttonStyle}
+      onClick={onClick}
+      disabled={disabled}
+    >
+      {children}
+    </button>
+  );
+}

src/components/Button/index.ts

@@ -0,0 +1,3 @@
+import { Button } from "./Button";
+
+export default Button;

src/tokens/color.ts

@@ -0,0 +1,72 @@
+const $scale = {
+  grey00: "var(--mm-scale-color-grey-00)",
+  grey50: "var(--mm-scale-color-grey-50)",
+  grey100: "var(--mm-scale-color-grey-100)",
+  grey200: "var(--mm-scale-color-grey-200)",
+  grey300: "var(--mm-scale-color-grey-300)",
+  grey400: "var(--mm-scale-color-grey-400)",
+  grey500: "var(--mm-scale-color-grey-500)",
+  grey600: "var(--mm-scale-color-grey-600)",
+  grey700: "var(--mm-scale-color-grey-700)",
+  grey800: "var(--mm-scale-color-grey-800)",
+  grey900: "var(--mm-scale-color-grey-900)",
+  coral50: "var(--mm-scale-color-coral-50)",
+  coral100: "var(--mm-scale-color-coral-100)",
+  coral200: "var(--mm-scale-color-coral-200)",
+  coral300: "var(--mm-scale-color-coral-300)",
+  coral400: "var(--mm-scale-color-coral-400)",
+  coral500: "var(--mm-scale-color-coral-500)",
+  coral600: "var(--mm-scale-color-coral-600)",
+  coral700: "var(--mm-scale-color-coral-700)",
+  coral800: "var(--mm-scale-color-coral-800)",
+  coral900: "var(--mm-scale-color-coral-900)",
+  coral950: "var(--mm-scale-color-coral-950)",
+  brown50: "var(--mm-scale-color-brown-50)",
+  brown100: "var(--mm-scale-color-brown-100)",
+  brown200: "var(--mm-scale-color-brown-200)",
+  brown300: "var(--mm-scale-color-brown-300)",
+  brown400: "var(--mm-scale-color-brown-400)",
+  brown500: "var(--mm-scale-color-brown-500)",
+  brown600: "var(--mm-scale-color-brown-600)",
+  brown700: "var(--mm-scale-color-brown-700)",
+  brown800: "var(--mm-scale-color-brown-800)",
+  brown900: "var(--mm-scale-color-brown-900)",
+  brown950: "var(--mm-scale-color-brown-950)",
+};
+
+const $semantic = {
+  textWhite: "var(--mm-semantic-color-text-white)",
+  bgWhite: "var(--mm-semantic-color-background-white)",
+  bgDefault: "var(--mm-semantic-color-background-default)",
+  bgAlt: "var(--mm-semantic-color-background-alt)",
+  textDisabled: "var(--mm-semantic-color-text-disabled)",
+  bgDisabled: "var(--mm-semantic-color-background-disabled)",
+  primary: "var(--mm-semantic-color-primary)",
+  primaryHover: "var(--mm-semantic-color-primary-hover)",
+  primaryLow: "var(--mm-semantic-color-primary-low)",
+  primaryLowHover: "var(--mm-semantic-color-primary-low-hover)",
+  secondary: "var(--mm-semantic-color-secondary)",
+  secondaryHover: "var(--mm-semantic-color-secondary-hover)",
+  secondaryLow: "var(--mm-semantic-color-secondary-low)",
+  secondaryLowHover: "var(--mm-semantic-color-secondary-low-hover)",
+  border: "var(--mm-semantic-color-border)",
+  success: "var(--mm-semantic-color-success)",
+  danger: "var(--mm-semantic-color-danger)",
+  badgeBlue: "var(--mm-semantic-color-badge-blue)",
+  badgeBlueBg: "var(--mm-semantic-color-badge-blue-bg)",
+  badgeGreen: "var(--mm-semantic-color-badge-green)",
+  badgeGreenBg: "var(--mm-semantic-color-badge-green-bg)",
+  badgeOrange: "var(--mm-semantic-color-badge-orange)",
+  badgeOrangeBg: "var(--mm-semantic-color-badge-orange-bg)",
+  badgePurple: "var(--mm-semantic-color-badge-purple)",
+  badgePurpleBg: "var(--mm-semantic-color-badge-purple-bg)",
+  badgeRed: "var(--mm-semantic-color-badge-red)",
+  badgeRedBg: "var(--mm-semantic-color-badge-red-bg)",
+  badgeTeal: "var(--mm-semantic-color-badge-teal)",
+  badgeTealBg: "var(--mm-semantic-color-badge-teal-bg)",
+  badgeYellow: "var(--mm-semantic-color-badge-yellow)",
+  badgeYellowBg: "var(--mm-semantic-color-badge-yellow-bg)",
+};
+
+const color = { $scale, $semantic };
+export default color;

src/tokens/typography.ts

@@ -0,0 +1,25 @@
+const $semantic = {
+  h1: "mm-semantic-typography-h1",
+  h2: "mm-semantic-typography-h2",
+  h3: "mm-semantic-typography-h3",
+  title1Regular: "mm-semantic-typography-title1-regular",
+  title1Bold: "mm-semantic-typography-title1-bold",
+  title2Regular: "mm-semantic-typography-title2-regular",
+  title2Bold: "mm-semantic-typography-title2-bold",
+  title3Regular: "mm-semantic-typography-title3-regular",
+  title3Bold: "mm-semantic-typography-title3-bold",
+  title4Regular: "mm-semantic-typography-title4-regular",
+  title4Bold: "mm-semantic-typography-title4-bold",
+  body1Regular: "mm-semantic-typography-body1-regular",
+  body1Bold: "mm-semantic-typography-body1-bold",
+  body2Regular: "mm-semantic-typography-body2-regular",
+  body2Bold: "mm-semantic-typography-body2-bold",
+  caption1Regular: "mm-semantic-typography-caption1-regular",
+  caption1Bold: "mm-semantic-typography-caption1-bold",
+  caption2Regular: "mm-semantic-typography-caption2-regular",
+  caption2Bold: "mm-semantic-typography-caption2-bold",
+  code: "mm-semantic-typography-code",
+};
+
+const typography = { $semantic };
+export default typography;