Add support for Storybook

.eslintignore

@@ -0,0 +1,4 @@
+dist
+packages/api/importAll.macro.js
+packages/core/src/__tests__/__fixtures__/**/*
+packages/core/config/storybook/**/*

__fixtures__/new-project/api/package.json

@@ -3,6 +3,6 @@
   "version": "0.0.0",
   "private": true,
   "dependencies": {
-    "@redwoodjs/api": "^0.11.0"
+    "@redwoodjs/api": "^0.12.0"
   }
 }

__fixtures__/new-project/package.json

@@ -7,7 +7,7 @@
     ]
   },
   "devDependencies": {
-    "@redwoodjs/core": "^0.11.0",
+    "@redwoodjs/core": "^0.12.0",
     "netlify-plugin-prisma-provider": "^0.3.0"
   },
   "eslintConfig": {

__fixtures__/new-project/web/package.json

@@ -6,8 +6,8 @@
     "defaults"
   ],
   "dependencies": {
-    "@redwoodjs/router": "^0.11.0",
-    "@redwoodjs/web": "^0.11.0",
+    "@redwoodjs/router": "^0.12.0",
+    "@redwoodjs/web": "^0.12.0",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"

package.json

@@ -33,11 +33,6 @@
       "fixtures"
     ]
   },
-  "eslintIgnore": [
-    "dist",
-    "packages/api/importAll.macro.js",
-    "packages/core/src/__tests__/__fixtures__"
-  ],
   "scripts": {
     "build": "yarn build:clean && yarn build:js",
     "build:clean": "lerna run build:clean",

packages/cli/package.json

@@ -44,7 +44,7 @@
     "build:js": "yarn cross-env NODE_ENV=production yarn babel src -d dist --extensions \".js,.ts\" --delete-dir-on-start --copy-files --no-copy-ignored",
     "build:clean-dist": "yarn rimraf 'dist/**/__tests__'",
     "prepublishOnly": "yarn build",
-    "build:watch": "nodemon --watch src --ext \"js,ts,tsx\" --ignore dist --exec \"yarn build\"",
+    "build:watch": "nodemon --watch src --ext \"js,ts,tsx,template\" --ignore dist --exec \"yarn build\"",
     "test": "jest",
     "test:watch": "yarn test --watch"
   },

packages/cli/src/commands/generate/__tests__/helpers.test.js

@@ -5,12 +5,18 @@ import {} from 'src/lib/test'
 
 import * as helpers from '../helpers'
 
