rsnext/examples/with-storybook-styled-jsx-scss/stories/Page.stories.tsx
Justin Philpott 2a4887c30a
New example: /with-storybook-styled-jsx-scss (#18570)
Hi, 

I'm submitting this PR for consideration as a new example app showing Styled JSX with SCSS working inside and outside storybook with example components.

Only known issue: I noticed that when running this example with:

`$ yarn next ./examples/with-storybook-styled-jsx-scss`

I receive the following error:

```
error - ./pages/_app.js
Error: [BABEL] .../next.js/examples/with-storybook-styled-jsx-scss/pages/_app.js: Cannot find module 'styled-jsx-plugin-sass' (While processing: ".../next.js/node_modules/next/babel.js")
```

However I notice that this same missing module error is triggered when running this existing example app "with-styled-jsx-scss".

Any changes/tweaks needed?

Thanks!
2021-01-04 20:46:34 +00:00

23 lines
607 B
TypeScript

import React from 'react'
// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
import { Story, Meta } from '@storybook/react/types-6-0'
import { Page, PageProps } from '../components/Page'
import * as HeaderStories from './Header.stories'
export default {
title: 'Example/Page',
component: Page,
} as Meta
const Template: Story<PageProps> = (args) => <Page {...args} />
export const LoggedIn = Template.bind({})
LoggedIn.args = {
...HeaderStories.LoggedIn.args,
}
export const LoggedOut = Template.bind({})
LoggedOut.args = {
...HeaderStories.LoggedOut.args,
}