chore: many types are made explicit

LexSwed · Dec 8, 2020 · cd4993d · cd4993d
1 parent c3014ac
commit cd4993d
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 12 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,5 +1,8 @@
 {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.formatOnSave": true,
-    "typescript.tsdk": "/Users/lexswed/git/complete-core/node_modules/typescript/lib"
+    "typescript.tsdk": "/Users/lexswed/git/complete-core/node_modules/typescript/lib",
+    "[typescriptreact]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    }
 }
diff --git a/src/lib/Box/Box.tsx b/src/lib/Box/Box.tsx
@@ -6,14 +6,6 @@ import type { CssProperties } from '../utils';
 
 const Div = styled('div', {});
 
-/** Not all properties supported */
-type Props = Omit<StitchesProps<typeof Div>, 'as'> &
-  {
-    [prop in typeof acceptedProperties[number]]?: CssProperties[prop];
-  } & {
-    as?: JSX.IntrinsicElements | React.ElementType;
-  };
-
 const Box: React.FC<Props> = ({ children, css, ...props }) => {
   const [style, attrs] = Object.entries(props).reduce(
     (res, [key, value]: [any, any]) => {
@@ -109,5 +101,14 @@ const acceptedProperties: readonly (keyof CssProperties)[] = [
   'borderLeft',
   'boxShadow',
 ] as const;
+/** Not all properties supported */
+export interface Props extends Omit<BoxProps, 'as' | 'translate' | 'color'>, CustomField {
+  as?: JSX.IntrinsicElements | React.ElementType;
+}
+
+type CustomField = {
+  [prop in typeof acceptedProperties[number]]?: CssProperties[prop];
+};
+type BoxProps = StitchesProps<typeof Div>;
 
 const VALID_ITEMS = new Set<keyof CssProperties>(acceptedProperties);
diff --git a/src/lib/Button/Button.tsx b/src/lib/Button/Button.tsx
@@ -135,7 +135,9 @@ const ButtonRoot = styled(FlexBox as FlexType<'button'>, {
   },
 });
 
-const Button = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof ButtonRoot>>(
+interface Props extends React.ComponentProps<typeof ButtonRoot> {}
+
+const Button = React.forwardRef<HTMLButtonElement, Props>(
   ({ variant = 'primary', size = 'md', space = '$2', type = 'button', css, style, className, ...props }, ref) => {
     return (
       <ButtonRoot

diff --git a/src/lib/Flex/Flex.tsx b/src/lib/Flex/Flex.tsx
@@ -84,7 +84,9 @@ export const FlexBox = styled('div', {
   },
 });
 
-const Flex = React.forwardRef<unknown, StitchesProps<typeof FlexBox>>(
+export interface Props extends StitchesProps<typeof FlexBox> {}
+
+const Flex = React.forwardRef<unknown, Props>(
   ({ space = 'none', flow = 'column', wrap = 'nowrap', main = 'start', cross = 'start', ...props }, ref) => {
     return <FlexBox space={space} flow={flow} wrap={wrap} main={main} cross={cross} {...props} ref={ref as any} />;
   }

diff --git a/src/lib/ListItem/ListItem.tsx b/src/lib/ListItem/ListItem.tsx
@@ -39,7 +39,9 @@ const Item = styled(FlexBox as FlexType<'li'>, {
   },
 });
 
-type Props = { disabled?: boolean } & StitchesProps<typeof Item>;
+export interface Props extends StitchesProps<typeof Item> {
+  disabled?: boolean;
+}
 
 const ListItem = React.forwardRef<HTMLLIElement, Props>(
   ({ flow = 'row', cross = 'center', space = '$2', disabled, as = 'li', ...props }, ref) => {