@growth-angels/ds-core 1.9.0 → 1.11.0

package/dist/hooks/useReactAdaptater.d.ts

@@ -1,10 +1,19 @@
 type ReactType = typeof import('react');
+type ExtendedReactType = ReactType & {
+    createRoot: (container: Element | DocumentFragment) => {
+        render: (element: React.ReactElement) => void;
+    };
+};
 declare global {
     interface Window {
         wp?: {
-            element?: ReactType;
+            element?: ExtendedReactType & {
+                createRoot: (container: Element | DocumentFragment) => {
+                    render: (element: React.ReactElement) => void;
+                };
+            };
         };
     }
 }
-export declare const useReactAdapter: () => ReactType;
+export declare const useReactAdapter: () => ExtendedReactType;
 export {};

package/dist/hooks/useReactAdaptater.js

@@ -1,4 +1,3 @@
-import React from 'react';
 export const useReactAdapter = () => {
     // Check if WordPress element is available (WordPress context)
     if (typeof window !== 'undefined' && window.wp?.element) {
@@ -6,5 +5,5 @@ export const useReactAdapter = () => {
     }
     // Fallback for non-WordPress environments (Storybook, tests, SSR)
     // This will bundle React only in non-WordPress builds
-    return React;
+    return import('react');
 };

package/dist/lib/hydrate-carousel.d.ts

@@ -0,0 +1 @@
+export declare function HydrateCarousel(islands: NodeListOf<Element> | null): void;

package/dist/lib/hydrate-carousel.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Carousel } from "../organisms/Carousel/Carousel";
+import { useReactAdapter } from "../hooks/useReactAdaptater";
+import { NativeChildWrapper } from "./utils/native-child-wrapper";
+const { createElement, createRoot, useRef, useEffect } = useReactAdapter();
+export function HydrateCarousel(islands) {
+    console.log("HydrateCarousel called with islands:", islands);
+    islands?.forEach((carousel) => {
+        const Component = Carousel;
+        if (!Component)
+            return;
+        const props = carousel.getAttribute("data-props");
+        carousel.removeAttribute("data-props");
+        const parsedProps = JSON.parse(props || "{}");
+        const children = Array.from(carousel.children).map((child) => {
+            return _jsx(NativeChildWrapper, { child: child }, child.id);
+        });
+        const root = createRoot(carousel);
+        root.render(createElement(Component, { ...parsedProps, children }));
+    });
+}

package/dist/lib/hydrate-spoiler.d.ts

@@ -0,0 +1 @@
+export declare function HydrateSpoiler(islands: NodeListOf<Element> | null): void;

package/dist/lib/hydrate-spoiler.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Spoiler } from "../molecules/molecules";
+import { SpoilerList } from "../organisms/organisms";
+import { useReactAdapter } from "../hooks/useReactAdaptater";
+const { createRoot } = useReactAdapter();
+export function HydrateSpoiler(islands) {
+    islands?.forEach((el) => {
+        const props = el.getAttribute("data-props");
+        el.removeAttribute("data-props");
+        const items = Array.from(el.querySelectorAll('div[data-wp-island="ga-ds-spoiler"]')).map((item) => {
+            const props = item.getAttribute("data-props");
+            return (_jsx(Spoiler, { ...(props ? JSON.parse(props) : {}), children: _jsx("div", { dangerouslySetInnerHTML: {
+                        __html: item.innerHTML,
+                    } }) }));
+        });
+        const root = createRoot(el);
+        root.render(_jsx(SpoilerList, { ...(props ? JSON.parse(props) : {}), children: items }));
+    });
+}

package/dist/lib/hydrate-tabs.d.ts

@@ -0,0 +1 @@
+export declare function HydrateTabs(els: NodeListOf<Element> | null): void;

