docs(preview): 📝 start base for adding csb preview (#166)

adaptui · Oct 8, 2021 · f207e48 · f207e48 · vercel · Oct 8, 2021
1 parent 1c687ac
commit f207e48
Show file tree

Hide file tree

Showing 40 changed files with 3,025 additions and 570 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -54,3 +54,4 @@ yarn.lock
 ## library folder
 dist
 CHANGELOG.md
+templates
diff --git a/.gitignore b/.gitignore
@@ -49,3 +49,4 @@ jspm_packages
 
 ## library folder
 dist
+templates
diff --git a/.prettierignore b/.prettierignore
@@ -54,3 +54,4 @@ yarn.lock
 # Library files
 dist
 CHANGELOG.md
+templates
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -2,6 +2,7 @@ module.exports = {
   features: { previewCsfV3: true },
   stories: ["../src/*/stories/*.stories.@(ts|tsx)"],
   addons: [
+    "storybook-addon-preview",
     "@storybook/addon-essentials",
     "@storybook/addon-a11y",
     {

diff --git a/.storybook/utils.tsx b/.storybook/utils.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import type { Story } from "@storybook/react";
+import { CodeSandboxTemplate } from "storybook-addon-preview";
 
 import theme from "../src/theme/defaultTheme";
 
@@ -67,3 +68,97 @@ export const createControls = (
     console.log(e);
   }
 };
+
+interface Props {
+  js?: string;
+  ts?: string;
+  jsUtils?: string;
+  tsUtils?: string;
+  css?: string;
+  deps?: string[];
+}
+
+export function createPreviewTabs(props: Props) {
+  const { js, ts, jsUtils, tsUtils, css, deps: extraDeps = [] } = props;
+  const deps = [...extraDeps];
+  const tabs = [];
+
+  if (js) {
+    tabs.push({
+      tab: "JSX",
+      template: js,
+      language: "jsx",
+      copy: true,
+      codesandbox: NEXTJS_CUSTOM_CODESANDBOX(deps),
+    });
+  }
+
+  if (jsUtils) {
+    tabs.push({
+      tab: "UtilsJSX",
+      template: jsUtils,
+      language: "jsx",
+      copy: true,
+      codesandbox: NEXTJS_CUSTOM_CODESANDBOX(deps),
+    });
+  }
+
+  if (ts) {
+    tabs.push({
+      tab: "TSX",
+      template: ts,
+      language: "tsx",
+      copy: true,
+      codesandbox: NEXTTS_CUSTOM_CODESANDBOX(deps),
+    });
+  }
+
+  if (tsUtils) {
+    tabs.push({
+      tab: "UtilsTSX",
+      template: tsUtils,
+      language: "tsx",
+      copy: true,
+      codesandbox: NEXTTS_CUSTOM_CODESANDBOX(deps),
+    });
+  }
+
+  if (css) {
+    tabs.push({
+      tab: "CSS",
+      template: css,
+      language: "css",
+      copy: true,
+    });
+  }
+
+  return tabs;
+}
+
+const joinStrs = (strs: string[]) => {
+  return `[${strs.map(str => `"${str}"`).join(", ")}]`;
+};
+
+const NEXTJS_CUSTOM_CODESANDBOX = (dependencies: string[]) =>
+  new Function(`
+var previews = arguments[0];
+return {
+    framework: "nextjs",
+    files: {
+        "components/index.js": previews["JSX"][0],
+        ...(previews["UtilsJSX"] ? {"component/Utils.component.js": previews["UtilsJSX"][0]} : {}),
+    },
+    userDependencies: ${joinStrs(dependencies)},
+};`) as CodeSandboxTemplate;
+
+const NEXTTS_CUSTOM_CODESANDBOX = (dependencies: string[]) =>
+  new Function(`
+var previews = arguments[0];
+return {
+    framework: "next",
+    files: {
+        "components/index.tsx": previews["TSX"][0],
+        ...(previews["UtilsTSX"] ? {"src/Utils.component.tsx": previews["UtilsTSX"][0]} : {}),
+    },
+    userDependencies: ${joinStrs(dependencies)},
+};`) as CodeSandboxTemplate;
diff --git a/package.json b/package.json
@@ -25,13 +25,13 @@
   "types": "dist/types/index.d.ts",
   "typings": "dist/types/index.d.ts",
   "files": [
-    "dist",
     "tailwindPlugins",
     "preset.d.ts",
-    "preset.js"
+    "preset.js",
+    "dist"
   ],
   "scripts": {
-    "boot": "yarn keys",
+    "boot": "concurrently \"yarn keys\" \"yarn previews\"",
     "prebuild": "rimraf dist",
     "build": "yarn keys && concurrently yarn:build:*",
     "build:cjs": "cross-env BABEL_ENV=cjs babel src --extensions .ts,.tsx -d dist/cjs --source-maps",
@@ -43,16 +43,17 @@
     "contributors:generate": "all-contributors generate",
     "format": "prettier -wl \"./**/*.{html,css,js,jsx,ts,tsx,md,json}\"",
     "format:package": "sort-package-json package.json",
-    "postinstall": "husky install",
+    "postinstall": "concurrently \"husky install\" \"patch-package\"",
     "keys": "node scripts/generateKeys",
     "lint": "eslint --color --ext .js,.jsx,.ts,.tsx .",
     "lint:fix": "eslint --color --ext .js,.jsx,.ts,.tsx . --fix",
     "prepublishOnly": "pinst --disable",
+    "previews": "node scripts/create-previews.js",
     "postpublish": "pinst --enable",
     "release": "release-it",
     "size": "yarn build && size-limit",
     "storybook": "cross-env TAILWIND_MODE=watch start-storybook -p 6006",
-    "storybook-build": "build-storybook",
+    "storybook-build": "yarn keys && yarn previews && build-storybook",
     "test": "jest --config ./jest.config.ts --no-cache"
   },
   "commitlint": {
@@ -135,7 +136,7 @@
     "babel-plugin-jsx-remove-data-test-id": "3.0.0",
     "babel-plugin-lodash": "3.3.4",
     "babel-preset-react-app": "10.0.0",
-    "chalk": "4.1.2",
+    "chalk": "^4.1.2",
     "concurrently": "6.3.0",
     "cross-env": "7.0.3",
     "deepmerge": "4.2.2",
@@ -154,11 +155,14 @@
     "focus-visible": "5.2.0",
     "fs-extra": "10.0.0",
     "gacp": "2.10.2",
+    "glob-fs": "^0.1.7",
     "husky": "7.0.2",
     "jest": "27.2.4",
     "jest-axe": "5.0.1",
     "ladash": "1.2.0",
     "lint-staged": "11.2.0",
+    "node-fetch": "2.6.1",
+    "outdent": "^0.8.0",
     "patch-package": "6.4.7",
     "pinst": "2.1.6",
     "postcss": "8.3.9",
@@ -175,6 +179,7 @@
     "rimraf": "3.0.2",
     "size-limit": "5.0.5",
     "sort-package-json": "1.52.0",
+    "storybook-addon-preview": "^2.1.2",
     "tailwindcss": "2.2.16",
     "ts-morph": "12.0.0",
     "ts-node": "10.2.1",

diff --git a/patches/storybook-addon-preview+2.1.2.patch b/patches/storybook-addon-preview+2.1.2.patch
@@ -0,0 +1,157 @@
+diff --git a/node_modules/storybook-addon-preview/dist/CodeSandBox.js b/node_modules/storybook-addon-preview/dist/CodeSandBox.js
+index aff3b8a..e516b22 100644
+--- a/node_modules/storybook-addon-preview/dist/CodeSandBox.js
++++ b/node_modules/storybook-addon-preview/dist/CodeSandBox.js
+@@ -21,6 +21,8 @@ var index_1 = require("./presets/index");
+ var presets = {
+     "react": index_1.REACT_PRESET,
+     "reactjs": index_1.REACTJS_PRESET,
++    "next": index_1.NEXT_PRESET,
++    "nextjs": index_1.NEXTJS_PRESET,
+     "preact": index_1.PREACT_PRESET,
+     "angular": index_1.ANGULAR_PRESET,
+     "svelte": index_1.SVELTE_PRESET,
+@@ -35,7 +37,7 @@ function previewCodeSandBoxHTML(params) {
+ exports.previewCodeSandBoxHTML = previewCodeSandBoxHTML;
+ function getCodeSandBox(param) {
+     var framework = param.framework, _a = param.files, files = _a === void 0 ? {} : _a, _b = param.userDependencies, userDependencies = _b === void 0 ? [] : _b;
+-    var _c = presets[framework], dependencies = _c.dependencies, devDependencies = _c.devDependencies, template = _c.template, presetFiles = _c.files;
++    var _c = presets[framework], dependencies = _c.dependencies, devDependencies = _c.devDependencies, template = _c.template, presetFiles = _c.files, scripts = _c.scripts;
+     var obj = {
+         "package.json": {
+             content: {
+@@ -46,6 +48,9 @@ function getCodeSandBox(param) {
+     if (devDependencies) {
+         obj["package.json"].content.devDependencies = __assign({}, devDependencies);
+     }
++    if (scripts) {
++        obj["package.json"].content.scripts = __assign({}, scripts);
++    }
+     var packageDendencies = obj["package.json"].content.dependencies;
+     userDependencies.forEach(function (userModule) {
+         var result = /^(@*[^@]+)@*([^@/]+)*$/g.exec(userModule);
+diff --git a/node_modules/storybook-addon-preview/dist/presets/Next.js b/node_modules/storybook-addon-preview/dist/presets/Next.js
+new file mode 100644
+index 0000000..9799aa9
+--- /dev/null
++++ b/node_modules/storybook-addon-preview/dist/presets/Next.js
+@@ -0,0 +1,53 @@
++"use strict";
++exports.__esModule = true;
++/**
++ * Copyright (c) 2020-present NAVER Corp.
++ * egjs projects are licensed under the MIT license
++ */
++exports.NEXT_PRESET = {
++    dependencies: {
++        "@renderlesskit/react-tailwind": "0.0.1-alpha.18",
++        next: "11.1.2",
++        react: "17.0.2",
++        "react-dom": "17.0.2"
++    },
++    devDependencies:{
++        "@types/react": "17.0.27",
++        autoprefixer: "10.3.7",
++        deepmerge: "4.2.2",
++        eslint: "7.32.0",
++        "eslint-config-next": "11.1.2",
++        postcss: "8.3.9",
++        tailwindcss: "2.2.16",
++        typescript: "4.4.3"
++    },
++    scripts: {
++        dev: "next dev",
++        build: "next build",
++        start: "next start",
++        lint: "next lint"
++    },
++    files: {
++        "pages/_app.tsx": "import type { AppProps } from \"next/app\";\n  import React from \"react\";\n  import { RenderlesskitProvider } from \"@renderlesskit/react-tailwind\";\n\n  import \"../styles/index.css\";\n  import theme from \"../renderlesskit.config\";\n\n  function MyApp({ Component, pageProps }: AppProps) {\n    return (\n      <RenderlesskitProvider extend={theme}>\n        <Component {...pageProps} />\n      </RenderlesskitProvider>\n    );\n  }\n\n  export default MyApp;\n",
++
++        "pages/index.tsx": "import type { NextPage } from \"next\";\n  import Head from \"next/head\";\n\n  import Component from \"../components\";\n\n  const Home: NextPage = () => {\n    return (\n      <div className=''>\n        <Head>\n          <title>Create Next App</title>\n          <meta name='description' content='Generated by create next app' />\n          <link rel='icon' href='/favicon.ico' />\n        </Head>\n\n        <main className='flex items-center justify-center min-h-screen'>\n          <Component />\n        </main>\n      </div>\n    );\n  };\n\n  export default Home;",
++
++        "styles/index.css": "@tailwind base;\n@tailwind components;\n@tailwind utilities;",
++
++        ".eslintrc.json": "{\n    \"extends\": \"next/core-web-vitals\"\n  }",
++
++        ".gitignore": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n  # dependencies\n  /node_modules\n  /.pnp\n  .pnp.js\n\n  # testing\n  /coverage\n\n  # next.js\n  /.next/\n  /out/\n\n  # production\n  /build\n\n  # misc\n  .DS_Store\n  *.pem\n\n  # debug\n  npm-debug.log*\n  yarn-debug.log*\n  yarn-error.log*\n\n  # local env files\n  .env.local\n  .env.development.local\n  .env.test.local\n  .env.production.local\n\n  # vercel\n  .vercel\n  ",
++
++        "next-env.d.ts": "/// <reference types=\"next\" />\n  /// <reference types=\"next/types/global\" />\n  /// <reference types=\"next/image-types/global\" />\n\n  // NOTE: This file should not be edited\n  // see https://nextjs.org/docs/basic-features/typescript for more information.",
++
++        "next.config.js": "/** @type {import('next').NextConfig} */\n  module.exports = {\n    reactStrictMode: true,\n  };",
++
++        "postcss.config.js": "module.exports = {\n    plugins: {\n        tailwindcss: {},\n        autoprefixer: {},\n    },\n    };",
++
++        "renderlesskit.config.js": "import { extendTheme } from \"@renderlesskit/react-tailwind\";\n\n  export const theme = extendTheme({\n  // This only affected the Storybook, doesn't go or merge when used this config as preset\n  extend: {\n      button: {\n      variant: {\n          default: {\n          tertiary: \"bg-purple-600 text-white\",\n          },\n      },\n      size: {\n          default: {\n          xxl: \"h-14 min-w-14 px-6 rounded-xl text-xl\",\n          },\n      },\n      },\n  },\n  });\n\n  export default theme;",
++
++        "tailwind.config.js": "const path = require(\"path\");\n\n  const { preset } = require(\"@renderlesskit/react-tailwind/preset.js\");\n\n  module.exports = preset({\n  mode: \"jit\",\n  purge: [\n      path.resolve(__dirname, \"./components/**/*\"),\n      path.resolve(__dirname, \"./pages/**/*\"),\n      path.resolve(__dirname, \"./renderlesskit.config.ts\"),\n      \"node_modules/@renderlesskit/react-tailwind/**/*\",\n  ],\n  theme: {\n      extend: {}\n  },\n  variants: {},\n  plugins: [],\n  });",
++
++        "tsconfig.json": "{\n    \"compilerOptions\": {\n      \"target\": \"es5\",\n      \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n      \"allowJs\": true,\n      \"skipLibCheck\": true,\n      \"strict\": true,\n      \"forceConsistentCasingInFileNames\": true,\n      \"noEmit\": true,\n      \"esModuleInterop\": true,\n      \"module\": \"esnext\",\n      \"moduleResolution\": \"node\",\n      \"resolveJsonModule\": true,\n      \"isolatedModules\": true,\n      \"jsx\": \"preserve\"\n    },\n    \"include\": [\"next-env.d.ts\", \"**/*.ts\", \"**/*.tsx\"],\n    \"exclude\": [\"node_modules\"]\n  }"
++    }
++};
+diff --git a/node_modules/storybook-addon-preview/dist/presets/NextJS.js b/node_modules/storybook-addon-preview/dist/presets/NextJS.js
+new file mode 100644
+index 0000000..8a7a6e5
+--- /dev/null
++++ b/node_modules/storybook-addon-preview/dist/presets/NextJS.js
+@@ -0,0 +1,47 @@
++"use strict";
++exports.__esModule = true;
++/**
++ * Copyright (c) 2020-present NAVER Corp.
++ * egjs projects are licensed under the MIT license
++ */
++exports.NEXTJS_PRESET = {
++    dependencies: {
++        "@renderlesskit/react-tailwind": "0.0.1-alpha.18",
++        next: "11.1.2",
++        react: "17.0.2",
++        "react-dom": "17.0.2",
++    },
++    devDependencies:{
++        tailwindcss: "2.2.16",
++        autoprefixer: "10.3.7",
++        postcss: "8.3.9",
++        deepmerge: "4.2.2",
++        eslint: "7.32.0",
++        "eslint-config-next": "11.1.2",
++    },
++    scripts: {
++        dev: "next dev",
++        build: "next build",
++        start: "next start",
++        lint: "next lint"
++    },
++    files: {
++        "pages/_app.js": "import { RenderlesskitProvider } from \"@renderlesskit/react-tailwind\";\n\n  import \"../styles/index.css\";\n  import theme from \"../renderlesskit.config\";\n\n  function MyApp({ Component, pageProps }) {\n  return (\n      <RenderlesskitProvider extend={theme}>\n      <Component {...pageProps} />\n      </RenderlesskitProvider>\n  );\n  }\n\n  export default MyApp;",
++
++        "pages/index.js": "import Head from \"next/head\";\n  import Component from \"../components\";\n\n  export default function Home() {\n    return (\n      <div>\n        <Head>\n          <title>Renderlesskit React Tailwind Example</title>\n          <link rel=\"icon\" href=\"/favicon.ico\" />\n        </Head>\n\n        <main className=\"flex items-center justify-center min-h-screen\">\n          <Component />\n        </main>\n      </div>\n    );\n  }",
++
++        "styles/index.css": "@tailwind base;\n@tailwind components;\n@tailwind utilities;",
++
++        ".eslintrc.json": "{\n    \"extends\": \"next/core-web-vitals\"\n  }",
++
++        ".gitignore": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n  # dependencies\n  /node_modules\n  /.pnp\n  .pnp.js\n\n  # testing\n  /coverage\n\n  # next.js\n  /.next/\n  /out/\n\n  # production\n  /build\n\n  # misc\n  .DS_Store\n  *.pem\n\n  # debug\n  npm-debug.log*\n  yarn-debug.log*\n  yarn-error.log*\n\n  # local env files\n  .env.local\n  .env.development.local\n  .env.test.local\n  .env.production.local\n\n  # vercel\n  .vercel\n  ",
++
++        "next.config.js": "/** @type {import('next').NextConfig} */\n  module.exports = {\n    reactStrictMode: true,\n  };",
++
++        "postcss.config.js": "module.exports = {\n    plugins: {\n        tailwindcss: {},\n        autoprefixer: {},\n    },\n    };",
++
++        "renderlesskit.config.js": "import { extendTheme } from \"@renderlesskit/react-tailwind\";\n\n  export const theme = extendTheme({\n  // This only affected the Storybook, doesn't go or merge when used this config as preset\n  extend: {\n      button: {\n      variant: {\n          default: {\n          tertiary: \"bg-purple-600 text-white\",\n          },\n      },\n      size: {\n          default: {\n          xxl: \"h-14 min-w-14 px-6 rounded-xl text-xl\",\n          },\n      },\n      },\n  },\n  });\n\n  export default theme;",
++
++        "tailwind.config.js": "const path = require(\"path\");\n\n  const { preset } = require(\"@renderlesskit/react-tailwind/preset.js\");\n\n  module.exports = preset({\n  mode: \"jit\",\n  purge: [\n      path.resolve(__dirname, \"./components/**/*\"),\n      path.resolve(__dirname, \"./pages/**/*\"),\n      path.resolve(__dirname, \"./renderlesskit.config.ts\"),\n      \"node_modules/@renderlesskit/react-tailwind/**/*\",\n  ],\n  theme: {\n      extend: {}\n  },\n  variants: {},\n  plugins: [],\n  });",
++    }
++};
+diff --git a/node_modules/storybook-addon-preview/dist/presets/index.js b/node_modules/storybook-addon-preview/dist/presets/index.js
+index 0fb626b..a495b98 100644
+--- a/node_modules/storybook-addon-preview/dist/presets/index.js
++++ b/node_modules/storybook-addon-preview/dist/presets/index.js
+@@ -6,6 +6,8 @@ exports.__esModule = true;
+ __export(require("./Angular"));
+ __export(require("./React"));
+ __export(require("./ReactJS"));
++__export(require("./Next"));
++__export(require("./NextJS"));
+ __export(require("./Preact"));
+ __export(require("./Lit"));
+ __export(require("./Svelte"));
diff --git a/preset.js b/preset.js
@@ -100,4 +100,4 @@ function preset(tailwindConfig) {
   });
 }
 
-module.exports = { preset };
+module.exports = preset;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -49,3 +49,4 @@ jspm_packages

		## library folder
		dist
		templates
-Original file line number
+Diff line change
@@ Expand Up / @@ -100,4 +100,4 @@ function preset(tailwindConfig) { @@
       });
     }
-    module.exports = { preset };
+    module.exports = preset;