allaw-ui 0.0.18 → 0.0.293

package/dist/index.js

@@ -1,2 +1,52 @@
-export { default as Button } from "./components/buttons/ButtonPrimary";
-export { default as Tag } from "./components/tags/AppointementStatusTag";
+// Atoms
+// Buttons
+export { default as Button } from "./components/atoms/buttons/PrimaryButton";
+export { default as FavoriteToggle } from "./components/atoms/buttons/FavoriteToggle";
+export { default as FilterButton } from "./components/atoms/buttons/FilterButton";
+export { default as GhostButton } from "./components/atoms/buttons/GhostButton";
+export { default as IconButton } from "./components/atoms/buttons/IconButton";
+export { default as PendingDocuments } from "./components/atoms/buttons/PendingDocuments";
+export { default as PrimaryButton } from "./components/atoms/buttons/PrimaryButton";
+export { default as SecondaryButton } from "./components/atoms/buttons/SecondaryButton";
+export { default as TabNavigation } from "./components/atoms/buttons/TabNavigation";
+export { default as TertiaryButton } from "./components/atoms/buttons/TertiaryButton";
+// Checkboxes
+export { default as Checkbox } from "./components/atoms/checkboxes/Checkbox";
+// Inputs
+export { default as Input } from "./components/atoms/inputs/Input";
+export { default as SearchBar } from "./components/atoms/inputs/SearchBar";
+// Progress Bars
+export { default as ProgressBar } from "./components/atoms/progressBars/ProgressBar";
+// Radios
+export { default as RadioButton } from "./components/atoms/radios/RadioButton";
+// Selects
+export { default as Select } from "./components/atoms/selects/Select";
+// Tags
+export { default as AppointementStatusTag } from "./components/atoms/tags/AppointementStatusTag";
+export { default as FolderStatusTag } from "./components/atoms/tags/FolderStatusTag";
+export { default as OtherStatusTag } from "./components/atoms/tags/OtherStatusTag";
+// Typography
+export { default as Heading } from "./components/atoms/typography/Heading";
+export { default as Paragraph } from "./components/atoms/typography/Paragraph";
+export { default as SmallTitle } from "./components/atoms/typography/SmallTitle";
+export { default as Subtitle } from "./components/atoms/typography/Subtitle";
+export { default as TinyInfo } from "./components/atoms/typography/TinyInfo";
+// UI Variables
+export { default as BorderRadius } from "./components/atoms/uiVariables/BorderRadius";
+export { default as Shadows } from "./components/atoms/uiVariables/Shadows";
+export { default as Strokes } from "./components/atoms/uiVariables/Strokes";
+// Molecules
+// Appointment Slot
+export { default as AppointmentSlot } from "./components/molecules/appointmentSlot/AppointmentSlot";
+// Case Card
+export { default as CaseCard } from "./components/molecules/caseCard/CaseCard";
+// Contact Card
+export { default as ContactCard } from "./components/molecules/contactCard/ContactCard";
+// Document Card
+export { default as DocumentCard } from "./components/molecules/documentCard/DocumentCard";
+// Employee Card
+export { default as EmployeeCard } from "./components/molecules/employeeCard/EmployeeCard";
+// Stepper
+export { default as Stepper } from "./components/molecules/stepper/Stepper";
+// CheckboxForm
+export { default as CheckboxForm } from "./components/molecules/checkboxForm/CheckboxForm";

package/dist/styles/colors.css

@@ -8,7 +8,9 @@
 
   /* Greyscale */
   --grey-venom: #e6edf5;
+  --venom-grey-dark: #d1dce8;
   --grey-light: #f6fcfe;
+  --active-grey: #e9eef5;
   --blue-lightning: #f6fcfe;
   --fond-de-selection: #f6fcfe;
 

package/dist/styles/global.css

@@ -0,0 +1,9 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800;900&display=swap");
+@import "~typeface-open-sans/index.css";
+@import "./colors.css";
+@import "./icons.css";
+@import "./ui-variables/border-radius.css";
+@import "./ui-variables/stroke.css";
+@import "./ui-variables/shadows.css";

package/dist/styles/ui-variables/border-radius.css

@@ -0,0 +1,6 @@
+:root {
+  --border-radius-card: 16px;
+  --border-radius-buttons: 100px;
+  --border-radius-tags: 8px;
+  --border-radius-inputs: 8px;
+}

package/dist/styles/ui-variables/shadows.css