package/dist/lib/hydrate-tabs.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tabs } from "@growth-angels/ds-core";
+import { NativeChildWrapper } from "./utils/native-child-wrapper";
+import { useReactAdapter } from "../hooks/useReactAdaptater";
+const { createRoot } = useReactAdapter();
+export function HydrateTabs(els) {
+    els?.forEach((el) => {
+        const props = el.getAttribute("data-props");
+        el.removeAttribute("data-props");
+        el.removeAttribute("data-wp-island");
+        const tabs = (props ? JSON.parse(props) : {}).tabs || [];
+        const extraClassNames = (props ? JSON.parse(props) : {}).extraClassNames || "";
+        // On récupère les panels réels, sans les écraser :
+        const panelEls = Array.from(el.querySelectorAll('div[data-wp-island="ga-ds-tab-panel"]'));
+        // On crée un tableau de wrappers React
+        const tabPanels = panelEls.map((panel) => {
+            const id = panel.getAttribute("id") || "";
+            // On crée un conteneur vide dans React
+            return _jsx(NativeChildWrapper, { id: id, child: panel }, id);
+        });
+        const root = createRoot(el);
+        root.render(_jsx(Tabs, { tabs: tabs, extraClassNames: extraClassNames, children: tabPanels }));
+    });
+}

package/dist/lib/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./hydrate-carousel";
+export * from "./hydrate-spoiler";
+export * from "./hydrate-tabs";

package/dist/lib/index.js

@@ -0,0 +1,3 @@
+export * from "./hydrate-carousel";
+export * from "./hydrate-spoiler";
+export * from "./hydrate-tabs";

package/dist/lib/utils/native-child-wrapper.d.ts

@@ -0,0 +1,4 @@
+export declare function NativeChildWrapper({ child, id }: {
+    child: Element;
+    id?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/lib/utils/native-child-wrapper.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useReactAdapter } from "../../hooks/useReactAdaptater";
+const { useRef, useEffect } = useReactAdapter();
+export function NativeChildWrapper({ child, id }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        if (ref.current) {
+            ref.current.appendChild(child); // on déplace l'élément natif
+        }
+    }, [child]);
+    return _jsx("div", { id: id, ref: ref });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@growth-angels/ds-core",
-  "version": "1.9.0",
+  "version": "1.11.0",
   "description": "Design system by Growth Angels",
   "license": "MIT",
   "private": false,
@@ -16,6 +16,10 @@
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
     },
+    "./lib": {
+      "import": "./dist/lib/index.js",
+      "types": "./dist/lib/index.d.ts"
+    },
     "./styles": "./src/styles.ts",
     "./styles/scss": "./src/index.scss",
     "./mixins": "./src/mixins.scss"
