@loadsmart/loadsmart-ui 7.6.0 → 7.7.0-beta.1

package/src/components/Steps/Steps.fixtures.ts

@@ -1,11 +0,0 @@
-import generator from '../../tests/generator'
-
-export const STEPS = generator.array(({ index }) => {
-  return {
-    id: `step-${index}`,
-    label: generator.sentence({ words: 2 }),
-    complete: false,
-  }
-}, generator.natural({ min: 3, max: 4 }))
-
-export const CONTENTS = STEPS.map(() => generator.paragraph({ sentences: 1 }))

package/src/components/Steps/Steps.helpers.ts

@@ -1,11 +0,0 @@
-export function check(id: string): void {
-  const radioElement = document.getElementById(id) as HTMLInputElement
-
-  if (radioElement) {
-    radioElement.checked = true
-  }
-}
-
-export function getPanelRadioID(id: number | string): string {
-  return `rg-wizard-step-radio-${id}`
-}

package/src/components/Steps/Steps.stories.tsx

@@ -1,65 +0,0 @@
-import React from 'react'
-import type { Story, Meta } from '@storybook/react'
-
-import { Button } from '../Button'
-import { STEPS, CONTENTS } from './Steps.fixtures'
-import Steps from './Steps'
-import useSteps from './useSteps'
-
-import type { StepsProps } from './Steps'
-
-export default {
-  title: 'Components/Steps',
-  component: Steps,
-  argTypes: {},
-} as Meta
-
-export const Playground: Story<StepsProps> = (args: StepsProps) => {
-  const [state, dispatch] = useSteps({ steps: args.steps || STEPS, current: args.current })
-
-  return (
-    <div className="flex flex-col items-center w-full p-4 space-y-6" style={{ width: 960 }}>
-      <Steps
-        id="steps-story"
-        current={state.current}
-        steps={state.steps}
-        className="bg-neutral-white"
-      >
-        {STEPS.map((step, index) => (
-          <Steps.Step id={step.id} key={step.id}>
-            {CONTENTS[index]}
-          </Steps.Step>
-        ))}
-      </Steps>
-      <div className="flex justify-between w-full">
-        <Button
-          variant="warning"
-          onClick={() => {
-            dispatch({
-              type: 'previous',
-            })
-          }}
-        >
-          Back
-        </Button>
-        <Button
-          variant="primary"
-          onClick={() => {
-            dispatch({
-              type: 'complete',
-              payload: {
-                stepID: state.current,
-              },
-            })
-
-            dispatch({
-              type: 'next',
-            })
-          }}
-        >
-          Next
-        </Button>
-      </div>
-    </div>
-  )
-}

package/src/components/Steps/Steps.test.tsx

@@ -1,78 +0,0 @@
-import React from 'react'
-import { composeStory } from '@storybook/react'
-
-import { STEPS, CONTENTS } from './Steps.fixtures'
-import generator from '../../tests/generator'
-import Meta, { Playground as PlaygroundStory } from './Steps.stories'
-import renderer, { screen } from '../../tests/renderer'
-
-import type { StepsProps } from './Steps'
-import type { Step } from './Steps.types'
-
-const Playground = composeStory(PlaygroundStory, Meta)
-
-function setup(overrides: Partial<StepsProps>) {
-  renderer(<Playground {...overrides} />).render()
-}
-
-describe('<Steps />', () => {
-  it('renders correctly', () => {
-    const props = { current: 'step-1' }
-
-    setup(props)
-
-    for (let i = 0; i < STEPS.length; i++) {
-      screen.getByText(STEPS[i].label)
-    }
-
-    for (let i = 0; i < CONTENTS.length; i++) {
-      screen.getByText(CONTENTS[i])
-    }
-  })
-
-  it('renders current correctly if none is provided', () => {
-    const props = {}
-
-    setup(props)
-
-    const components = screen.getAllByTestId('steps-timeline-entry')
-    expect(components[0]).toHaveClass('is-current')
-  })
-
-  it('renders current correctly', () => {
-    const currentIndex = generator.natural({ min: 0, max: STEPS.length - 1 })
-    const props = {
-      current: STEPS[currentIndex].id,
-    }
-
-    setup(props)
-
-    const components = screen.getAllByTestId('steps-timeline-entry')
-    expect(components[currentIndex]).toHaveClass('is-current')
-  })
-
-  it('render complete step correctly', () => {
-    const steps: Array<Step> = [
-      {
-        id: 'step-1',
-        label: generator.word(),
-        complete: true,
-      },
-      {
-        id: 'step-2',
-        label: generator.word(),
-        complete: false,
-      },
-    ]
-
-    const props = {
-      steps,
-    }
-
-    setup(props)
-
-    const components = screen.getAllByTestId('steps-timeline-entry')
-    expect(components[0]).toHaveClass('is-current')
-    expect(components[0]).toHaveClass('is-complete')
-  })
-})