@@ -0,0 +1,5 @@
+:root {
+  --shadow-cartes-rdv: 0 1px 20px rgba(213, 233, 246, 0.8);
+  --shadow-nav-bar: 0 1px 9px rgba(15, 133, 168, 0.08);
+  --shadow-carte-pro: 0 1px 20px rgba(213, 233, 246, 0.2);
+}

package/dist/styles/ui-variables/stroke.css

@@ -0,0 +1,4 @@
+:root {
+  --stroke-card-default: 2px solid #e6edf5;
+  --stroke-card-active: 2px solid #25beeb;
+}

package/dist/utils/regex.d.ts

@@ -0,0 +1,5 @@
+export declare const commonRegex: {
+    email: RegExp;
+    phone: RegExp;
+    name: RegExp;
+};

package/dist/utils/regex.js

@@ -0,0 +1,7 @@
+export var commonRegex = {
+    email: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+    // Cette regex couvre les numéros de téléphone français incluant la France métropolitaine, les départements et territoires d'outre-mer (Guadeloupe, Martinique, Guyane, Réunion, Mayotte, et Nouvelle-Calédonie) en formats national et international.
+    phone: /^(?:\+33\s?[1-9](?:[\s.-]?\d{2}){4}|0[1-9](?:[\s.-]?\d{2}){4}|0[1-9]\d{8}|(?:\+590|0|0590)[\s.-]?\d{2}[\s.-]?\d{2}[\s.-]?\d{2}|(?:\+596|0|0596)[\s.-]?\d{2}[\s.-]?\d{2}[\s.-]?\d{2}|(?:\+594|0|0594)[\s.-]?\d{2}[\s.-]?\d{2}[\s.-]?\d{2}|(?:\+262|0|0262)[\s.-]?\d{2}[\s.-]?\d{2}[\s.-]?\d{2}|(?:\+687)[\s.-]?\d{2}[\s.-]?\d{2}[\s.-]?\d{2})$/,
+    // Cette regex permet de valider les noms et prénoms français, incluant les accents, cédilles, traits d'union, espaces et apostrophes.
+    name: /^[A-Za-zÀ-ÖØ-öø-ÿ'\- ]+$/,
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "allaw-ui",
-  "version": "0.0.18",
+  "version": "0.0.293",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -10,11 +10,17 @@
     "README.md"
   ],
   "scripts": {
-    "build": "tsc && node copy-css.js",
+    "dev": "next dev",
+    "start": "next start",
+    "lint": "next lint",
+    "increment-version": "node increment-version.js",
+    "clean": "rm -rf dist",
+    "build": "npm run clean && tsc && node copy-css.js",
     "test": "jest",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "prepare": "npm run build"
+    "prepare": "npm run build",
+    "count-lines": "cloc . --exclude-dir=node_modules,dist,build --not-match-f='(package-lock\\.json|yarn\\.lock|\\.svg)'"
   },
   "keywords": [
     "allaw",
@@ -33,23 +39,37 @@
   "publishConfig": {
     "access": "public"
   },
+  "dependencies": {
+    "next": "14.2.5",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0",
+    "typeface-open-sans": "^1.1.13"
+  },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.6.1",
-    "@storybook/addon-essentials": "^8.2.4",
-    "@storybook/addon-interactions": "^8.2.4",
-    "@storybook/addon-links": "^8.2.4",
-    "@storybook/addon-onboarding": "^8.2.4",
-    "@storybook/blocks": "^8.2.4",
-    "@storybook/nextjs": "^8.2.4",
-    "@storybook/react": "^8.2.4",
-    "@storybook/test": "^8.2.4",
-    "storybook": "^8.2.4"
+    "@storybook/addon-backgrounds": "^8.2.8",
+    "@storybook/addon-essentials": "^8.2.8",
+    "@storybook/addon-interactions": "^8.2.8",
+    "@storybook/addon-links": "^8.2.8",
+    "@storybook/addon-mdx-gfm": "^8.2.8",
+    "@storybook/addon-onboarding": "^8.2.8",
+    "@storybook/blocks": "^8.2.8",
+    "@storybook/client-api": "^7.6.17",
+    "@storybook/nextjs": "^8.2.8",
+    "@storybook/react": "^8.2.8",
+    "@storybook/test": "^8.2.8",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "cloc": "^2.0.0-cloc",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.5",
+    "eslint-plugin-storybook": "^0.8.0",
+    "storybook": "^8.2.8",
+    "typescript": "^5"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
-  },
-  "dependencies": {
-    "allaw-ui": "^0.0.6"
   }
-}
+}