@@ -33,7 +37,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@growth-angels/foundation": "^1.3.4"
+    "@growth-angels/foundation": "^1.4.0"
   },
   "peerDependencies": {
     "react": ">=18"

package/src/hooks/useReactAdaptater.ts

@@ -1,17 +1,25 @@
-import React from 'react'
-
 // @ts-ignore - React types from window.wp.element
 type ReactType = typeof import('react')
 
+type ExtendedReactType = ReactType & {
+  createRoot: (container: Element | DocumentFragment) => {
+    render: (element: React.ReactElement) => void
+  }
+}
+
 declare global {
   interface Window {
     wp?: {
-      element?: ReactType
+      element?: ExtendedReactType & {
+        createRoot: (container: Element | DocumentFragment) => {
+          render: (element: React.ReactElement) => void
+        }
+      }
     }
   }
 }
 
-export const useReactAdapter = (): ReactType => {
+export const useReactAdapter = (): ExtendedReactType => {
   // Check if WordPress element is available (WordPress context)
   if (typeof window !== 'undefined' && window.wp?.element) {
     return window.wp.element
@@ -19,6 +27,6 @@ export const useReactAdapter = (): ReactType => {
   
   // Fallback for non-WordPress environments (Storybook, tests, SSR)
   // This will bundle React only in non-WordPress builds
-  return React
+  return import('react') as unknown as ExtendedReactType
 }
 

package/src/layout/Container/Container.scss

@@ -13,13 +13,13 @@
   }
 
   &.ga-ds-container-stretch--right {
-    @include bp-up("lg") {
+    @include bp-up("lg", $ga-breakpoints) {
       padding-right: 0;
     }
   }
 
   &.ga-ds-container-stretch--left {
-    @include bp-up("lg") {
+    @include bp-up("lg", $ga-breakpoints) {
       padding-left: 0;
     }
   }
@@ -29,7 +29,7 @@
   }
 }
 
-@include bp-up("sm") {
+@include bp-up("sm", $ga-breakpoints) {
   .ga-ds-container--small {
     &:not(.ga-ds-container-stretch--right) {
       padding-right: calc((100% - #{map.get($ga-containers, "sm")}) / 2);
@@ -40,7 +40,7 @@
   }
 }
 
-@include bp-up("md") {
+@include bp-up("md", $ga-breakpoints) {
   .ga-ds-container--medium {
     &:not(.ga-ds-container-stretch--right) {
       padding-right: calc((100% - #{map.get($ga-containers, "md")}) / 2);
@@ -51,7 +51,7 @@
   }
 }
 
-@include bp-up("lg") {
+@include bp-up("lg", $ga-breakpoints) {
   .ga-ds-container--large {
     &:not(.ga-ds-container-stretch--right) {
       padding-right: calc((100% - #{map.get($ga-containers, "lg")}) / 2);

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

@@ -1,3 +1,4 @@
+@use "@growth-angels/foundation/variables" as *;
 @use "@growth-angels/foundation/utils" as *;
 @use "@growth-angels/foundation/grid-system" as *;
 @use "sass:map";
@@ -9,15 +10,15 @@
   padding-right: calc(map.get($ga-grid, "gutter-width") / 2);
   margin-bottom: map.get($ga-grid, "gutter-width");
 
-  @include bp-up(sm) {
+  @include bp-up(sm, $ga-breakpoints) {
     --flex-size: var(--ga-ds-grid-item-size-sm);
   }
 
-  @include bp-up(md) {
+  @include bp-up(md, $ga-breakpoints) {
     --flex-size: var(--ga-ds-grid-item-size-md);
   }
 
-  @include bp-up(lg) {
+  @include bp-up(lg, $ga-breakpoints) {
     --flex-size: var(--ga-ds-grid-item-size-lg);
   }
 

package/src/lib/hydrate-carousel.tsx

@@ -0,0 +1,24 @@
+import { Carousel } from "../organisms/Carousel/Carousel"
+import { useReactAdapter } from "../hooks/useReactAdaptater"
+import { NativeChildWrapper } from "./utils/native-child-wrapper"
+const { createElement, createRoot, useRef, useEffect } = useReactAdapter()
+
+export function HydrateCarousel(islands: NodeListOf<Element> | null) {
+  console.log("HydrateCarousel called with islands:", islands)
+  islands?.forEach((carousel) => {
+    const Component = Carousel
+    if (!Component) return
+    const props = carousel.getAttribute("data-props")
+    carousel.removeAttribute("data-props")
+
+    const parsedProps = JSON.parse(props || "{}")
+
+    const children = Array.from(carousel.children).map((child) => {
+      return <NativeChildWrapper key={child.id} child={child} />
+    })
+
+    const root = createRoot(carousel)
+
+    root.render(createElement(Component, { ...parsedProps, children }))
+  })
+}

package/src/lib/hydrate-spoiler.tsx

@@ -0,0 +1,25 @@
+import { Spoiler } from "../molecules/molecules"
+import { SpoilerList } from "../organisms/organisms"
+import { useReactAdapter } from "../hooks/useReactAdaptater"
+const { createRoot } = useReactAdapter()
+
+export function HydrateSpoiler(islands: NodeListOf<Element> | null) {
+  islands?.forEach((el) => {
+    const props = el.getAttribute("data-props")
+    el.removeAttribute("data-props")
+    const items = Array.from(el.querySelectorAll('div[data-wp-island="ga-ds-spoiler"]')).map((item) => {
+      const props = item.getAttribute("data-props")
+      return (
+        <Spoiler {...(props ? JSON.parse(props) : {})}>
+          <div
+            dangerouslySetInnerHTML={{
+              __html: item.innerHTML,
+            }}
+          ></div>
+        </Spoiler>
+      )
+    })
+    const root = createRoot(el)
+    root.render(<SpoilerList {...(props ? JSON.parse(props) : {})}>{items}</SpoilerList>)
+  })
+}

package/src/lib/hydrate-tabs.tsx

@@ -0,0 +1,32 @@
+import { Tabs } from "@growth-angels/ds-core"
+import { NativeChildWrapper } from "./utils/native-child-wrapper"
+import { useReactAdapter } from "../hooks/useReactAdaptater"
+const { createRoot } = useReactAdapter()
+
+export function HydrateTabs(els: NodeListOf<Element> | null) {
+  els?.forEach((el) => {
+    const props = el.getAttribute("data-props")
+    el.removeAttribute("data-props")
+    el.removeAttribute("data-wp-island")
+    const tabs = (props ? JSON.parse(props) : {}).tabs || []
+    const extraClassNames = (props ? JSON.parse(props) : {}).extraClassNames || ""
+
+    // On récupère les panels réels, sans les écraser :
+    const panelEls = Array.from(el.querySelectorAll('div[data-wp-island="ga-ds-tab-panel"]'))
+
+    // On crée un tableau de wrappers React
+    const tabPanels = panelEls.map((panel) => {
+      const id = panel.getAttribute("id") || ""
+
+      // On crée un conteneur vide dans React
+      return <NativeChildWrapper key={id} id={id} child={panel} />
+    })
+
+    const root = createRoot(el)
+    root.render(
+      <Tabs tabs={tabs} extraClassNames={extraClassNames}>
+        {tabPanels}
+      </Tabs>
+    )
+  })
+}

package/src/lib/index.ts

@@ -0,0 +1,3 @@
+export * from "./hydrate-carousel"
+export * from "./hydrate-spoiler"
+export * from "./hydrate-tabs"

package/src/lib/utils/native-child-wrapper.tsx

@@ -0,0 +1,14 @@
+import { useReactAdapter } from "../../hooks/useReactAdaptater"
+const { useRef, useEffect } = useReactAdapter()
+
+export function NativeChildWrapper({ child, id }: { child: Element; id?: string }) {
+  const ref = useRef<HTMLDivElement | null>(null)
+
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.appendChild(child) // on déplace l'élément natif
+    }
+  }, [child])
+
+  return <div id={id} ref={ref} />
+}

package/src/organisms/Carousel/Carousel.scss

@@ -1,3 +1,4 @@
+@use "@growth-angels/foundation/variables" as *;
 @use "@growth-angels/foundation/utils" as *;
 
 .ga-ds-carousel {
@@ -27,16 +28,16 @@
       display: none;
     }
 
-    @include bp-up(xs) {
+    @include bp-up(xs, $ga-breakpoints) {
       --ga-ds-slides-per-view: var(--ga-ds-slides-per-view-sm);
     }
-    @include bp-up(sm) {
+    @include bp-up(sm, $ga-breakpoints) {
       --ga-ds-slides-per-view: var(--ga-ds-slides-per-view-md);
     }
-    @include bp-up(md) {
+    @include bp-up(md, $ga-breakpoints) {
       --ga-ds-slides-per-view: var(--ga-ds-slides-per-view-lg);
     }
-    @include bp-up(lg) {
+    @include bp-up(lg, $ga-breakpoints) {
       --ga-ds-slides-per-view: var(--ga-ds-slides-per-view-xl);
     }
   }