Exporty z design-system package

martinwenisch · April 16, 2025, 9:01am

Potrebujeme dobre nastavit exportovani z design-system package. Aktualne exportujeme fonty, zkompilovany Tailwind css soubor a komponenty.

github.com/kalkulacka-one/kalkulacka

packages/design-system/package.json

main

{
  "name": "@repo/design-system",
  "version": "0.0.0",
  "private": true,
  "exports": {
    "./themes/*": "./src/themes/*.css",
    "./styles": "./dist/index.css",
    "./fonts": "./dist/fonts",
    "./components": "./src/components/index.ts",
    "./types": "./src/types/index.ts",
    "./icons": "./src/components/icons/index.ts"
  },
  "scripts": {
    "build": "npm run fonts && npm run tailwind",
    "dev": "npm run fonts && npm run tailwind:watch",
    "fonts": "mkdir -p ./dist && cp -r ./src/fonts ./dist/fonts",
    "generate:component": "turbo gen react-component",
    "lint": "biome check .",
    "lint:fix": "biome check --write .",
    "tailwind": "tailwindcss -i ./src/styles.css -o ./dist/index.css",

This file has been truncated. show original

Vzhledem k tomu, ze primarne budeme pouzivat NextJS (ale neni to nutnost, ten design-system musi byt funkcni i mimo nej, e.g. ve Storybooku, nebo klasickem Reactu), tak si chceme pomoct a exportovat client komponenty s "use client" hlavickou. Potom nebude treba vytvaret jim “use client” wrappery v Nextu.

Navrh

Vytvorime v components dve podslozky:

server => pro komponenty bez lifecycle hooku, ktere funguji v SSR
client => pro interaktivni komponenty a do jejich barrel file pridame “use client” hlavicku.

Napriklad:

"exports": {
	".": {
		"types": "./dist/src/server/index.d.ts",
		"import": "./dist/src/server/index.js"
	},
	"./client": {
		"types": "./dist/src/client/index.d.ts",
		"import": "./dist/src/client/index.js"
	},
}