@northlight/ui 2.41.0 → 2.41.1

package/lib/components/status-pin/pin-size-map.ts

@@ -0,0 +1,7 @@
+import { PinSize, PinSizeTuple } from '../pin-input/types'
+
+export const pinSizeMap: Record<PinSize, PinSizeTuple > = {
+  sm: [ 4, 2 ],
+  md: [ 5, 3 ],
+  lg: [ 6, 4 ],
+}

package/lib/components/status-pin/pin-variant-map.ts

@@ -0,0 +1,12 @@
+import { PinVariant } from '../pin-input/types'
+
+export const pinVariantMap: Record<PinVariant, string> = {
+  green: 'success',
+  running: 'success',
+  yellow: 'info',
+  inProgress: 'info',
+  gray: 'subdued',
+  notExecuted: 'subdued',
+  red: 'destructive',
+  rejected: 'destructive',
+}

package/lib/components/status-pin/status-pin.tsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import { Circle } from '../circle'
+import { pinVariantMap } from './pin-variant-map'
+import { pinSizeMap } from './pin-size-map'
+import { StatusPinProps } from './types'
+
+/**
+ * Status pins are meant to display the status of a specific entry.
+ * @see Badge
+ * @see {@link https://northlight/reference/status-pin}
+ *
+ * @example (Example)
+ * (?
+ * +
+ * const sizes = ['lg', 'md', 'sm']
+ * const variants = ['notExecuted', 'running', 'inProgress', 'rejected']
+ *
+ * const Example = () => {
+ *    return (
+ *      <Stack>
+ *        {variants.map((variant)=>(
+ *          <HStack spacing={4} alignItems="center">
+ *            {sizes.map((size)=>(
+ *              <StatusPin size={size} variant={variant} />
+ *            ))}
+ *          </HStack>
+ *        ))}
+ *      </Stack>
+ *    )
+ * }
+ * render(<Example/>)
+ * ?)
+ *
+ */
+
+export const StatusPin = ({ size = 'md', variant, ...rest }: StatusPinProps) => {
+  const pinColor = pinVariantMap[variant]
+  const pinSizeTuple = pinSizeMap[size]
+  const [ outerSize, innerSize ] = pinSizeTuple
+
+  return (
+    <Circle
+      size={ outerSize }
+      bg="transparent"
+      borderWidth="xs"
+      borderColor={ pinColor }
+      { ...rest }
+    >
+      <Circle
+        size={ innerSize }
+        bg={ pinColor }
+      />
+    </Circle>
+  )
+}

package/lib/components/status-pin/types.ts

@@ -0,0 +1,7 @@
+import { BoxProps } from '@chakra-ui/react'
+import { PinSize, PinVariant } from '../pin-input/types'
+
+export interface StatusPinProps extends BoxProps {
+  size?: PinSize
+  variant: PinVariant
+}

package/lib/components/step-stack/index.ts

@@ -0,0 +1 @@
+export * from './step-stack'

package/lib/components/step-stack/step-stack.tsx

