refactor: ditch separate config file, improve examples

README.md

@@ -23,7 +23,8 @@ StoryLite provides a familiar UI that is easy to use and customize to each team'
 
 - Lightweight and customizable, with a minimal set of dependencies.
 - Addons system with the basics (dark mode, viewport size, grid, outline, fullscreen, etc.).
-- HMR support.
+- HMR (Hot Module Reload) support when story files change.
+- SSG (Static Site Generation) support.
 - Supports `.stories.jsx` and `.stories.tsx` stories.
 
 ## Installation

package.json

@@ -14,7 +14,7 @@
     "changeset.apply": "changeset version && pnpm i --no-frozen-lockfile && git add .",
     "changeset.release": "pnpm build && pnpm publint && changeset publish",
     "clear-cache": "rm -rf packages/*/.turbo && rm -rf packages/*/.next && jest --clearCache",
-    "dev": "turbo run dev --no-deps --no-cache --parallel --concurrency 20",
+    "dev": "turbo run build && turbo run dev --no-deps --no-cache --parallel --concurrency 20",
     "format": "pnpm lint-fix && pnpm prettier-fix",
     "postinstall": "pnpm format && pnpm build",
     "lint": "turbo lint",

packages/examples/react/README.md

@@ -9,6 +9,5 @@ Basic setup of StoryLite with React:
 - app.tsx
 - index.html
 - package.json
-- storylite.config.ts
 - tsconfig.json
 - vite.config.ts

packages/examples/react/package.json

@@ -4,15 +4,18 @@
   "description": "Storylite example integration with React",
   "type": "module",
   "scripts": {
+    "build": "vite build",
+    "dev": "vite --port=7707",
+    "preview": "vite preview",
     "storylite": "open http://localhost:7707 && vite --port=7707"
   },
   "dependencies": {
+    "@storylite/storylite": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.14.2"
   },
   "devDependencies": {
-    "@storylite/storylite": "workspace:*",
     "@types/react": "^18.2.18",
     "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react-swc": "^3.3.2",

packages/examples/react/stories/demo.stories.tsx

@@ -1,5 +1,15 @@
+import { StoryComponent, StoryMeta } from '@storylite/storylite'
+
 export default {
-  title: 'Demo',
-}
+  title: 'Demos',
+} satisfies StoryMeta
+
+const Demo1: StoryComponent = () => <div style={{ color: 'blue', fontSize: '28px' }}>It Works!</div>
+Demo1.storyTitle = 'Demo 1'
+
+const Demo2: StoryComponent = () => (
+  <div style={{ color: 'orange', fontSize: '28px' }}>It Works!</div>
+)
+Demo2.storyTitle = 'Demo 2'
 
-export const Demo = () => <div style={{ color: 'blue', fontSize: '28px' }}>It Works!</div>
+export { Demo1, Demo2 }

packages/examples/react/stories/index.stories.tsx

@@ -0,0 +1,13 @@
+import { StoryComponent, StoryMeta } from '@storylite/storylite'
+
+export default {
+  title: 'Welcome',
+  icon: <span>🏠</span>,
+  priority: 100,
+} satisfies StoryMeta
+
+export const Main: StoryComponent = () => (
+  <div style={{ color: 'green', fontSize: '28px' }}>React Demo Index Page</div>
+)
+
+// Main.storyTitle = 'Main Component'

packages/examples/react/vite.config.ts

@@ -13,5 +13,12 @@ export default defineConfig({
     port: Number(process.env.PORT || 0) || 7707,
     host: '0.0.0.0',
   },
-  plugins: [storylitePlugin(), react()],
+  plugins: [
+    storylitePlugin({
+      title: 'StoryLite - React', // Sidebar title
+      stories: 'stories/**/*.stories.tsx', // relative to the CWD
+      defaultStory: 'index', // index page file prefix, e.g. index = index.stories.tsx
+    }),
+    react(),
+  ],
 })

packages/storylite/.gitignore

@@ -23,5 +23,4 @@ dist-ssr
 *.sln
 *.sw?
 vite.config.ts.timestamp-*
-storylite.config.js
-storylite.config.ts
+

packages/storylite/package.json

@@ -23,9 +23,6 @@
   },
   "main": "./dist/index.cjs",
   "types": "./dist/index.d.ts",
-  "bin": {
-    "storylite": "./bin/server.cjs"
-  },
   "files": [
     "dist"
   ],

packages/storylite/src/plugins/storylitePlugin.ts

@@ -1,82 +1,36 @@
-import { execSync } from 'node:child_process'
-import { existsSync } from 'node:fs'
-import path from 'node:path'
-
 import { Plugin } from 'vite'
 
 import { StoryLiteUserConfig } from '@/types'
 