-const PAGE_TEMPLATE_OUTPUT = `const FooBarPage = () => {
+const PAGE_TEMPLATE_OUTPUT = `import { Link } from '@redwoodjs/router'
+
+const FooBarPage = () => {
   return (
-    <div>
+    <>
       <h1>FooBarPage</h1>
-      <p>Find me in ./web/src/pages/FooBarPage/FooBarPage.js</p>
-    </div>
+      <p>Find me in "./web/src/pages/FooBarPage/FooBarPage.js"</p>
+      <p>
+        My default route is named "fooBar", link to me with \`
+        <Link to="fooBar">routes.fooBar()</Link>\`
+      </p>
+    </>
   )
 }
 

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

@@ -12,8 +12,8 @@ beforeAll(() => {
   multiWordFiles = cell.files({ name: 'UserProfile' })
 })
 
-test('returns exactly 2 files', () => {
-  expect(Object.keys(singleWordFiles).length).toEqual(2)
+test('returns exactly 3 files', () => {
+  expect(Object.keys(singleWordFiles).length).toEqual(3)
 })
 
 test('creates a cell component with a single word name', () => {
@@ -34,6 +34,16 @@ test('creates a cell test with a single word name', () => {
   ).toEqual(loadGeneratorFixture('cell', 'singleWordCell.test.js'))
 })
 
+test('creates a cell stories with a single word name', () => {
+  expect(
+    singleWordFiles[
+      path.normalize(
+        '/path/to/project/web/src/components/UserCell/UserCell.stories.js'
+      )
+    ]
+  ).toEqual(loadGeneratorFixture('cell', 'singleWordCell.stories.js'))
+})
+
 test('creates a cell component with a multi word name', () => {
   expect(
     multiWordFiles[
@@ -53,3 +63,13 @@ test('creates a cell test with a multi word name', () => {
     ]
   ).toEqual(loadGeneratorFixture('cell', 'multiWordCell.test.js'))
 })
+
+test('creates a cell stories with a multi word name', () => {
+  expect(
+    multiWordFiles[
+      path.normalize(
+        '/path/to/project/web/src/components/UserProfileCell/UserProfileCell.stories.js'
+      )
+    ]
+  ).toEqual(loadGeneratorFixture('cell', 'multiWordCell.stories.js'))
+})

packages/cli/src/commands/generate/cell/__tests__/fixtures/multiWordCell.stories.js

@@ -0,0 +1,19 @@
+import { Loading, Empty, Failure, Success } from './UserProfileCell'
+
+export const loading = () => {
+  return Loading ? <Loading /> : null
+}
+
+export const empty = () => {
+  return Empty ? <Empty /> : null
+}
+
+export const failure = () => {
+  return Failure ? <Failure error={new Error('Oh no')} /> : null
+}
+
+export const success = () => {
+  return Success ? <Success userProfile={{ mock: 'data' }} /> : null
+}
+
+export default { title: 'Cells/UserProfileCell' }

packages/cli/src/commands/generate/cell/__tests__/fixtures/singleWordCell.stories.js

@@ -0,0 +1,19 @@
+import { Loading, Empty, Failure, Success } from './UserCell'
+
+export const loading = () => {
+  return Loading ? <Loading /> : null
+}
+
+export const empty = () => {
+  return Empty ? <Empty /> : null
+}
+
+export const failure = () => {
+  return Failure ? <Failure error={new Error('Oh no')} /> : null
+}
+
+export const success = () => {
+  return Success ? <Success user={{ mock: 'data' }} /> : null
+}
+
+export default { title: 'Cells/UserCell' }

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

@@ -22,18 +22,29 @@ export const files = ({ name }) => {
     generator: 'cell',
     templatePath: 'test.js.template',
   })
+  const storiesFile = templateForComponentFile({
+    name,
+    suffix: COMPONENT_SUFFIX,
+    extension: '.stories.js',
+    webPathSection: REDWOOD_WEB_PATH_NAME,
+    generator: 'cell',
+    templatePath: 'stories.js.template',
+  })
 
   // Returns
   // {
   //    "path/to/fileA": "<<<template>>>",
   //    "path/to/fileB": "<<<template>>>",
   // }
-  return [cellFile, testFile].reduce((acc, [outputPath, content]) => {
-    return {
-      [outputPath]: content,
-      ...acc,
-    }
-  }, {})
+  return [cellFile, testFile, storiesFile].reduce(
+    (acc, [outputPath, content]) => {
+      return {
+        [outputPath]: content,
+        ...acc,
+      }
+    },
+    {}
+  )
 }
 
 export const {

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

@@ -0,0 +1,19 @@
+import { Loading, Empty, Failure, Success } from './${pascalName}Cell'
+
+export const loading = () => {
+  return Loading ? <Loading /> : null
+}
+
+export const empty = () => {
+  return Empty ? <Empty /> : null
+}
+
+export const failure = () => {
+  return Failure ? <Failure error={new Error("Oh no")} /> : null
+}
+
+export const success = () => {
+  return Success ? <Success ${camelName}={{ mock: 'data' }} /> : null
+}
+
+export default { title: 'Cells/${pascalName}Cell' }

packages/cli/src/commands/generate/component/__tests__/component.test.ts

@@ -24,8 +24,8 @@ beforeAll(() => {
   })
 })
 
-test('returns exactly 2 files', () => {
-  expect(Object.keys(singleWordDefaultFiles).length).toEqual(2)
+test('returns exactly 3 files', () => {
+  expect(Object.keys(singleWordDefaultFiles).length).toEqual(3)
 })
 
 test('creates a single word component', () => {
@@ -44,6 +44,18 @@ test('creates a single word component test', () => {
   ).toEqual(loadGeneratorFixture('component', 'singleWordComponent.test.tsx'))
 })
 
+test('creates a single word component story', () => {
+  expect(
+    singleWordDefaultFiles[
+      path.normalize(
+        '/path/to/project/web/src/components/User/User.stories.tsx'
+      )
+    ]
+  ).toEqual(
+    loadGeneratorFixture('component', 'singleWordComponent.stories.tsx')
+  )
+})
+
 test('creates a multi word component', () => {
   expect(
     multiWordDefaultFiles[
@@ -64,6 +76,16 @@ test('creates a multi word component test', () => {
   ).toEqual(loadGeneratorFixture('component', 'multiWordComponent.test.tsx'))
 })
 
+test('creates a multi word component story', () => {
+  expect(
+    multiWordDefaultFiles[
+      path.normalize(
+        '/path/to/project/web/src/components/UserProfile/UserProfile.stories.tsx'
+      )
+    ]
+  ).toEqual(loadGeneratorFixture('component', 'multiWordComponent.stories.tsx'))
+})
+
 test('creates JS component files if javacript = true', () => {
   expect(
     javascriptFiles[

packages/cli/src/commands/generate/component/__tests__/fixtures/multiWordComponent.stories.tsx

@@ -0,0 +1,7 @@
+import UserProfile from './UserProfile'
+
+export const generated = () => {
+  return <UserProfile />
+}
+
+export default { title: 'Components/UserProfile' }

packages/cli/src/commands/generate/component/__tests__/fixtures/singleWordComponent.stories.tsx

@@ -0,0 +1,7 @@
+import User from './User'
+
+export const generated = () => {
+  return <User />
+}
+
+export default { title: 'Components/User' }

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

@@ -23,22 +23,32 @@ export const files = ({ name, ...options }) => {
     generator: 'component',
     templatePath: 'test.tsx.template',
   })
+  const storiesFile = templateForComponentFile({
+    name,
+    extension: `.stories.${isJavascript ? 'js' : 'tsx'}`,
+    webPathSection: REDWOOD_WEB_PATH_NAME,
+    generator: 'component',
+    templatePath: 'stories.tsx.template',
+  })
 
   // Returns
   // {
   //    "path/to/fileA": "<<<template>>>",
   //    "path/to/fileB": "<<<template>>>",
   // }
-  return [componentFile, testFile].reduce((acc, [outputPath, content]) => {
-    const template = isJavascript
-      ? transformTSToJS(outputPath, content)
-      : content
+  return [componentFile, testFile, storiesFile].reduce(
+    (acc, [outputPath, content]) => {
+      const template = isJavascript
+        ? transformTSToJS(outputPath, content)
+        : content
 
-    return {
-      [outputPath]: template,
-      ...acc,
-    }
-  }, {})
+      return {
+        [outputPath]: template,
+        ...acc,
+      }
+    },
+    {}
+  )
 }
 
 export const description = 'Generate a component'

packages/cli/src/commands/generate/component/templates/stories.tsx.template

@@ -0,0 +1,7 @@
+import ${pascalName} from './${pascalName}'
+
+export const generated = () => {
+  return <${pascalName} />
+}
+
+export default { title: 'Components/${pascalName}' }

packages/cli/src/commands/generate/page/__tests__/fixtures/multiWordPage.js

@@ -1,9 +1,15 @@
+import { Link } from '@redwoodjs/router'
+
 const ContactUsPage = () => {
   return (
-    <div>
+    <>
       <h1>ContactUsPage</h1>
-      <p>Find me in ./web/src/pages/ContactUsPage/ContactUsPage.js</p>
-    </div>
+      <p>Find me in "./web/src/pages/ContactUsPage/ContactUsPage.js"</p>
+      <p>
+        My default route is named "contactUs", link to me with `
+        <Link to="contactUs">routes.contactUs()</Link>`
+      </p>
+    </>
   )
 }
 

packages/cli/src/commands/generate/page/__tests__/fixtures/multiWordPage.stories.js

@@ -0,0 +1,7 @@
+import ContactUsPage from './ContactUsPage'
+
+export const generated = () => {
+  return <ContactUsPage />
+}
+
+export default { title: 'Pages/ContactUs' }

packages/cli/src/commands/generate/page/__tests__/fixtures/pluralWordPage.js

@@ -1,9 +1,15 @@
+import { Link } from '@redwoodjs/router'
+
 const CatsPage = () => {
   return (
-    <div>
+    <>
       <h1>CatsPage</h1>
-      <p>Find me in ./web/src/pages/CatsPage/CatsPage.js</p>
-    </div>
+      <p>Find me in "./web/src/pages/CatsPage/CatsPage.js"</p>
+      <p>
+        My default route is named "cats", link to me with `
+        <Link to="cats">routes.cats()</Link>`
+      </p>
+    </>
   )
 }
 

packages/cli/src/commands/generate/page/__tests__/fixtures/singleWordPage.js

@@ -1,9 +1,15 @@
+import { Link } from '@redwoodjs/router'
+
 const HomePage = () => {
   return (
-    <div>
+    <>
       <h1>HomePage</h1>
-      <p>Find me in ./web/src/pages/HomePage/HomePage.js</p>
-    </div>
+      <p>Find me in "./web/src/pages/HomePage/HomePage.js"</p>
+      <p>
+        My default route is named "home", link to me with `
+        <Link to="home">routes.home()</Link>`
+      </p>
+    </>
   )
 }