@growth-angels/ds-core 0.0.5 → 1.0.0

package/dist/organisms/Card/CardDefault.stories.js

@@ -1,32 +1,32 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Card } from './Card';
-import { Button } from '../../atoms/atoms';
-import CardDefaultHeader600x400 from '../../../assets/600x400.svg';
-import CardDefaultHeader50x50 from '../../../assets/50x50.svg';
+import { Card } from "./Card";
+import { Button } from "../../atoms/atoms";
+import CardDefaultHeader600x400 from "../../../assets/600x400.svg";
+import CardDefaultHeader50x50 from "../../../assets/50x50.svg";
 const meta = {
-    title: 'Organisms/Card/Default',
+    title: "Organisms/Card/Default",
     component: Card,
-    tags: ['autodocs'],
+    tags: ["autodocs"],
 };
 export default meta;
 const CardChildren = ({ image }) => {
     const images = {
-        '400x600': CardDefaultHeader600x400,
-        '50x50': CardDefaultHeader50x50
+        "400x600": CardDefaultHeader600x400,
+        "50x50": CardDefaultHeader50x50,
     };
-    return _jsxs(_Fragment, { children: [_jsx("div", { className: "ga-ds-card__header", children: _jsx("img", { src: images[image], alt: "Card header" }) }), _jsx("div", { className: "ga-ds-card__title", children: _jsx("h2", { children: "Card title" }) }), _jsx("div", { className: 'ga-ds-card__content', children: _jsx("p", { children: "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." }) }), _jsx("div", { className: "ga-ds-card__footer", children: _jsx(Button, { as: "a", variant: 'primary', children: "Read more" }) })] });
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "ga-ds-card__header", children: _jsx("img", { src: images[image], alt: "Card header" }) }), _jsx("div", { className: "ga-ds-card__title", children: _jsx("h2", { children: "Card title" }) }), _jsx("div", { className: "ga-ds-card__content", children: _jsx("p", { children: "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." }) }), _jsx("div", { className: "ga-ds-card__footer", children: _jsx(Button, { as: "a", variant: "primary", children: "Read more" }) })] }));
 };
 export const Primary = {
     args: {
-        variant: 'primary',
-        type: 'default',
-        children: _jsx(CardChildren, { image: '400x600' })
-    }
+        variant: "primary",
+        type: "image",
+        children: _jsx(CardChildren, { image: "400x600" }),
+    },
 };
 export const Secondary = {
     args: {
-        variant: 'secondary',
-        type: 'default',
-        children: _jsx(CardChildren, { image: '400x600' })
-    }
+        variant: "secondary",
+        type: "image",
+        children: _jsx(CardChildren, { image: "400x600" }),
+    },
 };

package/dist/organisms/Carousel/Carousel.js

@@ -65,7 +65,11 @@ export const Carousel = (props) => {
         });
         setActiveSlideIndex(nextIndex);
     };
