allaw-ui 0.1.71 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/atoms/buttons/ActionCircleButton.d.ts +9 -0
- package/dist/components/atoms/buttons/ActionCircleButton.js +23 -0
- package/dist/components/atoms/buttons/AgendaSlot.d.ts +10 -0
- package/dist/components/atoms/buttons/AgendaSlot.js +7 -0
- package/dist/components/atoms/buttons/FavoriteToggle.d.ts +8 -0
- package/dist/components/atoms/buttons/FavoriteToggle.js +11 -0
- package/dist/components/atoms/buttons/FilterButton.d.ts +9 -0
- package/dist/components/atoms/buttons/FilterButton.js +9 -0
- package/dist/components/atoms/buttons/FilterButtonPrimary.d.ts +9 -0
- package/dist/components/atoms/buttons/FilterButtonPrimary.js +46 -0
- package/dist/components/atoms/buttons/GhostButton.d.ts +14 -0
- package/dist/components/atoms/buttons/GhostButton.js +11 -0
- package/dist/components/atoms/buttons/IconButton.d.ts +11 -0
- package/dist/components/atoms/buttons/IconButton.js +14 -0
- package/dist/components/atoms/buttons/OAuthProviderButton.d.ts +12 -0
- package/dist/components/atoms/buttons/OAuthProviderButton.js +143 -0
- package/dist/components/atoms/buttons/PendingDocuments.d.ts +10 -0
- package/dist/components/atoms/buttons/PendingDocuments.js +13 -0
- package/dist/components/atoms/buttons/PrimaryButton.d.ts +17 -0
- package/dist/components/atoms/buttons/PrimaryButton.js +117 -0
- package/dist/components/atoms/buttons/SecondaryButton.d.ts +18 -0
- package/dist/components/atoms/buttons/SecondaryButton.js +117 -0
- package/dist/components/atoms/buttons/TabNavigation.d.ts +13 -0
- package/dist/components/atoms/buttons/TabNavigation.js +10 -0
- package/dist/components/atoms/buttons/TertiaryButton.d.ts +11 -0
- package/dist/components/atoms/buttons/TertiaryButton.js +10 -0
- package/dist/components/atoms/buttons/index.d.ts +22 -0
- package/dist/components/atoms/buttons/index.js +11 -0
- package/dist/components/atoms/checkboxes/Checkbox.d.ts +14 -0
- package/dist/components/atoms/checkboxes/Checkbox.js +19 -0
- package/dist/components/atoms/checkboxes/index.d.ts +2 -0
- package/dist/components/atoms/checkboxes/index.js +1 -0
- package/dist/components/atoms/filter/Filter.d.ts +17 -0
- package/dist/components/atoms/filter/Filter.js +70 -0
- package/dist/components/atoms/filter/index.d.ts +2 -0
- package/dist/components/atoms/filter/index.js +1 -0
- package/dist/components/atoms/filters/SingleFilter.d.ts +17 -0
- package/dist/components/atoms/filters/SingleFilter.js +81 -0
- package/dist/components/atoms/filters/index.d.ts +2 -0
- package/dist/components/atoms/filters/index.js +1 -0
- package/dist/components/atoms/inputs/Input.d.ts +22 -0
- package/dist/components/atoms/inputs/Input.js +86 -0
- package/dist/components/atoms/inputs/SearchBar.d.ts +12 -0
- package/dist/components/atoms/inputs/SearchBar.js +20 -0
- package/dist/components/atoms/inputs/TextArea.d.ts +21 -0
- package/dist/components/atoms/inputs/TextArea.js +66 -0
- package/dist/components/atoms/inputs/index.d.ts +6 -0
- package/dist/components/atoms/inputs/index.js +3 -0
- package/dist/components/atoms/progressBars/ProgressBar.d.ts +15 -0
- package/dist/components/atoms/progressBars/ProgressBar.js +18 -0
- package/dist/components/atoms/progressBars/index.d.ts +2 -0
- package/dist/components/atoms/progressBars/index.js +1 -0
- package/dist/components/atoms/radios/RadioButton.d.ts +11 -0
- package/dist/components/atoms/radios/RadioButton.js +10 -0
- package/dist/components/atoms/radios/index.d.ts +2 -0
- package/dist/components/atoms/radios/index.js +1 -0
- package/dist/components/atoms/selects/ComboBox.d.ts +27 -0
- package/dist/components/atoms/selects/ComboBox.js +172 -0
- package/dist/components/atoms/selects/Select.d.ts +25 -0
- package/dist/components/atoms/selects/Select.js +127 -0
- package/dist/components/atoms/selects/index.d.ts +4 -0
- package/dist/components/atoms/selects/index.js +2 -0
- package/dist/components/atoms/tags/AppointementStatusTag.d.ts +8 -0
- package/dist/components/atoms/tags/AppointementStatusTag.js +42 -0
- package/dist/components/atoms/tags/FolderStatusTag.d.ts +7 -0
- package/dist/components/atoms/tags/FolderStatusTag.js +8 -0
- package/dist/components/atoms/tags/OtherStatusTag.d.ts +10 -0
- package/dist/components/atoms/tags/OtherStatusTag.js +10 -0
- package/dist/components/atoms/tags/index.d.ts +6 -0
- package/dist/components/atoms/tags/index.js +3 -0
- package/dist/components/atoms/typography/Heading.d.ts +10 -0
- package/dist/components/atoms/typography/Heading.js +7 -0
- package/dist/components/atoms/typography/Paragraph.d.ts +12 -0
- package/dist/components/atoms/typography/Paragraph.js +33 -0
- package/dist/components/atoms/typography/SmallTitle.d.ts +9 -0
- package/dist/components/atoms/typography/SmallTitle.js +7 -0
- package/dist/components/atoms/typography/Subtitle.d.ts +9 -0
- package/dist/components/atoms/typography/Subtitle.js +7 -0
- package/dist/components/atoms/typography/TinyInfo.d.ts +12 -0
- package/dist/components/atoms/typography/TinyInfo.js +15 -0
- package/dist/components/atoms/typography/index.d.ts +10 -0
- package/dist/components/atoms/typography/index.js +5 -0
- package/dist/components/atoms/uiVariables/BorderRadius.d.ts +6 -0
- package/dist/components/atoms/uiVariables/BorderRadius.js +12 -0
- package/dist/components/atoms/uiVariables/Shadows.d.ts +6 -0
- package/dist/components/atoms/uiVariables/Shadows.js +11 -0
- package/dist/components/atoms/uiVariables/Strokes.d.ts +6 -0
- package/dist/components/atoms/uiVariables/Strokes.js +10 -0
- package/dist/components/atoms/uiVariables/index.d.ts +3 -0
- package/dist/components/atoms/uiVariables/index.js +3 -0
- package/dist/components/molecules/appointmentSlot/AppointmentSlot.d.ts +25 -0
- package/dist/components/molecules/appointmentSlot/AppointmentSlot.js +109 -0
- package/dist/components/molecules/appointmentSlot/index.d.ts +2 -0
- package/dist/components/molecules/appointmentSlot/index.js +1 -0
- package/dist/components/molecules/breadcrumb/Breadcrumb.d.ts +12 -0
- package/dist/components/molecules/breadcrumb/Breadcrumb.js +12 -0
- package/dist/components/molecules/breadcrumb/index.d.ts +2 -0
- package/dist/components/molecules/breadcrumb/index.js +1 -0
- package/dist/components/molecules/caseCard/CaseCard.d.ts +14 -0
- package/dist/components/molecules/caseCard/CaseCard.js +20 -0
- package/dist/components/molecules/caseCard/index.d.ts +2 -0
- package/dist/components/molecules/caseCard/index.js +1 -0
- package/dist/components/molecules/caseLinkCard/CaseLinkCard.d.ts +11 -0
- package/dist/components/molecules/caseLinkCard/CaseLinkCard.js +30 -0
- package/dist/components/molecules/caseLinkCard/index.d.ts +2 -0
- package/dist/components/molecules/caseLinkCard/index.js +1 -0
- package/dist/components/molecules/checkboxForm/CheckboxForm.d.ts +17 -0
- package/dist/components/molecules/checkboxForm/CheckboxForm.js +24 -0
- package/dist/components/molecules/checkboxForm/index.d.ts +2 -0
- package/dist/components/molecules/checkboxForm/index.js +1 -0
- package/dist/components/molecules/clientLinkCard/ClientLinkCard.d.ts +13 -0
- package/dist/components/molecules/clientLinkCard/ClientLinkCard.js +16 -0
- package/dist/components/molecules/clientLinkCard/index.d.ts +2 -0
- package/dist/components/molecules/clientLinkCard/index.js +1 -0
- package/dist/components/molecules/contactCard/ContactCard.d.ts +17 -0
- package/dist/components/molecules/contactCard/ContactCard.js +80 -0
- package/dist/components/molecules/contactCard/index.d.ts +2 -0
- package/dist/components/molecules/contactCard/index.js +1 -0
- package/dist/components/molecules/documentCard/DocumentCard.d.ts +15 -0
- package/dist/components/molecules/documentCard/DocumentCard.js +72 -0
- package/dist/components/molecules/documentCard/index.d.ts +2 -0
- package/dist/components/molecules/documentCard/index.js +1 -0
- package/dist/components/molecules/employeeCard/EmployeeCard.d.ts +15 -0
- package/dist/components/molecules/employeeCard/EmployeeCard.js +34 -0
- package/dist/components/molecules/employeeCard/index.d.ts +2 -0
- package/dist/components/molecules/employeeCard/index.js +1 -0
- package/dist/components/molecules/loadingBox/LoadingBox.d.ts +9 -0
- package/dist/components/molecules/loadingBox/LoadingBox.js +7 -0
- package/dist/components/molecules/loadingBox/index.d.ts +2 -0
- package/dist/components/molecules/loadingBox/index.js +1 -0
- package/dist/components/molecules/proCard/ProCard.d.ts +13 -0
- package/dist/components/molecules/proCard/ProCard.js +25 -0
- package/dist/components/molecules/proCard/index.d.ts +2 -0
- package/dist/components/molecules/proCard/index.js +1 -0
- package/dist/components/molecules/radioForm/RadioForm.d.ts +12 -0
- package/dist/components/molecules/radioForm/RadioForm.js +27 -0
- package/dist/components/molecules/radioForm/index.d.ts +2 -0
- package/dist/components/molecules/radioForm/index.js +1 -0
- package/dist/components/molecules/selectForm/SelectForm.d.ts +15 -0
- package/dist/components/molecules/selectForm/SelectForm.js +15 -0
- package/dist/components/molecules/selectForm/index.d.ts +2 -0
- package/dist/components/molecules/selectForm/index.js +1 -0
- package/dist/components/molecules/stepper/Stepper.d.ts +34 -0
- package/dist/components/molecules/stepper/Stepper.js +123 -0
- package/dist/components/molecules/stepper/index.d.ts +2 -0
- package/dist/components/molecules/stepper/index.js +1 -0
- package/dist/index.d.ts +51 -0
- package/dist/index.js +71 -0
- package/dist/utils/regex.d.ts +5 -0
- package/dist/utils/regex.js +7 -0
- package/dist/utils/utils.d.ts +2 -0
- package/dist/utils/utils.js +48 -0
- package/package.json +1 -1
- package/dist/tsconfig.tsbuildinfo +0 -1
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./Paragraph.css";
|
|
3
|
+
export interface ParagraphProps {
|
|
4
|
+
variant: "bold" | "semiBold" | "medium";
|
|
5
|
+
color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white" | "grey-venom" | "venom-grey-dark";
|
|
6
|
+
text: React.ReactNode;
|
|
7
|
+
maxLines?: number;
|
|
8
|
+
maxChars?: number;
|
|
9
|
+
size?: "default" | "small";
|
|
10
|
+
}
|
|
11
|
+
declare const Paragraph: React.FC<ParagraphProps>;
|
|
12
|
+
export default Paragraph;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
import React from "react";
|
|
13
|
+
import "./Paragraph.css";
|
|
14
|
+
import { convertToHtml } from "../../../utils/utils";
|
|
15
|
+
var Paragraph = function (_a) {
|
|
16
|
+
var variant = _a.variant, color = _a.color, text = _a.text, maxLines = _a.maxLines, maxChars = _a.maxChars, _b = _a.size, size = _b === void 0 ? "default" : _b;
|
|
17
|
+
var truncateText = function (text, maxChars) {
|
|
18
|
+
if (text.length <= maxChars)
|
|
19
|
+
return text;
|
|
20
|
+
return text.slice(0, maxChars) + "...";
|
|
21
|
+
};
|
|
22
|
+
var htmlText = convertToHtml(text);
|
|
23
|
+
var truncatedText = maxChars ? truncateText(htmlText, maxChars) : htmlText;
|
|
24
|
+
return (React.createElement("div", { className: "paragraph ".concat(variant, " ").concat(color ? "color-".concat(color) : "", " ").concat(size === "small" ? "paragraph-small" : ""), style: __assign({ whiteSpace: "pre-line" }, (maxLines
|
|
25
|
+
? {
|
|
26
|
+
WebkitLineClamp: maxLines,
|
|
27
|
+
display: "-webkit-box",
|
|
28
|
+
WebkitBoxOrient: "vertical",
|
|
29
|
+
overflow: "hidden",
|
|
30
|
+
}
|
|
31
|
+
: {})), dangerouslySetInnerHTML: { __html: truncatedText } }));
|
|
32
|
+
};
|
|
33
|
+
export default Paragraph;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./SmallTitle.css";
|
|
3
|
+
export interface SmallTitleProps {
|
|
4
|
+
variant: "bold20" | "medium32" | "semiBold12" | "medium12";
|
|
5
|
+
color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white";
|
|
6
|
+
text: string;
|
|
7
|
+
}
|
|
8
|
+
declare const SmallTitle: React.FC<SmallTitleProps>;
|
|
9
|
+
export default SmallTitle;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./SmallTitle.css";
|
|
3
|
+
var SmallTitle = function (_a) {
|
|
4
|
+
var variant = _a.variant, _b = _a.color, color = _b === void 0 ? "noir" : _b, text = _a.text;
|
|
5
|
+
return (React.createElement("p", { className: "small-title ".concat(variant, " ").concat(color ? "color-".concat(color) : ""), dangerouslySetInnerHTML: { __html: text } }));
|
|
6
|
+
};
|
|
7
|
+
export default SmallTitle;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./Subtitle.css";
|
|
3
|
+
export interface SubtitleProps {
|
|
4
|
+
variant: "bold" | "medium";
|
|
5
|
+
color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white";
|
|
6
|
+
text: string;
|
|
7
|
+
}
|
|
8
|
+
declare const Subtitle: React.FC<SubtitleProps>;
|
|
9
|
+
export default Subtitle;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./Subtitle.css";
|
|
3
|
+
var Subtitle = function (_a) {
|
|
4
|
+
var variant = _a.variant, color = _a.color, text = _a.text;
|
|
5
|
+
return (React.createElement("p", { className: "subtitle ".concat(variant, " ").concat(color ? "color-".concat(color) : ""), dangerouslySetInnerHTML: { __html: text } }));
|
|
6
|
+
};
|
|
7
|
+
export default Subtitle;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./TinyInfo.css";
|
|
3
|
+
export interface TinyInfoProps {
|
|
4
|
+
variant: "bold14" | "medium14" | "semiBold12" | "medium12";
|
|
5
|
+
color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white" | "actions-error" | "actions-valid";
|
|
6
|
+
text: string;
|
|
7
|
+
href?: string;
|
|
8
|
+
className?: string;
|
|
9
|
+
uppercase?: boolean;
|
|
10
|
+
}
|
|
11
|
+
declare const TinyInfo: React.FC<TinyInfoProps>;
|
|
12
|
+
export default TinyInfo;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./TinyInfo.css";
|
|
3
|
+
var toUpperCaseWithAccents = function (str) {
|
|
4
|
+
return str.replace(/[a-zàáâãäåçèéêëìíîïñòóôõöùúûü]/g, function (letter) {
|
|
5
|
+
return letter.toLocaleUpperCase();
|
|
6
|
+
});
|
|
7
|
+
};
|
|
8
|
+
var TinyInfo = function (_a) {
|
|
9
|
+
var variant = _a.variant, _b = _a.color, color = _b === void 0 ? "noir" : _b, text = _a.text, href = _a.href, className = _a.className, _c = _a.uppercase, uppercase = _c === void 0 ? false : _c;
|
|
10
|
+
var processedText = uppercase ? toUpperCaseWithAccents(text) : text;
|
|
11
|
+
var content = (React.createElement("span", { className: "tiny-info ".concat(variant, " ").concat(color ? "color-".concat(color) : "", " ").concat(className || ""), dangerouslySetInnerHTML: { __html: processedText } }));
|
|
12
|
+
return href ? (React.createElement("a", { href: href, className: "tiny-info-link ".concat(className || "") }, content)) : (content);
|
|
13
|
+
};
|
|
14
|
+
export default TinyInfo;
|
|
15
|
+
TinyInfo.displayName = "TinyInfo";
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export { default as Heading } from "./Heading";
|
|
2
|
+
export { default as Paragraph } from "./Paragraph";
|
|
3
|
+
export { default as SmallTitle } from "./SmallTitle";
|
|
4
|
+
export { default as Subtitle } from "./Subtitle";
|
|
5
|
+
export { default as TinyInfo } from "./TinyInfo";
|
|
6
|
+
export type { HeadingProps } from "./Heading";
|
|
7
|
+
export type { ParagraphProps } from "./Paragraph";
|
|
8
|
+
export type { SmallTitleProps } from "./SmallTitle";
|
|
9
|
+
export type { SubtitleProps } from "./Subtitle";
|
|
10
|
+
export type { TinyInfoProps } from "./TinyInfo";
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "../../../styles/ui-variables/border-radius.css";
|
|
3
|
+
import "./BorderRadiusExample.css";
|
|
4
|
+
import "../../../styles/global.css";
|
|
5
|
+
var BorderRadius = function () {
|
|
6
|
+
return (React.createElement("div", null,
|
|
7
|
+
React.createElement("div", { className: "example-card", style: { borderRadius: "var(--border-radius-card)" } }, "Card - 16px"),
|
|
8
|
+
React.createElement("div", { className: "example-button", style: { borderRadius: "var(--border-radius-buttons)" } }, "Button - 100px"),
|
|
9
|
+
React.createElement("div", { className: "example-tag", style: { borderRadius: "var(--border-radius-tags)" } }, "Tag - 8px"),
|
|
10
|
+
React.createElement("div", { className: "example-input", style: { borderRadius: "var(--border-radius-inputs)" } }, "Input - 8px")));
|
|
11
|
+
};
|
|
12
|
+
export default BorderRadius;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "../../../styles/global.css";
|
|
3
|
+
import "../../../styles/ui-variables/shadows.css";
|
|
4
|
+
import "./ShadowsExample.css";
|
|
5
|
+
var Shadows = function () {
|
|
6
|
+
return (React.createElement("div", null,
|
|
7
|
+
React.createElement("div", { className: "example-card", style: { boxShadow: "var(--shadow-cartes-rdv)" } }, "Cartes RDV"),
|
|
8
|
+
React.createElement("div", { className: "example-nav-bar", style: { boxShadow: "var(--shadow-nav-bar)" } }, "Nav_bar_shadow"),
|
|
9
|
+
React.createElement("div", { className: "example-carte-pro", style: { boxShadow: "var(--shadow-carte-pro)" } }, "Carte pro - Blue Shadow")));
|
|
10
|
+
};
|
|
11
|
+
export default Shadows;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "../../../styles/global.css";
|
|
3
|
+
import "../../../styles/ui-variables/stroke.css";
|
|
4
|
+
import "./StrokesExample.css";
|
|
5
|
+
var Strokes = function () {
|
|
6
|
+
return (React.createElement("div", null,
|
|
7
|
+
React.createElement("div", { className: "example-stroke-default" }, "#25BEEB, 2px"),
|
|
8
|
+
React.createElement("div", { className: "example-stroke-active" }, "#CFD5D8, 2px")));
|
|
9
|
+
};
|
|
10
|
+
export default Strokes;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./AppointmentSlot.css";
|
|
3
|
+
type AppointmentStatus = "pending" | "available" | "cancelled" | "passed" | "refused" | "confirmed" | "unavailable" | "summary";
|
|
4
|
+
export interface AppointmentSlotProps {
|
|
5
|
+
status: AppointmentStatus;
|
|
6
|
+
startTime: string;
|
|
7
|
+
endTime: string;
|
|
8
|
+
date?: string;
|
|
9
|
+
clientName?: string;
|
|
10
|
+
appointmentContent?: string;
|
|
11
|
+
tags?: string[];
|
|
12
|
+
noteCount?: string;
|
|
13
|
+
documentCount?: string;
|
|
14
|
+
actions?: {
|
|
15
|
+
onApprove?: () => void;
|
|
16
|
+
onReject?: () => void;
|
|
17
|
+
onMakeUnavailable?: () => void;
|
|
18
|
+
onEdit?: () => void;
|
|
19
|
+
onViewDocument?: () => void;
|
|
20
|
+
};
|
|
21
|
+
isEditable?: boolean;
|
|
22
|
+
appointmentDetails?: string;
|
|
23
|
+
}
|
|
24
|
+
declare const AppointmentSlot: React.FC<AppointmentSlotProps>;
|
|
25
|
+
export default AppointmentSlot;
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
import React, { useState, useCallback } from "react";
|
|
2
|
+
import "./AppointmentSlot.css";
|
|
3
|
+
import AppointementStatusTag from "../../atoms/tags/AppointementStatusTag";
|
|
4
|
+
import OtherStatusTag from "../../atoms/tags/OtherStatusTag";
|
|
5
|
+
import ActionCircleButton from "../../atoms/buttons/ActionCircleButton";
|
|
6
|
+
import IconButton from "../../atoms/buttons/IconButton";
|
|
7
|
+
var AppointmentSlot = function (_a) {
|
|
8
|
+
var status = _a.status, startTime = _a.startTime, endTime = _a.endTime, date = _a.date, clientName = _a.clientName, appointmentContent = _a.appointmentContent, tags = _a.tags, noteCount = _a.noteCount, documentCount = _a.documentCount, actions = _a.actions;
|
|
9
|
+
var _b = useState(false), isActive = _b[0], setIsActive = _b[1];
|
|
10
|
+
// Handlers
|
|
11
|
+
var handleApprove = useCallback(function () {
|
|
12
|
+
var _a;
|
|
13
|
+
console.log("Approved!");
|
|
14
|
+
(_a = actions === null || actions === void 0 ? void 0 : actions.onApprove) === null || _a === void 0 ? void 0 : _a.call(actions);
|
|
15
|
+
}, [actions]);
|
|
16
|
+
var handleReject = useCallback(function () {
|
|
17
|
+
var _a;
|
|
18
|
+
console.log("Refused!");
|
|
19
|
+
(_a = actions === null || actions === void 0 ? void 0 : actions.onReject) === null || _a === void 0 ? void 0 : _a.call(actions);
|
|
20
|
+
}, [actions]);
|
|
21
|
+
var handleMouseDown = function (e) {
|
|
22
|
+
if (!isClickableElement(e.target)) {
|
|
23
|
+
setIsActive(true);
|
|
24
|
+
}
|
|
25
|
+
};
|
|
26
|
+
var handleMouseUp = function () {
|
|
27
|
+
setIsActive(false);
|
|
28
|
+
};
|
|
29
|
+
var handleClick = function (e) {
|
|
30
|
+
if (!isClickableElement(e.target)) {
|
|
31
|
+
console.log("card clicked");
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
// Helper function
|
|
35
|
+
var isClickableElement = function (element) {
|
|
36
|
+
return (element.closest(".action-button-container, .document-actions, button") !==
|
|
37
|
+
null);
|
|
38
|
+
};
|
|
39
|
+
// Render functions
|
|
40
|
+
var renderHeader = function () { return (React.createElement("div", { className: "appointment-header" },
|
|
41
|
+
React.createElement("span", { className: "appointment-time" }, "".concat(startTime, " - ").concat(endTime)),
|
|
42
|
+
status !== "summary" && (React.createElement(AppointementStatusTag, { status: status })))); };
|
|
43
|
+
var renderFooter = function () {
|
|
44
|
+
if (status === "available") {
|
|
45
|
+
return renderAvailableFooter();
|
|
46
|
+
}
|
|
47
|
+
if (status === "summary") {
|
|
48
|
+
return null;
|
|
49
|
+
}
|
|
50
|
+
if (status !== "unavailable") {
|
|
51
|
+
return renderDefaultFooter();
|
|
52
|
+
}
|
|
53
|
+
return null;
|
|
54
|
+
};
|
|
55
|
+
var renderAvailableFooter = function () { return (React.createElement("div", { className: "appointment-footer" },
|
|
56
|
+
React.createElement("div", { className: "action-button-container", onClick: actions === null || actions === void 0 ? void 0 : actions.onMakeUnavailable },
|
|
57
|
+
React.createElement("div", { className: "icon-close-container" },
|
|
58
|
+
React.createElement("i", { className: "allaw-icon-close" })),
|
|
59
|
+
React.createElement("span", { className: "make-unavailable-text" }, "Rendre indisponible")))); };
|
|
60
|
+
var renderDefaultFooter = function () { return (React.createElement("div", { className: "appointment-footer" },
|
|
61
|
+
React.createElement("div", { className: "footer-left" },
|
|
62
|
+
clientName && React.createElement("div", { className: "client-name" }, clientName),
|
|
63
|
+
appointmentContent && (React.createElement("div", { className: "appointment-content" }, appointmentContent)),
|
|
64
|
+
renderTags()),
|
|
65
|
+
renderActionButtons())); };
|
|
66
|
+
var renderTags = function () {
|
|
67
|
+
return tags && (React.createElement("div", { className: "tags-container" }, tags.map(function (tag, index) { return (React.createElement(OtherStatusTag, { key: index, label: tag })); })));
|
|
68
|
+
};
|
|
69
|
+
var renderActionButtons = function () {
|
|
70
|
+
switch (status) {
|
|
71
|
+
case "pending":
|
|
72
|
+
return (React.createElement("div", { className: "action-button-container" },
|
|
73
|
+
React.createElement(ActionCircleButton, { status: "dual", onApprove: handleApprove, onReject: handleReject })));
|
|
74
|
+
case "confirmed":
|
|
75
|
+
return (React.createElement("div", { className: "document-actions" },
|
|
76
|
+
React.createElement(IconButton, { style: "smallFilled", iconName: "allaw-icon-document", onClick: actions === null || actions === void 0 ? void 0 : actions.onViewDocument }),
|
|
77
|
+
documentCount && (React.createElement("span", { className: "document-count" }, documentCount))));
|
|
78
|
+
case "passed":
|
|
79
|
+
return (React.createElement("div", { className: "document-actions" },
|
|
80
|
+
React.createElement(IconButton, { style: "smallFilled", iconName: "allaw-icon-edit-2", onClick: actions === null || actions === void 0 ? void 0 : actions.onEdit }),
|
|
81
|
+
noteCount && React.createElement("span", { className: "note-count" }, noteCount),
|
|
82
|
+
React.createElement(IconButton, { style: "smallFilled", iconName: "allaw-icon-document", onClick: actions === null || actions === void 0 ? void 0 : actions.onViewDocument }),
|
|
83
|
+
documentCount && (React.createElement("span", { className: "document-count" }, documentCount))));
|
|
84
|
+
default:
|
|
85
|
+
return null;
|
|
86
|
+
}
|
|
87
|
+
};
|
|
88
|
+
if (status === "summary") {
|
|
89
|
+
return (React.createElement("div", { className: "appointment-slot-summary" },
|
|
90
|
+
React.createElement("div", { className: "appointment-header" },
|
|
91
|
+
React.createElement("div", { className: "date-time-container" },
|
|
92
|
+
React.createElement("span", { className: "summary-date" }, date),
|
|
93
|
+
React.createElement("span", { className: "summary-time" }, "".concat(startTime, " - ").concat(endTime))),
|
|
94
|
+
React.createElement(IconButton, { style: "largeFilled", iconName: "allaw-icon-edit-2", onClick: actions === null || actions === void 0 ? void 0 : actions.onEdit })),
|
|
95
|
+
React.createElement("div", { className: "appointment-footer" },
|
|
96
|
+
React.createElement("div", { className: "appointment-content-container" },
|
|
97
|
+
React.createElement("div", { className: "client-name" }, clientName),
|
|
98
|
+
React.createElement("div", { className: "appointment-content" }, appointmentContent),
|
|
99
|
+
renderTags()),
|
|
100
|
+
React.createElement("div", { className: "document-actions-container" },
|
|
101
|
+
React.createElement("div", { className: "document-actions" },
|
|
102
|
+
React.createElement(IconButton, { style: "smallFilled", iconName: "allaw-icon-document", onClick: actions === null || actions === void 0 ? void 0 : actions.onViewDocument }),
|
|
103
|
+
documentCount && (React.createElement("span", { className: "document-count" }, documentCount)))))));
|
|
104
|
+
}
|
|
105
|
+
return (React.createElement("div", { className: "appointment-slot ".concat(status, " ").concat(isActive ? "active" : ""), onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onClick: handleClick },
|
|
106
|
+
renderHeader(),
|
|
107
|
+
renderFooter()));
|
|
108
|
+
};
|
|
109
|
+
export default AppointmentSlot;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as AppointmentSlot } from "./AppointmentSlot";
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./Breadcrumb.css";
|
|
3
|
+
export interface BreadcrumbItem {
|
|
4
|
+
key: number;
|
|
5
|
+
label: string;
|
|
6
|
+
link: string;
|
|
7
|
+
}
|
|
8
|
+
export interface BreadcrumbProps {
|
|
9
|
+
items: BreadcrumbItem[];
|
|
10
|
+
}
|
|
11
|
+
declare const Breadcrumb: React.FC<BreadcrumbProps>;
|
|
12
|
+
export default Breadcrumb;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./Breadcrumb.css";
|
|
3
|
+
import TinyInfo from "../../atoms/typography/TinyInfo";
|
|
4
|
+
var Breadcrumb = function (_a) {
|
|
5
|
+
var items = _a.items;
|
|
6
|
+
return (React.createElement("nav", { className: "breadcrumb" }, items.map(function (item, index) { return (React.createElement(React.Fragment, { key: item.key },
|
|
7
|
+
index > 0 && (React.createElement("span", { className: "breadcrumb-separator" },
|
|
8
|
+
React.createElement("i", { className: "allaw-icon-chevron-right" }))),
|
|
9
|
+
React.createElement("a", { href: item.link, className: "breadcrumb-link" },
|
|
10
|
+
React.createElement(TinyInfo, { variant: "medium14", color: index === items.length - 1 ? "dark-grey" : "mid-grey", text: item.label })))); })));
|
|
11
|
+
};
|
|
12
|
+
export default Breadcrumb;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Breadcrumb } from "./Breadcrumb";
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./CaseCard.css";
|
|
3
|
+
export interface CaseCardProps {
|
|
4
|
+
clientName: string;
|
|
5
|
+
title: string;
|
|
6
|
+
nextAppointment?: {
|
|
7
|
+
date: string;
|
|
8
|
+
time?: string;
|
|
9
|
+
};
|
|
10
|
+
categories: string[];
|
|
11
|
+
variant: "desktop" | "mobile" | "archived";
|
|
12
|
+
}
|
|
13
|
+
declare const CaseCard: React.FC<CaseCardProps>;
|
|
14
|
+
export default CaseCard;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./CaseCard.css";
|
|
3
|
+
import OtherStatusTag from "../../atoms/tags/OtherStatusTag";
|
|
4
|
+
var CaseCard = function (_a) {
|
|
5
|
+
var clientName = _a.clientName, title = _a.title, nextAppointment = _a.nextAppointment, categories = _a.categories, variant = _a.variant;
|
|
6
|
+
return (React.createElement("div", { className: "case-card-wrapper case-card-".concat(variant) },
|
|
7
|
+
React.createElement("div", { className: "case-card-content" },
|
|
8
|
+
React.createElement("div", { className: "case-card-header" },
|
|
9
|
+
React.createElement("span", { className: "case-card-client-name" }, clientName),
|
|
10
|
+
React.createElement("h2", { className: variant === "desktop"
|
|
11
|
+
? "case-card-title"
|
|
12
|
+
: "case-card-title-extended" }, title)),
|
|
13
|
+
React.createElement("div", { className: "case-card-categories" }, categories.map(function (category, index) { return (React.createElement(OtherStatusTag, { key: index, label: category, type: "readonly" })); }))),
|
|
14
|
+
nextAppointment && variant !== "archived" && (React.createElement("div", { className: "case-card-next-appointment" },
|
|
15
|
+
React.createElement("span", { className: "case-card-next-appointment-label" }, "Prochain RDV"),
|
|
16
|
+
variant === "desktop" ? (React.createElement(React.Fragment, null,
|
|
17
|
+
React.createElement("span", { className: "case-card-next-appointment-date" }, nextAppointment.date),
|
|
18
|
+
React.createElement("span", { className: "case-card-next-appointment-time" }, nextAppointment.time))) : (React.createElement("span", { className: "case-card-next-appointment-date-only" }, nextAppointment.date))))));
|
|
19
|
+
};
|
|
20
|
+
export default CaseCard;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as CaseCard } from "./CaseCard";
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./CaseLinkCard.css";
|
|
3
|
+
export type CaseLinkCardProps = {
|
|
4
|
+
proName: string;
|
|
5
|
+
caseName: string;
|
|
6
|
+
createdDate: Date;
|
|
7
|
+
isLoading?: boolean;
|
|
8
|
+
onCaseCardClick?: () => any;
|
|
9
|
+
};
|
|
10
|
+
declare function CaseLinkCard({ proName, caseName, createdDate, onCaseCardClick, isLoading }: CaseLinkCardProps): React.JSX.Element;
|
|
11
|
+
export default CaseLinkCard;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./CaseLinkCard.css";
|
|
3
|
+
import { Paragraph, SmallTitle } from "../../atoms/typography";
|
|
4
|
+
import LoadingBox from "../loadingBox/LoadingBox";
|
|
5
|
+
function CaseLinkCard(_a) {
|
|
6
|
+
var proName = _a.proName, caseName = _a.caseName, createdDate = _a.createdDate, onCaseCardClick = _a.onCaseCardClick, _b = _a.isLoading, isLoading = _b === void 0 ? false : _b;
|
|
7
|
+
var formatDate = function (date) {
|
|
8
|
+
return date.toLocaleDateString("fr-FR", {
|
|
9
|
+
day: "2-digit",
|
|
10
|
+
month: "2-digit",
|
|
11
|
+
year: "2-digit",
|
|
12
|
+
});
|
|
13
|
+
};
|
|
14
|
+
var formatProName = function (name) {
|
|
15
|
+
return "Ma\u00EEtre ".concat(name).toUpperCase();
|
|
16
|
+
};
|
|
17
|
+
return !isLoading ? React.createElement("div", { className: "case-card-link", onClick: function () { return onCaseCardClick && onCaseCardClick(); }, style: { cursor: onCaseCardClick ? "pointer" : "default" } },
|
|
18
|
+
React.createElement("div", { className: "case-card-link-folder-icon" },
|
|
19
|
+
React.createElement("i", { className: "allaw-icon-folder", style: { fontSize: "20px" } })),
|
|
20
|
+
React.createElement("div", { className: "case-card-link-right" },
|
|
21
|
+
React.createElement("div", { className: "case-card-link-info-row" },
|
|
22
|
+
React.createElement(SmallTitle, { text: "DOSSIER", variant: "semiBold12", color: "dark-grey" }),
|
|
23
|
+
React.createElement(SmallTitle, { text: "Cr\u00E9\u00E9 le ".concat(formatDate(createdDate)), variant: "semiBold12", color: "dark-grey" })),
|
|
24
|
+
React.createElement("div", { className: "case-card-link-info-row-bottom" },
|
|
25
|
+
React.createElement("div", { className: "case-card-link-info-col" },
|
|
26
|
+
React.createElement(Paragraph, { variant: "bold", size: "default", text: caseName, maxLines: 1 }),
|
|
27
|
+
React.createElement(SmallTitle, { variant: "medium12", color: "mid-grey", text: formatProName(proName) })),
|
|
28
|
+
React.createElement("i", { className: "allaw-icon-arrow-right" })))) : React.createElement(LoadingBox, { boxHeigth: "100px", boxRadius: "8px", boxWidth: "100%" });
|
|
29
|
+
}
|
|
30
|
+
export default CaseLinkCard;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as CaseCardLink } from "./CaseLinkCard";
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { ParagraphProps } from "../../atoms/typography/Paragraph";
|
|
3
|
+
import "./CheckboxForm.css";
|
|
4
|
+
export interface CheckboxFormProps {
|
|
5
|
+
checked?: boolean;
|
|
6
|
+
onChange?: (checked: boolean) => void;
|
|
7
|
+
color?: ParagraphProps["color"];
|
|
8
|
+
label?: React.ReactNode;
|
|
9
|
+
isRequired?: boolean;
|
|
10
|
+
linkText?: string;
|
|
11
|
+
linkUrl?: string;
|
|
12
|
+
size?: "default" | "small";
|
|
13
|
+
style?: "default" | "light";
|
|
14
|
+
markType?: "cross" | "check";
|
|
15
|
+
}
|
|
16
|
+
declare const CheckboxForm: React.FC<CheckboxFormProps>;
|
|
17
|
+
export default CheckboxForm;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import Checkbox from "../../atoms/checkboxes/Checkbox";
|
|
3
|
+
import Paragraph from "../../atoms/typography/Paragraph";
|
|
4
|
+
import "./CheckboxForm.css";
|
|
5
|
+
var CheckboxForm = function (_a) {
|
|
6
|
+
var _b = _a.checked, checked = _b === void 0 ? false : _b, onChange = _a.onChange, _c = _a.color, color = _c === void 0 ? "noir" : _c, label = _a.label, _d = _a.isRequired, isRequired = _d === void 0 ? false : _d, linkText = _a.linkText, linkUrl = _a.linkUrl, _e = _a.size, size = _e === void 0 ? "default" : _e, _f = _a.style, style = _f === void 0 ? "default" : _f, _g = _a.markType, markType = _g === void 0 ? "cross" : _g;
|
|
7
|
+
var checkboxId = "checkbox-".concat(Math.random().toString(36).substr(2, 9));
|
|
8
|
+
var handleCheckboxChange = function (checked) {
|
|
9
|
+
if (onChange) {
|
|
10
|
+
onChange(checked);
|
|
11
|
+
}
|
|
12
|
+
};
|
|
13
|
+
var checkboxColor = style === "light" ? "light" : color;
|
|
14
|
+
return (React.createElement("div", { className: "checkbox-form checkbox-form-".concat(checkboxColor, " ").concat(size === "small" ? "checkbox-form-small" : "") },
|
|
15
|
+
React.createElement(Checkbox, { id: checkboxId, checked: checked, onChange: handleCheckboxChange, color: checkboxColor, size: size, style: style, markType: markType }),
|
|
16
|
+
label && (React.createElement("label", { htmlFor: checkboxId, className: "checkbox-form-label-container" },
|
|
17
|
+
React.createElement(Paragraph, { variant: "semiBold", color: color, text: React.createElement(React.Fragment, null,
|
|
18
|
+
React.createElement("span", null, label),
|
|
19
|
+
linkText && linkUrl && (React.createElement("a", { href: linkUrl, target: "_blank", rel: "noopener noreferrer", className: "checkbox-form-link", onClick: function (e) { return e.stopPropagation(); } }, linkText))), size: size }),
|
|
20
|
+
isRequired && (React.createElement("span", { className: "checkbox-form-required" },
|
|
21
|
+
"\u00A0",
|
|
22
|
+
"*"))))));
|
|
23
|
+
};
|
|
24
|
+
export default CheckboxForm;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as CheckboxForm } from "./CheckboxForm";
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./ClientLinkCard.css";
|
|
3
|
+
import "../../../styles/icons.css";
|
|
4
|
+
export type ClientLinkCardProps = {
|
|
5
|
+
clientFirstName: string;
|
|
6
|
+
clientName: string;
|
|
7
|
+
clientMail: string;
|
|
8
|
+
isLoading?: boolean;
|
|
9
|
+
company?: string;
|
|
10
|
+
onClientCardClick?: () => any;
|
|
11
|
+
};
|
|
12
|
+
declare function ClientLinkCard({ clientFirstName, isLoading, clientName, clientMail, company, onClientCardClick }: ClientLinkCardProps): React.JSX.Element;
|
|
13
|
+
export default ClientLinkCard;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Paragraph, SmallTitle } from "../../atoms/typography";
|
|
3
|
+
import "./ClientLinkCard.css";
|
|
4
|
+
import "../../../styles/icons.css";
|
|
5
|
+
import LoadingBox from "../loadingBox/LoadingBox";
|
|
6
|
+
function ClientLinkCard(_a) {
|
|
7
|
+
var clientFirstName = _a.clientFirstName, isLoading = _a.isLoading, clientName = _a.clientName, clientMail = _a.clientMail, company = _a.company, onClientCardClick = _a.onClientCardClick;
|
|
8
|
+
return !isLoading ? React.createElement("div", { className: "client-link-card", style: { cursor: onClientCardClick ? "pointer" : "default" }, onClick: function () { return onClientCardClick && onClientCardClick(); } },
|
|
9
|
+
React.createElement("div", { className: "client-link-card-left" },
|
|
10
|
+
React.createElement(Paragraph, { variant: "semiBold", text: "".concat(clientFirstName, " ").concat(clientName === null || clientName === void 0 ? void 0 : clientName.toUpperCase()), size: "default", maxLines: 1, color: "noir" }),
|
|
11
|
+
React.createElement(SmallTitle, { variant: "medium12", color: "mid-grey", text: clientMail === null || clientMail === void 0 ? void 0 : clientMail.toLowerCase() })),
|
|
12
|
+
React.createElement("div", { className: "client-link-card-right" },
|
|
13
|
+
company && React.createElement("span", { className: "client-link-card-office-tag" }, company),
|
|
14
|
+
React.createElement("i", { className: "allaw-icon-arrow-right" }))) : React.createElement(LoadingBox, { boxHeigth: "91px", boxRadius: "16px", boxWidth: "100%" });
|
|
15
|
+
}
|
|
16
|
+
export default ClientLinkCard;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as ClientLinkCard } from "./ClientLinkCard";
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./ContactCard.css";
|
|
3
|
+
export interface ContactCardProps {
|
|
4
|
+
size: "small" | "medium" | "large" | "editable";
|
|
5
|
+
name: string;
|
|
6
|
+
birthDate: string;
|
|
7
|
+
avatarUrl: string;
|
|
8
|
+
status: string;
|
|
9
|
+
address: string;
|
|
10
|
+
phone: string;
|
|
11
|
+
email: string;
|
|
12
|
+
isEditable: boolean;
|
|
13
|
+
onEdit: () => void;
|
|
14
|
+
gender: "male" | "female";
|
|
15
|
+
}
|
|
16
|
+
declare const ContactCard: React.FC<ContactCardProps>;
|
|
17
|
+
export default ContactCard;
|