refactor: split ui from vite plugin

itsjavi · Aug 11, 2023 · 6ae02ef · 6ae02ef
1 parent 83f66ea
commit 6ae02ef
Show file tree

Hide file tree

Showing 25 changed files with 257 additions and 115 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -21,10 +21,10 @@ pnpm install
 
 ## Developing
 
-The main `@storylite/storylite` package can be found in `packages/storylite`.
+The main packages are `ui` and `vite-plugin`, and can be found in `packages/*`.
 
-You can quickly test and debug your changes in `@storylite/storylite` by running `packages/example`
-(it's a playground project with demos in many frameworks to try out storylite):
+You can quickly build and preview your changes by running the `dev` command
+(it will also start the React example project):
 
 ```sh
 pnpm dev
@@ -63,15 +63,15 @@ If possible, your changes should be also documented.
 
 StoryLite uses [changesets](https://github.com/changesets/changesets) to manage the changelog and releases.
 
-If you are changing `@storylite/storylite` you need to
+Commit to `main` that comes from a PR, should
 [add a changeset](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md)
 (or you will be asked to do so in your PR):
 
 ```sh
 pnpm changeset
 ```
 
-You will be asked to select the scope (pick `@storylite/storylite`) and version (patch, minor, major).
+You will be asked to select the scope and version (patch, minor, major).
 Then you should add a summary of the changes in the following format:
 
 - WHAT the change is

diff --git a/packages/examples/react/index.html b/packages/examples/react/index.html
@@ -15,6 +15,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/app.tsx"></script>
+    <script type="module" src="/storylite.tsx"></script>
   </body>
 </html>
diff --git a/packages/examples/react/package.json b/packages/examples/react/package.json
@@ -13,6 +13,7 @@
   },
   "devDependencies": {
     "@storylite/storylite": "workspace:*",
+    "@storylite/vite-plugin": "workspace:*",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react-swc": "^3.3.2",

diff --git a/packages/examples/react/app.tsx → packages/examples/react/storylite.tsx b/packages/examples/react/app.tsx → packages/examples/react/storylite.tsx
diff --git a/packages/examples/react/tsconfig.json b/packages/examples/react/tsconfig.json
@@ -4,6 +4,6 @@
   "compilerOptions": {
     "jsx": "react-jsx",
     "allowSyntheticDefaultImports": true,
-    "types": ["node", "react", "react-dom", "@storylite/storylite/dist/virtual-modules.d.ts"]
+    "types": ["node", "react", "react-dom", "@storylite/vite-plugin/dist/virtual-modules.d.ts"]
   }
 }
diff --git a/packages/examples/react/vite.config.ts b/packages/examples/react/vite.config.ts
@@ -4,7 +4,7 @@
  * @see https://vitejs.dev/config
  */
 
-import { storylitePlugin } from '@storylite/storylite/dist/plugins'
+import storylitePlugin from '@storylite/vite-plugin'
 import react from '@vitejs/plugin-react-swc'
 import { defineConfig } from 'vite'
 

diff --git a/packages/storylite/index.html b/packages/storylite/index.html
diff --git a/packages/storylite/package.json b/packages/storylite/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@storylite/storylite",
   "version": "0.2.0",
-  "description": "A lightweight alternative to StoryBook, built on top of Vite⚡️",
+  "description": "A lightweight alternative to StoryBook, built on top of Vite⚡️. This package contains the React app.",
   "license": "MIT",
   "type": "module",
   "exports": {
@@ -10,16 +10,6 @@
       "import": "./dist/index.js",
       "default": "./dist/index.cjs"
     },
-    "./plugins": {
-      "types": "./dist/plugins.d.ts",
-      "import": "./dist/plugins.js",
-      "default": "./dist/plugins.cjs"
-    },
-    "./dist/plugins": {
-      "types": "./dist/plugins.d.ts",
-      "import": "./dist/plugins.js",
-      "default": "./dist/plugins.cjs"
-    },
     "./dist/index.css": "./dist/index.css"
   },
   "main": "./dist/index.cjs",

diff --git a/packages/storylite/src/plugins/index.ts b/packages/storylite/src/plugins/index.ts
diff --git a/packages/storylite/src/plugins/vite-plugin-remove-testid/index.ts b/packages/storylite/src/plugins/vite-plugin-remove-testid/index.ts
diff --git a/packages/storylite/storylite.config-example.ts b/packages/storylite/storylite.config-example.ts
diff --git a/packages/storylite/tsconfig.json b/packages/storylite/tsconfig.json
@@ -1,6 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/tsconfig",
   "compilerOptions": {
+    "jsx": "react-jsx",
     "target": "ESNext",
     "useDefineForClassFields": true,
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
@@ -15,7 +16,6 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx",
     "baseUrl": ".",
     "paths": {
       "@/": ["./src/"],

diff --git a/packages/storylite/tsup.config.ts b/packages/storylite/tsup.config.ts
@@ -4,7 +4,6 @@ export default defineConfig([
   {
     entry: {
       index: './src/index.ts',
-      plugins: './src/plugins/index.ts',
     },
     outDir: './dist',
     format: ['esm', 'cjs'],
@@ -36,11 +35,6 @@ export default defineConfig([
     minify: false,
     skipNodeModulesBundle: true,
     external: ['node_modules'],
-    onSuccess: [
-      'sleep 2',
-      'cp ../../README.md ./README.md',
-      'cp ../../LICENSE ./LICENSE',
-      'cp ./src/plugins/vite-plugin-storylite/virtual-modules.d.ts ./dist/virtual-modules.d.ts',
-    ].join(' && '),
+    onSuccess: ['sleep 2'].join(' && '),
   },
 ])
diff --git a/packages/vite-plugin/.eslintrc.json b/packages/vite-plugin/.eslintrc.json
@@ -0,0 +1,10 @@
+{
+  "$schema": "https://json.schemastore.org/eslintrc.json",
+  "extends": ["../../.eslintrc.js"],
+  "rules": {
+    "@typescript-eslint/no-explicit-any": "off",
+    "react/prop-types": "off",
+    "react/react-in-jsx-scope": "off",
+    "react/jsx-key": "warn"
+  }
+}
diff --git a/packages/vite-plugin/.gitignore b/packages/vite-plugin/.gitignore
@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+vite.config.ts.timestamp-*
diff --git a/packages/vite-plugin/CHANGELOG.md b/packages/vite-plugin/CHANGELOG.md
@@ -0,0 +1,46 @@
+# @storylite/vite-plugin
+
+## 0.2.0
+
+### Breaking Changes
+
+- big refactoring to use context instead of virtual modules.
+- fixes stories resolution and the issues with the virtual modules being bundled.
+- changed: renamed `StoryLiteRouter` -> `StoryLiteApp`
+- changed: plugin config now only accepts the `stories` option, which is the relative glob path to the stories.
+- changed: `StoryLiteApp` now requires a `stories` prop, which the modules map of the stories, you can load them
+  dynamically with `import stories from 'virtual:storylite-stories'`
+  (make sure you import it in the ts config types as `"@storylite/vite-plugin/dist/virtual-modules.d.ts"`)
+  and Vite with the StoryLite plugin will take care of the rest. Check the react examples for more info.
+
+### Patch Changes
+
+- update react-router-dom to 6.15.0
+
+## 0.1.3
+
+### Patch Changes
+
+- better dependency definitions
+
+## 0.1.2
+
+### Patch Changes
+
+- fix: router has now fully static site support. fix navigation.
+
+## 0.1.1
+
+### Patch Changes
+
+- fix: license
+
+## 0.1.0
+
+### Minor Changes
+
+- 134cf89: refactor: The project is now basically a plugin to integrate with Vite, with a React app.
+
+### Patch Changes
+
+- d4e07ac: initial Vite project setup
diff --git a/packages/vite-plugin/LICENSE b/packages/vite-plugin/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Javi Aguilar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/vite-plugin/README.md b/packages/vite-plugin/README.md
@@ -0,0 +1,30 @@
+# @storylite/vite-plugin
+
+A Vite plugin to integrate StoryLite with Vite.
+
+## Installation
+
+```bash
+
+npm i -D @storylite/vite-plugin
+
+```
+
+## Usage
+
+```ts
+// vite.config.ts
+
+/// <reference types="vite/client" />
+
+import storylite from '@storylite/vite-plugin'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [
+    storylite({
+      stories: 'stories/**/*.stories.tsx', // relative to process.cwd()
+    }),
+  ],
+})
+```
diff --git a/packages/vite-plugin/package.json b/packages/vite-plugin/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "@storylite/vite-plugin",
+  "version": "0.2.0",
+  "description": "A lightweight alternative to StoryBook, built on top of Vite⚡️",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "sleep 10 && tsup --watch --clean",
+    "lint": "eslint --max-warnings=10 .",
+    "lint-fix": "eslint --fix .",
+    "prepublishOnly": "pnpm run build",
+    "publint-check": "pnpm publint",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "vite": "^4.4.9"
+  },
+  "devDependencies": {
+    "@r1stack/coding-style": "^0.2.1",
+    "@types/node": "^20.4.9",
+    "publint": "^0.2.0",
+    "tsup": "^7.2.0",
+    "typescript": "^5.1.6"
+  }
+}
diff --git a/packages/vite-plugin/public/vite.svg b/packages/vite-plugin/public/vite.svg
diff --git a/...rc/plugins/vite-plugin-storylite/index.ts → packages/vite-plugin/src/index.ts b/...rc/plugins/vite-plugin-storylite/index.ts → packages/vite-plugin/src/index.ts
@@ -1,6 +1,8 @@
 import { Plugin } from 'vite'
 
-import { StoryLitePluginConfig } from '@/types'
+export type StoryLitePluginConfig = {
+  stories: string
+}
 
 const storiesVirtualModuleId = 'virtual:storylite-stories'
 const resolvedStoriesVirtualModuleId = '\0virtual:storylite-stories'

diff --git a/...ite-plugin-storylite/virtual-modules.d.ts → ...ages/vite-plugin/src/virtual-modules.d.ts b/...ite-plugin-storylite/virtual-modules.d.ts → ...ages/vite-plugin/src/virtual-modules.d.ts
diff --git a/packages/vite-plugin/tsconfig.json b/packages/vite-plugin/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "@r1stack/coding-style/tsconfig/base.json",
+  "include": ["src", "*.ts"]
+}