TypeScript migration

README.md

@@ -58,11 +58,7 @@ export default function Hello () {
 }
 ```
 
-Both Base Web and Styletron come with [flow types](https://flow.org/) and [TypeScript](https://www.typescriptlang.org/index.html). All our components are typed and examples have Vanilla, Flow and TypeScript versions. For Styletron + TS, you need to add some additional packages:
-
-```bash
-yarn add @types/styletron-standard @types/styletron-react @types/styletron-engine-atomic
-```
+Both Base Web and Styletron come with [flow types](https://flow.org/) and [TypeScript](https://www.typescriptlang.org/index.html). All our components are typed and examples have Vanilla, Flow and TypeScript versions.
 
 ## Docs
 

documentation-site/components/yard/action-buttons.tsx

@@ -64,6 +64,7 @@ const ActionButtons: React.FC<{
               },
             },
           }}
+          // @ts-ignore
           href={`/cheat-sheet#${Object.keys(importsConfig)[0].split('/')[1].toLowerCase()}`}
           kind={KIND.tertiary}
         >

documentation-site/components/yard/ast.ts

@@ -38,6 +38,7 @@ export function toggleOverrideSharedProps(code: string, sharedProps: string[]) {
           path.node.params = [
             //@ts-ignore
             t.objectPattern([
+              //@ts-ignore
               t.objectProperty(t.identifier('$theme'), t.identifier('$theme'), false, true),
             ]),
           ];

documentation-site/components/yard/provider.ts

@@ -1,6 +1,6 @@
 import * as t from '@babel/types';
 import traverse from '@babel/traverse';
-import { Theme } from 'baseui/theme';
+import { Theme } from 'baseui';
 
 import { TProvider, getAstJsxElement } from 'react-view';
 

documentation-site/examples/app-nav-bar/basic.tsx

@@ -6,13 +6,13 @@ import {ChevronDown, Delete, Overflow, Upload} from 'baseui/icon';
 import {
   AppNavBar,
   setItemActive,
-  NavItemT,
+  NavItem,
 } from 'baseui/app-nav-bar';
 
 export default function Example() {
   const [css] = useStyletron();
 
-  const [mainItems, setMainItems] = React.useState<NavItemT[]>([
+  const [mainItems, setMainItems] = React.useState<NavItem[]>([
     {icon: Upload, label: 'Primary A'},
     {icon: Upload, label: 'Primary B'},
     {
@@ -52,13 +52,13 @@ export default function Example() {
 
   const [isNavVisible, setIsNavVisible] = React.useState(false);
 
-  function handleMainItemSelect(item: NavItemT) {
-    setMainItems(prev => setItemActive(prev, item));
+  function handleMainItemSelect(item: NavItem) {
+    setMainItems((prev) => setItemActive(prev, item));
   }
 
   return (
     <React.Fragment>
-      <Button onClick={() => setIsNavVisible(prev => !prev)}>
+      <Button onClick={() => setIsNavVisible((prev) => !prev)}>
         {isNavVisible ? 'Hide' : 'Show'} navigation bar
       </Button>
       {isNavVisible && (
@@ -77,7 +77,7 @@ export default function Example() {
               mainItems={mainItems}
               userItems={userItems}
               onMainItemSelect={handleMainItemSelect}
-              onUserItemSelect={item => console.log('user', item)}
+              onUserItemSelect={(item) => console.log('user', item)}
               username="Umka Marshmallow"
               usernameSubtitle="5.0"
               userImgUrl=""

documentation-site/examples/app-nav-bar/map-item-to-node.tsx

@@ -4,13 +4,13 @@ import {useStyletron} from 'baseui';
 import {
   AppNavBar,
   setItemActive,
-  NavItemT,
+  NavItem,
 } from 'baseui/app-nav-bar';
 
 export default function Example() {
   const [css] = useStyletron();
 
-  const [mainItems, setMainItems] = React.useState<NavItemT[]>([
+  const [mainItems, setMainItems] = React.useState<NavItem[]>([
     {label: 'main one', info: {color: 'blue'}},
     {label: 'main two', info: {color: 'red'}},
   ]);
@@ -20,16 +20,16 @@ export default function Example() {
     {label: 'user two', info: {color: 'yellow'}},
   ];
 
-  function handleMainItemSelect(item: NavItemT) {
-    setMainItems(prev => setItemActive(prev, item));
+  function handleMainItemSelect(item: NavItem) {
+    setMainItems((prev) => setItemActive(prev, item));
   }
 
   return (
     <AppNavBar
       title="Title"
       mainItems={mainItems}
       userItems={userItems}
-      mapItemToNode={item => (
+      mapItemToNode={(item) => (
         <div
           className={css({
             border: `dashed 2px ${

documentation-site/examples/app-nav-bar/unique-identifier.tsx

@@ -3,26 +3,26 @@ import * as React from 'react';
 import {
   AppNavBar,
   setItemActive,
-  NavItemT,
+  NavItem,
 } from 'baseui/app-nav-bar';
 
 export default function Example() {
-  const [mainItems, setMainItems] = React.useState<NavItemT[]>([
+  const [mainItems, setMainItems] = React.useState<NavItem[]>([
     {label: 'label', info: {id: 1}},
     {label: 'label', info: {id: 2}},
     {label: 'label', info: {id: 3}},
     {label: 'label', info: {id: 4}},
   ]);
 
-  function getUniqueIdentifier(item: NavItemT) {
+  function getUniqueIdentifier(item: NavItem) {
     if (item.info) {
       return item.info.id;
     }
     return item.label;
   }
 
-  function handleMainItemSelect(item: NavItemT) {
-    setMainItems(prev =>
+  function handleMainItemSelect(item: NavItem) {
+    setMainItems((prev) =>
       setItemActive(prev, item, getUniqueIdentifier),
     );
   }

documentation-site/examples/aspect-ratio-box/image.tsx

@@ -9,6 +9,7 @@ export default function Example() {
     <AspectRatioBox width="scale1400">
       <AspectRatioBoxBody
         as="img"
+        // @ts-ignore
         src="https://avatars.dicebear.com/api/human/aspect.svg?width=285&mood=happy"
       />
     </AspectRatioBox>

documentation-site/examples/button/as-an-anchor.tsx

@@ -5,6 +5,8 @@ import {Button} from 'baseui/button';
 export default function Example() {
   return (
     <React.Fragment>
+      {/*
+       // @ts-ignore */}
       <Button $as="a" href="https://styletron.org" target="_blank">
         Visit the Styletron docs
       </Button>

documentation-site/examples/data-table/batch-action.tsx

@@ -8,8 +8,8 @@ import {
   NumericalColumn,
   StringColumn,
   NUMERICAL_FORMATS,
-  BatchActionT,
-  RowActionT,
+  BatchAction,
+  RowAction,
 } from 'baseui/data-table';
 
 type RowDataT = [
@@ -131,13 +131,13 @@ const initialRows = [
   ['X-Men: The Last Stand', false, 'Action', 210, 459, 2.2, 6.8],
   [`You've Got Mail`, false, 'Drama', 65, 251, 3.9, 6.3],
   ['Zookeeper', false, 'Romantic Comedy', 80, 170, 2.1, 5.0],
-].map(r => ({id: String(r[0]), data: r}));
+].map((r) => ({id: String(r[0]), data: r}));
 
 export default function Example() {
   const [rows, setRows] = React.useState(initialRows);
 
   function flagRows(ids: Array<string | number>) {
-    const nextRows = rows.map(row => {
+    const nextRows = rows.map((row) => {
       if (ids.includes(row.id)) {
         const nextData = [...row.data];
         nextData[1] = !nextData[1];
@@ -153,26 +153,26 @@ export default function Example() {
   }
 
   function removeRows(ids: Array<string | number>) {
-    const nextRows = rows.filter(row => !ids.includes(row.id));
+    const nextRows = rows.filter((row) => !ids.includes(row.id));
     setRows(nextRows);
   }
   function removeRow(id: string | number) {
     removeRows([id]);
   }
 
-  const batchActions: BatchActionT[] = [
+  const batchActions: BatchAction[] = [
     {
       label: 'Check',
       onClick: ({selection, clearSelection}) => {
-        flagRows(selection.map(r => r.id));
+        flagRows(selection.map((r) => r.id));
         clearSelection();
       },
       renderIcon: Check,
     },
     {
       label: 'Remove',
       onClick: ({selection, clearSelection}) => {
-        removeRows(selection.map(r => r.id));
+        removeRows(selection.map((r) => r.id));
         clearSelection();
       },
       renderIcon: Alert,
@@ -183,7 +183,7 @@ export default function Example() {
     },
   ];
 
-  const rowActions: RowActionT[] = [
+  const rowActions: RowAction[] = [
     {
       label: 'Check',
       onClick: ({row}) => flagRow(row.id),

documentation-site/examples/file-uploader/_overrides_component.tsx

@@ -1,12 +1,9 @@
 import * as React from 'react';
 import {FileUploader} from 'baseui/file-uploader';
-import {
-  FileUploaderOverrides,
-  StyleProps,
-} from 'baseui/file-uploader';
+import {FileUploaderOverrides} from 'baseui/file-uploader';
 
 export default class Uploader extends React.Component<
-  {overrides: FileUploaderOverrides<StyleProps>},
+  {overrides: FileUploaderOverrides},
   {progressAmount: number}
 > {
   state = {progressAmount: 0};

documentation-site/examples/fixed-marker/badge-enhancer-text.tsx

@@ -8,7 +8,7 @@ export default function Example() {
       <FixedMarker
         startEnhancer={({size}) => <Show size={size} />}
         badgeEnhancerSize={BADGE_ENHANCER_SIZES.mediumText}
-        badgeEnhancerContent={() => 'New'}
+        badgeEnhancerContent={() => <>New</>}
         overrides={{
           BadgeEnhancer: {
             style: {

documentation-site/examples/form-control/validation.tsx

@@ -26,7 +26,7 @@ export default function Example() {
   const [isValid, setIsValid] = React.useState(false);
   const [isVisited, setIsVisited] = React.useState(false);
   const shouldShowError = !isValid && isVisited;
-  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
+  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const {value} = event.currentTarget;
     setIsValid(validateEmail(value));
     setValue(value);

documentation-site/examples/icon/list.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import {useStyletron} from 'baseui';
-//@ts-ignore
 import * as Icons from 'baseui/icon/icon-exports';
 
 function makeImportStatement(key: string) {

documentation-site/examples/menu/child-render-all.tsx

@@ -45,6 +45,7 @@ export default function Example() {
                 if (item.label === SSR) {
                   return (
                     <StatefulMenu
+                      // @ts-ignore todo:
                       size="compact"
                       items={SSR_SUB_MENU}
                       overrides={{
@@ -57,6 +58,7 @@ export default function Example() {
                 if (item.label === SERVER) {
                   return (
                     <StatefulMenu
+                      // @ts-ignore todo:
                       size="compact"
                       items={SERVER_SUB_MENU}
                       overrides={{

documentation-site/examples/menu/child.tsx

@@ -47,8 +47,8 @@ export default function Example() {
               getChildMenu: (item: {label: string}) => {
                 if (item.label === OPEN_RECENT) {
                   return (
+                    // todo: removed size="compact"
                     <StatefulMenu
-                      size="compact"
                       items={RECENT_FILES}
                       overrides={{
                         List: {style: {width: '200px'}},

documentation-site/examples/progress-steps/dotted.tsx

@@ -59,7 +59,7 @@ function ProgressStepsContainer() {
           placeholder="Choose a color"
           maxDropdownHeight="300px"
           type={TYPE.search}
-          onChange={event => console.log(event)}
+          onChange={(event) => console.log(event)}
         />
         <SpacedButton disabled>Previous</SpacedButton>
         <SpacedButton onClick={() => setCurrent(1)}>

documentation-site/examples/radio/overrides.tsx

@@ -20,7 +20,7 @@ export default function Example() {
   return (
     <RadioGroup
       name="overrides"
-      onChange={e => setValue(e.target.value)}
+      onChange={(e) => setValue(e.target.value)}
       value={value}
     >
       <Radio overrides={radioOverrides} value="1">

documentation-site/examples/select/label.tsx

@@ -3,17 +3,20 @@ import {styled} from 'baseui';
 import {Select, Value} from 'baseui/select';
 import {expandBorderStyles} from 'baseui/styles';
 
-const ColorSwatch = styled('div', (props: any) => {
-  return {
-    width: props.$theme.sizing.scale300,
-    height: props.$theme.sizing.scale300,
-    marginRight: props.$theme.sizing.scale200,
-    display: 'inline-block',
-    backgroundColor: props.$color,
-    verticalAlign: 'baseline',
-    ...expandBorderStyles(props.$theme.borders.border400),
-  };
-});
+const ColorSwatch = styled<'div', {$color: string}>(
+  'div',
+  (props) => {
+    return {
+      width: props.$theme.sizing.scale300,
+      height: props.$theme.sizing.scale300,
+      marginRight: props.$theme.sizing.scale200,
+      display: 'inline-block',
+      backgroundColor: props.$color,
+      verticalAlign: 'baseline',
+      ...expandBorderStyles(props.$theme.borders.border400),
+    };
+  },
+);
 
 const getLabel = ({option}: any) => {
   return (
@@ -38,7 +41,7 @@ function CustomLabel() {
       ]}
       labelKey="id"
       valueKey="color"
-      onChange={options => setValue(options.value)}
+      onChange={(options) => setValue(options.value)}
       value={value}
       getOptionLabel={getLabel}
       getValueLabel={getLabel}