Merge pull request #71 from commitd/sh-slider

Typing improvements

Author: stuarthendren

.devcontainer/Dockerfile

@@ -4,14 +4,19 @@
 ARG VARIANT="14-buster"
 FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}
 
-# [Optional] Uncomment this section to install additional OS packages.
-# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
-#     && apt-get -y install --no-install-recommends <your-package-list-here>
-
-# [Optional] Uncomment if you want to install an additional version of node using nvm
-# ARG EXTRA_NODE_VERSION=10
-# RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}"
-
-# [Optional] Uncomment if you want to install more global node modules
-# RUN sudo -u node npm install -g <your-package-list-here>
+# Add additional packages 
+RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
+        # Add utilties
+        && sudo apt -y install --no-install-recommends software-properties-common apt-transport-https gnupg2 bash-completion \
+        # Add key for GitHub CLI
+        && sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-key C99B11DEB97541F0 \
+        && sudo apt-add-repository https://cli.github.com/packages \
+        && sudo apt update \
+        # Install github cli
+        && sudo apt -y install --no-install-recommends gh
 
+# Add bash completions
+RUN echo 'source <(gh completion -s bash)' >> ~/.bashrc \
+    && echo 'source <(kubectl completion bash)' >> ~/.bashrc \
+    && echo 'source <(skaffold completion bash)' >> ~/.bashrc \
+    && touch ~/.bash_profile

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.1.0",
+  "version": "4.1.1",
   "name": "@committed/components",
   "description": "Committed Component Library",
   "author": "Committed",
@@ -32,7 +32,7 @@
     "build-storybook": "build-storybook --docs",
     "format": "prettier --write '**/{src,test,stories}/**/{*.js,*.ts,*.tsx,*.json,*.md,*.mdx}' example/index.tsx",
     "deploy-storybook": "storybook-to-ghpages",
-    "danger:local": "danger local --dangerfile dangerfile.lite.ts",
+    "danger:local": "danger local -b main --dangerfile dangerfile.lite.ts",
     "danger:pr": "cross-env DANGER_GITHUB_API_TOKEN=${GITHUB_TOKEN} danger pr https://github.com/commitd/components/pull/${PR}"
   },
   "peerDependencies": {
@@ -85,16 +85,18 @@
     "@storybook/react": "^6.1.11",
     "@storybook/storybook-deployer": "^2.8.7",
     "@storybook/theming": "^6.1.11",
+    "@testing-library/dom": "^7.29.0",
     "@testing-library/jest-dom": "^5.5.0",
     "@testing-library/react": "^10.0.3",
+    "@testing-library/user-event": "^12.6.0",
     "@types/jest": "^25.2.1",
     "@types/react": "^16.9.33",
     "@types/react-dom": "^16.9.6",
     "@typescript-eslint/eslint-plugin": "^4.6.0",
     "@typescript-eslint/parser": "^4.6.0",
     "babel-jest": "^26.6.1",
     "babel-loader": "^8.1.0",
-    "danger": "^10.1.0",
+    "danger": "^10.5.4",
     "danger-plugin-spellcheck": "^1.5.0",
     "eslint-config-prettier": "^6.14.0",
     "eslint-config-react-app": "^6.0.0",

src/components/checktoken/CheckToken.tsx

@@ -7,7 +7,7 @@ import { Row } from '../flex/Flex'
 import { makeStyles, fade } from '../../styles'
 
 interface CheckboxProps {
-  color: 'primary' | 'secondary' | 'default'
+  color?: 'primary' | 'secondary' | 'default'
   selected?: boolean | undefined
   disabled?: boolean
 }
@@ -22,7 +22,7 @@ export interface CheckTokenProps
   children?: React.ReactNode
 }
 
