@okam/stack-ui 1.25.2 → 1.25.3

package/src/components/TabList/components/TabPanel/TabPanel.tsx

@@ -0,0 +1,27 @@
+import { useTabPanel } from '@react-aria/tabs'
+import React from 'react'
+import RenderWithOpacity from '../../../../transitions/RenderWithOpacity'
+import type { TDefaultComponent } from '../../../../types/components'
+import { BoxWithForwardRef } from '../../../Box'
+import type { TTabPanel } from '../../interface'
+
+function TabPanel({ state, customTheme, themeName = 'tabPanel', tokens, ...props }: TTabPanel & TDefaultComponent) {
+  const ref = React.useRef(null)
+  const { tabPanelProps } = useTabPanel(props, state, ref)
+
+  return (
+    <RenderWithOpacity isVisible>
+      <BoxWithForwardRef
+        themeName={`${themeName}`}
+        tokens={tokens}
+        customTheme={customTheme}
+        {...tabPanelProps}
+        ref={ref}
+      >
+        {state.selectedItem?.props.children}
+      </BoxWithForwardRef>
+    </RenderWithOpacity>
+  )
+}
+
+export default TabPanel

package/src/components/TabList/index.tsx

@@ -0,0 +1,44 @@
+import { useTabList } from '@react-aria/tabs'
+import { useTabListState } from '@react-stately/tabs'
+import { isEmpty } from 'lodash'
+import { useRef } from 'react'
+import Box, { BoxWithForwardRef } from '../Box'
+import Heading from '../Typography'
+import Tab from './components/Tab/Tab'
+import TabPanel from './components/TabPanel/TabPanel'
+import type { TTabList } from './interface'
+
+function TabList(props: TTabList) {
+  const { label, id } = props
+
+  const state = useTabListState({
+    ...props,
+  })
+
+  const ref = useRef(null)
+  const { tabListProps } = useTabList(props, state, ref)
+
+  return (
+    <Box>
+      <Box>
+        {!isEmpty(label) && (
+          <Box>
+            <Box>
+              <Heading as="p">{label}</Heading>
+            </Box>
+          </Box>
+        )}
+        <BoxWithForwardRef {...tabListProps} ref={ref}>
+          {[...state.collection].map((item) => (
+            <Box key={`tablist-${id}-${item.key}`}>
+              <Tab key={item.key} item={item} state={state} />
+            </Box>
+          ))}
+        </BoxWithForwardRef>
+      </Box>
+      <TabPanel key={state.selectedItem?.key} state={state} />
+    </Box>
+  )
+}
+
+export default TabList

package/src/components/TabList/interface.ts

@@ -0,0 +1,23 @@
+/* eslint-disable import/no-unresolved */
+import type { TabListState } from '@react-stately/tabs'
+import type { Node } from '@react-types/shared'
+import type { AriaTabListProps, AriaTabPanelProps } from '@react-types/tabs'
+import type React from 'react'
+
+export interface TTab {
+  item: Node<object>
+  state: TabListState<object>
+}
+
+export interface TTabPanel extends AriaTabPanelProps {
+  state: TabListState<object>
+}
+
+export interface TTabList extends AriaTabListProps<object> {
+  label?: React.ReactNode | string
+}
+
+export interface TPreviousTabState {
+  previousSelectedHash: string
+  previousSelectedKey: string
+}

package/src/components/Typography/index.tsx

@@ -0,0 +1,35 @@
+'use client'
+
+/* eslint-disable react/display-name */
+import React from 'react'
+import useThemeContext from '../../providers/Theme/hooks'
+import type { TTypographyProps } from './interface'
+
+const Typography = ({
+  as: Component = 'span',
+  themeName = 'typography',
+  tokens,
+  customTheme,
+  children,
+  ...rest
+}: TTypographyProps) => {
+  const theme = useThemeContext(themeName, tokens, customTheme)
+
+  return (
+    <Component {...rest} className={theme}>
+      {children}
+    </Component>
+  )
+}
+
+export const TypographyWithForwardRef = React.forwardRef((props: TTypographyProps, ref: React.Ref<HTMLElement>) => {
+  const { as: Component = 'span', tokens, themeName = 'typography', customTheme, children, ...rest } = props
+  const theme = useThemeContext(themeName, tokens, customTheme)
+  return (
+    <Component {...rest} ref={ref} className={theme}>
+      {children}
+    </Component>
+  )
+})
+
+export default Typography

