chore: update to storybook v6

.storybook/.babelrc

@@ -0,0 +1,35 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "ie": "11",
+          "edge": "17",
+          "firefox": "60",
+          "chrome": "67",
+          "safari": "11.1"
+        }
+      }
+    ],
+    "@babel/preset-react",
+    "@babel/preset-typescript",
+    [
+      "@emotion/babel-preset-css-prop",
+      {
+        "sourceMap": "true",
+        "autoLabel": "true",
+        "labelFormat": "[local]",
+        "cssPropOptimization": "false"
+      }
+    ]
+  ],
+  "plugins": [
+    "macros",
+    ["@babel/proposal-class-properties", {"loose": true}],
+    "@babel/proposal-object-rest-spread",
+    ["@babel/proposal-private-methods", {"loose": true}],
+    ["@babel/proposal-private-property-in-object", {"loose": true}],
+    "@babel/plugin-transform-runtime"
+  ]
+}

.storybook/main.js

@@ -0,0 +1,27 @@
+module.exports = {
+  stories: ['../packages/**/*.stories.mdx', '../packages/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-a11y',
+    '@storybook/addon-knobs',
+    '@storybook/addon-actions',
+    '@storybook/addon-viewport',
+    'storybook-addon-performance',
+  ],
+  typescript: {
+    // enable type checking
+    check: true,
+    checkOptions: {
+      // check all ts and tsx files, but not fixtures as they include errors on purpose
+      reportFiles: ['packages/**/*.{ts,tsx}', '!**/__testfixtures__/**/*', '!**/__fixtures__/**/*'],
+    },
+    // choose react-docgen-typescript to generate the prop tables
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      // don't include node_module props as you'll cause the machine to run out of memory on our repo
+      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
+    },
+  },
+};

.storybook/preview-head.html

@@ -71,6 +71,30 @@
     font-weight: 700;
     font-style: normal;
   }
+
+  /**
+   * Colfax font family
+   */
+  @font-face {
+    font-family: Colfax;
+    font-style: normal;
+    font-weight: 300;
+    src: url(/fonts/colfax-light.woff2) format('woff2'), url(/fonts/colfax-light.woff) format('woff');
+  }
+
+  @font-face {
+    font-family: Colfax;
+    font-style: normal;
+    font-weight: 400;
+    src: url(/fonts/colfax-regular.woff2) format('woff2'), url(/fonts/colfax-regular.woff) format('woff');
+  }
+
+  @font-face {
+    font-family: Colfax;
+    font-style: normal;
+    font-weight: 600;
+    src: url(/fonts/colfax-medium.woff2) format('woff2'), url(/fonts/colfax-medium.woff) format('woff');
+  }
 </style>
 
 <link rel="preconnect" href="https://assets.twilio.com" crossorigin />

.storybook/preview.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import {INITIAL_VIEWPORTS} from '@storybook/addon-viewport';
+import {withPerformance} from 'storybook-addon-performance';
+import {Theme} from '@twilio-paste/theme';
+import {Box} from '@twilio-paste/box';
+
+export const globalTypes = {
+  theme: {
+    name: 'Paste Theme',
+    description: 'Global theme for components',
+    defaultValue: 'default',
+    toolbar: {
+      // All available icons
+      // https://github.com/storybookjs/storybook/blob/master/lib/components/src/icon/icons.tsx
+      icon: 'paintbrush',
+      // array of plain string values or MenuItem shape (see below)
+      items: ['sendgrid', 'console', 'default'],
+    },
+  },
+};
+
+export const decorators = [
+  (Story, context) => {
+    const theme = context.globals.theme;
+    return (
+      <Theme.Provider theme={theme}>
+        <Box padding="space40">
+          <Story />
+        </Box>
+      </Theme.Provider>
+    );
+  },
+  withPerformance,
+];
+
+export const parameters = {
+  actions: {argTypesRegex: '^on[A-Z].*'},
+  viewport: {
+    viewports: INITIAL_VIEWPORTS,
+  },
+};

@types/index.d.ts

@@ -2,3 +2,4 @@ declare module '*.md' {
   const value: string;
   export default value;
 }
+declare module '*.png'

babel.config.js

@@ -1,4 +1,4 @@
-const getPresets = isDev => [
+const getPresets = (isDev) => [
   [
     '@babel/preset-env',
     {
@@ -29,6 +29,8 @@ const BASE_PLUGINS = [
   'macros',
   '@babel/proposal-class-properties',
   '@babel/proposal-object-rest-spread',
+  '@babel/proposal-private-methods',
+  '@babel/proposal-private-property-in-object',
   '@babel/plugin-transform-runtime',
 ];