package/dist/buttons/ButtonPrimary.d.ts

@@ -1,10 +0,0 @@
-import React from "react";
-import "./ButtonPrimary.css";
-interface ButtonPrimaryProps {
-    startIcon?: React.ReactNode;
-    endIcon?: React.ReactNode;
-    label: string;
-    disabled?: boolean;
-}
-declare const ButtonPrimary: React.FC<ButtonPrimaryProps>;
-export default ButtonPrimary;

package/dist/buttons/ButtonPrimary.js

@@ -1,10 +0,0 @@
-import React from "react";
-import "./ButtonPrimary.css";
-var ButtonPrimary = function (_a) {
-    var startIcon = _a.startIcon, endIcon = _a.endIcon, label = _a.label, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
-    return (React.createElement("button", { className: "button-primary ".concat(disabled ? "button-primary-disabled" : "button-primary-enabled"), disabled: disabled },
-        startIcon && React.createElement("span", { className: "button-primary-icon" }, startIcon),
-        React.createElement("span", { className: "button-primary-label" }, label),
-        endIcon && React.createElement("span", { className: "button-primary-icon" }, endIcon)));
-};
-export default ButtonPrimary;

package/dist/components/buttons/ButtonPrimary.d.ts

@@ -1,11 +0,0 @@
-import React from "react";
-import "./ButtonPrimary.css";
-import "../../styles/icons.css";
-interface ButtonPrimaryProps {
-    startIcon?: React.ReactNode;
-    endIcon?: React.ReactNode;
-    label: string;
-    disabled?: boolean;
-}
-declare const ButtonPrimary: React.FC<ButtonPrimaryProps>;
-export default ButtonPrimary;

package/dist/components/buttons/ButtonPrimary.js

@@ -1,11 +0,0 @@
-import React from "react";
-import "./ButtonPrimary.css";
-import "../../styles/icons.css";
-var ButtonPrimary = function (_a) {
-    var startIcon = _a.startIcon, endIcon = _a.endIcon, label = _a.label, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
-    return (React.createElement("button", { className: "button-primary ".concat(disabled ? "button-primary-disabled" : "button-primary-enabled"), disabled: disabled },
-        startIcon && React.createElement("span", { className: "button-primary-icon ".concat(startIcon) }),
-        React.createElement("span", { className: "button-primary-label" }, label),
-        endIcon && React.createElement("span", { className: "button-primary-icon ".concat(endIcon) })));
-};
-export default ButtonPrimary;

package/dist/components/tags/AppointementStatusTag.css

@@ -1,58 +0,0 @@
-.appointement-status-tag {
-  display: inline-block;
-  border-radius: 8px;
-  text-align: center;
-  font-family: "Open Sans", sans-serif;
-  padding: 4px 8px;
-}
-
-.variant-big {
-  font-weight: 700;
-  font-size: 14px;
-  letter-spacing: normal;
-  padding: 4px 8px;
-  line-height: 19.07px;
-  letter-spacing: -0.02em;
-}
-
-.variant-default {
-  font-weight: 500;
-  font-size: 12px;
-  line-height: 16.34px;
-}
-
-.status-confirmed {
-  background-color: #daf6e9;
-  color: #29a36a;
-}
-
-.status-pending {
-  background-color: #fdf2f2;
-  color: #e15151;
-}
-
-.status-available {
-  background-color: #daebfb;
-  color: #1985e8;
-}
-
-.status-unavailable,
-.status-cancelled {
-  background-color: #f4f7fb;
-  color: #728ea7;
-}
-
-.status-passed {
-  background-color: #dee8f2;
-  color: #728ea7;
-}
-
-.status-refused {
-  background-color: #646464;
-  color: white;
-}
-
-.status-cancelled-big {
-  background-color: #fdf2f2;
-  color: #e15151;
-}

package/dist/components/tags/AppointementStatusTag.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-import "./AppointementStatusTag.css";
-interface AppointementStatusTagProps {
-    status: "confirmed" | "pending" | "available" | "unavailable" | "cancelled" | "passed" | "refused";
-    variant?: "default" | "big";
-}
-declare const AppointementStatusTag: ({ status, variant, }: AppointementStatusTagProps) => React.JSX.Element;
-export default AppointementStatusTag;

package/dist/stories/button.css

