Add Tabs component

Author: garronej

package.json

@@ -68,6 +68,7 @@
         }
     },
     "dependencies": {
+        "moize": "^6.1.3",
         "tsafe": "^1.1.1"
     },
     "devDependencies": {

src/Alert.tsx

@@ -143,8 +143,8 @@ export const Alert = memo(
                     classes.root,
                     className
                 )}
-                ref={ref}
                 {...(refShouldSetRole.current && { "role": "alert" })}
+                ref={ref}
                 {...rest}
             >
                 <HtmlTitleTag className={cx(fr.cx("fr-alert__title"), classes.title)}>

src/Tabs.tsx

@@ -0,0 +1,156 @@
+import React, { memo, forwardRef, useId, useState, useEffect } from "react";
+import type { ReactNode } from "react";
+import type { FrIconClassName, RiIconClassName } from "./lib/generatedFromCss/classNames";
+import { symToStr } from "tsafe/symToStr";
+import { fr } from "./lib";
+import { cx } from "./lib/tools/cx";
+import { assert } from "tsafe/assert";
+import type { Equals } from "tsafe";
+import { useCallbackFactory } from "./lib/tools/powerhooks/useCallbackFactory";
+import "@gouvfr/dsfr/dist/component/tab/tab.css";
+
+export type TabsProps = TabsProps.Uncontrolled | TabsProps.Controlled;
+
+export namespace TabsProps {
+    export type Common = {
+        className?: string;
+        label?: string;
+        classes?: Partial<Record<"root" | "tab" | "panel", string>>;
+    };
+
+    export type Uncontrolled = Common & {
+        tabs: {
+            label: ReactNode;
+            iconId?: FrIconClassName | RiIconClassName;
+            content: ReactNode;
+        }[];
+        selectedTabId?: undefined;
+        onTabChange?: (params: { tabIndex: number; tab: Uncontrolled["tabs"][number] }) => void;
+        children?: undefined;
+    };
+
+    export type Controlled = Common & {
+        tabs: {
+            tabId: string;
+            label: ReactNode;
+            iconId?: FrIconClassName | RiIconClassName;
+        }[];
+        selectedTabId: string;
+        onTabChange: (tabId: string) => void;
+        children?: NonNullable<ReactNode>;
+    };
+}
+
+/** @see <https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/onglets> */
+export const Tabs = memo(
+    forwardRef<HTMLDivElement, TabsProps>((props, ref) => {
+        const {
+            className,
+            label,
+            classes = {},
+            tabs,
+            selectedTabId,
+            onTabChange,
+            children,
+            ...rest
+        } = props;
+
+        assert<Equals<keyof typeof rest, never>>();
+
+        const id = useId();
+
+        const getSelectedTabIndex = () => {
+            assert(selectedTabId !== undefined);
+            return tabs.findIndex(({ tabId }) => tabId === selectedTabId);
+        };
+
+        const [selectedTabIndex, setSelectedTabIndex] = useState<number>(
+            selectedTabId !== undefined ? getSelectedTabIndex : 0
+        );
+
+        useEffect(() => {
+            if (selectedTabId === undefined) {
+                return;
+            }
+
+            setSelectedTabIndex(getSelectedTabIndex());
+        }, [selectedTabId]);
+
+        const onTabClickFactory = useCallbackFactory(([tabIndex]: [number]) => {
+            if (selectedTabId === undefined) {
+                onTabChange?.({
+                    tabIndex,
+                    "tab": tabs[tabIndex]
+                });
+            } else {
+                onTabChange(tabs[tabIndex].tabId);
+            }
+        });
+
+        const getPanelId = (tabIndex: number) => `tabpanel-${id}-${tabIndex}-panel`;
+        const getTabId = (tabIndex: number) => `tabpanel-${id}-${tabIndex}`;
+
+        return (
+            <div className={cx(fr.cx("fr-tabs"), className)} ref={ref} {...rest}>
+                <ul className={fr.cx("fr-tabs__list")} role="tablist" aria-label={label}>
+                    {tabs.map(({ label, iconId }, tabIndex) => (
+                        <li key={label + (iconId ?? "")} role="presentation">
+                            <button
+                                id={getTabId(tabIndex)}
+                                className={cx(
+                                    fr.cx("fr-tabs__tab", iconId, "fr-tabs__tab--icon-left"),
+                                    classes.tab
+                                )}
+                                tabIndex={tabIndex === selectedTabIndex ? 0 : -1}
+                                role="tab"
+                                aria-selected={tabIndex === selectedTabIndex}
+                                aria-controls={getPanelId(tabIndex)}
+                                onClick={onTabClickFactory(tabIndex)}
+                            >
+                                {label}
+                            </button>
+                        </li>
+                    ))}
+                </ul>
+                {selectedTabId === undefined ? (
+                    tabs.map(({ content }, tabIndex) => (
+                        <div
+                            id={getPanelId(tabIndex)}
+                            className={cx(
+                                fr.cx(
+                                    "fr-tabs__panel",
+                                    `fr-tabs__panel${
+                                        tabIndex === selectedTabIndex ? "--selected" : ""
+                                    }`
+                                ),
+                                classes.panel
+                            )}
+                            role="tabpanel"
+                            aria-labelledby={getTabId(tabIndex)}
+                            tabIndex={0}
+                        >
+                            {content}
+                        </div>
+                    ))
+                ) : (
+                    <div
+                        id={getPanelId(selectedTabIndex)}
+                        className={cx(
+                            fr.cx("fr-tabs__panel", "fr-tabs__panel--selected"),
+                            classes.panel
+                        )}
+                        role="tabpanel"
+                        aria-labelledby={getTabId(selectedTabIndex)}
+                        tabIndex={0}
+                    >
+                        {children}
+                    </div>
+                )}
+            </div>
+        );
+    })
+);
+
+Tabs.displayName = symToStr({ Tabs });
+
+export default Tabs;

