Theme UI

.storybook/main.js

@@ -5,6 +5,6 @@ module.exports = {
   ],
   "addons": [
     "@storybook/addon-links",
-    "@storybook/addon-essentials"
+    "@storybook/addon-essentials",
   ]
-}
+}

.storybook/preview.js

@@ -1,3 +1,8 @@
+/** @jsxImportSource theme-ui */
+import { ThemeProvider } from 'theme-ui'
+
+import theme from "../src/themes/theme"
+
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
@@ -6,4 +11,12 @@ export const parameters = {
       date: /Date$/,
     },
   },
-}
+}
+
+export const decorators = [
+  (Story) => (
+    <ThemeProvider theme={theme}>
+      <Story />
+    </ThemeProvider>
+  ),
+];

package.json

@@ -7,10 +7,12 @@
     "url": "https://github.com/saddle-finance/saddle-design-system"
   },
   "dependencies": {
+    "@theme-ui/presets": "^0.11.3",
     "@types/react": "^17.0.30",
+    "@types/theme-ui": "^0.6.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "styled-components": "^5.3.1"
+    "theme-ui": "^0.11.3"
   },
   "devDependencies": {
     "@babel/core": "^7.15.8",
@@ -20,8 +22,7 @@
     "@storybook/addon-essentials": "^6.3.12",
     "@storybook/addon-links": "^6.3.12",
     "@storybook/react": "^6.3.12",
-    "@types/node": "^16.11.1",
-    "@types/styled-components": "^5.1.15",
+    "@types/node": "^16.11.4",
     "babel-loader": "^8.2.2",
     "eslint": "^7.11.0",
     "eslint-config-prettier": "^8.3.0",
@@ -43,9 +44,12 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
+  "resolutions": {
+    "**/@emotion/styled": "^11.0.0"
+  },
   "scripts": {
-    "storybook": "start-storybook -p 6008 -s public --no-dll",
-    "build-storybook": "build-storybook -s public --no-dll",
+    "storybook": "start-storybook -p 6008 -s public --no-dll --docs",
+    "build-storybook": "build-storybook -s public --no-dll --docs",
     "build": "rollup -c"
   },
   "files": [

src/components/Button.tsx

@@ -0,0 +1,27 @@
+/** @jsxImportSource theme-ui */
+import { ReactChild } from 'react'
+import { Button as _Button, useThemeUI, get } from 'theme-ui'
+
+type Kind = "primary" | "secondary"
+type Size = "sm" | "md" | "lg"
+interface ButtonProps {
+  kind?: Kind,
+  size?: Size,
+  children: ReactChild
+}
+
+const Button = ({ size, kind, children }: ButtonProps) => {
+  const context = useThemeUI()
+  const sizes = get(context.theme, `button.${size}`)
+  const kinds = get(context.theme, `button.${kind}`)
+
+  return <_Button sx={{ ...sizes, ...kinds }}>{ children }</_Button>
+}
+
+Button.defaultProps = {
+  kind: "primary",
+  size: "md"
+}
+
+export default Button
+export type { ButtonProps }

src/components/Text.tsx

@@ -1,45 +1,23 @@
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-/* eslint-disable @typescript-eslint/no-unsafe-return */
+/** @jsxImportSource theme-ui */
+import { ReactChild } from 'react'
+import { Text as _Text, useThemeUI, get } from 'theme-ui'
 
-import React, { ReactElement } from "react"
-import styled from "styled-components"
-
-type StyledProps = {
-  // TODO: Why doesn't this enum work? "no overload matches this call"
-  // size?: ".75em" | "1em" | "1.25em"
-  size?: string
+// TODO: Import Typography props as well?  Or merge sx object?
+interface TextProps {
+  size?: "sm" | "md" | "lg",
+  children: ReactChild
 }
-const TextComponent = styled.span<StyledProps>`
-  font-family: "Source Code Pro", -apple-system, BlinkMacSystemFont, "Segoe UI",
-    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
-    "Helvetica Neue", sans-serif;
-  font-size: ${(props) => props.size};
-  line-height: ${(props) => props.size};
-  size: unset;
-`
 
-type Props = {
-  size?: "sm" | "md" | "lg"
-}
-export default function Text(
-  props: React.PropsWithChildren<Props>,
-): ReactElement {
-  const { size = "md", children } = props
+const Text = ({ size, children }: TextProps) => {
+  const context = useThemeUI()
+  const styles = get(context.theme, `text.${size}`)
 
-  let sizeVal
-  switch (size) {
-    case "sm":
-      sizeVal = ".75em"
-      break
-    case "md":
-      sizeVal = "1em"
-      break
-    case "lg":
-      sizeVal = "1.25em"
-      break
-  }
+  return <_Text sx={styles}>{ children }</_Text>
+}
 
-  return <TextComponent size={sizeVal}>{children}</TextComponent>
+Text.defaultProps = {
+  size: "md"
 }
+
+export default Text
+export type { TextProps }

src/index.ts

@@ -1,3 +1,4 @@
-import Text from "./components/Text"
+// import Text from "./components/Text"
+import { Text } from "theme-ui"
 
 export { Text }

src/stories/Button.stories.tsx

@@ -0,0 +1,41 @@
+/** @jsxImportSource theme-ui */
+import { Story, Meta } from "@storybook/react"
+
+import Button, { ButtonProps } from "../components/Button"
+
+export default {
+  title: "Button",
+  component: Button,
+  parameters: { controls: { include: ['size', 'kind']}}
+} as Meta
+
+const Template: Story<ButtonProps> = (args) => (
+  <Button {...args}>Hello, World!</Button>
+)
+
+export const Default = Template.bind({})
+
+export const Large = Template.bind({})
+Large.args = {
+  size: "lg"
+}
+
+export const Medium = Template.bind({})
+Medium.args = {
+  size: "md"
+}
+
+export const Small = Template.bind({})
+Small.args = {
+  size: "sm"
+}
+
+export const Primary = Template.bind({})
+Primary.args = {
+  kind: "primary"
+}
+
+export const Secondary = Template.bind({})
+Secondary.args = {
+  kind: "secondary"
+}

src/stories/Text.stories.tsx

@@ -1,25 +1,31 @@
-// TODO: replace with styled-components
-// import "../styles/global.scss"
+/** @jsxImportSource theme-ui */
+import { Story, Meta } from "@storybook/react"
 
-import React, { ReactElement } from "react"
+import Text, { TextProps } from "../components/Text"
 
-import Text from "../components/Text"
+export default {
+  title: "Text",
+  component: Text,
+  parameters: { controls: { include: ['size']}}
+} as Meta
 
-export const TextStory = (): ReactElement => (
-  <>
-    <div>
-      <Text size="lg">Large Text</Text>
-    </div>
-    <div>
-      <Text size="md">Medium Text (default)</Text>
-    </div>
-    <div>
-      <Text size="sm">Small Text</Text>
-    </div>
-  </>
+const Template: Story<TextProps> = (args) => (
+  <Text {...args}>Hello, World!</Text>
 )
 
-export default {
-  title: "Text",
-  component: TextStory,
+export const Default = Template.bind({})
+
+export const Large = Template.bind({})
+Large.args = {
+  size: "lg"
+}
+
+export const Medium = Template.bind({})
+Medium.args = {
+  size: "md"
 }
+
+export const Small = Template.bind({})
+Small.args = {
+  size: "sm"
+}

src/themes/base.js

@@ -0,0 +1,12 @@
+export default {
+  fontSizes: [14, 18, 22],
+  lineHeights: ['14px', '18px', '22px'],
+  fonts: {
+    serif: "serif",
+    sansSerif: "sans-serif"
+  },
+  colors: {
+    primary: '#07c',
+    secondary: '#0fa',
+  }
+}

src/themes/button.js

@@ -0,0 +1,21 @@
+export default {
+  button: {
+    // size
+    sm: {
+      fontSize: 0
+    },
+    md: {
+      fontSize: 1
+    },
+    lg: {
+      fontSize: 2
+    },
+    // kind
+    primary: {
+      bg: 'primary'
+    },
+    secondary: {
+      bg: 'secondary'
+    }
+  }
+}

src/themes/text.js

@@ -0,0 +1,16 @@
+export default {
+  text: {
+    sm: {
+      fontSize: 0,
+      lineHeight: 0
+    },
+    md: {
+      fontSize: 1,
+      lineHeight: 1
+    },
+    lg: {
+      fontSize: 2,
+      lineHeight: 2
+    },
+  }
+}

src/themes/theme.ts

@@ -0,0 +1,13 @@
+import { Theme } from 'theme-ui'
+
+import base from './base'
+import text from './text'
+import button from './button'
+
+const theme: Theme = {
+  ...base,
+  ...text,
+  ...button
+}
+
+export default theme