@@ -0,0 +1,113 @@
+import React from 'react'
+import { useToken } from '@chakra-ui/system'
+import { StepStackProps } from './types'
+import { getChildrenWithProps } from '../../utils'
+import { HStack, Stack } from '../stack'
+import { Divider } from '../divider'
+import { Label } from '../typography'
+import { Box } from '../box'
+/**
+  Util wrapper for creating ordered vertical layouts by stack
+  @see {@link https://northlight.dev/reference/step-stack}
+  @example
+  The component takes all the props that a normal stack takes, with the addition of a
+  rowHeight prop, which is needed to get the correct height for the grey
+  line that goes between the steps. Any valid css height unit, px, rem, %,
+  and tokens xs, sm are valid input for the <Code>rowHeight</Code> prop,
+  for example, <Code>rowHeight="3rem"</Code>.
+  <br /><br />
+  ## Simple step stack
+  (?
+    <StepStack maxW="sm" spacing="4" rowHeight="10">
+      { Array.from({length: 5}, (_, i) => i).map((i) => <Input key={ i } />) }
+    </StepStack>
+  ?)
+  <br />
+  ## Example with flex-start stepCircleAlignment prop
+  (?
+    <StepStack
+      maxW="sm"
+      spacing="4"
+      rowHeight="10"
+      stepCircleAlignment="flex-start"
+      stepCircleMarginTopPx={ 40 }
+    >
+      { Array.from({ length: 5 }, (_, i) => i).map((i) => (
+        <VStack key={ i }>
+          <Center
+            width={ 400 }
+            height={ 24 }
+            borderRadius={ 10 }
+            backgroundColor="blue.500"
+            color="white"
+          >
+            <VStack spacing="5">
+              <Text>Step { i + 1 }</Text>
+            </VStack>
+          </Center>
+          <Center
+            width={ 400 }
+            height={ 36 }
+            borderRadius={ 10 }
+            backgroundColor="green.500"
+            color="white"
+           >
+            <VStack spacing="5">
+              <Text>Some information</Text>
+            </VStack>
+          </Center>
+        </VStack>
+      )) }
+    </StepStack>
+  ?)
+*/
+export const StepStack = ({
+  children,
+  spacing = '4',
+  rowHeight = '10',
+  stepCircleAlignment = 'center',
+  stepCircleMarginTopPx = 0,
+  ...rest
+}: StepStackProps) => {
+  const rows = getChildrenWithProps(children, {})
+  const parsedRowHeight = useToken('sizes', rowHeight)
+
+  return (
+    <Stack spacing={ spacing } position="relative" { ...rest }>
+      { rows.map(
+        (row, i) => (
+          <HStack key={ `row-${i as number}` } alignItems={ stepCircleAlignment }>
+            <>
+              <Box
+                borderRadius="full"
+                bgColor="brand"
+                boxSize="6"
+                minW="6"
+                minH="6"
+                zIndex="docked"
+                marginTop={ `${stepCircleMarginTopPx}px` }
+              >
+                <Label
+                  size="sm"
+                  sx={ { color: 'text.inverted' } }
+                  w="max-content"
+                  textAlign="center"
+                >
+                  { i + 1 }
+                </Label>
+              </Box>
+              { row }
+            </>
+          </HStack>
+        )
+      ) }
+      <Divider
+        orientation="vertical"
+        left="3"
+        top={ `calc(${parsedRowHeight} / 2 + ${stepCircleMarginTopPx}px)` }
+        h={ `calc(100% - ${parsedRowHeight} - ${stepCircleMarginTopPx}px)` }
+        position="absolute"
+      />
+    </Stack>
+  )
+}

package/lib/components/step-stack/types.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react'
+import { StackProps } from '@chakra-ui/react'
+
+export interface StepStackProps extends StackProps {
+  children: ReactNode | ReactNode[]
+  rowHeight?: string
+  /** The vertical alignment of the circles.
+   * Accepts any values that can be used with the alignItems CSS property.
+   * Defaults to "center".
+  */
+  stepCircleAlignment?: string
+  /** Margin top for circles in pixels.
+   * Useful for nonsymmetrical layouts.
+   * Defaults to 0.
+  */
+  stepCircleMarginTopPx?: number
+}

package/lib/components/steps/index.ts

@@ -0,0 +1,10 @@
+export {
+  TabIndicator as StepIndicator,
+  TabPanels as StepPanels,
+} from '@chakra-ui/react'
+
+export * from './step-panel'
+export * from './steps'
+export * from './step'
+export * from './step-list'
+export * from './types'

package/lib/components/steps/step-list.tsx

@@ -0,0 +1,30 @@
+import React, { Children } from 'react'
+import { TabList as ChakraStepList, useStyleConfig } from '@chakra-ui/react'
+import { StepListProps } from './types'
+
+/**
+ * Used to render a navigational list of steps
+ * @see Step
+ * @see Steps
+ * @see {@link https://northlight.dev/reference/step-list}
+ * @example
+ * (?
+ *    <Steps>
+        <StepList>
+          <Step label="Step 1" description="Name and email" />
+          <Step label="Step 2" description="Pick a password" />
+          <Step label="Step 3" description="Review" />
+        </StepList>
+      </Steps>
+ * ?)
+ *
+ */
+export const StepList = ({ children, ...rest }: StepListProps) => {
+  const tabs = Children.count(children)
+  const styles = useStyleConfig('StepList', { tabs })
+  return (
+    <ChakraStepList { ...rest } sx={ styles }>
+      { children }
+    </ChakraStepList>
+  )
+}

