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

### Description

- add `preview-storybook` task to turbo.json and it's script in the
root's package.json
- improvement on clean script
- changed the tsup config of `@acme/ui` package not to make source map
files in order to match the content of `ui/dist` directory stated in
README of root
- bug fix of README file. Replaced `acme-core` and other names that
meant to point to packages/ui with `@acme/ui`

### Testing Instructions

Running `npx create-turbo@latest -e design-system` and then `pnpm dev`
should work and start storybook in dev mode. README.md file in the root
should be fine too.

---------

Co-authored-by: Dimitri Mitropoulos <[email protected]>
Co-authored-by: Anthony Shew <[email protected]>

Author: 3 people

examples/design-system/.changeset/config.json

@@ -6,5 +6,7 @@
   "linked": [],
   "access": "public",
   "updateInternalDependencies": "patch",
-  "ignore": ["@acme/docs"]
-}
+  "ignore": [
+    "@repo/docs"
+  ]
+}

examples/design-system/README.md

@@ -45,7 +45,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
 
@@ -55,44 +54,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 {
@@ -106,12 +110,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
@@ -120,13 +134,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} />

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": {
@@ -30,4 +30,4 @@
     "typescript": "5.5.4",
     "vite": "^5.1.4"
   }
-}
+}

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",
@@ -17,4 +18,4 @@
   },
   "packageManager": "[email protected]",
   "name": "design-system"
-}
+}

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:*",
@@ -31,4 +31,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

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,
 }));

examples/design-system/turbo.json

@@ -15,6 +15,12 @@
     },
     "clean": {
       "cache": false
+    },
+    "preview-storybook": {
+      "dependsOn": [
+        "^build"
+      ],
+      "cache": false
     }
   }
-}
+}