Merge pull request #89 from lidofinance/fix/types

Fix types
lidofinance · May 18, 2021 · 0a447a2 · 0a447a2
2 parents dd47e9b + 7628fef
commit 0a447a2
Show file tree

Hide file tree

Showing 49 changed files with 274 additions and 112 deletions.
diff --git a/packages/accordion/package.json b/packages/accordion/package.json
@@ -7,6 +7,7 @@
   "dependencies": {
     "@lidofinance/icons": "workspace:*",
     "@lidofinance/theme": "workspace:*",
+    "@lidofinance/utils": "workspace:*",
     "react-collapsed": "3.0.2"
   },
   "peerDependencies": {

diff --git a/packages/accordion/src/Accordion.stories.tsx b/packages/accordion/src/Accordion.stories.tsx
@@ -1,11 +1,11 @@
-import { Story } from '@storybook/react'
+import { Story, Meta } from '@storybook/react'
 import { AccordionProps } from './types'
 import Accordion from './Accordion'
 
 export default {
   component: Accordion,
   title: 'Layout/Accordion',
-}
+} as Meta
 
 export const Basic: Story<AccordionProps> = (props) => (
   <Accordion {...props}>

diff --git a/packages/accordion/src/types.ts b/packages/accordion/src/types.ts
@@ -1,6 +1,10 @@
+import { LidoComponentProps } from '@lidofinance/utils'
 export type { Theme } from '@lidofinance/theme'
 
-export type AccordionProps = {
-  defaultExpanded?: boolean
-  summary: React.ReactNode
-} & Omit<JSX.IntrinsicElements['div'], 'ref'>
+export type AccordionProps = LidoComponentProps<
+  'div',
+  {
+    defaultExpanded?: boolean
+    summary: React.ReactNode
+  }
+>
diff --git a/packages/block/package.json b/packages/block/package.json
@@ -5,7 +5,8 @@
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
   "dependencies": {
-    "@lidofinance/theme": "workspace:*"
+    "@lidofinance/theme": "workspace:*",
+    "@lidofinance/utils": "workspace:*"
   },
   "peerDependencies": {
     "react": "17.0.2",

diff --git a/packages/block/src/Block.stories.tsx b/packages/block/src/Block.stories.tsx
@@ -1,4 +1,4 @@
-import { Story } from '@storybook/react'
+import { Story, Meta } from '@storybook/react'
 import { BlockProps, BlockColor, BlockVariant } from './types'
 import Block from './Block'
 
@@ -23,6 +23,6 @@ export default {
       control: 'inline-radio',
     },
   },
-}
+} as Meta
 
 export const Basic: Story<BlockProps> = (props) => <Block {...props} />
diff --git a/packages/block/src/types.tsx b/packages/block/src/types.tsx
@@ -1,3 +1,4 @@
+import { LidoComponentProps } from '@lidofinance/utils'
 export type { Theme } from '@lidofinance/theme'
 
 export enum BlockVariant {
@@ -12,7 +13,10 @@ export enum BlockColor {
 }
 export type BlockColors = keyof typeof BlockColor
 
-export type BlockProps = {
-  color?: BlockColors
-  variant?: BlockVariants
-} & Omit<JSX.IntrinsicElements['div'], 'ref'>
+export type BlockProps = LidoComponentProps<
+  'div',
+  {
+    color?: BlockColors
+    variant?: BlockVariants
+  }
+>
diff --git a/packages/button/package.json b/packages/button/package.json
@@ -6,7 +6,8 @@
   "types": "dist/esm/index.d.ts",
   "dependencies": {
     "@lidofinance/loaders": "workspace:*",
-    "@lidofinance/theme": "workspace:*"
+    "@lidofinance/theme": "workspace:*",
+    "@lidofinance/utils": "workspace:*"
   },
   "peerDependencies": {
     "react": "17.0.2",

diff --git a/packages/button/src/Button.stories.tsx b/packages/button/src/Button.stories.tsx
@@ -1,4 +1,4 @@
-import { Story } from '@storybook/react'
+import { Story, Meta } from '@storybook/react'
 import { Whitepaper } from '@lidofinance/icons'
 import {
   ButtonProps,
@@ -39,7 +39,7 @@ export default {
       control: 'inline-radio',
     },
   },
-}
+} as Meta
 
 export const Basic: Story<ButtonProps> = (props) => <Button {...props} />
 

