@ahnlabcloudmate/design-system NPM

@ahnlabcloudmate/design-system

React UI 컴포넌트 라이브러리입니다.

요구사항

Node.js 16 이상
React 18 이상
TypeScript 5 이상

브라우저 지원

Chrome 88 이상
Firefox 87 이상
Safari 14 이상
Edge 88 이상
Opera 74 이상

참고:
React 18.3.1과 TypeScript 5.7.3을 사용하고 있으며, 이는 최신 브라우저의 ES2020+ 기능을 지원합니다.
@pandacss/dev 0.44.0은 CSS Grid, Flexbox, CSS Variables 등 최신 CSS 기능을 사용하며, PostCSS를 통해 브라우저 호환성을 자동으로 처리합니다.
위에 명시된 브라우저 버전 이상에서 최적의 성능을 보장합니다.

주요 의존성

@pandacss/dev 0.44.0
@tabler/icons-react 3.17.0

설치 - REACT + VITE

1. 패키지 설치

# npm 사용시
npm install -D @pandacss/dev@0.44.0 @ahnlabcloudmate/design-system
npm install @tabler/icons-react@3.17.0
npx panda init --postcss

# yarn 사용시
yarn add -D @pandacss/dev@0.44.0 @ahnlabcloudmate/design-system
yarn add @tabler/icons-react@3.17.0
yarn panda init --postcss

# pnpm 사용시
pnpm add -D @pandacss/dev@0.44.0 @ahnlabcloudmate/design-system
pnpm add @tabler/icons-react@3.17.0
pnpm panda init --postcss

@tabler/icons-react는 3.17.0 버전 사용
3.19.0버전에서 부터 모든 icon을 chunk로 요청하여 받아오게 되어 3.17.0으로 고정
참고 : https://github.com/tabler/tabler-icons/issues/1233 Vite dev mode loads all icon chunks with 3.19.0 (React) #1233

2. panda.config.ts 파일 수정

패키지 설치 후 panda.config.ts 파일 수정

import { defineConfig } from '@pandacss/dev'
import customPreset from '@ahnlabcloudmate/design-system/customPreset'

export default defineConfig({
  staticCss: {
    recipes: '*',
  },
  jsxFramework: 'react',
  // Whether to use css reset
  preflight: true,

  // Where to look for your css declarations
  include: [
    './app/**/*.{js,jsx,ts,tsx}',
    './src/**/*.{js,jsx,ts,tsx}',
    './node_modules/@ahnlabcloudmate/design-system/**/*.{js,jsx}',
  ],

  // Files to exclude
  exclude: [],

  // Useful for theme customization
  presets: ['@pandacss/dev/presets', customPreset],

  // The output directory for your css system
  outdir: 'styled-system'
})

3. package.json파일의 scripts 섹션 수정

package.json 파일의 scripts 섹션에 추가

+    "prepare": "panda codegen",

# yarn
+    "postinstall": "panda codegen"

추가 후 아래 명령어 직접 실행

yarn postinstall
# or
pnpm prepare
# or
npm prepare

4. src/index.css 파일 코드 추가

src/index.css 프로젝트 루트 css에 아래 코드를 추가합니다.

@layer reset, base, tokens, recipes, utilities;

5. ACMEUIProvider 추가

import { ACMEUIProvider } from '@ahnlabcloudmate/design-system';

function App() {
  return (
      <ACMEUIProvider>
        {children}
      </ACMEUIProvider>
  )
}

설치 - Next.js

1. 패키지 설치

# npm 사용시
npm install -D @pandacss/dev@0.44.0 @ahnlabcloudmate/design-system
npm install @tabler/icons-react@3.17.0
npx panda init --postcss

# yarn 사용시
yarn add -D @pandacss/dev@0.44.0 @ahnlabcloudmate/design-system
yarn add @tabler/icons-react@3.17.0
yarn panda init --postcss

# pnpm 사용시
pnpm add -D @pandacss/dev@0.44.0 @ahnlabcloudmate/design-system
pnpm add @tabler/icons-react@3.17.0
pnpm panda init --postcss

@tabler/icons-react는 3.17.0 버전 사용
3.19.0버전에서 부터 모든 icon을 chunk로 요청하여 받아오게 되어 3.17.0으로 고정
참고 : https://github.com/tabler/tabler-icons/issues/1233 Vite dev mode loads all icon chunks with 3.19.0 (React) #1233

2. panda.config.ts 파일 수정

패키지 설치 후 panda.config.ts 파일 수정

import { defineConfig } from '@pandacss/dev'
import customPreset from '@ahnlabcloudmate/design-system/customPreset'

export default defineConfig({
  staticCss: {
    recipes: '*',
  },
  jsxFramework: 'react',
  preflight: true,
  include: [
    './app/**/*.{js,jsx,ts,tsx}',
    './src/**/*.{js,jsx,ts,tsx}',
    './node_modules/@ahnlabcloudmate/design-system/**/*.{js,jsx}',
  ],
  exclude: [],
  presets: ['@pandacss/dev/presets', customPreset],
  outdir: 'styled-system'
})

3. next.config.js 파일 수정

next.config.js 파일에 다음 설정을 추가합니다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['@ahnlabcloudmate/design-system'],
}

module.exports = nextConfig

3. package.json파일의 scripts 섹션 수정

package.json 파일의 scripts 섹션에 추가

+    "prepare": "panda codegen",

# yarn
+    "postinstall": "panda codegen"

추가 후 아래 명령어 직접 실행

yarn postinstall
# or
pnpm prepare
# or
npm prepare

4. app/layout.tsx 파일 수정

app/layout.tsx 파일에 다음 코드를 추가합니다.

import './globals.css'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="ko">
      <body>{children}</body>
    </html>
  )
}

5. app/globals.css 파일 수정

app/globals.css 파일에 다음 코드를 추가합니다.

@layer reset, base, tokens, recipes, utilities;

6. ACMEUIProvider 추가

import { ACMEUIProvider } from '@ahnlabcloudmate/design-system';

export default async function RootLayout({ children }) {
  return (
      <html>
        <body>
          <ACMEUIProvider>
            {children}
          </ACMEUIProvider>
        </body>
    </html>
  )
}

사용 방법

컴포넌트 사용하기

import { Button } from '@ahnlabcloudmate/design-system';

function App() {
  return (
    <Button variant="primary">버튼</Button>
  );
}

타입 사용하기

import { ColumnSummary } from '@ahnlabcloudmate/design-system/types'

커스텀 프리셋 사용하기

import customPreset from '@ahnlabcloudmate/design-system/customPreset';

// panda.config.ts 파일에서 사용
import { defineConfig } from '@pandacss/dev';

export default defineConfig({
  // 다른 설정들...
  presets: ['@pandacss/dev/presets', customPreset],
});