@axa-fr/design-system-slash-react 0.2.0-beta.338 → 0.2.0-beta.347

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-slash-react",
-  "version": "0.2.0-beta.338",
+  "version": "0.2.0-beta.347",
   "description": "",
   "exports": {
     ".": {
@@ -17,7 +17,7 @@
   ],
   "scripts": {
     "prebuild": "rimraf dist",
-    "build": "tsc",
+    "build": "tsc -p tsconfig.build.json",
     "postbuild": "copyfiles --up 1 \"src/assets/svg/*.svg\" ./dist/",
     "start:storybook": "storybook dev -p 6007",
     "build:storybook": "storybook build",
@@ -41,7 +41,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-slash-css": "0.2.0-beta.338",
+    "@axa-fr/design-system-slash-css": "0.2.0-beta.347",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },
@@ -61,17 +61,16 @@
   },
   "devDependencies": {
     "@material-symbols/svg-400": "*",
-    "@storybook/addon-docs": "^7.6.14",
-    "@storybook/addon-essentials": "^7.6.14",
-    "@storybook/addon-interactions": "^7.6.14",
-    "@storybook/addon-links": "^7.6.14",
-    "@storybook/addon-mdx-gfm": "^7.6.14",
-    "@storybook/addon-onboarding": "^1.0.10",
-    "@storybook/addons": "^7.6.14",
-    "@storybook/blocks": "^7.6.14",
-    "@storybook/react": "^7.6.14",
-    "@storybook/react-vite": "^7.6.14",
-    "@storybook/test": "^7.6.14",
+    "@storybook/addon-essentials": "^8.3.5",
+    "@storybook/addon-interactions": "^8.3.5",
+    "@storybook/addon-links": "^8.3.5",
+    "@storybook/addon-onboarding": "^8.3.5",
+    "@storybook/blocks": "^8.3.5",
+    "@storybook/manager-api": "^8.3.5",
+    "@storybook/react": "^8.3.5",
+    "@storybook/react-vite": "^8.3.5",
+    "@storybook/test": "^8.3.5",
+    "@storybook/theming": "^8.3.5",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.0",
@@ -96,6 +95,7 @@
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.36.1",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-storybook": "^0.9.0",
     "jest-axe": "^8.0.0",
     "jsdom": "^24.0.0",
     "prettier": "^3.3.3",
@@ -103,7 +103,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.2.0",
     "rimraf": "^6.0.1",
-    "storybook": "^7.6.14",
+    "storybook": "^8.3.5",
     "tsc-files": "^1.1.4",
     "typescript": "^5.4.4",
     "vitest": "^2.0.5"

package/dist/Action/Action.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { Action } from "./Action";
-declare const meta: Meta<typeof Action>;
-export default meta;
-export declare const Default: StoryObj<typeof Action>;
-export declare const Button: StoryObj<typeof Action>;

package/dist/Action/Action.stories.js

@@ -1,30 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Action } from "./Action";
-const meta = {
-    title: "Components/Action",
-    component: Action,
-};
-export default meta;
-export const Default = {
-    name: "Action Link",
-    render: ({ ...args }) => _jsx(Action, { ...args }),
-    args: {
-        href: "http://www.axa.fr",
-        icon: "link",
-        title: "Lien de test",
-        target: "_blank",
-        id: "id",
-    },
-};
-export const Button = {
-    name: "Action Button",
-    render: ({ onClick, ...args }) => _jsx(Action, { onClick: onClick, ...args }),
-    args: {
-        icon: "floppy-disk",
-        title: "Enregistrer",
-        id: "id",
-    },
-    argTypes: {
-        onClick: { action: "clicked" },
-    },
-};

package/dist/Alert/Alert.stories.d.ts

@@ -1,9 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { Alert } from "./Alert";
-declare const meta: Meta<typeof Alert>;
-export default meta;
-export declare const Default: StoryObj<typeof Alert>;
-export declare const DangerAlert: StoryObj<typeof Alert>;
-export declare const InfoAlert: StoryObj<typeof Alert>;
-export declare const SuccessAlert: StoryObj<typeof Alert>;
-export declare const ErrorAlert: StoryObj<typeof Alert>;

package/dist/Alert/Alert.stories.js

