@okam/stack-ui 1.25.2 → 1.25.3

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

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

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

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

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

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

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

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

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