package/src/components/Steps/Steps.tsx

@@ -1,53 +0,0 @@
-import React, { useEffect } from 'react'
-import type { PropsWithChildren } from 'react'
-import styled from 'styled-components'
-
-import { check, getPanelRadioID } from './Steps.helpers'
-import { getToken as token } from 'theming'
-import StepsContext from './StepsContext'
-import StepsProgress from './ProgressSteps'
-import StepsStep from './StepsStep'
-
-import type ColorScheme from 'utils/types/ColorScheme'
-import type { Step } from './Steps.types'
-export interface StepsProps {
-  current: number | string
-  id: number | string
-  steps: Array<Step>
-  className?: string
-  scheme?: ColorScheme
-}
-
-const StepsWrapper = styled.section`
-  display: block;
-  width: 100%;
-
-  color: ${token('steps-color')};
-`
-
-// TODO: improve by extracting steps props right from children.
-function Steps({
-  id,
-  children,
-  current,
-  steps,
-  ...others
-}: PropsWithChildren<StepsProps>): JSX.Element {
-  useEffect(
-    function showCurrentStep() {
-      check(getPanelRadioID(current))
-    },
-    [current]
-  )
-
-  return (
-    <StepsWrapper id={String(id)} {...others}>
-      <StepsProgress current={current} steps={steps} />
-      <StepsContext.Provider value={id}>{children}</StepsContext.Provider>
-    </StepsWrapper>
-  )
-}
-
-Steps.Step = StepsStep
-
-export default Steps

package/src/components/Steps/Steps.types.ts

@@ -1,5 +0,0 @@
-export type Step = {
-  id: number | string
-  label: string
-  complete: boolean
-}

package/src/components/Steps/StepsContext.ts

@@ -1,5 +0,0 @@
-import React from 'react'
-
-const StepsContext = React.createContext<string | number>('')
-
-export default StepsContext

package/src/components/Steps/StepsStep.tsx

@@ -1,58 +0,0 @@
-import React, { Fragment, useContext } from 'react'
-import type { PropsWithChildren } from 'react'
-import styled from 'styled-components'
-
-import { getPanelRadioID } from './Steps.helpers'
-import { getToken as token } from 'theming'
-import font from 'styles/font'
-import hidden from 'styles/hidden'
-import StepsContext from './StepsContext'
-
-export interface StepsStepProps {
-  id: number | string
-  className?: string
-}
-
-const Selector = styled.input`
-  ${hidden(true)}
-`
-
-export const StepWrapper = styled.article`
-  ${font({
-    weight: 'font-weight-medium',
-    height: 'font-height-2',
-  })}
-
-  padding: 0 ${token('steps-step-padding-x')} ${token('steps-step-padding-y')};
-
-  ${Selector} + & {
-    display: none;
-  }
-
-  ${Selector}:checked + & {
-    display: block;
-  }
-`
-
-function StepsStep({ children, id, ...others }: PropsWithChildren<StepsStepProps>): JSX.Element {
-  const StepsID = useContext(StepsContext)
-
-  return (
-    <Fragment>
-      <Selector
-        type="radio"
-        className="visually-hidden"
-        id={getPanelRadioID(id)}
-        name={String(StepsID)}
-        value={id}
-        data-testid="panel-radio"
-        tabIndex={-1}
-      />
-      <StepWrapper data-testid="steps-step" {...others} id={String(id)}>
-        {children}
-      </StepWrapper>
-    </Fragment>
-  )
-}
-
-export default StepsStep

package/src/components/Steps/index.ts

@@ -1,6 +0,0 @@
-export { default as Steps } from './Steps'
-export { default as useSteps } from './useSteps'
-
-export type { StepsProps } from './Steps'
-export type { useStepsProps } from './useSteps'
-export type { Step } from './Steps.types'

