@growth-angels/ds-core 1.2.1 → 1.3.0

package/dist/organisms/Tabs/Tabs.d.ts

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

package/dist/organisms/Tabs/Tabs.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useReactAdapter } from "../../hooks/useReactAdaptater";
+export const Tabs = ({ tabs, children, extraClassNames, edit }) => {
+    const { useEffect, useState, useRef, Children, Fragment } = useReactAdapter();
+    console.log(edit);
+    const [activeTab, setActiveTab] = useState(tabs[0]?.id || "");
+    const tabsRef = useRef([]);
+    useEffect(() => {
+        const activeIndex = tabs.findIndex((tab) => tab.id === activeTab);
+        tabsRef.current[activeIndex]?.focus();
+    }, [activeTab, tabs]);
+    const classes = ["ga-ds-tabs"];
+    if (extraClassNames) {
+        classes.push(...extraClassNames);
+    }
+    return (_jsxs("div", { className: classes.join(" "), children: [_jsx("div", { className: "ga-ds-tabs__list", role: "tablist", children: tabs.map((tab, index) => (_jsx("button", { ref: (el) => (tabsRef.current[index] = el), role: "tab", "aria-selected": activeTab === tab.id, "aria-controls": `ga-ds-tabpanel-${tab.id}`, id: `ga-ds-tab-${tab.id}`, tabIndex: activeTab === tab.id ? 0 : -1, className: `ga-ds-tabs__tab ${activeTab === tab.id ? "ga-ds-tabs__tab--active" : ""}`, onClick: () => setActiveTab(tab.id), children: tab.label }, tab.id))) }), _jsx("div", { className: "ga-ds-tabs__panels", children: !edit
+                    ? Children.toArray(children).map((child) => (_jsx("div", { className: ["ga-ds-tabs__panel", activeTab === child.props.id ? "ga-ds-tabs__panel--active" : ""].join(" "), children: _jsx("div", { role: "tabpanel", id: `ga-ds-tabpanel-${child.props.id}`, "aria-labelledby": `ga-ds-tab-${child.props.id}`, children: child }) }, child.props.id)))
+                    : children })] }));
+};

package/dist/organisms/Tabs/Tabs.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Tabs } from "./Tabs";
+declare const meta: Meta<typeof Tabs>;
+export default meta;
+type Story = StoryObj<typeof Tabs>;
+export declare const Primary: Story;

package/dist/organisms/Tabs/Tabs.stories.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tabs } from "./Tabs";
+const meta = {
+    title: "Organisms/Tabs",
+    component: Tabs,
+    tags: ["autodocs"],
+};
+export default meta;
+const ids = Array.from({ length: 3 }, () => crypto.randomUUID());
+export const Primary = {
+    args: {
+        tabs: [
+            { id: ids[0], label: "Tab 1" },
+            { id: ids[1], label: "Tab 2" },
+            { id: ids[2], label: "Tab 3" },
+        ],
+        children: [
+            _jsx("div", { id: ids[0], children: "Content for Tab 1" }),
+            _jsx("div", { id: ids[1], children: "Content for Tab 2" }),
+            _jsx("div", { id: ids[2], children: "Content for Tab 3" }),
+        ],
+    },
+};

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

@@ -0,0 +1,9 @@
+import { WordpressDefault } from "src/global.types";
+export interface TabsProps extends WordpressDefault {
+    tabs: Array<{
+        id: string;
+        label: string;
+    }>;
+    edit?: boolean;
+    children: React.ReactNode;
+}

package/dist/organisms/Tabs/Tabs.types.js

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

package/dist/organisms/organisms.d.ts

@@ -2,3 +2,5 @@ export * from './Card/Card';
 export * from './Card/Card.types';
 export * from './Carousel/Carousel';
 export * from './SpoilerList/SpoilerList';
+export * from './Tabs/Tabs';
+export * from './Tabs/Tabs.types';

package/dist/organisms/organisms.js

@@ -2,3 +2,5 @@ export * from './Card/Card';
 export * from './Card/Card.types';
 export * from './Carousel/Carousel';
 export * from './SpoilerList/SpoilerList';
+export * from './Tabs/Tabs';
+export * from './Tabs/Tabs.types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@growth-angels/ds-core",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "Design system by Growth Angels",
   "license": "MIT",
   "private": false,

package/src/organisms/Tabs/Tabs.scss

