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

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

Author: hasparus

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.js

@@ -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/Card.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/ColorPalette.js renamed to packages/style-guide/src/ColorPalette.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/ColorSwatch.js renamed to packages/style-guide/src/ColorSwatch.tsx

@@ -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/FontFamily.js

@@ -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/FontFamily.ts

@@ -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>
   )
 }