package/src/components/Steps/useStep.test.tsx

@@ -1,217 +0,0 @@
-import { renderHook, act } from '@testing-library/react-hooks'
-
-import generator from '../../tests/generator'
-import useSteps from './useSteps'
-
-import type { Step } from './Steps.types'
-
-describe('useSteps', () => {
-  const steps: Array<Step> = [
-    {
-      id: 'step-1',
-      label: generator.word(),
-      complete: false,
-    },
-    {
-      id: 'step-2',
-      label: generator.word(),
-      complete: false,
-    },
-    {
-      id: 'step-3',
-      label: generator.word(),
-      complete: false,
-    },
-    {
-      id: 'step-4',
-      label: generator.word(),
-      complete: false,
-    },
-    {
-      id: 'step-5',
-      label: generator.word(),
-      complete: false,
-    },
-  ]
-
-  it('initializes state correctly', () => {
-    const props = {
-      current: 'step-1',
-      steps,
-    }
-    const { result } = renderHook(() => useSteps(props))
-
-    const [state] = result.current
-    expect(state.current).toBe(props.current)
-    expect(state.steps).toEqual(props.steps)
-  })
-
-  it('navigates to next correctly', () => {
-    const props = {
-      current: steps[0].id,
-      steps,
-    }
-    const { result } = renderHook(() => useSteps(props))
-
-    expect(result.current[0].current).toBe(props.steps[0].id)
-
-    act(() => {
-      result.current[1]({
-        type: 'next',
-      })
-    })
-
-    expect(result.current[0].current).toBe(props.steps[1].id)
-  })
-
-  it('navigates to previous correctly', () => {
-    const props = {
-      current: steps[1].id,
-      steps,
-    }
-    const { result } = renderHook(() => useSteps(props))
-
-    expect(result.current[0].current).toBe(props.steps[1].id)
-
-    act(() => {
-      result.current[1]({
-        type: 'previous',
-      })
-    })
-
-    expect(result.current[0].current).toBe(props.steps[0].id)
-  })
-
-  it('navigates to step correctly', () => {
-    const props = {
-      current: steps[0].id,
-      steps,
-    }
-    const { result } = renderHook(() => useSteps(props))
-
-    expect(result.current[0].current).toBe(props.steps[0].id)
-
-    const stepIndex = generator.natural({ min: 1, max: 4 })
-    act(() => {
-      result.current[1]({
-        type: 'navigate',
-        payload: {
-          stepID: steps[stepIndex].id,
-        },
-      })
-    })
-
-    expect(result.current[0].current).toBe(props.steps[stepIndex].id)
-  })
-
-  it('completes step correctly', () => {
-    const stepIndex = generator.natural({ min: 0, max: 4 })
-    const props = {
-      current: steps[stepIndex].id,
-      steps,
-    }
-    const { result } = renderHook(() => useSteps(props))
-
-    expect(props.steps[stepIndex].complete).toBe(false)
-
-    act(() => {
-      result.current[1]({
-        type: 'complete',
-        payload: {
-          stepID: steps[stepIndex].id,
-        },
-      })
-    })
-
-    expect(result.current[0].steps[stepIndex].complete).toBe(true)
-  })
-
-  it('reset state correctly', () => {
-    const props = {
-      current: 'step-5',
-      steps: [
-        {
-          id: 'step-1',
-          label: generator.word(),
-          complete: true,
-        },
-        {
-          id: 'step-2',
-          label: generator.word(),
-          complete: true,
-        },
-        {
-          id: 'step-3',
-          label: generator.word(),
-          complete: true,
-        },
-        {
-          id: 'step-4',
-          label: generator.word(),
-          complete: true,
-        },
-        {
-          id: 'step-5',
-          label: generator.word(),
-          complete: true,
-        },
-      ],
-    }
-
-    const { result } = renderHook(() => useSteps(props))
-
-    expect(result.current[0].current).toBe(props.current)
-    expect(result.current[0].steps).toEqual(props.steps)
-
-    const newProps = {
-      current: 'step-0',
-      steps: [
-        {
-          id: 'step-1',
-          label: generator.word(),
-          complete: false,
-        },
-        {
-          id: 'step-2',
-          label: generator.word(),
-          complete: false,
-        },
-        {
-          id: 'step-3',
-          label: generator.word(),
-          complete: false,
-        },
-        {
-          id: 'step-4',
-          label: generator.word(),
-          complete: false,
-        },
-        {
-          id: 'step-5',
-          label: generator.word(),
-          complete: false,
-        },
-      ],
-    }
-
-    act(() => {
-      result.current[1]({
-        type: 'reset',
-        payload: newProps,
-      })
-    })
-
-    expect(result.current[0].current).toBe(newProps.current)
-    expect(result.current[0].steps).toEqual(newProps.steps)
-  })
-
-  it('sets current to the first step provided, when no current prop is provided', () => {
-    const props = {
-      steps,
-    }
-    const { result } = renderHook(() => useSteps(props))
-
-    const [state] = result.current
-    expect(state.current).toEqual(steps[0].id)
-  })
-})

