@okam/stack-ui 1.25.3 → 1.25.6

package/src/components/Carousel/carousel.stories.mdx

@@ -1,182 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import { ArgTypes } from '@storybook/blocks'
-import Carousel from './index'
-import Button from '../Button'
-
-<Meta
-  title="Base Components/Carousel"
-  component={Carousel}
-  argTypes={{
-    navigationButtons: {
-      description: 'This prop allows the override of the button proposed in the default state',
-    },
-    slides: {
-      description: 'Slides takes in an array of object with an `id` and a `child` being a ReactNode',
-    },
-  }}
-  parameters={{
-    layout: 'fullscreen',
-  }}
-  args={{
-    slides: [
-      {
-        id: 1,
-        child: <div>Slide 1</div>,
-      },
-      {
-        id: 2,
-        child: <div>Slide 2</div>,
-      },
-      {
-        id: 3,
-        child: <div>Slide 3</div>,
-      },
-      {
-        id: 4,
-        child: <div>Slide 4</div>,
-      },
-    ],
-  }}
-/>
-
-export const Template = (args) => {
-  return <Carousel {...args} />
-}
-
-# Carousel
-
-Carousel component. More commonly used for a showcase of images. When using the carousel component, you must import React Swiper CSS files
-
-```ts
-import 'swiper/css'
-import 'swiper/css/pagination'
-import 'swiper/css/a11y'
-import 'swiper/css/autoplay'
-import 'swiper/css/navigation'
-import 'swiper/css/mousewheel'
-import 'swiper/css/keyboard'
-```
-
-## Props
-
-<ArgTypes />
-
-## Showcase
-
-### Basic carousel with 2 slides per view
-
-<Canvas>
-  <Story
-    name="Carousel"
-    args={{
-      id: 1,
-      navigation: true,
-      slidesPerView: 2,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-### Carousel with autoplay
-
-<Canvas>
-  <Story
-    name="Carousel with autoplay"
-    args={{
-      id: 2,
-      autoplay: true,
-      navigation: true,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-### Carousel with infinite looping
-
-<Canvas>
-  <Story
-    name="Carousel with infinite looping"
-    args={{
-      id: 3,
-      loop: true,
-      navigation: true,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-### Carousel with pagination
-
-<Canvas>
-  <Story
-    name="Carousel with pagination"
-    args={{
-      id: 4,
-      slides: [
-        {
-          id: 1,
-          child: (
-            <div>
-              Slide 1<br />
-              &#x200B;
-            </div>
-          ),
-        },
-        {
-          id: 2,
-          child: (
-            <div>
-              Slide 2<br />
-              &#x200B;
-            </div>
-          ),
-        },
-        {
-          id: 3,
-          child: (
-            <div>
-              Slide 3<br />
-              &#x200B;
-            </div>
-          ),
-        },
-        {
-          id: 4,
-          child: (
-            <div>
-              Slide 4<br />
-              &#x200B;
-            </div>
-          ),
-        },
-      ],
-      pagination: {
-        clickable: true,
-      },
-      navigation: false,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-### Carousel with custom buttons
-
-<Canvas>
-  <Story
-    name="Carousel custom buttons"
-    args={{
-      id: 4,
-      navigation: true,
-      navigationButtons: {
-        leftButton: <Button>Previous slide</Button>,
-        rightButton: <Button>Next slide</Button>,
-      },
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>

package/src/components/Carousel/index.tsx

@@ -1,99 +0,0 @@
-'use client'
-
-import React, { useState } from 'react'
-import type { PressEvent } from 'react-aria'
-import type Swiper from 'swiper'
-import { Navigation, Mousewheel, Keyboard, Pagination, Autoplay, A11y } from 'swiper/modules'
-import { Swiper as SwiperComponent, SwiperSlide } from 'swiper/react'
-import useThemeContext from '../../providers/Theme/hooks'
-import Box from '../Box'
-import Button from '../Button'
-import Icon from '../Icon'
-import type { TCarouselButtonProps, TCarouselProps } from './interface'
-
-const CarouselButton = (props: TCarouselButtonProps) => {
-  const { navigationButton, icon, themeName = 'carousel', tokens, id, swiperFn } = props
-  const onKeyDown = (key: React.KeyboardEvent | PressEvent) => {
-    if (('pointerType' in key && key.pointerType === 'keyboard') || ('code' in key && key.code === 'Enter'))
-      swiperFn?.()
-  }
-  return navigationButton ? (
-    React.cloneElement(navigationButton, {
-      onKeyDown,
-      handlePress: onKeyDown,
-    })
-  ) : (
-    <Button themeName={`${themeName}.navigationButtons`} tokens={{ ...tokens, className: id }} handlePress={onKeyDown}>
-      <Icon icon={icon} />
-    </Button>
-  )
-}
-
-const Carousel = (props: TCarouselProps) => {
-  const { id, slides, children, navigationButtons, themeName = 'carousel', tokens, customTheme, ...rest } = props
-  const showNavigation = slides && slides?.length > 1
-
-  const { navigation, slidesPerView } = props
-
-  const swiperTheme = useThemeContext(`${themeName}.swiper`, tokens)
-  const swiperWrapperTheme = useThemeContext(`${themeName}.swiperWrapper`, tokens)
-  const slideWrapperTheme = useThemeContext(`${themeName}.slideWrapper`, tokens)
-
-  const [swiper, setSwiper] = useState<Swiper>()
-
-  return (
-    <Box themeName={`${themeName}.container`} tokens={tokens} customTheme={customTheme} {...rest}>
-      {showNavigation && navigation && (
-        <CarouselButton
-          themeName={themeName}
-          tokens={tokens}
-          navigationButton={navigationButtons?.leftButton}
-          id={`button-prev-${id}`}
-          icon="ArrowLeft"
-          swiperFn={() => swiper?.slidePrev()}
-          swiper={swiper}
-        />
-      )}
-      <SwiperComponent
-        modules={[Navigation, Mousewheel, Keyboard, Pagination, Autoplay, A11y]}
-        {...rest}
-        navigation={{
-          prevEl: `.button-prev-${id}`,
-          nextEl: `.button-next-${id}`,
-          disabledClass: `button-disabled`,
-        }}
-        onSwiper={setSwiper}
-        wrapperClass={swiperWrapperTheme}
-        className={swiperTheme}
-        mousewheel
-        keyboard
-        watchOverflow
-        slidesPerView={slidesPerView ?? 1}
-      >
-        {slides?.map((slide) => {
-          return (
-            <SwiperSlide key={slide.id} className={slideWrapperTheme}>
-              <Box themeName={`${themeName}.slideContainer`} tokens={tokens}>
-                {slide.child}
-              </Box>
-            </SwiperSlide>
-          )
-        })}
-      </SwiperComponent>
-      {showNavigation && navigation && (
-        <CarouselButton
-          themeName={themeName}
-          tokens={tokens}
-          navigationButton={navigationButtons?.rightButton}
-          id={`button-next-${id}`}
-          icon="ArrowRight"
-          swiperFn={() => swiper?.slideNext()}
-          swiper={swiper}
-        />
-      )}
-      {children}
-    </Box>
-  )
-}
-
-export default Carousel

package/src/components/Carousel/interface.ts

@@ -1,26 +0,0 @@
-import type React from 'react'
-import type Swiper from 'swiper'
-import type { SwiperOptions } from 'swiper/types/swiper-options'
-import type { TDefaultComponent } from '../../types/components'
-
-export type TSlide = {
-  id?: string
-  child?: React.ReactNode
-}
-export interface TCarouselProps extends TDefaultComponent, SwiperOptions {
-  id?: React.Key
-  children?: React.ReactNode
-  slides?: TSlide[]
-  navigationButtons?: {
-    leftButton: React.ReactElement
-    rightButton: React.ReactElement
-  }
-}
-
-export interface TCarouselButtonProps extends TDefaultComponent {
-  navigationButton?: React.ReactElement
-  icon: string
-  id: string
-  swiperFn: () => void
-  swiper: Swiper | undefined
-}

package/src/components/Date/date.stories.mdx

@@ -1,122 +0,0 @@
-{/* Date.stories.mdx */}
-import { I18nProvider } from 'react-aria'
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import Date from './index'
-
-<Meta title="BASE COMPONENTS/Date" component={Date} />
-
-export const Template = (args) => <Date {...args} />
-export const FrenchTemplate = (args) => (
-  <I18nProvider locale="fr-FR">
-    <Date {...args} />
-  </I18nProvider>
-)
-
-# Date
-
-Date component. Must pass a valid ISO `date`. You can also pass an object `dateFormatterOptions` to change the format, e.g. `MMM dd, yyyy` or `MM/DD/YY`.
-The language is handled by the `I18nProvider` of `react-aria`.
-
-<Canvas>
-  <Story
-    name="Different Language"
-    args={{
-      date: '2021-12-31T00:01:00-0500',
-      dateFormatterOptions: {
-        month: 'long',
-        day: 'numeric',
-        year: 'numeric',
-      },
-      tokens: {
-        size: 'paragraph',
-      },
-    }}
-  >
-    {FrenchTemplate.bind({})}
-  </Story>
-</Canvas>
-
-<Canvas>
-  <Story
-    name="Short"
-    args={{
-      date: '2021-12-31T00:01:00-0500',
-      dateFormatterOptions: {
-        month: 'short',
-        day: 'numeric',
-        year: 'numeric',
-      },
-      tokens: {
-        size: 'paragraph',
-      },
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<Canvas>
-  <Story
-    name="Long"
-    args={{
-      date: '2021-12-31T00:01:00-0500',
-      dateFormatterOptions: {
-        month: 'long',
-        day: 'numeric',
-        year: 'numeric',
-      },
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<Canvas>
-  <Story
-    name="Time with h4 style"
-    args={{
-      date: '2021-12-31T00:01:00-0500',
-      dateFormatterOptions: {
-        month: 'long',
-        day: 'numeric',
-        year: 'numeric',
-      },
-      tokens: {
-        size: 'h4',
-      },
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<Canvas>
-  <Story
-    name="Month and Day only"
-    args={{
-      date: '2021-12-31T00:01:00-0500',
-      dateFormatterOptions: {
-        month: 'long',
-        day: 'numeric',
-      },
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<Canvas>
-  <Story
-    name="2 digits"
-    args={{
-      date: '2021-12-31T00:01:00-0500',
-      dateFormatterOptions: {
-        month: '2-digit',
-        day: '2-digit',
-        year: '2-digit',
-      },
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>

package/src/components/Date/index.tsx

@@ -1,35 +0,0 @@
-'use client'
-
-import { useDateFormatter } from '@react-aria/i18n'
-import { isEmpty } from 'lodash'
-import { useIsSSR } from 'react-aria'
-import useThemeContext from '../../providers/Theme/hooks'
-import type { TDateProps } from './interface'
-
-const DateComponent = (props: TDateProps) => {
-  const {
-    as: Component = 'time',
-    date,
-    tokens,
-    customTheme,
-    dateFormatterOptions = { month: 'long', day: 'numeric', year: 'numeric' },
-    themeName = 'typography',
-    ...rest
-  } = props
-  const isSSR = useIsSSR()
-
-  const parsedDate = new Date(date)
-
-  const formatter = useDateFormatter(dateFormatterOptions)
-
-  const formattedDate = formatter.format(parsedDate)
-  const theme = useThemeContext(themeName, tokens, customTheme)
-
-  return isSSR || isEmpty(formattedDate) ? null : (
-    <Component {...rest} dateTime={parsedDate.toISOString()} className={theme}>
-      {formattedDate}
-    </Component>
-  )
-}
-
-export default DateComponent

package/src/components/Date/interface.ts

@@ -1,7 +0,0 @@
-import type { DateFormatterOptions } from 'react-aria'
-import type { TDefaultComponent } from '../../types/components'
-
-export interface TDateProps extends TDefaultComponent {
-  date: string
-  dateFormatterOptions?: DateFormatterOptions
-}

package/src/components/Dialog/index.tsx

@@ -1,14 +0,0 @@
-import { useRef } from 'react'
-import { useDialog } from 'react-aria'
-import type { TDialogProps } from './interface'
-
-export function Dialog({ title, children, ...props }: TDialogProps) {
-  const ref = useRef(null)
-  const { dialogProps } = useDialog(props, ref)
-
-  return (
-    <div {...dialogProps} ref={ref}>
-      {children}
-    </div>
-  )
-}

package/src/components/Dialog/interface.ts

@@ -1,6 +0,0 @@
-import type { AriaDialogProps } from 'react-aria'
-
-export interface TDialogProps extends AriaDialogProps {
-  title?: React.ReactNode
-  children: React.ReactNode
-}

package/src/components/DirectusImg/index.tsx

@@ -1,59 +0,0 @@
-import { createPngDataUri } from 'unlazy/thumbhash'
-import Img from '../Img'
-import type TDirectusImageProps from './interface'
-
-const envImgDomain = process.env.NEXT_PUBLIC_IMG_DOMAIN
-
-const DirectusImg = (props: TDirectusImageProps) => {
-  const {
-    fit,
-    customTheme,
-    thumbhash,
-    description,
-    width,
-    height,
-    id,
-    filenameDownload,
-    imgDomain = envImgDomain,
-    ...rest
-  } = props
-
-  if (!id || !filenameDownload) return null
-
-  if (!imgDomain) {
-    // eslint-disable-next-line no-console
-    console.warn('No image domain was provided')
-    return null
-  }
-
-  const getDirectusImage = () => {
-    try {
-      const img = new URL(`/assets/${id}/${filenameDownload}`, `https://${imgDomain}`)
-      img.searchParams.set('fit', fit ?? 'contain')
-      return img
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.warn(error)
-      return null
-    }
-  }
-
-  const directusImageUrl = getDirectusImage()
-
-  if (directusImageUrl == null) {
-    return null
-  }
-
-  return (
-    <Img
-      alt={description ?? ''}
-      {...(thumbhash ? { blurDataURL: createPngDataUri(thumbhash), placeholder: 'blur' } : {})}
-      src={directusImageUrl.href}
-      {...rest}
-      width={width ?? undefined}
-      height={height ?? undefined}
-    />
-  )
-}
-
-export default DirectusImg

package/src/components/DirectusImg/interface.ts

@@ -1,19 +0,0 @@
-import type { Nullable } from '../../types/components'
-import type TImgProps from '../Img/interface'
-
-type TDirectusImageProps = Omit<TImgProps, 'src' | 'id' | 'width' | 'height' | 'alt'> & {
-  description?: Nullable<string>
-  fit?: 'cover' | 'contain' | 'inside' | 'outside'
-  caption?: Nullable<string>
-  thumbhash?: Nullable<string>
-  width: Nullable<number>
-  height: Nullable<number>
-  id: Nullable<string>
-  filenameDownload: Nullable<string>
-  /**
-   * @default NEXT_PUBLIC_IMG_DOMAIN
-   */
-  imgDomain?: string
-}
-
-export default TDirectusImageProps

package/src/components/Icon/index.tsx

@@ -1,40 +0,0 @@
-'use client'
-
-import React, { Suspense, lazy, useMemo } from 'react'
-import useThemeContext from '../../providers/Theme/hooks'
-import Fallback from '../icons/IconFallback'
-import type { TIconProps } from './interface'
-
-const Icon = (props: TIconProps) => {
-  const { icon, ...rest } = props
-  const ImportedIcon = useMemo(() => lazy(() => import(`../icons/${icon || 'ArrowRight'}.tsx`)), [icon])
-
-  return (
-    <Suspense fallback={<Fallback className="overflow-visible pointer-events-none" />}>
-      <ImportedIcon {...rest} className="overflow-visible pointer-events-none" {...props} />
-    </Suspense>
-  )
-}
-
-const IconDispatcher = (props: TIconProps) => {
-  const { icon, as: Component = 'span', tokens, customTheme, themeName = 'icon', children, ...rest } = props
-  const theme = useThemeContext(themeName, tokens, customTheme)
-
-  if (typeof icon !== 'string') {
-    return (
-      <Component {...rest} className={theme}>
-        {children}
-        {icon}
-      </Component>
-    )
-  }
-
-  return (
-    <Component className={theme}>
-      {children}
-      <Icon icon={icon} {...rest} />
-    </Component>
-  )
-}
-
-export default IconDispatcher

package/src/components/Icon/interface.ts

@@ -1,8 +0,0 @@
-import type React from 'react'
-import type { SVGProps } from 'react'
-import type { TDefaultComponent } from '../../types/components'
-
-export interface TIconProps extends TDefaultComponent, SVGProps<SVGSVGElement> {
-  icon?: string | React.ReactNode
-  children?: React.ReactNode
-}

package/src/components/Img/img.stories.mdx

@@ -1,28 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import { ArgTypes } from '@storybook/blocks'
-import Img from './'
-import image from '../../../static/images/image.png'
-
-<Meta title="BASE COMPONENTS/Img" component={Img} />
-
-export const Template = (args) => <Img {...args} />
-
-# Img
-
-#### Img component. This component wraps the Next Image component
-
-<Canvas>
-  <Story
-    name="Img"
-    args={{
-      src: image,
-      alt: 'Image',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-## Props
-
-<ArgTypes />

package/src/components/Img/index.tsx

@@ -1,30 +0,0 @@
-import Image from 'next/image'
-import useThemeContext from '../../providers/Theme/hooks'
-import type TImgProps from './interface'
-
-const Img = (props: TImgProps) => {
-  const { src, width, height, themeName = 'img', tokens, customTheme, ...rest } = props
-  const theme = useThemeContext(themeName, tokens, customTheme)
-
-  if (typeof src === 'object') {
-    const { blurWidth, blurHeight, width: srcWidth, height: srcHeight, ...withoutBlurDimensions } = src
-    const blur = {
-      blurwidth: blurWidth,
-      blurheight: blurHeight,
-    }
-
-    return (
-      <Image
-        className={theme}
-        {...withoutBlurDimensions}
-        {...rest}
-        {...blur}
-        width={srcWidth ?? width}
-        height={srcHeight ?? height}
-      />
-    )
-  }
-  return <Image width={width} height={height} className={theme} src={src} {...rest} />
-}
-
-export default Img

package/src/components/Img/interface.ts

@@ -1,9 +0,0 @@
-import type { ImageProps, StaticImageData } from 'next/image'
-import type { TDefaultComponent } from '../../types/components'
-
-type TImgProps = TDefaultComponent &
-  Omit<ImageProps, 'src'> & {
-    src: string | StaticImageData
-  }
-
-export default TImgProps