allaw-ui 0.0.1
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/README.md +47 -0
- package/dist/buttons/ButtonPrimary.d.ts +10 -0
- package/dist/buttons/ButtonPrimary.js +10 -0
- package/dist/components/buttons/ButtonPrimary.d.ts +10 -0
- package/dist/components/buttons/ButtonPrimary.js +10 -0
- package/dist/components/tags/AppointementStatusTag.d.ts +8 -0
- package/dist/components/tags/AppointementStatusTag.js +41 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +2 -0
- package/dist/tags/AppointementStatusTag.d.ts +8 -0
- package/dist/tags/AppointementStatusTag.js +41 -0
- package/package.json +52 -0
package/README.md
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
# Allaw UI
|
|
2
|
+
|
|
3
|
+
Allaw UI est une bibliothèque de composants React personnalisés pour les applications Allaw. Elle fournit un ensemble cohérent d'éléments d'interface utilisateur conçus pour s'intégrer parfaitement dans l'écosystème Allaw.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
npm install @allaw/allaw-ui
|
|
8
|
+
|
|
9
|
+
## Utilisation
|
|
10
|
+
|
|
11
|
+
Importez les composants dont vous avez besoin dans votre application React.
|
|
12
|
+
|
|
13
|
+
## Composants disponibles
|
|
14
|
+
|
|
15
|
+
- Button
|
|
16
|
+
- Icon
|
|
17
|
+
- Tag
|
|
18
|
+
|
|
19
|
+
Pour une documentation complète de chaque composant, veuillez consulter notre Storybook.
|
|
20
|
+
|
|
21
|
+
## Développement
|
|
22
|
+
|
|
23
|
+
### Prérequis
|
|
24
|
+
|
|
25
|
+
- npm
|
|
26
|
+
- nextjs 14 ou supérieur
|
|
27
|
+
- react 17 ou supérieur
|
|
28
|
+
|
|
29
|
+
### Installation des dépendances
|
|
30
|
+
|
|
31
|
+
npm install
|
|
32
|
+
|
|
33
|
+
Storybook sera disponible à l'adresse [http://localhost:6006](http://localhost:6006).
|
|
34
|
+
|
|
35
|
+
### Build
|
|
36
|
+
|
|
37
|
+
Pour construire la bibliothèque :
|
|
38
|
+
|
|
39
|
+
npm run build
|
|
40
|
+
|
|
41
|
+
## Contribution
|
|
42
|
+
|
|
43
|
+
Allaw UI est un projet privé. Pour toute question ou suggestion, veuillez contacter l'équipe de développement Allaw.
|
|
44
|
+
|
|
45
|
+
## Licence
|
|
46
|
+
|
|
47
|
+
Ce projet est sous licence propriétaire. Copyright © 2024 Allaw. Tous droits réservés.
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./ButtonPrimary.css";
|
|
3
|
+
interface ButtonPrimaryProps {
|
|
4
|
+
startIcon?: React.ReactNode;
|
|
5
|
+
endIcon?: React.ReactNode;
|
|
6
|
+
label: string;
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
}
|
|
9
|
+
declare const ButtonPrimary: React.FC<ButtonPrimaryProps>;
|
|
10
|
+
export default ButtonPrimary;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./ButtonPrimary.css";
|
|
3
|
+
var ButtonPrimary = function (_a) {
|
|
4
|
+
var startIcon = _a.startIcon, endIcon = _a.endIcon, label = _a.label, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
|
|
5
|
+
return (React.createElement("button", { className: "button-primary ".concat(disabled ? "button-primary-disabled" : "button-primary-enabled"), disabled: disabled },
|
|
6
|
+
startIcon && React.createElement("span", { className: "button-primary-icon" }, startIcon),
|
|
7
|
+
React.createElement("span", { className: "button-primary-label" }, label),
|
|
8
|
+
endIcon && React.createElement("span", { className: "button-primary-icon" }, endIcon)));
|
|
9
|
+
};
|
|
10
|
+
export default ButtonPrimary;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./ButtonPrimary.css";
|
|
3
|
+
interface ButtonPrimaryProps {
|
|
4
|
+
startIcon?: React.ReactNode;
|
|
5
|
+
endIcon?: React.ReactNode;
|
|
6
|
+
label: string;
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
}
|
|
9
|
+
declare const ButtonPrimary: React.FC<ButtonPrimaryProps>;
|
|
10
|
+
export default ButtonPrimary;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./ButtonPrimary.css";
|
|
3
|
+
var ButtonPrimary = function (_a) {
|
|
4
|
+
var startIcon = _a.startIcon, endIcon = _a.endIcon, label = _a.label, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
|
|
5
|
+
return (React.createElement("button", { className: "button-primary ".concat(disabled ? "button-primary-disabled" : "button-primary-enabled"), disabled: disabled },
|
|
6
|
+
startIcon && React.createElement("span", { className: "button-primary-icon" }, startIcon),
|
|
7
|
+
React.createElement("span", { className: "button-primary-label" }, label),
|
|
8
|
+
endIcon && React.createElement("span", { className: "button-primary-icon" }, endIcon)));
|
|
9
|
+
};
|
|
10
|
+
export default ButtonPrimary;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./AppointementStatusTag.css";
|
|
3
|
+
interface AppointementStatusTagProps {
|
|
4
|
+
status: "confirmed" | "pending" | "available" | "unavailable" | "cancelled" | "passed" | "refused";
|
|
5
|
+
variant?: "default" | "big";
|
|
6
|
+
}
|
|
7
|
+
declare const AppointementStatusTag: ({ status, variant, }: AppointementStatusTagProps) => React.JSX.Element;
|
|
8
|
+
export default AppointementStatusTag;
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./AppointementStatusTag.css";
|
|
3
|
+
var statusStyles = {
|
|
4
|
+
confirmed: "status-confirmed",
|
|
5
|
+
pending: "status-pending",
|
|
6
|
+
available: "status-available",
|
|
7
|
+
unavailable: "status-unavailable",
|
|
8
|
+
cancelled: "status-cancelled",
|
|
9
|
+
passed: "status-passed",
|
|
10
|
+
refused: "status-refused",
|
|
11
|
+
};
|
|
12
|
+
var statusLabels = {
|
|
13
|
+
confirmed: "CONFIRMÉ",
|
|
14
|
+
pending: "EN ATTENTE",
|
|
15
|
+
available: "DISPONIBLE",
|
|
16
|
+
unavailable: "INDISPONIBLE",
|
|
17
|
+
cancelled: "ANNULÉ",
|
|
18
|
+
passed: "PASSÉ",
|
|
19
|
+
refused: "REFUSÉ",
|
|
20
|
+
};
|
|
21
|
+
var variantLabels = {
|
|
22
|
+
confirmed: "RDV CONFIRMÉ",
|
|
23
|
+
passed: "RDV PASSÉ",
|
|
24
|
+
cancelled: "RDV ANNULÉ",
|
|
25
|
+
};
|
|
26
|
+
var variantStyles = {
|
|
27
|
+
big: "variant-big",
|
|
28
|
+
default: "variant-default",
|
|
29
|
+
};
|
|
30
|
+
var AppointementStatusTag = function (_a) {
|
|
31
|
+
var status = _a.status, _b = _a.variant, variant = _b === void 0 ? "default" : _b;
|
|
32
|
+
var label = variant === "big" && variantLabels[status]
|
|
33
|
+
? variantLabels[status]
|
|
34
|
+
: statusLabels[status];
|
|
35
|
+
var variantClass = variantStyles[variant];
|
|
36
|
+
var specificStyles = status === "cancelled" && variant === "big"
|
|
37
|
+
? "status-cancelled-big"
|
|
38
|
+
: statusStyles[status];
|
|
39
|
+
return (React.createElement("span", { className: "appointement-status-tag ".concat(variantClass, " ").concat(specificStyles) }, label));
|
|
40
|
+
};
|
|
41
|
+
export default AppointementStatusTag;
|
package/dist/index.d.ts
ADDED
package/dist/index.js
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./AppointementStatusTag.css";
|
|
3
|
+
interface AppointementStatusTagProps {
|
|
4
|
+
status: "confirmed" | "pending" | "available" | "unavailable" | "cancelled" | "passed" | "refused";
|
|
5
|
+
variant?: "default" | "big";
|
|
6
|
+
}
|
|
7
|
+
declare const AppointementStatusTag: ({ status, variant, }: AppointementStatusTagProps) => React.JSX.Element;
|
|
8
|
+
export default AppointementStatusTag;
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./AppointementStatusTag.css";
|
|
3
|
+
var statusStyles = {
|
|
4
|
+
confirmed: "status-confirmed",
|
|
5
|
+
pending: "status-pending",
|
|
6
|
+
available: "status-available",
|
|
7
|
+
unavailable: "status-unavailable",
|
|
8
|
+
cancelled: "status-cancelled",
|
|
9
|
+
passed: "status-passed",
|
|
10
|
+
refused: "status-refused",
|
|
11
|
+
};
|
|
12
|
+
var statusLabels = {
|
|
13
|
+
confirmed: "CONFIRMÉ",
|
|
14
|
+
pending: "EN ATTENTE",
|
|
15
|
+
available: "DISPONIBLE",
|
|
16
|
+
unavailable: "INDISPONIBLE",
|
|
17
|
+
cancelled: "ANNULÉ",
|
|
18
|
+
passed: "PASSÉ",
|
|
19
|
+
refused: "REFUSÉ",
|
|
20
|
+
};
|
|
21
|
+
var variantLabels = {
|
|
22
|
+
confirmed: "RDV CONFIRMÉ",
|
|
23
|
+
passed: "RDV PASSÉ",
|
|
24
|
+
cancelled: "RDV ANNULÉ",
|
|
25
|
+
};
|
|
26
|
+
var variantStyles = {
|
|
27
|
+
big: "variant-big",
|
|
28
|
+
default: "variant-default",
|
|
29
|
+
};
|
|
30
|
+
var AppointementStatusTag = function (_a) {
|
|
31
|
+
var status = _a.status, _b = _a.variant, variant = _b === void 0 ? "default" : _b;
|
|
32
|
+
var label = variant === "big" && variantLabels[status]
|
|
33
|
+
? variantLabels[status]
|
|
34
|
+
: statusLabels[status];
|
|
35
|
+
var variantClass = variantStyles[variant];
|
|
36
|
+
var specificStyles = status === "cancelled" && variant === "big"
|
|
37
|
+
? "status-cancelled-big"
|
|
38
|
+
: statusStyles[status];
|
|
39
|
+
return (React.createElement("span", { className: "appointement-status-tag ".concat(variantClass, " ").concat(specificStyles) }, label));
|
|
40
|
+
};
|
|
41
|
+
export default AppointementStatusTag;
|
package/package.json
ADDED
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "allaw-ui",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"description": "Composants UI pour l'application Allaw",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"module": "dist/index.esm.js",
|
|
7
|
+
"types": "dist/index.d.ts",
|
|
8
|
+
"files": [
|
|
9
|
+
"dist",
|
|
10
|
+
"README.md"
|
|
11
|
+
],
|
|
12
|
+
"scripts": {
|
|
13
|
+
"build": "tsc",
|
|
14
|
+
"test": "jest",
|
|
15
|
+
"storybook": "storybook dev -p 6006",
|
|
16
|
+
"build-storybook": "storybook build",
|
|
17
|
+
"prepare": "npm run build"
|
|
18
|
+
},
|
|
19
|
+
"keywords": [
|
|
20
|
+
"allaw",
|
|
21
|
+
"ui",
|
|
22
|
+
"components",
|
|
23
|
+
"react"
|
|
24
|
+
],
|
|
25
|
+
"author": "Allaw",
|
|
26
|
+
"company": "Allaw",
|
|
27
|
+
"license": "UNLICENSED",
|
|
28
|
+
"private": false,
|
|
29
|
+
"repository": {
|
|
30
|
+
"type": "git",
|
|
31
|
+
"url": "git+https://github.com/allaw/allaw-ui.git"
|
|
32
|
+
},
|
|
33
|
+
"publishConfig": {
|
|
34
|
+
"access": "public"
|
|
35
|
+
},
|
|
36
|
+
"devDependencies": {
|
|
37
|
+
"@chromatic-com/storybook": "^1.6.1",
|
|
38
|
+
"@storybook/addon-essentials": "^8.2.4",
|
|
39
|
+
"@storybook/addon-interactions": "^8.2.4",
|
|
40
|
+
"@storybook/addon-links": "^8.2.4",
|
|
41
|
+
"@storybook/addon-onboarding": "^8.2.4",
|
|
42
|
+
"@storybook/blocks": "^8.2.4",
|
|
43
|
+
"@storybook/nextjs": "^8.2.4",
|
|
44
|
+
"@storybook/react": "^8.2.4",
|
|
45
|
+
"@storybook/test": "^8.2.4",
|
|
46
|
+
"storybook": "^8.2.4"
|
|
47
|
+
},
|
|
48
|
+
"peerDependencies": {
|
|
49
|
+
"react": "^17.0.0 || ^18.0.0",
|
|
50
|
+
"react-dom": "^17.0.0 || ^18.0.0"
|
|
51
|
+
}
|
|
52
|
+
}
|