New example: /with-storybook-styled-jsx-scss

examples/with-storybook-styled-jsx-scss/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "next/babel",
+      {
+        "styled-jsx": {
+          "plugins": ["styled-jsx-plugin-sass"]
+        }
+      }
+    ]
+  ]
+}

examples/with-storybook-styled-jsx-scss/.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

examples/with-storybook-styled-jsx-scss/.storybook/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "next/babel",
+      {
+        "styled-jsx": {
+          "plugins": ["styled-jsx-plugin-sass"]
+        }
+      }
+    ]
+  ]
+}

examples/with-storybook-styled-jsx-scss/.storybook/main.js

@@ -0,0 +1,7 @@
+module.exports = {
+  stories: [
+    '../stories/**/*.stories.mdx',
+    '../stories/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+}

examples/with-storybook-styled-jsx-scss/.storybook/preview.js

@@ -0,0 +1,3 @@
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+}

examples/with-storybook-styled-jsx-scss/README.md

@@ -0,0 +1,29 @@
+# Example app with Storybook setup for SCSS in Styled-jsx
+
+This example shows Styled-jsx (with SCSS) working for components written in TypeScript rendered both inside and outside of Storybook.
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com/now):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/next.js/tree/canary/examples/with-storybook-styled-jsx-scss)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-storybook-styled-jsx-scss with-storybook-styled-jsx-scss-app
+# or
+yarn create next-app --example with-storybook-styled-jsx-scss with-storybook-styled-jsx-scss-app
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
+
+## Notes
+
+This example combines the following examples, with some required extra config added:
+
+- [with-storybook](https://github.com/vercel/next.js/tree/canary/examples/with-storybook)
+- [with-styled-jsx-scss](https://github.com/vercel/next.js/tree/canary/examples/with-styled-jsx-scss)
+- [with-typescript](https://github.com/vercel/next.js/tree/canary/examples/with-typescript)

examples/with-storybook-styled-jsx-scss/components/Button.tsx

@@ -0,0 +1,86 @@
+import React from 'react'
+
+export interface ButtonProps {
+  /**
+   * Is this the principal call to action on the page?
+   */
+  primary?: boolean
+  /**
+   * What background color to use
+   */
+  backgroundColor?: string
+  /**
+   * How large should the button be?
+   */
+  size?: 'small' | 'medium' | 'large'
+  /**
+   * Button contents
+   */
+  label: string
+  /**
+   * Optional click handler
+   */
+  onClick?: () => void
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Button: React.FC<ButtonProps> = ({
+  primary = false,
+  size = 'medium',
+  backgroundColor,
+  label,
+  ...props
+}) => {
+  const mode = primary
+    ? 'storybook-button--primary'
+    : 'storybook-button--secondary'
+  return (
+    <>
+      <button
+        type="button"
+        className={['storybook-button', `storybook-button--${size}`, mode].join(
+          ' '
+        )}
+        style={{ backgroundColor }}
+        {...props}
+      >
+        {label}
+      </button>
+      <style jsx>{`
+        .storybook-button {
+          font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial,
+            sans-serif;
+          font-weight: 700;
+          border: 0;
+          border-radius: 3em;
+          cursor: pointer;
+          display: inline-block;
+          line-height: 1;
+        }
+        .storybook-button--primary {
+          color: white;
+          background-color: #1ea7fd;
+        }
+        .storybook-button--secondary {
+          color: #333;
+          background-color: transparent;
+          box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+        }
+        .storybook-button--small {
+          font-size: 12px;
+          padding: 10px 16px;
+        }
+        .storybook-button--medium {
+          font-size: 14px;
+          padding: 11px 20px;
+        }
+        .storybook-button--large {
+          font-size: 16px;
+          padding: 12px 24px;
+        }
+      `}</style>
+    </>
+  )
+}

examples/with-storybook-styled-jsx-scss/components/Header.tsx

@@ -0,0 +1,89 @@
+import React from 'react'
+
+import { Button } from './Button'
+
+export interface HeaderProps {
+  user?: {}
+  onLogin: () => void
+  onLogout: () => void
+  onCreateAccount: () => void
+}
+
+export const Header: React.FC<HeaderProps> = ({
+  user,
+  onLogin,
+  onLogout,
+  onCreateAccount,
+}) => (
+  <>
+    <header>
+      <div className="wrapper">
+        <div>
+          <svg
+            width="32"
+            height="32"
+            viewBox="0 0 32 32"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g fill="none" fillRule="evenodd">
+              <path
+                d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+                fill="#FFF"
+              />
+              <path
+                d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
+                fill="#555AB9"
+              />
+              <path
+                d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
+                fill="#91BAF8"
+              />
+            </g>
+          </svg>
+          <h1>Acme</h1>
+        </div>
+        <div>
+          {user ? (
+            <Button size="small" onClick={onLogout} label="Log out" />
+          ) : (
+            <>
+              <Button size="small" onClick={onLogin} label="Log in" />
+              <Button
+                primary
+                size="small"
+                onClick={onCreateAccount}
+                label="Sign up"
+              />
+            </>
+          )}
+        </div>
+      </div>
+    </header>
+    <style jsx>{`
+      .wrapper {
+        font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial,
+          sans-serif;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        padding: 15px 20px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      svg {
+        display: inline-block;
+        vertical-align: top;
+      }
+      h1 {
+        font-weight: 900;
+        font-size: 20px;
+        line-height: 1;
+        margin: 6px 0 6px 10px;
+        display: inline-block;
+        vertical-align: top;
+      }
+      button + button {
+        margin-left: 10px;
+      }
+    `}</style>
+  </>
+)