feat(website): convert all chart icons to TypeScript

packages/bullet/src/types.ts

@@ -77,6 +77,8 @@ export type CommonBulletProps = Dimensions & {
 
     theme: Theme
 
+    isInteractive: boolean
+
     role: string
 }
 
@@ -194,6 +196,7 @@ export type BulletItemProps = Omit<
     | 'measureSize'
     | 'markerSize'
     | 'theme'
+    | 'isInteractive'
 > &
     BulletHandlers &
     EnhancedDatum &

packages/funnel/src/index.ts

@@ -2,3 +2,4 @@ export * from './Funnel'
 export * from './ResponsiveFunnel'
 export * from './hooks'
 export * from './props'
+export * from './types'

website/src/components/components/explorer/ComponentsGrid.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import React from 'react'
 import styled from 'styled-components'
 import { ComponentsGridItem } from './ComponentsGridItem'
 import * as nav from '../../../data/nav'
@@ -13,7 +13,9 @@ const getFilterFunction = (term?: string | null, filter?: string | null): Filter
         predicates.push(({ name }) => name.toLowerCase().includes(term.toLowerCase()))
     }
     if (filter) {
+        // @ts-ignore
         predicates.push(({ flavors }) => flavors[filter.toLowerCase()] === true)
+        predicates.push(({ tags }) => tags.includes(filter))
     }
 
     return item => predicates.every(predicate => predicate(item))

website/src/components/components/explorer/ComponentsGridItem.tsx

@@ -4,7 +4,7 @@ import styled, { useTheme } from 'styled-components'
 import media from '../../../theming/mediaQueries'
 import { ChartNavData } from '../../../types'
 