diff --git a/packages/button/src/types.tsx b/packages/button/src/types.tsx
@@ -1,3 +1,4 @@
+import { LidoComponentProps } from '@lidofinance/utils'
 export type { Theme } from '@lidofinance/theme'
 
 export enum ButtonSize {
@@ -22,14 +23,18 @@ export enum ButtonColor {
 }
 export type ButtonColors = keyof typeof ButtonColor
 
-export type ButtonProps = {
-  size?: ButtonSizes
-  variant?: ButtonVariants
-  color?: ButtonColors
-  fullwidth?: boolean
-  square?: boolean
-  loading?: boolean
-} & Omit<JSX.IntrinsicElements['button'], 'ref' | 'color'>
+export type ButtonProps = LidoComponentProps<
+  'button',
+  {
+    size?: ButtonSizes
+    variant?: ButtonVariants
+    color?: ButtonColors
+    fullwidth?: boolean
+    square?: boolean
+    loading?: boolean
+    as?: never
+  }
+>
 
 export type ButtonIconProps = {
   icon: React.ReactNode

diff --git a/packages/checkbox/package.json b/packages/checkbox/package.json
@@ -6,7 +6,8 @@
   "types": "dist/esm/index.d.ts",
   "dependencies": {
     "@lidofinance/icons": "workspace:*",
-    "@lidofinance/theme": "workspace:*"
+    "@lidofinance/theme": "workspace:*",
+    "@lidofinance/utils": "workspace:*"
   },
   "peerDependencies": {
     "react": "17.0.2",

diff --git a/packages/checkbox/src/Checkbox.stories.tsx b/packages/checkbox/src/Checkbox.stories.tsx
@@ -1,4 +1,4 @@
-import { Story } from '@storybook/react'
+import { Story, Meta } from '@storybook/react'
 import { CheckboxProps } from './types'
 import Checkbox from './Checkbox'
 
@@ -14,7 +14,7 @@ export default {
       table: { disable: true },
     },
   },
-}
+} as Meta
 
 export const Uncontrolled: Story<CheckboxProps> = (props) => (
   <Checkbox {...props} />

diff --git a/packages/checkbox/src/types.ts b/packages/checkbox/src/types.ts
@@ -1,5 +1,10 @@
+import { LidoComponentProps } from '@lidofinance/utils'
 export type { Theme } from '@lidofinance/theme'
 
-export type CheckboxProps = {
-  wrapperRef?: React.RefObject<HTMLLabelElement>
-} & Omit<JSX.IntrinsicElements['input'], 'ref'>
+export type CheckboxProps = LidoComponentProps<
+  'input',
+  {
+    wrapperRef?: React.RefObject<HTMLLabelElement>
+    children?: never
+  }
+>
diff --git a/packages/container/package.json b/packages/container/package.json
@@ -5,7 +5,8 @@
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
   "dependencies": {
-    "@lidofinance/theme": "workspace:*"
+    "@lidofinance/theme": "workspace:*",
+    "@lidofinance/utils": "workspace:*"
   },
   "peerDependencies": {
     "react": "17.0.2",

diff --git a/packages/container/src/Container.stories.tsx b/packages/container/src/Container.stories.tsx
@@ -42,10 +42,10 @@ Base.argTypes = {
 
 export const PageLayout: Story = () => (
   <>
-    <Container size='full'>
+    <Container as='header' size='full'>
       <StyledDiv>Header</StyledDiv>
     </Container>
-    <Container size='content'>
+    <Container as='main' size='content'>
       <StyledDiv
         style={{
           margin: '20px 0',
@@ -55,7 +55,7 @@ export const PageLayout: Story = () => (
         Content
       </StyledDiv>
     </Container>
-    <Container size='full'>
+    <Container as='footer' size='full'>
       <StyledDiv>Footer</StyledDiv>
     </Container>
   </>

diff --git a/packages/container/src/types.tsx b/packages/container/src/types.tsx
@@ -1,3 +1,4 @@
+import { LidoComponentProps } from '@lidofinance/utils'
 export type { Theme } from '@lidofinance/theme'
 
 export enum ContainerSize {
@@ -6,6 +7,9 @@ export enum ContainerSize {
 }
 export type ContainerSizes = keyof typeof ContainerSize
 
-export type ContainerProps = {
-  size?: ContainerSizes
-} & Omit<JSX.IntrinsicElements['div'], 'ref'>
+export type ContainerProps = LidoComponentProps<
+  'div',
+  {
+    size?: ContainerSizes
+  }
+>
diff --git a/packages/divider/package.json b/packages/divider/package.json
@@ -5,7 +5,8 @@
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
   "dependencies": {
-    "@lidofinance/theme": "workspace:*"
+    "@lidofinance/theme": "workspace:*",
+    "@lidofinance/utils": "workspace:*"
   },
   "peerDependencies": {
     "react": "17.0.2",

diff --git a/packages/divider/src/Divider.stories.tsx b/packages/divider/src/Divider.stories.tsx
@@ -1,4 +1,4 @@
-import { Story } from '@storybook/react'
+import { Story, Meta } from '@storybook/react'
 import { DividerIndent, DividerProps, DividerType, DividerTypes } from './types'
 import Divider from './Divider'
 import styled from 'styled-components'
@@ -23,7 +23,7 @@ export default {
       control: 'inline-radio',
     },
   },
-}
+} as Meta
 
 const Wrapper = styled.div<{ $type?: DividerTypes }>`
   color: ${({ theme }) => theme.colors.text};

diff --git a/packages/divider/src/types.tsx b/packages/divider/src/types.tsx
@@ -1,3 +1,4 @@
+import { LidoComponentProps } from '@lidofinance/utils'
 export type { Theme } from '@lidofinance/theme'
 
 export enum DividerType {
@@ -15,7 +16,11 @@ export enum DividerIndent {
 }
 export type DividerIndents = keyof typeof DividerIndent
 
-export type DividerProps = {
-  type?: DividerTypes
-  indents?: DividerIndents
-} & Omit<JSX.IntrinsicElements['div'], 'ref'>
+export type DividerProps = LidoComponentProps<
+  'div',
+  {
+    type?: DividerTypes
+    indents?: DividerIndents
+    children?: never
+  }
+>
diff --git a/packages/heading/package.json b/packages/heading/package.json
@@ -5,7 +5,8 @@
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
   "dependencies": {
-    "@lidofinance/theme": "workspace:*"
+    "@lidofinance/theme": "workspace:*",
+    "@lidofinance/utils": "workspace:*"
   },
   "peerDependencies": {
     "react": "17.0.2",

diff --git a/packages/heading/src/Heading.stories.tsx b/packages/heading/src/Heading.stories.tsx
@@ -1,4 +1,4 @@
-import { Story } from '@storybook/react'
+import { Story, Meta } from '@storybook/react'
 import Heading, { H1, H2, H3 } from './Heading'
 import { HeadingProps, HeadingColor, HeadingSize, HProps } from './types'
 
@@ -21,7 +21,7 @@ export default {
       control: 'inline-radio',
     },
   },
-}
+} as Meta
 
 export const Basic: Story<HeadingProps> = (props) => <Heading {...props} />
 

diff --git a/packages/heading/src/types.ts b/packages/heading/src/types.ts
@@ -1,3 +1,5 @@
+import { LidoComponentProps } from '@lidofinance/utils'
+
 export enum HeadingColor {
   text,
   secondary,
@@ -11,11 +13,18 @@ export enum HeadingSize {
 }
 export type HeadingSizes = keyof typeof HeadingSize
 
-export type HeadingProps = {
-  color?: HeadingColors
-  size?: HeadingSizes
-} & Omit<JSX.IntrinsicElements['div'], 'ref'>
+export type HeadingProps = LidoComponentProps<
+  'div',
+  {
+    color?: HeadingColors
+    size?: HeadingSizes
+  }
+>
 
-export type HProps<T extends 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'> = {
-  color?: HeadingColor
-} & Omit<JSX.IntrinsicElements[T], 'ref'>
+export type HProps<T extends 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'> =
+  LidoComponentProps<
+    T,
+    {
+      color?: HeadingColors
+    }
+  >
diff --git a/packages/icons/src/Icon.stories.tsx b/packages/icons/src/Icon.stories.tsx
@@ -1,4 +1,4 @@
-import { Story } from '@storybook/react'
+import { Story, Meta } from '@storybook/react'
 import { Theme } from '@lidofinance/theme'
 import styled, { useTheme } from 'styled-components'
 import * as components from './index'
@@ -8,7 +8,7 @@ const iconKeys = Object.keys(components) as IconVariants[]
 
 export default {
   title: 'Images/Icons',
-}
+} as Meta
 
 export const Base: Story<{ color: string; type: IconVariants }> = (props) => {
   const theme: Theme = useTheme()

diff --git a/packages/identicon/package.json b/packages/identicon/package.json
@@ -6,6 +6,7 @@
   "types": "dist/esm/index.d.ts",
   "dependencies": {
     "@lidofinance/theme": "workspace:*",
+    "@lidofinance/utils": "workspace:*",
     "react-jazzicon": "0.1.3"
   },
   "peerDependencies": {

diff --git a/packages/identicon/src/Identicon.stories.tsx b/packages/identicon/src/Identicon.stories.tsx
@@ -1,4 +1,4 @@
-import { Story } from '@storybook/react'
+import { Story, Meta } from '@storybook/react'
 import { IdenticonProps, IdenticonBadgeProps } from './types'
 import Identicon from './Identicon'
 import IdenticonBadge from './IdenticonBadge'
@@ -16,7 +16,7 @@ export default {
       control: { type: 'range', min: 4, max: 64, step: 4 },
     },
   },
-}
+} as Meta
 
 export const Basic: Story<IdenticonProps> = (props) => <Identicon {...props} />
 

diff --git a/packages/identicon/src/types.ts b/packages/identicon/src/types.ts
@@ -1,11 +1,15 @@
+import { LidoComponentProps } from '@lidofinance/utils'
 export type { Theme } from '@lidofinance/theme'
 
-export type IdenticonProps = {
-  address: string
-  diameter?: number
-  paperStyles?: React.CSSProperties
-  svgStyles?: React.CSSProperties
-} & Omit<JSX.IntrinsicElements['div'], 'ref' | 'children'>
+export type IdenticonProps = LidoComponentProps<
+  'div',
+  {
+    address: string
+    diameter?: number
+    paperStyles?: React.CSSProperties
+    svgStyles?: React.CSSProperties
+  }
+>
 
 export type IdenticonBadgeProps = {
   symbols?: number