src/lib/tools/memoize.ts

@@ -0,0 +1,22 @@
+export function memoize<F extends (...args: (string | number | boolean)[]) => any>(
+    fn: F,
+    options: {
+        argsLength: number;
+    }
+): F {
+    const cache: Record<string, ReturnType<F>> = {};
+
+    const { argsLength } = options;
+
+    return ((...args: Parameters<F>) => {
+        const key = JSON.stringify(args.slice(0, argsLength).join("-sIs9sAslOdeWlEdIos3-"));
+
+        console.log(key, JSON.stringify({ argsLength, args }));
+
+        if (key in cache) {
+            return cache[key];
+        }
+
+        return (cache[key] = fn(...args));
+    }) as any;
+}

src/lib/tools/powerhooks/useCallbackFactory.ts

@@ -0,0 +1,49 @@
+import { useRef, useState } from "react";
+import { id } from "tsafe/id";
+import { memoize } from "../memoize";
+
+export type CallbackFactory<FactoryArgs extends unknown[], Args extends unknown[], R> = (
+    ...factoryArgs: FactoryArgs
+) => (...args: Args) => R;
+
+/**
+ * https://docs.powerhooks.dev/api-reference/usecallbackfactory
+ *
+ *  const callbackFactory= useCallbackFactory(
+ *      ([key]: [string], [params]: [{ foo: number; }]) => {
+ *          ...
+ *      },
+ *      []
+ *  );
+ *
+ * WARNING: Factory args should not be of variable length.
+ *
+ */
+export function useCallbackFactory<
+    FactoryArgs extends (string | number | boolean)[],
+    Args extends unknown[],
+    R = void
+>(callback: (...callbackArgs: [FactoryArgs, Args]) => R): CallbackFactory<FactoryArgs, Args, R> {
+    type Out = CallbackFactory<FactoryArgs, Args, R>;
+
+    const callbackRef = useRef<typeof callback>(callback);
+
+    callbackRef.current = callback;
+
+    const memoizedRef = useRef<Out | undefined>(undefined);
+
+    return useState(() =>
+        id<Out>((...factoryArgs) => {
+            if (memoizedRef.current === undefined) {
+                memoizedRef.current = memoize(
+                    ((...factoryArgs: FactoryArgs) =>
+                        (...args: Args) =>
+                            callbackRef.current(factoryArgs, args)) as any,
+                    { "argsLength": factoryArgs.length }
+                );
+            }
+
+            return (memoizedRef.current as any)(...factoryArgs);
+        })
+    )[0];
+}

