[스토리북] ColorPalette 컬러 팔레트 만들기

스토리북에 컬러 팔레트를 생성하려고 한다.

 

일반적인 stories.ts | tsx 와 같이 만들면 되려나? 하고 button 스토리 파일을 보다 보니 

import type { Meta, StoryObj } from "@storybook/react";
import ButtonComponent from "./ButtonComponent";

const meta: Meta<typeof ButtonComponent> = {
  component: ButtonComponent,
  title: "UI/Button/Variant",
  argTypes: {
    ...
  },
};
export default meta;
type Story = StoryObj<typeof meta>;

export const Primary_Button: Story = { ... }

 

그러면 Component가 있어야되네? 하고 

ColorToken 이라는 컴포넌트를 만들고, 또 스타일을 지정하고..., prop으로 색상을 넘겨줘야할테고,, 좀 귀찮겠는데? 싶은 찰나

검색을 해보니 스토리북에서 제공하는 컬러 스와치를 생성해주는 addon이 있다 ^^ 예쓰

https://storybook.js.org/docs/api/doc-blocks/doc-block-colorpalette

Storybook: Frontend workshop for UI development

이런걸 만들어준다고 !

그래서 냅다 설치하고 코드를 적용했더니 에러가 난다

\packages\ui 에서 설치 (모노레포 기준)
pnpm add @storybook/blocks

공식문서 예제 코드 ▼

import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';

<Meta title="Colors" />

<ColorPalette>
  <ColorItem
    title="theme.color.greyscale"
    subtitle="Some of the greys"
    colors={{ White: '#FFFFFF', Alabaster: '#F8F8F8', Concrete: '#F3F3F3' }}
  />
  <ColorItem 
    title="theme.color.primary" 
    subtitle="Coral" 
    colors={{ WildWatermelon: '#FF4785' }} 
  />
  <ColorItem 
    title="theme.color.secondary" 
    subtitle="Ocean" 
    colors={{ DodgerBlue: '#1EA7FD' }} 
  />
  <ColorItem
    title="theme.color.positive"
    subtitle="Green"
    colors={{
      Apple: 'rgba(102,191,60,1)',
      Apple80: 'rgba(102,191,60,.8)',
      Apple60: 'rgba(102,191,60,.6)',
      Apple30: 'rgba(102,191,60,.3)',
    }}
  />
  <ColorItem
    title="gradient"
    subtitle="Grayscale"
    colors={{
      Gradient: 'linear-gradient(to right,white,black)',
    }}
  />
  <ColorItem
    title="gradient"
    subtitle="Grayscale"
    colors={['linear-gradient(65deg,white,black)']}
  />
</ColorPalette>

 

왜요? ㅠㅠ

스토리북 에러

온통 빨간줄

JSX 를 부모로 감싸주지 않아서 생긴 문제라길래.. 

단순하게 fragment <> </> 로 감싸주면 vscode에서는 에러가 사라지지만 여전히 스토리북에서는 해결되지 않는다. 

++
=>  Error: Unexpected JSX child: JSXFragment  발생하므로 쓰지말자 

 

공식문서에는 이렇다할 다른 설명은 없어서 갈피를 못잡던 중 눈에 들어온 것이 있으니

.mdx ? ?? 

그렇다 단순히 stories.tsx로 만드는게 아니었던 것이다

어쩐지 (?) 구조가 뭔가 달랐잖아... - 개인적으로 나의 단점이라는 생각이.. 꼭 자세히 안보고 나중에 어쩐지; 이러고있다

mdx 확장자

 

그렇게 나와 비슷한 상황을 해결하신 또 한줄기 빛 블로그 발견

스토리북 mdx 파일 렌더링 오류를 해결해봅시다

• .mdx 파일: 독립적인 문서 페이지용으로 사용. 
• 더 자세히 알고싶다면 공식문서 : https://storybook.js.org/docs/writing-docs/mdx 

main.ts 파일에 addons 를 추가해주고 패키지도 추가로 설치했다.

const config = {
  stories: [
    "../../../packages/ui/src/**/*.stories.@(js|jsx|ts|tsx)", 
    "../../../packages/ui/src/**/*.mdx", // 경로에 맞게 문서화용 MDX 파일 추가
  ],
  addons: [
    "@storybook/addon-docs", // 문서화 애드온 추가
    "@storybook/addon-essentials",
  ],

pnpm add @storybook/blocks
pnpm add  @storybook/addon-docs @mdx-js/react @mdx-js/rollup --save-dev

파일 이름을 .mdx로 바꾸자

혹시 Docs는 생성되지만 문서가 열리지 않는다면 새로고침 또는 스토리북 종료 후 재시작 해보기

 

골져스

이제 우리 프로젝트에서 정의한 색상으로 수정 👏

import { Meta, ColorPalette, ColorItem } from "@storybook/blocks";

<Meta title="Colors" />
<h1>주요 색상 </h1>
<h2>Color.xxx(.yyy) 으로 사용</h2>
<ColorPalette>
  <ColorItem
    title="Color.primary"
    colors={{
      default: "#FFFFFF",
      hover: "#EBEBEB",
      active: "#D2D5D6",
    }}
  />
  <ColorItem
    title="Color.secondary"
    colors={{
      default: "#1F242A",
      hover: "#333A41",
      active: "#767676",
    }}
  />
  <ColorItem
    title="Color.accent"
    colors={{
      default: "#0062D2",
      hover: "#0053B2",
      active: "#003775",
      disabled: "#002249",
    }}
  />
  <ColorItem
    title="Color.outline"
    colors={{
      default: "transparent",
      hover: "#929AA1",
      active: "#B1B5B8",
      disabled: "#1F242A",
    }}
  />
  <ColorItem
    title="Color.text"
    colors={{
      default: "#FFFFFF",
      sub: "#767676",
      light: "#B1B5B8",
      inverse: "#121212",
    }}
  />
  <ColorItem
    title="Color"
    colors={{
      "Color.bg": "#121212",
      "Color.success": "#00CD0E",
      "Color.warning": "#FFD000",
      "Color.critical": "#D90000",
    }}
  />
</ColorPalette>

 

vanilla extract에서 정의한 변수로 색상명을 사용하려 했더니,, 색깔 적용은 되는데 #hex가 hash된 이름으로 뜨게 되어서

gpt 시켜서 대응하는 hex코드로 입력시켰다 

---

이번 포스팅과 내용은 무관하지만, 이런것도 있네? 싶어서 링크해본다

스토리북에서 사용가능한 color picker 

https://github.com/adrianbielawski/storybook-color-picker

GitHub - adrianbielawski/storybook-color-picker: A Storybook addon. Choose a color from custom color palette and set it on compo