@skulter/test_ui

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

설치

npm install @skulter/test_ui
# 또는
pnpm add @skulter/test_ui

사용 방법

컴포넌트 사용하기

import { Button } from '@skulter/test_ui';

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

타입 사용하기

import { ColumnSummary } from '@skulter/test_ui/types'

커스텀 프리셋 사용하기

import customPreset from '@skulter/test_ui/customPreset';

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

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

PandaCSS 설정 가이드

이 라이브러리를 사용할 때 발생할 수 있는 경로 문제를 해결하기 위해 다음과 같이 설정하세요:

프로젝트의 panda.config.ts 파일 설정

import { defineConfig } from '@pandacss/dev'
import customPreset from '@skulter/test_ui/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/@skulter/test_ui/dist/**/*.{js,mjs}', // 배포된 UI라이브러리 위치
  ],

  // Files to exclude
  exclude: [],

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

  // The output directory for your css system
  outdir: '@mono/acme-ui',
  importMap: '@ui', // 필요할 경우 사용
})

버전 정보

현재 버전: 0.1.03