package/src/components/Steps/useSteps.ts

@@ -1,131 +0,0 @@
-import { useEffect, useReducer, useRef, Dispatch } from 'react'
-
-import get from 'utils/toolset/get'
-import type { Step } from './Steps.types'
-
-export interface useStepsProps {
-  steps: Array<Step>
-  current?: number | string
-}
-
-type State = { current: number | string; steps: Array<Step> }
-type Action =
-  | { type: 'navigate'; payload: { stepID: number | string } }
-  | { type: 'next' }
-  | { type: 'previous' }
-  | { type: 'complete'; payload: { stepID: number | string } }
-  | { type: 'reset'; payload: State }
-
-function useSteps({ steps, current: currentProp }: useStepsProps): [State, Dispatch<Action>] {
-  const stepIndexByID = useRef<Record<number | string, number>>({})
-
-  useEffect(
-    function initStepIndexByIDMap() {
-      stepIndexByID.current = {}
-      ;(steps || []).forEach((step, index) => {
-        stepIndexByID.current[step.id] = index
-      })
-    },
-    [steps]
-  )
-
-  const [state, dispatch] = useReducer(reducer, init(steps, currentProp))
-
-  function reducer(state: State, action: Action): State {
-    const { current } = state
-
-    // TODO: improve using object to map each case as individual functions
-    switch (action.type) {
-      case 'previous': {
-        const currentIndex = getStepIndex(current)
-
-        if (currentIndex == null) {
-          return state
-        }
-
-        const newCurrentIndex = Math.max(currentIndex - 1, 0)
-
-        return {
-          ...state,
-          current: steps[newCurrentIndex]?.id,
-        }
-      }
-      case 'next': {
-        const currentIndex = getStepIndex(current)
-
-        if (currentIndex == null) {
-          return state
-        }
-
-        const newCurrentIndex = Math.min(currentIndex + 1, steps.length - 1)
-
-        return {
-          ...state,
-          current: steps[newCurrentIndex]?.id,
-        }
-      }
-      case 'navigate': {
-        const { stepID } = action.payload
-        const currentIndex = getStepIndex(current)
-        const stepIndex = getStepIndex(stepID)
-        const step = get(steps, stepIndex)
-
-        if (!step) {
-          return state
-        }
-
-        return {
-          ...state,
-          current: steps[stepIndex]?.id || steps[currentIndex]?.id,
-        }
-      }
-      case 'complete': {
-        const { stepID } = action.payload
-        const { steps } = state
-
-        const stepIndex = getStepIndex(stepID)
-        const step = get(steps, stepIndex)
-
-        if (!step) {
-          return state
-        }
-
-        return {
-          ...state,
-          steps: [
-            ...steps.slice(0, stepIndex),
-            { ...step, complete: true },
-            ...steps.slice(stepIndex + 1),
-          ],
-        }
-      }
-      case 'reset': {
-        const { steps, current } = action.payload
-
-        return {
-          ...state,
-          ...init(steps, current),
-        }
-      }
-      default:
-        return state
-    }
-  }
-
-  // TODO: gather step info to feed Steps component
-  function init(steps: Array<Step>, current?: number | string): State {
-    return {
-      current: current || get(steps, '0.id')!,
-      steps,
-    }
-  }
-
-  function getStepIndex(stepID: number | string): number {
-    return stepIndexByID.current[stepID]
-  }
-
-  // TODO: write helper functions to abstract inner dispatch mechanism
-  return [state, dispatch]
-}
-
-export default useSteps