package/src/components/Typography/interface.ts

@@ -0,0 +1,9 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import type React from 'react'
+import type { TToken } from '../../providers/Theme/interface'
+import type { TDefaultComponent } from '../../types/components'
+
+export interface TTypographyProps<T = TToken> extends TDefaultComponent<T> {
+  children?: React.ReactNode
+  dangerouslySetInnerHTML?: { __html: string | TrustedHTML }
+}

package/src/components/Typography/typo.stories.mdx

@@ -0,0 +1,157 @@
+{/* typo.stories.mdx */}
+
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import Typography from './index'
+
+<Meta title="BASE COMPONENTS/Typography" component={Typography} />
+
+export const Template = (args) => (
+  <div>
+    <Typography {...args}>Hello world!</Typography>
+  </div>
+)
+
+# Typography
+
+Typography component. You can pass `size tokens` to change the style, from 'h1' to 'h6', 'leading', 'paragraph' and 'footnote' and 'xs'.
+You can use property `as` to render the typography with a different component, e.g. `h1` to `h6` or even `div` and `header`.
+
+<Canvas>
+  <Story
+    name="Heading 1"
+    args={{
+      as: 'h1',
+      tokens: {
+        size: 'h1',
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name="Heading 2"
+    args={{
+      as: 'h2',
+      tokens: {
+        size: 'h2',
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name="Heading 3"
+    args={{
+      as: 'h3',
+      tokens: {
+        size: 'h3',
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name="Heading 4"
+    args={{
+      as: 'h4',
+      tokens: {
+        size: 'h4',
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name="Heading 5"
+    args={{
+      as: 'h5',
+      tokens: {
+        size: 'h5',
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name="Heading 6"
+    args={{
+      as: 'h6',
+      tokens: {
+        size: 'h6',
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name="Default"
+    args={{
+      as: 'p',
+      tokens: {
+        size: 'paragraph',
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name="Leading"
+    args={{
+      as: 'strong',
+      tokens: {
+        size: 'leading',
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name="Footnotes"
+    args={{
+      as: 'p',
+      tokens: {
+        size: 'footnote',
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name="XSmall"
+    args={{
+      as: 'p',
+      tokens: {
+        size: 'xs',
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>

package/src/components/WysiwygBlock/index.tsx

@@ -0,0 +1,20 @@
+import DOMPurify from 'isomorphic-dompurify'
+import Typography from '../Typography'
+import type TWysiwygBlockProps from './interface'
+
+const WysiwygBlock = ({ content, themeName = 'wysiwyg', ...rest }: TWysiwygBlockProps) => {
+  return (
+    <Typography
+      {...rest}
+      themeName={themeName}
+      dangerouslySetInnerHTML={{
+        __html: DOMPurify.sanitize(content, {
+          ADD_TAGS: ['iframe'],
+          ADD_ATTR: ['allow', 'allowfullscreen', 'frameborder', 'scrolling', 'target'],
+        }),
+      }}
+    />
+  )
+}
+
+export default WysiwygBlock

package/src/components/WysiwygBlock/interface.ts

@@ -0,0 +1,7 @@
+import type { TDefaultComponent } from '../../types/components'
+
+interface TWysiwygBlockProps extends TDefaultComponent {
+  content: string
+}
+
+export default TWysiwygBlockProps

package/src/components/WysiwygBlock/wysiwyg.stories.mdx

@@ -0,0 +1,53 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import { ArgTypes } from '@storybook/blocks'
+import WysiwygBlock from './'
+
+<Meta
+  title="BASE COMPONENTS/Wysiwyg Block"
+  component={WysiwygBlock}
+  argTypes={{
+    content: {
+      description: 'Takes HTML elements in string form from the Wysiwyg block content',
+    },
+    WysiwygBlockAttributes: {
+      description: 'target, allow, allowfullscreen, frameborder, scrolling, iframe',
+    }
+  }}
+  args={{
+    content: '<a target="_self" href="https://www.google.com/">Link with target _self</a>',
+  }}
+/>
+
+export const Template = (args) => {
+  return <WysiwygBlock {...args} />
+}
+
+# Wysiwyg Block
+
+#### Wysiwyg Block. Can be used in CMS to insert HTML elements as text with certain attributes (h1, h2, h3, link with target, etc.)
+
+## Props
+
+<ArgTypes />
+
+## Showcase
+
+### Wysiwyg Block link with target \_self
+
+
+<Canvas>
+  <Story name="Link with target _self">{Template.bind({})}</Story>
+</Canvas>
+
+### Wysiwyg Block link with target \_blank
+
+<Canvas>
+  <Story
+    name="Link with target blank"
+    args={{
+      content: '<a target="_blank" href="https://www.google.com/">Link with target _blank</a>',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>

package/src/components/fields/Checkbox/Checkbox.interface.ts

@@ -0,0 +1,21 @@
+import type React from 'react'
+import type { AriaCheckboxProps } from 'react-aria'
+import type { TDefaultComponent } from '../../../types/components'
+
+export interface TCheckboxProps extends TDefaultComponent, AriaCheckboxProps {
+  label: string
+  isError?: boolean
+  errorMessage?: string
+  ariaLabel?: string
+  icon?: React.ReactNode
+}
+
+export interface TCheckboxLabelStyles {
+  isDisabled?: boolean
+}
+
+export interface TCheckboxStyles {
+  isDisabled?: boolean
+  isFocused?: boolean
+  isError?: boolean
+}

package/src/components/fields/Checkbox/Checkbox.stories.mdx

@@ -0,0 +1,127 @@
+{/* Checkbox.stories.mdx */}
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import Checkbox from './index'
+import Check from '../../icons/Check'
+import Button from '../../Button'
+import { useState } from 'react'
+
+<Meta
+  title="Form/Fields/Checkbox"
+  component={Checkbox}
+  args={{
+    label: 'This is a checkbox label',
+    name: 'checkbox',
+    ariaLabel: 'checkbox-label',
+    onChange: (isSelected) => console.log(`isSelected: ${isSelected}`),
+  }}
+/>
+
+export const Template = (args) => <Checkbox {...args} />
+
+export const TemplateWithButton = (args) => {
+  const [checked, setChecked] = useState(args?.defaultSelected ?? false)
+  const { onChange, ...restOfArgs } = args
+  return (
+    <div className={`flex gap-4 items-center`}>
+      <Checkbox
+        isSelected={checked}
+        onChange={(isSelected) => {
+          setChecked(!checked)
+          onChange(isSelected)
+        }}
+        {...restOfArgs}
+      />
+      <Button handlePress={() => setChecked(!checked)}>Click to check</Button>
+    </div>
+  )
+}
+
+# Checkbox
+
+Checkbox component.
+
+## Default
+
+<Canvas>
+  <Story
+    name="Default"
+    args={{
+      id: 'checkbox-1',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Color variant
+
+<Canvas>
+  <Story
+    name="Gray"
+    args={{
+      id: 'checkbox-8',
+      tokens: {
+        color: 'gray',
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## With icon
+
+<Canvas>
+  <Story
+    name="With icon"
+    args={{
+      id: 'checkbox-2',
+      icon: <Check />,
+      defaultSelected: true,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Disabled
+
+<Canvas>
+  <Story
+    name="Disabled"
+    args={{
+      id: 'checkbox-3',
+      isDisabled: true,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Error
+
+<Canvas>
+  <Story
+    name="Error"
+    args={{
+      id: 'checkbox-4',
+      isError: true,
+      errorMessage: 'This is an error message',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Check from other component
+
+<Canvas>
+  <Story
+    name="Check from other component"
+    args={{
+      id: 'checkbox-5',
+    }}
+  >
+    {TemplateWithButton.bind({})}
+  </Story>
+</Canvas>

package/src/components/fields/Checkbox/index.tsx

@@ -0,0 +1,62 @@
+'use client'
+
+import { useCheckbox } from '@react-aria/checkbox'
+import { FocusRing, useFocusRing } from '@react-aria/focus'
+import { VisuallyHidden } from '@react-aria/visually-hidden'
+import { useToggleState } from '@react-stately/toggle'
+import { useRef } from 'react'
+import useThemeContext from '../../../providers/Theme/hooks'
+import Icon from '../../Icon'
+import Typography from '../../Typography'
+import type { TCheckboxProps } from './Checkbox.interface'
+
+const Checkbox = (props: TCheckboxProps) => {
+  const {
+    id,
+    label,
+    isDisabled = false,
+    isError = false,
+    errorMessage,
+    ariaLabel,
+    icon,
+    themeName = 'checkbox',
+    tokens,
+    customTheme,
+  } = props
+  const state = useToggleState(props)
+  const ref = useRef<HTMLInputElement | null>(null)
+  const { inputProps } = useCheckbox(props, state, ref)
+  const { isSelected } = state
+  const { focusProps, isFocusVisible } = useFocusRing()
+
+  const checkBoxTokens = { ...tokens, selected: isSelected, isDisabled, isError, isFocusVisible }
+  const checkBoxContainerTheme = useThemeContext(`${themeName}.container`, checkBoxTokens, customTheme)
+  const checkBoxTheme = useThemeContext(`${themeName}.checkBox`, checkBoxTokens, customTheme)
+  const checkMarkTheme = useThemeContext(`${themeName}.checkMark`, checkBoxTokens, customTheme)
+  const checkMarkIconTheme = useThemeContext(`${themeName}.checkMarkIcon`, checkBoxTokens, customTheme)
+
+  return (
+    <div>
+      <FocusRing focusRingClass="has-focus-ring" within>
+        <label className={checkBoxContainerTheme} htmlFor={id} aria-label={ariaLabel} aria-disabled={isDisabled}>
+          <VisuallyHidden>
+            <input type="checkbox" ref={ref} aria-labelledby={id} {...inputProps} {...focusProps} />
+          </VisuallyHidden>
+          <div className={checkBoxTheme} aria-checked={isSelected} role="checkbox" aria-labelledby={id}>
+            <div className={checkMarkTheme}>{icon && <Icon icon={icon} customTheme={checkMarkIconTheme} />}</div>
+          </div>
+          <Typography themeName={`${themeName}.label`} tokens={checkBoxTokens}>
+            {label}
+          </Typography>
+        </label>
+      </FocusRing>
+      {isError && errorMessage && (
+        <Typography themeName={`${themeName}.errorMessage`} tokens={checkBoxTokens}>
+          {errorMessage}
+        </Typography>
+      )}
+    </div>
+  )
+}
+
+export default Checkbox

package/src/components/fields/CheckboxGroup/checkbox-group.stories.mdx

@@ -0,0 +1,59 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import CheckboxGroup from './index'
+import CheckboxGroupItem from './components/CheckboxGroupItem'
+
+<Meta title="Form/Fields/CheckboxGroup" component={CheckboxGroup} />
+
+export const Template = (args) => {
+  return (
+    <CheckboxGroup label="Question 1/12" {...args}>
+      <CheckboxGroupItem id="item1" label="Item 1" name="item" value="1" ariaLabel="Item 1" />
+      <CheckboxGroupItem id="item2" label="Item 2" name="item" value="2" ariaLabel="Item 2" />
+      <CheckboxGroupItem id="item3" label="Item 3" name="item" value="3" ariaLabel="Item 3" />
+    </CheckboxGroup>
+  )
+}
+
+export const TemplateError = (args) => {
+  return (
+    <CheckboxGroup label="Question 2/12" {...args}>
+      <CheckboxGroupItem id="item4" label="Item 1" name="item" value="1" ariaLabel="Item 1" />
+      <CheckboxGroupItem id="item5" label="Item 2" name="item" value="2" ariaLabel="Item 2" />
+      <CheckboxGroupItem id="item6" label="Item 3" name="item" value="3" ariaLabel="Item 3" />
+    </CheckboxGroup>
+  )
+}
+
+# CheckboxGroup
+
+CheckboxGroup component.
+
+<Canvas>
+  <Story name="Default">{Template.bind({})}</Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name="Disabled"
+    args={{
+      isDisabled: true,
+    }}
+
+>
+
+    {Template.bind({})}
+
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name="Error"
+    args={{
+      isError: true,
+      errorMessage: 'This is an error message',
+    }}
+  >
+    {TemplateError.bind({})}
+  </Story>
+</Canvas>