allaw-ui 0.1.71 → 1.0.0

package/dist/components/atoms/buttons/TabNavigation.stories.js

@@ -0,0 +1,66 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from "react";
+import TabNavigation from "./TabNavigation";
+import "../../../styles/global.css";
+export default {
+    title: "Components/Atoms/Buttons/TabNavigation",
+    component: TabNavigation,
+    tags: ["autodocs"],
+    argTypes: {
+        tabs: {
+            control: {
+                type: "object",
+            },
+        },
+        size: {
+            control: {
+                type: "select",
+                options: ["small", "normal"],
+            },
+        },
+        variant: {
+            control: {
+                type: "select",
+                options: ["normal", "round"],
+            },
+        },
+    },
+    parameters: {
+        backgrounds: {
+            default: "light",
+            values: [
+                { name: "light", value: "#ffffff" },
+                { name: "grey", value: "#728ea7" },
+                { name: "figma", value: "#404040" },
+                { name: "dark", value: "#171e25" },
+            ],
+        },
+    },
+};
+var Template = function (args) { return React.createElement(TabNavigation, __assign({}, args)); };
+export var Default = Template.bind({});
+Default.args = {
+    tabs: [
+        { label: "Tous", isActive: true, hasNotification: false },
+        { label: "Notes", isActive: false, hasNotification: false },
+        { label: "Documents", isActive: false, hasNotification: true },
+        { label: "Factures", isActive: false, hasNotification: false },
+    ],
+    onTabClick: function (index) { return console.log("Tab ".concat(index, " cliqu\u00E9")); },
+    size: "normal",
+    variant: "normal",
+};
+export var Round = Template.bind({});
+Round.args = __assign(__assign({}, Default.args), { variant: "round" });
+export var SmallRound = Template.bind({});
+SmallRound.args = __assign(__assign({}, Default.args), { size: "small", variant: "round" });

package/dist/components/atoms/buttons/TertiaryButton.css

@@ -8,9 +8,9 @@
   border: none;
   background: none;
   cursor: pointer;
