From 24e8330ea95492ec6db868d4a648925dea80d7d1 Mon Sep 17 00:00:00 2001 From: zahra shahrouzi Date: Tue, 2 Apr 2024 19:24:48 +0330 Subject: [PATCH 1/6] add preview-storybook task and script --- examples/design-system/package.json | 5 +++-- examples/design-system/turbo.json | 8 +++++++- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/examples/design-system/package.json b/examples/design-system/package.json index e072307baa919..491e891f839b2 100644 --- a/examples/design-system/package.json +++ b/examples/design-system/package.json @@ -8,7 +8,8 @@ "format": "prettier --write \"**/*.{ts,tsx,md}\"", "changeset": "changeset", "version-packages": "changeset version", - "release": "turbo run build --filter=docs^... && changeset publish" + "release": "turbo run build --filter=docs^... && changeset publish", + "preview-storybook": "turbo preview-storybook" }, "devDependencies": { "@changesets/cli": "^2.27.1", @@ -16,4 +17,4 @@ "turbo": "^1.12.4" }, "packageManager": "pnpm@8.9.0" -} +} \ No newline at end of file diff --git a/examples/design-system/turbo.json b/examples/design-system/turbo.json index 7fc6b0292bfb7..9f766cdc490ba 100644 --- a/examples/design-system/turbo.json +++ b/examples/design-system/turbo.json @@ -14,6 +14,12 @@ }, "clean": { "cache": false + }, + "preview-storybook": { + "dependsOn": [ + "^build" + ], + "cache": false } } -} +} \ No newline at end of file From 7719cbb75f4fd4be0702334498120098bd59a9f9 Mon Sep 17 00:00:00 2001 From: zahra shahrouzi Date: Tue, 2 Apr 2024 19:25:10 +0330 Subject: [PATCH 2/6] improvement on clean script --- examples/design-system/apps/docs/package.json | 4 ++-- examples/design-system/packages/ui/package.json | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/examples/design-system/apps/docs/package.json b/examples/design-system/apps/docs/package.json index 48b054920c1a7..30b2610e99cc6 100644 --- a/examples/design-system/apps/docs/package.json +++ b/examples/design-system/apps/docs/package.json @@ -7,7 +7,7 @@ "dev": "storybook dev -p 6006", "build": "storybook build --docs", "preview-storybook": "serve storybook-static", - "clean": "rm -rf .turbo && rm -rf node_modules", + "clean": "rm -rf .turbo node_modules", "lint": "eslint ./stories/*.stories.tsx --max-warnings 0" }, "dependencies": { @@ -31,4 +31,4 @@ "typescript": "^5.3.3", "vite": "^5.1.4" } -} +} \ No newline at end of file diff --git a/examples/design-system/packages/ui/package.json b/examples/design-system/packages/ui/package.json index 21db1bc922ef8..1c71194d1fa08 100644 --- a/examples/design-system/packages/ui/package.json +++ b/examples/design-system/packages/ui/package.json @@ -14,7 +14,7 @@ "build": "tsup", "dev": "tsup --watch", "lint": "eslint . --max-warnings 0", - "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist" + "clean": "rm -rf .turbo node_modules dist" }, "devDependencies": { "@repo/eslint-config": "workspace:*", @@ -29,4 +29,4 @@ "publishConfig": { "access": "public" } -} +} \ No newline at end of file From 4a750de8c88971f7d85dcda3000dad6809dd9c9c Mon Sep 17 00:00:00 2001 From: zahra shahrouzi Date: Tue, 2 Apr 2024 19:25:42 +0330 Subject: [PATCH 3/6] remove sourcemap of built files --- examples/design-system/packages/ui/tsup.config.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/examples/design-system/packages/ui/tsup.config.ts b/examples/design-system/packages/ui/tsup.config.ts index ed727975edc31..43e755c3ce8da 100644 --- a/examples/design-system/packages/ui/tsup.config.ts +++ b/examples/design-system/packages/ui/tsup.config.ts @@ -4,7 +4,6 @@ export default defineConfig((options) => ({ entryPoints: ["src/button.tsx"], format: ["cjs", "esm"], dts: true, - sourcemap: true, external: ["react"], ...options, })); From 664a4a95cf4991936d3ac3c791e5ccafaae053ef Mon Sep 17 00:00:00 2001 From: zahra shahrouzi Date: Tue, 2 Apr 2024 19:26:00 +0330 Subject: [PATCH 4/6] bug fix of README --- examples/design-system/README.md | 62 +++++++++++++++++++------------- 1 file changed, 38 insertions(+), 24 deletions(-) diff --git a/examples/design-system/README.md b/examples/design-system/README.md index e998f547c4552..d1c8c9762c2f1 100644 --- a/examples/design-system/README.md +++ b/examples/design-system/README.md @@ -43,7 +43,6 @@ This Turborepo includes the following packages and applications: - `apps/docs`: Component documentation site with Storybook - `packages/ui`: Core React components -- `packages/utils`: Shared React utilities - `packages/typescript-config`: Shared `tsconfig.json`s used throughout the Turborepo - `packages/eslint-config`: ESLint preset @@ -53,44 +52,49 @@ This example sets up your `.gitignore` to exclude all generated files, other fol ### Compilation -To make the core library code work across all browsers, we need to compile the raw TypeScript and React code to plain JavaScript. We can accomplish this with `tsup`, which uses `esbuild` to greatly improve performance. +To make the ui library code work across all browsers, we need to compile the raw TypeScript and React code to plain JavaScript. We can accomplish this with `tsup`, which uses `esbuild` to greatly improve performance. Running `pnpm build` from the root of the Turborepo will run the `build` command defined in each package's `package.json` file. Turborepo runs each `build` in parallel and caches & hashes the output to speed up future builds. -For `acme-core`, the `build` command is the following: +For `@acme/ui`, the `build` command is equivalent to the following: ```bash -tsup src/index.tsx --format esm,cjs --dts --external react +tsup src/*.tsx --format esm,cjs --dts --external react ``` -`tsup` compiles `src/index.tsx`, which exports all of the components in the design system, into both ES Modules and CommonJS formats as well as their TypeScript types. The `package.json` for `acme-core` then instructs the consumer to select the correct format: +`tsup` compiles all of the components in the design system individually, into both ES Modules and CommonJS formats as well as their TypeScript types. The `package.json` for `@acme/ui` then instructs the consumer to select the correct format: -```json:acme-core/package.json +```json:ui/package.json { - "name": "@acme/core", + "name": "@acme/ui", "version": "0.0.0", - "main": "./dist/index.js", - "module": "./dist/index.mjs", - "types": "./dist/index.d.ts", "sideEffects": false, + "exports":{ + "./button": { + "types": "./src/button.tsx", + "import": "./dist/button.mjs", + "require": "./dist/button.js" + } + } } ``` -Run `pnpm build` to confirm compilation is working correctly. You should see a folder `acme-core/dist` which contains the compiled output. +Run `pnpm build` to confirm compilation is working correctly. You should see a folder `ui/dist` which contains the compiled output. ```bash -acme-core +ui └── dist - ├── index.d.ts <-- Types - ├── index.js <-- CommonJS version - └── index.mjs <-- ES Modules version + ├── button.d.ts <-- Types + ├── button.js <-- CommonJS version + ├── button.mjs <-- ES Modules version + └── button.mts <-- ES Modules version with Types ``` ## Components -Each file inside of `acme-core/src` is a component inside our design system. For example: +Each file inside of `ui/src` is a component inside our design system. For example: -```tsx:acme-core/src/Button.tsx +```tsx:ui/src/Button.tsx import * as React from 'react'; export interface ButtonProps { @@ -104,12 +108,22 @@ export function Button(props: ButtonProps) { Button.displayName = 'Button'; ``` -When adding a new file, ensure the component is also exported from the entry `index.tsx` file: +When adding a new file, ensure that its specifier is defined in `package.json` file: -```tsx:acme-core/src/index.tsx -import * as React from "react"; -export { Button, type ButtonProps } from "./Button"; -// Add new component exports here +```json:ui/package.json +{ + "name": "@acme/ui", + "version": "0.0.0", + "sideEffects": false, + "exports":{ + "./button": { + "types": "./src/button.tsx", + "import": "./dist/button.mjs", + "require": "./dist/button.js" + } + // Add new component exports here + } +} ``` ## Storybook @@ -118,13 +132,13 @@ Storybook provides us with an interactive UI playground for our components. This - Use Vite to bundle stories instantly (in milliseconds) - Automatically find any stories inside the `stories/` folder -- Support using module path aliases like `@acme-core` for imports +- Support using module path aliases like `@acme/ui` for imports - Write MDX for component documentation pages For example, here's the included Story for our `Button` component: ```js:apps/docs/stories/button.stories.mdx -import { Button } from '@acme-core/src'; +import { Button } from '@acme/ui/button'; import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks'; From cc0e45285aa4adb78f7801b64ad452992f901797 Mon Sep 17 00:00:00 2001 From: zahra shahrouzi Date: Tue, 2 Apr 2024 19:46:06 +0330 Subject: [PATCH 5/6] changed @acme/docs to @repo/docs --- examples/design-system/.changeset/config.json | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/examples/design-system/.changeset/config.json b/examples/design-system/.changeset/config.json index 15efd062e4533..a91a85d36b9b3 100644 --- a/examples/design-system/.changeset/config.json +++ b/examples/design-system/.changeset/config.json @@ -6,5 +6,7 @@ "linked": [], "access": "public", "updateInternalDependencies": "patch", - "ignore": ["@acme/docs"] -} + "ignore": [ + "@repo/docs" + ] +} \ No newline at end of file From e982a258a078e73552e88a1b088b87403d0236cd Mon Sep 17 00:00:00 2001 From: zahra shahrouzi Date: Thu, 24 Oct 2024 23:27:35 +0330 Subject: [PATCH 6/6] update README.md to fix the built files of ui package in examples/design-system Co-authored-by: Dimitri Mitropoulos --- examples/design-system/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/design-system/README.md b/examples/design-system/README.md index d1c8c9762c2f1..bac4e8a8d0a5d 100644 --- a/examples/design-system/README.md +++ b/examples/design-system/README.md @@ -87,7 +87,7 @@ ui ├── button.d.ts <-- Types ├── button.js <-- CommonJS version ├── button.mjs <-- ES Modules version - └── button.mts <-- ES Modules version with Types + └── button.d.mts <-- ES Modules version with Types ``` ## Components