chore: restructure packages and migrate to pnpm

Author: efoken

.knip.json

@@ -6,11 +6,8 @@
   "ignoreDependencies": [
     "@md3-ui/core",
     "@md3-ui/test-utils",
-    "@preconstruct/hook",
     "@svgr/plugin-jsx",
-    "prettier-plugin-organize-imports",
-    "webpack",
-    "yarn-deduplicate"
+    "prettier-plugin-organize-imports"
   ],
   "rules": {
     "unresolved": "off"

.npmrc

@@ -0,0 +1,2 @@
+strict-peer-dependencies=false
+enable-pre-post-scripts=true

.storybook/main.ts

@@ -1,43 +1,51 @@
-import { StorybookConfig } from "@storybook/react-webpack5"
-import webpack from "webpack"
+import { StorybookConfig } from "@storybook/react-vite"
+import { mergeConfig } from "vite"
+
+const extensions = [
+  ".web.js",
+  ".js",
+  ".web.jsx",
+  ".jsx",
+  ".web.ts",
+  ".ts",
+  ".web.tsx",
+  ".tsx",
+  ".json",
+]
 
 const config: StorybookConfig = {
-  stories: ["../packages/*/stories/*.stories.tsx"],
+  stories: ["../packages/*/src/**/*.stories.tsx"],
   addons: [
     "@storybook/addon-a11y",
-    "@storybook/addon-essentials",
+    {
+      name: "@storybook/addon-essentials",
+      options: {
+        docs: false,
+      },
+    },
     "storybook-addon-performance",
     "storybook-dark-mode",
   ],
   framework: {
-    name: "@storybook/react-webpack5",
+    name: "@storybook/react-vite",
     options: {
       strictMode: true,
-      builder: {
-        fsCache: true,
-        lazyCompilation: true,
-      },
     },
   },
-  webpackFinal: (config) => ({
-    ...config,
-    plugins: [
-      ...(config.plugins ?? []),
-      new webpack.DefinePlugin({
-        __DEV__: JSON.stringify(true),
-      }),
-    ],
-    resolve: {
-      ...config.resolve,
-      alias: {
-        ...config.resolve?.alias,
-        "react-native": "react-native-web",
+  viteFinal: (config) =>
+    mergeConfig(config, {
+      optimizeDeps: {
+        esbuildOptions: {
+          resolveExtensions: extensions,
+        },
       },
-      extensions: [".web.js", ".web.jsx", ".web.ts", ".web.tsx"].concat(
-        config.resolve?.extensions ?? [],
-      ),
-    },
-  }),
+      resolve: {
+        alias: {
+          "react-native": "react-native-web",
+        },
+        extensions,
+      },
+    }),
 }
 
 export default config

app/metro.config.js

@@ -19,5 +19,6 @@ module.exports = {
     ],
     // 3. Force Metro to resolve (sub)dependencies only from `nodeModulesPaths`
     disableHierarchicalLookup: true,
+    unstable_enableSymlinks: true,
   },
 }

app/package.json

@@ -5,16 +5,15 @@
   "main": "src/index.ts",
   "dependencies": {
     "@expo/vector-icons": "^13.0.0",
-    "@md3-ui/core": "^0.2.1",
+    "@md3-ui/core": "workspace:*",
     "expo": "^49.0.13",
     "expo-status-bar": "~1.6.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.72.5",
+    "react-native": "0.72.6",
     "react-native-iphone-x-helper": "^1.3.1",
     "react-native-safe-area-context": "4.6.3",
-    "react-router-native": "^6.16.0",
-    "uuid": "^3.4.0"
+    "react-router-native": "^6.16.0"
   },
   "devDependencies": {
     "babel-preset-expo": "^9.5.2",

babel.config.js

@@ -1,5 +1,4 @@
 import nextMDX from "@next/mdx"
-import withPreconstruct from "@preconstruct/next"
 import remarkEmoji from "remark-emoji"
 import remarkGfm from "remark-gfm"
 import remarkSlug from "remark-slug"
@@ -13,28 +12,26 @@ const withMDX = nextMDX({
   },
 })
 
-export default withPreconstruct(
-  withMDX({
-    transpilePackages: [
-      "react-native",
-      "react-native-safe-area-context",
-      "react-native-svg",
-      "react-native-web",
-    ],
-    pageExtensions: ["js", "jsx", "ts", "tsx", "md", "mdx"],
-    reactStrictMode: true,
-    webpack: (config) => ({
-      ...config,
-      resolve: {
-        ...config.resolve,
-        alias: {
-          ...config.resolve.alias,
-          "react-native": "react-native-web",
-        },
-        extensions: [".web.js", ".web.jsx", ".web.ts", ".web.tsx"].concat(
-          config.resolve.extensions,
-        ),
+export default withMDX({
+  transpilePackages: [
+    "react-native",
+    "react-native-safe-area-context",
+    "react-native-svg",
+    "react-native-web",
+  ],
+  pageExtensions: ["js", "jsx", "ts", "tsx", "md", "mdx"],
+  reactStrictMode: true,
+  webpack: (config) => ({
+    ...config,
+    resolve: {
+      ...config.resolve,
+      alias: {
+        ...config.resolve.alias,
+        "react-native": "react-native-web",
       },
-    }),
+      extensions: [".web.js", ".web.jsx", ".web.ts", ".web.tsx"].concat(
+        config.resolve.extensions,
+      ),
+    },
   }),
-)
+})

docs/next.config.mjs

@@ -9,29 +9,27 @@
     "start": "next start"
   },
   "dependencies": {
-    "@md3-ui/core": "^0.2.1",
-    "@md3-ui/icons": "^0.2.1",
-    "@md3-ui/props-docs": "^0.2.1",
-    "@md3-ui/utils": "^0.2.1",
+    "@md3-ui/core": "workspace:*",
+    "@md3-ui/icons": "workspace:*",
+    "@md3-ui/props-docs": "workspace:*",
+    "@md3-ui/utils": "workspace:*",
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
     "@next/mdx": "^13.5.4",
-    "@preconstruct/next": "^4.0.0",
     "copy-to-clipboard": "^3.3.3",
     "next": "^13.5.4",
     "next-seo": "^6.1.0",
     "prism-react-renderer": "^2.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-live": "^4.1.5",
-    "react-native": "0.72.5",
+    "react-native": "0.72.6",
     "react-native-safe-area-context": "4.6.3",
-    "react-native-svg": "13.9.0",
+    "react-native-svg": "13.10.0",
     "react-native-web": "^0.19.9",
     "remark-emoji": "^4.0.0",
-    "remark-gfm": "^4.0.0",
-    "remark-slug": "^7.0.1",
-    "webpack": "^5.88.2"
+    "remark-gfm": "^3.0.1",
+    "remark-slug": "^7.0.1"
   },
   "devDependencies": {
     "eslint": "^8.51.0",

docs/package.json

@@ -4,7 +4,7 @@ export const meta = {
   title: "Button",
   description:
     "Buttons help people initiate actions, from sending an email, to sharing a document, to liking a post.",
-  package: "@md3-ui/button",
+  package: "@md3-ui/components",
 }
 
 There are five types of common buttons: elevated, filled, filled tonal,

docs/pages/docs/components/button.mdx

@@ -4,7 +4,7 @@ export const meta = {
   title: "Checkbox",
   description:
     "Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off.",
-  package: "@md3-ui/checkbox",
+  package: "@md3-ui/components",
 }
 
 There's one type of checkbox in Material. Use this selection control when the