-export const ComponentsGridItem = memo(({ name, id, flavors, tags }: ChartNavData) => {
+export const ComponentsGridItem = memo(({ name, id, flavors }: ChartNavData) => {
     const theme = useTheme()
 
     const handleVariantClick = useCallback((event: MouseEvent) => {
@@ -16,13 +16,6 @@ export const ComponentsGridItem = memo(({ name, id, flavors, tags }: ChartNavDat
             <Icon className={`sprite-icons-${id}-${theme.id}-colored`} />
             <Header>
                 <Name>{name}</Name>
-                {/*tags.length > 0 && (
-                    <Tags>
-                        {tags.map(tag => (
-                            <Tag key={tag}>{tag}</Tag>
-                        ))}
-                    </Tags>
-                )*/}
                 <Flavors>
                     <Flavor to={`/${id}/`}>SVG</Flavor>
                     {flavors.html && (
@@ -133,25 +126,3 @@ const Flavor = styled(Link)`
         color: ${({ theme }) => theme.colors.accent};
     }
 `
-
-const Tags = styled.div`
-    font-size: 0.9rem;
-    color: ${({ theme }) => theme.colors.textLight};
-    line-height: 1em;
-    margin-top: 4px;
-    display: flex;
-    flex-wrap: wrap;
-`
-
-const Tag = styled.span`
-    display: inline-block;
-    margin-right: 6px;
-    margin-bottom: 6px;
-    border-left: 1px solid ${({ theme }) => theme.colors.accent};
-    padding-left: 7px;
-
-    &:first-child {
-        padding-left: 0;
-        border-left: none;
-    }
-`

website/src/components/guides/theming/props.ts

@@ -1,5 +1,7 @@
 import { ChartPropertiesGroup, ChartProperty } from '../../../types'
 
+// expands all object properties by default if true,
+// this can be useful for debugging.
 const OPEN_ALL_BY_DEFAULTS = false
 
 const fontSizeProp: ChartProperty = {

website/src/components/icons/AreaBumpIcon.js → website/src/components/icons/AreaBumpIcon.tsx

@@ -1,12 +1,14 @@
-import React from 'react'
-import { AreaBump } from '@nivo/bump'
+import React, { useMemo } from 'react'
+import { Theme } from '@nivo/core'
+import { AreaBump, AreaBumpSvgProps, AreaBumpSerieExtraProps } from '@nivo/bump'
 import areaBumpLightNeutralImg from '../../assets/icons/area-bump-light-neutral.png'
 import areaBumpLightColoredImg from '../../assets/icons/area-bump-light-colored.png'
 import areaBumpDarkNeutralImg from '../../assets/icons/area-bump-dark-neutral.png'
 import areaBumpDarkColoredImg from '../../assets/icons/area-bump-dark-colored.png'
 import { ICON_SIZE, Icon, colors, IconImg } from './styled'
+import { IconType } from './types'
 
-const chartProps = {
+const chartProps: AreaBumpSvgProps<{ x: number; y: number }, AreaBumpSerieExtraProps> = {
     width: ICON_SIZE,
     height: ICON_SIZE,
     data: [
@@ -99,37 +101,40 @@ const chartProps = {
     axisTop: null,
     axisBottom: null,
     enableGridX: false,
-    isInteractive: true,
+    isInteractive: false,
 }
 
-const AreaBumpIconItem = ({ type }) => (
-    <Icon id={`area-bump-${type}`} type={type}>
-        <AreaBump
-            {...chartProps}
-            colors={colors[type].colors}
-            theme={{
-                axis: {
-                    domain: {
-                        line: {
-                            stroke: colors[type].colors[3],
-                            strokeWidth: 3,
-                            strokeLinecap: 'square',
-                        },
-                    },
-                },
-                grid: {
+const AreaBumpIconItem = ({ type }: { type: IconType }) => {
+    const theme: Theme = useMemo(
+        () => ({
+            axis: {
+                domain: {
                     line: {
-                        strokeWidth: 2,
-                        strokeOpacity: 0.5,
-                        stroke: colors[type].colors[1],
+                        stroke: colors[type].colors[3],
+                        strokeWidth: 3,
+                        strokeLinecap: 'square',
                     },
                 },
-            }}
-        />
-    </Icon>
-)
+            },
+            grid: {
+                line: {
+                    strokeWidth: 2,
+                    strokeOpacity: 0.5,
+                    stroke: colors[type].colors[1],
+                },
+            },
+        }),
+        []
+    )
 
-const AreaBumpIcon = () => (
+    return (
+        <Icon id={`area-bump-${type}`} type={type}>
+            <AreaBump {...chartProps} colors={colors[type].colors} theme={theme} />
+        </Icon>
+    )
+}
+
+export const AreaBumpIcon = () => (
     <>
         <AreaBumpIconItem type="lightNeutral" />
         <IconImg url={areaBumpLightNeutralImg} />
@@ -141,5 +146,3 @@ const AreaBumpIcon = () => (
         <IconImg url={areaBumpDarkColoredImg} />
     </>
 )
-
-export default AreaBumpIcon

website/src/components/icons/BarIcon.js → website/src/components/icons/BarIcon.tsx

@@ -1,12 +1,20 @@
-import React from 'react'
-import { Bar } from '@nivo/bar'
+import React, { useMemo } from 'react'
+import { Bar, BarSvgProps } from '@nivo/bar'
 import barLightNeutralImg from '../../assets/icons/bar-light-neutral.png'
 import barLightColoredImg from '../../assets/icons/bar-light-colored.png'
 import barDarkNeutralImg from '../../assets/icons/bar-dark-neutral.png'
 import barDarkColoredImg from '../../assets/icons/bar-dark-colored.png'
 import { ICON_SIZE, Icon, colors, IconImg } from './styled'
+import { IconType } from './types'
 
-const chartProps = {
+type Datum = {
+    id: string
+    A: number
+    B: number
+    C: number
+}
+
+const chartProps: BarSvgProps<Datum> = {
     width: ICON_SIZE,
     height: ICON_SIZE,
     indexBy: 'id',
@@ -31,16 +39,20 @@ const chartProps = {
     isInteractive: false,
 }
 
-const BarIconItem = ({ type }) => (
-    <Icon id={`bar-${type}`} type={type}>
-        <Bar
-            {...chartProps}
-            colors={[colors[type].colors[1], colors[type].colors[2], colors[type].colors[4]]}
-        />
-    </Icon>
-)
+const BarIconItem = ({ type }: { type: IconType }) => {
+    const typedColors = useMemo(
+        () => [colors[type].colors[1], colors[type].colors[2], colors[type].colors[4]],
+        [type]
+    )
 
-const BarIcon = () => (
+    return (
+        <Icon id={`bar-${type}`} type={type}>
+            <Bar<Datum> {...chartProps} colors={typedColors} />
+        </Icon>
+    )
+}
+
+export const BarIcon = () => (
     <>
         <BarIconItem type="lightNeutral" />
         <IconImg url={barLightNeutralImg} />
@@ -52,5 +64,3 @@ const BarIcon = () => (
         <IconImg url={barDarkColoredImg} />
     </>
 )
-
-export default BarIcon

website/src/components/icons/BulletIcon.js → website/src/components/icons/BulletIcon.tsx

@@ -1,12 +1,13 @@
 import React from 'react'
-import { Bullet } from '@nivo/bullet'
+import { Bullet, BulletSvgProps, BulletRectsItemProps, BulletMarkersItemProps } from '@nivo/bullet'
 import bulletLightNeutralImg from '../../assets/icons/bullet-light-neutral.png'
 import bulletLightColoredImg from '../../assets/icons/bullet-light-colored.png'
 import bulletDarkNeutralImg from '../../assets/icons/bullet-dark-neutral.png'
 import bulletDarkColoredImg from '../../assets/icons/bullet-dark-colored.png'
 import { ICON_SIZE, Icon, colors, IconImg } from './styled'
+import { IconType } from './types'
 
-const chartProps = {
+const chartProps: BulletSvgProps = {
     width: ICON_SIZE,
     height: ICON_SIZE,
     data: [
@@ -51,19 +52,27 @@ const chartProps = {
     },
 }
 
-const Range = colors => d => {
-    const color = d.data.v1 === 100 ? colors[1] : colors[0]
+const Range = (colors: [string, string]) => (rect: BulletRectsItemProps) => {
+    const color = rect.data.v1 === 100 ? colors[1] : colors[0]
 
-    return <rect x={d.x} y={d.y} width={d.width} height={d.height} fill={color} />
+    return <rect x={rect.x} y={rect.y} width={rect.width} height={rect.height} fill={color} />
 }
 
-const Measure = color => d =>
-    <rect x={d.x} y={d.y} width={d.width} height={d.height} fill={color} />
+const Measure = (color: string) => (rect: BulletRectsItemProps) =>
+    <rect x={rect.x} y={rect.y} width={rect.width} height={rect.height} fill={color} />
 
-const Marker = color => d =>
-    <rect fill={color} x={d.x - d.size / 2} y={d.y - d.size / 2} width={d.size} height={d.size} />
+const Marker = (color: string) => (marker: BulletMarkersItemProps) =>
+    (
+        <rect
+            fill={color}
+            x={marker.x - marker.size / 2}
+            y={marker.y - marker.size / 2}
+            width={marker.size}
+            height={marker.size}
+        />
+    )
 
-const BulletIconItem = ({ type }) => (
+const BulletIconItem = ({ type }: { type: IconType }) => (
     <Icon id={`bullet-${type}`} type={type}>
         <Bullet
             {...chartProps}
@@ -74,7 +83,7 @@ const BulletIconItem = ({ type }) => (
     </Icon>
 )
 
-const BulletIcon = () => (
+export const BulletIcon = () => (
     <>
         <BulletIconItem type="lightNeutral" />
         <IconImg url={bulletLightNeutralImg} />
@@ -86,5 +95,3 @@ const BulletIcon = () => (
         <IconImg url={bulletDarkColoredImg} />
     </>
 )
-
-export default BulletIcon