@@ -1,54 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Alert } from "./Alert";
-const MODIFIERS = ["success", "info", "danger", "error"];
-const meta = {
-    title: "Components/Alert",
-    component: Alert,
-};
-export default meta;
-export const Default = {
-    name: "Default",
-    args: {
-        classModifier: "danger",
-        title: "Attention: Ceci est une alerte",
-    },
-    argTypes: {
-        classModifier: {
-            options: MODIFIERS,
-            control: { type: "select" },
-        },
-    },
-};
-export const DangerAlert = {
-    name: "Danger Alert",
-    args: {
-        classModifier: "danger",
-        title: "Attention: des informations sont manquantes",
-        iconClassName: "glyphicon glyphicon-alert",
-    },
-};
-export const InfoAlert = {
-    name: "Info Alert",
-    args: {
-        classModifier: "info",
-        title: "Attention: des informations sont manquantes",
-        iconClassName: "glyphicon glyphicon-info-sign",
-    },
-};
-export const SuccessAlert = {
-    name: "Success Alert",
-    args: {
-        classModifier: "success",
-        title: "Succès: votre demande a bien été enregistrée.",
-        iconClassName: "glyphicon glyphicon-ok",
-    },
-};
-export const ErrorAlert = {
-    name: "Error Alert",
-    args: {
-        classModifier: "error",
-        title: "Erreur dans les champs suivants :",
-        iconClassName: "glyphicon glyphicon-minus-sign",
-        children: (_jsxs("ul", { children: [_jsx("li", { children: "Le nom est obligatoire" }), _jsx("li", { children: "Le pr\u00E9nom est obligatoire" }), _jsx("li", { children: "L'email est obligatoire" }), _jsx("li", { children: "Le format de date est invalide" })] })),
-    },
-};

package/dist/Badge/Badge.stories.d.ts

@@ -1,7 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { Badge } from "./Badge";
-declare const meta: Meta<typeof Badge>;
-export default meta;
-export declare const Default: StoryObj<typeof Badge>;
-export declare const BadgeIconStory: StoryObj<typeof Badge>;
-export declare const MultiExamples: StoryObj<typeof Badge>;

package/dist/Badge/Badge.stories.js

@@ -1,69 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Badge } from "./Badge";
-const meta = {
-    title: "Components/Badge",
-    component: Badge,
-    parameters: {
-        layout: "centered",
-    },
-};
-export default meta;
-export const Default = {
-    name: "Badge",
-    args: {
-        children: "Lorem ipsum",
-        classModifier: "success",
-        disabled: false,
-    },
-    argTypes: {
-        classModifier: {
-            options: ["success", "info", "danger", "error"],
-            control: { type: "select" },
-            defaultValue: "succes",
-        },
-    },
-};
-export const BadgeIconStory = {
-    name: "Badge With Icon",
-    args: {
-        children: _jsx("i", { className: "glyphicon glyphicon-bell" }),
-        classModifier: "error",
-        disabled: false,
-    },
-    argTypes: {
-        classModifier: {
-            options: ["success", "info", "danger", "error"],
-            control: { type: "select" },
-            defaultValue: "error",
-        },
-    },
-};
-export const MultiExamples = {
-    name: "Badge with modifiers",
-    render: (args) => {
-        return (_jsxs("div", { style: {
-                display: "flex",
-                justifyContent: "space-evenly",
-                flexDirection: "column",
-                alignItems: "center",
-                flexWrap: "wrap",
-            }, children: [_jsxs("div", { style: {
-                        display: "flex",
-                        justifyContent: "space-evenly",
-                        alignItems: "center",
-                        padding: "2rem",
-                        flexWrap: "wrap",
-                        gap: "2rem",
-                    }, children: [_jsx(Badge, { disabled: args.disabled, classModifier: "success", children: "Badge Success" }), _jsx(Badge, { disabled: args.disabled, classModifier: "danger", children: "Badge Danger" }), _jsx(Badge, { disabled: args.disabled, classModifier: "info", children: "Badge Info" }), _jsx(Badge, { disabled: args.disabled, classModifier: "error", children: "Badge Error" })] }), _jsxs("div", { style: {
-                        display: "flex",
-                        justifyContent: "space-evenly",
-                        alignItems: "center",
-                        padding: "2rem",
-                        flexWrap: "wrap",
-                        gap: "5rem",
-                    }, children: [_jsx(Badge, { disabled: args.disabled, classModifier: "success", children: _jsx("i", { className: "glyphicon glyphicon-bell" }) }), _jsx(Badge, { disabled: args.disabled, classModifier: "danger", children: _jsx("i", { className: "glyphicon glyphicon-bell" }) }), _jsx(Badge, { disabled: args.disabled, classModifier: "info", children: _jsx("i", { className: "glyphicon glyphicon-bell" }) }), _jsx(Badge, { disabled: args.disabled, classModifier: "error", children: _jsx("i", { className: "glyphicon glyphicon-bell" }) })] })] }));
-    },
-    args: {
-        disabled: false,
-    },
-};

