redwoodjs / example-storybook Goto Github PK

Example application written using Redwood that leverages Redwood's Storybook integration to highlight Redwood's rich feature set. This includes features such as Layout, and Cells.

Home Page: https://redwoodjs-example-storybook.netlify.app/storybook/

License: MIT License

JavaScript 92.97% HTML 0.23% CSS 6.79%

hacktoberfest javascript prisma react redwoodjs storybook

example-storybook's People

Contributors

Stargazers

Watchers

Forkers

big0290 pavel-mazhuga qoddiapps nick-liang gaybro8777

example-storybook's Issues

Service Worker registration error: Unsupported MIME type ('text/html')

I'm seeing fairly consistently (once every 4 clicks?) the following error when clicking on a page in the sidebar:

Failed to register a ServiceWorker for scope ('https://redwoodjs-example-storybook.netlify.app/') with script ('https://redwoodjs-example-storybook.netlify.app/mockServiceWorker.js'): The script has an unsupported MIME type ('text/html').

browser: chrome

investigate auto: re-running failed GitHub action runs when network errors occur

➤YN0000: │ playwright@npm:1.19.2STDERR (node:2527) UnhandledPromiseRejectionWarning: Error: Failed to download chromium v965416, caused by
[97](https://github.com/redwoodjs/example-storybook/runs/6833602310?check_suite_focus=true#step:5:100)
  ➤YN0000: │ playwright@npm:1.19.2STDERR Error: Client network socket disconnected before secure TLS connection was established
[98](https://github.com/redwoodjs/example-storybook/runs/6833602310?check_suite_focus=true#step:5:101)
  ➤YN0000: │ playwright@npm:1.19.2STDERR     at connResetException (internal/errors.js:639:14)
[99](https://github.com/redwoodjs/example-storybook/runs/6833602310?check_suite_focus=true#step:5:102)
  ➤YN0000: │ playwright@npm:1.19.2STDERR     at TLSSocket.onConnectEnd (_tls_wrap.js:1570:19)
[100](https://github.com/redwoodjs/example-storybook/runs/6833602310?check_suite_focus=true#step:5:103)
  ➤YN0000: │ playwright@npm:1.19.2STDERR     at TLSSocket.emit (events.js:412:35)
[101](https://github.com/redwoodjs/example-storybook/runs/6833602310?check_suite_focus=true#step:5:104)
  ➤YN0000: │ playwright@npm:1.19.2STDERR     at endReadableNT (internal/streams/readable.js:1333:12)
[102](https://github.com/redwoodjs/example-storybook/runs/6833602310?check_suite_focus=true#step:5:105)
  ➤YN0000: │ playwright@npm:1.19.2STDERR     at processTicksAndRejections (internal/process/task_queues.js:82:21)
[103](https://github.com/redwoodjs/example-storybook/runs/6833602310?check_suite_focus=true#step:5:106)
  ➤YN0000: │ playwright@npm:1.19.2STDERR     at /home/runner/work/example-storybook/example-storybook/node_modules/playwright-core/lib/utils/registry.js:561:13
[104](https://github.com/redwoodjs/example-storybook/runs/6833602310?check_suite_focus=true#step:5:107)
  ➤YN0000: │ playwright@npm:1.19.2STDERR     at async Registry._downloadExecutable (/home/runner/work/example-storybook/example-storybook/node_modules/playwright-core/lib/utils/registry.js:560:5)
[105](https://github.com/redwoodjs/example-storybook/runs/6833602310?check_suite_focus=true#step:5:108)
  ➤YN0000: │ playwright@npm:1.19.2STDERR     at async Registry.install (/home/runner/work/example-storybook/example-storybook/node_modules/playwright-core/lib/utils/registry.js:539:34)
[106](https://github.com/redwoodjs/example-storybook/runs/6833602310?check_suite_focus=true#step:5:109)
  ➤YN0000: │ playwright@npm:1.19.2STDERR     at async installBrowsersForNpmInstall (/home/runner/work/example-storybook/example-storybook/node_modules/playwright-core/lib/utils/registry.js:728:3)
[107](https://github.com/redwoodjs/example-storybook/runs/6833602310?check_suite_focus=true#step:5:110)
  ➤YN0000: │ playwright@npm:1.19.2STDERR (Use `node --trace-warnings ...` to show where the warning was created)
[108](https://github.com/redwoodjs/example-storybook/runs/6833602310?check_suite_focus=true#step:5:111)
  ➤YN0000: │ playwright@npm:1.19.2STDERR (node:2527) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
[109](https://github.com/redwoodjs/example-storybook/runs/6833602310?check_suite_focus=true#step:5:112)
  ➤YN0000: │ playwright@npm:1.19.2STDERR (node:2527) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
[110](https://github.com/redwoodjs/example-storybook/runs/6833602310?check_suite_focus=true#step:5:113)
  ➤ YN0009: │ playwright@npm:1.19.2 couldn't be built successfully (exit code 1, logs can be found here: /tmp/xfs-97f7f566/build.log)
[111](https://github.com/redwoodjs/example-storybook/runs/6833602310?check_suite_focus=true#step:5:114)
  ➤YN0000: │ @prisma/client@npm:3.14.0 [b1b6e]STDERR prisma:warn The postinstall script automatically ran `prisma generate` and did not find your `prisma/schema.prisma`.
[112](https://github.com/redwoodjs/example-storybook/runs/6833602310?check_suite_focus=true#step:5:115)
  ➤YN0000: │ @prisma/client@npm:3.14.0 [b1b6e]STDERR If you have a Prisma schema file in a custom path, you will need to run
[113](https://github.com/redwoodjs/example-storybook/runs/6833602310?check_suite_focus=true#step:5:116)
  ➤YN0000: │ @prisma/client@npm:3.14.0 [b1b6e]STDERR `prisma generate --schema=./path/to/your/schema.prisma` to generate Prisma Client.
[114](https://github.com/redwoodjs/example-storybook/runs/6833602310?check_suite_focus=true#step:5:117)
  ➤YN0000: │ @prisma/client@npm:3.14.0 [b1b6e]STDERR If you do not have a Prisma schema file yet, you can ignore this message.
[115](https://github.com/redwoodjs/example-storybook/runs/6833602310?check_suite_focus=true#step:5:118)
  ➤YN0000: │ @prisma/client@npm:3.14.0 [b1b6e]STDOUT
[116](https://github.com/redwoodjs/example-storybook/runs/6833602310?check_suite_focus=true#step:5:119)
  ➤ YN0007: │ prisma@npm:3.14.0 must be built because it never has been before or the last one failed
[117](https://github.com/redwoodjs/example-storybook/runs/6833602310?check_suite_focus=true#step:5:121)
➤YN0000: └ Completed in 35s 506ms
[118](https://github.com/redwoodjs/example-storybook/runs/6833602310?check_suite_focus=true#step:5:122)
➤ YN0000: Failed with errors in 1m 1s
[119](https://github.com/redwoodjs/example-storybook/runs/6833602310?check_suite_focus=true#step:5:123)
Error: Process completed with exit code 1.

source: https://github.com/redwoodjs/example-storybook/runs/6833602310?check_suite_focus=true

[RFC]: Better document project overview

Agenda

assumptions: familiar with Redwood; Storybook familiarity is helpful but not necessary.

Redwood's Storybook documentation

Build + Deploy (currently targets Netify)

Is a rough proof of concept (PoC) with a lot of improvements needed ( redwoodjs/redwood#5534 / redwoodjs/redwood#5269 )

example-storybook/netlify.toml

Lines 2 to 5 in 587aa99

    
           # order of steps is important, storybook needs to be built first as 
        
           # it goes into web/public/storybook which then gets built and put into 
        
           # web/dist 
        
           command = "yarn rw sb --build --no-open && yarn rw deploy netlify --no-prisma --no-data-migrate"

Storybook interaction testing

example-storybook/web/src/components/CommentForm/CommentForm.stories.js

Lines 25 to 32 in 06d0825

    
           generated.play = async ({ canvasElement }) => { 
        
             const canvas = within(canvasElement) 
        
             userEvent.type(await canvas.findByTestId('name'), 'comment name') 
        
             userEvent.type(await canvas.findByTestId('body'), 'comment body') 
        
             expect(canvas.getByDisplayValue('comment name')).toBeInTheDocument() 
        
             expect(canvas.getByDisplayValue('comment body')).toBeInTheDocument() 
        
             userEvent.click(canvas.getByTestId('submit')) 
        
           }

https://redwoodjs-example-storybook.netlify.app/storybook/?path=/story/components-commentform--generated
https://storybook.js.org/blog/interaction-testing-with-storybook/

Custom theme

example-storybook/web/config/storybook.manager.js

Lines 1 to 6 in 3c3929f

    
           import { addons } from '@storybook/addons' 
        
           import RedwoodTheme from './redwood.storybook.theme' 
        
           addons.setConfig({ 
        
             theme: RedwoodTheme, 
        
           })

example-storybook/web/config/redwood.storybook.theme.js

Lines 1 to 29 in 5a0acf0

    
           import { create } from '@storybook/theming' 
        
           /** 
        
            * FIXME: hack to get this working locally and on netlify 
        
            */ 
        
           const brandImagePrefix = 
        
             // eslint-disable-next-line no-undef 
        
             process.env.NODE_ENV.toLowerCase() === 'production' ? '..' : '.' 
        
           export default create({ 
        
             base: 'light', 
        
             colorPrimary: '#bf4722', 
        
             colorSecondary: '#341309', 
        
             barSelectedColor: '#faeae5', 
        
             textColor: '#682712', 
        
             appBg: '#faeae5', 
        
             barBg: '#bf4722', 
        
             barTextColor: '#f3c7ba', 
        
             appContentBg: '#faeae5', 
        
             textMutedColor: '#341309', 
        
             appBorderColor: '#faeae5', 
        
             textInverseColor: '#faeae5', 
        
             fontBase: 
        
               'Open Sans,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif', 
        
             brandTitle: 'RedwoodJS', 
        
             brandUrl: 'https://redwoodjs.com/', 
        
             appBorderRadius: 16, 
        
             brandImage: `${brandImagePrefix}/diecut.svg`, 
        
           })

https://redwoodjs.com/docs/storybook#configuring-the-ui-with-storybookmanagerjs

MDX Stories

example-storybook/web/src/stories/Introduction.stories.mdx

Lines 1 to 237 in 86d3a10

    
           import { Meta } from '@storybook/addon-docs' 
        
           import Code from './assets/code-brackets.svg' 
        
           import Colors from './assets/colors.svg' 
        
           import Comments from './assets/comments.svg' 
        
           import Direction from './assets/direction.svg' 
        
           import Flow from './assets/flow.svg' 
        
           import Plugin from './assets/plugin.svg' 
        
           import Repo from './assets/repo.svg' 
        
           import StackAlt from './assets/stackalt.svg' 
        
           <Meta title="Example/Introduction" /> 
        
           <style>{` 
        
             .subheading { 
        
               --mediumdark: '#999999'; 
        
               font-weight: 900; 
        
               font-size: 13px; 
        
               color: #999; 
        
               letter-spacing: 6px; 
        
               line-height: 24px; 
        
               text-transform: uppercase; 
        
               margin-bottom: 12px; 
        
               margin-top: 40px; 
        
             } 
        
             .link-list { 
        
               display: grid; 
        
               grid-template-columns: 1fr; 
        
               grid-template-rows: 1fr 1fr; 
        
               row-gap: 10px; 
        
             } 
        
             @media (min-width: 620px) { 
        
               .link-list { 
        
                 row-gap: 20px; 
        
                 column-gap: 20px; 
        
                 grid-template-columns: 1fr 1fr; 
        
               } 
        
             } 
        
             @media all and (-ms-high-contrast:none) { 
        
             .link-list { 
        
                 display: -ms-grid; 
        
                 -ms-grid-columns: 1fr 1fr; 
        
                 -ms-grid-rows: 1fr 1fr; 
        
               } 
        
             } 
        
             .link-item { 
        
               display: block; 
        
               padding: 20px 30px 20px 15px; 
        
               border: 1px solid #00000010; 
        
               border-radius: 5px; 
        
               transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out; 
        
               color: #333333; 
        
               display: flex; 
        
               align-items: flex-start; 
        
             } 
        
             .link-item:hover { 
        
               border-color: #1EA7FD50; 
        
               transform: translate3d(0, -3px, 0); 
        
               box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0; 
        
             } 
        
             .link-item:active { 
        
               border-color: #1EA7FD; 
        
               transform: translate3d(0, 0, 0); 
        
             } 
        
             .link-item strong { 
        
               font-weight: 700; 
        
               display: block; 
        
               margin-bottom: 2px; 
        
             } 
        
             .link-item img { 
        
               height: 40px; 
        
               width: 40px; 
        
               margin-right: 15px; 
        
               flex: none; 
        
             } 
        
             .link-item span { 
        
               font-size: 14px; 
        
               line-height: 20px; 
        
             } 
        
             .tip { 
        
               display: inline-block; 
        
               border-radius: 1em; 
        
               font-size: 11px; 
        
               line-height: 12px; 
        
               font-weight: 700; 
        
               background: #E7FDD8; 
        
               color: #66BF3C; 
        
               padding: 4px 12px; 
        
               margin-right: 10px; 
        
               vertical-align: top; 
        
             } 
        
             .tip-wrapper { 
        
               font-size: 13px; 
        
               line-height: 20px; 
        
               margin-top: 40px; 
        
               margin-bottom: 40px; 
        
             } 
        
             .tip-wrapper code { 
        
               font-size: 12px; 
        
               display: inline-block; 
        
             } 
        
             .header-images { 
        
               display: inline; 
        
             } 
        
           `}</style> 
        
           # Welcome to Redwood  <img src="https://avatars2.githubusercontent.com/u/45050444?v=4" width="50" class="header-images" /> &amp; Storybook <img src="https://avatars.githubusercontent.com/u/22632046?v=4" width="50" class="header-images" /> 
        
           Redwood is an opinionated, full-stack, JavaScript/TypeScript web application framework designed 
        
           to keep you moving fast as your app grows from side project to startup. 
        
           Storybook helps you build UI components in isolation from your app's business logic, data, and context. 
        
           That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA. 
        
           Browse example stories now by navigating to them in the sidebar. 
        
           View their code in the `src/stories` directory to learn how they work. 
        
           We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages. 
        
           <div className="subheading">Configure</div> 
        
           <div className="link-list"> 
        
             <a 
        
               className="link-item" 
        
               href="https://storybook.js.org/docs/react/addons/addon-types" 
        
               target="_blank" 
        
             > 
        
               <img src={Plugin} alt="plugin" /> 
        
               <span> 
        
                 <strong>Presets for popular tools</strong> 
        
                 Easy setup for TypeScript, SCSS and more. 
        
               </span> 
        
             </a> 
        
             <a 
        
               className="link-item" 
        
               href="https://storybook.js.org/docs/react/configure/webpack" 
        
               target="_blank" 
        
             > 
        
               <img src={StackAlt} alt="Build" /> 
        
               <span> 
        
                 <strong>Build configuration</strong> 
        
                 How to customize webpack and Babel 
        
               </span> 
        
             </a> 
        
             <a 
        
               className="link-item" 
        
               href="https://storybook.js.org/docs/react/configure/styling-and-css" 
        
               target="_blank" 
        
             > 
        
               <img src={Colors} alt="colors" /> 
        
               <span> 
        
                 <strong>Styling</strong> 
        
                 How to load and configure CSS libraries 
        
               </span> 
        
             </a> 
        
             <a 
        
               className="link-item" 
        
               href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack" 
        
               target="_blank" 
        
             > 
        
               <img src={Flow} alt="flow" /> 
        
               <span> 
        
                 <strong>Data</strong> 
        
                 Providers and mocking for data libraries 
        
               </span> 
        
             </a> 
        
           </div> 
        
           <div className="subheading">Learn</div> 
        
           <div className="link-list"> 
        
             <a 
        
               className="link-item" 
        
               href="https://redwoodjs.com/docs/storybook" 
        
               target="_blank" 
        
             > 
        
               <img src={Repo} alt="repo" /> 
        
               <span> 
        
                 <strong>Redwood's Storybook documentation</strong> 
        
                 Getting started and configuring 
        
               </span> 
        
             </a> 
        
             <a className="link-item" href="https://storybook.js.org/docs" target="_blank"> 
        
               <img src={Repo} alt="repo" /> 
        
               <span> 
        
                 <strong>Storybook documentation</strong> 
        
                 Configure, customize, and extend 
        
               </span> 
        
             </a> 
        
             <a 
        
               className="link-item" 
        
               href="https://storybook.js.org/tutorials/" 
        
               target="_blank" 
        
             > 
        
               <img src={Direction} alt="direction" /> 
        
               <span> 
        
                 <strong>In-depth guides</strong> 
        
                 Best practices from leading teams 
        
               </span> 
        
             </a> 
        
             <a 
        
               className="link-item" 
        
               href="https://github.com/storybookjs/storybook" 
        
               target="_blank" 
        
             > 
        
               <img src={Code} alt="code" /> 
        
               <span> 
        
                 <strong>GitHub project</strong> 
        
                 View the source and add issues 
        
               </span> 
        
             </a> 
        
             <a className="link-item" href="https://discord.gg/storybook" target="_blank"> 
        
               <img src={Comments} alt="comments" /> 
        
               <span> 
        
                 <strong>Discord chat</strong> 
        
                 Chat with maintainers and the community 
        
               </span> 
        
             </a> 
        
           </div> 
        
           <div className="tip-wrapper"> 
        
             <span className="tip">Tip</span>Edit this Markdown in{' '} 
        
             <code>web/src/stories/Introduction.stories.mdx</code> 
        
           </div>

https://redwoodjs-example-storybook.netlify.app/storybook/?path=/story/example-introduction--page
https://storybook.js.org/docs/react/api/mdx

Demonstrate Storybook's Decorators
- #122

Gitpod integration

example-storybook/.gitpod.yml

Lines 1 to 44 in 6df4696

    
           # To learn about this file, please see https://www.gitpod.io/docs/references/gitpod-yml 
        
           # NOTE: Use Gitod's PostgreSQL image once https://github.com/gitpod-io/workspace-images/issues/705 is fixed 
        
           #image: gitpod/workspace-postgres 
        
           image: 
        
             file: .gitpod.Dockerfile 
        
           tasks: 
        
             - init: | 
        
                 createdb dev 
        
                 yarn install 
        
                 cp .env.defaults .env 
        
                 echo "SESSION_SECRET=$(yarn rw g secret | sed '2q;d' | xargs)" >> .env 
        
                 yarn rw prisma migrate dev 
        
               command: yarn rw sb 
        
           ports: 
        
             - port: 5432 
        
               name: PostgreSQL database 
        
               onOpen: ignore 
        
             - port: 5555 
        
               name: Prisma Studio 
        
               onOpen: open-browser 
        
             - port: 7910 
        
               name: Storybook 
        
               onOpen: open-browser 
        
             - port: 8910 
        
               name: RedoodJS web application 
        
               onOpen: open-browser 
        
             - port: 8911 
        
               name: Serverless functions 
        
               onOpen: ignore 
        
           vscode: 
        
             extensions: 
        
               - "dbaeumer.vscode-eslint" 
        
               - "eamodio.gitlens" 
        
               # - "ofhumanbondage.react-proptypes-intellisense" - Not published to Open VSX (yet) 
        
               - "mgmcdermott.vscode-language-babel" 
        
               - "wix.vscode-import-cost" 
        
               - "pflannery.vscode-versionlens" 
        
               - "editorconfig.editorconfig" 
        
               - "prisma.prisma" 
        
               - "graphql.vscode-graphql"

example-storybook/.gitpod.Dockerfile

Lines 1 to 29 in c29df44

    
           FROM gitpod/workspace-full:latest 
        
           # Dazzle does not rebuild a layer until one of its lines are changed. Increase this counter to rebuild this layer. 
        
           ENV TRIGGER_REBUILD=2 
        
           ENV PGWORKSPACE="/workspace/.pgsql" 
        
           ENV PGDATA="$PGWORKSPACE/data" 
        
           # Install PostgreSQL 
        
           RUN sudo install-packages postgresql-12 postgresql-contrib-12 
        
           # Setup PostgreSQL server for user gitpod 
        
           ENV PATH="/usr/lib/postgresql/12/bin:$PATH" 
        
           SHELL ["/usr/bin/bash", "-c"] 
        
           RUN PGDATA="${PGDATA//\/workspace/$HOME}" \ 
        
            && mkdir -p ~/.pg_ctl/bin ~/.pg_ctl/sockets $PGDATA \ 
        
            && initdb -D $PGDATA \ 
        
            && printf '#!/bin/bash\npg_ctl -D $PGDATA -l ~/.pg_ctl/log -o "-k ~/.pg_ctl/sockets" start\n' > ~/.pg_ctl/bin/pg_start \ 
        
            && printf '#!/bin/bash\npg_ctl -D $PGDATA -l ~/.pg_ctl/log -o "-k ~/.pg_ctl/sockets" stop\n' > ~/.pg_ctl/bin/pg_stop \ 
        
            && chmod +x ~/.pg_ctl/bin/* \ 
        
            && printf '%s\n' '# Auto-start PostgreSQL server' \ 
        
                             "test ! -e \$PGWORKSPACE && mkdir -p /workspace && test -e ${PGDATA%/data} && mv ${PGDATA%/data} /workspace" \ 
        
                             # Making the /workspace dir just to make sure it doesnt fail in docker env in case 
        
                             '[[ $(pg_ctl status | grep PID) ]] || pg_start > /dev/null' > ~/.bashrc.d/200-postgresql-launch 
        
           ENV PATH="$HOME/.pg_ctl/bin:$PATH" 
        
           ENV PGHOSTADDR="127.0.0.1" 
        
           ENV PGDATABASE="postgres" 
        
           USER gitpod

https://gitpod.io/#https://github.com/redwoodjs/example-storybook
https://github.com/redwoodjs/gitpod-starter

GitHub service containers

example-storybook/.github/workflows/node.js.yml

Lines 29 to 45 in c892e3a

    
               services: 
        
                 # Label used to access the service container 
        
                 postgres: 
        
                   # Docker Hub image 
        
                   image: postgres@sha256:1cb07b811f2ec7b7bf3c42fc3dc19c1b5e87775eee88c2b1a8793420c4de0781 
        
                   # Provide the password for postgres 
        
                   env: 
        
                     POSTGRES_PASSWORD: postgres 
        
                   # Set health checks to wait until postgres has started 
        
                   options: >- 
        
                     --health-cmd pg_isready 
        
                     --health-interval 10s 
        
                     --health-timeout 5s 
        
                     --health-retries 5 
        
                   ports: 
        
                     # Maps tcp port 5432 on service container to the host 
        
                     - 5432:5432

https://docs.github.com/en/actions/using-containerized-services/creating-postgresql-service-containers#running-jobs-in-containers

What do you think of using decorators?

A pretty neat feature of storybook are decorators for story, here is a couple that I am using for example:

To mock Authcontext

import {
  AuthContext,
  AuthContextInterface,
} from '@redwoodjs/auth/dist/AuthProvider'

export const UseAuthDecorator =
  (authCtx?: Partial<AuthContextInterface>) => (Story) => {
    const mockAuthCtx: AuthContextInterface = {
      loading: true,
      isAuthenticated: false,
      userMetadata: null,
      currentUser: null,
      logIn: () => Promise.resolve(),
      logOut: () => Promise.resolve(),
      signUp: () => Promise.resolve(),
      getToken: () => Promise.resolve(null),
      getCurrentUser: () => Promise.resolve(null),
      hasRole: () => true,
      reauthenticate: () => Promise.resolve(),
      forgotPassword: () => Promise.resolve(),
      resetPassword: () => Promise.resolve(),
      validateResetToken: () => Promise.resolve(),
      hasError: false,
    }
    return (
      <AuthContext.Provider
        value={{
          ...mockAuthCtx,
          ...authCtx,
        }}
      >
        <Story />
      </AuthContext.Provider>
    )
  }

Example usage in story file:

import { MarginDecorator } from 'src/lib/storybookDecorators/marginDecorator'
import { UseAuthDecorator } from 'src/lib/storybookDecorators/useAuthDecorator'
import { testExplorer } from 'src/lib/test/user'

import LoginButton from './LoginButton'

export const Login = () => {
  return <LoginButton />
}

export const Logout = () => {
  return <LoginButton />
}
Logout.decorators = [UseAuthDecorator({ currentUser: testExplorer })]

export default {
  title: 'Widgets/LoginButton',
  component: LoginButton,
}

To mock params

import { ParamsContext } from '@redwoodjs/router'

export const UseParamsDecorator = (params: Record<string, string>) => (Story) =>
  (
    <ParamsContext.Provider
      value={{
        params,
      }}
    >
      <Story />
    </ParamsContext.Provider>
  )

Exmaple usage in story file:

import { mockProfile } from 'src/components/features/Profile/ProfileCell/ProfileCell.mock'
import { LayoutDecorator } from 'src/lib/storybookDecorators/layoutDecorator'
import { UseParamsDecorator } from 'src/lib/storybookDecorators/useParamsDecorator'
import { testCreatorOnboarding } from 'src/lib/test/user'

import ProfilePage from './ProfilePage'

export const Base = () => <ProfilePage />

export default {
  title: 'Features/Profile/ProfilePage',
  Component: ProfilePage,
  decorators: [
    UseParamsDecorator({ username: testCreatorOnboarding.username }),
  ],
}

Figure out why `yarn rw sb --build --no-open && yarn rw build` did not break in CI/CD when it broke IRL

see: #43 / #44

Upgrading to Storybook v6.5.3 broke deployed artifact with "`e.replace is not a function`"

Introduced in: #66

Seems related to: storybookjs/storybook#18281

First broken deploy: https://deploy-preview-66--redwoodjs-example-storybook.netlify.app/storybook/

chore: put into maintenance mode

since most of redwoodjs/redwood#5269 is still outstanding, it makes working on this project rather laborious. going to sunset it for now.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

chore(deps): update dependency @storybook/jest to v0.1.0
chore(deps): update dependency @storybook/testing-library to v0.1.0
chore(deps): update storybook monorepo to v7 (major) (@storybook/addon-a11y, @storybook/addon-interactions, @storybook/addon-storyshots, @storybook/builder-webpack5, @storybook/react)

Detected dependencies

github-actions

.github/workflows/node.js.yml

actions/checkout v3.5.2

actions/setup-node v3.6.0

nick-fields/retry v2.8.3

nick-fields/retry v2.8.3

actions/upload-artifact v3.1.2

actions/upload-artifact v3.1.2

postgres sha256:78a275d4c891f7b3a33d3f1a78eda9f1d744954d9e20122bfdc97cdda25cddaf

npm

api/package.json

@redwoodjs/api 5.0.3

@redwoodjs/graphql-server 5.0.3

package.json

@redwoodjs/core 5.0.3

node =18.x

yarn >=3.2.0

@storybook/addon-a11y 6.5.16

@storybook/builder-webpack5 6.5.16

@storybook/manager-webpack5 6.5.16

@storybook/react 6.5.16

yarn 3.5.1

web/package.json

@redwoodjs/auth 5.0.3

@redwoodjs/forms 5.0.3

@redwoodjs/router 5.0.3

@redwoodjs/web 5.0.3

prop-types 15.8.1

react 18.2.0

react-dom 18.2.0

@storybook/addon-coverage 0.0.8

@storybook/addon-interactions 6.5.16

@storybook/addon-storyshots 6.5.16

@storybook/jest 0.0.10

@storybook/test-runner 0.10.0

@storybook/testing-library 0.0.13

autoprefixer 10.4.14

identity-obj-proxy 3.0.0

istanbul-instrumenter-loader 3.0.1

postcss 8.4.23

postcss-loader 7.3.0

tailwindcss 3.3.2

nvm

.nvmrc

Check this box to trigger a request for Renovate to run again on this repository

"ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema."

#35 ( rw 1.1.0 ) caused a regression: https://github.com/redwoodjs/example-storybook/runs/6090724629?check_suite_focus=true#step:7:24

  yarn rw sb --build --no-open && yarn rw build

results in

ERR! ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
ERR!  - configuration.entry should not contain the item '/home/runner/work/example-storybook/example-storybook/node_modules/@storybook/addon-outline/dist/esm/preset/addDecorator.js-generated-config-entry.js' twice.
ERR!    -> All modules are loaded upon startup. The last one is exported.
ERR!     at validate (/home/runner/work/example-storybook/example-storybook/node_modules/schema-utils/dist/validate.js:105:11)
ERR!     at validateSchema (/home/runner/work/example-storybook/example-storybook/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/validateSchema.js:78:2)
ERR!     at create (/home/runner/work/example-storybook/example-storybook/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/webpack.js:111:24)
ERR!     at webpack (/home/runner/work/example-storybook/example-storybook/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/webpack.js:158:32)
ERR!     at f (/home/runner/work/example-storybook/example-storybook/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/index.js:63:16)
ERR!     at /home/runner/work/example-storybook/example-storybook/node_modules/@storybook/builder-webpack5/dist/cjs/index.js:167:20
ERR!     at new Promise (<anonymous>)
ERR!     at Object.build (/home/runner/work/example-storybook/example-storybook/node_modules/@storybook/builder-webpack5/dist/cjs/index.js:166:10)
ERR!     at async Promise.all (index 1)
ERR!     at async buildStaticStandalone (/home/runner/work/example-storybook/example-storybook/node_modules/@storybook/core-server/dist/cjs/build-static.js:175:[28](https://github.com/redwoodjs/example-storybook/runs/6090724629?check_suite_focus=true#step:7:28))
ERR!     at async buildStatic (/home/runner/work/example-storybook/example-storybook/node_modules/@storybook/core-server/dist/cjs/build-static.js:195:5)
ERR!  ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
ERR!  - configuration.entry should not contain the item '/home/runner/work/example-storybook/example-storybook/node_modules/@storybook/addon-outline/dist/esm/preset/addDecorator.js-generated-config-entry.js' twice.
ERR!    -> All modules are loaded upon startup. The last one is exported.
ERR!     at validate (/home/runner/work/example-storybook/example-storybook/node_modules/schema-utils/dist/validate.js:105:11)
ERR!     at validateSchema (/home/runner/work/example-storybook/example-storybook/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/validateSchema.js:78:2)
ERR!     at create (/home/runner/work/example-storybook/example-storybook/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/webpack.js:111:24)
ERR!     at webpack (/home/runner/work/example-storybook/example-storybook/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/webpack.js:158:32)
ERR!     at f (/home/runner/work/example-storybook/example-storybook/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/index.js:63:16)
ERR!     at /home/runner/work/example-storybook/example-storybook/node_modules/@storybook/builder-webpack5/dist/cjs/index.js:167:20
ERR!     at new Promise (<anonymous>)
ERR!     at Object.build (/home/runner/work/example-storybook/example-storybook/node_modules/@storybook/builder-webpack5/dist/cjs/index.js:166:10)
ERR!     at async Promise.all (index 1)
ERR!     at async buildStaticStandalone (/home/runner/work/example-storybook/example-storybook/node_modules/@storybook/core-server/dist/cjs/build-static.js:175:28)
ERR!     at async buildStatic (/home/runner/work/example-storybook/example-storybook/node_modules/@storybook/core-server/dist/cjs/build-static.js:195:5) {
ERR!   errors: [
ERR!     {
ERR!       keyword: 'anyOf',
ERR!       dataPath: '.entry',
ERR!       schemaPath: '#/anyOf',
ERR!       params: {},
ERR!       message: 'should match some schema in anyOf',
ERR!       schema: [Array],
ERR!       parentSchema: [Object],
ERR!       data: [Array],
ERR!       children: [Array]
ERR!     }
ERR!   ],
ERR!   schema: {
ERR!     definitions: {
ERR!       Amd: [Object],
ERR!       AssetFilterItemTypes: [Object],
ERR!       AssetFilterTypes: [Object],
ERR!       AssetGeneratorDataUrl: [Object],
ERR!       AssetGeneratorDataUrlFunction: [Object],
ERR!       AssetGeneratorDataUrlOptions: [Object],
ERR!       AssetGeneratorOptions: [Object],
ERR!       AssetInlineGeneratorOptions: [Object],
ERR!       AssetModuleFilename: [Object],
ERR!       AssetModuleOutputPath: [Object],
ERR!       AssetParserDataUrlFunction: [Object],
ERR!       AssetParserDataUrlOptions: [Object],
ERR!       AssetParserOptions: [Object],
ERR!       AssetResourceGeneratorOptions: [Object],
ERR!       AuxiliaryComment: [Object],
ERR!       Bail: [Object],
ERR!       CacheOptions: [Object],
ERR!       CacheOptionsNormalized: [Object],
ERR!       Charset: [Object],
ERR!       ChunkFilename: [Object],
ERR!       ChunkFormat: [Object],
ERR!       ChunkLoadTimeout: [Object],
ERR!       ChunkLoading: [Object],
ERR!       ChunkLoadingGlobal: [Object],
ERR!       ChunkLoadingType: [Object],
ERR!       Clean: [Object],
ERR!       CleanOptions: [Object],
ERR!       CompareBeforeEmit: [Object],
ERR!       Context: [Object],
ERR!       CrossOriginLoading: [Object],
ERR!       CssChunkFilename: [Object],
ERR!       CssExperimentOptions: [Object],
ERR!       CssFilename: [Object],
ERR!       CssGeneratorOptions: [Object],
ERR!       CssParserOptions: [Object],
ERR!       Dependencies: [Object],
ERR!       DevServer: [Object],
ERR!       DevTool: [Object],
ERR!       DevtoolFallbackModuleFilenameTemplate: [Object],
ERR!       DevtoolModuleFilenameTemplate: [Object],
ERR!       DevtoolNamespace: [Object],
ERR!       EmptyGeneratorOptions: [Object],
ERR!       EmptyParserOptions: [Object],
ERR!       EnabledChunkLoadingTypes: [Object],
ERR!       EnabledLibraryTypes: [Object],
ERR!       EnabledWasmLoadingTypes: [Object],
ERR!       Entry: [Object],
ERR!       EntryDescription: [Object],
ERR!       EntryDescriptionNormalized: [Object],
ERR!       EntryDynamic: [Object],
ERR!       EntryDynamicNormalized: [Object],
ERR!       EntryFilename: [Object],
ERR!       EntryItem: [Object],
ERR!       EntryNormalized: [Object],
ERR!       EntryObject: [Object],
ERR!       EntryRuntime: [Object],
ERR!       EntryStatic: [Object],
ERR!       EntryStaticNormalized: [Object],
ERR!       EntryUnnamed: [Object],
ERR!       Environment: [Object],
ERR!       Experiments: [Object],
ERR!       ExperimentsCommon: [Object],
ERR!       ExperimentsNormalized: [Object],
ERR!       ExternalItem: [Object],
ERR!       ExternalItemFunctionData: [Object],
ERR!       ExternalItemValue: [Object],
ERR!       Externals: [Object],
ERR!       ExternalsPresets: [Object],
ERR!       ExternalsType: [Object],
ERR!       FileCacheOptions: [Object],
ERR!       Filename: [Object],
ERR!       FilenameTemplate: [Object],
ERR!       FilterItemTypes: [Object],
ERR!       FilterTypes: [Object],
ERR!       GeneratorOptionsByModuleType: [Object],
ERR!       GlobalObject: [Object],
ERR!       HashDigest: [Object],
ERR!       HashDigestLength: [Object],
ERR!       HashFunction: [Object],
ERR!       HashSalt: [Object],
ERR!       HotUpdateChunkFilename: [Object],
ERR!       HotUpdateGlobal: [Object],
ERR!       HotUpdateMainFilename: [Object],
ERR!       HttpUriAllowedUris: [Object],
ERR!       HttpUriOptions: [Object],
ERR!       HttpUriOptionsAllowedUris: [Object],
ERR!       IgnoreWarnings: [Object],
ERR!       IgnoreWarningsNormalized: [Object],
ERR!       Iife: [Object],
ERR!       ImportFunctionName: [Object],
ERR!       ImportMetaName: [Object],
ERR!       InfrastructureLogging: [Object],
ERR!       JavascriptParserOptions: [Object],
ERR!       Layer: [Object],
ERR!       LazyCompilationDefaultBackendOptions: [Object],
ERR!       LazyCompilationOptions: [Object],
ERR!       Library: [Object],
ERR!       LibraryCustomUmdCommentObject: [Object],
ERR!       LibraryCustomUmdObject: [Object],
ERR!       LibraryExport: [Object],
ERR!       LibraryName: [Object],
ERR!       LibraryOptions: [Object],
ERR!       LibraryType: [Object],
ERR!       Loader: [Object],
ERR!       MemoryCacheOptions: [Object],
ERR!       Mode: [Object],
ERR!       ModuleFilterItemTypes: [Object],
ERR!       ModuleFilterTypes: [Object],
ERR!       ModuleOptions: [Object],
ERR!       ModuleOptionsNormalized: [Object],
ERR!       Name: [Object],
ERR!       NoParse: [Object],
ERR!       Node: [Object],
ERR!       NodeOptions: [Object],
ERR!       Optimization: [Object],
ERR!       OptimizationRuntimeChunk: [Object],
ERR!       OptimizationRuntimeChunkNormalized: [Object],
ERR!       OptimizationSplitChunksCacheGroup: [Object],
ERR!       OptimizationSplitChunksGetCacheGroups: [Object],
ERR!       OptimizationSplitChunksOptions: [Object],
ERR!       OptimizationSplitChunksSizes: [Object],
ERR!       Output: [Object],
ERR!       OutputModule: [Object],
ERR!       OutputNormalized: [Object],
ERR!       Parallelism: [Object],
ERR!       ParserOptionsByModuleType: [Object],
ERR!       Path: [Object],
ERR!       Pathinfo: [Object],
ERR!       Performance: [Object],
ERR!       PerformanceOptions: [Object],
ERR!       Plugins: [Object],
ERR!       Profile: [Object],
ERR!       PublicPath: [Object],
ERR!       RawPublicPath: [Object],
ERR!       RecordsInputPath: [Object],
ERR!       RecordsOutputPath: [Object],
ERR!       RecordsPath: [Object],
ERR!       Resolve: [Object],
ERR!       ResolveAlias: [Object],
ERR!       ResolveLoader: [Object],
ERR!       ResolveOptions: [Object],
ERR!       ResolvePluginInstance: [Object],
ERR!       RuleSetCondition: [Object],
ERR!       RuleSetConditionAbsolute: [Object],
ERR!       RuleSetConditionOrConditions: [Object],
ERR!       RuleSetConditionOrConditionsAbsolute: [Object],
ERR!       RuleSetConditions: [Object],
ERR!       RuleSetConditionsAbsolute: [Object],
ERR!       RuleSetLoader: [Object],
ERR!       RuleSetLoaderOptions: [Object],
ERR!       RuleSetLogicalConditions: [Object],
ERR!       RuleSetLogicalConditionsAbsolute: [Object],
ERR!       RuleSetRule: [Object],
ERR!       RuleSetRules: [Object],
ERR!       RuleSetUse: [Object],
ERR!       RuleSetUseItem: [Object],
ERR!       ScriptType: [Object],
ERR!       SnapshotOptions: [Object],
ERR!       SourceMapFilename: [Object],
ERR!       SourcePrefix: [Object],
ERR!       StatsOptions: [Object],
ERR!       StatsValue: [Object],
ERR!       StrictModuleErrorHandling: [Object],
ERR!       StrictModuleExceptionHandling: [Object],
ERR!       Target: [Object],
ERR!       TrustedTypes: [Object],
ERR!       UmdNamedDefine: [Object],
ERR!       UniqueName: [Object],
ERR!       WarningFilterItemTypes: [Object],
ERR!       WarningFilterTypes: [Object],
ERR!       WasmLoading: [Object],
ERR!       WasmLoadingType: [Object],
ERR!       Watch: [Object],
ERR!       WatchOptions: [Object],
ERR!       WebassemblyModuleFilename: [Object],
ERR!       WebpackOptionsNormalized: [Object],
ERR!       WebpackPluginFunction: [Object],
ERR!       WebpackPluginInstance: [Object]
ERR!     },
ERR!     title: 'WebpackOptions',
ERR!     description: 'Options object as provided by the user.',
ERR!     type: 'object',
ERR!     additionalProperties: false,
ERR!     properties: {
ERR!       amd: [Object],
ERR!       bail: [Object],
ERR!       cache: [Object],
ERR!       context: [Object],
ERR!       dependencies: [Object],
ERR!       devServer: [Object],
ERR!       devtool: [Object],
ERR!       entry: [Object],
ERR!       experiments: [Object],
ERR!       externals: [Object],
ERR!       externalsPresets: [Object],
ERR!       externalsType: [Object],
ERR!       ignoreWarnings: [Object],
ERR!       infrastructureLogging: [Object],
ERR!       loader: [Object],
ERR!       mode: [Object],
ERR!       module: [Object],
ERR!       name: [Object],
ERR!       node: [Object],
ERR!       optimization: [Object],
ERR!       output: [Object],
ERR!       parallelism: [Object],
ERR!       performance: [Object],
ERR!       plugins: [Object],
ERR!       profile: [Object],
ERR!       recordsInputPath: [Object],
ERR!       recordsOutputPath: [Object],
ERR!       recordsPath: [Object],
ERR!       resolve: [Object],
ERR!       resolveLoader: [Object],
ERR!       snapshot: [Object],
ERR!       stats: [Object],
ERR!       target: [Object],
ERR!       watch: [Object],
ERR!       watchOptions: [Object]
ERR!     }
ERR!   },
ERR!   headerName: 'Webpack',
ERR!   baseDataPath: 'configuration',
ERR!   postFormatter: [Function: postFormatter]
ERR! }ERR! ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
ERR!  - configuration.entry should not contain the item '/home/runner/work/example-storybook/example-storybook/node_modules/@storybook/addon-outline/dist/esm/preset/addDecorator.js-generated-config-entry.js' twice.
ERR!    -> All modules are loaded upon startup. The last one is exported.
ERR!     at validate (/home/runner/work/example-storybook/example-storybook/node_modules/schema-utils/dist/validate.js:105:11)
ERR!     at validateSchema (/home/runner/work/example-storybook/example-storybook/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/validateSchema.js:78:2)
ERR!     at create (/home/runner/work/example-storybook/example-storybook/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/webpack.js:111:24)
ERR!     at webpack (/home/runner/work/example-storybook/example-storybook/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/webpack.js:158:32)
ERR!     at f (/home/runner/work/example-storybook/example-storybook/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/index.js:63:16)
ERR!     at /home/runner/work/example-storybook/example-storybook/node_modules/@storybook/builder-webpack5/dist/cjs/index.js:167:20
ERR!     at new Promise (<anonymous>)
ERR!     at Object.build (/home/runner/work/example-storybook/example-storybook/node_modules/@storybook/builder-webpack5/dist/cjs/index.js:166:10)
ERR!     at async Promise.all (index 1)
ERR!     at async buildStaticStandalone (/home/runner/work/example-storybook/example-storybook/node_modules/@storybook/core-server/dist/cjs/build-static.js:175:[28](https://github.com/redwoodjs/example-storybook/runs/6090724629?check_suite_focus=true#step:7:28))
ERR!     at async buildStatic (/home/runner/work/example-storybook/example-storybook/node_modules/@storybook/core-server/dist/cjs/build-static.js:195:5)
ERR!  ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
ERR!  - configuration.entry should not contain the item '/home/runner/work/example-storybook/example-storybook/node_modules/@storybook/addon-outline/dist/esm/preset/addDecorator.js-generated-config-entry.js' twice.
ERR!    -> All modules are loaded upon startup. The last one is exported.
ERR!     at validate (/home/runner/work/example-storybook/example-storybook/node_modules/schema-utils/dist/validate.js:105:11)
ERR!     at validateSchema (/home/runner/work/example-storybook/example-storybook/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/validateSchema.js:78:2)
ERR!     at create (/home/runner/work/example-storybook/example-storybook/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/webpack.js:111:24)
ERR!     at webpack (/home/runner/work/example-storybook/example-storybook/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/webpack.js:158:32)
ERR!     at f (/home/runner/work/example-storybook/example-storybook/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/index.js:63:16)
ERR!     at /home/runner/work/example-storybook/example-storybook/node_modules/@storybook/builder-webpack5/dist/cjs/index.js:167:20
ERR!     at new Promise (<anonymous>)
ERR!     at Object.build (/home/runner/work/example-storybook/example-storybook/node_modules/@storybook/builder-webpack5/dist/cjs/index.js:166:10)
ERR!     at async Promise.all (index 1)
ERR!     at async buildStaticStandalone (/home/runner/work/example-storybook/example-storybook/node_modules/@storybook/core-server/dist/cjs/build-static.js:175:28)
ERR!     at async buildStatic (/home/runner/work/example-storybook/example-storybook/node_modules/@storybook/core-server/dist/cjs/build-static.js:195:5) {
ERR!   errors: [
ERR!     {
ERR!       keyword: 'anyOf',
ERR!       dataPath: '.entry',
ERR!       schemaPath: '#/anyOf',
ERR!       params: {},
ERR!       message: 'should match some schema in anyOf',
ERR!       schema: [Array],
ERR!       parentSchema: [Object],
ERR!       data: [Array],
ERR!       children: [Array]
ERR!     }
ERR!   ],
ERR!   schema: {
ERR!     definitions: {
ERR!       Amd: [Object],
ERR!       AssetFilterItemTypes: [Object],
ERR!       AssetFilterTypes: [Object],
ERR!       AssetGeneratorDataUrl: [Object],
ERR!       AssetGeneratorDataUrlFunction: [Object],
ERR!       AssetGeneratorDataUrlOptions: [Object],
ERR!       AssetGeneratorOptions: [Object],
ERR!       AssetInlineGeneratorOptions: [Object],
ERR!       AssetModuleFilename: [Object],
ERR!       AssetModuleOutputPath: [Object],
ERR!       AssetParserDataUrlFunction: [Object],
ERR!       AssetParserDataUrlOptions: [Object],
ERR!       AssetParserOptions: [Object],
ERR!       AssetResourceGeneratorOptions: [Object],
ERR!       AuxiliaryComment: [Object],
ERR!       Bail: [Object],
ERR!       CacheOptions: [Object],
ERR!       CacheOptionsNormalized: [Object],
ERR!       Charset: [Object],
ERR!       ChunkFilename: [Object],
ERR!       ChunkFormat: [Object],
ERR!       ChunkLoadTimeout: [Object],
ERR!       ChunkLoading: [Object],
ERR!       ChunkLoadingGlobal: [Object],
ERR!       ChunkLoadingType: [Object],
ERR!       Clean: [Object],
ERR!       CleanOptions: [Object],
ERR!       CompareBeforeEmit: [Object],
ERR!       Context: [Object],
ERR!       CrossOriginLoading: [Object],
ERR!       CssChunkFilename: [Object],
ERR!       CssExperimentOptions: [Object],
ERR!       CssFilename: [Object],
ERR!       CssGeneratorOptions: [Object],
ERR!       CssParserOptions: [Object],
ERR!       Dependencies: [Object],
ERR!       DevServer: [Object],
ERR!       DevTool: [Object],
ERR!       DevtoolFallbackModuleFilenameTemplate: [Object],
ERR!       DevtoolModuleFilenameTemplate: [Object],
ERR!       DevtoolNamespace: [Object],
ERR!       EmptyGeneratorOptions: [Object],
ERR!       EmptyParserOptions: [Object],
ERR!       EnabledChunkLoadingTypes: [Object],
ERR!       EnabledLibraryTypes: [Object],
ERR!       EnabledWasmLoadingTypes: [Object],
ERR!       Entry: [Object],
ERR!       EntryDescription: [Object],
ERR!       EntryDescriptionNormalized: [Object],
ERR!       EntryDynamic: [Object],
ERR!       EntryDynamicNormalized: [Object],
ERR!       EntryFilename: [Object],
ERR!       EntryItem: [Object],
ERR!       EntryNormalized: [Object],
ERR!       EntryObject: [Object],
ERR!       EntryRuntime: [Object],
ERR!       EntryStatic: [Object],
ERR!       EntryStaticNormalized: [Object],
ERR!       EntryUnnamed: [Object],
ERR!       Environment: [Object],
ERR!       Experiments: [Object],
ERR!       ExperimentsCommon: [Object],
ERR!       ExperimentsNormalized: [Object],
ERR!       ExternalItem: [Object],
ERR!       ExternalItemFunctionData: [Object],
ERR!       ExternalItemValue: [Object],
ERR!       Externals: [Object],
ERR!       ExternalsPresets: [Object],
ERR!       ExternalsType: [Object],
ERR!       FileCacheOptions: [Object],
ERR!       Filename: [Object],
ERR!       FilenameTemplate: [Object],
ERR!       FilterItemTypes: [Object],
ERR!       FilterTypes: [Object],
ERR!       GeneratorOptionsByModuleType: [Object],
ERR!       GlobalObject: [Object],
ERR!       HashDigest: [Object],
ERR!       HashDigestLength: [Object],
ERR!       HashFunction: [Object],
ERR!       HashSalt: [Object],
ERR!       HotUpdateChunkFilename: [Object],
ERR!       HotUpdateGlobal: [Object],
ERR!       HotUpdateMainFilename: [Object],
ERR!       HttpUriAllowedUris: [Object],
ERR!       HttpUriOptions: [Object],
ERR!       HttpUriOptionsAllowedUris: [Object],
ERR!       IgnoreWarnings: [Object],
ERR!       IgnoreWarningsNormalized: [Object],
ERR!       Iife: [Object],
ERR!       ImportFunctionName: [Object],
ERR!       ImportMetaName: [Object],
ERR!       InfrastructureLogging: [Object],
ERR!       JavascriptParserOptions: [Object],
ERR!       Layer: [Object],
ERR!       LazyCompilationDefaultBackendOptions: [Object],
ERR!       LazyCompilationOptions: [Object],
ERR!       Library: [Object],
ERR!       LibraryCustomUmdCommentObject: [Object],
ERR!       LibraryCustomUmdObject: [Object],
ERR!       LibraryExport: [Object],
ERR!       LibraryName: [Object],
ERR!       LibraryOptions: [Object],
ERR!       LibraryType: [Object],
ERR!       Loader: [Object],
ERR!       MemoryCacheOptions: [Object],
ERR!       Mode: [Object],
ERR!       ModuleFilterItemTypes: [Object],
ERR!       ModuleFilterTypes: [Object],
ERR!       ModuleOptions: [Object],
ERR!       ModuleOptionsNormalized: [Object],
ERR!       Name: [Object],
ERR!       NoParse: [Object],
ERR!       Node: [Object],
ERR!       NodeOptions: [Object],
ERR!       Optimization: [Object],
ERR!       OptimizationRuntimeChunk: [Object],
ERR!       OptimizationRuntimeChunkNormalized: [Object],
ERR!       OptimizationSplitChunksCacheGroup: [Object],
ERR!       OptimizationSplitChunksGetCacheGroups: [Object],
ERR!       OptimizationSplitChunksOptions: [Object],
ERR!       OptimizationSplitChunksSizes: [Object],
ERR!       Output: [Object],
ERR!       OutputModule: [Object],
ERR!       OutputNormalized: [Object],
ERR!       Parallelism: [Object],
ERR!       ParserOptionsByModuleType: [Object],
ERR!       Path: [Object],
ERR!       Pathinfo: [Object],
ERR!       Performance: [Object],
ERR!       PerformanceOptions: [Object],
ERR!       Plugins: [Object],
ERR!       Profile: [Object],
ERR!       PublicPath: [Object],
ERR!       RawPublicPath: [Object],
ERR!       RecordsInputPath: [Object],
ERR!       RecordsOutputPath: [Object],
ERR!       RecordsPath: [Object],
ERR!       Resolve: [Object],
ERR!       ResolveAlias: [Object],
ERR!       ResolveLoader: [Object],
ERR!       ResolveOptions: [Object],
ERR!       ResolvePluginInstance: [Object],
ERR!       RuleSetCondition: [Object],
ERR!       RuleSetConditionAbsolute: [Object],
ERR!       RuleSetConditionOrConditions: [Object],
ERR!       RuleSetConditionOrConditionsAbsolute: [Object],
ERR!       RuleSetConditions: [Object],
ERR!       RuleSetConditionsAbsolute: [Object],
ERR!       RuleSetLoader: [Object],
ERR!       RuleSetLoaderOptions: [Object],
ERR!       RuleSetLogicalConditions: [Object],
ERR!       RuleSetLogicalConditionsAbsolute: [Object],
ERR!       RuleSetRule: [Object],
ERR!       RuleSetRules: [Object],
ERR!       RuleSetUse: [Object],
ERR!       RuleSetUseItem: [Object],
ERR!       ScriptType: [Object],
ERR!       SnapshotOptions: [Object],
ERR!       SourceMapFilename: [Object],
ERR!       SourcePrefix: [Object],
ERR!       StatsOptions: [Object],
ERR!       StatsValue: [Object],
ERR!       StrictModuleErrorHandling: [Object],
ERR!       StrictModuleExceptionHandling: [Object],
ERR!       Target: [Object],
ERR!       TrustedTypes: [Object],
ERR!       UmdNamedDefine: [Object],
ERR!       UniqueName: [Object],
ERR!       WarningFilterItemTypes: [Object],
ERR!       WarningFilterTypes: [Object],
ERR!       WasmLoading: [Object],
ERR!       WasmLoadingType: [Object],
ERR!       Watch: [Object],
ERR!       WatchOptions: [Object],
ERR!       WebassemblyModuleFilename: [Object],
ERR!       WebpackOptionsNormalized: [Object],
ERR!       WebpackPluginFunction: [Object],
ERR!       WebpackPluginInstance: [Object]
ERR!     },
ERR!     title: 'WebpackOptions',
ERR!     description: 'Options object as provided by the user.',
ERR!     type: 'object',
ERR!     additionalProperties: false,
ERR!     properties: {
ERR!       amd: [Object],
ERR!       bail: [Object],
ERR!       cache: [Object],
ERR!       context: [Object],
ERR!       dependencies: [Object],
ERR!       devServer: [Object],
ERR!       devtool: [Object],
ERR!       entry: [Object],
ERR!       experiments: [Object],
ERR!       externals: [Object],
ERR!       externalsPresets: [Object],
ERR!       externalsType: [Object],
ERR!       ignoreWarnings: [Object],
ERR!       infrastructureLogging: [Object],
ERR!       loader: [Object],
ERR!       mode: [Object],
ERR!       module: [Object],
ERR!       name: [Object],
ERR!       node: [Object],
ERR!       optimization: [Object],
ERR!       output: [Object],
ERR!       parallelism: [Object],
ERR!       performance: [Object],
ERR!       plugins: [Object],
ERR!       profile: [Object],
ERR!       recordsInputPath: [Object],
ERR!       recordsOutputPath: [Object],
ERR!       recordsPath: [Object],
ERR!       resolve: [Object],
ERR!       resolveLoader: [Object],
ERR!       snapshot: [Object],
ERR!       stats: [Object],
ERR!       target: [Object],
ERR!       watch: [Object],
ERR!       watchOptions: [Object]
ERR!     }
ERR!   },
ERR!   headerName: 'Webpack',
ERR!   baseDataPath: 'configuration',
ERR!   postFormatter: [Function: postFormatter]
ERR! }

	# order of steps is important, storybook needs to be built first as
	# it goes into web/public/storybook which then gets built and put into
	# web/dist
	command = "yarn rw sb --build --no-open && yarn rw deploy netlify --no-prisma --no-data-migrate"

	generated.play = async ({ canvasElement }) => {
	const canvas = within(canvasElement)
	userEvent.type(await canvas.findByTestId('name'), 'comment name')
	userEvent.type(await canvas.findByTestId('body'), 'comment body')
	expect(canvas.getByDisplayValue('comment name')).toBeInTheDocument()
	expect(canvas.getByDisplayValue('comment body')).toBeInTheDocument()
	userEvent.click(canvas.getByTestId('submit'))
	}

	import { addons } from '@storybook/addons'
	import RedwoodTheme from './redwood.storybook.theme'

	addons.setConfig({
	theme: RedwoodTheme,
	})

	import { create } from '@storybook/theming'

	/**
	* FIXME: hack to get this working locally and on netlify
	*/
	const brandImagePrefix =
	// eslint-disable-next-line no-undef
	process.env.NODE_ENV.toLowerCase() === 'production' ? '..' : '.'

	export default create({
	base: 'light',
	colorPrimary: '#bf4722',
	colorSecondary: '#341309',
	barSelectedColor: '#faeae5',
	textColor: '#682712',
	appBg: '#faeae5',
	barBg: '#bf4722',
	barTextColor: '#f3c7ba',
	appContentBg: '#faeae5',
	textMutedColor: '#341309',
	appBorderColor: '#faeae5',
	textInverseColor: '#faeae5',
	fontBase:
	'Open Sans,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif',
	brandTitle: 'RedwoodJS',
	brandUrl: 'https://redwoodjs.com/',
	appBorderRadius: 16,
	brandImage: `${brandImagePrefix}/diecut.svg`,
	})

	import { Meta } from '@storybook/addon-docs'
	import Code from './assets/code-brackets.svg'
	import Colors from './assets/colors.svg'
	import Comments from './assets/comments.svg'
	import Direction from './assets/direction.svg'
	import Flow from './assets/flow.svg'
	import Plugin from './assets/plugin.svg'
	import Repo from './assets/repo.svg'
	import StackAlt from './assets/stackalt.svg'

	<Meta title="Example/Introduction" />

	<style>{`
	.subheading {
	--mediumdark: '#999999';
	font-weight: 900;
	font-size: 13px;
	color: #999;
	letter-spacing: 6px;
	line-height: 24px;
	text-transform: uppercase;
	margin-bottom: 12px;
	margin-top: 40px;
	}

	.link-list {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 1fr;
	row-gap: 10px;
	}

	@media (min-width: 620px) {
	.link-list {
	row-gap: 20px;
	column-gap: 20px;
	grid-template-columns: 1fr 1fr;
	}
	}

	@media all and (-ms-high-contrast:none) {
	.link-list {
	display: -ms-grid;
	-ms-grid-columns: 1fr 1fr;
	-ms-grid-rows: 1fr 1fr;
	}
	}

	.link-item {
	display: block;
	padding: 20px 30px 20px 15px;
	border: 1px solid #00000010;
	border-radius: 5px;
	transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
	color: #333333;
	display: flex;
	align-items: flex-start;
	}

	.link-item:hover {
	border-color: #1EA7FD50;
	transform: translate3d(0, -3px, 0);
	box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
	}

	.link-item:active {
	border-color: #1EA7FD;
	transform: translate3d(0, 0, 0);
	}

	.link-item strong {
	font-weight: 700;
	display: block;
	margin-bottom: 2px;
	}

	.link-item img {
	height: 40px;
	width: 40px;
	margin-right: 15px;
	flex: none;
	}

	.link-item span {
	font-size: 14px;
	line-height: 20px;
	}

	.tip {
	display: inline-block;
	border-radius: 1em;
	font-size: 11px;
	line-height: 12px;
	font-weight: 700;
	background: #E7FDD8;
	color: #66BF3C;
	padding: 4px 12px;
	margin-right: 10px;
	vertical-align: top;
	}

	.tip-wrapper {
	font-size: 13px;
	line-height: 20px;
	margin-top: 40px;
	margin-bottom: 40px;
	}

	.tip-wrapper code {
	font-size: 12px;
	display: inline-block;
	}

	.header-images {
	display: inline;
	}


	`}</style>

	# Welcome to Redwood <img src="https://avatars2.githubusercontent.com/u/45050444?v=4" width="50" class="header-images" /> & Storybook <img src="https://avatars.githubusercontent.com/u/22632046?v=4" width="50" class="header-images" />

	Redwood is an opinionated, full-stack, JavaScript/TypeScript web application framework designed
	to keep you moving fast as your app grows from side project to startup.

	Storybook helps you build UI components in isolation from your app's business logic, data, and context.
	That makes it easy to develop hard-to-reach states. Save these UI states as stories to revisit during development, testing, or QA.

	Browse example stories now by navigating to them in the sidebar.
	View their code in the `src/stories` directory to learn how they work.
	We recommend building UIs with a [component-driven](https://componentdriven.org) process starting with atomic components and ending with pages.

	<div className="subheading">Configure</div>

	<div className="link-list">
	<a
	className="link-item"
	href="https://storybook.js.org/docs/react/addons/addon-types"
	target="_blank"
	>
	<img src={Plugin} alt="plugin" />
	<span>
	<strong>Presets for popular tools</strong>
	Easy setup for TypeScript, SCSS and more.
	</span>
	</a>
	<a
	className="link-item"
	href="https://storybook.js.org/docs/react/configure/webpack"
	target="_blank"
	>
	<img src={StackAlt} alt="Build" />
	<span>
	<strong>Build configuration</strong>
	How to customize webpack and Babel
	</span>
	</a>
	<a
	className="link-item"
	href="https://storybook.js.org/docs/react/configure/styling-and-css"
	target="_blank"
	>
	<img src={Colors} alt="colors" />
	<span>
	<strong>Styling</strong>
	How to load and configure CSS libraries
	</span>
	</a>
	<a
	className="link-item"
	href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
	target="_blank"
	>
	<img src={Flow} alt="flow" />
	<span>
	<strong>Data</strong>
	Providers and mocking for data libraries
	</span>
	</a>
	</div>

	<div className="subheading">Learn</div>

	<div className="link-list">
	<a
	className="link-item"
	href="https://redwoodjs.com/docs/storybook"
	target="_blank"
	>
	<img src={Repo} alt="repo" />
	<span>
	<strong>Redwood's Storybook documentation</strong>
	Getting started and configuring
	</span>
	</a>
	<a className="link-item" href="https://storybook.js.org/docs" target="_blank">
	<img src={Repo} alt="repo" />
	<span>
	<strong>Storybook documentation</strong>
	Configure, customize, and extend
	</span>
	</a>
	<a
	className="link-item"
	href="https://storybook.js.org/tutorials/"
	target="_blank"
	>
	<img src={Direction} alt="direction" />
	<span>
	<strong>In-depth guides</strong>
	Best practices from leading teams
	</span>
	</a>
	<a
	className="link-item"
	href="https://github.com/storybookjs/storybook"
	target="_blank"
	>
	<img src={Code} alt="code" />
	<span>
	<strong>GitHub project</strong>
	View the source and add issues
	</span>
	</a>
	<a className="link-item" href="https://discord.gg/storybook" target="_blank">
	<img src={Comments} alt="comments" />
	<span>
	<strong>Discord chat</strong>
	Chat with maintainers and the community
	</span>
	</a>
	</div>

	<div className="tip-wrapper">
	<span className="tip">Tip</span>Edit this Markdown in{' '}
	<code>web/src/stories/Introduction.stories.mdx</code>
	</div>

	# To learn about this file, please see https://www.gitpod.io/docs/references/gitpod-yml

	# NOTE: Use Gitod's PostgreSQL image once https://github.com/gitpod-io/workspace-images/issues/705 is fixed
	#image: gitpod/workspace-postgres
	image:
	file: .gitpod.Dockerfile

	tasks:
	- init: \|
	createdb dev
	yarn install
	cp .env.defaults .env
	echo "SESSION_SECRET=$(yarn rw g secret \| sed '2q;d' \| xargs)" >> .env
	yarn rw prisma migrate dev
	command: yarn rw sb

	ports:
	- port: 5432
	name: PostgreSQL database
	onOpen: ignore
	- port: 5555
	name: Prisma Studio
	onOpen: open-browser
	- port: 7910
	name: Storybook
	onOpen: open-browser
	- port: 8910
	name: RedoodJS web application
	onOpen: open-browser
	- port: 8911
	name: Serverless functions
	onOpen: ignore

	vscode:
	extensions:
	- "dbaeumer.vscode-eslint"
	- "eamodio.gitlens"
	# - "ofhumanbondage.react-proptypes-intellisense" - Not published to Open VSX (yet)
	- "mgmcdermott.vscode-language-babel"
	- "wix.vscode-import-cost"
	- "pflannery.vscode-versionlens"
	- "editorconfig.editorconfig"
	- "prisma.prisma"
	- "graphql.vscode-graphql"

	FROM gitpod/workspace-full:latest

	# Dazzle does not rebuild a layer until one of its lines are changed. Increase this counter to rebuild this layer.
	ENV TRIGGER_REBUILD=2
	ENV PGWORKSPACE="/workspace/.pgsql"
	ENV PGDATA="$PGWORKSPACE/data"

	# Install PostgreSQL
	RUN sudo install-packages postgresql-12 postgresql-contrib-12

	# Setup PostgreSQL server for user gitpod
	ENV PATH="/usr/lib/postgresql/12/bin:$PATH"

	SHELL ["/usr/bin/bash", "-c"]
	RUN PGDATA="${PGDATA//\/workspace/$HOME}" \
	&& mkdir -p ~/.pg_ctl/bin ~/.pg_ctl/sockets $PGDATA \
	&& initdb -D $PGDATA \
	&& printf '#!/bin/bash\npg_ctl -D $PGDATA -l ~/.pg_ctl/log -o "-k ~/.pg_ctl/sockets" start\n' > ~/.pg_ctl/bin/pg_start \
	&& printf '#!/bin/bash\npg_ctl -D $PGDATA -l ~/.pg_ctl/log -o "-k ~/.pg_ctl/sockets" stop\n' > ~/.pg_ctl/bin/pg_stop \
	&& chmod +x ~/.pg_ctl/bin/* \
	&& printf '%s\n' '# Auto-start PostgreSQL server' \
	"test ! -e \$PGWORKSPACE && mkdir -p /workspace && test -e ${PGDATA%/data} && mv ${PGDATA%/data} /workspace" \
	# Making the /workspace dir just to make sure it doesnt fail in docker env in case
	'[[ $(pg_ctl status \| grep PID) ]] \|\| pg_start > /dev/null' > ~/.bashrc.d/200-postgresql-launch
	ENV PATH="$HOME/.pg_ctl/bin:$PATH"
	ENV PGHOSTADDR="127.0.0.1"
	ENV PGDATABASE="postgres"

	USER gitpod

	services:
	# Label used to access the service container
	postgres:
	# Docker Hub image
	image: postgres@sha256:1cb07b811f2ec7b7bf3c42fc3dc19c1b5e87775eee88c2b1a8793420c4de0781
	# Provide the password for postgres
	env:
	POSTGRES_PASSWORD: postgres
	# Set health checks to wait until postgres has started
	options: >-
	--health-cmd pg_isready
	--health-interval 10s
	--health-timeout 5s
	--health-retries 5
	ports:
	# Maps tcp port 5432 on service container to the host
	- 5432:5432