Storefront UI Components

How to find them

Ui Components library is inside Storefront project on packages/components-ui

Dependencies

Storefront UI and components are build with React, and using Chakra-Ui, to facilitate ui customizations, refer to its documentation for further information on the personalization available with Chakra.

How to test new components

The project is ready to test new componentes in a controlled enviroment outside storefront with Storybook.

To launch it use yarn storybook or npm storybook
You'll see something like this

This is an example of a Story

import React, { useState, ChangeEvent } from 'react'
import { DetailRowWithCounter } from '../src/DetailRowWithCounter'
import { DetailRowWithCheckBox } from '../src/DetailRowWithCheckBox'
import { DetailRowWithRadioButton } from '../src/DetailRowWithRadioButton'
import { ThemeProvider, Box } from "@chakra-ui/core"
import customTheme from './theme'

export default {
  title: 'DetailRowWithAll'
}

export const Default = (props?: Partial<Props>) => {
  const [value, setValue] = useState(0)

  const add = () => {
    setValue(value + 1)
  }

  const minus = () => {
    setValue(value - 1)
  }

  const onChangeRadioValue = (event: ChangeEvent<HTMLInputElement>) => {
    console.log("hey!", event.target.value)
  }

  const clicked = (event: ChangeEvent<HTMLInputElement>) => {
    console.log(event)
    console.log(event.target)
    console.log(event.target.value)
    console.log(event.target.checked)
  }

  return (
      <ThemeProvider theme={customTheme}>
        <Box width="408px" border="1px solid" borderColor="gray.500">
          <DetailRowWithCounter
            title="Crispy"
            value={value}
            addAction={add}
            minusAction={minus}
          />
          <DetailRowWithCheckBox
            title="Crispy"
            subTitle="hey!"
            value="Im A Check"
            onChange={clicked}
          />
          <DetailRowWithRadioButton
            title="Crispy"
            name="food"
            value="crispy"
            checked={true}
            onChangeEvent={onChangeRadioValue}
          />
        </Box>
      </ThemeProvider>
  )
};

Did this page help you?