lint updates

wri · Nov 11, 2024 · 16b126d · 16b126d
1 parent 4dd0dfe
commit 16b126d
Show file tree

Hide file tree

Showing 11 changed files with 104 additions and 68 deletions.
diff --git a/README.md b/README.md
@@ -1,32 +1,41 @@
 # wri-design-systems
+
 WRI UI Library
 
 ## Requirements
+
 Node: `20.16.0`
 
 React: `18.3.1`
 
 ## Installation
+
 ```
 yarn add wri-design-systems
 ```
+
 or
+
 ```
 npm i wri-design-systems
 ```
 
 ## Other dependecies
+
 ```
 yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
 ```
+
 or
+
 ```
 npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
 ```
 
-
 ## Usage
+
 ### Create the Project Theme
+
 With this custom theme you can change the color scheme according to your Project Theme
 
 ```
@@ -57,6 +66,7 @@ export const projectTheme = extendTheme({
 ```
 
 ### Wrap ChakraProvider at the root of your app
+
 ```
 import * as React from 'react'
 import { projectTheme } from './lib/theme'
@@ -75,16 +85,20 @@ function App() {
 ```
 
 ## Components
+
 ### General
-* [Button](https://github.com/wri/wri-design-systems/tree/main/src/components/Button)
-* [NavigationRail](https://github.com/wri/wri-design-systems/tree/main/src/components/NavigationRail)
-* [TabBar](https://github.com/wri/wri-design-systems/tree/main/src/components/TabBar)
+
+- [Button](https://github.com/wri/wri-design-systems/tree/main/src/components/Button)
+- [NavigationRail](https://github.com/wri/wri-design-systems/tree/main/src/components/NavigationRail)
+- [TabBar](https://github.com/wri/wri-design-systems/tree/main/src/components/TabBar)
 
 ### Controls
-* [Checkbox](https://github.com/wri/wri-design-systems/tree/main/src/components/Checkbox)
-* [Radio](https://github.com/wri/wri-design-systems/tree/main/src/components/Radio)
-* [Switch](https://github.com/wri/wri-design-systems/tree/main/src/components/Switch)
+
+- [Checkbox](https://github.com/wri/wri-design-systems/tree/main/src/components/Checkbox)
+- [Radio](https://github.com/wri/wri-design-systems/tree/main/src/components/Radio)
+- [Switch](https://github.com/wri/wri-design-systems/tree/main/src/components/Switch)
 
 ### Layers
-* [LayerItem](https://github.com/wri/wri-design-systems/tree/main/src/components/LayerGroup)
-* [LayerItem](https://github.com/wri/wri-design-systems/tree/main/src/components/LayerItem)
+
+- [LayerGroup](https://github.com/wri/wri-design-systems/tree/main/src/components/LayerGroup)
+- [LayerItem](https://github.com/wri/wri-design-systems/tree/main/src/components/LayerItem)
diff --git a/src/components/Button/README.md b/src/components/Button/README.md
@@ -1,7 +1,9 @@
 # Button
+
 [Storybook Ref](https://wri.github.io/wri-design-systems/?path=/docs/button--docs)
 
 ## Import
+
 ```
 import { Button } from 'wri-design-systems'
 ```
@@ -16,6 +18,7 @@ import { Button } from 'wri-design-systems'
 ```
 
 ## Props
+
 ```
 type ButtonProps = Omit<
   ChakraButtonProps,
@@ -29,10 +32,10 @@ type ButtonProps = Omit<
 }
 ```
 
-
 ## Button Variants
 
 ### Primary
+
 ```
 <Button
   label='Primary'
@@ -41,6 +44,7 @@ type ButtonProps = Omit<
 ```
 
 ### Secondary
+
 ```
 <Button
   label='Secondary'
@@ -49,6 +53,7 @@ type ButtonProps = Omit<
 ```
 
 ### Borderless
+
 ```
 <Button
   label='Borderless'
@@ -57,6 +62,7 @@ type ButtonProps = Omit<
 ```
 
 ### Outline
+
 ```
 <Button
   label='Outline'
@@ -67,6 +73,7 @@ type ButtonProps = Omit<
 ## Button Sizes
 
 ### Default
+
 ```
 <Button
   label="Primary"
@@ -76,6 +83,7 @@ type ButtonProps = Omit<
 ```
 
 ### Small
+
 ```
 <Button
   label="Primary"
@@ -87,6 +95,7 @@ type ButtonProps = Omit<
 ## Button with Icon
 
 ### Left Icon
+
 ```
 <Button
   label="Outline"
@@ -96,6 +105,7 @@ type ButtonProps = Omit<
 ```
 
 ### Right Icon
+
 ```
 <Button
   label="Outline"
@@ -107,6 +117,7 @@ type ButtonProps = Omit<
 ## Other Props
 
 ### Disabled
+
 ```
 <Button
   label="Primary"
@@ -116,6 +127,7 @@ type ButtonProps = Omit<
 ```
 
 ### Loading state
+
 ```
 <Button
   label="Primary"

diff --git a/src/components/Layer/LayerGroup/LayerGroup.stories.tsx b/src/components/Layer/LayerGroup/LayerGroup.stories.tsx
@@ -54,7 +54,7 @@ export const LayerGroupOpen: Story = {
           ]}
         />
       </>
-    )
+    ),
   },
 }
 
@@ -100,6 +100,6 @@ export const LayerGroupWithRadios: Story = {
           ]}
         />
       </>
-    )
+    ),
   },
 }
diff --git a/src/components/Layer/LayerGroup/index.tsx b/src/components/Layer/LayerGroup/index.tsx
@@ -13,17 +13,16 @@ import { getThemedColor } from '../../../lib/theme'
 import ActiveTag from '../../Tag/ActiveTag'
 import LayerItem from '../LayerItem'
 
-const LayerGroup = ({
-  label,
-  caption,
-  layerItems,
-}: LayerGroupProps) => {
-  const [activeItems, setActiveItems] = useState<{ key?: string, value?: boolean }>({})
+const LayerGroup = ({ label, caption, layerItems }: LayerGroupProps) => {
+  const [activeItems, setActiveItems] = useState<{
+    key?: string
+    value?: boolean
+  }>({})
   const theme = useTheme()
 
   useEffect(() => {
     let newActiveItems = { ...activeItems }
-    layerItems.forEach(item => {
+    layerItems.forEach((item) => {
       newActiveItems = {
         ...newActiveItems,
         [item.name]: item.isDefaultSelected,
@@ -33,7 +32,10 @@ const LayerGroup = ({
     setActiveItems(newActiveItems)
   }, [])
 
-  const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>, onChange: ((e: React.ChangeEvent<HTMLInputElement>) => void) | undefined) => {
+  const handleOnChange = (
+    e: React.ChangeEvent<HTMLInputElement>,
+    onChange: ((e: React.ChangeEvent<HTMLInputElement>) => void) | undefined,
+  ) => {
     const newActiveItems = {
       ...activeItems,
       [e.target.name]: e.target.checked,
@@ -46,8 +48,9 @@ const LayerGroup = ({
     }
   }
 
-  const getActiveCount = Object.values(activeItems)
-    .filter(item => item === true).length
+  const getActiveCount = Object.values(activeItems).filter(
+    (item) => item === true,
+  ).length
 
   return (
     <div style={{ width: '300px' }}>
@@ -57,10 +60,7 @@ const LayerGroup = ({
             style={{ alignItems: 'flex-start' }}
             _hover={{ backgroundColor: 'transparent' }}
           >
-            <LayerGroupTitle
-              as='span'
-              flex='1'
-            >
+            <LayerGroupTitle as='span' flex='1'>
               {label}
               <ActiveTag count={getActiveCount} />
             </LayerGroupTitle>
@@ -71,12 +71,10 @@ const LayerGroup = ({
             />
           </AccordionButton>
         </h2>
-        <LayerGroupCaption>
-          {caption}
-        </LayerGroupCaption>
+        <LayerGroupCaption>{caption}</LayerGroupCaption>
         <AccordionPanel pb={0}>
           <RadioGroup name={label}>
-            {layerItems.map(layerItem => (
+            {layerItems.map((layerItem) => (
               <LayerItem
                 {...layerItem}
                 onChange={(e) => handleOnChange(e, layerItem.onChange)}

diff --git a/src/components/Layer/LayerGroup/styled.ts b/src/components/Layer/LayerGroup/styled.ts
@@ -2,7 +2,7 @@ import styled from '@emotion/styled'
 import { Box } from '@chakra-ui/react'
 import { getThemedColor, ThemeProps } from '../../../lib/theme'
 
-export const LayerGroupTitle = styled(Box) <{
+export const LayerGroupTitle = styled(Box)<{
   theme?: ThemeProps
 }>`
   font-size: 16px;
@@ -16,7 +16,7 @@ export const LayerGroupTitle = styled(Box) <{
   gap: 10px;
 `
 
-export const LayerGroupCaption = styled(Box) <{
+export const LayerGroupCaption = styled(Box)<{
   theme?: ThemeProps
 }>`
   font-size: 12px;

diff --git a/src/components/Layer/LayerGroup/types.ts b/src/components/Layer/LayerGroup/types.ts
@@ -1,10 +1,7 @@
 import { AccordionProps } from '@chakra-ui/react'
 import { LayerItemProps } from '../LayerItem/types'
 
-export type LayerGroupContainerProps = Omit<
-  AccordionProps,
-  'onChange'
-> & {
+export type LayerGroupContainerProps = Omit<AccordionProps, 'onChange'> & {
   allowMultiple?: boolean
   allowToggle?: boolean
   defaultIndex?: number[]

diff --git a/src/components/Layer/LayerItem/index.tsx b/src/components/Layer/LayerItem/index.tsx
@@ -37,13 +37,16 @@ const LayerItem = ({
             name={name}
             isDisabled={isDisabled}
             defaultChecked={isDefaultSelected}
-            onChange={onChange ? (e) => onChange(e) : () => { }}
+            onChange={onChange ? (e) => onChange(e) : () => {}}
           />
         </SwitchContainer>
       ) : (
         <div>
-          <Radio label={label} value={name} isDisabled={isDisabled}
-            onChange={onChange ? (e) => onChange(e) : () => { }}
+          <Radio
+            label={label}
+            value={name}
+            isDisabled={isDisabled}
+            onChange={onChange ? (e) => onChange(e) : () => {}}
           />
           <LayerCaption style={{ marginLeft: '28px' }}>{caption}</LayerCaption>
         </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -54,7 +54,7 @@ export const LayerGroupOpen: Story = { @@
               ]}
             />
           </>
-        )
+        ),
       },
     }
@@ Expand Down Expand Up / @@ -100,6 +100,6 @@ export const LayerGroupWithRadios: Story = { @@
               ]}
             />
           </>
-        )
+        ),
       },
     }