-    return (_jsxs("div", { className: "ga-ds-carousel", style: style, children: [navigation?.positionY === "top" && hasNavigation && (_jsx(CarouselNavigation, { goPrev: goPrev, goNext: goNext, isAtStart: isAtStart, isAtEnd: isAtEnd })), _jsx("div", { className: "ga-ds-carousel__track", ref: trackRef, style: {
+    const classes = ["ga-ds-carousel"];
+    if (props.extraClassNames) {
+        classes.push(...props.extraClassNames);
+    }
+    return (_jsxs("div", { className: classes.join(" "), style: style, children: [navigation?.positionY === "top" && hasNavigation && (_jsx(CarouselNavigation, { goPrev: goPrev, goNext: goNext, isAtStart: isAtStart, isAtEnd: isAtEnd })), _jsx("div", { className: "ga-ds-carousel__track", ref: trackRef, style: {
                     "--ga-ds-space-between": `${spaceBetween / 10}rem`,
                 }, children: context === "wp-editor"
                     ? children

package/dist/organisms/Carousel/Carousel.types.d.ts

@@ -1,3 +1,4 @@
+import { WordpressDefault } from "../../global.types";
 export type Attributes = {
     context?: 'wp-editor';
     slidesPerView?: {
@@ -15,6 +16,6 @@ export type Attributes = {
         positionY: 'bottom' | 'top';
     };
 };
-export interface CarouselProps extends Attributes {
+export interface CarouselProps extends Attributes, WordpressDefault {
     children: React.ReactNode | React.ReactNode[];
 }

package/dist/organisms/SpoilerList/SpoilerList.d.ts

@@ -0,0 +1,2 @@
+import { SpoilerListProps } from "./SpoilerList.types";
+export declare const SpoilerList: ({ children, extraClassNames }: SpoilerListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/organisms/SpoilerList/SpoilerList.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SpoilerProvider } from "../../context/SpoilerContext";
+import { useReactAdapter } from "../../hooks/useReactAdaptater";
+export const SpoilerList = ({ children, extraClassNames }) => {
+    const { Children, cloneElement } = useReactAdapter();
+    const classes = ["ga-ds-spoiler-list"];
+    if (extraClassNames) {
+        classes.push(...extraClassNames);
+    }
+    return (_jsx("div", { className: classes.join(" "), children: _jsx(SpoilerProvider, { children: Children.toArray(children).map((child, index) => cloneElement(child, { index })) }) }));
+};

package/dist/organisms/SpoilerList/SpoilerList.types.d.ts

@@ -0,0 +1,4 @@
+import { WordpressDefault } from "../../global.types";
+export interface SpoilerListProps extends WordpressDefault {
+    children?: React.ReactNode;
+}

package/dist/organisms/SpoilerList/SpoilerList.types.js

@@ -0,0 +1 @@
+export {};

package/dist/organisms/organisms.d.ts

@@ -1,2 +1,4 @@
 export * from './Card/Card';
+export * from './Card/Card.types';
 export * from './Carousel/Carousel';
+export * from './SpoilerList/SpoilerList';

package/dist/organisms/organisms.js

@@ -1,2 +1,4 @@
 export * from './Card/Card';
+export * from './Card/Card.types';
 export * from './Carousel/Carousel';
+export * from './SpoilerList/SpoilerList';

package/dist/styles.d.ts

@@ -0,0 +1 @@
+import './index.scss';

package/dist/styles.js

@@ -0,0 +1 @@
+import './index.scss';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@growth-angels/ds-core",
-  "version": "0.0.5",
+  "version": "1.0.0",
   "description": "Design system by Growth Angels",
   "license": "MIT",
   "private": false,
@@ -16,7 +16,8 @@
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
     },
-    "./styles": "./src/index.scss"
+    "./styles": "./src/styles.ts",
+    "./styles/scss": "./src/index.scss"
   },
   "files": [
     "dist",
@@ -31,24 +32,24 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@growth-angels/foundation": "0.0.3"
+    "@growth-angels/foundation": "1.0.0"
   },
   "peerDependencies": {
     "react": ">=18"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^4.1.1",
-    "@storybook/addon-a11y": "^9.1.13",
-    "@storybook/addon-docs": "^9.1.13",
-    "@storybook/addon-vitest": "^9.1.13",
-    "@storybook/react-vite": "^9.1.13",
+    "@chromatic-com/storybook": "^4.1.2",
+    "@storybook/addon-a11y": "^10.0.4",
+    "@storybook/addon-docs": "^10.0.4",
+    "@storybook/addon-vitest": "^10.0.4",
+    "@storybook/react-vite": "^10.0.4",
     "@types/react": "^18.0.0",
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
     "concurrently": "^9.2.1",
     "playwright": "^1.56.1",
     "sass": "^1.93.2",
-    "storybook": "^9.1.13",
+    "storybook": "^10.0.4",
     "typescript": "^5.4.0",
     "vitest": "^3.2.4"
   }

package/src/atoms/Button/Button.scss

@@ -1,31 +1,30 @@
-.ga-ds-btn {
+.ga-ds-button > * {
   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);
-  }
+.ga-ds-button--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);
-  }
+.ga-ds-button--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;
-  }
+.ga-ds-button--link > * {
+  color: var(--ga-button-color-link, purple);
+  padding: 0;
+}
 
-  &--icon {
-    --ga-button-padding: 0.8rem 1.2rem;
-    justify-content: center;
-    align-items: center;
-  }
+.ga-ds-button--icon > * {
+  --ga-button-padding: 0.8rem 1.2rem;
+  justify-content: center;
+  align-items: center;
 }

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

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

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

@@ -1,11 +1,11 @@
 import { WordpressDefault } from "../../global.types.js"
 import React, { ElementType, ComponentPropsWithoutRef } from "react"
 
-export type Variant = "primary" | "secondary" | "tertiary" | "link" | "icon"
+export type ButtonVariant = "primary" | "secondary" | "tertiary" | "link" | "icon"
 
 export type ButtonProps<T extends ElementType = "button"> = {
   as?: T
-  variant?: Variant
+  variant?: ButtonVariant
   hasIcon?: "left" | "right"
   icon?: "chevron-left" | "chevron-right"
   preventDefault?: boolean

package/src/atoms/Icon/Icon.scss

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

package/src/atoms/Icon/Icon.tsx

@@ -1,10 +1,12 @@
-import { useThemeAssets } from "../../hooks/useThemeAssets";
-import { IconProps } from "./Icon.types";
+import { useThemeAssets } from "../../hooks/useThemeAssets"
+import { IconProps } from "./Icon.types"
 
-export const Icon = ({ name, size }: IconProps) => {
+export const Icon = ({ name, size, extraClassNames }: 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>
-}
+  const classNames = ["ga-ds-icon", ...(size ? [`ga-ds-icon--${size}`] : []), ...(extraClassNames || [])]
+  return (
+    <svg className={classNames.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

@@ -1,4 +1,6 @@
-export interface IconProps {
+import { WordpressDefault } from "../../global.types"
+
+export interface IconProps extends WordpressDefault {
   name: string
   size?: 'sm' | 'md' | 'lg'
   spriteFile?: string

package/src/atoms/Text/Text.scss

@@ -1,4 +1,35 @@
-.ga-ds-heading {
+.ga-ds-text {
+  font-size: var(--font-size, 1.6rem);
+}
+
+.ga-ds-text--heading {
   font-weight: var(--ga-font-weight-heading);
   font-family: var(--ga-font-family-heading);
-}
+}
+
+.ga-ds-text--paragraph {
+  font-weight: var(--ga-font-weight-body);
+}
+
+.ga-ds-text--center {
+  text-align: center;
+}
+
+.ga-ds-text--right {
+  text-align: right;
+}
+
+$sizes: (88, 64, 56, 48, 40, 32, 24, 20, 18, 16);
+
+@each $size in $sizes {
+  .ga-ds-text--size-#{$size} {
+    font-size: calc(#{$size} / 10 * 1rem);
+  }
+}
+
+$weights: (400, 500, 600, 700);
+@each $weight in $weights {
+  .ga-ds-text--weight-#{$weight} {
+    font-weight: #{$weight};
+  }
+}

package/src/atoms/Text/Text.tsx

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

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

@@ -1,6 +1,10 @@
-export interface TextProps {
+export interface Attributes {
+  size: '64' | '56' | '48' | '40' | '32' | '24' | '20' | '16' | '14' | '12'
   as: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span'
+}
+export interface TextProps extends Attributes {
   classNames?: string[] | string
   type?: 'heading' | 'paragraph'
+  style?: React.CSSProperties
   children: string
 }

package/src/atoms/atoms.scss

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

package/src/atoms/atoms.ts

@@ -1 +1,4 @@
 export * from './Button/Button'
+export * from './Button/Button.types'
+export * from './Icon/Icon'
+export * from './Icon/Icon.types'

package/src/context/SpoilerContext.tsx

@@ -0,0 +1,24 @@
+import { useReactAdapter } from "../hooks/useReactAdaptater"
+
+const { createContext, useContext, useState } = useReactAdapter()
+
+interface SpoilerContextProps {
+  activeIndex: number | null
+  setActiveIndex: (index: number | null) => void
+}
+
+const SpoilerContext = createContext<SpoilerContextProps | undefined>(undefined)
+
+export const SpoilerProvider = ({ children }: { children: React.ReactNode }) => {
+  const [activeIndex, setActiveIndex] = useState<number | null>(0)
+
+  return <SpoilerContext.Provider value={{ activeIndex, setActiveIndex }}>{children}</SpoilerContext.Provider>
+}
+
+export const useSpoilerContext = (): SpoilerContextProps => {
+  const context = useContext(SpoilerContext)
+  if (!context) {
+    throw new Error("useSpoilerContext must be used within a SpoilerProvider")
+  }
+  return context
+}

package/src/global.types.ts

@@ -1,3 +1,7 @@
+export type Padding = "xsmall" | "small" | "medium" | "large" | "xlarge"
+export type Margin = "small" | "medium" | "large"
 export interface WordpressDefault {
   extraClassNames?: string[]
+  padding?: Padding
+  margin?: Margin
 }

package/src/hooks/useReactAdaptater.ts

@@ -1,8 +1,24 @@
 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
+// @ts-ignore - React types from window.wp.element
+type ReactType = typeof import('react')
+
+declare global {
+  interface Window {
+    wp?: {
+      element?: ReactType
+    }
   }
-  return (window as typeof window & { wp: { element: typeof React } }).wp.element
 }
+
+export const useReactAdapter = (): ReactType => {
+  // Check if WordPress element is available (WordPress context)
+  if (typeof window !== 'undefined' && window.wp?.element) {
+    return window.wp.element
+  }
+  
+  // Fallback for non-WordPress environments (Storybook, tests, SSR)
+  // This will bundle React only in non-WordPress builds
+  return React
+}
+

package/src/hooks/useSpoilerContext.ts

@@ -0,0 +1,17 @@
+import { useReactAdapter } from "./useReactAdaptater";
+
+export default function() {
+  const { useState} = useReactAdapter();
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+
+  const toggleIndex = (index: number) => {
+    setActiveIndex((currentIndex) =>
+      currentIndex === index ? null : index
+    );
+  };
+
+  return {
+    activeIndex,
+    toggleIndex,
+  };
+}

package/src/index.scss

@@ -1,3 +1,5 @@
 @use "./atoms/atoms";
+@use "./molecules/molecules";
 @use "./organisms/organisms";
 @use "./layout/layout";
+@use "./utils/utils";

package/src/index.ts

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

package/src/layout/Container/Container.scss

@@ -1,13 +1,55 @@
-@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);
-  }
-}
+@use "@growth-angels/foundation/config" as *;
+@use "sass:map";
+
+.ga-ds-container {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  padding-left: var(--ga-container-safe-zone, 2.4rem);
+  padding-right: var(--ga-container-safe-zone, 2.4rem);
+
+  &.ga-ds-container-stretch--right {
+    @include bp-up("lg") {
+      padding-right: 0;
+    }
+  }
+
+  &.ga-ds-container-stretch--left {
+    @include bp-up("lg") {
+      padding-left: 0;
+    }
+  }
+}
+
+@include bp-up("sm") {
+  .ga-ds-container--small {
+    &:not(.ga-ds-container-stretch--right) {
+      padding-right: calc((100% - #{map.get($ga-containers, "sm")}) / 2);
+    }
+    &:not(.ga-ds-container-stretch--left) {
+      padding-left: calc((100% - #{map.get($ga-containers, "sm")}) / 2);
+    }
+  }
+}
+
+@include bp-up("md") {
+  .ga-ds-container--medium {
+    &:not(.ga-ds-container-stretch--right) {
+      padding-right: calc((100% - #{map.get($ga-containers, "md")}) / 2);
+    }
+    &:not(.ga-ds-container-stretch--left) {
+      padding-left: calc((100% - #{map.get($ga-containers, "md")}) / 2);
+    }
+  }
+}
+
+@include bp-up("lg") {
+  .ga-ds-container--large {
+    &:not(.ga-ds-container-stretch--right) {
+      padding-right: calc((100% - #{map.get($ga-containers, "lg")}) / 2);
+    }
+    &:not(.ga-ds-container-stretch--left) {
+      padding-left: calc((100% - #{map.get($ga-containers, "lg")}) / 2);
+    }
+  }
+}

package/src/layout/Container/Container.tsx

@@ -1,10 +1,18 @@
-import type { JSX } from 'react/jsx-runtime'
-import type { ContainerProps } from './Container.types'
+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>
-}
+export const Container = (props: ContainerProps) => {
+  const { size, children, style, padding, margin, stretch } = props
+  const classes = [
+    "ga-ds-container",
+    `ga-ds-container--${size}`,
+    ...(padding ? [`ga-ds-util-padding--${padding}`] : []),
+    ...(margin ? [`ga-ds-util-margin--${margin}`] : []),
+    ...(stretch ? [`ga-ds-container-stretch--${stretch}`] : []),
+    ...(props.extraClassNames || []),
+  ]
+  return (
+    <div className={classes.join(" ")} style={style}>
+      {children}
+    </div>
+  )
+}