zuii 1.5.1 → 1.5.3
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/Button/style/index.css +1 -1
- package/dist/components/Color/react/index.js +2 -2
- package/dist/components/Errorpage/react/index.js +2 -2
- package/dist/components/Form/react/index.js +1 -1
- package/dist/components/Lang-selector/js/language-selector.js +16 -16
- package/dist/components/Modal/js/modal.d.ts +42 -1
- package/dist/components/Nav/react/index.js +2 -2
- package/dist/components/Table/js/table.d.ts +4 -0
- package/dist/components/Table/react/index.d.ts +1 -1
- package/dist/components/Table/react/index.js +73 -70
- package/dist/index.d.ts +1 -1
- package/dist/index.js +53 -51
- package/dist/node_modules/.pnpm/colord@2.9.3/node_modules/colord/plugins/mix.js +48 -0
- package/dist/packages/cookie-consent/src/js/cookie-consent.js +96 -0
- package/dist/packages/cookie-consent/src/js/trads/de.js +49 -0
- package/dist/packages/cookie-consent/src/js/trads/en.js +49 -0
- package/dist/packages/cookie-consent/src/js/trads/es.js +49 -0
- package/dist/packages/cookie-consent/src/js/trads/fr.js +49 -0
- package/dist/packages/cookie-consent/src/js/trads/i18n.js +8 -0
- package/dist/packages/cookie-consent/src/react/index.js +2 -3
- package/dist/{components/Form/style → packages/core/src/styles/form}/index.css +1 -1
- package/dist/packages/core/src/utils/contrast.js +4 -0
- package/dist/packages/core/src/utils/lang.js +8 -0
- package/dist/packages/core/src/utils/lang_types.js +4 -0
- package/dist/templates/Calendars/Calendars.d.ts +5 -0
- package/dist/templates/Calendars/Calendars.tsx +78 -0
- package/dist/templates/Forms/Forms-elements.tsx +0 -1
- package/dist/templates/Tables/Tables.tsx +12 -6
- package/dist/templates/index.d.ts +1 -0
- package/dist/templates/index.ts +2 -0
- package/package.json +111 -107
- package/dist/packages/cookie-consent/src/style/index.css +0 -1
- package/dist/packages/core/src/utils/getName.js +0 -23
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import { useState } from 'react';
|
|
2
|
+
import { Calendar } from '../../../packages/calendar/src/react';
|
|
3
|
+
import { Booking } from '../../../packages/booking/src/react';
|
|
4
|
+
import { MOCK_AVAILABILITY } from '../../../packages/calendar/src/js/mockData';
|
|
5
|
+
import '../../../packages/calendar/src/style/index.scss';
|
|
6
|
+
import '../../../packages/booking/src/style/index.scss';
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Template de démonstration pour le calendrier et la réservation (Booking).
|
|
10
|
+
* @returns {JSX.Element}
|
|
11
|
+
*/
|
|
12
|
+
export const Calendars = () => {
|
|
13
|
+
const [selectedDate] = useState<Date | null>(null);
|
|
14
|
+
|
|
15
|
+
return (
|
|
16
|
+
<div className="template-calendars">
|
|
17
|
+
<h2 style={{ marginBottom: '40px' }}>Démonstration des composants</h2>
|
|
18
|
+
|
|
19
|
+
<section style={{ marginBottom: '60px' }}>
|
|
20
|
+
<h3 style={{ marginBottom: '20px', color: '#666' }}>1. Usage Complet (Calendar + Booking intégrés)</h3>
|
|
21
|
+
<Booking
|
|
22
|
+
disablePast={true}
|
|
23
|
+
availability={MOCK_AVAILABILITY}
|
|
24
|
+
yearsFromNow={20}
|
|
25
|
+
onSlotSelect={(date: Date, slot: string, formData: any) => {
|
|
26
|
+
console.log(`Réservation confirmée : ${date.toLocaleDateString()} à ${slot}`, formData);
|
|
27
|
+
alert(`Merci ${formData.firstname} ! Votre réservation pour le ${date.toLocaleDateString()} à ${slot} est prise en compte.`);
|
|
28
|
+
}}
|
|
29
|
+
/>
|
|
30
|
+
</section>
|
|
31
|
+
|
|
32
|
+
<section style={{ marginBottom: '60px' }}>
|
|
33
|
+
<h3 style={{ marginBottom: '20px', color: '#666' }}>2. Formulaire personnalisé</h3>
|
|
34
|
+
<Booking
|
|
35
|
+
disablePast={true}
|
|
36
|
+
availability={MOCK_AVAILABILITY}
|
|
37
|
+
fields={[
|
|
38
|
+
{ name: 'full_name', label: 'Nom complet', type: 'text', required: true },
|
|
39
|
+
{ name: 'email', label: 'Adresse Email', type: 'email', required: true },
|
|
40
|
+
{ name: 'phone', label: 'Téléphone', type: 'tel', required: false },
|
|
41
|
+
{ name: 'reason', label: 'Motif de la visite', type: 'textarea', required: true, placeholder: 'Décrivez brièvement le motif...' }
|
|
42
|
+
]}
|
|
43
|
+
onSlotSelect={(_date, _slot, data) => {
|
|
44
|
+
console.log('Données personnalisées reçues :', data);
|
|
45
|
+
}}
|
|
46
|
+
/>
|
|
47
|
+
</section>
|
|
48
|
+
|
|
49
|
+
<hr style={{ margin: '40px 0', border: 'none', borderTop: '1px solid #eee' }} />
|
|
50
|
+
|
|
51
|
+
<section>
|
|
52
|
+
<h3 style={{ marginBottom: '20px', color: '#666' }}>2. Usage Solo (Calendrier uniquement)</h3>
|
|
53
|
+
<div style={{ display: 'flex', gap: '40px', flexWrap: 'wrap' }}>
|
|
54
|
+
<div style={{ maxWidth: '400px' }}>
|
|
55
|
+
<p style={{ marginBottom: '10px', fontSize: '14px' }}>Mode Single :</p>
|
|
56
|
+
<Calendar
|
|
57
|
+
disablePast={true}
|
|
58
|
+
initialDate={selectedDate || new Date()}
|
|
59
|
+
onDateSelect={(date: Date) => {
|
|
60
|
+
console.log(`Date sélectionnée en solo : ${date.toLocaleDateString()}`);
|
|
61
|
+
}}
|
|
62
|
+
/>
|
|
63
|
+
</div>
|
|
64
|
+
<div style={{ maxWidth: '400px' }}>
|
|
65
|
+
<p style={{ marginBottom: '10px', fontSize: '14px' }}>Mode Range (Plage de jours) :</p>
|
|
66
|
+
<Calendar
|
|
67
|
+
initialDate={selectedDate || new Date()}
|
|
68
|
+
mode="range"
|
|
69
|
+
onRangeSelect={(start: Date, end: Date) => {
|
|
70
|
+
alert(`Plage sélectionnée : du ${start.toLocaleDateString()} au ${end.toLocaleDateString()}`);
|
|
71
|
+
}}
|
|
72
|
+
/>
|
|
73
|
+
</div>
|
|
74
|
+
</div>
|
|
75
|
+
</section>
|
|
76
|
+
</div>
|
|
77
|
+
);
|
|
78
|
+
};
|
|
@@ -10,7 +10,6 @@ export const FormsElements = () => {
|
|
|
10
10
|
const [countryValue, setCountryValue] = useState<string | string[]>('');
|
|
11
11
|
const [multiValue, setMultiValue] = useState<string | string[]>(['1', '2']);
|
|
12
12
|
|
|
13
|
-
|
|
14
13
|
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
|
15
14
|
e.preventDefault();
|
|
16
15
|
const formData = new FormData(e.currentTarget);
|
|
@@ -94,11 +94,11 @@ export const Tables = () => {
|
|
|
94
94
|
|
|
95
95
|
<h5 className='mt-5'>Sélection Désactivée (isRowSelectable)</h5>
|
|
96
96
|
<p className="text-muted mb-4">Exemple avec des lignes spécifiques non sélectionnables (ici, seuls les ID impairs sont sélectionnables).</p>
|
|
97
|
-
<Table
|
|
98
|
-
rowData={dataSimple}
|
|
99
|
-
columnDefs={columnsSimple}
|
|
100
|
-
selectable={true}
|
|
101
|
-
isRowSelectable={(node) => node.data ? node.data.id % 2 !== 0 : false}
|
|
97
|
+
<Table
|
|
98
|
+
rowData={dataSimple}
|
|
99
|
+
columnDefs={columnsSimple}
|
|
100
|
+
selectable={true}
|
|
101
|
+
isRowSelectable={(node) => node.data ? node.data.id % 2 !== 0 : false}
|
|
102
102
|
/>
|
|
103
103
|
|
|
104
104
|
<h5 className='mt-5'>Avancé : Actions, Pagination et Redimensionnement</h5>
|
|
@@ -115,7 +115,7 @@ export const Tables = () => {
|
|
|
115
115
|
/>
|
|
116
116
|
|
|
117
117
|
<h5 className='mt-5'>Gestion des Statuts (Badges & Styles de lignes)</h5>
|
|
118
|
-
<Table rowData={dataStatus} columnDefs={columnsStatus} rowClassRules={rowClassRules} resizable rowHeight={50}/>
|
|
118
|
+
<Table rowData={dataStatus} columnDefs={columnsStatus} rowClassRules={rowClassRules} resizable rowHeight={50} />
|
|
119
119
|
|
|
120
120
|
<h5 className='mt-5'>Chargement Infini (DummyJSON)</h5>
|
|
121
121
|
<p className="text-muted mb-4">Récupère les données au fur et à mesure du défilement ou de la pagination. Supporte aussi la recherche et le tri serveur.</p>
|
|
@@ -147,6 +147,12 @@ export const Tables = () => {
|
|
|
147
147
|
onGridReady={(params) => setGridApi(params.api)}
|
|
148
148
|
sortable
|
|
149
149
|
/>
|
|
150
|
+
<h5 className='mt-5'>autoHeight désactivé (hauteur fixe via le conteneur)</h5>
|
|
151
|
+
<p className="text-muted small">Passer <code>autoHeight={'{null}'}</code> pour que le tableau ne s'adapte pas à son contenu — utile dans un conteneur de hauteur fixe.</p>
|
|
152
|
+
<div style={{ height: 300 }}>
|
|
153
|
+
<Table rowData={dataAdvanced} columnDefs={columnsAdvanced} autoHeight={null} />
|
|
154
|
+
</div>
|
|
155
|
+
|
|
150
156
|
<h5 className='mt-5'>Exemple sans données (Simple)</h5>
|
|
151
157
|
<Table rowData={[]} columnDefs={columnsSimple} />
|
|
152
158
|
|
package/dist/templates/index.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,108 +1,112 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
2
|
+
"name": "zuii",
|
|
3
|
+
"version": "1.5.3",
|
|
4
|
+
"description": "Bibliothèque de composants UI légère, intuitive et modulaire pour les interfaces web modernes.",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"repository": {
|
|
7
|
+
"type": "git",
|
|
8
|
+
"url": "git+https://github.com/vincentm498/zuii.git"
|
|
9
|
+
},
|
|
10
|
+
"bugs": {
|
|
11
|
+
"url": "https://github.com/vincentm498/zuii/issues"
|
|
12
|
+
},
|
|
13
|
+
"homepage": "https://github.com/vincentm498/zuii#readme",
|
|
14
|
+
"main": "./dist/index.js",
|
|
15
|
+
"module": "./dist/index.js",
|
|
16
|
+
"types": "./dist/index.d.ts",
|
|
17
|
+
"files": [
|
|
18
|
+
"dist",
|
|
19
|
+
"scripts/tokens"
|
|
20
|
+
],
|
|
21
|
+
"exports": {
|
|
22
|
+
".": {
|
|
23
|
+
"import": "./dist/index.js",
|
|
24
|
+
"types": "./dist/index.d.ts"
|
|
25
|
+
},
|
|
26
|
+
"./templates": {
|
|
27
|
+
"import": "./dist/templates/index.ts",
|
|
28
|
+
"types": "./dist/templates/index.d.ts"
|
|
29
|
+
},
|
|
30
|
+
"./core/*": "./dist/core/*"
|
|
31
|
+
},
|
|
32
|
+
"bin": {
|
|
33
|
+
"zuii-tokens": "./scripts/tokens/build.js"
|
|
34
|
+
},
|
|
35
|
+
"keywords": [],
|
|
36
|
+
"author": "Vincent Moreau",
|
|
37
|
+
"license": "MIT",
|
|
38
|
+
"peerDependencies": {
|
|
39
|
+
"react": ">=16.8.0",
|
|
40
|
+
"react-dom": ">=16.8.0",
|
|
41
|
+
"react-router-dom": "^7.13.0"
|
|
42
|
+
},
|
|
43
|
+
"publishConfig": {
|
|
44
|
+
"access": "public",
|
|
45
|
+
"registry": "https://registry.npmjs.org/"
|
|
46
|
+
},
|
|
47
|
+
"dependencies": {
|
|
48
|
+
"@ag-grid-community/locale": "^35.0.1",
|
|
49
|
+
"@simonwep/pickr": "^1.9.1",
|
|
50
|
+
"@splidejs/react-splide": "^0.7.12",
|
|
51
|
+
"@splidejs/splide": "^4.1.4",
|
|
52
|
+
"@uppy/compressor": "^3.1.0",
|
|
53
|
+
"@uppy/core": "^5.2.0",
|
|
54
|
+
"@uppy/dashboard": "^5.1.1",
|
|
55
|
+
"@uppy/image-editor": "^4.2.0",
|
|
56
|
+
"@uppy/locales": "^5.1.1",
|
|
57
|
+
"@uppy/react": "^5.2.0",
|
|
58
|
+
"@uppy/webcam": "^5.1.0",
|
|
59
|
+
"ag-grid-community": "^35.0.1",
|
|
60
|
+
"ag-grid-react": "^35.0.1",
|
|
61
|
+
"apca-w3": "^0.1.9",
|
|
62
|
+
"bootstrap": "^5.3.8",
|
|
63
|
+
"choices.js": "^11.1.0",
|
|
64
|
+
"colord": "^2.9.3",
|
|
65
|
+
"flag-icons": "^7.5.0",
|
|
66
|
+
"flatpickr": "^4.6.13",
|
|
67
|
+
"intl-tel-input": "^26.1.1",
|
|
68
|
+
"lucide-static": "^0.563.0",
|
|
69
|
+
"react-bootstrap": "^2.10.10",
|
|
70
|
+
"sass-embedded": "^1.97.3",
|
|
71
|
+
"style-dictionary": "^4.2.0",
|
|
72
|
+
"sweetalert2": "^11.26.18",
|
|
73
|
+
"sweetalert2-react-content": "^5.1.1",
|
|
74
|
+
"vanilla-cookieconsent": "^3.1.0"
|
|
75
|
+
},
|
|
76
|
+
"devDependencies": {
|
|
77
|
+
"@changesets/cli": "^2.30.0",
|
|
78
|
+
"@semantic-release/changelog": "^6.0.3",
|
|
79
|
+
"@semantic-release/git": "^10.0.1",
|
|
80
|
+
"@semantic-release/github": "^12.0.2",
|
|
81
|
+
"@semantic-release/npm": "^13.1.3",
|
|
82
|
+
"@types/intl-tel-input": "^18.1.4",
|
|
83
|
+
"@types/node": "^25.1.0",
|
|
84
|
+
"@types/react": "^19.2.10",
|
|
85
|
+
"@types/react-dom": "^19.2.3",
|
|
86
|
+
"@types/react-router-dom": "^5.3.3",
|
|
87
|
+
"@vitejs/plugin-react": "^5.1.2",
|
|
88
|
+
"esbuild": "^0.27.4",
|
|
89
|
+
"esbuild-sass-plugin": "^3.7.0",
|
|
90
|
+
"react": "^19.2.4",
|
|
91
|
+
"react-dom": "^19.2.4",
|
|
92
|
+
"sass": "^1.97.3",
|
|
93
|
+
"semantic-release": "^25.0.2",
|
|
94
|
+
"tsup": "^8.5.1",
|
|
95
|
+
"typescript": "^5.9.3",
|
|
96
|
+
"vite": "^7.3.1",
|
|
97
|
+
"vite-plugin-dts": "^4.5.4",
|
|
98
|
+
"vite-plugin-lib-inject-css": "^2.2.2",
|
|
99
|
+
"@zuii/cookie-consent": "0.3.0",
|
|
100
|
+
"@zuii/core": "0.3.0"
|
|
101
|
+
},
|
|
102
|
+
"scripts": {
|
|
103
|
+
"dev": "vite",
|
|
104
|
+
"prebuild": "pnpm run tokens:build",
|
|
105
|
+
"build:packages": "pnpm --filter \"@zuii/*\" --parallel run build",
|
|
106
|
+
"build": "vite build",
|
|
107
|
+
"postbuild": "mkdir -p dist/core/styles && cp packages/core/src/styles/_tokens.scss packages/core/src/styles/tokens.css packages/core/src/styles/tokens.ts dist/core/styles/ && cp -r src/templates dist/",
|
|
108
|
+
"preview": "vite preview",
|
|
109
|
+
"tokens:build": "node scripts/tokens/build.js --output packages/core/src/styles",
|
|
110
|
+
"component:create": "node scripts/create-component.js"
|
|
111
|
+
}
|
|
112
|
+
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer components{.cookie-consent,.cookie-consent__preferences{--cookie-consent-bg-color: var(--secondary, var(--secondary-500, #646464));--cookie-consent-text-color: var(--white, #FFF);--cookie-consent-radius: var(--radius-base, 0);--cookie-consent-padding-y: var(--spacing-sm, .5rem);--cookie-consent-padding-x: var(--spacing-sm, .5rem);--cookie-consent-footer-bg-color: var(--white, #FFF);--cookie-consent-footer-text-color: var(--secondary, var(--secondary-500, #646464));--cookie-consent-accordion-bg-color: var(--primary, var(--primary-500, #646464));--cookie-consent-accordion-text-color: var(--secondary, var(--secondary-500, #646464));border-radius:var(--cookie-consent-radius);background-color:var(--cookie-consent-bg-color);color:var(--cookie-consent-text-color)}.cookie-consent--button{border-radius:var(--cookie-consent-radius);margin-top:0;color:var(--cookie-consent-text-color)}.cookie-consent--button[data-role=all],.cookie-consent--button[data-role=necessary]{border-color:transparent}.cookie-consent--button.button--close{padding:0}.cookie-consent--button.button--close svg{stroke:var(--cookie-consent-text-color)}.cookie-consent__body,.cookie-consent__preferences{padding:var(--cookie-consent-padding-y) var(--cookie-consent-padding-x)}.cookie-consent__preferences{padding:1rem}.cookie-consent__title{margin:0}.cookie-consent__footer{background-color:var(--cookie-consent-footer-bg-color);color:var(--cookie-consent-footer-text-color)}.cookie-consent__footer .cookie-consent__link{color:var(--cookie-consent-footer-text-color)}.cookie-consent__description{color:var(--cookie-consent-text-color)}.cookie-consent-accordion--button,.cookie-consent-accordion--content{border-radius:var(--cookie-consent-radius)}.cookie-consent-accordion--button{background:var(--cookie-consent-accordion-bg-color);color:var(--cookie-consent-accordion-text-color)}.cookie-consent--toggle input[type=checkbox],.cookie-consent--toggle input[type=checkbox]:checked{background:transparent;max-width:0;min-width:0;width:0;height:0;border-color:transparent}.cookie-consent--toggle:has(input[type=checkbox]:checked) .toggle__icon{background:var(--cookie-consent-bg-color)}.cookie-consent--toggle:has(input[type=checkbox]) .toggle__icon{background:color-mix(in srgb,var(--cookie-consent-bg-color),transparent 70%);box-shadow:0 0 0 1px color-mix(in srgb,var(--cookie-consent-bg-color),transparent 70%)}.cookie-consent--accordion .pm__section-arrow,.cookie-consent__preferences .pm__section:hover{background:transparent}.cookie-consent__header{border-bottom:1px solid color-mix(in srgb,var(--cookie-consent-bg-color),white 30%)}.cookie-consent__preferences__footer{border-top:1px solid color-mix(in srgb,var(--cookie-consent-bg-color),white 30%)}}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
const f = ({
|
|
2
|
-
name: c,
|
|
3
|
-
selector: i,
|
|
4
|
-
classPrefix: n = "",
|
|
5
|
-
targetBody: a = !1
|
|
6
|
-
}) => {
|
|
7
|
-
if (!c)
|
|
8
|
-
throw new Error("Name is required");
|
|
9
|
-
if (!i)
|
|
10
|
-
throw new Error("Selector is required");
|
|
11
|
-
const s = n ? `${n}-${c}` : c, l = (e, t) => {
|
|
12
|
-
const o = t.replace(/^[.#]/, "").trim(), r = o ? `${s}__${o}` : s;
|
|
13
|
-
e.classList.contains(r) || e.classList.add(r);
|
|
14
|
-
};
|
|
15
|
-
a && (document.body.classList.contains(s) || document.body.classList.add(s)), i.split(",").forEach((e) => {
|
|
16
|
-
const t = e.trim();
|
|
17
|
-
if (!t) return;
|
|
18
|
-
document.querySelectorAll(t).forEach((r) => l(r, t));
|
|
19
|
-
});
|
|
20
|
-
};
|
|
21
|
-
export {
|
|
22
|
-
f as injectDynamicPageClass
|
|
23
|
-
};
|