-  transition:
+  /* transition:
     color 0.15s,
-    border-bottom 0.15s; /* Ajout de la transition de 0.15s */
+    border-bottom 0.15s; */
 }
 
 .tertiary-button-default {
@@ -20,7 +20,7 @@
 
 .tertiary-button-default:hover {
   color: var(--primary-black, #171e25);
-  border-bottom: none; /* Suppression de la border-bottom au hover */
+  border-bottom: none;
 }
 
 .tertiary-button-variant {
@@ -30,7 +30,12 @@
 }
 
 .tertiary-button-variant:hover {
-  color: var(--Primary-Dark-grey, var(--dark-grey, #456073));
+  color: var(--Primary-Dark-grey, var(--noir, #171e25));
+}
+
+.tertiary-button-variant:hover .tertiary-button-icon,
+.tertiary-button-variant:hover .tertiary-button-label {
+  color: var(--Primary-Dark-grey, var(--noir, #171e25));
 }
 
 .tertiary-button-icon {
@@ -40,6 +45,8 @@
   width: 16px;
   height: 16px;
   padding: 3.333px;
+  color: inherit;
+  /* transition: color 0.15s; */
 }
 
 .tertiary-button-label {
@@ -48,16 +55,18 @@
   font-style: normal;
   line-height: normal;
   letter-spacing: 0em;
+  color: inherit;
+  /* transition: color 0.15s; */
 }
 
 /* Styles spécifiques pour variant=false */
 .tertiary-button-default .tertiary-button-label {
-  font-weight: 700; /* Bold */
+  font-weight: 700;
   color: var(--Primary-Mid-black, var(--primary-black, #171e25));
 }
 
 /* Styles spécifiques pour variant=true */
 .tertiary-button-variant .tertiary-button-label {
-  font-weight: 400; /* Normal */
+  font-weight: 400;
   color: var(--Primary-Dark-grey, var(--dark-grey, #456073));
 }

package/dist/components/atoms/buttons/TertiaryButton.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import "./TertiaryButton.css";
+import "../../../styles/global.css";
+export interface TertiaryButtonProps {
+    startIcon?: string;
+    label: string;
+    variant?: boolean;
+    onClick?: () => void;
+}
+declare const TertiaryButton: React.FC<TertiaryButtonProps>;
+export default TertiaryButton;

package/dist/components/atoms/buttons/TertiaryButton.js

@@ -0,0 +1,10 @@
+import React from "react";
+import "./TertiaryButton.css";
+import "../../../styles/global.css";
+var TertiaryButton = function (_a) {
+    var startIcon = _a.startIcon, label = _a.label, _b = _a.variant, variant = _b === void 0 ? false : _b, onClick = _a.onClick;
+    return (React.createElement("button", { type: "button", className: "tertiary-button ".concat(variant ? "tertiary-button-variant" : "tertiary-button-default"), onClick: onClick },
+        startIcon && React.createElement("span", { className: "tertiary-button-icon ".concat(startIcon) }),
+        React.createElement("span", { className: "tertiary-button-label" }, label)));
+};
+export default TertiaryButton;

package/dist/components/atoms/buttons/TertiaryButton.stories.d.ts

@@ -0,0 +1,42 @@
+export namespace ActionsData {
+    function onClick(): void;
+}
+declare namespace _default {
+    export let title: string;
+    export { TertiaryButton as component };
+    export let tags: string[];
+    export let excludeStories: RegExp;
+    export namespace args { }
+    export namespace argTypes {
+        export namespace startIcon {
+            namespace control {
+                let type: string;
+            }
+        }
+        export namespace variant {
+            export namespace control_1 {
+                let type_1: string;
+                export { type_1 as type };
+            }
+            export { control_1 as control };
+        }
+        export namespace onClick_1 {
+            let action: string;
+        }
+        export { onClick_1 as onClick };
+    }
+    export namespace parameters {
+        namespace backgrounds {
+            let _default: string;
+            export { _default as default };
+            export let values: {
+                name: string;
+                value: string;
+            }[];
+        }
+    }
+}
+export default _default;
+export const Default: any;
+export const Variant: any;
+import TertiaryButton from "./TertiaryButton";

package/dist/components/atoms/buttons/TertiaryButton.stories.js

@@ -0,0 +1,60 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from "react";
+import TertiaryButton from "./TertiaryButton";
+import "../../../styles/global.css";
+export var ActionsData = {
+    onClick: function () { return console.log("Button clicked"); },
+};
+export default {
+    title: "Components/Atoms/Buttons/TertiaryButton",
+    component: TertiaryButton,
+    tags: ["autodocs"],
+    excludeStories: /.*Data$/,
+    args: __assign({}, ActionsData),
+    argTypes: {
+        startIcon: {
+            control: {
+                type: "text",
+            },
+        },
+        variant: {
+            control: {
+                type: "boolean",
+            },
+        },
+        onClick: { action: "clicked" },
+    },
+    parameters: {
+        backgrounds: {
+            default: "light",
+            values: [
+                { name: "light", value: "#ffffff" },
+                { name: "grey", value: "#728ea7" },
+                { name: "dark", value: "#171e25" },
+            ],
+        },
+    },
+};
+var Template = function (args) { return React.createElement(TertiaryButton, __assign({}, args)); };
+export var Default = Template.bind({});
+Default.args = {
+    label: "Annuler le RDV",
+    startIcon: "allaw-icon-close",
+    variant: false,
+};
+export var Variant = Template.bind({});
+Variant.args = {
+    label: "Voir plus d'horaire",
+    startIcon: "allaw-icon-chevron-down",
+    variant: true,
+};

package/dist/components/atoms/buttons/index.d.ts

@@ -0,0 +1,22 @@
+export { default as FavoriteToggle } from "./FavoriteToggle";
+export { default as FilterButtonPrimary } from "./FilterButtonPrimary";
+export { default as FilterButton } from "./FilterButton";
+export { default as GhostButton } from "./GhostButton";
+export { default as IconButton } from "./IconButton";
+export { default as PendingDocuments } from "./PendingDocuments";
+export { default as PrimaryButton } from "./PrimaryButton";
+export { default as SecondaryButton } from "./SecondaryButton";
+export { default as TabNavigation } from "./TabNavigation";
+export { default as TertiaryButton } from "./TertiaryButton";
+export { default as OAuthProviderButton } from "./OAuthProviderButton";
+export type { FavoriteToggleProps } from "./FavoriteToggle";
+export type { FilterButtonProps } from "./FilterButton";
+export type { GhostButtonProps } from "./GhostButton";
+export type { IconButtonProps } from "./IconButton";
+export type { PendingDocumentsProps } from "./PendingDocuments";
+export type { PrimaryButtonProps } from "./PrimaryButton";
+export type { SecondaryButtonProps } from "./SecondaryButton";
+export type { TabNavigationProps } from "./TabNavigation";
+export type { TertiaryButtonProps } from "./TertiaryButton";
+export type { OAuthProviderButtonProps } from "./OAuthProviderButton";
+export type { FilterButtonPrimaryProps } from "./FilterButtonPrimary";

package/dist/components/atoms/buttons/index.js

@@ -0,0 +1,11 @@
+export { default as FavoriteToggle } from "./FavoriteToggle";
+export { default as FilterButtonPrimary } from "./FilterButtonPrimary";
+export { default as FilterButton } from "./FilterButton";
+export { default as GhostButton } from "./GhostButton";
+export { default as IconButton } from "./IconButton";
+export { default as PendingDocuments } from "./PendingDocuments";
+export { default as PrimaryButton } from "./PrimaryButton";
+export { default as SecondaryButton } from "./SecondaryButton";
+export { default as TabNavigation } from "./TabNavigation";
+export { default as TertiaryButton } from "./TertiaryButton";
+export { default as OAuthProviderButton } from "./OAuthProviderButton";

package/dist/components/atoms/buttons/{PendingDocuments.css → pendingDocuments.module.css}

@@ -1,4 +1,4 @@
-.pending-documents {
+.pending_documents {
   display: inline-flex;
   align-items: center;
   gap: 8px;
@@ -9,22 +9,23 @@
   transition: transform 0.03s;
 }
 
-.pending-documents-pending {
+.pending_documents_pending {
   background: var(--tag-red-light, #fdf2f2);
+  /* background: red; */
   color: var(--Tags-Rouge, #e15151);
   cursor: pointer;
 }
 
-.pending-documents-pending:active {
+.pending_documents_pending:active {
   transform: scale(0.98);
 }
 
-.pending-documents-none {
+.pending_documents_none {
   background: var(--tag-blue-light, #daebfb);
   color: var(--Tags-Bleu-fonc, var(--tag-blue, #1985e8));
 }
 
-.pending-documents-icon {
+.pending_documents_icon {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -34,7 +35,7 @@
   font-size: 24px;
 }
 
-.pending-documents-label {
+.pending_documents_label {
   font-family: "Open Sans", sans-serif;
   font-size: 16px;
   font-style: normal;
@@ -44,10 +45,10 @@
   color: inherit;
 }
 
-.pending-documents-pending .pending-documents-label {
+.pending_documents_pending .pending_documents_label {
   color: var(--Tags-Rouge, #e15151);
 }
 
-.pending-documents-none .pending-documents-label {
+.pending_documents_none .pending_documents_label {
   color: var(--Tags-Bleu-fonc, var(--tag-blue, #1985e8));
 }

package/dist/components/atoms/checkboxes/Checkbox.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import "./Checkbox.css";
+import "../../../styles/global.css";
+export interface CheckboxProps {
+    id?: string;
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    color?: string;
+    size?: "default" | "small";
+    style?: "default" | "light";
+    markType?: "cross" | "check";
+}
+declare const Checkbox: React.FC<CheckboxProps>;
+export default Checkbox;

package/dist/components/atoms/checkboxes/Checkbox.js

@@ -0,0 +1,19 @@
+import React, { useState } from "react";
+import "./Checkbox.css";
+import "../../../styles/global.css";
+var Checkbox = function (_a) {
+    var id = _a.id, _b = _a.checked, checked = _b === void 0 ? false : _b, onChange = _a.onChange, _c = _a.color, color = _c === void 0 ? "noir" : _c, _d = _a.size, size = _d === void 0 ? "default" : _d, _e = _a.style, style = _e === void 0 ? "default" : _e, _f = _a.markType, markType = _f === void 0 ? "cross" : _f;
+    var _g = useState(checked), isChecked = _g[0], setIsChecked = _g[1];
+    var handleClick = function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        var newChecked = !isChecked;
+        setIsChecked(newChecked);
+        if (onChange) {
+            onChange(newChecked);
+        }
+    };
+    var checkboxColor = style === "light" ? "light" : color;
+    return (React.createElement("button", { id: id, className: "checkbox ".concat(isChecked ? "checkbox-pressed" : "checkbox-default", " ").concat("checkbox-".concat(checkboxColor), " ").concat(size === "small" ? "checkbox-small" : "", " ").concat(style === "light" ? "checkbox-light" : ""), onClick: handleClick }, isChecked && (React.createElement("span", { className: "checkbox-icon ".concat(markType === "cross" ? "allaw-icon-close" : "allaw-icon-check", " ").concat("checkbox-icon-".concat(checkboxColor), " ").concat(style === "light" ? "checkbox-icon-light" : "") }))));
+};
+export default Checkbox;

package/dist/components/atoms/checkboxes/Checkbox.stories.d.ts

@@ -0,0 +1,77 @@
+export const ActionsData: {};
+declare namespace _default {
+    export let title: string;
+    export { Checkbox as component };
+    export let tags: string[];
+    export let excludeStories: RegExp;
+    export namespace args {
+        let color: string;
+    }
+    export namespace argTypes {
+        export namespace checked {
+            namespace control {
+                let type: string;
+            }
+        }
+        export namespace color_1 {
+            export namespace control_1 {
+                let type_1: string;
+                export { type_1 as type };
+                export let options: string[];
+            }
+            export { control_1 as control };
+        }
+        export { color_1 as color };
+        export namespace size {
+            export namespace control_2 {
+                let type_2: string;
+                export { type_2 as type };
+                let options_1: string[];
+                export { options_1 as options };
+            }
+            export { control_2 as control };
+        }
+        export namespace style {
+            export namespace control_3 {
+                let type_3: string;
+                export { type_3 as type };
+                let options_2: string[];
+                export { options_2 as options };
+            }
+            export { control_3 as control };
+        }
+        export namespace markType {
+            export namespace control_4 {
+                let type_4: string;
+                export { type_4 as type };
+                let options_3: string[];
+                export { options_3 as options };
+            }
+            export { control_4 as control };
+        }
+        export namespace onChange {
+            namespace table {
+                let disable: boolean;
+            }
+        }
+    }
+    export namespace parameters {
+        namespace backgrounds {
+            let _default: string;
+            export { _default as default };
+            export let values: {
+                name: string;
+                value: string;
+            }[];
+        }
+    }
+}
+export default _default;
+export const Default: any;
+export const Pressed: any;
+export const Small: any;
+export const SmallPressed: any;
+export const White: any;
+export const Light: any;
+export const LightPressed: any;
+import Checkbox from "./Checkbox";

package/dist/components/atoms/checkboxes/Checkbox.stories.js

@@ -0,0 +1,123 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from "react";
+import Checkbox from "./Checkbox";
+import "../../../styles/global.css";
+export var ActionsData = {};
+export default {
+    title: "Components/Atoms/Checkboxes/Checkbox",
+    component: Checkbox,
+    tags: ["autodocs"],
+    excludeStories: /.*Data$/,
+    args: __assign(__assign({}, ActionsData), { color: "noir" }),
+    argTypes: {
+        checked: {
+            control: {
+                type: "boolean",
+            },
+        },
+        color: {
+            control: {
+                type: "select",
+                options: [
+                    "bleu-allaw",
+                    "mid-grey",
+                    "dark-grey",
+                    "noir",
+                    "pure-white",
+                    "grey-venom",
+                    "venom-grey-dark",
+                ],
+            },
+        },
+        size: {
+            control: {
+                type: "select",
+                options: ["default", "small"],
+            },
+        },
+        style: {
+            control: {
+                type: "select",
+                options: ["default", "light"],
+            },
+        },
+        markType: {
+            control: {
+                type: "select",
+                options: ["cross", "check"],
+            },
+        },
+        onChange: {
+            table: {
+                disable: true,
+            },
+        },
+    },
+    parameters: {
+        backgrounds: {
+            default: "light",
+            values: [
+                { name: "light", value: "#ffffff" },
+                { name: "grey", value: "#728ea7" },
+                { name: "figma", value: "#404040" },
+                { name: "dark", value: "#171e25" },
+            ],
+        },
+    },
+};
+var Template = function (args) {
+    return React.createElement(Checkbox, __assign({}, args));
+};
+export var Default = Template.bind({});
+Default.args = {
+    checked: false,
+    size: "default",
+    style: "default",
+};
+export var Pressed = Template.bind({});
+Pressed.args = {
+    checked: true,
+    size: "default",
+    style: "default",
+};
+export var Small = Template.bind({});
+Small.args = {
+    checked: false,
+    size: "small",
+    style: "default",
+};
+export var SmallPressed = Template.bind({});
+SmallPressed.args = {
+    checked: true,
+    size: "small",
+    style: "default",
+};
+export var White = Template.bind({});
+White.args = {
+    checked: false,
+    color: "pure-white",
+    size: "default",
+    style: "default",
+};
+export var Light = Template.bind({});
+Light.args = {
+    checked: false,
+    size: "default",
+    style: "light",
+};
+export var LightPressed = Template.bind({});
+LightPressed.args = {
+    checked: true,
+    size: "default",
+    style: "light",
+};

package/dist/components/atoms/checkboxes/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Checkbox } from "./Checkbox";
+export type { CheckboxProps } from "./Checkbox";

package/dist/components/atoms/checkboxes/index.js

@@ -0,0 +1 @@
+export { default as Checkbox } from "./Checkbox";

package/dist/components/atoms/datepickers/Datepicker.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import "react-datepicker/dist/react-datepicker.css";
+import "./datepicker.css";
+import "../../../styles/global.css";
+export interface DatepickerProps {
+    value?: Date;
+    onChange?: (date: Date | undefined) => void;
+    placeholder?: string;
+    yearDropdownItemNumber?: number;
+    maxDaysInPast?: number;
+    minDate?: Date;
+}
+declare const Datepicker: React.FC<DatepickerProps>;
+export default Datepicker;