Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(examples): bug in design system example #9284

Open
wants to merge 21 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
24e8330
add preview-storybook task and script
zsh77 Apr 2, 2024
7719cbb
improvement on clean script
zsh77 Apr 2, 2024
4a750de
remove sourcemap of built files
zsh77 Apr 2, 2024
664a4a9
bug fix of README
zsh77 Apr 2, 2024
cc0e452
changed @acme/docs to @repo/docs
zsh77 Apr 2, 2024
bf0944e
Merge branch 'main' into improvement-on-design-system
zsh77 Apr 3, 2024
fc1d9df
Merge branch 'main' into improvement-on-design-system
zsh77 Apr 8, 2024
f02380a
Merge branch 'main' into improvement-on-design-system
zsh77 Apr 13, 2024
92da9a5
Merge branch 'main' into improvement-on-design-system
zsh77 Apr 19, 2024
e87a006
Merge branch 'main' into improvement-on-design-system
zsh77 Apr 22, 2024
ebb5128
Merge branch 'main' into improvement-on-design-system
zsh77 Apr 28, 2024
e033f9e
Merge branch 'main' into improvement-on-design-system
zsh77 May 5, 2024
5d61f2c
Merge branch 'main' into improvement-on-design-system
zsh77 May 6, 2024
4917e23
Merge branch 'main' into improvement-on-design-system
zsh77 May 8, 2024
6331bb5
Merge branch 'main' into improvement-on-design-system
zsh77 May 10, 2024
750e717
Merge branch 'main' into improvement-on-design-system
zsh77 Oct 18, 2024
c785ff0
Merge branch 'main' into improvement-on-design-system
zsh77 Oct 18, 2024
e982a25
update README.md to fix the built files of ui package in examples/des…
zsh77 Oct 24, 2024
e3aa870
Merge branch 'main' into fix/bug-in-design-system-example
zsh77 Oct 24, 2024
dacbcb9
Merge branch 'main' into fix/bug-in-design-system-example
zsh77 Oct 26, 2024
c297b08
Merge branch 'main' into fix/bug-in-design-system-example
zsh77 Oct 29, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions examples/design-system/.changeset/config.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,5 +6,7 @@
"linked": [],
"access": "public",
"updateInternalDependencies": "patch",
"ignore": ["@acme/docs"]
}
"ignore": [
"@repo/docs"
]
}
62 changes: 38 additions & 24 deletions examples/design-system/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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.d.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 {
Expand All @@ -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
Expand All @@ -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';

<Meta title="Components/Button" component={Button} />
Expand Down
4 changes: 2 additions & 2 deletions examples/design-system/apps/docs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand All @@ -30,4 +30,4 @@
"typescript": "5.5.4",
"vite": "^5.1.4"
}
}
}
5 changes: 3 additions & 2 deletions examples/design-system/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe it's not related to this PR (as in, maybe it's already happening before this PR) but this 404's for me. does it work for you?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dimitropoulos If you see fit, I could add this script in another merge request too. About the 404, you have to run the build script before the preview-storybook. Let me know if there was another thing going on.

},
"devDependencies": {
"@changesets/cli": "^2.27.1",
Expand All @@ -17,4 +18,4 @@
},
"packageManager": "[email protected]",
"name": "design-system"
}
}
4 changes: 2 additions & 2 deletions examples/design-system/packages/ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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:*",
Expand All @@ -31,4 +31,4 @@
"publishConfig": {
"access": "public"
}
}
}
1 change: 0 additions & 1 deletion examples/design-system/packages/ui/tsup.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ export default defineConfig((options) => ({
entryPoints: ["src/button.tsx"],
format: ["cjs", "esm"],
dts: true,
sourcemap: true,
external: ["react"],
...options,
}));
8 changes: 7 additions & 1 deletion examples/design-system/turbo.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,12 @@
},
"clean": {
"cache": false
},
"preview-storybook": {
"dependsOn": [
"^build"
],
"cache": false
}
}
}
}
Loading