feat(examples): update design-system

examples/design-system/README.md

@@ -42,10 +42,10 @@ Using Turborepo simplifies managing your design system monorepo, as you can have
 This Turborepo includes the following packages and applications:
 
 - `apps/docs`: Component documentation site with Storybook
-- `packages/@acme/core`: Core React components
-- `packages/@acme/utils`: Shared React utilities
-- `packages/@acme/tsconfig`: Shared `tsconfig.json`s used throughout the Turborepo
-- `packages/eslint-config-acme`: ESLint preset
+- `packages/ui`: Core React components
+- `packages/utils`: Shared React utilities
+- `packages/tsconfig`: Shared `tsconfig.json`s used throughout the Turborepo
+- `packages/eslint-config-custom`: ESLint preset
 
 Each package and app is 100% [TypeScript](https://www.typescriptlang.org/). Workspaces enables us to "hoist" dependencies that are shared between packages to the root `package.json`. This means smaller `node_modules` folders and a better local dev experience. To install a dependency for the entire monorepo, use the `-w` workspaces flag with `pnpm add`.
 

examples/design-system/apps/docs/.eslintrc.js

@@ -1,4 +1,3 @@
 module.exports = {
-  root: true,
-  extends: ["acme"],
+  extends: ["custom/storybook"],
 };

examples/design-system/apps/docs/.storybook/main.js

@@ -1,27 +1,42 @@
-const path = require("path");
+import { dirname, join, resolve } from "path";
 
-module.exports = {
-  stories: ["../stories/**/*.stories.mdx", "../stories/**/*.stories.tsx"],
-  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
-  framework: "@storybook/react",
-  core: {
-    builder: "@storybook/builder-vite",
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, "package.json")));
+}
+
+const config = {
+  stories: ["../stories/*.stories.tsx", "../stories/**/*.stories.tsx"],
+  addons: [
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-docs"),
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/react-vite"),
+    options: {},
   },
+
+  core: {},
+
   async viteFinal(config, { configType }) {
     // customize the Vite config here
     return {
       ...config,
+      define: { "process.env": {} },
       resolve: {
         alias: [
           {
-            find: "@acme/core",
-            replacement: path.resolve(
-              __dirname,
-              "../../../packages/acme-core/"
-            ),
+            find: "ui",
+            replacement: resolve(__dirname, "../../../packages/ui/"),
           },
         ],
       },
     };
   },
+
+  docs: {
+    autodocs: true,
+  },
 };
+
+export default config;

examples/design-system/apps/docs/package.json

@@ -3,28 +3,30 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "dev": "start-storybook -p 6006",
-    "build": "build-storybook --docs",
+    "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 && rm -rf node_modules",
+    "lint": "eslint ./stories/*.stories.tsx"
   },
   "dependencies": {
-    "@acme/core": "workspace:0.0.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "ui": "workspace:*"
   },
   "devDependencies": {
-    "@acme/tsconfig": "workspace:0.0.0",
-    "@storybook/addon-actions": "^6.5.14",
-    "@storybook/addon-docs": "^6.5.14",
-    "@storybook/addon-essentials": "^6.5.14",
-    "@storybook/addon-links": "^6.5.14",
-    "@storybook/builder-vite": "^0.1.41",
-    "@storybook/react": "^6.5.14",
+    "@storybook/addon-actions": "^7.4.0",
+    "@storybook/addon-docs": "^7.4.0",
+    "@storybook/addon-essentials": "^7.4.0",
+    "@storybook/addon-links": "^7.4.0",
+    "@storybook/react": "^7.4.0",
+    "@storybook/react-vite": "^7.4.0",
     "@vitejs/plugin-react": "^1.3.2",
-    "eslint-config-acme": "workspace:0.0.0",
+    "eslint-config-custom": "workspace:*",
     "serve": "^13.0.4",
-    "typescript": "^4.9.3",
-    "vite": "^2.9.15"
+    "storybook": "^7.4.0",
+    "tsconfig": "workspace:*",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9"
   }
 }

examples/design-system/apps/docs/stories/button.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "ui";
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/react/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  render: () => (
+    <Button
+      onClick={(): void => {
+        // eslint-disable-next-line no-alert -- alert for demo
+        alert("Hello from Turborepo!");
+      }}
+    >
+      Hello
+    </Button>
+  ),
+};

examples/design-system/packages/acme-core/tsconfig.json → examples/design-system/apps/docs/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "@acme/tsconfig/react-library.json",
+  "extends": "tsconfig/react-app.json",
   "include": ["."],
   "exclude": ["dist", "build", "node_modules"]
 }

examples/design-system/package.json

@@ -12,9 +12,9 @@
   },
   "devDependencies": {
     "@changesets/cli": "^2.25.2",
-    "eslint": "^8.29.0",
-    "eslint-config-acme": "workspace:0.0.0",
-    "prettier": "^2.8.0",
+    "eslint": "^8.48.0",
+    "prettier": "^3.0.3",
+    "tsconfig": "workspace:*",
     "turbo": "latest"
   },
   "packageManager": "pnpm@8.6.10"

examples/design-system/packages/eslint-config-custom/README.md

@@ -0,0 +1,3 @@
+# `@turbo/eslint-config`
+
+Collection of internal eslint configurations.

examples/design-system/packages/eslint-config-custom/library.js

@@ -0,0 +1,34 @@
+const { resolve } = require("node:path");
+
+const project = resolve(process.cwd(), "tsconfig.json");
+
+/*
+ * This is a custom ESLint configuration for use with
+ * typescript packages.
+ *
+ * This config extends the Vercel Engineering Style Guide.
+ * For more information, see https://github.com/vercel/style-guide
+ *
+ */
+
+module.exports = {
+  extends: [
+    "@vercel/style-guide/eslint/node",
+    "@vercel/style-guide/eslint/typescript",
+  ].map(require.resolve),
+  parserOptions: {
+    project,
+  },
+  globals: {
+    React: true,
+    JSX: true,
+  },
+  settings: {
+    "import/resolver": {
+      typescript: {
+        project,
+      },
+    },
+  },
+  ignorePatterns: ["node_modules/", "dist/"],
+};

examples/design-system/packages/eslint-config-custom/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "eslint-config-custom",
+  "license": "MIT",
+  "version": "0.0.0",
+  "private": true,
+  "devDependencies": {
+    "@vercel/style-guide": "^5.0.0",
+    "eslint-config-turbo": "^1.10.12",
+    "eslint-plugin-mdx": "^2.2.0",
+    "eslint-plugin-storybook": "^0.6.13"
+  }
+}