Merge branch 'fix/subdirectory-routing' of github.com:dac09/redwood i…

…nto fix/subdirectory-routing * 'fix/subdirectory-routing' of github.com:dac09/redwood: Clarify the cell aliasing section of tutorial (redwoodjs#4964) s/posts/articles (redwoodjs#4971) fix(deps): update dependency cross-undici-fetch to v0.1.28 (redwoodjs#4966) Add Storybook template for i18n (redwoodjs#4764) Add @storybook/addon-essentials by default (redwoodjs#4765)
dac09 · Mar 31, 2022 · 012ede7 · 012ede7
2 parents 903c3ec + 7683a5c
commit 012ede7
Show file tree

Hide file tree

Showing 15 changed files with 956 additions and 102 deletions.
diff --git a/docs/docs/tutorial/chapter2/cells.md b/docs/docs/tutorial/chapter2/cells.md
@@ -127,7 +127,7 @@ We'll have to rename them to `posts` in both the query name and in the prop name
 
 ```jsx title="web/src/components/ArticlesCell/ArticlesCell.js"
 export const QUERY = gql`
-  query BlogPostsQuery {
+  query ArticlesQuery {
     // highlight-next-line
     posts {
       id
@@ -183,11 +183,24 @@ The browser should actually show the `id` and a GraphQL-specific `__typename` pr
 
 > **In the `Success` component, where did `posts` come from?**
 >
-> In the `QUERY` statement, the query we're calling is `posts`. Whatever the name of this query is, that's the name of the prop that will be available in `Success` with your data. You can also alias the name of the variable containing the result of the GraphQL query, and that will be the name of the prop:
+> In the `QUERY` statement, the query we're calling is `posts`. Whatever the name of this query is, that's the name of the prop that will be available in `Success` with your data.
+> ```javascript
+> export const QUERY = gql`
+>   query ArticlesQuery {
+>     // highlight-next-line
+>     posts {
+>       id
+>     }
+>   }
+> `
+> ```
+>
+> You can also alias the name of the variable containing the result of the GraphQL query, and that will be the name of the prop:
 >
 > ```javascript
 > export const QUERY = gql`
 >   query ArticlesQuery {
+>     // highlight-next-line
 >     articles: posts {
 >       id
 >     }
@@ -205,7 +218,7 @@ In fact, let's use the aforementioned alias so that the name of our cell, and th
 
 ```jsx title="web/src/components/ArticlesCell/ArticlesCell.js"
 export const QUERY = gql`
-  query BlogPostsQuery {
+  query ArticlesQuery {
     // highlight-next-line
     articles: posts {
       id
@@ -222,11 +235,11 @@ export const Failure = ({ error }) => (
 )
 
 // highlight-next-line
-export const Success = ({ posts }) => {
+export const Success = ({ articles }) => {
   return (
     <ul>
       // highlight-next-line
-      {posts.map((item) => {
+      {articles.map((item) => {
         return <li key={item.id}>{JSON.stringify(item)}</li>
       })}
     </ul>

diff --git a/packages/api/package.json b/packages/api/package.json
@@ -32,7 +32,7 @@
   "dependencies": {
     "@babel/runtime-corejs3": "7.16.7",
     "@prisma/client": "3.11.1",
-    "cross-undici-fetch": "0.1.27",
+    "cross-undici-fetch": "0.1.28",
     "crypto-js": "4.1.1",
     "humanize-string": "2.1.0",
     "jsonwebtoken": "8.5.1",

diff --git a/packages/cli/src/commands/setup/i18n/i18n.js b/packages/cli/src/commands/setup/i18n/i18n.js
@@ -9,6 +9,7 @@ import { errorTelemetry } from '@redwoodjs/telemetry'
 
 import { getPaths, writeFile } from '../../../lib'
 import c from '../../../lib/colors'
+import configureStorybook from '../../../lib/configureStorybook.js'
 
 export const command = 'i18n'
 export const description = 'Set up i18n'
@@ -72,7 +73,7 @@ export const handler = async ({ force }) => {
       },
     },
     {
-      title: 'Configuring i18n...',
+      title: 'Configure i18n...',
       task: () => {
         /**
          *  Write i18n.js in web/src
@@ -169,6 +170,17 @@ export const handler = async ({ force }) => {
         }
       },
     },
+    {
+      title: 'Configuring Storybook...',
+      task: async () =>
+        configureStorybook(
+          { force },
+          fs.readFileSync(
+            path.join(__dirname, 'templates', 'storybook.preview.js.template'),
+            'utf-8'
+          )
+        ),
+    },
     {
       title: 'One more thing...',
       task: (_ctx, task) => {

diff --git a/packages/cli/src/commands/setup/i18n/templates/i18n.js.template b/packages/cli/src/commands/setup/i18n/templates/i18n.js.template
@@ -34,10 +34,9 @@ export default HomePage
 */
 
 i18n
-  .use(initReactI18next)
-  // detect user language
   // learn more: https://github.com/i18next/i18next-browser-languageDetector
   .use(LanguageDetector)
+  .use(initReactI18next)
   .init({
     interpolation: { escapeValue: false }, // React already does escaping
     fallbackLng: 'en',

diff --git a/packages/cli/src/commands/setup/i18n/templates/storybook.preview.js.template b/packages/cli/src/commands/setup/i18n/templates/storybook.preview.js.template
@@ -0,0 +1,44 @@
+import * as React from 'react'
+import { I18nextProvider } from 'react-i18next'
+import i18n from 'web/src/i18n'
+
+/** @type { import("@storybook/csf").GlobalTypes } */
+export const globalTypes = {
+  locale: {
+    name: 'Locale',
+    description: 'Internationalization locale',
+    defaultValue: 'en',
+    toolbar: {
+      icon: 'globe',
+      items: [
+        { value: 'en', right: '🇺🇸', title: 'English' },
+        { value: 'fr', right: '🇫🇷', title: 'Français' },
+      ],
+    },
+  },
+}
+
+//**
+ * We're following Storybook's naming convention here. See for example
+ * https://github.com/storybookjs/addon-kit/blob/main/src/withGlobals.ts
+ * Unfortunately that will make eslint complain, so we have to disable it when
+ * using a hook below
+ *
+ * @param { import("@storybook/addons").StoryFn} StoryFn
+ * @param { import("@storybook/addons").StoryContext} context
+ * @returns a story wrapped in an I18nextProvider
+ */
+const withI18n = (StoryFn, context) => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  React.useEffect(() => {
+    i18n.changeLanguage(context.globals.locale)
+  }, [context.globals.locale])
+
+  return (
+    <I18nextProvider i18n={i18n}>
+      <StoryFn />
+    </I18nextProvider>
+  )
+}
+
+export const decorators = [withI18n]
diff --git a/packages/cli/src/commands/setup/ui/libraries/chakra-ui.js b/packages/cli/src/commands/setup/ui/libraries/chakra-ui.js
@@ -1,11 +1,11 @@
+import fs from 'fs'
+import path from 'path'
+
 import execa from 'execa'
 import Listr from 'listr'
 
 import c from '../../../../lib/colors'
-import {
-  checkStorybookStatus,
-  configureStorybook,
-} from '../tasks/configure-storybook'
+import configureStorybook from '../../../../lib/configureStorybook.js'
 import { checkSetupStatus, wrapWithChakraProvider } from '../tasks/setup-chakra'
 
 export const command = 'chakra-ui'
@@ -62,8 +62,19 @@ export async function handler({ force, install }) {
     },
     {
       title: 'Configure Storybook...',
-      skip: () => checkStorybookStatus({ force }) === 'done',
-      task: async () => configureStorybook(),
+      task: async () =>
+        configureStorybook(
+          { force },
+          fs.readFileSync(
+            path.join(
+              __dirname,
+              '..',
+              'templates',
+              'storybook.preview.js.template'
+            ),
+            'utf-8'
+          )
+        ),
     },
   ])
 

diff --git a/packages/cli/src/commands/setup/ui/tasks/configure-storybook.js b/packages/cli/src/commands/setup/ui/tasks/configure-storybook.js
diff --git a/packages/cli/src/lib/configureStorybook.js b/packages/cli/src/lib/configureStorybook.js
@@ -0,0 +1,71 @@
+import fs from 'fs-extra'
+
+import { getPaths } from '.'
+
+/**
+ * Configure Storybook for the given template by creating a custom preview config
+ */
+export default function configureStorybook({ force }, newStorybookPreview) {
+  const storybookPreviewConfigPath = getPaths().web.storybookPreviewConfig
+
+  let storybookPreviewConfig
+  /**
+   *  Check if storybookPreviewConfigPath already exists.
+   *  Merge both files if it does.
+   *  By removing import react and export decorator from new config
+   *  And put new config inside current config after last import
+   */
+  if (fs.existsSync(storybookPreviewConfigPath)) {
+    if (force) {
+      fs.unlinkSync(storybookPreviewConfigPath)
+      storybookPreviewConfig = newStorybookPreview
+    } else {
+      const currentConfig = fs
+        .readFileSync(storybookPreviewConfigPath)
+        .toString()
+
+      const newDecoratorsName = newStorybookPreview.match(
+        /export const decorators = \[(.*?)\]/
+      )[1]
+
+      const currentDecoratorsName = currentConfig.match(
+        /export const decorators = \[(.*?)\]/
+      )[1]
+
+      const decoratorsExport = `export const decorators = [${currentDecoratorsName}, ${newDecoratorsName}]`
+
+      const insideNewStorybookConfigWithoutReactAndDecoration =
+        newStorybookPreview
+          .replace(/import \* as React from 'react'/, '')
+          .replace(/export const decorators = .*/, '')
+
+      const currentConfigWithoutDecoration = currentConfig.replace(
+        /export const decorators = .*/,
+        ''
+      )
+
+      const reversedCurrentConfig = currentConfigWithoutDecoration
+        .split('\n')
+        .reverse()
+
+      const indexOfLastImport = reversedCurrentConfig.findIndex((value) =>
+        /^import /.test(value)
+      )
+      reversedCurrentConfig.splice(
+        indexOfLastImport,
+        0,
+        insideNewStorybookConfigWithoutReactAndDecoration
+      )
+      storybookPreviewConfig =
+        reversedCurrentConfig.reverse().join(`\n`) +
+        `\n` +
+        currentConfig +
+        `\n` +
+        decoratorsExport
+    }
+  } else {
+    storybookPreviewConfig = newStorybookPreview
+  }
+
+  fs.outputFileSync(storybookPreviewConfigPath, storybookPreviewConfig)
+}
diff --git a/packages/codemods/package.json b/packages/codemods/package.json
@@ -28,7 +28,7 @@
     "@babel/runtime-corejs3": "7.16.7",
     "@vscode/ripgrep": "1.14.2",
     "core-js": "3.21.1",
-    "cross-undici-fetch": "0.1.27",
+    "cross-undici-fetch": "0.1.28",
     "deepmerge": "4.2.2",
     "fast-glob": "3.2.11",
     "findup-sync": "5.0.0",

diff --git a/packages/graphql-server/package.json b/packages/graphql-server/package.json
@@ -34,7 +34,7 @@
     "@prisma/client": "3.11.1",
     "@redwoodjs/api": "0.50.0",
     "core-js": "3.21.1",
-    "cross-undici-fetch": "0.1.27",
+    "cross-undici-fetch": "0.1.28",
     "graphql": "16.3.0",
     "graphql-scalars": "1.16.0",
     "graphql-tag": "2.12.6",

diff --git a/packages/prerender/package.json b/packages/prerender/package.json
@@ -31,7 +31,7 @@
     "@redwoodjs/web": "0.50.0",
     "babel-plugin-ignore-html-and-css-imports": "0.1.0",
     "cheerio": "1.0.0-rc.10",
-    "cross-undici-fetch": "0.1.27",
+    "cross-undici-fetch": "0.1.28",
     "mime-types": "2.1.35"
   },
   "devDependencies": {

diff --git a/packages/telemetry/package.json b/packages/telemetry/package.json
@@ -30,7 +30,7 @@
     "@redwoodjs/internal": "0.50.0",
     "@redwoodjs/structure": "0.50.0",
     "ci-info": "3.3.0",
-    "cross-undici-fetch": "0.1.27",
+    "cross-undici-fetch": "0.1.28",
     "envinfo": "7.8.1",
     "systeminformation": "5.11.9",
     "uuid": "8.3.2",

diff --git a/packages/testing/config/storybook/main.js b/packages/testing/config/storybook/main.js
@@ -46,8 +46,11 @@ const baseConfig = {
   stories: [
     `${importStatementPath(rwjsPaths.web.src)}/**/*.stories.{tsx,jsx,js}`,
   ],
-  addons: [config.web.a11y && '@storybook/addon-a11y'].filter(Boolean),
-  // Storybook's UI uses a seperate Webpack configuration
+  addons: [
+    '@storybook/addon-essentials',
+    config.web.a11y && '@storybook/addon-a11y',
+  ].filter(Boolean),
+  // Storybook's UI uses a separate Webpack configuration
   managerWebpack: (sbConfig) => {
     const userManagerPath = fs.existsSync(rwjsPaths.web.storybookManagerConfig)
       ? rwjsPaths.web.storybookManagerConfig

diff --git a/packages/testing/package.json b/packages/testing/package.json
@@ -32,6 +32,7 @@
     "@redwoodjs/router": "0.50.0",
     "@redwoodjs/web": "0.50.0",
     "@storybook/addon-a11y": "6.4.19",
+    "@storybook/addon-essentials": "6.4.19",
     "@storybook/builder-webpack5": "6.4.19",
     "@storybook/manager-webpack5": "6.4.19",
     "@storybook/react": "6.4.19",