test/integration/next/package.json

@@ -14,8 +14,11 @@
     "dependencies": {
         "next": "^13.0.1",
         "react": "18.2.0",
-         "react-dom": "18.2.0",
+        "react-dom": "18.2.0",
         "next-transpile-modules": "^10.0.0",
+        "@emotion/react": "^11.10.5",
+        "@emotion/server": "^11.10.0",
+        "tss-react": "^4.4.4",
         "@codegouvfr/react-dsfr": "file:../../../dist"
     },
     "devDependencies": {

test/integration/next/pages/_app.tsx

@@ -2,6 +2,7 @@ import type { AppProps } from "next/app";
 import { DsfrLangProvider } from "@codegouvfr/react-dsfr";
 import { createNextDsfrIntegrationApi } from "@codegouvfr/react-dsfr/next";
 import { Header } from "@codegouvfr/react-dsfr/Header";
+import { createEmotionSsrAdvancedApproach } from "tss-react/next";
 
 const {
     withDsfr,
@@ -23,7 +24,11 @@ const {
     "doPersistDarkModePreferenceWithCookie": true
 });
 
-export { dsfrDocumentApi };
+const { augmentDocumentWithEmotionCache, withAppEmotionCache} = createEmotionSsrAdvancedApproach({
+    "key": "css"
+});
+
+export { dsfrDocumentApi, augmentDocumentWithEmotionCache };
 
 function App({ Component, pageProps }: AppProps) {
     return (
@@ -55,4 +60,4 @@ function App({ Component, pageProps }: AppProps) {
     );
 }
 
-export default withDsfr(App);
+export default withAppEmotionCache(withDsfr(App));

test/integration/next/pages/_document.tsx

@@ -1,6 +1,6 @@
 import { Html, Head, Main, NextScript } from "next/document";
 import type { DocumentProps } from "next/document";
-import { dsfrDocumentApi } from "./_app";
+import { dsfrDocumentApi, augmentDocumentWithEmotionCache } from "./_app";
 
 const { augmentDocumentByReadingColorSchemeFromCookie, getColorSchemeHtmlAttributes } = dsfrDocumentApi;
 
@@ -17,3 +17,5 @@ export default function Document(props: DocumentProps) {
 }
 
 augmentDocumentByReadingColorSchemeFromCookie(Document);
+
+augmentDocumentWithEmotionCache(Document);

test/integration/next/pages/index.tsx

@@ -1,10 +1,14 @@
+import { useState } from "react";
 import { Alert } from "@codegouvfr/react-dsfr/Alert";
+import { Tabs } from "@codegouvfr/react-dsfr/Tabs";
 import { useIsDark, fr } from "@codegouvfr/react-dsfr";
 import { DarkModeSwitch } from "@codegouvfr/react-dsfr/DarkModeSwitch";
+import { useStyles } from "tss-react/dsfr";
 
 export default function App() {
     const { isDark, setIsDark } = useIsDark();
 
+
     return (
         <>
             <Alert
@@ -13,6 +17,7 @@ export default function App() {
                 title="Success: This is the title"
                 description="This is the description"
             />
+            <ControlledTabs />
 
             <button className={fr.cx("fr-btn", "fr-icon-checkbox-circle-line", "fr-btn--icon-left")}>
                 Label bouton MD
@@ -34,3 +39,28 @@ export default function App() {
         </>
     );
 }
+
+function ControlledTabs() {
+
+    const [selectedTabId, setSelectedTabId] = useState("tab1");
+
+    const { css } = useStyles();
+
+    return (
+        <Tabs
+            className={css({
+                "margin": fr.spacing("3v")
+            })}
+            selectedTabId={selectedTabId}
+            tabs={[
+                { "tabId": "tab1", "label": "Tab 1", "iconId": "fr-icon-add-line" },
+                { "tabId": "tab2", "label": "Tab 2", "iconId": "fr-icon-ball-pen-fill" },
+                { "tabId": "tab3", "label": "Tab 3" },
+            ]}
+            onTabChange={setSelectedTabId}
+        >
+            <p>Content of {selectedTabId}</p>
+        </Tabs>
+    );
+
+}