@growth-angels/ds-core 0.0.2 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@growth-angels/ds-core",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Design system by Growth Angels",
   "license": "MIT",
   "private": false,
@@ -9,7 +9,7 @@
   "types": "dist/index.d.ts",
   "style": "src/index.scss",
   "sideEffects": [
-    "src/index.scss"
+    "src/**/*.scss"
   ],
   "exports": {
     ".": {
@@ -20,7 +20,7 @@
   },
   "files": [
     "dist",
-    "src/index.scss"
+    "src"
   ],
   "scripts": {
     "clean": "rm -rf dist",

package/src/atoms/Button/Button.scss

@@ -0,0 +1,31 @@
+.ga-ds-btn {
+  padding: var(--ga-button-padding);
+  display: inline-flex;
+  border: none;
+  font-size: var(--ga-font-sizes-base);
+  font-weight: var(--ga-font-weight-base);
+  font-family: var(--ga-font-family-button);
+  border-radius: var(--ga-button-radius, 0);
+  cursor: pointer;
+
+  &--primary {
+    background-color: var(--ga-button-background-primary, #eee);
+    color: var(--ga-button-color-primary, #000);
+  }
+
+  &--secondary {
+    background-color: var(--ga-button-background-secondary, #424242);
+    color: var(--ga-button-color-secondary, #fff);
+  }
+
+  &--link {
+    color: var(--ga-button-color-link, purple);
+    padding: 0;
+  }
+
+  &--icon {
+    --ga-button-padding: 0.8rem 1.2rem;
+    justify-content: center;
+    align-items: center;
+  }
+}

package/src/atoms/Button/Button.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from './Button'
+
+const meta: Meta<typeof Button> = {
+  title: 'Atoms/Button',
+  component: Button,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof Button>
+
+export const Primary: Story = {
+  args: {
+    variant: 'primary',
+    children: 'Button',
+    as: 'a',
+    href: '#',
+  },
+}
+
+export const Secondary: Story = {
+  args: {
+    variant: 'secondary',
+    children: 'Button',
+    as: 'a',
+    href: '#',
+  },
+}
+
+export const Link: Story = {
+  args: {
+    variant: 'link',
+    children: 'Button',
+    as: 'a',
+    href: '#',
+  },
+}

package/src/atoms/Button/Button.tsx

@@ -0,0 +1,25 @@
+import { JSX } from 'react/jsx-runtime'
+import type { ButtonProps } from './Button.types'
+import React from 'react'
+import { Icon } from '../Icon/Icon'
+
+export const Button = <T extends React.ElementType = "button">(props: ButtonProps<T>): JSX.Element => {
+  const { as, children, variant, preventDefault, icon, extraClassNames, ...restProps } = props
+  let customVariant = variant
+  if(icon) {
+    customVariant = 'icon'
+  }
+  const classNames = ['ga-ds-btn', `ga-ds-btn--${customVariant}`, ...(extraClassNames || [])]
+   const handleClick: React.MouseEventHandler<React.ElementRef<T>> = (e) => {
+    if (preventDefault) e.preventDefault()
+    props?.onClick?.(e)
+  }
+  return React.createElement(as || 'button', {
+    ...restProps,
+    className: classNames.join(' '),
+    onClick: handleClick
+  }, <>
+    {icon && <Icon name={icon} size='sm' />}
+    {children && children}
+  </>)
+}

package/src/atoms/Button/Button.types.ts

@@ -0,0 +1,16 @@
+import { WordpressDefault } from "../../global.types.js"
+import React, { ElementType, ComponentPropsWithoutRef } from "react"
+
+export type Variant = "primary" | "secondary" | "tertiary" | "link" | "icon"
+
+export type ButtonProps<T extends ElementType = "button"> = {
+  as?: T
+  variant?: Variant
+  hasIcon?: "left" | "right"
+  icon?: "chevron-left" | "chevron-right"
+  preventDefault?: boolean
+  children?: React.ReactNode
+} & WordpressDefault &
+  Omit<ComponentPropsWithoutRef<T>, "as" | "className" | "onClick"> & {
+    onClick?: React.MouseEventHandler<React.ElementRef<T>>
+  }

package/src/atoms/Icon/Icon.scss

@@ -0,0 +1,19 @@
+.ga-ds-icon {
+  width: 2.4rem;
+  height: 2.4rem;
+
+  &--sm {
+    width: 1.8rem;
+    height: 1.8rem;
+  }
+
+  &--md {
+    width: 3rem;
+    height: 3rem;
+  }
+
+  &--lg {
+    width: 4rem;
+    height: 4rem;
+  }
+}

package/src/atoms/Icon/Icon.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Icon } from './Icon'
+
+const meta: Meta<typeof Icon> = {
+  title: 'Atoms/Icon',
+  component: Icon,
+  tags: ['autodocs'],
+  argTypes: {
+    name: {
+      control: 'select',
+      options: ['chevron-left', 'chevron-right'],
+    },
+    size:{
+      control: 'radio',
+      options: [undefined, 'sm', 'md', 'lg'],
+    },
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof Icon>
+
+export const Primary: Story = {
+  args: {
+    name: 'chevron-left'
+  }
+}

package/src/atoms/Icon/Icon.tsx

@@ -0,0 +1,10 @@
+import { useThemeAssets } from "../../hooks/useThemeAssets";
+import { IconProps } from "./Icon.types";
+
+export const Icon = ({ name, size }: IconProps) => {
+  const { iconsSprite } = useThemeAssets()
+  const classeNames = ['ga-ds-icon', ...(size ? [`ga-ds-icon--${size}`] : [])]
+  return <svg className={classeNames.join(' ')} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <use xlinkHref={`${iconsSprite}#${name}`} />
+  </svg>
+}

package/src/atoms/Icon/Icon.types.ts

@@ -0,0 +1,5 @@
+export interface IconProps {
+  name: string
+  size?: 'sm' | 'md' | 'lg'
+  spriteFile?: string
+}

package/src/atoms/Text/Text.scss

@@ -0,0 +1,4 @@
+.ga-ds-heading {
+  font-weight: var(--ga-font-weight-heading);
+  font-family: var(--ga-font-family-heading);
+}

package/src/atoms/Text/Text.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { TextProps } from "./Text.types";
+
+export const Text = (props: TextProps) => {
+  const { as, children, classNames, type = "paragraph" } = props
+
+  const className = typeof classNames === 'string' ? classNames : classNames?.join(' ') || ''
+
+  return React.createElement(as, {
+    className: `ga-ds-${type} ${className}`,
+  }, children)
+}

package/src/atoms/Text/Text.types.ts

@@ -0,0 +1,6 @@
+export interface TextProps {
+  as: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span'
+  classNames?: string[] | string
+  type?: 'heading' | 'paragraph'
+  children: string
+}

package/src/atoms/atoms.scss

@@ -0,0 +1,3 @@
+@use './Button/Button.scss';
+@use './Text/Text.scss';
+@use './Icon/Icon.scss';

package/src/atoms/atoms.ts

@@ -0,0 +1 @@
+export * from './Button/Button'

package/src/global.types.ts

@@ -0,0 +1,3 @@
+export interface WordpressDefault {
+  extraClassNames?: string[]
+}

package/src/hooks/useBreakPointObserver.ts

@@ -0,0 +1,25 @@
+import { useReactAdapter } from './useReactAdaptater'
+
+export function useBreakpointObserver(breakpoints = { sm: 640, md: 1024, lg: 1280 }) {
+  const { useEffect, useState } = useReactAdapter()
+  const [current, setCurrent] = useState<'sm' | 'md' | 'lg'>('sm')
+  useEffect(() => {
+    let frameId: number
+
+    const check = () => {
+      const width = window.innerWidth
+      let bp: 'sm' | 'md' | 'lg' = 'sm'
+
+      if (width >= breakpoints.md) bp = 'lg'
+      else if (width >= breakpoints.sm) bp = 'md'
+
+      setCurrent((prev) => (prev !== bp ? bp : prev))
+      frameId = requestAnimationFrame(check)
+    }
+
+    frameId = requestAnimationFrame(check)
+    return () => cancelAnimationFrame(frameId)
+  }, [breakpoints])
+
+  return current
+}

package/src/hooks/useReactAdaptater.ts

@@ -0,0 +1,8 @@
+import React from 'react'
+
+export const useReactAdapter = () => {
+  if (typeof window === 'undefined' || !(window as typeof window & { wp: { element: typeof React } }).wp || !(window as typeof window & { wp: { element: typeof React } }).wp.element) {
+    return React
+  }
+  return (window as typeof window & { wp: { element: typeof React } }).wp.element
+}

package/src/hooks/useThemeAssets.ts

@@ -0,0 +1,15 @@
+let defaultThemeAssets = {
+  iconsSprite: '/assets/svg/sprites/icons.svg'
+}
+
+export const setThemeAssets = (assets: typeof defaultThemeAssets) => {
+  defaultThemeAssets = {
+    ...defaultThemeAssets,
+    ...assets,
+  }
+}
+
+
+export const useThemeAssets = () => {
+  return defaultThemeAssets
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './atoms/atoms'
+export * from './organisms/organisms'
+export * from './layout/layout'
+export { setThemeAssets } from './hooks/useThemeAssets'

package/src/layout/Container/Container.scss

@@ -0,0 +1,13 @@
+@use 'sass:map';
+$sizes: (
+  "large": "var(--ga-container-large)",
+  "medium": "var(--ga-container-medium)",
+  "small": "var(--ga-container-small)",
+);
+
+@each $key, $value in $sizes {
+  .ga-ds-container--#{$key} {
+    padding-left: calc((100% - #{$value}) / 2);
+    padding-right: calc((100% - #{$value}) / 2);
+  }
+}

package/src/layout/Container/Container.tsx

@@ -0,0 +1,10 @@
+import type { JSX } from 'react/jsx-runtime'
+import type { ContainerProps } from './Container.types'
+
+export const Container = (props: ContainerProps): JSX.Element => {
+  const { size, children } = props
+  const classes = ['ga-ds-container', `ga-ds-container--${size}`, ...(props.extraClassNames || [])]
+  return <div className={classes.join(' ')}>
+    {children}
+  </div>
+}

package/src/layout/Container/Container.types.ts

@@ -0,0 +1,9 @@
+import { WordpressDefault } from "../../global.types";
+
+export type ContainerSize = 'large' | 'medium' | 'small';
+
+
+export interface ContainerProps extends WordpressDefault {
+  size: ContainerSize;
+  children: React.ReactNode | React.ReactNode[];
+}

package/src/layout/Grid/Grid.scss

@@ -0,0 +1,7 @@
+@use './GridItem/GridItem.scss';
+
+.ga-ds-grid {
+  display: grid;
+  gap: var(--ga-grid-gutter);
+  grid-template-columns: repeat(var(--ga-grid-columns), 1fr);
+}

package/src/layout/Grid/Grid.tsx

@@ -0,0 +1,10 @@
+import type { JSX } from 'react/jsx-runtime'
+import { GridProps } from './Grid.types'
+export const Grid = (props: GridProps): JSX.Element => {
+  const { children, alignItems, justifyContent, extraClassNames } = props
+  const classNames = ['ga-ds-grid', ...(extraClassNames || [])]
+
+  return <div className={classNames.join(' ')} style={{ alignItems, justifyContent }}>
+    {children}
+  </div>
+}

package/src/layout/Grid/Grid.types.ts

@@ -0,0 +1,10 @@
+import { WordpressDefault } from "../../global.types";
+
+export interface Attributes {
+  alignItems: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'
+  justifyContent: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around'
+}
+
+export interface GridProps extends WordpressDefault, Attributes {
+  children: React.ReactNode | React.ReactNode[];
+}

package/src/layout/Grid/GridItem/GridItem.scss

@@ -0,0 +1,17 @@
+@use "@ga/foundation/config" as *;
+
+.ga-ds-grid-item {
+  grid-column: span var(--ga-ds-grid-item-size-xs);
+
+  @include bp-up(sm) {
+    grid-column: span var(--ga-ds-grid-item-size-sm);
+  }
+
+  @include bp-up(md) {
+    grid-column: span var(--ga-ds-grid-item-size-md);
+  }
+
+  @include bp-up(lg) {
+    grid-column: span var(--ga-ds-grid-item-size-lg);
+  }
+}

package/src/layout/Grid/GridItem/GridItem.tsx

@@ -0,0 +1,15 @@
+import type { JSX } from 'react/jsx-runtime'
+import { GridItemProps } from './GridItem.types'
+export const GridItem = (props: GridItemProps): JSX.Element => {
+  const { children, sizes = {
+    xs: 12,
+    sm: 12,
+    md: 12,
+    lg: 12,
+  } } = props
+
+  const style = Object.fromEntries(Object.entries(sizes).map(([key, value]) => [`--ga-ds-grid-item-size-${key}`, `${value}`]))
+  return <div className="ga-ds-grid-item" style={style}>
+    {children}
+  </div>
+}

package/src/layout/Grid/GridItem/GridItem.types.ts

@@ -0,0 +1,16 @@
+import { WordpressDefault } from "../../../global.types";
+
+export type ColumnSize = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12'
+
+export interface Attributes {
+  sizes: {
+    xs: ColumnSize;
+    sm: ColumnSize;
+    md: ColumnSize;
+    lg: ColumnSize;
+  }
+}
+
+export interface GridItemProps extends WordpressDefault, Attributes {
+  children: React.ReactNode | React.ReactNode[];
+}

package/src/layout/layout.scss

@@ -0,0 +1,3 @@
+@use './Container/Container.scss';
+@use './Grid/Grid.scss';
+@use './Grid/GridItem/GridItem.scss';

package/src/layout/layout.ts

@@ -0,0 +1,3 @@
+export * from './Container/Container'
+export * from './Grid/Grid'
+export * from './Grid/GridItem/GridItem'

package/src/organisms/Card/Card.scss

@@ -0,0 +1,60 @@
+.ga-ds-card {
+  --card-spacing: var(--ga-card-spacing);
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ga-card-gap);
+  border-radius: var(--ga-card-radius, 0);
+  overflow: hidden;
+
+  &__header {
+    overflow: hidden;
+  }
+
+  &__title,
+  &__content,
+  &__footer {
+    padding-left: var(--card-spacing);
+    padding-right: var(--card-spacing);
+  }
+
+  &__footer {
+    padding-bottom: var(--card-spacing);
+  }
+
+  &--primary {
+    background-color: var(--ga-card-background-primary);
+    color: var(--ga-card-background-primary-reverted);
+  }
+
+  &--secondary {
+    background-color: var(--ga-card-background-secondary);
+    color: var(--ga-card-background-secondary-reverted);
+  }
+}
+
+.ga-ds-card--default {
+  .ga-ds-card__header {
+    height: var(--card-header-height, 24rem);
+
+    figure {
+      width: 100%;
+      height: 100%;
+    }
+
+    img {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      object-position: center;
+    }
+  }
+}
+
+.ga-ds-card--editorial {
+  .ga-ds-card__header {
+    padding-top: var(--card-spacing);
+    padding-left: var(--card-spacing);
+  }
+}

package/src/organisms/Card/Card.tsx

@@ -0,0 +1,8 @@
+import { JSX } from 'react/jsx-runtime'
+import type { CardProps } from './Card.types'
+
+export const Card = ({ children, variant = 'primary', extraClassNames, type = 'default' }: CardProps): JSX.Element => {
+  const classNames = ['ga-ds-card', `ga-ds-card--${variant}`, `ga-ds-card--${type}`, ...(extraClassNames || [])]
+
+  return <div className={classNames.join(' ')}>{children}</div>
+}

package/src/organisms/Card/Card.types.ts

@@ -0,0 +1,8 @@
+export type Variant = 'primary' | 'secondary'
+export type CardType = 'default' | 'editorial' | 'image' | 'icon'
+export interface CardProps {
+  children: React.ReactNode | React.ReactNode[] | JSX.Element
+  variant: Variant
+  type?: CardType
+  extraClassNames?: string[]
+}

package/src/organisms/Card/CardDefault.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Card } from './Card'
+import { Button } from '../../atoms/atoms';
+import CardDefaultHeader600x400 from '../../../assets/600x400.svg'
+import CardDefaultHeader50x50 from '../../../assets/50x50.svg'
+
+const meta: Meta<typeof Card> = {
+  title: 'Organisms/Card/Default',
+  component: Card,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof Card>
+
+const CardChildren = ({ image } : {
+  image: string
+}) => {
+  const images = {
+    '400x600': CardDefaultHeader600x400,
+    '50x50': CardDefaultHeader50x50
+  }
+  return <>
+    <div className="ga-ds-card__header">
+      <img src={images[image as keyof typeof images]} alt="Card header" />
+    </div>
+    <div className="ga-ds-card__title">
+      <h2>Card title</h2>
+    </div>
+    <div className='ga-ds-card__content'>
+      <p>
+        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro temporibus quam ex consequatur est laboriosam nam quisquam doloremque perferendis quo ut, tempora error neque modi delectus assumenda! A, doloremque nulla.
+      </p>
+    </div>
+    <div className="ga-ds-card__footer">
+      <Button as="a" variant='primary'>Read more</Button>
+    </div>
+  </>
+}
+
+export const Primary: Story = {
+  args: {
+    variant: 'primary',
+    type: 'default',
+    children: <CardChildren image={'400x600'} />
+  }
+}
+
+export const Secondary: Story = {
+  args: {
+    variant: 'secondary',
+    type: 'default',
+    children: <CardChildren image={'400x600'} />
+  }
+}

package/src/organisms/Card/CardEditorial.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Card } from './Card'
+import { Button } from '../../atoms/atoms';
+import CardDefaultHeader600x400 from '../../../assets/600x400.svg'
+import CardDefaultHeader50x50 from '../../../assets/50x50.svg'
+
+const meta: Meta<typeof Card> = {
+  title: 'Organisms/Card/Editorial',
+  component: Card,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof Card>
+
+const CardChildren = ({ image } : {
+  image: string
+}) => {
+  const images = {
+    '400x600': CardDefaultHeader600x400,
+    '50x50': CardDefaultHeader50x50
+  }
+  return <>
+    <div className="ga-ds-card__header">
+      <img src={images[image as keyof typeof images]} alt="Card header" />
+    </div>
+    <div className="ga-ds-card__title">
+      <h2>Card title</h2>
+    </div>
+    <div className='ga-ds-card__content'>
+      <p>
+        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro temporibus quam ex consequatur est laboriosam nam quisquam doloremque perferendis quo ut, tempora error neque modi delectus assumenda! A, doloremque nulla.
+      </p>
+    </div>
+    <div className="ga-ds-card__footer">
+      <Button as="a" variant='primary'>Read more</Button>
+    </div>
+  </>
+}
+
+export const Primary: Story = {
+  args: {
+    variant: 'primary',
+    type: 'editorial',
+    children: <CardChildren image={'50x50'} />
+  }
+}
+
+export const Secondary: Story = {
+  args: {
+    variant: 'secondary',
+    type: 'editorial',
+    children: <CardChildren image={'50x50'} />
+  }
+}

package/src/organisms/Carousel/Carousel.scss

@@ -0,0 +1,85 @@
+@use "@ga/foundation/config" as *;
+
+.ga-ds-carousel {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 2rem;
+
+  &__track {
+    --ga-ds-slides-per-view: 1;
+    display: grid;
+    grid-auto-flow: column; // place les slides horizontalement
+    grid-auto-columns: calc(
+      (100% - (var(--ga-ds-space-between, 1rem) * (var(--ga-ds-slides-per-view, 3) - 1))) / var(--ga-ds-slides-per-view, 3)
+    );
+    gap: var(--ga-ds-space-between, 1rem);
+    scroll-snap-align: start;
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+    box-sizing: border-box;
+    width: 100%;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    @include bp-up(xs) {
+      --ga-ds-slides-per-view: var(--ga-ds-slides-per-view-sm);
+    }
+    @include bp-up(sm) {
+      --ga-ds-slides-per-view: var(--ga-ds-slides-per-view-md);
+    }
+    @include bp-up(md) {
+      --ga-ds-slides-per-view: var(--ga-ds-slides-per-view-lg);
+    }
+  }
+
+  &__slide {
+    flex: 0 0 auto;
+    width: 100%;
+    scroll-snap-align: start;
+  }
+
+  &__arrows {
+    display: flex;
+
+    &.left {
+      justify-content: flex-start;
+    }
+
+    &.right {
+      justify-content: flex-end;
+    }
+
+    &.center {
+      justify-content: center;
+    }
+  }
+
+  &__navigation:has(.ga-ds-carousel__arrows):has(.ga-ds-carousel__dots) {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &__dots {
+    display: flex;
+    gap: var(--ga-ds-gap, 1rem);
+
+    .ga-ds-carousel__dot {
+      display: block;
+      width: 1rem;
+      height: 1rem;
+      border-radius: 50%;
+      background-color: #e2e2e2;
+
+      &--active {
+        background-color: #424242;
+      }
+    }
+  }
+}

package/src/organisms/Carousel/Carousel.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { Carousel } from "./Carousel"
+
+const meta: Meta<typeof Carousel> = {
+  title: "Organisms/Carousel",
+  component: Carousel,
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof Carousel>
+
+export const Primary: Story = {
+  args: {
+    children: [
+      <div>Slide 1</div>,
+      <div>Slide 2</div>,
+      <div>Slide 3</div>,
+      <div>Slide 4</div>,
+      <div>Slide 5</div>,
+      <div>Slide 6</div>,
+      <div>Slide 7</div>,
+    ],
+    slidesPerView: { sm: 1, md: 2, lg: 3 },
+    spaceBetween: 16,
+    pagination: {
+      clickable: true,
+    },
+    navigation: {
+      positionY: "bottom",
+    },
+    hasNavigation: true,
+    hasPagination: true,
+  },
+}

package/src/organisms/Carousel/Carousel.tsx

@@ -0,0 +1,184 @@
+import { Button } from "../../atoms/atoms"
+import { useBreakpointObserver } from "../../hooks/useBreakPointObserver"
+import { useReactAdapter } from "../../hooks/useReactAdaptater"
+import { CarouselProps } from "./Carousel.types"
+
+export const Carousel = (props: CarouselProps) => {
+  const {
+    children,
+    slidesPerView = { sm: 1, md: 2, lg: 3 },
+    spaceBetween = 20,
+    navigation,
+    pagination,
+    context,
+    hasPagination,
+    hasNavigation,
+  } = props
+  const { useEffect, useState, useRef, Children } = useReactAdapter()
+  const trackRef = useRef<HTMLDivElement>(null)
+  const slides = Children.toArray(children)
+
+  const calculatePages = (totalSlides = 0, slidesPerView = 0, step = 1) => {
+    return Math.max(1, Math.ceil((totalSlides - slidesPerView) / step) + 1)
+  }
+
+  const [activeSlideIndex, setActiveSlideIndex] = useState(0)
+  const [isAtEnd, setIsAtEnd] = useState(false)
+  const [isAtStart, setIsAtStart] = useState(true)
+  const [totalPages, setTotalPages] = useState(0)
+
+  useEffect(() => {
+    setIsAtStart(activeSlideIndex === 0)
+    setIsAtEnd(activeSlideIndex === totalPages - 1)
+  }, [activeSlideIndex, totalPages])
+
+  const breakpoint = useBreakpointObserver({ sm: 768, md: 992, lg: 1200 })
+
+  useEffect(() => {
+    setTotalPages(calculatePages(slides.length, slidesPerView[breakpoint], 1))
+  }, [breakpoint, slidesPerView])
+
+  const style = Object.fromEntries(
+    Object.entries(slidesPerView).map(([key, value]) => [`--ga-ds-slides-per-view-${key}`, `${value}`])
+  )
+
+  const goPrev = () => {
+    if (!trackRef.current) return
+    const slides = trackRef.current.querySelectorAll(".ga-ds-carousel__slide")
+    if (activeSlideIndex === 0) return
+
+    const nextIndex = activeSlideIndex - 1
+    slides[nextIndex]?.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest",
+      inline: "start",
+    })
+    setActiveSlideIndex(nextIndex)
+  }
+
+  const goNext = () => {
+    if (!trackRef.current) return
+    const slides = trackRef.current.querySelectorAll(".ga-ds-carousel__slide")
+    const totalSlides = slides.length
+
+    if (activeSlideIndex >= totalSlides - 1) return
+    if (isAtEnd) return
+
+    const nextIndex = activeSlideIndex + 1
+    slides[nextIndex]?.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest",
+      inline: "start",
+    })
+    setActiveSlideIndex(nextIndex)
+  }
+
+  const goTo = (nextIndex: number) => {
+    if (!trackRef.current) return
+    const slides = trackRef.current.querySelectorAll(".ga-ds-carousel__slide")
+    slides[nextIndex]?.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest",
+      inline: "start",
+    })
+    setActiveSlideIndex(nextIndex)
+  }
+
+  return (
+    <div className="ga-ds-carousel" style={style}>
+      {navigation?.positionY === "top" && hasNavigation && (
+        <CarouselNavigation goPrev={goPrev} goNext={goNext} isAtStart={isAtStart} isAtEnd={isAtEnd} />
+      )}
+      <div
+        className="ga-ds-carousel__track"
+        ref={trackRef}
+        style={
+          {
+            "--ga-ds-space-between": `${spaceBetween / 10}rem`,
+          } as React.CSSProperties
+        }
+      >
+        {context === "wp-editor"
+          ? children
+          : slides.map((child, index) => (
+              <div
+                key={index}
+                className={`ga-ds-carousel__slide ${index === activeSlideIndex ? "ga-ds-carousel__slide--active" : ""}`}
+              >
+                {child}
+              </div>
+            ))}
+      </div>
+
+      <div className="ga-ds-carousel__navigation">
+        {pagination && hasPagination && (
+          <CarouselPagination
+            totalPages={totalPages}
+            activeSlideIndex={activeSlideIndex}
+            goTo={goTo}
+            clickable={pagination.clickable}
+          />
+        )}
+        {hasNavigation && navigation?.positionY === "bottom" && (
+          <CarouselNavigation goPrev={goPrev} goNext={goNext} isAtStart={isAtStart} isAtEnd={isAtEnd} />
+        )}
+      </div>
+    </div>
+  )
+}
+
+const CarouselNavigation = ({
+  goPrev,
+  goNext,
+  isAtStart,
+  isAtEnd,
+}: {
+  goPrev: () => void
+  goNext: () => void
+  isAtStart: boolean
+  isAtEnd: boolean
+}) => {
+  return (
+    <div className={`ga-ds-carousel__arrows`}>
+      <Button
+        extraClassNames={["ga-ds-carousel__button", "ga-ds-carousel__button--prev"]}
+        icon="chevron-left"
+        onClick={goPrev}
+        disabled={isAtStart}
+      />
+      <Button
+        extraClassNames={["ga-ds-carousel__button", "ga-ds-carousel__button--next"]}
+        icon="chevron-right"
+        onClick={goNext}
+        disabled={isAtEnd}
+      />
+    </div>
+  )
+}
+
+const CarouselPagination = ({
+  totalPages,
+  activeSlideIndex,
+  goTo,
+  clickable,
+}: {
+  totalPages: number
+  activeSlideIndex: number
+  goTo: (nextIndex: number) => void
+  clickable: boolean
+}) => {
+  return (
+    <div className="ga-ds-carousel__dots">
+      {Array.from({ length: totalPages }, (_, index) => index).map((_, index) => (
+        <span
+          key={index}
+          className={`ga-ds-carousel__dot ${index === activeSlideIndex ? "ga-ds-carousel__dot--active" : ""}`}
+          onClick={() => clickable && goTo(index)}
+          style={{
+            cursor: clickable ? "pointer" : "default",
+          }}
+        ></span>
+      ))}
+    </div>
+  )
+}

package/src/organisms/Carousel/Carousel.types.ts

@@ -0,0 +1,20 @@
+export type Attributes = {
+  context?: 'wp-editor'
+  slidesPerView?: {
+    sm: number
+    md: number
+    lg: number
+  }
+  spaceBetween?: number
+  hasPagination?: boolean
+  hasNavigation?: boolean
+  pagination?: {
+    clickable: boolean
+  },
+  navigation?: {
+    positionY: 'bottom' | 'top';
+  }
+}
+export interface CarouselProps extends Attributes {
+  children: React.ReactNode | React.ReactNode[]
+}

package/src/organisms/organisms.scss

@@ -0,0 +1,2 @@
+@use './Card/Card.scss';
+@use './Carousel/Carousel.scss';

package/src/organisms/organisms.ts

@@ -0,0 +1,2 @@
+export * from './Card/Card'
+export * from './Carousel/Carousel'

package/src/stories/Configure.mdx

@@ -0,0 +1 @@
+# Hello world