refactor: review fixes

atls · May 20, 2024 · 5659cb9 · 5659cb9
1 parent 9bc06d1
commit 5659cb9
Show file tree

Hide file tree

Showing 20 changed files with 81 additions and 72 deletions.
diff --git a/app/entrypoints/renderer/src/app/layout.tsx b/app/entrypoints/renderer/src/app/layout.tsx
@@ -1,9 +1,15 @@
-import React from 'react'
+'use client'
+
+import React             from 'react'
+
+import { ThemeProvider } from '@ui/theme'
 
 const RootLayout = ({ children }) => (
-  <html>
-    <body>{children}</body>
-  </html>
+  <ThemeProvider>
+    <html>
+      <body>{children}</body>
+    </html>
+  </ThemeProvider>
 )
 
 export default RootLayout
diff --git a/app/entrypoints/renderer/src/app/page.tsx b/app/entrypoints/renderer/src/app/page.tsx
@@ -1,9 +1,7 @@
 'use client'
 
-import React             from 'react'
+import React from 'react'
 
-import { ThemeProvider } from '@ui/theme'
-
-const Page = () => <ThemeProvider>page</ThemeProvider>
+const Page = () => <>page</>
 
 export default Page
diff --git a/ui/dropdown/src/button/button.component.tsx b/ui/dropdown/src/button/button.component.tsx
@@ -3,6 +3,7 @@ import { Box }                          from '@atls-ui-parts/layout'
 
 import React                            from 'react'
 import { FC }                           from 'react'
+import { PropsWithChildren }            from 'react'
 import { useHover }                     from 'react-laag'
 
 import { DropdownButtonProps }          from './button.interfaces'
@@ -18,7 +19,7 @@ const DropdownButtonContainer = styled(Box)<DropdownButtonContainerProps>(
   appearanceButtonStyles
 )
 
