Init

.gitignore

@@ -1,3 +1,4 @@
+storybook-static
 *.log
 .vscode
 .env

.plop-templates/component.hbs

@@ -1,15 +1,16 @@
 /** @jsx jsx */
 import { ReactNode } from "react";
 import { jsx, css } from '@emotion/core';
+import { Box } from "./Box"
 
 export type {{properCase name}}Props = {
     children?: ReactNode;
 }
 
 export const {{properCase name}} = ({ children }: {{properCase name}}Props) => {
    return (
-     <div>
+     <Box>
         {children}
-     </div>
+     </Box>
    );
-}
+};

.plop-templates/component.index.hbs

@@ -0,0 +1 @@
+export { {{ properCase name }}, {{ properCase name }}Props } from "./{{ properCase name }}";

.plop-templates/component.test.hbs

@@ -1,12 +1,11 @@
 import React from "react";
 import { render } from "@testing-library/react";
 import { {{ properCase name }}, {{ properCase name }}Props } from "./{{ properCase name }}";
-import ThemeProvider from "./themes/ThemeProvider";
-import base from "./themes/base";
+import { ThemeProvider } from "./ThemeProvider";
 
 const renderWithTheme = (props?: {{ properCase name }}Props) =>
 render(
-    <ThemeProvider theme={base}>
+    <ThemeProvider>
         <{{ properCase name }} {...props} />
     </ThemeProvider>
 );

.plop-templates/hook.hbs

@@ -0,0 +1,10 @@
+import { useState, useEffect } from "react";
+
+export type {{ camelCase name }}Props = {};
+
+export const {{ camelCase name }} = ({} : {{ camelCase name }}Props) => {
+    const [value, setValue] = useState();
+    useEffect(() => {}, []);
+
+    return [value, setValue];
+}

.plop-templates/hook.index.hbs

@@ -0,0 +1 @@
+export { {{ camelCase name }} } from "./{{ camelCase name }}";

.plop-templates/hook.stories.hbs

@@ -0,0 +1,11 @@
+import { Meta } from "@storybook/addon-docs/blocks";
+
+<Meta title="Hooks/{{ camelCase name }}" />
+
+# Usage
+
+```ts
+import { {{ camelCase name }} } from "@openpatch/patches/hooks";
+
+const value = {{ camelCase name }}();
+```

.plop-templates/hook.test.hbs

@@ -0,0 +1,20 @@
+import React, { ReactNode } from "react";
+import { renderHook, act } from "@testing-library/react-hooks";
+import { ThemeProvider } from "../ThemeProvider";
+import { {{ camelCase name }} } from "./{{ camelCase name }}";
+
+const wrapper = ({ children }: { children: ReactNode }) => (
+  <ThemeProvider>{children}</ThemeProvider>
+);
+
+test("base", () => {
+  const { result } = renderHook(() => {{ camelCase name }}(), {
+    wrapper,
+  });
+
+  act(() => {
+    result.current[1]("test");
+  })
+
+  expect(result.current[0]).toEqual("test");
+})

.plop-templates/recipe.stories.hbs

@@ -0,0 +1,13 @@
+import { ThemeProvider } from "../../ThemeProvider";
+
+# {{ titleCase name }}
+
+```tsx
+<ThemeProvider>
+  <Global
+    styles={css`
+      @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Proza+Libre:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap");
+    `}
+  />
+</ThemeProvider>
+```

.storybook/components/BaseColors.tsx

@@ -0,0 +1,29 @@
+/** @jsx jsx */
+import { jsx, css } from "@emotion/core";
+import { Source } from "@storybook/components";
+import { AutoGrid } from "../../src/AutoGrid";
+import { useTheme } from "../../src/hooks";
+import { ColorSwatch } from "./ColorSwatch";
+
+export const BaseColors = () => {
+  const [{ baseColors }] = useTheme();
+  return (
+    <div>
+      <Source
+        language="ts"
+        code={`
+      theme.baseColors[key];
+      `}
+      />
+      <AutoGrid minChildWidth="90px" gap="16">
+        {Object.keys(baseColors).map((baseColor) => (
+          <ColorSwatch
+            name={baseColor}
+            key={baseColor}
+            color={baseColors[baseColor]}
+          />
+        ))}
+      </AutoGrid>
+    </div>
+  );
+};

