test: fix old tests, add react scripts

.prettierrc

@@ -1,5 +1,6 @@
 {
   "semi": false,
   "singleQuote": true,
-  "printWidth": 80
+  "printWidth": 80,
+  "endOfLine": "auto"
 }

package.json

@@ -71,6 +71,7 @@
     "react-dom": "^17.0.1",
     "react-feather": "^2.0.8",
     "react-markdown": "^5.0.3",
+    "react-scripts": "^4.0.3",
     "react-transition-group": "^4.4.1",
     "remark-gfm": "^1.0.0",
     "rollup": "^2.28.2",
@@ -82,7 +83,7 @@
     "storybook-dark-mode": "^1.0.4",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.1",
     "typedoc": "^0.19.1",
-    "typescript": "^4.0.2"
+    "typescript": "4.2.2"
   },
   "browserslist": {
     "production": [
@@ -95,5 +96,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "jest": {
+    "transformIgnorePatterns": [
+      "/node_modules/(?!react-feather)"
+    ]
   }
 }

src/components/Accordion/Accordion.tsx

@@ -6,8 +6,9 @@ import { IconChevronUp } from '../Icon/icons/IconChevronUp'
 import Typography from '../Typography'
 
 type ContextValue = Required<
-  Pick<AccordionProps, 'defaultActiveId' | 'icon' | 'iconPosition' | 'onChange'>
->
+  Pick<AccordionProps, 'defaultActiveId' | 'icon' | 'iconPosition'>
+> &
+  Pick<AccordionProps, 'onChange'>
 
 const AccordionContext = createContext<ContextValue>({
   defaultActiveId: [],
@@ -69,9 +70,8 @@ interface ItemProps {
 }
 
 export function Item({ children, className, label, id }: ItemProps) {
-  const { defaultActiveId, icon, iconPosition, onChange } = useContext(
-    AccordionContext
-  )
+  const { defaultActiveId, icon, iconPosition, onChange } =
+    useContext(AccordionContext)
 
   let panelClasses = [AccordionStyles['sbui-accordion-item__panel']]
 
@@ -80,7 +80,7 @@ export function Item({ children, className, label, id }: ItemProps) {
     buttonClasses.push(className)
   }
 
-  const isDefaultActive = defaultActiveId.includes(id)
+  const isDefaultActive = id ? defaultActiveId?.includes(id) : false
 
   const handleOnChange = useCallback(
     (open: boolean) => () => {

src/components/Alert/Alert.test.js

@@ -0,0 +1,67 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import Alert from './Alert'
+
+const VARIANTS = ['success', 'danger', 'warning', 'info']
+
+describe('#Alert', () => {
+  it('should render elements correctly', () => {
+    render(<Alert title="Required Title">{'Description'}</Alert>)
+    expect(screen.queryByText('Required Title')).toBeInTheDocument()
+    expect(screen.queryByText('Description')).toBeInTheDocument()
+  })
+
+  it('should add custom classes to container div', () => {
+    const { container } = render(
+      <Alert title="Required Title" className={'custom classes'}>
+        {'Description'}
+      </Alert>
+    )
+    expect(container.querySelector('div')).toHaveClass(
+      `sbui-alert-container sbui-alert-container--success custom classes`
+    )
+  })
+
+  it('should close alert when close button clicked', () => {
+    render(
+      <Alert title="Required Title" closable>
+        {'Description'}
+      </Alert>
+    )
+
+    const closeButton = screen.getByRole('button')
+
+    fireEvent.click(closeButton)
+
+    expect(screen.queryByText('Description')).not.toBeInTheDocument()
+  })
+
+  it('should render an icon when passed withIcon', () => {
+    const { container } = render(
+      <Alert title="Required Title" withIcon>
+        {'Description'}
+      </Alert>
+    )
+
+    expect(
+      container.querySelector('div.flex-shrink-0 > svg')
+    ).toBeInTheDocument()
+  })
+
+  it.each(VARIANTS)(
+    'should have "sbui-alert-[container|description]--%s" class',
+    (variant) => {
+      const { container } = render(
+        <Alert title="Required Title" variant={variant}>
+          {'Description'}
+        </Alert>
+      )
+
+      expect(container.querySelector('div')).toHaveClass(
+        `sbui-alert-container sbui-alert-container--${variant}`
+      )
+      expect(screen.queryByText('Description')).toHaveClass(
+        `sbui-alert-description sbui-alert-description--${variant}`
+      )
+    }
+  )
+})

src/components/Auth/UserContext.tsx

@@ -2,8 +2,8 @@ import React, { useEffect, useState, createContext, useContext } from 'react'
 import { SupabaseClient, Session, User } from '@supabase/supabase-js'
 
 export interface AuthSession {
-  user: User
-  session: Session
+  user: User | null
+  session: Session | null
 }
 
 const UserContext = createContext<AuthSession>({ user: null, session: null })
@@ -15,8 +15,8 @@ export interface Props {
 
 export const UserContextProvider = (props: Props) => {
   const { supabaseClient } = props
-  const [session, setSession] = useState(null)
-  const [user, setUser] = useState(null)
+  const [session, setSession] = useState<Session | null>(null)
+  const [user, setUser] = useState<User | null>(null)
 
   useEffect(() => {
     const session = supabaseClient.auth.session()
@@ -30,7 +30,7 @@ export const UserContextProvider = (props: Props) => {
     )
 
     return () => {
-      authListener.unsubscribe()
+      authListener?.unsubscribe()
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])

src/components/Button/Button.test.js

@@ -1,6 +1,17 @@
 import React from 'react'
 import { render, screen } from '@testing-library/react'
-import Button, { SIZES, VARIANTS } from './Button'
+import Button from './Button'
+
+const SIZES = ['tiny', 'small', 'medium', 'large', 'xlarge']
+const TYPES = [
+  'primary',
+  'default',
+  'secondary',
+  'outline',
+  'dashed',
+  'link',
+  'text',
+]
 
 describe('#Button', () => {
   it('should render button correctly', async () => {
@@ -10,18 +21,29 @@ describe('#Button', () => {
 
   it('should have "w-full" class', async () => {
     render(<Button block>Button Block</Button>)
-    expect(screen.queryByRole('button')).toHaveClass('btn w-full btn--medium')
-  })
-
-  it.each(VARIANTS)('should have "btn--%s" class', (variant) => {
-    render(<Button variant={variant}>Button Variant</Button>)
     expect(screen.queryByRole('button')).toHaveClass(
-      `btn btn--medium btn--${variant}`
+      'sbui-btn sbui-btn-primary sbui-btn--w-full sbui-btn-container--shadow sbui-btn--tiny'
     )
   })
 
+  it.each(TYPES)('should have "btn--%s" class', (type) => {
+    render(<Button type={type}>Button Variant</Button>)
+
+    if (type !== 'text' && type !== 'link') {
+      expect(screen.queryByRole('button')).toHaveClass(
+        `sbui-btn sbui-btn-${type} sbui-btn-container--shadow sbui-btn--tiny`
+      )
+    } else {
+      expect(screen.queryByRole('button')).toHaveClass(
+        `sbui-btn sbui-btn-${type} sbui-btn--tiny`
+      )
+    }
+  })
+
   it.each(SIZES)('should have "btn--%s" class', (size) => {
     render(<Button size={size}>Button</Button>)
-    expect(screen.queryByRole('button')).toHaveClass(`btn btn--${size}`)
+    expect(screen.queryByRole('button')).toHaveClass(
+      `sbui-btn sbui-btn-primary sbui-btn-container--shadow sbui-btn--${size}`
+    )
   })
 })

src/components/Button/Button.tsx

@@ -38,8 +38,8 @@ export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
 interface CustomButtonProps extends React.HTMLAttributes<HTMLOrSVGElement> {}
 
 export interface RefHandle {
-  container: () => HTMLElement
-  button: () => HTMLButtonElement
+  container: () => HTMLElement | null
+  button: () => HTMLButtonElement | null
 }
 
 const Button = forwardRef<RefHandle, ButtonProps>(
@@ -70,14 +70,14 @@ const Button = forwardRef<RefHandle, ButtonProps>(
     ref
   ) => {
     // button ref
-    const containerRef = useRef()
-    const buttonRef = useRef()
+    const containerRef = useRef<HTMLElement>(null)
+    const buttonRef = useRef<HTMLButtonElement>(null)
 
     useImperativeHandle(ref, () => ({
-      get container() {
+      container: () => {
         return containerRef.current
       },
-      get button() {
+      button: () => {
         return buttonRef.current
       },
     }))

src/components/Checkbox/Checkbox.test.js

@@ -4,16 +4,12 @@ import Checkbox from './Checkbox'
 
 describe('#Checkbox', () => {
   it('should render checkbox correctly', () => {
-    render(
-      <Checkbox data-testid="form-checkbox" />
-    )
+    render(<Checkbox data-testid="form-checkbox" label="labelIsRequired" />)
     expect(screen.queryByTestId('form-checkbox')).toBeInTheDocument()
   })
 
   it('should show label', () => {
-    render(
-      <Checkbox data-testid="form-checkbox" label="JavaScript" />
-    )
+    render(<Checkbox data-testid="form-checkbox" label="JavaScript" />)
     expect(screen.queryByText('JavaScript')).toBeInTheDocument()
   })
-})
+})

src/components/Checkbox/Checkbox.tsx

@@ -112,6 +112,7 @@ export function Checkbox({
   onBlur,
   size = 'medium',
   disabled = false,
+  ...props
 }: InputProps) {
   const inputName = name
 
@@ -132,7 +133,7 @@ export function Checkbox({
 
         // check if checkbox checked is true or false
         // if neither true or false the checkbox will rely on native control
-        const active = checked ? true : checked === false ? false : null
+        const active = checked ?? undefined
 
         let containerClasses = [
           CheckboxStyles['sbui-checkbox-container'],
@@ -162,6 +163,7 @@ export function Checkbox({
               checked={active}
               value={value ? value : markupId}
               disabled={disabled}
+              {...props}
             />
             <div className={CheckboxStyles['sbui-checkbox__label-container']}>
               <label

src/components/ContextMenu/ContextMenu.tsx

@@ -67,7 +67,7 @@ export function Item({ children, icon, disabled, onClick }: ItemProps) {
     <RadixContextMenu.Item
       className={ContextMenuStyles['sbui-contextmenu-item']}
       disabled={disabled}
-      onSelect={onClick ? onClick : null}
+      onSelect={onClick}
     >
       {icon && icon}
       <span>{children}</span>

src/components/Dropdown/Dropdown.tsx

@@ -24,13 +24,13 @@ interface RootProps {
 function Dropdown({
   open,
   onOpenChange,
-  align = "center", //Default value
-  side = "bottom", //Default value
+  align = 'center', //Default value
+  side = 'bottom', //Default value
   overlay,
   children,
   className,
   style,
-  arrow
+  arrow,
 }: RootProps) {
   let classes = [DropdownStyles['sbui-dropdown__content']]
   if (className) {
@@ -53,13 +53,12 @@ function Dropdown({
         className={classes.join(' ')}
         style={style}
       >
-        {arrow &&
-          <RadixDropdown.Arrow 
+        {arrow && (
+          <RadixDropdown.Arrow
             className={DropdownStyles['sbui-dropdown__arrow']}
             offset={10}
-          >
-          </RadixDropdown.Arrow>
-        }
+          ></RadixDropdown.Arrow>
+        )}
         {overlay}
       </RadixDropdown.Content>
     </RadixDropdown.Root>
@@ -78,7 +77,7 @@ export function Item({ children, icon, disabled, onClick }: ItemProps) {
     <RadixDropdown.Item
       className={DropdownStyles['sbui-dropdown-item']}
       disabled={disabled}
-      onSelect={onClick ? onClick : null}
+      onSelect={onClick}
     >
       {icon && icon}
       <span>{children}</span>

src/components/Icon/Icon.tsx

@@ -100,9 +100,11 @@ function Icon({
             color={!noColor ? color : 'currentColor'}
             fill={!noColor ? (fill ? fill : 'none') : 'none'}
             stroke={!noColor ? stroke : 'currentColor'}
+            strokeWidth={strokeWidth}
             className={classes.join(' ')}
             width={iconSize}
             height={iconSize}
+            {...props}
           >
             {src}
           </svg>

src/components/Input/Input.tsx

@@ -262,7 +262,7 @@ function TextArea({
       size={size}
     >
       <textarea
-        autoComplete={autoComplete && 'autoComplete'}
+        autoComplete={autoComplete ? 'on' : 'off'}
         autoFocus={autofocus}
         disabled={disabled}
         id={id}

src/components/InputNumber/InputNumber.tsx

@@ -95,7 +95,7 @@ function InputNumber({
   const onClickChevronUp = () => {
     inputRefCurrent.current?.stepUp()
     if (onChange) {
-      inputRefCurrent.current.dispatchEvent(
+      inputRefCurrent.current?.dispatchEvent(
         new InputEvent('change', {
           view: window,
           bubbles: true,
@@ -108,7 +108,7 @@ function InputNumber({
   const onClickChevronDown = () => {
     inputRefCurrent.current?.stepDown()
     if (onChange) {
-      inputRefCurrent.current.dispatchEvent(
+      inputRefCurrent.current?.dispatchEvent(
         new InputEvent('change', {
           view: window,
           bubbles: true,