package/dist/Button/Button.stories.d.ts

@@ -1,18 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Button } from "./Button";
-declare const meta: Meta<typeof Button>;
-export default meta;
-type StoryProps = Omit<React.ComponentProps<typeof Button>, "classModifier" | "children"> & {
-    children: string;
-    classModifier: string[];
-};
-type Story = StoryObj<StoryProps>;
-export declare const Playground: Story;
-export declare const MultiExamples: StoryObj<typeof Button>;
-export declare const Reverse: StoryObj<typeof Button>;
-export declare const Success: StoryObj<typeof Button>;
-export declare const Danger: StoryObj<typeof Button>;
-export declare const WithIconRight: StoryObj<typeof Button>;
-export declare const WithIconLeft: StoryObj<typeof Button>;
-export declare const Small: StoryObj<typeof Button>;
-export declare const Circle: StoryObj<typeof Button>;

package/dist/Button/Button.stories.js

@@ -1,97 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button } from "./Button";
-const MODIFIERS = [
-    "success",
-    "info",
-    "danger",
-    "reverse",
-    "disabled",
-    "small",
-    "hasiconLeft",
-    "hasiconRight",
-];
-const meta = {
-    component: Button,
-    title: "Components/Button",
-    parameters: {
-        layout: "centered",
-    },
-    argTypes: { onClick: { action: "clicked" } },
-};
-export default meta;
-export const Playground = {
-    name: "Button",
-    render: ({ children: text, classModifier, onClick, ...args }) => (_jsx(Button, { classModifier: classModifier.join(" "), onClick: onClick, ...args, children: text })),
-    args: {
-        children: "Button",
-        classModifier: [],
-    },
-    argTypes: {
-        classModifier: {
-            options: MODIFIERS,
-            control: { type: "multi-select" },
-        },
-    },
-};
-export const MultiExamples = {
-    name: "Button with modifiers",
-    render: () => {
-        return (_jsxs("div", { style: {
-                display: "flex",
-                justifyContent: "space-evenly",
-                padding: "2rem",
-                flexWrap: "wrap",
-                gap: "2rem",
-            }, children: [_jsx(Button, { classModifier: "reverse", children: "Button Reverse" }), _jsx(Button, { classModifier: "success", children: "Button Success" }), _jsx(Button, { classModifier: "danger", children: "Button Danger" }), _jsx(Button, { classModifier: "small", children: "Button Small" }), _jsx(Button, { classModifier: "disabled", children: "Button disabled" })] }));
-    },
-};
-export const Reverse = {
-    name: "Button reverse",
-    args: {
-        children: "Button Reverse",
-        classModifier: "reverse",
-    },
-};
-export const Success = {
-    name: "Button success",
-    args: {
-        children: "Button success",
-        classModifier: "success",
-    },
-};
-export const Danger = {
-    name: "Button danger",
-    args: {
-        children: "Button Danger",
-        classModifier: "danger",
-    },
-};
-export const WithIconRight = {
-    name: "Button with right icon",
-    args: {
-        children: (_jsxs(_Fragment, { children: [_jsx("span", { className: "glyphicon glyphicon-arrow-right" }), _jsx("span", { className: "af-btn__text", children: "With icon" })] })),
-        classModifier: "hasiconRight",
-    },
-};
-export const WithIconLeft = {
-    name: "Button with left icon",
-    args: {
-        children: (_jsxs(_Fragment, { children: [_jsx("span", { className: "glyphicon glyphicon-arrow-left" }), _jsx("span", { className: "af-btn__text", children: "With icon" })] })),
-        classModifier: "hasiconLeft",
-    },
-};
-export const Small = {
-    name: "Button small",
-    args: {
-        children: "Button Small",
-        classModifier: "small",
-    },
-};
-export const Circle = {
-    name: "Button circle",
-    args: {
-        classModifier: "circle",
-        title: "Save",
-        children: _jsx("span", { className: "glyphicon glyphicon-floppy-disk" }),
-    },
-};

package/dist/Form/Checkbox/Checkbox.stories.d.ts

