Patches provider

.storybook/main.ts

@@ -1,5 +1,5 @@
 const path = require("path");
-const toPath = (_path) => path.join(process.cwd(), _path);
+const toPath = (_path: string) => path.join(process.cwd(), _path);
 
 module.exports = {
   reactOptions: {
@@ -20,19 +20,7 @@ module.exports = {
     "@storybook/addon-toolbars",
     "@storybook/addon-viewport",
   ],
-  webpackFinal: async (config) => {
-    config.module.rules[0].use[0].options.presets = [
-      [
-        require.resolve("@babel/preset-react"),
-        {
-          runtime: "automatic",
-          importSource: "@emotion/react",
-        },
-      ],
-      require.resolve("@babel/preset-env"),
-      require.resolve("@emotion/babel-preset-css-prop"), // <= add this preset
-    ];
-
+  webpackFinal: async (config: any) => {
     return {
       ...config,
       resolve: {

.storybook/preview.tsx

@@ -1,8 +1,7 @@
 import { addParameters } from "@storybook/react";
-
-import withTheme from "./utils/theme-decorator";
-import { sortStories } from "./utils/story-helpers";
 import * as themes from "../src/themes";
+import withPatches from "./utils/patches-decorator";
+import { sortStories } from "./utils/story-helpers";
 
 // Add group and story names to the sort order to explicitly order them.
 // Items that are not included in the list are shown below the sorted items.
@@ -60,7 +59,7 @@ export const parameters = {
   },
 };
 
-export const decorators = [withTheme];
+export const decorators = [withPatches];
 
 addParameters({
   a11y: {},

.storybook/utils/theme-decorator.tsx → .storybook/utils/patches-decorator.tsx

@@ -1,18 +1,18 @@
-import React, { useEffect } from "react";
+import { css, Global, Theme } from "@emotion/react";
 import { Story, StoryContext } from "@storybook/react";
-import { Global, css, Theme } from "@emotion/react";
-import { ThemeProvider } from "../../src/ThemeProvider";
-import * as themes from "../../src/themes";
+import React from "react";
 import { Box } from "../../src/Box";
 import { Card } from "../../src/Card";
 import { CardContent } from "../../src/CardContent";
+import { PatchesProvider } from "../../src/PatchesProvider";
+import * as themes from "../../src/themes";
 
 export default (Story: Story, context?: StoryContext) => {
-  const selectedTheme = themes[context.globals.theme] as Theme;
-  const background = context.globals.backgrounds;
+  const selectedTheme = themes[context?.globals.theme] as Theme;
+  const background = context?.globals.backgrounds;
 
   return (
-    <ThemeProvider theme={selectedTheme}>
+    <PatchesProvider theme={selectedTheme}>
       <Global
         styles={css`
           @import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap");
@@ -40,6 +40,6 @@ export default (Story: Story, context?: StoryContext) => {
           </Card>
         </Box>
       )}
-    </ThemeProvider>
+    </PatchesProvider>
   );
 };

babel.config.json

@@ -0,0 +1,15 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic",
+        "importSource": "@emotion/react"
+      }
+    ],
+    "@babel/preset-typescript",
+    "@emotion/babel-preset-css-prop"
+  ],
+  "plugins": ["@babel/plugin-transform-runtime"]
+}

docs/introduction/design-system.stories.mdx

@@ -1,5 +1,4 @@
 import { Meta, Story } from "@storybook/addon-docs/blocks";
-import { ThemeProvider } from "../../.storybook/utils/theme-decorator";
 import { Theme } from "../../.storybook/components/Theme";
 
 <Meta title="Introduction/Design System" />

package.json

@@ -47,6 +47,7 @@
     "react-markdown": "^5.0.3",
     "react-modal": "^3.12.1",
     "react-syntax-highlighter": "^15.4.3",
+    "react-tabs": "^3.2.1",
     "remark-gfm": "^1.0.0",
     "styled-system": "^5.1.5"
   },
@@ -85,9 +86,9 @@
     "@types/react": "17.0.3"
   },
   "devDependencies": {
-    "@auto-it/all-contributors": "10.18.9",
-    "@auto-it/conventional-commits": "10.18.9",
-    "@auto-it/first-time-contributor": "10.18.9",
+    "@auto-it/all-contributors": "10.24.1",
+    "@auto-it/conventional-commits": "10.24.1",
+    "@auto-it/first-time-contributor": "10.24.1",
     "@babel/core": "7.13.14",
     "@babel/plugin-transform-runtime": "7.13.10",
     "@babel/preset-env": "7.13.12",
@@ -115,7 +116,7 @@
     "@testing-library/jest-dom": "5.11.10",
     "@testing-library/react": "11.2.6",
     "@testing-library/react-hooks": "5.1.1",
-    "@testing-library/user-event": "12.8.3",
+    "@testing-library/user-event": "13.1.1",
     "@types/codemirror": "0.0.108",
     "@types/facepaint": "1.2.1",
     "@types/jest": "26.0.22",
@@ -124,9 +125,10 @@
     "@types/react": "17.0.3",
     "@types/react-dom": "17.0.3",
     "@types/react-modal": "3.12.0",
+    "@types/react-tabs": "^2.3.2",
     "@types/styled-system": "5.1.11",
     "@types/styled-system__css": "5.0.15",
-    "auto": "10.18.9",
+    "auto": "10.24.1",
     "babel-jest": "26.6.3",
     "babel-loader": "8.2.2",
     "chromatic": "5.7.1",
@@ -146,7 +148,7 @@
     "react-is": "17.0.2",
     "react-test-renderer": "17.0.2",
     "rimraf": "3.0.2",
-    "type-fest": "0.21.3",
+    "type-fest": "1.0.1",
     "typescript": "4.2.3",
     "webpack": "5.30.0"
   },

src/ButtonOutline.tsx

@@ -1,11 +1,11 @@
 import styled from "@emotion/styled";
-import { ButtonHTMLAttributes, Ref } from "react";
+import { ButtonHTMLAttributes, ReactNode, Ref } from "react";
 import { Button, ButtonProps } from "./Button";
 import { variant } from "./system";
 import { SystemColor, SystemColorNames } from "./system/types";
 
 export type ButtonOutlineProps = {
-  children: string;
+  children: ReactNode;
   tone?: SystemColorNames;
   ref?: Ref<HTMLButtonElement>;
 } & ButtonHTMLAttributes<HTMLButtonElement> &

src/ButtonOutlineLink.stories.tsx

@@ -0,0 +1,19 @@
+import { Meta, Story } from "@storybook/react/types-6-0";
+import { ButtonOutlineLink, ButtonOutlineLinkProps } from "./ButtonOutlineLink";
+
+export default {
+  title: "Components/ButtonOutlineLink",
+  component: ButtonOutlineLink,
+  argTypes: {},
+} as Meta;
+
+const Template: Story<ButtonOutlineLinkProps> = (args) => (
+  <ButtonOutlineLink {...args}>A Link</ButtonOutlineLink>
+);
+
+export const Default = Template.bind({
+  href: "/",
+});
+Default.args = {
+  href: "/",
+};

src/ButtonOutlineLink.test.tsx

@@ -0,0 +1,19 @@
+import { render } from "@testing-library/react";
+import { ButtonOutlineLink, ButtonOutlineLinkProps } from "./ButtonOutlineLink";
+import { ThemeProvider } from "./ThemeProvider";
+
+const renderWithTheme = (props?: ButtonOutlineLinkProps) =>
+  render(
+    <ThemeProvider>
+      <ButtonOutlineLink {...props} />
+    </ThemeProvider>
+  );
+
+test("should render", () => {
+  renderWithTheme();
+});
+
+test("should match snapshot", () => {
+  const { container } = renderWithTheme();
+  expect(container).toMatchSnapshot();
+});

src/ButtonOutlineLink.tsx

@@ -0,0 +1,68 @@
+import { css } from "@emotion/react";
+import { forwardRef, ReactNode } from "react";
+import { ButtonOutline, ButtonOutlineProps } from "./ButtonOutline";
+import { useLinkComponent } from "./hooks";
+import { LinkComponentProps } from "./LinkComponentProvider";
+
+export type ButtonOutlineLinkProps = {
+  children?: ReactNode;
+} & LinkComponentProps &
+  Omit<ButtonOutlineProps, "ref">;
+
+export const ButtonOutlineLink = forwardRef<
+  HTMLAnchorElement,
+  ButtonOutlineLinkProps
+>(
+  (
+    {
+      children,
+      tone,
+      iconLeft,
+      iconRight,
+      size,
+      disabled,
+      type,
+      fullWidth,
+      loading,
+      ...props
+    },
+    ref
+  ) => {
+    const LinkComponent = useLinkComponent(ref);
+    return (
+      <ButtonOutline
+        tone={tone}
+        iconLeft={iconLeft}
+        iconRight={iconRight}
+        size={size}
+        disabled={disabled}
+        type={type}
+        fullWidth={fullWidth}
+        loading={loading}
+      >
+        <LinkComponent
+          css={css`
+            &,
+            &:visited,
+            &:hover,
+            &:active {
+              font-style: inherit;
+              color: inherit;
+              background-color: transparent;
+              font-size: inherit;
+              text-decoration: none;
+              font-variant: inherit;
+              font-weight: inherit;
+              line-height: inherit;
+              font-family: inherit;
+            }
+          `}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </LinkComponent>
+      </ButtonOutline>
+    );
+  }
+);

src/ButtonPrimary.tsx

@@ -1,11 +1,11 @@
 import styled from "@emotion/styled";
-import { ButtonHTMLAttributes, Ref } from "react";
+import { ButtonHTMLAttributes, ReactNode, Ref } from "react";
 import { Button, ButtonProps } from "./Button";
 import { variant } from "./system";
 import { SystemColor, SystemColorNames } from "./system/types";
 
 export type ButtonPrimaryProps = {
-  children: string;
+  children: ReactNode;
   tone?: SystemColorNames;
   ref?: Ref<HTMLButtonElement>;
 } & ButtonHTMLAttributes<HTMLButtonElement> &

src/ButtonPrimaryLink.stories.tsx

@@ -0,0 +1,17 @@
+import { Meta, Story } from "@storybook/react/types-6-0";
+import { ButtonPrimaryLink, ButtonPrimaryLinkProps } from "./ButtonPrimaryLink";
+
+export default {
+  title: "Components/ButtonPrimaryLink",
+  component: ButtonPrimaryLink,
+  argTypes: {},
+} as Meta;
+
+const Template: Story<ButtonPrimaryLinkProps> = (args) => (
+  <ButtonPrimaryLink {...args}>A Link</ButtonPrimaryLink>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  href: "/",
+};

src/ButtonPrimaryLink.test.tsx

@@ -0,0 +1,19 @@
+import { render } from "@testing-library/react";
+import { ButtonPrimaryLink, ButtonPrimaryLinkProps } from "./ButtonPrimaryLink";
+import { ThemeProvider } from "./ThemeProvider";
+
+const renderWithTheme = (props?: ButtonPrimaryLinkProps) =>
+  render(
+    <ThemeProvider>
+      <ButtonPrimaryLink {...props} />
+    </ThemeProvider>
+  );
+
+test("should render", () => {
+  renderWithTheme();
+});
+
+test("should match snapshot", () => {
+  const { container } = renderWithTheme();
+  expect(container).toMatchSnapshot();
+});