package/lib/components/steps/step-panel.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { StepPanelProps } from './types'
+import { TabPanel as ChakraStepPanel } from '../tabs'
+
+/**
+ * Used to display content under specific step
+ * @see Steps
+ * @see StepPanels
+ * @see {@link https://northlight.dev/reference/step-panel}
+ * @example
+ * (? <StepPanel>Step 1</StepPanel>  ?)
+ */
+export const StepPanel = (props: StepPanelProps) => (
+  <ChakraStepPanel padding={ 0 } { ...props } />
+)

package/lib/components/steps/step.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { Box, Tab as ChakraStep, useMultiStyleConfig } from '@chakra-ui/react'
+import { Capitalized, Lead } from '../typography'
+import { Flex } from '../flex'
+import { ring } from '../../utils'
+import { StepProps } from './types'
+
+/**
+ * Renders a step in a step list
+ * @see StepList
+ * @see Steps
+ * @see {@link https://northlight.dev/reference/step}
+ * @example
+ * (?
+ <Steps>
+  <StepList>
+      <Step label="Step 1" description="Personal information" indicator={1} />
+  </StepList>
+</Steps>
+ * ?)
+ *
+ */
+export const Step = ({ label, description, indicator, ...rest }: StepProps) => {
+  const {
+    step,
+    label: labelStyle,
+    description: descriptionStyle,
+    indicator: indicatorStyle,
+  } = useMultiStyleConfig('Step')
+  return (
+    <ChakraStep
+      sx={ step }
+      { ...rest }
+    >
+      <Flex flexDirection="row" alignItems="flex-start" gap="4" _groupFocusVisible={ ring }>
+        { indicator && (
+          <Box
+            sx={ indicatorStyle }
+            data-part="indicator"
+            justifyContent="center"
+          >
+            { indicator }
+          </Box>
+        ) }
+        <Flex flexDirection="column">
+          <Capitalized sx={ labelStyle }>{ label }</Capitalized>
+          { description && <Lead sx={ descriptionStyle }>{ description }</Lead> }
+        </Flex>
+      </Flex>
+    </ChakraStep>
+  )
+}

package/lib/components/steps/steps.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { Tabs as ChakraSteps } from '@chakra-ui/react'
+import { StepsProps } from './types'
+
+/**
+ * Context provider for steps tabs
+ * @see StepList
+ * @see StepPanels
+ * @see {@link https://northlight.dev/reference/steps}
+ * @example
+ * (?
+  <Steps>
+    <StepList>
+      <Step label="Step 1" description="Name and email" indicator={1} />
+      <Step label="Step 2" description="Pick a password" indicator={2}  />
+      <Step label="Step 3"
+      description="Review"
+      indicator={<Icon as={ BrightnessSolid }
+      size="xs" /> }
+      />
+    </StepList>
+    <StepPanels>
+      <StepPanel>1</StepPanel>
+      <StepPanel>2</StepPanel>
+      <StepPanel>3</StepPanel>
+    </StepPanels>
+  </Steps>
+ * ?)
+ *
+ *
+ */
+export const Steps = (props: StepsProps) => (
+  <ChakraSteps isManual={ true } { ...props } />
+)

package/lib/components/steps/types.ts

@@ -0,0 +1,12 @@
+import { TabListProps, TabPanelProps, TabProps, TabsProps } from '@chakra-ui/react'
+import { ReactNode } from 'react'
+
+export type StepListProps = TabListProps
+export interface StepPanelProps extends TabPanelProps {}
+export type StepsProps = TabsProps
+
+export interface StepProps extends TabProps {
+  label: string
+  description?: string
+  indicator?: ReactNode
+}