.storybook/components/BorderRadius.tsx

@@ -0,0 +1,8 @@
+/** @jsx jsx */
+import { jsx, css } from "@emotion/core";
+
+export type BorderRadiusProps = {};
+
+export const BorderRadius = ({ ...props }: BorderRadiusProps) => {
+  return <div></div>;
+};

.storybook/components/BorderWidths.tsx

@@ -0,0 +1,8 @@
+/** @jsx jsx */
+import { jsx, css } from "@emotion/core";
+
+export type BorderWidthsProps = {};
+
+export const BorderWidths = ({ ...props }: BorderWidthsProps) => {
+  return <div></div>;
+};

.storybook/components/BoxShadows.tsx

@@ -0,0 +1,8 @@
+/** @jsx jsx */
+import { jsx, css } from "@emotion/core";
+
+export type BoxShadowsProps = {};
+
+export const BoxShadows = ({ ...props }: BoxShadowsProps) => {
+  return <div></div>;
+};

.storybook/components/Breakpoints.tsx

@@ -0,0 +1,8 @@
+/** @jsx jsx */
+import { jsx, css } from "@emotion/core";
+
+export type BreakpointsProps = {};
+
+export const Breakpoints = ({ ...props }: BreakpointsProps) => {
+  return <div></div>;
+};

.storybook/components/ColorSwatch.tsx

@@ -0,0 +1,35 @@
+/** @jsx jsx */
+import { jsx, css } from "@emotion/core";
+import { CSSProperties } from "react";
+import { Box } from "../../src/Box";
+import { Card } from "../../src/Card";
+import { CardContent } from "../../src/CardContent";
+import { Text } from "../../src/Text";
+import { Theme } from "../../src/themes/types";
+
+export type ColorSwatchProps = {
+  name: string;
+  color: CSSProperties["color"];
+};
+
+export const ColorSwatch = ({ name, color, ...props }: ColorSwatchProps) => {
+  return (
+    <Card>
+      <Box
+        borderBottomWidth="standard"
+        borderBottomColor="neutral.100"
+        borderBottomStyle="solid"
+        css={(theme: Theme) => css`
+          background-color: ${color};
+          height: 100px;
+        `}
+      ></Box>
+      <CardContent>
+        <Text>{name}</Text>
+        <Text textColor="neutral.400" fontSize="standard">
+          {color}
+        </Text>
+      </CardContent>
+    </Card>
+  );
+};

.storybook/components/Colors.tsx

@@ -0,0 +1,50 @@
+/** @jsx jsx */
+import { jsx, css } from "@emotion/core";
+import { Theme } from "../../src/themes/types";
+import { Source } from "@storybook/components";
+import { AutoGrid } from "../../src/AutoGrid";
+import { ColorSwatch } from "./ColorSwatch";
+import { Heading } from "../../src/Heading";
+import { useTheme } from "../../src/hooks";
+import { Fragment } from "react";
+
+export type ColorProps = {
+  name: string;
+  color: Theme["colors"]["primary"] | string;
+};
+
+export const Color = ({ name, color }: ColorProps) => {
+  return (
+    <AutoGrid minChildWidth="100px" gap="standard">
+      {typeof color === "object" ? (
+        Object.keys(color).map((shade) => (
+          <ColorSwatch name={shade} key={shade} color={color[shade]} />
+        ))
+      ) : (
+        <ColorSwatch name={name} key={color} color={color} />
+      )}
+    </AutoGrid>
+  );
+};
+
+export const Colors = () => {
+  const [{ colors }] = useTheme();
+  return (
+    <Fragment>
+      <Source
+        language="ts"
+        code={`
+      theme.colors[key.shade];
+      `}
+      />
+      <AutoGrid gap="standard">
+        {Object.keys(colors).map((color) => (
+          <div key={color}>
+            <Heading as="h3">{color}</Heading>
+            <Color name={color} color={colors[color]} />
+          </div>
+        ))}
+      </AutoGrid>
+    </Fragment>
+  );
+};

.storybook/components/Cursor.tsx

