@okam/stack-ui 1.25.3 → 1.25.6

package/src/components/Alerts/alerts.stories.mdx

@@ -1,282 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import { ArgTypes } from '@storybook/blocks'
-import Alerts from '.'
-import Box from '../Box'
-import Typography from '../Typography'
-
-<Meta
-  title="Base components/Alerts"
-  parameters={{
-    layout: 'fullscreen',
-    controls: {
-      include: ['alerts']
-    }
-  }}
-  component={Alerts}
-  args={{
-    a11y: {
-      nextSlideMessage: 'Next alert',
-      prevSlideMessage: 'Previous alert',
-      paginationBulletMessage: 'Navigate to slide number {{index}}'
-    },
-    closeButtonAriaLabel: 'Close alerts',
-    onOpenChange: (isOpen) => console.log(`Alerts component was ${isOpen ? 'opened' : 'closed'}`),
-    onNavigationPrev: () => console.log('Navigated to previous slide'),
-    onNavigationNext: () => console.log('Navigated to next slide'),
-  }}
-  argTypes={{
-    closeButton: {
-      table: {
-        defaultValue: {
-          summary: 'AlertsCloseButton'
-        }
-      }
-    },
-    a11y: {
-      description: "React Swiper's accessibility module parameters"
-    },
-    children: {
-      description: 'Function looping through every alert and passing the current alert. Can be used for rendering all alerts wrapping `AlertsItem` in another component',
-      table: {
-        type: {
-          summary: '(alert: TAlertsItem) => React.ReactNode'
-        },
-        defaultValue: {
-          summary: '(alert: TAlertsItem) => <AlertsItem {...alert />}'
-        }
-      }
-    },
-    prevButton: {
-      description: 'Custom previous button component for the carousel. Falls back to an arrow button',
-      table: {
-        defaultValue: {
-          summary: 'AlertsNavigationButton'
-        }
-      }
-    },
-    nextButton: {
-      description: 'Custom previous button component for the carousel. Falls back to an arrow button',
-      table: {
-        defaultValue: {
-          summary: 'AlertsNavigationButton'
-        }
-      }
-    },
-    setOpen: {
-      description: 'For controlled states'
-    },
-    onOpenChange: {
-      table: {
-        type: {
-          summary: '(isOpen) => void'
-        }
-      },
-      description: 'Triggered when the alerts are closed or opened'
-    },
-    modules: {
-      table: {
-        defaultValue: {
-          summary: "['A11y', 'Keyboard']"
-        },
-        type: {
-          summary: 'Array<A11y | Autoplay | Controller | EffectCoverflow | EffectCube | EffectFade | EffectFlip | EffectCreative | EffectCards | HashNavigation | History | Keyboard | Lazy | Mousewheel | Navigation | Pagination | Parallax | Scrollbar | Thumbs | Virtual | Zoom | FreeMode | Grid | Manipulation>'
-        }
-      },
-      description: 'String list of modules the swiper will automatically import'
-    }
-  }}
-/>
-
-export const Template = (args) => (
-  <Alerts {...args} />
-)
-
-# Alerts
-
-### A closable and navigable carousel showcasing multiple alerts
-
-## Props
-
-<ArgTypes include={[
-  'alerts',
-  'onOpenChange',
-  'a11y',
-  'closeButtonAriaLabel',
-  'setOpen',
-  'nextButton',
-  'prevButton',
-  'closeButton',
-  'transitionComponent',
-  'themeName',
-  'tokens',
-  'customTheme',
-  'as',
-  'onSwiper',
-  'onNavigationPrev',
-  'onNavigationNext',
-  'children',
-  'modules',
-]} />
-
-## Showcase
-
-### Single alert
-
-<Canvas>
-  <Story
-    name="Single alert"
-    args={{
-      alerts: [{
-        id: '1',
-        title: 'Alert 1 title',
-        'aria-label': 'Alert 1 aria',
-        icon: 'X',
-        content: (
-          <>
-            <Box>
-              <Typography tokens={{ size: 'h4' }}>This is alert 1 large content</Typography>
-            </Box>
-            <Box>
-              <Typography tokens={{ size: 'xs' }}>This is alert 1 small content</Typography>
-            </Box>
-          </>
-        )
-      }]
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-### Navigation
-
-<Canvas>
-  <Story
-    name="Navigation"
-    args={{
-      modules: ['Navigation'],
-      alerts: [
-        {
-          id: '1',
-          title: 'Alert 1 title',
-          'aria-label': 'Alert 1 aria',
-          icon: 'X',
-          content: (
-            <>
-              <Box>
-                <Typography tokens={{ size: 'h4' }}>This is alert 1 large content</Typography>
-              </Box>
-              <Box>
-                <Typography tokens={{ size: 'xs' }}>This is alert 1 small content</Typography>
-              </Box>
-            </>
-          )
-        },
-        {
-          button: {
-            href: '#',
-            as: 'a',
-            children: 'Consulter toutes les alertes'
-          },
-          id: '2',
-          title: 'Alert 2 title',
-          'aria-label': 'Alert 2 aria',
-          icon: 'YouTube',
-        },
-        {
-          id: '3',
-          title: 'Alert 3 title',
-          'aria-label': 'Alert 3 aria',
-          icon: 'Mail',
-        },
-      ]
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-### Pagination
-
-<Canvas>
-  <Story
-    name="Pagination"
-    args={{
-      modules: ['Pagination'],
-      alerts: [
-        {
-          id: '1',
-          'aria-label': 'Alert 1 aria',
-          icon: 'X',
-          content: (
-            <>
-              <Box>
-                <Typography tokens={{ size: 'h4' }}>This is alert 1 large content</Typography>
-              </Box>
-              <Box>
-                <Typography tokens={{ size: 'xs' }}>This is alert 1 small content</Typography>
-              </Box>
-            </>
-          )
-        },
-        {
-          id: '2',
-          title: 'Alert 2 title',
-          'aria-label': 'Alert 2 aria',
-          icon: 'YouTube',
-        },
-        {
-          id: '3',
-          title: 'Alert 3 title',
-          'aria-label': 'Alert 3 aria',
-          icon: 'Mail',
-        },
-      ]
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-### Pagination & Navigation
-
-<Canvas>
-  <Story
-    name="Pagination & Navigation"
-    args={{
-      modules: ['Pagination', 'Navigation'],
-      alerts: [
-        {
-          id: '1',
-          title: 'Alert 1 title',
-          'aria-label': 'Alert 1 aria',
-          icon: 'X',
-          content: (
-            <>
-              <Box>
-                <Typography tokens={{ size: 'h4' }}>This is alert 1 large content</Typography>
-              </Box>
-              <Box>
-                <Typography tokens={{ size: 'xs' }}>This is alert 1 small content</Typography>
-              </Box>
-            </>
-          )
-        },
-        {
-          id: '2',
-          title: 'Alert 2 title',
-          'aria-label': 'Alert 2 aria',
-          icon: 'YouTube',
-        },
-        {
-          id: '3',
-          title: 'Alert 3 title',
-          'aria-label': 'Alert 3 aria',
-          icon: 'Mail',
-        },
-      ]
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>

package/src/components/Alerts/components/AlertsCloseButton.tsx

@@ -1,20 +0,0 @@
-import type { Ref } from 'react'
-import { forwardRef } from 'react'
-import { ButtonWithForwardRef } from '../../Button'
-import type { TButtonProps } from '../../Button/interface'
-import Icon from '../../Icon'
-import CloseBtn from '../../icons/CloseBtn'
-
-const AlertsCloseButton = forwardRef((props: TButtonProps, ref: Ref<HTMLButtonElement & HTMLAnchorElement>) => {
-  const { themeName = 'alerts.closeBtn', ...rest } = props
-
-  return (
-    <ButtonWithForwardRef ref={ref} themeName={themeName} {...rest}>
-      <Icon icon={<CloseBtn />} />
-    </ButtonWithForwardRef>
-  )
-})
-
-AlertsCloseButton.displayName = 'AlertsCloseButton'
-
-export default AlertsCloseButton

package/src/components/Alerts/components/AlertsItem.tsx

@@ -1,39 +0,0 @@
-'use client'
-
-import React from 'react'
-import { useSwiperSlide } from 'swiper/react'
-import Box from '../../Box'
-import Button from '../../Button'
-import Icon from '../../Icon'
-import type { TAlertsItemProps } from '../interface'
-
-const AlertsItem = (props: TAlertsItemProps) => {
-  const { title, button, content, themeName = 'alerts.item', tokens, icon, id } = props
-  const { isActive } = useSwiperSlide()
-
-  if (!title && !button && !content && !icon) return null
-
-  return (
-    <>
-      {icon && <Icon icon={icon} themeName={`${themeName}.icon`} tokens={tokens} />}
-      {(title || button || content) && (
-        <Box themeName={`${themeName}.container`} tokens={tokens}>
-          {title && (
-            <Box as="span" themeName={`${themeName}.title`} tokens={tokens} {...{ id }}>
-              {title}
-            </Box>
-          )}
-          {button && (
-            <Button tabIndex={isActive ? 0 : -1} themeName={`${themeName}.button`} tokens={tokens} {...button} />
-          )}
-          {content &&
-            (React.isValidElement(content)
-              ? React.cloneElement(content, { ...content.props, themeName: `${themeName}.content`, tokens })
-              : content)}
-        </Box>
-      )}
-    </>
-  )
-}
-
-export default AlertsItem

package/src/components/Alerts/components/AlertsNavigationButton.tsx

@@ -1,71 +0,0 @@
-import type { Ref } from 'react'
-import { forwardRef } from 'react'
-import { FocusRing, usePress } from 'react-aria'
-import { useAlertsController } from '../../../providers/Alerts'
-import { ButtonWithForwardRef } from '../../Button'
-import type { TButtonProps } from '../../Button/interface'
-import Icon from '../../Icon'
-
-type TAlertsNavigationButtonProps = TButtonProps & {
-  onSubmit?: () => void
-}
-
-const AlertsNavigationButton = forwardRef(
-  (props: TAlertsNavigationButtonProps, ref: Ref<HTMLButtonElement & HTMLAnchorElement>) => {
-    const { themeName = 'alerts.navigationBtn', tokens, customTheme, children, onSubmit, ...rest } = props
-    const { isDisabled } = rest
-
-    const { pressProps } = usePress({
-      onPress: () => onSubmit?.(),
-    })
-
-    return (
-      <FocusRing within focusRingClass="has-focus-ring">
-        <ButtonWithForwardRef
-          themeName={themeName}
-          tokens={tokens}
-          ref={ref}
-          {...pressProps}
-          {...rest}
-          {...{ 'aria-disabled': isDisabled }}
-        >
-          {children}
-        </ButtonWithForwardRef>
-      </FocusRing>
-    )
-  },
-)
-
-export const AlertsNextNavigationButton = forwardRef(
-  (props: TButtonProps, ref: Ref<HTMLButtonElement & HTMLAnchorElement>) => {
-    const { controller } = useAlertsController()
-
-    const disabled = controller?.activeIndex === (controller?.slides?.length ?? 1) - 1
-
-    return (
-      <AlertsNavigationButton onSubmit={() => controller?.slideNext()} {...props} ref={ref} isDisabled={disabled}>
-        <Icon icon="ArrowRight" />
-      </AlertsNavigationButton>
-    )
-  },
-)
-
-export const AlertsPrevNavigationButton = forwardRef(
-  (props: TButtonProps, ref: Ref<HTMLButtonElement & HTMLAnchorElement>) => {
-    const { controller } = useAlertsController()
-
-    const disabled = controller?.activeIndex === 0
-
-    return (
-      <AlertsNavigationButton onSubmit={() => controller?.slidePrev()} {...props} ref={ref} isDisabled={disabled}>
-        <Icon icon="ArrowLeft" />
-      </AlertsNavigationButton>
-    )
-  },
-)
-
-AlertsNavigationButton.displayName = 'AlertsNavigationButton'
-AlertsNextNavigationButton.displayName = 'AlertsNextNavigationButton'
-AlertsPrevNavigationButton.displayName = 'AlertsPrevNavigationButton'
-
-export default AlertsNavigationButton

package/src/components/Alerts/components/AlertsSwiper.tsx

@@ -1,125 +0,0 @@
-import { useRef, useState } from 'react'
-import slugify from 'slugify'
-import * as swiperModules from 'swiper/modules'
-import type { SwiperClass } from 'swiper/react'
-import { Swiper, SwiperSlide } from 'swiper/react'
-import { AlertsControllerContextProvider } from '../../../providers/Alerts'
-import useThemeContext from '../../../providers/Theme/hooks'
-import type { TAlertsComponentProps, TAlertsProps } from '../interface'
-import AlertsItem from './AlertsItem'
-import 'swiper/css'
-import 'swiper/css/pagination'
-import { AlertsNextNavigationButton, AlertsPrevNavigationButton } from './AlertsNavigationButton'
-import AlertsPagination from './pagination/AlertsPagination'
-
-const AlertsSwiper = (props: TAlertsProps) => {
-  const {
-    themeName,
-    tokens,
-    customTheme,
-    children = (itemProps) => <AlertsItem {...itemProps} />,
-    alerts,
-    a11y,
-    slidesPerView = 1,
-    spaceBetween = 50,
-    modules,
-    prevButton: PrevButton = AlertsPrevNavigationButton,
-    nextButton: NextButton = AlertsNextNavigationButton,
-    ...rest
-  } = props
-  const prevButtonRef = useRef(null)
-  const nextButtonRef = useRef(null)
-
-  const {
-    itemRoleDescriptionMessage = 'slide',
-    slideRole = 'group',
-    containerRoleDescriptionMessage = 'carousel',
-    paginationGroupLabel = 'pagination',
-  } = a11y ?? {}
-
-  const itemWrapperTheme = useThemeContext(`${themeName}.item.wrapper`, tokens, customTheme)
-  const swiperTheme = useThemeContext(`${themeName}.swiper.swiper`, tokens, customTheme)
-  const swiperWrapperTheme = useThemeContext(`${themeName}.swiper.wrapper`, tokens, customTheme)
-
-  const defaultModules: TAlertsComponentProps['modules'] = ['A11y']
-
-  const importedModules = [...(modules?.filter((module) => module !== 'Pagination') ?? []), ...defaultModules].map(
-    (module) => swiperModules[module],
-  )
-
-  const hasNavigation = modules?.includes('Navigation')
-  const hasPagination = modules?.includes('Pagination')
-
-  const [controller, setController] = useState<SwiperClass>()
-  const [activeIndex, setActiveIndex] = useState<number>(0)
-
-  return (
-    <AlertsControllerContextProvider controller={controller}>
-      {hasNavigation && (
-        <PrevButton
-          themeName={`${themeName}.navigation.button`}
-          tokens={{ ...tokens, order: 'prev' }}
-          ref={prevButtonRef}
-          aria-label={a11y?.prevSlideMessage}
-        />
-      )}
-      {hasNavigation && (
-        <NextButton
-          themeName={`${themeName}.navigation.button`}
-          tokens={{ ...tokens, order: 'next' }}
-          ref={nextButtonRef}
-          aria-label={a11y?.nextSlideMessage}
-        />
-      )}
-      {hasPagination && (
-        <AlertsPagination
-          themeName={`${themeName}.pagination`}
-          tokens={tokens}
-          activeIndex={activeIndex}
-          alerts={alerts}
-          paginationGroupLabel={paginationGroupLabel}
-        />
-      )}
-      <Swiper
-        tabIndex={0}
-        {...rest}
-        onSwiper={(c) => {
-          setController(c)
-          setActiveIndex(c.activeIndex)
-        }}
-        onSlideChange={(c) => setActiveIndex(c.activeIndex)}
-        role="group"
-        aria-roledescription={containerRoleDescriptionMessage ?? undefined}
-        slidesPerView={slidesPerView}
-        spaceBetween={spaceBetween}
-        className={swiperTheme}
-        wrapperClass={swiperWrapperTheme}
-        modules={importedModules}
-        keyboard={{
-          enabled: true,
-          onlyInViewport: false,
-        }}
-        a11y={a11y}
-      >
-        {alerts.map((alert) => {
-          const { id, title, ariaLabel } = alert
-
-          return (
-            <SwiperSlide
-              key={id}
-              className={itemWrapperTheme}
-              {...(title ? { 'aria-labelledby': id } : { 'aria-label': ariaLabel })}
-              {...{ id: slugify(`${id}-${title}`) }}
-              role={slideRole}
-              aria-roledescription={itemRoleDescriptionMessage ?? undefined}
-            >
-              {children({ ...alert, themeName: `${themeName}.item`, tokens })}
-            </SwiperSlide>
-          )
-        })}
-      </Swiper>
-    </AlertsControllerContextProvider>
-  )
-}
-
-export default AlertsSwiper

package/src/components/Alerts/components/pagination/AlertsPagination.tsx

@@ -1,32 +0,0 @@
-import { FocusScope } from 'react-aria'
-import Box from '../../../Box'
-import type { TAlertsPaginationProps } from '../../interface'
-import AlertsPaginationBullet from './AlertsPaginationBullet'
-
-const AlertsPagination = (props: TAlertsPaginationProps) => {
-  const { themeName, tokens, alerts, activeIndex, paginationGroupLabel } = props
-
-  return (
-    <Box
-      as="div"
-      themeName={`${themeName}.wrapper`}
-      tokens={tokens}
-      {...{ role: 'group', 'aria-label': paginationGroupLabel }}
-    >
-      <FocusScope>
-        {alerts.map((_, index) => (
-          <AlertsPaginationBullet
-            key={JSON.stringify(_)}
-            index={index}
-            activeIndex={activeIndex}
-            alerts={alerts}
-            themeName={themeName}
-            tokens={tokens}
-          />
-        ))}
-      </FocusScope>
-    </Box>
-  )
-}
-
-export default AlertsPagination

package/src/components/Alerts/components/pagination/AlertsPaginationBullet.tsx

@@ -1,61 +0,0 @@
-import { useAlertsController } from 'libs/stack/stack-ui/src/providers/Alerts'
-import { useFocusManager, useKeyboard, usePress } from 'react-aria'
-import slugify from 'slugify'
-import Button from '../../../Button'
-import type { TAlertsPaginationBulletProps } from '../../interface'
-
-const AlertsPaginationBullet = (props: TAlertsPaginationBulletProps) => {
-  const { themeName, tokens, alerts, activeIndex, index } = props
-
-  const { controller } = useAlertsController()
-
-  const focusManager = useFocusManager()
-  const prevIndex = index === 0 ? alerts.length - 1 : index - 1
-  const nextIndex = index === alerts.length - 1 ? 0 : index + 1
-
-  const { keyboardProps } = useKeyboard({
-    onKeyUp: (e) => {
-      if (e.key === 'ArrowLeft') {
-        e.preventDefault()
-        focusManager?.focusPrevious({ wrap: true })
-        controller?.slideTo(prevIndex)
-      }
-
-      if (e.key === 'ArrowRight') {
-        e.preventDefault()
-        focusManager?.focusNext({ wrap: true })
-        controller?.slideTo(nextIndex)
-      }
-    },
-  })
-
-  const { pressProps } = usePress({
-    onPress: () => controller?.slideTo(index),
-  })
-
-  const alert = alerts[index]
-  const isActive = index === activeIndex
-  const { title, id } = alert
-
-  const hasTitle = title && title.length > 0
-
-  return (
-    <Button
-      as="button"
-      {...{
-        tabIndex: 0,
-        role: 'button',
-        'aria-current': isActive ? 'true' : 'false',
-        'aria-disabled': isActive,
-        'aria-label': !hasTitle ? `${index + 1} / ${alerts.length}` : undefined,
-        'aria-labelledby': hasTitle ? slugify(`${id}-${title}`) : undefined,
-      }}
-      {...keyboardProps}
-      {...pressProps}
-      themeName={`${themeName}.bullet`}
-      tokens={{ ...tokens, active: isActive }}
-    />
-  )
-}
-
-export default AlertsPaginationBullet

package/src/components/Alerts/index.tsx

@@ -1,54 +0,0 @@
-'use client'
-
-import { useRef } from 'react'
-import { useOverlayTriggerState } from 'react-stately'
-import RenderWithOpacity from '../../transitions/RenderWithOpacity'
-import Box from '../Box'
-import useOverlayHook from '../Lightbox/hooks/overlay'
-import AlertsCloseButton from './components/AlertsCloseButton'
-import AlertsSwiper from './components/AlertsSwiper'
-import type { TAlertsProps } from './interface'
-
-const Alerts = (props: TAlertsProps) => {
-  const {
-    themeName = 'alerts',
-    tokens,
-    customTheme,
-    defaultOpen = true,
-    closeButton: CloseButton = AlertsCloseButton,
-    transitionComponent: TransitionComponent = RenderWithOpacity,
-    closeButtonAriaLabel,
-    isOpen,
-    onOpenChange,
-    setOpen,
-    ...rest
-  } = props
-
-  const triggerRef = useRef(null)
-
-  const state = useOverlayTriggerState({ ...props, defaultOpen })
-
-  const { triggerProps, overlayProps } = useOverlayHook({ ...props, type: 'dialog' }, state, triggerRef)
-
-  return (
-    <TransitionComponent
-      {...overlayProps}
-      role="alert"
-      themeName={`${themeName}.wrapper`}
-      tokens={tokens}
-      isVisible={state.isOpen}
-    >
-      <CloseButton
-        ref={triggerRef}
-        themeName={`${themeName}.closeBtn`}
-        aria-label={closeButtonAriaLabel}
-        {...triggerProps}
-      />
-      <Box themeName={`${themeName}.container`} tokens={tokens}>
-        <AlertsSwiper themeName={themeName} tokens={tokens} {...rest} />
-      </Box>
-    </TransitionComponent>
-  )
-}
-
-export default Alerts