Merge branch 'main' into api-killing-issue

.changesets/11737.md

@@ -0,0 +1,5 @@
+- [TS] Include query parameters in typed Cell component props (#11737) by @Philzen
+
+If you have a Cell that for example takes an `id` prop, to be used as a query
+parameter, it'd also be passed to the individual cell components. This is now
+properly reflected in the types.

.changesets/11745.md

@@ -0,0 +1,4 @@
+- [Storybook] Improve typing, add doc links & remove redundant JSDoc in preview.tsx (#11745) by @Philzen
+
+Better types for storybook preview config
+Better IntelliSense hints for storybook

.changesets/11746.md

@@ -0,0 +1,3 @@
+- Fix absolute & component folder imports in Storybook config folder (#11746) by @Philzen
+
+Include the storybook config folder in the includes in `{ts,js}config.json`

__fixtures__/test-project/web/package.json

@@ -27,6 +27,6 @@
     "postcss": "^8.4.49",
     "postcss-loader": "^8.1.1",
     "prettier-plugin-tailwindcss": "^0.5.12",
-    "tailwindcss": "^3.4.15"
+    "tailwindcss": "^3.4.16"
   }
 }

__fixtures__/test-project/web/src/components/AuthorCell/AuthorCell.test.tsx

@@ -24,7 +24,7 @@ describe('AuthorCell', () => {
 
   it('renders Failure successfully', async () => {
     expect(() => {
-      render(<Failure error={new Error('Oh no')} />)
+      render(<Failure id={42} error={new Error('Oh no')} />)
     }).not.toThrow()
   })
 
@@ -36,7 +36,7 @@ describe('AuthorCell', () => {
 
   it('renders Success successfully', async () => {
     expect(() => {
-      render(<Success author={standard().author} />)
+      render(<Success id={42} author={standard().author} />)
     }).not.toThrow()
   })
 })

__fixtures__/test-project/web/src/components/BlogPostCell/BlogPostCell.test.tsx

@@ -24,7 +24,7 @@ describe('BlogPostCell', () => {
 
   it('renders Failure successfully', async () => {
     expect(() => {
-      render(<Failure error={new Error('Oh no')} />)
+      render(<Failure id={42} error={new Error('Oh no')} />)
     }).not.toThrow()
   })
 
@@ -36,7 +36,7 @@ describe('BlogPostCell', () => {
 
   it('renders Success successfully', async () => {
     expect(() => {
-      render(<Success blogPost={standard().blogPost} />)
+      render(<Success id={42} blogPost={standard().blogPost} />)
     }).not.toThrow()
   })
 })

__fixtures__/test-project/web/src/components/BlogPostsCell/BlogPostsCell.test.tsx

@@ -24,7 +24,7 @@ describe('BlogPostsCell', () => {
 
   it('renders Failure successfully', async () => {
     expect(() => {
-      render(<Failure error={new Error('Oh no')} />)
+      render(<Failure id={42} error={new Error('Oh no')} />)
     }).not.toThrow()
   })
 
@@ -36,7 +36,7 @@ describe('BlogPostsCell', () => {
 
   it('renders Success successfully', async () => {
     expect(() => {
-      render(<Success blogPosts={standard().blogPosts} />)
+      render(<Success id={42} blogPosts={standard().blogPosts} />)
     }).not.toThrow()
   })
 })

__fixtures__/test-project/web/src/components/WaterfallBlogPostCell/WaterfallBlogPostCell.test.tsx

@@ -24,7 +24,7 @@ describe('WaterfallBlogPostCell', () => {
 
   it('renders Failure successfully', async () => {
     expect(() => {
-      render(<Failure error={new Error('Oh no')} />)
+      render(<Failure id={42} error={new Error('Oh no')} />)
     }).not.toThrow()
   })
 
@@ -36,7 +36,9 @@ describe('WaterfallBlogPostCell', () => {
 
   it('renders Success successfully', async () => {
     expect(() => {
-      render(<Success waterfallBlogPost={standard().waterfallBlogPost} />)
+      render(
+        <Success id={42} waterfallBlogPost={standard().waterfallBlogPost} />
+      )
     }).not.toThrow()
   })
 })

__fixtures__/test-project/web/tsconfig.json

@@ -35,6 +35,7 @@
   "include": [
     "src",
     "config",
+    ".storybook/**/*",
     "../.redwood/types/includes/all-*",
     "../.redwood/types/includes/web-*",
     "../types",

docs/docs/tutorial/chapter2/routing-params.md

@@ -517,7 +517,6 @@ export const Success = ({ article, id, rand }) => {
 ```tsx
 interface Props
   extends CellSuccessProps<FindArticleQuery, FindArticleQueryVariables> {
-  id: number
   rand: number
 }
 

packages/cli-helpers/package.json

@@ -68,7 +68,7 @@
     "prettier": "3.3.3",
     "prompts": "2.4.2",
     "semver": "7.6.3",
-    "smol-toml": "1.3.0",
+    "smol-toml": "1.3.1",
     "terminal-link": "2.1.1",
     "yargs-parser": "21.1.1"
   },

packages/cli/package.json

@@ -74,7 +74,7 @@
     "prompts": "2.4.2",
     "rimraf": "6.0.1",
     "semver": "7.6.3",
-    "smol-toml": "1.3.0",
+    "smol-toml": "1.3.1",
     "string-env-interpolation": "1.0.1",
     "systeminformation": "5.23.5",
     "terminal-link": "2.1.1",

packages/cli/src/commands/generate/cell/__tests__/__snapshots__/cell.test.js.snap

@@ -166,7 +166,7 @@ describe('CustomIdFieldsCell', () => {
 
   it('renders Failure successfully', async () => {
     expect(() => {
-      render(<Failure error={new Error('Oh no')} />)
+      render(<Failure uuid={'42'} error={new Error('Oh no')} />)
     }).not.toThrow()
   })
 
@@ -178,7 +178,7 @@ describe('CustomIdFieldsCell', () => {
 
   it('renders Success successfully', async () => {
     expect(() => {
-      render(<Success customIdFields={standard().customIdFields} />)
+      render(<Success uuid={'42'} customIdFields={standard().customIdFields} />)
     }).not.toThrow()
   })
 })
@@ -283,7 +283,7 @@ describe('CustomIdFieldCell', () => {
 
   it('renders Failure successfully', async () => {
     expect(() => {
-      render(<Failure error={new Error('Oh no')} />)
+      render(<Failure uuid={'42'} error={new Error('Oh no')} />)
     }).not.toThrow()
   })
 
@@ -295,7 +295,7 @@ describe('CustomIdFieldCell', () => {
 
   it('renders Success successfully', async () => {
     expect(() => {
-      render(<Success customIdField={standard().customIdField} />)
+      render(<Success uuid={'42'} customIdField={standard().customIdField} />)
     }).not.toThrow()
   })
 })
@@ -400,7 +400,7 @@ describe('UserProfileCell', () => {
 
   it('renders Failure successfully', async () => {
     expect(() => {
-      render(<Failure error={new Error('Oh no')} />)
+      render(<Failure id={42} error={new Error('Oh no')} />)
     }).not.toThrow()
   })
 
@@ -412,7 +412,7 @@ describe('UserProfileCell', () => {
 
   it('renders Success successfully', async () => {
     expect(() => {
-      render(<Success userProfile={standard().userProfile} />)
+      render(<Success id={42} userProfile={standard().userProfile} />)
     }).not.toThrow()
   })
 })
@@ -517,7 +517,7 @@ describe('UserProfileCell', () => {
 
   it('renders Failure successfully', async () => {
     expect(() => {
-      render(<Failure error={new Error('Oh no')} />)
+      render(<Failure id={42} error={new Error('Oh no')} />)
     }).not.toThrow()
   })
 
@@ -529,7 +529,7 @@ describe('UserProfileCell', () => {
 
   it('renders Success successfully', async () => {
     expect(() => {
-      render(<Success userProfile={standard().userProfile} />)
+      render(<Success id={42} userProfile={standard().userProfile} />)
     }).not.toThrow()
   })
 })
@@ -634,7 +634,7 @@ describe('UserCell', () => {
 
   it('renders Failure successfully', async () => {
     expect(() => {
-      render(<Failure error={new Error('Oh no')} />)
+      render(<Failure id={42} error={new Error('Oh no')} />)
     }).not.toThrow()
   })
 
@@ -646,7 +646,7 @@ describe('UserCell', () => {
 
   it('renders Success successfully', async () => {
     expect(() => {
-      render(<Success user={standard().user} />)
+      render(<Success id={42} user={standard().user} />)
     }).not.toThrow()
   })
 })
@@ -751,7 +751,7 @@ describe('UserProfileCell', () => {
 
   it('renders Failure successfully', async () => {
     expect(() => {
-      render(<Failure error={new Error('Oh no')} />)
+      render(<Failure id={42} error={new Error('Oh no')} />)
     }).not.toThrow()
   })
 
@@ -763,7 +763,7 @@ describe('UserProfileCell', () => {
 
   it('renders Success successfully', async () => {
     expect(() => {
-      render(<Success userProfile={standard().userProfile} />)
+      render(<Success id={42} userProfile={standard().userProfile} />)
     }).not.toThrow()
   })
 })
@@ -835,7 +835,7 @@ describe('BazingaCell', () => {
 
   it('renders Failure successfully', async () => {
     expect(() => {
-      render(<Failure error={new Error('Oh no')} />)
+      render(<Failure id={42} error={new Error('Oh no')} />)
     }).not.toThrow()
   })
 
@@ -847,7 +847,7 @@ describe('BazingaCell', () => {
 
   it('renders Success successfully', async () => {
     expect(() => {
-      render(<Success bazinga={standard().bazinga} />)
+      render(<Success id={42} bazinga={standard().bazinga} />)
     }).not.toThrow()
   })
 })
@@ -1040,7 +1040,7 @@ describe('UserProfileCell', () => {
 
   it('renders Failure successfully', async () => {
     expect(() => {
-      render(<Failure error={new Error('Oh no')} />)
+      render(<Failure id={42} error={new Error('Oh no')} />)
     }).not.toThrow()
   })
 
@@ -1052,7 +1052,7 @@ describe('UserProfileCell', () => {
 
   it('renders Success successfully', async () => {
     expect(() => {
-      render(<Success userProfile={standard().userProfile} />)
+      render(<Success id={42} userProfile={standard().userProfile} />)
     }).not.toThrow()
   })
 })
@@ -1109,7 +1109,7 @@ describe('AddressCell', () => {
 
   it('renders Failure successfully', async () => {
     expect(() => {
-      render(<Failure error={new Error('Oh no')} />)
+      render(<Failure id={'42'} error={new Error('Oh no')} />)
     }).not.toThrow()
   })
 
@@ -1121,7 +1121,7 @@ describe('AddressCell', () => {
 
   it('renders Success successfully', async () => {
     expect(() => {
-      render(<Success address={standard().address} />)
+      render(<Success id={'42'} address={standard().address} />)
     }).not.toThrow()
   })
 })
@@ -1232,7 +1232,7 @@ describe('AddressesCell', () => {
 
   it('renders Failure successfully', async () => {
     expect(() => {
-      render(<Failure error={new Error('Oh no')} />)
+      render(<Failure id={'42'} error={new Error('Oh no')} />)
     }).not.toThrow()
   })
 
@@ -1244,7 +1244,7 @@ describe('AddressesCell', () => {
 
   it('renders Success successfully', async () => {
     expect(() => {
-      render(<Success addresses={standard().addresses} />)
+      render(<Success id={'42'} addresses={standard().addresses} />)
     }).not.toThrow()
   })
 })
@@ -1365,7 +1365,7 @@ describe('MembersCell', () => {
 
   it('renders Failure successfully', async () => {
     expect(() => {
-      render(<Failure error={new Error('Oh no')} />)
+      render(<Failure id={42} error={new Error('Oh no')} />)
     }).not.toThrow()
   })
 
@@ -1377,7 +1377,7 @@ describe('MembersCell', () => {
 
   it('renders Success successfully', async () => {
     expect(() => {
-      render(<Success members={standard().members} />)
+      render(<Success id={42} members={standard().members} />)
     }).not.toThrow()
   })
 })

packages/cli/src/commands/generate/cell/cell.js

@@ -100,6 +100,10 @@ export const files = async ({ name, typescript, ...options }) => {
     webPathSection: REDWOOD_WEB_PATH_NAME,
     generator: 'cell',
     templatePath: 'test.js.template',
+    templateVars: {
+      idName,
+      mockIdValues,
+    },
   })
 
   const storiesFile = await templateForComponentFile({

packages/cli/src/commands/generate/cell/templates/test.js.template

@@ -24,7 +24,7 @@ describe('${pascalName}Cell', () => {
 
   it('renders Failure successfully', async () => {
     expect(() => {
-      render(<Failure error={new Error('Oh no')} />)
+      render(<Failure <% if (idName) { %>${idName}={${mockIdValues[0]}} <% } %>error={new Error('Oh no')} />)
     }).not.toThrow()
   })
 
@@ -36,7 +36,7 @@ describe('${pascalName}Cell', () => {
 
   it('renders Success successfully', async () => {
     expect(() => {
-      render(<Success ${camelName}={standard().${camelName}} />)
+      render(<Success <% if (idName) { %>${idName}={${mockIdValues[0]}} <% } %>${camelName}={standard().${camelName}} />)
     }).not.toThrow()
   })
 })

packages/cli/src/commands/setup/i18n/templates/storybook.preview.tsx.template

@@ -1,10 +1,11 @@
 import * as React from 'react'
-import { I18nextProvider } from 'react-i18next'
+
 import type { GlobalTypes } from '@storybook/csf'
-import type { StoryFn, StoryContext } from '@storybook/react'
+import type { Preview, StoryContext, StoryFn } from '@storybook/react'
+import { I18nextProvider } from 'react-i18next'
 import i18n from 'web/src/i18n'
 
-/** @type { import("@storybook/csf").GlobalTypes } */
+/** @see {@link https://storybook.js.org/docs/7/essentials/toolbars-and-globals#global-types-and-the-toolbar-annotation | Global types and the toolbar annotation}  */
 export const globalTypes: GlobalTypes = {
   locale: {
     name: 'Locale',
@@ -25,12 +26,12 @@ export const globalTypes: GlobalTypes = {
  * 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/react").StoryFn} StoryFn
- * @param { import("@storybook/react").StoryContext} context
+ *
+ * @see {@link https://storybook.js.org/docs/7/essentials/toolbars-and-globals#create-a-decorator | Create a decorator} 
  */
 const withI18n = (StoryFn: StoryFn, context: StoryContext) => {
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  React.useEffect(() => {
+  useEffect(() => {
     i18n.changeLanguage(context.globals.locale)
   }, [context.globals.locale])
 
@@ -41,4 +42,8 @@ const withI18n = (StoryFn: StoryFn, context: StoryContext) => {
   )
 }
 
-export const decorators = [withI18n]
+const preview: Preview = { 
+  decorators: [withI18n]
+}
+
+export default preview