Merge pull request #807 from beerose/feat/style-guide-ts

feat(@theme-ui/style-guide): convert to typescript

packages/style-guide/package.json

@@ -3,6 +3,8 @@
   "version": "0.4.0-alpha.1",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "source": "src/index.ts",
   "author": "Brent Jackson",
   "license": "MIT",
   "scripts": {
@@ -17,10 +19,14 @@
   "dependencies": {
     "@theme-ui/presets": "^0.4.0-alpha.1",
     "color": "^3.1.2",
+    "@types/color": "3.0.1",
     "lodash.get": "^4.4.2"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "bfd026cae085f377ca537de897dc43233d50f5d5"
+  "gitHead": "bfd026cae085f377ca537de897dc43233d50f5d5",
+  "devDependencies": {
+    "@types/color": "^3.0.1"
+  }
 }

packages/style-guide/src/Card.tsx

@@ -0,0 +1,15 @@
+/** @jsx jsx */
+import { ComponentProps } from 'react'
+import { jsx } from 'theme-ui'
+
+export interface CardProps extends ComponentProps<'div'> {}
+export const Card: React.FC<CardProps> = props => (
+  <div
+    {...props}
+    sx={{
+      variant: 'styles.Card',
+    }}
+  />
+)
+
+export default Card

packages/style-guide/src/ColorPalette.js → packages/style-guide/src/ColorPalette.tsx

@@ -1,18 +1,31 @@
 /** @jsx jsx */
 import { jsx } from 'theme-ui'
 import { useTheme } from './context'
-import ColorSwatch from './ColorSwatch'
+import ColorSwatch, { ColorSwatchProps } from './ColorSwatch'
 
-const join = (...args) => args.filter(Boolean).join('.')
+const join = (...args: unknown[]) => args.filter(Boolean).join('.')
 
+type Colors = Record<string, string | { [key: string]: Colors }>
+export interface ColorRowProps extends Omit<ColorSwatchProps, 'color'> {
+  colors: Colors
+  name?: string
+  omit?: string[]
+  render?: (value: {
+    swatch: React.ReactElement
+    color: string
+    key: string
+    name: string
+  }) => React.ReactNode
+  size?: number | string
+}
 export const ColorRow = ({
   colors,
   name,
   omit = ['modes'],
   render,
   size,
   ...props
-}) => {
+}: ColorRowProps) => {
   return (
     <div>
       <div
@@ -31,7 +44,7 @@ export const ColorRow = ({
                 {...props}
                 key={key}
                 name={id}
-                colors={color}
+                colors={color as Colors}
                 omit={omit}
               />
             )
@@ -63,16 +76,16 @@ export const ColorRow = ({
   )
 }
 
-export const ColorPalette = ({
-  omit,
-  mode,
-  ...props
-}) => {
+export interface ColorPaletteProps extends Omit<ColorRowProps, 'colors'> {
+  omit?: string[]
+  mode?: string
+}
+export const ColorPalette = ({ omit, mode, ...props }: ColorPaletteProps) => {
   const theme = useTheme()
-  let colors = theme.colors
+  let colors = theme!.colors
 
-  if (mode && colors.modes) {
-    colors = colors.modes[mode] || colors
+  if (mode && colors!.modes) {
+    colors = colors!.modes[mode] || colors
   }
 
   return (
@@ -81,7 +94,7 @@ export const ColorPalette = ({
         marginLeft: -8,
         marginRight: -8,
       }}>
-      <ColorRow {...props} omit={omit} colors={colors} />
+      <ColorRow {...props} omit={omit} colors={colors as Colors} />
     </div>
   )
 }

packages/style-guide/src/ColorSwatch.js → packages/style-guide/src/ColorSwatch.tsx

@@ -1,17 +1,24 @@
 /** @jsx jsx */
-import { jsx, get } from 'theme-ui'
-import { toHex, toHSL } from './color'
+import { ComponentProps } from 'react'
+import { jsx, get, ResponsiveStyleValue } from 'theme-ui'
+import { toHex } from './color'
 import { useTheme } from './context'
 
+export interface ColorSwatchProps extends ComponentProps<'div'> {
+  color: string
+  name?: React.ReactNode
+  size?: ResponsiveStyleValue<string | number>
+  label?: boolean
+}
 export const ColorSwatch = ({
   color,
   name,
   size = 128,
   label = true,
   ...props
-}) => {
-  const { colors } = useTheme()
-  const value = get(colors, color)
+}: ColorSwatchProps) => {
+  const { colors } = useTheme()!
+  const value = get(colors!, color)
   return (
     <div {...props} title={`${toHex(value)}`}>
       <div

packages/style-guide/src/FontFamily.ts

@@ -0,0 +1,7 @@
+import { get } from 'theme-ui'
+import { useTheme } from './context'
+
+export const FontFamily = ({ name }: { name: string }) => {
+  const { fonts } = useTheme()!
+  return get(fonts!, name)
+}

packages/style-guide/src/HeadingStyle.js → packages/style-guide/src/HeadingStyle.tsx

@@ -1,8 +1,8 @@
 /** @jsx jsx */
 import { jsx } from 'theme-ui'
-import TypeStyle from './TypeStyle'
+import TypeStyle, { TypeStyleProps } from './TypeStyle'
 
-export const HeadingStyle = props => (
+export const HeadingStyle = (props: TypeStyleProps) => (
   <TypeStyle
     fontFamily="heading"
     fontWeight="heading"

packages/style-guide/src/ThemeCard.js → packages/style-guide/src/ThemeCard.tsx

@@ -1,12 +1,11 @@
 /** @jsx jsx */
-import { jsx, useThemeUI } from 'theme-ui'
-import Card from './Card'
+import { jsx } from 'theme-ui'
+import Card, { CardProps } from './Card'
 import ColorPalette from './ColorPalette'
 import TypeStyle from './TypeStyle'
 
-export const ThemeCard = props => {
-  const { theme } = useThemeUI()
-
+export interface ThemeCardProps extends CardProps {}
+export const ThemeCard: React.FC<ThemeCardProps> = props => {
   return (
     <Card
       {...props}
@@ -15,10 +14,7 @@ export const ThemeCard = props => {
         bg: 'background',
       }}>
       <TypeStyle />
-      <ColorPalette
-        label={false}
-        size={32}
-      />
+      <ColorPalette label={false} size={32} />
     </Card>
   )
 }

packages/style-guide/src/TypeScale.tsx

@@ -0,0 +1,49 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui'
+import { useTheme } from './context'
+import TypeStyle from './TypeStyle'
+
+const getValue = (fontSize: string | number) =>
+  typeof fontSize === 'number' ? `${fontSize}px` : fontSize
+
+export interface TypeScaleProps {
+  reverse?: boolean
+}
+export const TypeScale = ({ reverse = true, ...props }) => {
+  const theme = useTheme() || {}
+  const fontSizeEntries = reverse
+    ? Object.entries(theme.fontSizes || []).reverse()
+    : Object.entries(theme.fontSizes || [])
+
+  return (
+    <div
+      sx={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        alignItems: 'baseline',
+      }}>
+      {fontSizeEntries.map(([key, val]) => {
+        if (typeof val === 'object') {
+          // TODO: can theme.fontSizes be a deeply nested object?
+          // This wasn't handled previously
+          // We should either update the types or recursively render here.
+          return null
+        }
+
+          return (
+          <TypeStyle
+            key={key}
+            fontSize={key}
+            sx={{
+              mr: 3,
+            }}
+            children={getValue(val)}
+            {...props}
+          />
+        )
+      })}
+    </div>
+  )
+}
+
+export default TypeScale

packages/style-guide/src/TypeStyle.js → packages/style-guide/src/TypeStyle.tsx

@@ -1,7 +1,15 @@
 /** @jsx jsx */
+import { ComponentProps } from 'react'
 import { jsx } from 'theme-ui'
 import Card from './Card'
 
+export interface TypeStyleProps extends ComponentProps<typeof Card> {
+  fontSize?: number | string
+  fontFamily?: string
+  lineHeight?: string
+  fontWeight?: string
+  truncate?: boolean
+}
 export const TypeStyle = ({
   fontSize = 5,
   fontFamily = 'body',
@@ -10,7 +18,7 @@ export const TypeStyle = ({
   children = 'Aa',
   truncate = true,
   ...props
-}) => {
+}: TypeStyleProps) => {
   return (
     <Card
       {...props}

packages/style-guide/src/color.js → packages/style-guide/src/color.ts

@@ -1,14 +1,15 @@
 import Color from 'color'
 
-export const toHex = raw => {
+type ColorArgument = ConstructorParameters<typeof Color>[0]
+export const toHex = (raw: ColorArgument) => {
   try {
     return Color(raw).hex()
   } catch (e) {
     return
   }
 }
 
-export const toRGB = raw => {
+export const toRGB = (raw: ColorArgument) => {
   try {
     return Color(raw)
       .rgb()
@@ -18,7 +19,7 @@ export const toRGB = raw => {
   }
 }
 
-export const toHSL = raw => {
+export const toHSL = (raw: ColorArgument) => {
   try {
     return Color(raw)
       .hsl()

packages/style-guide/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react"
+  },
+  "include": ["src"]
+}

yarn.lock

@@ -3921,11 +3921,25 @@
   dependencies:
     "@types/node" "*"
 
-"@types/color-name@^1.1.1":
+"@types/color-convert@*":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@types/color-convert/-/color-convert-1.9.0.tgz#bfa8203e41e7c65471e9841d7e306a7cd8b5172d"
+  integrity sha512-OKGEfULrvSL2VRbkl/gnjjgbbF7ycIlpSsX7Nkab4MOWi5XxmgBYvuiQ7lcCFY5cPDz7MUNaKgxte2VRmtr4Fg==
+  dependencies:
+    "@types/color-name" "*"
+
+"@types/color-name@*", "@types/color-name@^1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
   integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
 
+"@types/[email protected]":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/color/-/color-3.0.1.tgz#2900490ed04da8116c5058cd5dba3572d5a25071"
+  integrity sha512-oeUWVaAwI+xINDUx+3F2vJkl/vVB03VChFF/Gl3iQCdbcakjuoJyMOba+3BXRtnBhxZ7uBYqQBi9EpLnvSoztA==
+  dependencies:
+    "@types/color-convert" "*"
+
 "@types/configstore@^2.1.1":
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/@types/configstore/-/configstore-2.1.1.tgz#cd1e8553633ad3185c3f2f239ecff5d2643e92b6"