@okam/stack-ui 1.25.2 → 1.25.3

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

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

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

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

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

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

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

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

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

package/src/components/DirectusImg/index.tsx

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

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

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

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

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

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

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