@@ -1,18 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { ComponentPropsWithoutRef } from "react";
-import { Checkbox } from "./Checkbox";
-import { CheckboxInput } from "./CheckboxInput";
-import { CheckboxItem } from "./CheckboxItem";
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj<Omit<ComponentPropsWithoutRef<typeof CheckboxInput>, "classModifier"> & {
-    classModifier: string[];
-}>;
-export declare const CheckboxInputStory: Story;
-export declare const CheckboxItemToggleStory: StoryObj<{
-    isChecked: boolean;
-    disabled: boolean;
-    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-}>;
-export declare const CheckboxItemStory: StoryObj<typeof CheckboxItem>;
-export declare const CheckboxStory: StoryObj<typeof Checkbox>;

package/dist/Form/Checkbox/Checkbox.stories.js

@@ -1,108 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { MessageTypes } from "../core";
-import { Checkbox } from "./Checkbox";
-import { CheckboxInput } from "./CheckboxInput";
-import { CheckboxItem } from "./CheckboxItem";
-import { CheckboxModes } from "./CheckboxModes";
-const meta = {
-    title: "Components/Form/Input/Checkbox",
-    component: CheckboxInput,
-    argTypes: {
-        onChange: { action: "onChange" },
-        messageType: {
-            control: { type: "select", options: Object.values(MessageTypes) },
-        },
-        mode: {
-            control: { type: "select", options: Object.values(CheckboxModes) },
-        },
-    },
-};
-export default meta;
-const modifiers = ["required", "disabled"];
-const Badge = ({ children, classModifier, }) => (_jsx("strong", { style: { color: "green" }, className: classModifier ?? "", children: children }));
-const options = [
-    { label: "Disabled", value: "1", disabled: true, id: "uniqueId1" },
-    { label: "Unchecked", value: "2", id: "uniqueId2" },
-    { label: "Checked", value: "3" },
-    {
-        label: _jsx(Badge, { classModifier: "success", children: "A JSX element" }),
-        value: "4",
-    },
-];
-const values = ["1", "3"];
-export const CheckboxInputStory = {
-    name: "CheckboxInput",
-    render: ({ classModifier, ...args }) => (_jsx("form", { className: "af-form", name: "myform", children: _jsx(CheckboxInput, { ...args, values: values, options: options, classModifier: (classModifier ?? []).join(" "), isVisible: true, classNameContainerLabel: "col-md-2", classNameContainerInput: "col-md-10" }) })),
-    args: {
-        label: "Place type",
-        classModifier: ["required"],
-        mode: CheckboxModes.classic,
-        message: "Error message",
-        messageType: MessageTypes.error,
-        forceDisplayMessage: false,
-        id: "inputuniqueid",
-        name: "placeType",
-    },
-    argTypes: {
-        classModifier: {
-            options: modifiers,
-            control: { type: "inline-check" },
-        },
-        onChange: { action: "onChange" },
-    },
-    parameters: {
-        controls: {
-            include: [
-                "label",
-                "classModifier",
-                "mode",
-                "message",
-                "messageType",
-                "forceDisplayMessage",
-                "onChange",
-            ],
-        },
-    },
-};
-export const CheckboxItemToggleStory = {
-    name: "CheckboxItem Toggle",
-    render: (args) => (_jsx(CheckboxItem, { ...args, name: "placeType", id: "uniqueid", value: "toto", className: "af-form__checkbox-toggle" })),
-    args: {
-        isChecked: true,
-        disabled: false,
-    },
-    argTypes: {
-        onChange: { action: "onChange" },
-    },
-    parameters: {
-        controls: {
-            include: ["isChecked", "disabled", "onChange"],
-        },
-    },
-};
-export const CheckboxItemStory = {
-    name: "CheckboxItem",
-    render: ({ isChecked, ...args }) => (_jsx(CheckboxItem, { ...args, name: "placeType", id: "uniqueid", value: "toto", defaultChecked: isChecked })),
-    args: {
-        label: "web center forever",
-        isChecked: true,
-        disabled: false,
-    },
-    parameters: {
-        controls: {
-            include: ["isChecked", "disabled", "label", "onChange"],
-        },
-    },
-};
-export const CheckboxStory = {
-    name: "Checkbox",
-    render: (args) => (_jsx(Checkbox, { ...args, options: options, values: values, name: "placeName", id: "uniqueid", placeholder: "Paris" })),
-    args: {
-        mode: CheckboxModes.default,
-    },
-    parameters: {
-        controls: {
-            include: ["mode"],
-        },
-    },
-};

package/dist/Form/Choice/Choice.stories.d.ts