-const storyliteConfigFileBase = path.resolve(process.cwd(), 'storylite.config')
-const storyliteConfigFile: string =
-  ['.ts', '.tsx', '.js', '.jsx', '.cjs', '.mjs']
-    .map(ext => storyliteConfigFileBase + ext)
-    .find(file => existsSync(file)) || storyliteConfigFileBase + '.ts'
-const configFileExists = existsSync(storyliteConfigFile)
-
-if (
-  configFileExists &&
-  (storyliteConfigFile.endsWith('.ts') || storyliteConfigFile.endsWith('.tsx'))
-) {
-  execSync('tsc --moduleResolution node --module esnext ' + storyliteConfigFile, {
-    encoding: 'utf-8',
-    stdio: 'inherit',
-  })
-}
-
-const storyliteConfigFileJs = storyliteConfigFile
-  .replace(/\.tsx?$/, '.js')
-  .replace(/\.[cm]js$/, '.cjs')
-
 const defaultConfig: StoryLiteUserConfig = {
+  title: 'StoryLite',
   stories: 'stories/**/*.stories.tsx',
   defaultStory: 'index',
-  title: 'StoryLite',
   styleImports: {
     ui: [],
     sandbox: [],
   },
 }
 
-const getStoryLiteConfig = async (): Promise<{ config: StoryLiteUserConfig; code: string }> => {
-  if (existsSync(storyliteConfigFile)) {
-    const storyliteConfig = await import(storyliteConfigFileJs)
-
-    const code = `
-    import config from '${storyliteConfigFileJs}'
-    
-    const defaultConfig = ${JSON.stringify(defaultConfig)}
-    const resolvedConfig = { ...defaultConfig, ...config }
-    
-    export default resolvedConfig
-  `
-
-    return {
-      config: storyliteConfig.default,
-      code,
-    }
-  }
-
+const generateConfigCode = (
+  userConfig?: StoryLiteUserConfig,
+): { config: StoryLiteUserConfig; code: string } => {
   const code = `
-    export default ${JSON.stringify(defaultConfig)}
-  `
+  // generated by storylite
+  
+  const defaultConfig = ${JSON.stringify(defaultConfig)}
+  const userConfig = ${JSON.stringify(userConfig ?? {})}
+  const resolvedConfig = { ...defaultConfig, ...userConfig }
+  
+  export default resolvedConfig
+`
 
   return {
-    config: defaultConfig,
+    config: { ...defaultConfig, ...userConfig },
     code,
   }
 }
 
-//
-// const getCssContents = async (cssFiles: string[]) => {
-//   const cssFileContents = await Promise.all(
-//     cssFiles.map(async cssFile => {
-//       return await fs.readFile(cssFile)
-//     })
-//   )
-//
-//   return cssFileContents.join('\n')
-// }
-
 const createCssBundleCode = (cssFiles: string[]) => {
   // import all as inline and export a concat of them:
   const cssImports = cssFiles
@@ -97,16 +51,14 @@ const moduleNames = {
   userSandboxStyles: 'storylite-user-styles-sandbox',
 }
 
-const storylitePlugin = async (): Promise<Plugin> => {
-  const { config: storyliteConfig, code: storyliteConfigImportCode } = await getStoryLiteConfig()
+const storylitePlugin = (userConfig?: StoryLiteUserConfig): Plugin => {
+  const { config: storyliteConfig, code: storyliteConfigImportCode } =
+    generateConfigCode(userConfig)
   // Define the file pattern to match
   const moduleIds = Object.values(moduleNames)
 
   return {
     name: 'import-stories',
-    config: async () => {
-      return storyliteConfig.viteConfig
-    },
     resolveId(id) {
       if (moduleIds.includes(id)) {
         return id // return the exact same ID, so Vite knows how to resolve it

packages/storylite/src/types/index.ts

@@ -1,7 +1,5 @@
 import React from 'react'
 
-import { UserConfig } from 'vite'
-
 export enum ElementIds {
   MainGlobalStyles = 'stories_mainLayoutGlobalStyles',
   SandboxGlobalStyles = 'stories_sandboxLayoutGlobalStyles',
@@ -15,7 +13,6 @@ export type StoryLiteUserConfig = {
   stories?: string
   defaultStory: string
   addons?: StoryAddonList
-  viteConfig?: UserConfig
   styleImports?: {
     ui: string[]
     sandbox: string[]

packages/storylite/tsconfig.json

@@ -21,7 +21,7 @@
       "@/": ["./src/"],
       "@/*": ["./src/*"]
     },
-    "types": ["node", "@testing-library/jest-dom", "vitest/globals"]
+    "types": ["node"]
   },
   "include": ["src", "*.ts"]
 }