@@ -1,30 +0,0 @@
-.storybook-button {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-weight: 700;
-  border: 0;
-  border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
-  line-height: 1;
-}
-.storybook-button--primary {
-  color: white;
-  background-color: #1ea7fd;
-}
-.storybook-button--secondary {
-  color: #333;
-  background-color: transparent;
-  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
-}
-.storybook-button--small {
-  font-size: 12px;
-  padding: 10px 16px;
-}
-.storybook-button--medium {
-  font-size: 14px;
-  padding: 11px 20px;
-}
-.storybook-button--large {
-  font-size: 16px;
-  padding: 12px 24px;
-}

package/dist/stories/header.css

@@ -1,32 +0,0 @@
-.storybook-header {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  padding: 15px 20px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.storybook-header svg {
-  display: inline-block;
-  vertical-align: top;
-}
-
-.storybook-header h1 {
-  font-weight: 700;
-  font-size: 20px;
-  line-height: 1;
-  margin: 6px 0 6px 10px;
-  display: inline-block;
-  vertical-align: top;
-}
-
-.storybook-header button + button {
-  margin-left: 10px;
-}
-
-.storybook-header .welcome {
-  color: #333;
-  font-size: 14px;
-  margin-right: 10px;
-}

package/dist/stories/page.css

@@ -1,69 +0,0 @@
-.storybook-page {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-size: 14px;
-  line-height: 24px;
-  padding: 48px 20px;
-  margin: 0 auto;
-  max-width: 600px;
-  color: #333;
-}
-
-.storybook-page h2 {
-  font-weight: 700;
-  font-size: 32px;
-  line-height: 1;
-  margin: 0 0 4px;
-  display: inline-block;
-  vertical-align: top;
-}
-
-.storybook-page p {
-  margin: 1em 0;
-}
-
-.storybook-page a {
-  text-decoration: none;
-  color: #1ea7fd;
-}
-
-.storybook-page ul {
-  padding-left: 30px;
-  margin: 1em 0;
-}
-
-.storybook-page li {
-  margin-bottom: 8px;
-}
-
-.storybook-page .tip {
-  display: inline-block;
-  border-radius: 1em;
-  font-size: 11px;
-  line-height: 12px;
-  font-weight: 700;
-  background: #e7fdd8;
-  color: #66bf3c;
-  padding: 4px 12px;
-  margin-right: 10px;
-  vertical-align: top;
-}
-
-.storybook-page .tip-wrapper {
-  font-size: 13px;
-  line-height: 20px;
-  margin-top: 40px;
-  margin-bottom: 40px;
-}
-
-.storybook-page .tip-wrapper svg {
-  display: inline-block;
-  height: 12px;
-  width: 12px;
-  margin-right: 4px;
-  vertical-align: top;
-  margin-top: 3px;
-}
-
-.storybook-page .tip-wrapper svg path {
-  fill: #1ea7fd;
-}

package/dist/tags/AppointementStatusTag.js

@@ -1,41 +0,0 @@
-import React from "react";
-import "./AppointementStatusTag.css";
-var statusStyles = {
-    confirmed: "status-confirmed",
-    pending: "status-pending",
-    available: "status-available",
-    unavailable: "status-unavailable",
-    cancelled: "status-cancelled",
-    passed: "status-passed",
-    refused: "status-refused",
-};
-var statusLabels = {
-    confirmed: "CONFIRMÉ",
-    pending: "EN ATTENTE",
-    available: "DISPONIBLE",
-    unavailable: "INDISPONIBLE",
-    cancelled: "ANNULÉ",
-    passed: "PASSÉ",
-    refused: "REFUSÉ",
-};
-var variantLabels = {
-    confirmed: "RDV CONFIRMÉ",
-    passed: "RDV PASSÉ",
-    cancelled: "RDV ANNULÉ",
-};
-var variantStyles = {
-    big: "variant-big",
-    default: "variant-default",
-};
-var AppointementStatusTag = function (_a) {
-    var status = _a.status, _b = _a.variant, variant = _b === void 0 ? "default" : _b;
-    var label = variant === "big" && variantLabels[status]
-        ? variantLabels[status]
-        : statusLabels[status];
-    var variantClass = variantStyles[variant];
-    var specificStyles = status === "cancelled" && variant === "big"
-        ? "status-cancelled-big"
-        : statusStyles[status];
-    return (React.createElement("span", { className: "appointement-status-tag ".concat(variantClass, " ").concat(specificStyles) }, label));
-};
-export default AppointementStatusTag;