move sb config to ts

docusaurus/docs/vulcan-next/features/testing-+-storybook.md

@@ -98,6 +98,12 @@ See e2e tests for the authentication workflow to get some usage examples.
 
 ## Storybook
 
+### Webpack 5 and TypeScript config
+
+You can write your Storybook config as normal TypeScript files and even import your local code.
+
+NOTE: installing `ts-node` may break Storybook, see [this Stack Overflow ticket](https://stackoverflow.com/questions/69808808/storybook-main-ts-cannot-use-import-statement-outside-a-module)
+
 ### Same import as in Next
 
 We reuse our Webpack config extension function, so you can enjoy magic imports and isomorphic imports in Storybook too.

docusaurus/docs/vulcan-next/features/zz-not-yet-implemented.md

@@ -36,14 +36,6 @@ Load .env development config automatically in Jest
 Graphql code generator for better autocompletion
 Demo support of multiple graphQL API using Link split
 
-## Demo custom server for SSR?
-
-NOTE: Using a custom server to serve Next pages is not recommended. We may choose not to support this feature.
-
-ts-node, nodemon to have hot reload
-Jest for the custom server
-Fullstack cypress testing/coverage of the custom server
-
 ## Next
 
 Remove debug routes from bundle during build

starters/next/.storybook/main.js → starters/next/.storybook/main.ts

@@ -1,9 +1,11 @@
+import { WebpackPluginInstance, Configuration } from "webpack";
+
 const { extendWebpackConfig } = require("../packages/@vulcanjs/webpack");
 const debug = require("debug");
 const debugWebpack = debug("vns:webpack");
 const path = require("path");
 
-const plugins = [];
+const plugins: Array<WebpackPluginInstance> = [];
 if (process.env.ANALYZE === "true") {
   debugWebpack("Enabling bundle analysis for Storybook"); // eslint-disable-line no-console
   const BundleAnalyzerPlugin =
@@ -36,9 +38,16 @@ module.exports = {
     "storybook-addon-next-router",
   ],
   // https://github.com/storybookjs/storybook/blob/next/docs/src/pages/configurations/custom-webpack-config/index.md#debug-the-default-webpack-config
-  webpackFinal: async (config, { configType }) => {
+  webpackFinal: async (config: Configuration, { configType }) => {
     // add magic imports and isomorphic imports to Storybook
-    const withVulcan = extendWebpackConfig("client")(config);
+    const withVulcan = extendWebpackConfig("client")(config) as Configuration;
+    if (!withVulcan.module) {
+      withVulcan.module = {};
+    }
+    if (!withVulcan.module.rules) {
+      withVulcan.module.rules = [];
+    }
+
     // add mdx support, in components
     // @see https://mdxjs.com/getting-started/webpack
     withVulcan.module.rules.push({
@@ -51,10 +60,14 @@ module.exports = {
     withVulcan.module.rules = [
       ...withVulcan.module.rules.filter(
         // rules do not necessarily have a test, it can be a "oneOf"
+        // @ts-ignore
         (rule) => !rule.test || rule.test.source !== "\\.md$"
       ),
     ];
 
+    if (!withVulcan.resolve) {
+      withVulcan.resolve = {};
+    }
     // add mocks for NPM imports, eg next/router and next/config
     withVulcan.resolve.alias = {
       ...(withVulcan.resolve.alias || {}),

starters/next/.storybook/preview.js → starters/next/.storybook/preview.tsx

@@ -29,6 +29,7 @@ const withMui = (storyFn) => <MuiThemeProvider>{storyFn()}</MuiThemeProvider>;
 
 const withI18n = (storyFn) => (
   <React.Suspense fallback={"Loading i18n..."}>
+    {/** @ts-ignore */}
     <I18nextProvider i18n={i18n}>{storyFn()}</I18nextProvider>
   </React.Suspense>
 );

starters/next/.storybook/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../tsconfig.common.json",
+  "compilerOptions": {
+    "allowJs": false,
+    "noEmit": true,
+    "isolatedModules": false,
+    "module": "commonjs",
+    "target": "ES2017"
+  },
+  "include": [
+    "./**/*.ts",
+    "./**/*.tsx"
+  ]
+}

starters/next/package.json

@@ -152,7 +152,6 @@
     "storybook-css-modules-preset": "^1.1.1",
     "supertest": "^6.1.6",
     "ts-loader": "^7.0.5",
-    "ts-node": "^8.10.2",
     "typescript": "=4.3.5",
     "webpack": "5",
     "yalc": "^1.0.0-pre.53"

starters/next/src/content/vn/docs/features/index.md

@@ -0,0 +1,3 @@
+# Docs have moved
+
+Docs are now located in our common monorepo: https://vulcan-docs.vercel.app/docs/vulcan-next/