@@ -0,0 +1,8 @@
+/** @jsx jsx */
+import { jsx, css } from "@emotion/core";
+
+export type CursorProps = {};
+
+export const Cursor = ({ ...props }: CursorProps) => {
+  return <div></div>;
+};

.storybook/components/FontSizes.tsx

@@ -0,0 +1,8 @@
+/** @jsx jsx */
+import { jsx, css } from "@emotion/core";
+
+export type FontSizesProps = {};
+
+export const FontSizes = ({ ...props }: FontSizesProps) => {
+  return <div></div>;
+};

.storybook/components/FontWeights.tsx

@@ -0,0 +1,8 @@
+/** @jsx jsx */
+import { jsx, css } from "@emotion/core";
+
+export type FontWeightProps = {};
+
+export const FontWeight = ({ ...props }: FontWeightProps) => {
+  return <div></div>;
+};

.storybook/components/Fonts.tsx

@@ -0,0 +1,24 @@
+/** @jsx jsx */
+import { jsx, css } from "@emotion/core";
+import { Theme } from "../../src/themes/types";
+import { Text } from "../../src/Text";
+import { useTheme } from "../../src/hooks";
+import { AutoGrid } from "../../src/AutoGrid";
+
+export const Fonts = () => {
+  const [{ fonts }] = useTheme();
+  return (
+    <AutoGrid gap="standard">
+      {Object.keys(fonts).map((font: keyof Theme["fonts"]) => (
+        <div key={font}>
+          <Text fontFamily={font} fontSize="medium">
+            {font}
+          </Text>
+          <Text fontSize="standard" textColor="neutral.400">
+            {fonts[font]}
+          </Text>
+        </div>
+      ))}
+    </AutoGrid>
+  );
+};

.storybook/components/Icons.tsx

@@ -0,0 +1,41 @@
+/** @jsx jsx */
+import { jsx, css } from "@emotion/core";
+import { Icon, IconProps } from "../../src/Icon";
+import { Card } from "../../src/Card";
+import { CardContent } from "../../src/CardContent";
+import { Flex } from "../../src/Flex";
+import { AutoGrid } from "../../src/AutoGrid";
+import { Box } from "../../src/Box";
+
+export type IconsProps = {
+  icons: Record<string, any>;
+} & IconProps;
+
+export const Icons = ({ icons, color, size = "auto" }: IconsProps) => {
+  return (
+    <AutoGrid columns={2} gap="standard">
+      {Object.keys(icons).map((key) => {
+        const I = icons[key];
+
+        return (
+          <Card key={key}>
+            <CardContent>
+              <Flex
+                flexDirection="column"
+                justifyContent="center"
+                alignItems="center"
+              >
+                <Icon color={color} size={size}>
+                  <I />
+                </Icon>
+                <Box mt="xsmall" textAlign="center">
+                  <span>{key}</span>
+                </Box>
+              </Flex>
+            </CardContent>
+          </Card>
+        );
+      })}
+    </AutoGrid>
+  );
+};

.storybook/components/LetterSpacing.tsx

@@ -0,0 +1,8 @@
+/** @jsx jsx */
+import { jsx, css } from "@emotion/core";
+
+export type LetterSpacingProps = {};
+
+export const LetterSpacing = ({ ...props }: LetterSpacingProps) => {
+  return <div></div>;
+};

.storybook/components/LineHeights.tsx

@@ -0,0 +1,8 @@
+/** @jsx jsx */
+import { jsx, css } from "@emotion/core";
+
+export type LineHeightsProps = {};
+
+export const LineHeights = ({ ...props }: LineHeightsProps) => {
+  return <div></div>;
+};

.storybook/components/Spacing.tsx

@@ -0,0 +1,8 @@
+/** @jsx jsx */
+import { jsx, css } from "@emotion/core";
+
+export type SpacingProps = {};
+
+export const Spacing = ({ ...props }: SpacingProps) => {
+  return <div></div>;
+};

.storybook/components/Styles.tsx

@@ -0,0 +1,8 @@
+/** @jsx jsx */
+import { jsx, css } from "@emotion/core";
+
+export type StylesProps = {};
+
+export const Styles = ({ ...props }: StylesProps) => {
+  return <div></div>;
+};