feat(checkbox): convert to TypeScript and export types

react95-io · Jul 26, 2022 · 1c16025 · 1c16025
1 parent d42af74
commit 1c16025
Show file tree

Hide file tree

Showing 5 changed files with 118 additions and 131 deletions.
diff --git a/src/Checkbox/Checkbox.mdx b/src/Checkbox/Checkbox.mdx
@@ -3,13 +3,13 @@ name: Checkbox
 menu: Components
 ---
 
-import Checkbox from './Checkbox'
-import Fieldset from '../Fieldset/Fieldset'
-import Button from '../Button/Button'
-import Cutout from '../Cutout/Cutout'
-import List from '../List/List'
-import ListItem from '../ListItem/ListItem'
-import Divider from '../Divider/Divider'
+import { Checkbox } from './Checkbox';
+import Fieldset from '../Fieldset/Fieldset';
+import Button from '../Button/Button';
+import Cutout from '../Cutout/Cutout';
+import List from '../List/List';
+import ListItem from '../ListItem/ListItem';
+import Divider from '../Divider/Divider';
 
 # Checkbox
 
@@ -19,29 +19,31 @@ import Divider from '../Divider/Divider'
 
 <Playground>
   {() => {
-    const [steak, setSteak] = React.useState(true)
-    const [tortilla, setTortilla] = React.useState(false)
-    const [pizza, setPizza] = React.useState(false)
+    const [steak, setSteak] = React.useState(true);
+    const [tortilla, setTortilla] = React.useState(false);
+    const [pizza, setPizza] = React.useState(false);
     const handleChange = event => {
-      const { target: { value } } = event;
+      const {
+        target: { value }
+      } = event;
       if (value === 'steak') {
-        setSteak(!steak)
-        return
+        setSteak(!steak);
+        return;
       }
       if (value === 'tortilla') {
-        setTortilla(!tortilla)
-        return
+        setTortilla(!tortilla);
+        return;
       }
       if (value === 'pizza') {
-        setPizza(!pizza)
-        return
+        setPizza(!pizza);
+        return;
       }
     };
     const reset = () => {
-      setSteak(false)
-      setTortilla(false)
-      setPizza(false)
-    }
+      setSteak(false);
+      setTortilla(false);
+      setPizza(false);
+    };
     return (
       <div style={{ maxWidth: '250px' }}>
         <Fieldset label='Party food'>
@@ -94,11 +96,12 @@ import Divider from '../Divider/Divider'
 </Playground>
 
 #### Flat
+
 <Playground>
   <Cutout style={{ padding: '1rem', width: '300px' }}>
     <p style={{ lineHeight: 1.3 }}>
-      When you want to add input field on a light background (like
-      scrollable content), just use the flat variant:
+      When you want to add input field on a light background (like scrollable
+      content), just use the flat variant:
     </p>
     <div style={{ marginTop: '1rem' }}>
       <Checkbox
@@ -128,6 +131,7 @@ import Divider from '../Divider/Divider'
 </Playground>
 
 #### Menu
+
 <Playground>
   <List>
     <ListItem size='md'>

diff --git a/src/Checkbox/Checkbox.spec.js → src/Checkbox/Checkbox.spec.tsx b/src/Checkbox/Checkbox.spec.js → src/Checkbox/Checkbox.spec.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
 import { renderWithTheme } from '../../test/utils';
-import Checkbox from './Checkbox';
+import { Checkbox } from './Checkbox';
 
 describe('<Checkbox />', () => {
   describe('label', () => {
@@ -106,7 +105,7 @@ describe('<Checkbox />', () => {
       );
 
       rerender(<Checkbox checked />);
-      const checkbox = getByRole('checkbox');
+      const checkbox = getByRole('checkbox') as HTMLInputElement;
 
       expect(checkbox.checked).toBe(true);
       expect(getByRole('checkbox')).toHaveAttribute('checked');
@@ -119,7 +118,7 @@ describe('<Checkbox />', () => {
     it('should uncheck the checkbox', () => {
       const { getByRole, rerender } = renderWithTheme(<Checkbox checked />);
       rerender(<Checkbox checked={false} />);
-      const checkbox = getByRole('checkbox');
+      const checkbox = getByRole('checkbox') as HTMLInputElement;
 
       expect(checkbox.checked).toBe(false);
       expect(getByRole('checkbox')).not.toHaveAttribute('checked');
@@ -131,7 +130,7 @@ describe('<Checkbox />', () => {
   describe('uncontrolled', () => {
     it('can change checked state uncontrolled starting from defaultChecked', () => {
       const { getByRole } = renderWithTheme(<Checkbox defaultChecked />);
-      const checkbox = getByRole('checkbox');
+      const checkbox = getByRole('checkbox') as HTMLInputElement;
 
       expect(checkbox.checked).toBe(true);
 

diff --git a/src/Checkbox/Checkbox.stories.js → src/Checkbox/Checkbox.stories.tsx b/src/Checkbox/Checkbox.stories.js → src/Checkbox/Checkbox.stories.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import styled from 'styled-components';
 
 import { Checkbox, Fieldset, Cutout, List, ListItem, Divider } from 'react95';
+import { ComponentMeta } from '@storybook/react';
 
 const Wrapper = styled.div`
   background: ${({ theme }) => theme.material};
@@ -21,7 +22,7 @@ export default {
   title: 'Checkbox',
   component: Checkbox,
   decorators: [story => <Wrapper>{story()}</Wrapper>]
-};
+} as ComponentMeta<typeof Checkbox>;
 
 export function Default() {
   const [state, setState] = useState({
@@ -33,7 +34,7 @@ export function Default() {
   const { cheese, bacon, broccoli } = state;
   const ingredientsArr = Object.values(state).map(val => (val ? 1 : 0));
   const possibleIngredients = Object.keys(state).length;
-  const chosenIngredients = ingredientsArr.reduce((a, b) => a + b, 0);
+  const chosenIngredients = ingredientsArr.reduce<number>((a, b) => a + b, 0);
 
   const isIndeterminate = ![0, possibleIngredients].includes(chosenIngredients);
 
@@ -60,10 +61,8 @@ export function Default() {
     }
   };
 
-  const toggleIngredient = e => {
-    const {
-      target: { value }
-    } = e;
+  const toggleIngredient = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value as 'cheese' | 'bacon' | 'broccoli';
     setState({
       ...state,
       [value]: !state[value]
@@ -135,7 +134,7 @@ export function Flat() {
   const { cheese, bacon, broccoli } = state;
   const ingredientsArr = Object.values(state).map(val => (val ? 1 : 0));
   const possibleIngredients = Object.keys(state).length;
-  const chosenIngredients = ingredientsArr.reduce((a, b) => a + b, 0);
+  const chosenIngredients = ingredientsArr.reduce<number>((a, b) => a + b, 0);
 
   const isIndeterminate = ![0, possibleIngredients].includes(chosenIngredients);
 
@@ -162,10 +161,8 @@ export function Flat() {
     }
   };
 
-  const toggleIngredient = e => {
-    const {
-      target: { value }
-    } = e;
+  const toggleIngredient = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value as 'cheese' | 'bacon' | 'broccoli';
     setState({
       ...state,
       [value]: !state[value]