package/lib/components/switch/index.ts

@@ -0,0 +1,3 @@
+export * from './switch'
+export * from './switch-field'
+export * from './types'

package/lib/components/switch/switch-field.tsx

@@ -0,0 +1,74 @@
+import React, { forwardRef } from 'react'
+import { identity } from 'ramda'
+import { SwitchFieldProps } from './types'
+import { Field } from '../form'
+import { Switch } from './switch'
+import { Box } from '../box'
+import { Flex } from '../flex'
+import { Label } from '../typography'
+
+/**
+ * The switch component wrapped in a <Field />
+ * meant to be used only inside <Form />
+ * @see switch
+ * @see {@link https://northlight.dev/reference/switch-field}
+* @example (Example)
+ * ## Basic
+ * Tip:
+ * * For `labelPlacement` you can use `"left" | "right"`
+ * * For `labelSize` you can use `"2xs" | "xs" | "md" | "lg"` or leave it blank
+ * (?
+ * <Form initialValues={{name: ''}}>
+ *  <SwitchField
+ *   name="terms"
+ *   label="I agree to the Terms & Conditions"
+ *   labelPlacement="right"
+ *   labelSize="md"
+ *  />
+ * </Form>
+ * ?)
+ *
+ */
+export const SwitchField = forwardRef<HTMLDivElement, SwitchFieldProps>(({
+  name,
+  label,
+  isRequired,
+  validate,
+  onChange: onChangeCallback = identity,
+  direction = 'row',
+  labelPlacement = 'right',
+  labelSize = 'md',
+  ...rest
+}, ref) => (
+  <Box w={ label ? 'full' : 'fit-content' } display="inline-flex">
+    <Field
+      name={ name }
+      label=""
+      isRequired={ isRequired }
+      direction={ direction }
+      validate={ validate }
+      ref={ ref }
+    >
+      { ({ onChange, value }) => (
+        <Flex
+          display="inline-flex"
+          alignItems="center"
+          gap={ 2 }
+          direction={ labelPlacement === 'left' ? 'row-reverse' : 'row' }
+        >
+          <Switch
+            name={ name }
+            onChange={ (e) => {
+              onChange(e)
+              onChangeCallback(e)
+            } }
+            value={ value }
+            data-testid="switch-field-test-id"
+            { ...rest }
+          />
+          <Label htmlFor={ name } sx={ { fontWeight: 'normal' } } size={ labelSize }>{ label }</Label>
+        </Flex>
+      ) }
+    </Field>
+  </Box>
+))

package/lib/components/switch/switch.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { Switch as ChakraSwitch } from '@chakra-ui/react'
+import { SwitchProps } from './types'
+
+/**
+ * @see SwitchField
+ * @see {@link https://northlight.dev/reference/switch}
+ *
+ * @example (Example)
+ * Mainly used for forms, however this component is controlled by
+ *  a value prop and an onChange callback
+ *
+ * (?
+ * () => {
+ * const [ advancedMode, setAdvancedMode ] = useState(false)
+ *
+ * return (
+ * <Stack p="2">
+  * <Label size="sm" htmlFor="advanced-mode-switch">Advanced mode</Label>
+  * <Switch name="vegan-checkbox" onChange={() => setAdvancedMode((prev) => !prev)}
+  *  value={advancedMode} />
+ * </Stack>
+ * )
+ * }
+ * ?)
+ */
+export const Switch = ({
+  value,
+  onChange,
+  name,
+  size = 'md',
+  ...rest
+}: SwitchProps) => (
+  <ChakraSwitch
+    size={ size }
+    id={ name }
+    isChecked={ value }
+    onChange={ onChange }
+    { ...rest }
+  />
+)

package/lib/components/switch/types.ts

