infludeo-component v0.0.29

Infludeo Component Readme

Npm publish를 위한 기본 설정

1. vite.config.ts

/// <reference types="vite/client" />
/* eslint-disable @typescript-eslint/no-explicit-any */

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { libInjectCss } from "vite-plugin-lib-inject-css";
// vite library mode로 만들기 위한 라이브러리. *.d.ts .tsx 타입의 파일을 생성해줌
import dts from "vite-plugin-dts";
import { globSync } from "glob";
import path, { resolve } from "node:path";
import { fileURLToPath } from "node:url";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), libInjectCss(), dts()],
  build: {
    lib: { entry: resolve(__dirname, "src/main.ts"), formats: ["es"] },
    rollupOptions: {
      // 외부 종속성
      external: ["react", "react-dom", "react/jsx-runtime"],
      // https://rollupjs.org/configuration-options/#input
      // entry point를 지정
      /**
       * {
          main: '/Users/sanghalee/Documents/infludeo/infludeo-component-test/src/main.ts',
          'components/MyTitle/index':
            '/Users/sanghalee/Documents/infludeo/infludeo-component-test/src/components/MyTitle/index.tsx',
          'components/MyButton/index':
            '/Users/sanghalee/Documents/infludeo/infludeo-component-test/src/components/MyButton/index.tsx'
          }
       *
       */
      input: Object.fromEntries(
        globSync(["src/components/**/index.tsx", "src/main.ts"]).map(
          (file: any) => {
            const entryName = path.relative(
              "src",
              file.slice(0, file.length - path.extname(file).length)
            );

            const entryUrl = fileURLToPath(new URL(file, import.meta.url));
            return [entryName, entryUrl];
          }
        )
      ),
      output: {
        // main.js , components/MyTitle/index.js , components/MyButton/index.js 형태의 output 생성
        entryFileNames: "[name].js",
        // https://rollupjs.org/configuration-options/#output-assetfilenames
        assetFileNames: "assets/[name][extname]",
        // 외부 의존성 명시
        globals: {
          react: "React",
          "react-dom": "React-dom",
          "react/jsx-runtime": "react/jsx-runtime",
        },
      },
    },
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

1. package.json

{ // ...
  "name": "infludeo-component",
  "private": false, -> npm publish를 위한 false
  "version": "0.0.3", -> publish 시에 version 변경 필요
  "type": "module", -> build 타입 module로 정의
  "scripts": {
    "build": "tsc -b && vite build", -> vite 번들러 사용해서 빌드, 설정은 vite.config.ts
    "lint": "eslint .",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  },
  "module": "./dist/main.js", -> build 모듈의 main 코드 지정
  "exports": "./dist/main.js", -> build 시 생성파일 지정
  "files": [
    "dist"
  ], -> 빌드 디렉토리 지정
  "types": "./dist/main.d.ts", -> 타입스크립트 정의 파일 명시
  "sideEffects": [
    "**/*.css"
  ], -> ???
  // ...
  }

1. tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "incremental": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,

    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src"]
}

Figma 디자인 토큰을 활용한 코드 연동

→ 레퍼런스

→ style-dictionary reference

개요

1. figma 토큰 변경 후 push
2. push 이벤트 감지 후 github action을 통한 토큰 업데이트 및 pr
3. token 변경 pr merge
4. npx token-transformer tokens.json /tokens/global/output.json
5. npx style-dictionary build
6. 이후 style-dictionary로 index.css 갱신 후 version 업데이트를 포함한 pr생성 (Manual 작업)
7. 스타일 변수 변경점 PR merge
8. npm publish

• 토큰 사용 예시 → npm publish example → https://www.npmjs.com/package/infludeo-component → Figma 에서 사용되는 디자인 시스템을 token화 시켜서 github actions를 통해 PR 생성 → 네이밍 규칙 부분 적용 → 토큰의 메인키 이름은 중복이 불가능합니다. 토큰 추출에 대한 약속된 네이밍을 통해서 변경점들을 적용해야함 → shadcn의 경우 컴포넌트 cli로 받아오는 부분에서 자동으로 변경되는 tailwind.config.js도 함께 관리해줘야 할 수 있음