-export const DropdownButton: FC<DropdownButtonProps> = ({
+export const DropdownButton: FC<PropsWithChildren<DropdownButtonProps>> = ({
   triggerProps,
   onClick,
   isOpen,
@@ -34,7 +35,7 @@ export const DropdownButton: FC<DropdownButtonProps> = ({
       hover={hover}
       {...hoverProps}
     >
-      <DotComponent />
+      <DotComponent count={3} />
       {children}
     </DropdownButtonContainer>
   )

diff --git a/ui/dropdown/src/button/button.interfaces.ts b/ui/dropdown/src/button/button.interfaces.ts
@@ -1,10 +1,9 @@
-import { BoxProps } from '@atls-ui-parts/layout'
+import { BoxProps }     from '@atls-ui-parts/layout'
 
-import { JSX }      from 'react'
+import { TriggerProps } from 'react-laag'
 
 export interface DropdownButtonProps extends BoxProps {
-  children?: JSX.Element | string
-  triggerProps: object
+  triggerProps: TriggerProps
   onClick: VoidFunction
   isOpen: boolean
 }

diff --git a/ui/dropdown/src/button/button.styles.ts b/ui/dropdown/src/button/button.styles.ts
@@ -8,7 +8,7 @@ export const baseButtonStyles: styleFn = ({ theme }) => ({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
-  gap: 3,
+  gap: theme.spaces.dropdown.button.gap,
 })
 
 export const sizeButtonStyles: styleFn = ({ theme }) => ({

diff --git a/ui/dropdown/src/button/dot/dot.component.tsx b/ui/dropdown/src/button/dot/dot.component.tsx
@@ -1,15 +1,14 @@
 import styled                  from '@emotion/styled'
 import { Box }                 from '@atls-ui-parts/layout'
+import { BoxProps }            from '@atls-ui-parts/layout'
 
 import React                   from 'react'
-import { FunctionComponent }   from 'react'
+import { FC }                  from 'react'
 
+import { DotProps }            from './dot.iterfaces'
 import { sizeDotStyles }       from './dot.styles'
 import { appearanceDotStyles } from './dot.styles'
 
-const Dot = styled(Box)<any>(sizeDotStyles, appearanceDotStyles)
+const Dot = styled(Box)<BoxProps>(sizeDotStyles, appearanceDotStyles)
 
-export const DotComponent: FunctionComponent<any> = () => {
-  const dotsCount = 3
-  return Array(dotsCount).fill(<Dot />)
-}
+export const DotComponent: FC<DotProps> = ({ count }) => Array(count).fill(<Dot />)
diff --git a/ui/dropdown/src/button/dot/dot.iterfaces.ts b/ui/dropdown/src/button/dot/dot.iterfaces.ts
@@ -0,0 +1,3 @@
+export interface DotProps {
+  count: number
+}
diff --git a/ui/dropdown/src/child-container/child-container.component.tsx b/ui/dropdown/src/child-container/child-container.component.tsx
@@ -3,6 +3,7 @@ import { Box }                            from '@atls-ui-parts/layout'
 
 import React                              from 'react'
 import { FC }                             from 'react'
+import { PropsWithChildren }              from 'react'
 
 import { ChildContainerProps }            from './child-container.interfaces'
 import { baseChildContainerStyles }       from './child-container.styles'
@@ -15,8 +16,11 @@ const StyledBox = styled(Box)<any>(
   appearanceChildContainerStyles
 )
 
-export const ChildContainer: FC<ChildContainerProps> = ({ layerProps, children }) => {
-  const childrenContainerHandler = (e) => {
+export const ChildContainer: FC<PropsWithChildren<ChildContainerProps>> = ({
+  layerProps,
+  children,
+}) => {
+  const childrenContainerHandler = (e: Event): void => {
     e.stopPropagation()
   }
 

diff --git a/ui/dropdown/src/child-container/child-container.interfaces.ts b/ui/dropdown/src/child-container/child-container.interfaces.ts
@@ -1,6 +1,5 @@
-import { JSX } from 'react'
+import { LayerProps } from 'react-laag'
 
 export interface ChildContainerProps {
-  layerProps: object
-  children: JSX.Element
+  layerProps: LayerProps
 }
diff --git a/ui/dropdown/src/dropdown.component.tsx b/ui/dropdown/src/dropdown.component.tsx
@@ -1,15 +1,16 @@
-import { Box }            from '@atls-ui-parts/layout'
+import { Box }               from '@atls-ui-parts/layout'
 
-import React              from 'react'
-import { FC }             from 'react'
-import { useState }       from 'react'
-import { useLayer }       from 'react-laag'
+import React                 from 'react'
+import { FC }                from 'react'
+import { PropsWithChildren } from 'react'
+import { useState }          from 'react'
+import { useLayer }          from 'react-laag'
 
-import { DropdownButton } from './button/button.component'
-import { ChildContainer } from './child-container'
-import { DropdownProps }  from './dropdown.interface'
+import { DropdownButton }    from './button/button.component'
+import { ChildContainer }    from './child-container'
+import { DropdownProps }     from './dropdown.interface'
 
-export const Dropdown: FC<DropdownProps> = ({ children }) => {
+export const Dropdown: FC<PropsWithChildren<DropdownProps>> = ({ children }) => {
   const [isOpen, setOpen] = useState(false)
 
   const buttonClickHandler = () => setOpen(!isOpen)
@@ -28,11 +29,10 @@ export const Dropdown: FC<DropdownProps> = ({ children }) => {
   })
 
   return (
-    <>
-      <DropdownButton triggerProps={triggerProps} isOpen={isOpen} onClick={buttonClickHandler} />
+    <DropdownButton triggerProps={triggerProps} isOpen={isOpen} onClick={buttonClickHandler}>
       {renderLayer(
         <Box>{isOpen && <ChildContainer layerProps={layerProps}>{children}</ChildContainer>}</Box>
       )}
-    </>
+    </DropdownButton>
   )
 }
diff --git a/ui/dropdown/src/dropdown.interface.ts b/ui/dropdown/src/dropdown.interface.ts
@@ -1,6 +1 @@
-import { InputHTMLAttributes } from 'react'
-import { JSX }                 from 'react'
-
-export interface DropdownProps extends Omit<InputHTMLAttributes<any>, 'onChange'> {
-  children: JSX.Element
-}
+export interface DropdownProps {}
diff --git a/ui/input/src/input.styles.ts b/ui/input/src/input.styles.ts
@@ -5,7 +5,7 @@ import { switchProp } from 'styled-tools'
 export const shapeStyles: styleFn = ({ theme }) => ({
   fontFamily: theme.fonts.primary,
   size: 52,
-  fontWeight: 400,
+  fontWeight: theme.fontWeight.normal,
   fontSize: theme.fontSizes.small.semiLarge,
   borderRadius: theme.radii.f9,
   padding: theme.spaces.input.padding,

diff --git a/ui/modal/src/child-container/child-container.styles.ts b/ui/modal/src/child-container/child-container.styles.ts
@@ -5,13 +5,17 @@ export const baseChildContainerStyles: styleFn = ({ theme }) => ({
   WebkitTapHighlightColor: 'transparent',
 })
 
-export const sizeChildContainerStyles: styleFn = () => ({
-  width: '486px',
-  height: 'min-content',
-  maxWidth: 'calc(100% - 24px)',
-  maxHeight: 'calc(100% - 24px)',
-  margin: 'auto',
-  padding: '12px 24px',
+const WIDTH = '486px'
+const HEIGHT = 'min-content'
+const MAX_WIDTH = 'calc(100% - 24px)'
+const MAX_HEIGHT = 'calc(100% - 24px)'
+export const sizeChildContainerStyles: styleFn = ({ theme }) => ({
+  width: WIDTH,
+  height: HEIGHT,
+  maxWidth: MAX_WIDTH,
+  maxHeight: MAX_HEIGHT,
+  margin: theme.spaces.modal.childContainer.margin,
+  padding: theme.spaces.modal.childContainer.padding,
 })
 
 export const appearanceChildContainerStyles: styleFn = ({ theme }) => ({

diff --git a/ui/modal/src/modal.component.tsx b/ui/modal/src/modal.component.tsx
@@ -1,16 +1,18 @@
-import { Condition }      from '@atls-ui-parts/condition'
-import { Portal }         from '@atls-ui-parts/portal'
+import { Condition }         from '@atls-ui-parts/condition'
+import { Portal }            from '@atls-ui-parts/portal'
 
-import React              from 'react'
-import { FC }             from 'react'
+import React                 from 'react'
+import { FC }                from 'react'
+import { PropsWithChildren } from 'react'
+import { MouseEventHandler } from 'react'
 
-import { Backdrop }       from './backdrop'
-import { ChildContainer } from './child-container'
-import { Container }      from './container'
-import { ModalProps }     from './modal.interfaces'
+import { Backdrop }          from './backdrop'
+import { ChildContainer }    from './child-container'
+import { Container }         from './container'
+import { ModalProps }        from './modal.interfaces'
 
-const Modal: FC<ModalProps> = ({ children, open }) => {
-  const childrenContainerHandler = (e) => {
+const Modal: FC<PropsWithChildren<ModalProps>> = ({ children, open }) => {
+  const childrenContainerHandler: MouseEventHandler<HTMLDivElement> = (e) => {
     e.stopPropagation()
   }
 

diff --git a/ui/modal/src/modal.interfaces.ts b/ui/modal/src/modal.interfaces.ts
@@ -1,6 +1,3 @@
-import { JSX } from 'react'
-
 export interface ModalProps {
   open: boolean
-  children: JSX.Element
 }
diff --git a/ui/switch/src/icon-switch/icon-switch.component.tsx b/ui/switch/src/icon-switch/icon-switch.component.tsx
@@ -5,6 +5,7 @@ import { useSwitch }              from '@atls-ui-parts/switch'
 
 import React                      from 'react'
 import { FC }                     from 'react'
+import { PropsWithChildren }      from 'react'
 import { useRef }                 from 'react'
 
 import { IconSwitchProps }        from './icon-switch.interfaces'
@@ -18,7 +19,7 @@ const IconSwitchContainer = styled(HandleElement)(
   shapeHandleStyles
 )
 
-const IconSwitch: FC<IconSwitchProps> = ({
+const IconSwitch: FC<PropsWithChildren<IconSwitchProps>> = ({
   disabled = false,
   checked: defaultValue,
   onChange,

diff --git a/ui/switch/src/icon-switch/icon-switch.interfaces.ts b/ui/switch/src/icon-switch/icon-switch.interfaces.ts
@@ -1,5 +1,3 @@
 import { SwitchProps } from '@atls-ui-parts/switch'
 
-export interface IconSwitchProps extends SwitchProps {
-  children: JSX.Element
-}
+export interface IconSwitchProps extends SwitchProps {}
diff --git a/ui/switch/src/theme-switch/thumb/thumb.element.tsx b/ui/switch/src/theme-switch/thumb/thumb.element.tsx
@@ -3,6 +3,7 @@ import { Box }                   from '@atls-ui-parts/layout'
 
 import React                     from 'react'
 import { FC }                    from 'react'
+import { PropsWithChildren }     from 'react'
 
 import { ThumbElementProps }     from './thumb.interfaces'
 import { baseThumbStyles }       from './thumb.styles'
@@ -17,7 +18,7 @@ const ThumbElementContainer = styled(Box)<any>(
   appearanceThumbStyles
 )
 
-const ThumbElement: FC<ThumbElementProps> = ({ checked, hover, children }) => (
+const ThumbElement: FC<PropsWithChildren<ThumbElementProps>> = ({ checked, hover, children }) => (
   <ThumbElementContainer checked={checked} hover={hover}>
     {children}
   </ThumbElementContainer>

diff --git a/ui/switch/src/theme-switch/thumb/thumb.interfaces.ts b/ui/switch/src/theme-switch/thumb/thumb.interfaces.ts
@@ -3,7 +3,6 @@ import { ThumbElementProps as BaseThumbElementProps } from '@atls-ui-parts/switc
 export interface ThumbElementProps extends BaseThumbElementProps {
   active: boolean
   hover: boolean
-  children: JSX.Element
 }
 
 export interface ThumbComponentProps extends BaseThumbElementProps {

diff --git a/ui/theme/src/theme/spaces.ts b/ui/theme/src/theme/spaces.ts
@@ -12,13 +12,14 @@ export const spaces = {
     button: {
       width: 40,
       height: 28,
+      gap: 3,
     },
   },
   input: {
     padding: 18,
   },
   modal: {
-    constainer: {
+    container: {
       position: 'fixed',
       zIndex: 1300,
       bottom: 0,
@@ -35,6 +36,8 @@ export const spaces = {
       right: 0,
     },
     childContainer: {
+      margin: 'auto',
+      padding: '12px 24px',
       position: 'fixed',
       display: 'flex',
       flexDirection: 'column',