@okam/stack-ui 1.25.3 → 1.25.4

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

@@ -1,27 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,23 +0,0 @@
-/* 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

@@ -1,35 +0,0 @@
-'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

@@ -1,9 +0,0 @@
-/* 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

@@ -1,157 +0,0 @@
-{/* 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

@@ -1,20 +0,0 @@
-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

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

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

@@ -1,53 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,127 +0,0 @@
-{/* 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

@@ -1,62 +0,0 @@
-'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

@@ -1,59 +0,0 @@
-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>