-export const Checkbox: React.FC<CheckboxProps> = ({
+const Checkbox: React.FC<CheckboxProps> = ({
   selected,
   ...props
 }: CheckboxProps) => {
@@ -53,7 +53,7 @@ const useStyles = makeStyles((theme) => {
     },
     selected: {
       color: theme.palette.action.active,
-      borderColor: ({ color }: CheckTokenProps) => {
+      borderColor: ({ color = 'default' }: CheckTokenProps) => {
         if (
           color !== 'default' &&
           ['primary', 'secondary', 'error', 'warning', 'info'].includes(color)
@@ -72,13 +72,24 @@ const useStyles = makeStyles((theme) => {
 
 export const CheckToken = withPositioningProps<CheckTokenProps>(
   (props: CheckTokenProps) => {
-    const { children, onClick, ...rest } = props
+    const {
+      children,
+      onClick,
+      color = 'default',
+      value = 'check',
+      ...rest
+    } = props
     const classes = useStyles(props)
     return (
-      <ToggleButton {...rest} onChange={onClick} classes={classes}>
+      <ToggleButton
+        {...rest}
+        onChange={onClick}
+        value={value}
+        classes={classes}
+      >
         <Row>
           <Checkbox
-            color={props.color}
+            color={color}
             selected={props.selected}
             disabled={props.disabled}
           />
@@ -87,4 +98,4 @@ export const CheckToken = withPositioningProps<CheckTokenProps>(
       </ToggleButton>
     )
   }
-)
+) as React.ComponentType<CheckTokenProps>

src/components/flex/Flex.tsx

@@ -7,18 +7,21 @@ export type ColumnProps = Omit<FlexProps, 'flexDirection'>
 
 export type FlexRef = HTMLDivElement
 
-export const Flex = React.forwardRef<FlexRef, FlexProps>(
-  (props: FlexProps, ref) => <Box ref={ref} {...props} display="flex" />
-)
+export const Flex: React.ForwardRefExoticComponent<FlexProps> = React.forwardRef<
+  FlexRef,
+  FlexProps
+>((props: FlexProps, ref) => <Box ref={ref} {...props} display="flex" />)
 
-export const Row = React.forwardRef<FlexRef, RowProps>(
-  (props: FlexProps, ref) => (
-    <Box ref={ref} {...props} display="flex" flexDirection="row" />
-  )
-)
+export const Row: React.ForwardRefExoticComponent<RowProps> = React.forwardRef<
+  FlexRef,
+  RowProps
+>((props: FlexProps, ref) => (
+  <Box ref={ref} {...props} display="flex" flexDirection="row" />
+))
 
-export const Column = React.forwardRef<FlexRef, ColumnProps>(
-  (props: FlexProps, ref) => (
-    <Box ref={ref} {...props} display="flex" flexDirection="column" />
-  )
-)
+export const Column: React.ForwardRefExoticComponent<ColumnProps> = React.forwardRef<
+  FlexRef,
+  ColumnProps
+>((props: FlexProps, ref) => (
+  <Box ref={ref} {...props} display="flex" flexDirection="column" />
+))

src/components/grid/Grid.tsx

@@ -7,4 +7,4 @@ export type GridRef = HTMLDivElement
 
 export const Grid = React.forwardRef<GridRef, GridProps>(
   (props: GridProps, ref) => <Box ref={ref} {...props} display="grid" />
-)
+) as React.ForwardRefExoticComponent<GridProps>

src/components/slider/Slider.tsx

@@ -8,4 +8,6 @@ export type SliderProps = BoxProps &
     onChange?: (e: React.ChangeEvent<{}>, value: number | number[]) => void
   }
 
-export const Slider = withBoxProps<MaterialSliderProps>(MaterialSlider)
+export const Slider = withBoxProps<MaterialSliderProps>(
+  MaterialSlider
+) as React.ComponentType<SliderProps>

src/components/textfield/TextField.tsx

@@ -93,4 +93,4 @@ const CommittedTextField: React.FC<CommittedTextFieldProps> = React.forwardRef(
 
 export const TextField = withBoxProps<CommittedTextFieldProps>(
   CommittedTextField
-)
+) as React.ForwardRefExoticComponent<CommittedTextFieldProps>

src/components/typography/Typography.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ForwardRefExoticComponent } from 'react'
 import { styled } from '@material-ui/styles'
 import MaterialTypography, {
   TypographyProps as MaterialTypographyProps,
@@ -12,8 +12,13 @@ type BaseTypographyProps<C extends React.ElementType> = MaterialTypographyProps<
 > &
   PositioningProps
 
+// function test() {
+//   const ref = React.useRef(null)
+//   return <MaterialTypography ref={ref} />
+// }
+
 const BaseTypography = withPositioningProps<MaterialTypographyProps>(
-  MaterialTypography
+  MaterialTypography as ForwardRefExoticComponent<MaterialTypographyProps>
 )
 
 export type ExtraTypographyProps = {

src/internal/noopener.tsx

@@ -14,7 +14,7 @@ export function withNoOpener<P extends AProps & { ref?: React.Ref<any> }>(
   Component: React.ForwardRefExoticComponent<P>
 ): React.ForwardRefExoticComponent<P>
 
-export function withNoOpener<P>(
+export function withNoOpener<P extends AProps>(
   Component: React.FunctionComponent<P>
 ): React.ForwardRefExoticComponent<P>
 

src/internal/wrappers.tsx

@@ -16,26 +16,26 @@ import { omit } from '../util/transform'
 
 export type { SizingProps }
 
-export type BoxProps = SpacingProps &
-  FlexboxProps &
-  SizingProps &
-  DisplayProps &
-  GriditemProps
-
 export type PositioningProps = SpacingProps &
   FlexboxProps &
   DisplayProps &
   GriditemProps
 
-// The natural typing causes typescript to error, hence the casts to force it.
-export const withPositioning = <P extends object>(
-  WrappedComponent: React.ElementType<P>
-) =>
-  (styled(WrappedComponent)(
-    compose(display, spacing, flexbox, griditem)
-  ) as unknown) as React.ComponentType<P & PositioningProps>
+export type BoxProps = PositioningProps & SizingProps
 
-export const boxPropsKeys: Array<keyof BoxProps> = [
+export const sizingPropsKeys: Array<keyof SizingProps> = [
+  'width',
+  'maxWidth',
+  'minWidth',
+  'height',
+  'maxHeight',
+  'minHeight',
+  'sizeWidth',
+  'sizeHeight',
+  'boxSizing',
+]
+
+export const positioningPropsKeys: Array<keyof PositioningProps> = [
   'm',
   'mt',
   'mr',
@@ -77,14 +77,6 @@ export const boxPropsKeys: Array<keyof BoxProps> = [
   'alignSelf',
   'justifyItems',
   'justifySelf',
-  'width',
-  'maxWidth',
-  'minWidth',
-  'height',
-  'maxHeight',
-  'minHeight',
-  'sizeWidth',
-  'sizeHeight',
   'display',
   'displayPrint',
   'overflow',
@@ -101,30 +93,62 @@ export const boxPropsKeys: Array<keyof BoxProps> = [
   'placeSelf',
 ]
 
-export const withBoxProps = <P extends object>(
+export const boxPropsKeys: Array<keyof BoxProps> = [
+  ...positioningPropsKeys,
+  ...sizingPropsKeys,
+]
+
+type WrapperType<T> = {
+  <P extends object & { ref?: React.Ref<any> }>(
+    Component: React.ForwardRefExoticComponent<P>
+  ): React.ForwardRefExoticComponent<P & T>
+  <P extends object>(
+    Component: React.FunctionComponent<P>
+  ): React.ForwardRefExoticComponent<P & T>
+  <P extends object>(
+    WrappedComponent: React.ComponentType<P>
+  ): React.ComponentType<P & T>
+}
+
+export const withBoxProps: WrapperType<BoxProps> = <P extends object>(
   WrappedComponent: React.ComponentType<P>
 ) =>
-  styled((props) => {
-    const rest = omit(props, boxPropsKeys) as any
-    return <WrappedComponent {...rest} />
-  })(
+  styled(
+    React.forwardRef<React.ComponentType<P>, P & BoxProps>(function withBox(
+      props,
+      ref
+    ) {
+      const rest = omit(props, boxPropsKeys) as any
+      return <WrappedComponent {...rest} ref={ref} />
+    })
+  )(
     compose(display, spacing, flexbox, sizing, griditem)
-  ) as React.ComponentType<P & BoxProps>
+  ) as React.ForwardRefExoticComponent<P & BoxProps>
 
-export const withPositioningProps = <P extends object>(
+export const withPositioningProps: WrapperType<PositioningProps> = <
+  P extends object
+>(
   WrappedComponent: React.ComponentType<P>
 ) =>
-  styled((props) => {
-    const rest = omit(props, boxPropsKeys) as any
-    return <WrappedComponent {...rest} />
-  })(compose(display, spacing, flexbox, griditem)) as React.ComponentType<
-    P & PositioningProps
-  >
+  styled(
+    React.forwardRef<React.ComponentType<P>, P & PositioningProps>(
+      function withPositioning(props, ref) {
+        const rest = omit(props, positioningPropsKeys) as any
+        return <WrappedComponent {...rest} ref={ref} />
+      }
+    )
+  )(
+    compose(display, spacing, flexbox, griditem)
+  ) as React.ForwardRefExoticComponent<P & PositioningProps>
 
-export const withSizingProps = <P extends object>(
+export const withSizingProps: WrapperType<SizingProps> = <P extends object>(
   WrappedComponent: React.ComponentType<P>
 ) =>
-  styled((props) => {
-    const rest = omit(props, boxPropsKeys) as any
-    return <WrappedComponent {...rest} />
-  })(sizing) as React.ComponentType<P & SizingProps>
+  styled(
+    React.forwardRef<React.ComponentType<P>, P & SizingProps>(
+      function withSizing(props, ref) {
+        const rest = omit(props, sizingPropsKeys) as any
+        return <WrappedComponent {...rest} ref={ref} />
+      }
+    )
+  )(sizing) as React.ForwardRefExoticComponent<P & SizingProps>