@@ -0,0 +1,28 @@
+.ga-ds-tabs {
+  outline: 1px solid red;
+  $this: &;
+  &__list {
+    display: flex;
+
+    #{$this}__tab {
+      background: none;
+      border: none;
+      font-size: inherit;
+      padding: inherit;
+    }
+  }
+
+  &__panel {
+    height: 0;
+    visibility: hidden;
+    overflow: hidden;
+    clip-path: inset(100% 0 0 0);
+
+    &--active {
+      height: auto;
+      visibility: visible;
+      overflow: visible;
+      clip-path: none;
+    }
+  }
+}

package/src/organisms/Tabs/Tabs.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { Tabs } from "./Tabs"
+
+const meta: Meta<typeof Tabs> = {
+  title: "Organisms/Tabs",
+  component: Tabs,
+  tags: ["autodocs"],
+}
+export default meta
+type Story = StoryObj<typeof Tabs>
+
+const ids = Array.from({ length: 3 }, () => crypto.randomUUID())
+export const Primary: Story = {
+  args: {
+    tabs: [
+      { id: ids[0], label: "Tab 1" },
+      { id: ids[1], label: "Tab 2" },
+      { id: ids[2], label: "Tab 3" },
+    ],
+    children: [
+      <div id={ids[0]}>Content for Tab 1</div>,
+      <div id={ids[1]}>Content for Tab 2</div>,
+      <div id={ids[2]}>Content for Tab 3</div>,
+    ],
+  },
+}

package/src/organisms/Tabs/Tabs.tsx

@@ -0,0 +1,53 @@
+import { useReactAdapter } from "../../hooks/useReactAdaptater"
+import { TabsProps } from "./Tabs.types"
+export const Tabs = ({ tabs, children, extraClassNames, edit }: TabsProps) => {
+  const { useEffect, useState, useRef, Children, Fragment } = useReactAdapter()
+  console.log(edit)
+  const [activeTab, setActiveTab] = useState(tabs[0]?.id || "")
+  const tabsRef = useRef<Array<HTMLButtonElement | null>>([])
+
+  useEffect(() => {
+    const activeIndex = tabs.findIndex((tab) => tab.id === activeTab)
+    tabsRef.current[activeIndex]?.focus()
+  }, [activeTab, tabs])
+
+  const classes = ["ga-ds-tabs"]
+  if (extraClassNames) {
+    classes.push(...extraClassNames)
+  }
+  return (
+    <div className={classes.join(" ")}>
+      <div className="ga-ds-tabs__list" role="tablist">
+        {tabs.map((tab, index) => (
+          <button
+            key={tab.id}
+            ref={(el) => (tabsRef.current[index] = el)}
+            role="tab"
+            aria-selected={activeTab === tab.id}
+            aria-controls={`ga-ds-tabpanel-${tab.id}`}
+            id={`ga-ds-tab-${tab.id}`}
+            tabIndex={activeTab === tab.id ? 0 : -1}
+            className={`ga-ds-tabs__tab ${activeTab === tab.id ? "ga-ds-tabs__tab--active" : ""}`}
+            onClick={() => setActiveTab(tab.id)}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+      <div className="ga-ds-tabs__panels">
+        {!edit
+          ? Children.toArray(children).map((child: any) => (
+              <div
+                key={child.props.id}
+                className={["ga-ds-tabs__panel", activeTab === child.props.id ? "ga-ds-tabs__panel--active" : ""].join(" ")}
+              >
+                <div role="tabpanel" id={`ga-ds-tabpanel-${child.props.id}`} aria-labelledby={`ga-ds-tab-${child.props.id}`}>
+                  {child}
+                </div>
+              </div>
+            ))
+          : children}
+      </div>
+    </div>
+  )
+}

package/src/organisms/Tabs/Tabs.types.ts

@@ -0,0 +1,10 @@
+import { WordpressDefault } from "src/global.types"
+
+export interface TabsProps extends WordpressDefault {
+  tabs: Array<{
+    id: string
+    label: string
+  }>
+  edit?: boolean
+  children: React.ReactNode
+}

package/src/organisms/organisms.scss

@@ -1,3 +1,4 @@
 @use "./Card/Card.scss";
 @use "./Carousel/Carousel.scss";
 @use "./SpoilerList/SpoilerList.scss";
+@use "./Tabs/Tabs.scss";

package/src/organisms/organisms.ts

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