@@ -1,9 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { ComponentPropsWithRef } from "react";
-import { Choice } from "./Choice";
-declare const meta: Meta<typeof Choice>;
-export default meta;
-type ChoiceProps = Omit<ComponentPropsWithRef<typeof Choice>, "classModifier"> & {
-    classModifier?: string[];
-};
-export declare const ChoiceStory: StoryObj<ChoiceProps>;

package/dist/Form/Choice/Choice.stories.js

@@ -1,27 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Choice } from "./Choice";
-const meta = {
-    component: Choice,
-    title: "Components/Form/Input/Choice",
-    argTypes: { onChange: { action: "onChange" } },
-};
-export default meta;
-export const ChoiceStory = {
-    name: "Choice",
-    render: ({ classModifier, ...args }) => (_jsx(Choice, { classModifier: classModifier?.join(" "), ...args })),
-    args: {
-        name: "placeName",
-        placeholder: "Paris",
-        id: "uniqueid",
-        classModifier: [],
-        readOnly: false,
-        disabled: false,
-    },
-    argTypes: {
-        onChange: { action: "onChange" },
-        classModifier: {
-            options: ["disabled", "required"],
-            control: { type: "inline-check" },
-        },
-    },
-};

package/dist/Form/Choice/ChoiceInput.stories.d.ts

@@ -1,9 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { ComponentPropsWithRef } from "react";
-import { ChoiceInput } from "./ChoiceInput";
-declare const meta: Meta<typeof ChoiceInput>;
-export default meta;
-type ChoiceInputProps = Omit<ComponentPropsWithRef<typeof ChoiceInput>, "classModifier"> & {
-    classModifier?: string[];
-};
-export declare const ChoiceInputStory: StoryObj<ChoiceInputProps>;

package/dist/Form/Choice/ChoiceInput.stories.js

@@ -1,33 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { MessageTypes } from "../core";
-import { ChoiceInput } from "./ChoiceInput";
-const meta = {
-    component: ChoiceInput,
-    title: "Components/Form/Input/Choice",
-    argTypes: { onChange: { action: "onChange" } },
-};
-export default meta;
-export const ChoiceInputStory = {
-    name: "ChoiceInput",
-    render: ({ classModifier, ...args }) => (_jsx(ChoiceInput, { classModifier: classModifier?.join(" "), ...args })),
-    args: {
-        name: "placeName",
-        label: "Place type",
-        placeholder: "Paris",
-        message: "",
-        messageType: MessageTypes.error,
-        forceDisplayMessage: false,
-        id: "uniqueid",
-        classModifier: [],
-        isVisible: true,
-        readOnly: false,
-        disabled: false,
-    },
-    argTypes: {
-        onChange: { action: "onChange" },
-        classModifier: {
-            options: ["disabled", "required"],
-            control: { type: "inline-check" },
-        },
-    },
-};

package/dist/Form/Date/Date.stories.d.ts

@@ -1,9 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { Date as DateComponent } from "./Date";
-declare const meta: Meta<typeof DateComponent>;
-export default meta;
-type StoryProps = Omit<React.ComponentProps<typeof DateComponent>, "classModifier"> & {
-    classModifier: string[];
-};
-type Story = StoryObj<StoryProps>;
-export declare const DateStory: Story;

package/dist/Form/Date/Date.stories.js

@@ -1,28 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Date as DateComponent } from "./Date";
-const MODIFIERS = ["", "required", "disabled"];
-const commonProps = {
-    name: "birthDate",
-    id: "uniqueid",
-    value: new Date("01/01/2024"),
-};
-const meta = {
-    component: DateComponent,
-    title: "Components/Form/Input/Date",
-    argTypes: { onChange: { action: "onChange" } },
-};
-export default meta;
-export const DateStory = {
-    name: "Date",
-    tags: ["Form", "Input"],
-    render: ({ classModifier, onChange, ...args }) => (_jsx(DateComponent, { classModifier: classModifier.join(" "), onChange: onChange, ...args })),
-    args: {
-        ...commonProps,
-        classModifier: [],
-    },
-    argTypes: {
-        classModifier: {
-            options: MODIFIERS,
-        },
-    },
-};

package/dist/Form/Date/DateInput.stories.d.ts

@@ -1,9 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { ComponentProps } from "react";
-import { DateInput } from "./DateInput";
-declare const meta: Meta<typeof DateInput>;
-export default meta;
-type StoryProps = ComponentProps<typeof DateInput>;
-type Story = StoryObj<StoryProps>;
-export declare const DateInputStory: Story;
-export declare const DateInputRequiredStory: Story;