@@ -0,0 +1,18 @@
+import { SwitchProps as ChakraSwitchProps, StackDirection } from '@chakra-ui/react'
+import { ChangeEvent } from 'react'
+import { RegisterOptions } from 'react-hook-form'
+
+export interface SwitchProps extends Omit<ChakraSwitchProps, 'value'> {
+  onChange?: (e: ChangeEvent<HTMLInputElement>) => void
+  value?: boolean
+}
+
+export interface SwitchFieldProps extends ChakraSwitchProps {
+  name: string
+  label: string
+  validate?: RegisterOptions
+  isRequired?: boolean
+  direction?: StackDirection
+  labelPlacement?: 'left' | 'right'
+  labelSize?: '2xs' | 'xs' | 'md' | 'lg'
+}

package/lib/components/table/index.ts

@@ -0,0 +1,22 @@
+export {
+  Thead,
+  Tbody,
+  Tfoot,
+  Tr,
+  Th,
+  Td,
+  TableCaption,
+  TableContainer,
+} from '@chakra-ui/react'
+export type {
+  TableBodyProps,
+  TableCaptionProps,
+  TableColumnHeaderProps,
+  TableCellProps,
+  TableContainerProps,
+  TableFooterProps,
+  TableHeadProps,
+  TableRowProps,
+} from '@chakra-ui/react'
+export * from './table'
+export * from './types'

package/lib/components/table/table.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { Table as ChakraTable } from '@chakra-ui/react'
+import { TableProps } from './types'
+
+/**
+ * @see {@link https://northlight.dev/reference/table}
+ *
+ * @example
+ * (?
+      <Table variant="rounded">
+    <Thead>
+        <Tr>
+            <Th fontWeight="bold"> Number</Th>
+            <Th fontWeight="bold"> Title</Th>
+        </Tr>
+    </Thead>
+        <Tbody>
+          { [1, 2, 3, 4, 5].map((num) => (
+            <Tr key={ num }>
+              <Td>{ num }</Td>
+              <Td>
+                This is great Typography man
+              </Td>
+            </Tr>
+          )) }
+        </Tbody>
+      </Table>
+ * ?)
+ *
+ */
+export const Table = (props: TableProps) => <ChakraTable { ...props } />

package/lib/components/table/types.ts

@@ -0,0 +1,5 @@
+import { TableProps as ChakraTableProps } from '@chakra-ui/react'
+
+export interface TableProps extends Omit<ChakraTableProps, 'variant'> {
+  variant?: ChakraTableProps['variant'] | 'rounded'
+}

package/lib/components/tabs/index.ts

@@ -0,0 +1,12 @@
+export {
+  TabIndicator,
+  TabList,
+  TabPanels,
+  useTab,
+  useTabs,
+} from '@chakra-ui/react'
+
+export * from './tab'
+export * from './tab-panel'
+export * from './tabs'
+export * from './types'

package/lib/components/tabs/tab-panel.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { TabPanel as ChakraTabPanel } from '@chakra-ui/react'
+import { TabPanelProps } from './types'
+
+/**
+ * Used to display content under tabs context
+ * @see Tabs
+ * @see {@link https://northlight.dev/reference/tab-panel}
+ * @example
+ * (? <TabPanel>Tab 1</TabPanel>  ?)
+ */
+export const TabPanel = (props: TabPanelProps) => (
+  <ChakraTabPanel padding={ 0 } { ...props } />
+)

package/lib/components/tabs/tab.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { Tab as ChakraTab } from '@chakra-ui/react'
+import { TabProps } from './types'
+
+/**
+ * Tab component is used to display a tab in a Tabs component.
+ * @see Tabs
+ * @see {@link https://northlight.dev/reference/tab}
+ *
+ * @example
+ * (?
+<Tabs variant="piped">
+  <TabList>
+    <Tab elementColor="brand">Social Media</Tab>
+    <Tab elementColor="success">Online</Tab>
+    <Tab elementColor="warning">TV</Tab>
+    <Tab elementColor="ai">Paid Search</Tab>
+  </TabList>
+</Tabs>
+ * ?)
+ */
+export const Tab = (props: TabProps) => {
+  const { elementColor, sx, ...rest } = props
+  const tabSx = elementColor
+    ? { '&::before': { backgroundColor: elementColor }, ...sx }
+    : sx
+
+  return (
+    <ChakraTab sx={ tabSx } { ...rest } />
+  )
+}