Compare commits
6 Commits
51a522eafc
...
dev
| Author | SHA1 | Date | |
|---|---|---|---|
|
3bc1149f05 | ||
|
|
4685e39985 | ||
|
|
b6d6c02d0a | ||
|
|
cf59438c25 | ||
|
|
845a9509b7 | ||
|
|
8ed48a6cd3 |
1
app.json
1
app.json
@@ -21,7 +21,6 @@
|
|||||||
"package": "com.anonymous.bahla"
|
"package": "com.anonymous.bahla"
|
||||||
},
|
},
|
||||||
"web": {
|
"web": {
|
||||||
"bundler": "metro",
|
|
||||||
"output": "static",
|
"output": "static",
|
||||||
"favicon": "./assets/images/favicon.png"
|
"favicon": "./assets/images/favicon.png"
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -1,9 +0,0 @@
|
|||||||
module.exports = function (api) {
|
|
||||||
api.cache(true);
|
|
||||||
return {
|
|
||||||
presets: [
|
|
||||||
["babel-preset-expo", { jsxImportSource: "nativewind" }],
|
|
||||||
"nativewind/babel",
|
|
||||||
],
|
|
||||||
};
|
|
||||||
};
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
// Learn more https://docs.expo.io/guides/customizing-metro
|
|
||||||
const { getDefaultConfig } = require('expo/metro-config');
|
|
||||||
const { withNativeWind } = require('nativewind/metro');
|
|
||||||
|
|
||||||
/** @type {import('expo/metro-config').MetroConfig} */
|
|
||||||
const config = getDefaultConfig(__dirname);
|
|
||||||
|
|
||||||
module.exports = withNativeWind(config, { input: './src/global.css' })
|
|
||||||
1
nativewind-env.d.ts
vendored
1
nativewind-env.d.ts
vendored
@@ -1 +0,0 @@
|
|||||||
/// <reference types="nativewind/types" />
|
|
||||||
608
output.css
608
output.css
@@ -1,608 +0,0 @@
|
|||||||
*, ::before, ::after {
|
|
||||||
--tw-border-spacing-x: 0;
|
|
||||||
--tw-border-spacing-y: 0;
|
|
||||||
--tw-translate-x: 0;
|
|
||||||
--tw-translate-y: 0;
|
|
||||||
--tw-rotate: 0;
|
|
||||||
--tw-skew-x: 0;
|
|
||||||
--tw-skew-y: 0;
|
|
||||||
--tw-scale-x: 1;
|
|
||||||
--tw-scale-y: 1;
|
|
||||||
--tw-pan-x: ;
|
|
||||||
--tw-pan-y: ;
|
|
||||||
--tw-pinch-zoom: ;
|
|
||||||
--tw-scroll-snap-strictness: proximity;
|
|
||||||
--tw-gradient-from-position: ;
|
|
||||||
--tw-gradient-via-position: ;
|
|
||||||
--tw-gradient-to-position: ;
|
|
||||||
--tw-ordinal: ;
|
|
||||||
--tw-slashed-zero: ;
|
|
||||||
--tw-numeric-figure: ;
|
|
||||||
--tw-numeric-spacing: ;
|
|
||||||
--tw-numeric-fraction: ;
|
|
||||||
--tw-ring-inset: ;
|
|
||||||
--tw-ring-offset-width: 0px;
|
|
||||||
--tw-ring-offset-color: #fff;
|
|
||||||
--tw-ring-color: rgb(59 130 246 / 0.5);
|
|
||||||
--tw-ring-offset-shadow: 0 0 #0000;
|
|
||||||
--tw-ring-shadow: 0 0 #0000;
|
|
||||||
--tw-shadow: 0 0 #0000;
|
|
||||||
--tw-shadow-colored: 0 0 #0000;
|
|
||||||
--tw-blur: ;
|
|
||||||
--tw-brightness: ;
|
|
||||||
--tw-contrast: ;
|
|
||||||
--tw-grayscale: ;
|
|
||||||
--tw-hue-rotate: ;
|
|
||||||
--tw-invert: ;
|
|
||||||
--tw-saturate: ;
|
|
||||||
--tw-sepia: ;
|
|
||||||
--tw-drop-shadow: ;
|
|
||||||
--tw-backdrop-blur: ;
|
|
||||||
--tw-backdrop-brightness: ;
|
|
||||||
--tw-backdrop-contrast: ;
|
|
||||||
--tw-backdrop-grayscale: ;
|
|
||||||
--tw-backdrop-hue-rotate: ;
|
|
||||||
--tw-backdrop-invert: ;
|
|
||||||
--tw-backdrop-opacity: ;
|
|
||||||
--tw-backdrop-saturate: ;
|
|
||||||
--tw-backdrop-sepia: ;
|
|
||||||
--tw-contain-size: ;
|
|
||||||
--tw-contain-layout: ;
|
|
||||||
--tw-contain-paint: ;
|
|
||||||
--tw-contain-style: ;
|
|
||||||
}
|
|
||||||
|
|
||||||
::backdrop {
|
|
||||||
--tw-border-spacing-x: 0;
|
|
||||||
--tw-border-spacing-y: 0;
|
|
||||||
--tw-translate-x: 0;
|
|
||||||
--tw-translate-y: 0;
|
|
||||||
--tw-rotate: 0;
|
|
||||||
--tw-skew-x: 0;
|
|
||||||
--tw-skew-y: 0;
|
|
||||||
--tw-scale-x: 1;
|
|
||||||
--tw-scale-y: 1;
|
|
||||||
--tw-pan-x: ;
|
|
||||||
--tw-pan-y: ;
|
|
||||||
--tw-pinch-zoom: ;
|
|
||||||
--tw-scroll-snap-strictness: proximity;
|
|
||||||
--tw-gradient-from-position: ;
|
|
||||||
--tw-gradient-via-position: ;
|
|
||||||
--tw-gradient-to-position: ;
|
|
||||||
--tw-ordinal: ;
|
|
||||||
--tw-slashed-zero: ;
|
|
||||||
--tw-numeric-figure: ;
|
|
||||||
--tw-numeric-spacing: ;
|
|
||||||
--tw-numeric-fraction: ;
|
|
||||||
--tw-ring-inset: ;
|
|
||||||
--tw-ring-offset-width: 0px;
|
|
||||||
--tw-ring-offset-color: #fff;
|
|
||||||
--tw-ring-color: rgb(59 130 246 / 0.5);
|
|
||||||
--tw-ring-offset-shadow: 0 0 #0000;
|
|
||||||
--tw-ring-shadow: 0 0 #0000;
|
|
||||||
--tw-shadow: 0 0 #0000;
|
|
||||||
--tw-shadow-colored: 0 0 #0000;
|
|
||||||
--tw-blur: ;
|
|
||||||
--tw-brightness: ;
|
|
||||||
--tw-contrast: ;
|
|
||||||
--tw-grayscale: ;
|
|
||||||
--tw-hue-rotate: ;
|
|
||||||
--tw-invert: ;
|
|
||||||
--tw-saturate: ;
|
|
||||||
--tw-sepia: ;
|
|
||||||
--tw-drop-shadow: ;
|
|
||||||
--tw-backdrop-blur: ;
|
|
||||||
--tw-backdrop-brightness: ;
|
|
||||||
--tw-backdrop-contrast: ;
|
|
||||||
--tw-backdrop-grayscale: ;
|
|
||||||
--tw-backdrop-hue-rotate: ;
|
|
||||||
--tw-backdrop-invert: ;
|
|
||||||
--tw-backdrop-opacity: ;
|
|
||||||
--tw-backdrop-saturate: ;
|
|
||||||
--tw-backdrop-sepia: ;
|
|
||||||
--tw-contain-size: ;
|
|
||||||
--tw-contain-layout: ;
|
|
||||||
--tw-contain-paint: ;
|
|
||||||
--tw-contain-style: ;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*
|
|
||||||
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
|
|
||||||
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
|
|
||||||
*/
|
|
||||||
|
|
||||||
*,
|
|
||||||
::before,
|
|
||||||
::after {
|
|
||||||
box-sizing: border-box;
|
|
||||||
/* 1 */
|
|
||||||
border-width: 0;
|
|
||||||
/* 2 */
|
|
||||||
border-style: solid;
|
|
||||||
/* 2 */
|
|
||||||
border-color: #e5e7eb;
|
|
||||||
/* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
::before,
|
|
||||||
::after {
|
|
||||||
--tw-content: '';
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
1. Use a consistent sensible line-height in all browsers.
|
|
||||||
2. Prevent adjustments of font size after orientation changes in iOS.
|
|
||||||
3. Use a more readable tab size.
|
|
||||||
4. Use the user's configured `sans` font-family by default.
|
|
||||||
5. Use the user's configured `sans` font-feature-settings by default.
|
|
||||||
6. Use the user's configured `sans` font-variation-settings by default.
|
|
||||||
7. Disable tap highlights on iOS
|
|
||||||
*/
|
|
||||||
|
|
||||||
html,
|
|
||||||
:host {
|
|
||||||
line-height: 1.5;
|
|
||||||
/* 1 */
|
|
||||||
-webkit-text-size-adjust: 100%;
|
|
||||||
/* 2 */
|
|
||||||
-moz-tab-size: 4;
|
|
||||||
/* 3 */
|
|
||||||
-o-tab-size: 4;
|
|
||||||
tab-size: 4;
|
|
||||||
/* 3 */
|
|
||||||
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
||||||
/* 4 */
|
|
||||||
font-feature-settings: normal;
|
|
||||||
/* 5 */
|
|
||||||
font-variation-settings: normal;
|
|
||||||
/* 6 */
|
|
||||||
-webkit-tap-highlight-color: transparent;
|
|
||||||
/* 7 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
1. Remove the margin in all browsers.
|
|
||||||
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
|
|
||||||
*/
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
/* 1 */
|
|
||||||
line-height: inherit;
|
|
||||||
/* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
1. Add the correct height in Firefox.
|
|
||||||
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
|
|
||||||
3. Ensure horizontal rules are visible by default.
|
|
||||||
*/
|
|
||||||
|
|
||||||
hr {
|
|
||||||
height: 0;
|
|
||||||
/* 1 */
|
|
||||||
color: inherit;
|
|
||||||
/* 2 */
|
|
||||||
border-top-width: 1px;
|
|
||||||
/* 3 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Add the correct text decoration in Chrome, Edge, and Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
abbr:where([title]) {
|
|
||||||
-webkit-text-decoration: underline dotted;
|
|
||||||
text-decoration: underline dotted;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Remove the default font size and weight for headings.
|
|
||||||
*/
|
|
||||||
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6 {
|
|
||||||
font-size: inherit;
|
|
||||||
font-weight: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Reset links to optimize for opt-in styling instead of opt-out.
|
|
||||||
*/
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: inherit;
|
|
||||||
text-decoration: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Add the correct font weight in Edge and Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
b,
|
|
||||||
strong {
|
|
||||||
font-weight: bolder;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
1. Use the user's configured `mono` font-family by default.
|
|
||||||
2. Use the user's configured `mono` font-feature-settings by default.
|
|
||||||
3. Use the user's configured `mono` font-variation-settings by default.
|
|
||||||
4. Correct the odd `em` font sizing in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
code,
|
|
||||||
kbd,
|
|
||||||
samp,
|
|
||||||
pre {
|
|
||||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
||||||
/* 1 */
|
|
||||||
font-feature-settings: normal;
|
|
||||||
/* 2 */
|
|
||||||
font-variation-settings: normal;
|
|
||||||
/* 3 */
|
|
||||||
font-size: 1em;
|
|
||||||
/* 4 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Add the correct font size in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
small {
|
|
||||||
font-size: 80%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
sub,
|
|
||||||
sup {
|
|
||||||
font-size: 75%;
|
|
||||||
line-height: 0;
|
|
||||||
position: relative;
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
sub {
|
|
||||||
bottom: -0.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
sup {
|
|
||||||
top: -0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
|
|
||||||
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
|
|
||||||
3. Remove gaps between table borders by default.
|
|
||||||
*/
|
|
||||||
|
|
||||||
table {
|
|
||||||
text-indent: 0;
|
|
||||||
/* 1 */
|
|
||||||
border-color: inherit;
|
|
||||||
/* 2 */
|
|
||||||
border-collapse: collapse;
|
|
||||||
/* 3 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
1. Change the font styles in all browsers.
|
|
||||||
2. Remove the margin in Firefox and Safari.
|
|
||||||
3. Remove default padding in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button,
|
|
||||||
input,
|
|
||||||
optgroup,
|
|
||||||
select,
|
|
||||||
textarea {
|
|
||||||
font-family: inherit;
|
|
||||||
/* 1 */
|
|
||||||
font-feature-settings: inherit;
|
|
||||||
/* 1 */
|
|
||||||
font-variation-settings: inherit;
|
|
||||||
/* 1 */
|
|
||||||
font-size: 100%;
|
|
||||||
/* 1 */
|
|
||||||
font-weight: inherit;
|
|
||||||
/* 1 */
|
|
||||||
line-height: inherit;
|
|
||||||
/* 1 */
|
|
||||||
letter-spacing: inherit;
|
|
||||||
/* 1 */
|
|
||||||
color: inherit;
|
|
||||||
/* 1 */
|
|
||||||
margin: 0;
|
|
||||||
/* 2 */
|
|
||||||
padding: 0;
|
|
||||||
/* 3 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Remove the inheritance of text transform in Edge and Firefox.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button,
|
|
||||||
select {
|
|
||||||
text-transform: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
1. Correct the inability to style clickable types in iOS and Safari.
|
|
||||||
2. Remove default button styles.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button,
|
|
||||||
input:where([type='button']),
|
|
||||||
input:where([type='reset']),
|
|
||||||
input:where([type='submit']) {
|
|
||||||
-webkit-appearance: button;
|
|
||||||
/* 1 */
|
|
||||||
background-color: transparent;
|
|
||||||
/* 2 */
|
|
||||||
background-image: none;
|
|
||||||
/* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Use the modern Firefox focus style for all focusable elements.
|
|
||||||
*/
|
|
||||||
|
|
||||||
:-moz-focusring {
|
|
||||||
outline: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
|
|
||||||
*/
|
|
||||||
|
|
||||||
:-moz-ui-invalid {
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Add the correct vertical alignment in Chrome and Firefox.
|
|
||||||
*/
|
|
||||||
|
|
||||||
progress {
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Correct the cursor style of increment and decrement buttons in Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
::-webkit-inner-spin-button,
|
|
||||||
::-webkit-outer-spin-button {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
1. Correct the odd appearance in Chrome and Safari.
|
|
||||||
2. Correct the outline style in Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
[type='search'] {
|
|
||||||
-webkit-appearance: textfield;
|
|
||||||
/* 1 */
|
|
||||||
outline-offset: -2px;
|
|
||||||
/* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Remove the inner padding in Chrome and Safari on macOS.
|
|
||||||
*/
|
|
||||||
|
|
||||||
::-webkit-search-decoration {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
1. Correct the inability to style clickable types in iOS and Safari.
|
|
||||||
2. Change font properties to `inherit` in Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
::-webkit-file-upload-button {
|
|
||||||
-webkit-appearance: button;
|
|
||||||
/* 1 */
|
|
||||||
font: inherit;
|
|
||||||
/* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Add the correct display in Chrome and Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
summary {
|
|
||||||
display: list-item;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Removes the default spacing and border for appropriate elements.
|
|
||||||
*/
|
|
||||||
|
|
||||||
blockquote,
|
|
||||||
dl,
|
|
||||||
dd,
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6,
|
|
||||||
hr,
|
|
||||||
figure,
|
|
||||||
p,
|
|
||||||
pre {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
fieldset {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
legend {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
ol,
|
|
||||||
ul,
|
|
||||||
menu {
|
|
||||||
list-style: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Reset default styling for dialogs.
|
|
||||||
*/
|
|
||||||
|
|
||||||
dialog {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Prevent resizing textareas horizontally by default.
|
|
||||||
*/
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
resize: vertical;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
|
|
||||||
2. Set the default placeholder color to the user's configured gray 400 color.
|
|
||||||
*/
|
|
||||||
|
|
||||||
input::-moz-placeholder, textarea::-moz-placeholder {
|
|
||||||
opacity: 1;
|
|
||||||
/* 1 */
|
|
||||||
color: #9ca3af;
|
|
||||||
/* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
input::placeholder,
|
|
||||||
textarea::placeholder {
|
|
||||||
opacity: 1;
|
|
||||||
/* 1 */
|
|
||||||
color: #9ca3af;
|
|
||||||
/* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Set the default cursor for buttons.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button,
|
|
||||||
[role="button"] {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Make sure disabled buttons don't get the pointer cursor.
|
|
||||||
*/
|
|
||||||
|
|
||||||
:disabled {
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
|
|
||||||
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
|
|
||||||
This can trigger a poorly considered lint error in some tools but is included by design.
|
|
||||||
*/
|
|
||||||
|
|
||||||
img,
|
|
||||||
svg,
|
|
||||||
video,
|
|
||||||
canvas,
|
|
||||||
audio,
|
|
||||||
iframe,
|
|
||||||
embed,
|
|
||||||
object {
|
|
||||||
display: block;
|
|
||||||
/* 1 */
|
|
||||||
vertical-align: middle;
|
|
||||||
/* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
|
|
||||||
*/
|
|
||||||
|
|
||||||
img,
|
|
||||||
video {
|
|
||||||
max-width: 100%;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Make elements with the HTML hidden attribute stay hidden by default */
|
|
||||||
|
|
||||||
[hidden]:where(:not([hidden="until-found"])) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--css-interop-darkMode: media;
|
|
||||||
--css-interop: true;
|
|
||||||
--css-interop-nativewind: true;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 640px) {
|
|
||||||
.container {
|
|
||||||
max-width: 640px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.container {
|
|
||||||
max-width: 768px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1024px) {
|
|
||||||
.container {
|
|
||||||
max-width: 1024px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1280px) {
|
|
||||||
.container {
|
|
||||||
max-width: 1280px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1536px) {
|
|
||||||
.container {
|
|
||||||
max-width: 1536px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-blue-500 {
|
|
||||||
--tw-bg-opacity: 1;
|
|
||||||
background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
|
|
||||||
}
|
|
||||||
|
|
||||||
.font-bold {
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
@@ -10,7 +10,6 @@
|
|||||||
"@react-navigation/bottom-tabs": "^7.18.18",
|
"@react-navigation/bottom-tabs": "^7.18.18",
|
||||||
"@tanstack/react-query": "^5.102.8",
|
"@tanstack/react-query": "^5.102.8",
|
||||||
"axios": "^1.20.0",
|
"axios": "^1.20.0",
|
||||||
"babel-preset-expo": "^57.0.9",
|
|
||||||
"expo": "~56.0.5",
|
"expo": "~56.0.5",
|
||||||
"expo-blur": "~56.0.4",
|
"expo-blur": "~56.0.4",
|
||||||
"expo-constants": "~56.0.16",
|
"expo-constants": "~56.0.16",
|
||||||
@@ -31,8 +30,6 @@
|
|||||||
"expo-web-browser": "~56.0.5",
|
"expo-web-browser": "~56.0.5",
|
||||||
"lucide-react": "^1.38.0",
|
"lucide-react": "^1.38.0",
|
||||||
"lucide-react-native": "^1.38.0",
|
"lucide-react-native": "^1.38.0",
|
||||||
"nativewind": "^4.2.6",
|
|
||||||
"prettier-plugin-tailwindcss": "^0.5.14",
|
|
||||||
"react": "19.2.3",
|
"react": "19.2.3",
|
||||||
"react-dom": "19.2.3",
|
"react-dom": "19.2.3",
|
||||||
"react-native": "0.85.3",
|
"react-native": "0.85.3",
|
||||||
@@ -43,7 +40,6 @@
|
|||||||
"react-native-svg": "15.15.4",
|
"react-native-svg": "15.15.4",
|
||||||
"react-native-web": "~0.21.0",
|
"react-native-web": "~0.21.0",
|
||||||
"react-native-worklets": "0.8.3",
|
"react-native-worklets": "0.8.3",
|
||||||
"tailwindcss": "^3.4.19",
|
|
||||||
"zod": "^4.5.4",
|
"zod": "^4.5.4",
|
||||||
"zustand": "^5.0.15"
|
"zustand": "^5.0.15"
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -1,14 +1,38 @@
|
|||||||
|
import { useRouter } from 'expo-router';
|
||||||
import { StyleSheet, Text, View } from 'react-native';
|
import { StyleSheet, Text, View } from 'react-native';
|
||||||
|
|
||||||
|
import { Button } from '@/components/Button';
|
||||||
import { colors } from '@/theme/colors';
|
import { colors } from '@/theme/colors';
|
||||||
import { spacing } from '@/theme/spacing';
|
import { spacing } from '@/theme/spacing';
|
||||||
import { typography } from '@/theme/typography';
|
import { typography } from '@/theme/typography';
|
||||||
|
|
||||||
export default function HomeTabScreen() {
|
export default function HomeTabScreen() {
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
<Text style={styles.title}>Accueil</Text>
|
<Text style={styles.title}>Accueil</Text>
|
||||||
<Text style={styles.description}>Base ecran accueil tab</Text>
|
<Text style={styles.description}>Base ecran accueil tab</Text>
|
||||||
|
<View style={styles.actions}>
|
||||||
|
<Button
|
||||||
|
label="Voir la démo des inputs"
|
||||||
|
variant="secondary"
|
||||||
|
onPress={() => router.push('/index-old')}
|
||||||
|
accessibilityLabel="Ouvrir la page d'exemple des champs"
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
label="Voir la démo du switch"
|
||||||
|
variant="secondary"
|
||||||
|
onPress={() => router.push('/switch-demo')}
|
||||||
|
accessibilityLabel="Ouvrir la page de démonstration du switch"
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
label="Voir la démo des cards"
|
||||||
|
variant="secondary"
|
||||||
|
onPress={() => router.push('/card-demo')}
|
||||||
|
accessibilityLabel="Ouvrir la page de présentation des cards"
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -29,4 +53,8 @@ const styles = StyleSheet.create({
|
|||||||
...typography.body,
|
...typography.body,
|
||||||
color: colors.textSecondary,
|
color: colors.textSecondary,
|
||||||
},
|
},
|
||||||
|
actions: {
|
||||||
|
marginTop: spacing[16],
|
||||||
|
gap: spacing[8],
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,15 +1,22 @@
|
|||||||
import { StyleSheet, Text, View } from 'react-native';
|
import { StyleSheet, Text, View } from 'react-native';
|
||||||
|
|
||||||
|
import { Header } from '@/components/ui/Header';
|
||||||
|
import { Screen } from '@/components/ui/Screen';
|
||||||
|
|
||||||
import { colors } from '@/theme/colors';
|
import { colors } from '@/theme/colors';
|
||||||
import { spacing } from '@/theme/spacing';
|
import { spacing } from '@/theme/spacing';
|
||||||
import { typography } from '@/theme/typography';
|
import { typography } from '@/theme/typography';
|
||||||
|
|
||||||
export default function MyEventsTabScreen() {
|
export default function MyEventsTabScreen() {
|
||||||
return (
|
return (
|
||||||
|
<Screen>
|
||||||
|
<Header variant="large" overline="12 événements" title="Mes events" />
|
||||||
|
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
<Text style={styles.title}>My Events</Text>
|
<Text style={styles.title}>My Events</Text>
|
||||||
<Text style={styles.description}>Base ecran mes events</Text>
|
<Text style={styles.description}>Base ecran mes events</Text>
|
||||||
</View>
|
</View>
|
||||||
|
</Screen>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ import * as SplashScreen from 'expo-splash-screen';
|
|||||||
import * as SystemUI from 'expo-system-ui';
|
import * as SystemUI from 'expo-system-ui';
|
||||||
import { useEffect } from 'react';
|
import { useEffect } from 'react';
|
||||||
import { StatusBar } from 'react-native';
|
import { StatusBar } from 'react-native';
|
||||||
|
import { GestureHandlerRootView } from 'react-native-gesture-handler';
|
||||||
import { SafeAreaProvider } from 'react-native-safe-area-context';
|
import { SafeAreaProvider } from 'react-native-safe-area-context';
|
||||||
|
|
||||||
import { queryClient } from '../hooks/queryClient';
|
import { queryClient } from '../hooks/queryClient';
|
||||||
@@ -36,6 +37,7 @@ export default function RootLayout() {
|
|||||||
if (!ready) return null;
|
if (!ready) return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<GestureHandlerRootView style={{ flex: 1 }}>
|
||||||
<QueryClientProvider client={queryClient}>
|
<QueryClientProvider client={queryClient}>
|
||||||
<SafeAreaProvider>
|
<SafeAreaProvider>
|
||||||
<StatusBar
|
<StatusBar
|
||||||
@@ -47,12 +49,14 @@ export default function RootLayout() {
|
|||||||
<Stack.Screen name="(auth)" />
|
<Stack.Screen name="(auth)" />
|
||||||
<Stack.Screen name="(tabs)" />
|
<Stack.Screen name="(tabs)" />
|
||||||
<Stack.Screen name="(org)" />
|
<Stack.Screen name="(org)" />
|
||||||
|
<Stack.Screen name="switch-demo" />
|
||||||
|
<Stack.Screen name="card-demo" />
|
||||||
<Stack.Screen name="event/[id]" />
|
<Stack.Screen name="event/[id]" />
|
||||||
<Stack.Screen name="create/event" options={{ presentation: 'modal' }} />
|
<Stack.Screen name="create/event" options={{ presentation: 'modal' }} />
|
||||||
<Stack.Screen name="create/post" options={{ presentation: 'modal' }} />
|
<Stack.Screen name="create/post" options={{ presentation: 'modal' }} />
|
||||||
</Stack>
|
</Stack>
|
||||||
|
|
||||||
</SafeAreaProvider>
|
</SafeAreaProvider>
|
||||||
</QueryClientProvider>
|
</QueryClientProvider>
|
||||||
|
</GestureHandlerRootView>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
80
src/app/card-demo.tsx
Normal file
80
src/app/card-demo.tsx
Normal file
@@ -0,0 +1,80 @@
|
|||||||
|
import { StyleSheet, Text, View } from 'react-native';
|
||||||
|
|
||||||
|
import Card from '@/components/Card';
|
||||||
|
import { Screen } from '@/components/ui/Screen';
|
||||||
|
import { mockEvents } from '@/mocks';
|
||||||
|
import { colors } from '@/theme/colors';
|
||||||
|
import { spacing } from '@/theme/spacing';
|
||||||
|
import { typography } from '@/theme/typography';
|
||||||
|
|
||||||
|
const cardParticipants = [
|
||||||
|
{
|
||||||
|
id: 'lea',
|
||||||
|
source:
|
||||||
|
'https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=240&q=80',
|
||||||
|
name: 'Lea Martin',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'yanis',
|
||||||
|
source:
|
||||||
|
'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=240&q=80',
|
||||||
|
name: 'Yanis Belaid',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'omar',
|
||||||
|
source:
|
||||||
|
'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=240&q=80',
|
||||||
|
name: 'Omar Khelifi',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function CardDemoScreen() {
|
||||||
|
const demoEvent = mockEvents[0];
|
||||||
|
|
||||||
|
if (!demoEvent) {
|
||||||
|
return (
|
||||||
|
<Screen contentContainerStyle={styles.content}>
|
||||||
|
<Text style={styles.emptyState}>Aucun événement de démo disponible.</Text>
|
||||||
|
</Screen>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Screen contentContainerStyle={styles.content}>
|
||||||
|
<View style={styles.header}>
|
||||||
|
<Text style={styles.kicker}>DESIGN SYSTEM · CARD</Text>
|
||||||
|
<Text style={styles.title}>Page de présentation Card</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<Card
|
||||||
|
variant="hero"
|
||||||
|
event={demoEvent}
|
||||||
|
avatarStack={cardParticipants}
|
||||||
|
onPress={() => undefined}
|
||||||
|
/>
|
||||||
|
</Screen>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
content: {
|
||||||
|
gap: spacing[16],
|
||||||
|
paddingTop: spacing[24],
|
||||||
|
},
|
||||||
|
header: {
|
||||||
|
gap: spacing[8],
|
||||||
|
marginBottom: spacing[8],
|
||||||
|
},
|
||||||
|
kicker: {
|
||||||
|
...typography.sectionLabel,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
...typography.body,
|
||||||
|
color: colors.textPrimary,
|
||||||
|
},
|
||||||
|
emptyState: {
|
||||||
|
...typography.body,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -1,228 +1,144 @@
|
|||||||
import { ArrowUp, ArrowUpRight, Plus } from 'lucide-react-native';
|
import { Mail } from 'lucide-react-native';
|
||||||
import { useCallback, useMemo, useState } from 'react';
|
import { useMemo, useState } from 'react';
|
||||||
import { ScrollView, StyleSheet, Text, View } from 'react-native';
|
import { StyleSheet, Text, View } from 'react-native';
|
||||||
|
|
||||||
import { Badge } from '@/components/Badge';
|
import { FormField, Input, PasswordInput, SearchInput, TextArea } from '@/components/form';
|
||||||
import { Button } from '@/components/Button';
|
import { Screen } from '@/components/ui/Screen';
|
||||||
import { ParticipationSegment } from '@/components/ParticipationSegment';
|
|
||||||
import { ThemeChip } from '@/components/ThemeChip';
|
|
||||||
import { colors } from '@/theme/colors';
|
import { colors } from '@/theme/colors';
|
||||||
import { spacing } from '@/theme/spacing';
|
import { spacing } from '@/theme/spacing';
|
||||||
import { typography } from '@/theme/typography';
|
import { typography } from '@/theme/typography';
|
||||||
|
|
||||||
import '../global.css';
|
function computePasswordStrength(value: string): 0 | 1 | 2 | 3 {
|
||||||
|
if (!value) {
|
||||||
export default function Index() {
|
return 0;
|
||||||
const [selectedThemes, setSelectedThemes] = useState<string[]>(['Soirée', 'Techno', 'Festival']);
|
|
||||||
|
|
||||||
const themeOptions = useMemo(
|
|
||||||
() => ['Soirée', 'Techno', 'Festival', 'Fête de jeunesse', 'Concert', 'Bal', 'Afterwork', 'Gratuit'],
|
|
||||||
[],
|
|
||||||
);
|
|
||||||
|
|
||||||
const simulateSubmit = useCallback(async () => {
|
|
||||||
await new Promise<void>((resolve) => {
|
|
||||||
setTimeout(resolve, 1300);
|
|
||||||
});
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleThemeSelect = useCallback((value: string, nextSelected: boolean) => {
|
|
||||||
setSelectedThemes((prev) => {
|
|
||||||
if (nextSelected) {
|
|
||||||
if (prev.includes(value)) {
|
|
||||||
return prev;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return [...prev, value];
|
const hasLower = /[a-z]/.test(value);
|
||||||
|
const hasUpper = /[A-Z]/.test(value);
|
||||||
|
const hasNumber = /\d/.test(value);
|
||||||
|
const hasSpecial = /[^A-Za-z0-9]/.test(value);
|
||||||
|
|
||||||
|
const criteria = [hasLower, hasUpper, hasNumber, hasSpecial].filter(Boolean)
|
||||||
|
.length;
|
||||||
|
|
||||||
|
if (value.length < 6 || criteria <= 1) {
|
||||||
|
return 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
return prev.filter((theme) => theme !== value);
|
if (value.length >= 10 && criteria >= 3) {
|
||||||
});
|
return 3;
|
||||||
}, []);
|
}
|
||||||
|
|
||||||
|
return 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function InputExamplesScreen() {
|
||||||
|
const [email, setEmail] = useState('lea.mercier@example.ch');
|
||||||
|
const [password, setPassword] = useState('');
|
||||||
|
const [search, setSearch] = useState('néon');
|
||||||
|
const [debouncedSearch, setDebouncedSearch] = useState('néon');
|
||||||
|
const [description, setDescription] = useState('');
|
||||||
|
|
||||||
|
const emailError = useMemo(() => {
|
||||||
|
if (email.length === 0) {
|
||||||
|
return 'Adresse e-mail requise';
|
||||||
|
}
|
||||||
|
|
||||||
|
const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
|
||||||
|
return isValid ? undefined : 'Adresse e-mail invalide';
|
||||||
|
}, [email]);
|
||||||
|
|
||||||
|
const passwordStrength = useMemo(() => computePasswordStrength(password), [password]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={[styles.screen, { backgroundColor: colors.deepBackground }]}>
|
<Screen contentContainerStyle={styles.content}>
|
||||||
<ScrollView
|
<View style={styles.header}>
|
||||||
contentContainerStyle={[
|
<Text style={styles.kicker}>DESIGN SYSTEM · FORM INPUTS</Text>
|
||||||
styles.content,
|
<Text style={styles.title}>Page d'exemple des champs</Text>
|
||||||
{
|
</View>
|
||||||
padding: spacing[24],
|
|
||||||
gap: spacing[24],
|
<FormField
|
||||||
},
|
label="E-mail"
|
||||||
]}
|
required
|
||||||
showsVerticalScrollIndicator={false}
|
error={emailError}
|
||||||
|
counter={{ value: email.length, max: 120 }}
|
||||||
>
|
>
|
||||||
<View style={{ gap: spacing[8] }}>
|
<Input
|
||||||
<Text
|
accessibilityLabel="E-mail"
|
||||||
style={[
|
value={email}
|
||||||
typography.sectionLabel,
|
onChangeText={setEmail}
|
||||||
{
|
keyboardType="email-address"
|
||||||
color: colors.textSecondary,
|
autoCapitalize="none"
|
||||||
letterSpacing: 1.1,
|
autoCorrect={false}
|
||||||
},
|
state={emailError ? 'error' : 'default'}
|
||||||
]}
|
placeholder="lea.mercier@example.ch"
|
||||||
|
left={<Mail color={colors.textSecondary} size={20} />}
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
|
||||||
|
<FormField label="Mot de passe" helper="6 caractères minimum">
|
||||||
|
<PasswordInput
|
||||||
|
accessibilityLabel="Mot de passe"
|
||||||
|
value={password}
|
||||||
|
onChangeText={setPassword}
|
||||||
|
placeholder="••••••••"
|
||||||
|
strength={passwordStrength}
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
|
||||||
|
<FormField label="Recherche" helper={`Terme debouncé: ${debouncedSearch || '—'}`}>
|
||||||
|
<SearchInput
|
||||||
|
accessibilityLabel="Recherche"
|
||||||
|
value={search}
|
||||||
|
onChangeText={setSearch}
|
||||||
|
onDebouncedChange={setDebouncedSearch}
|
||||||
|
debounceMs={300}
|
||||||
|
placeholder="techno la chaux"
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
label="Description d'événement"
|
||||||
|
helper="Ajoute le contexte, l'entrée et les horaires"
|
||||||
|
counter={{ value: description.length, max: 280 }}
|
||||||
>
|
>
|
||||||
BOUTONS · HAUTEUR 52 PX · RAYON 14 PX
|
<TextArea
|
||||||
</Text>
|
accessibilityLabel="Description d'événement"
|
||||||
</View>
|
value={description}
|
||||||
|
onChangeText={setDescription}
|
||||||
<View style={styles.row}>
|
rows={4}
|
||||||
<View style={styles.cell}>
|
maxLength={280}
|
||||||
<Button label="Publier" variant="primary" />
|
placeholder="Il reste 40 places en prévente pour ce soir..."
|
||||||
<Text style={[styles.caption, typography.digits, { color: colors.textSecondary }]}>Primaire</Text>
|
|
||||||
</View>
|
|
||||||
<View style={styles.cell}>
|
|
||||||
<Button label="Publier" variant="primary" />
|
|
||||||
<Text style={[styles.caption, typography.digits, { color: colors.textSecondary }]}>Pressé (tap)</Text>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<View style={styles.row}>
|
|
||||||
<View style={styles.cell}>
|
|
||||||
<Button label="Intéressé" variant="secondary" rightIcon={ArrowUpRight} />
|
|
||||||
<Text style={[styles.caption, typography.digits, { color: colors.textSecondary }]}>Secondaire</Text>
|
|
||||||
</View>
|
|
||||||
<View style={styles.cell}>
|
|
||||||
<Button label="Publier" variant="primary" disabled />
|
|
||||||
<Text style={[styles.caption, typography.digits, { color: colors.textSecondary }]}>Désactivé</Text>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<View style={styles.row}>
|
|
||||||
<View style={styles.cell}>
|
|
||||||
<Button label="Tout voir" variant="ghost" fullWidth={false} style={styles.autoWidthButton} />
|
|
||||||
<Text style={[styles.caption, typography.digits, { color: colors.textSecondary }]}>Texte</Text>
|
|
||||||
</View>
|
|
||||||
<View style={styles.cell}>
|
|
||||||
<Button label="Envoyer" variant="primary" autoLoading loadingLabel="Envoi..." onPress={simulateSubmit} />
|
|
||||||
<Text style={[styles.caption, typography.digits, { color: colors.textSecondary }]}>Chargement</Text>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<View style={styles.row}>
|
|
||||||
<View style={styles.cell}>
|
|
||||||
<Button label="Supprimer" variant="destructive" />
|
|
||||||
<Text style={[styles.caption, typography.digits, { color: colors.textSecondary }]}>Destructif</Text>
|
|
||||||
</View>
|
|
||||||
<View style={styles.cell}>
|
|
||||||
<View style={styles.iconRow}>
|
|
||||||
<Button
|
|
||||||
iconOnly
|
|
||||||
variant="secondary"
|
|
||||||
fullWidth={false}
|
|
||||||
icon={ArrowUp}
|
|
||||||
iconOnlyShape="default"
|
|
||||||
accessibilityLabel="Partager"
|
|
||||||
/>
|
/>
|
||||||
<Button
|
</FormField>
|
||||||
iconOnly
|
|
||||||
variant="primary"
|
<FormField label="Champ désactivé" helper="Exemple d'état non éditable">
|
||||||
fullWidth={false}
|
<Input
|
||||||
icon={Plus}
|
accessibilityLabel="Champ désactivé"
|
||||||
iconOnlyShape="round"
|
editable={false}
|
||||||
accessibilityLabel="Ajouter"
|
value="Néon session"
|
||||||
|
onChangeText={() => undefined}
|
||||||
/>
|
/>
|
||||||
</View>
|
</FormField>
|
||||||
<Text style={[styles.caption, typography.digits, { color: colors.textSecondary }]}>Icône / FAB</Text>
|
</Screen>
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<View style={{ gap: spacing[12] }}>
|
|
||||||
<Text style={[typography.sectionLabel, { color: colors.textSecondary, letterSpacing: 1.1 }]}>PARTICIPATION</Text>
|
|
||||||
<View style={{ gap: spacing[12] }}>
|
|
||||||
<ParticipationSegment defaultValue={{ going: false, interested: false }} />
|
|
||||||
<ParticipationSegment defaultValue={{ going: true, interested: true }} />
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<View style={{ gap: spacing[12] }}>
|
|
||||||
<Text style={[typography.sectionLabel, { color: colors.textSecondary, letterSpacing: 1.1 }]}>BADGES</Text>
|
|
||||||
<View style={styles.badgeWrap}>
|
|
||||||
<Badge variant="verified" />
|
|
||||||
<Badge variant="free" />
|
|
||||||
<Badge variant="complete" />
|
|
||||||
<Badge variant="tonight" />
|
|
||||||
<Badge variant="pro" />
|
|
||||||
<Badge variant="draft" />
|
|
||||||
<Badge date={{ day: '04', month: 'sept' }} />
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<View style={{ gap: spacing[12] }}>
|
|
||||||
<Text style={[typography.sectionLabel, { color: colors.textSecondary, letterSpacing: 1.1 }]}>CHIPS DE THÈME · CAPSULE 34 PX</Text>
|
|
||||||
<View style={styles.chipWrap}>
|
|
||||||
<ThemeChip label="Soirée" selected selectedVariant="gradient" showCross={false} />
|
|
||||||
<ThemeChip label="Festival" selected selectedVariant="accent" />
|
|
||||||
<ThemeChip label="Fête de jeunesse" />
|
|
||||||
<ThemeChip label="Concert" />
|
|
||||||
<ThemeChip label="Bal" />
|
|
||||||
<ThemeChip label="Techno" />
|
|
||||||
<ThemeChip label="Afterwork" />
|
|
||||||
<ThemeChip label="Gratuit" selected selectedVariant="accent" showRemoveIcon={false} />
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<View style={{ gap: spacing[12] }}>
|
|
||||||
<Text style={[typography.sectionLabel, { color: colors.textSecondary, letterSpacing: 1.1 }]}>THÈMES · MULTI-SÉLECTION</Text>
|
|
||||||
<View style={styles.chipWrap}>
|
|
||||||
{themeOptions.map((theme) => {
|
|
||||||
const selected = selectedThemes.includes(theme);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ThemeChip
|
|
||||||
key={theme}
|
|
||||||
label={theme}
|
|
||||||
value={theme}
|
|
||||||
selected={selected}
|
|
||||||
selectedVariant={theme === 'Soirée' ? 'gradient' : 'accent'}
|
|
||||||
onSelect={handleThemeSelect}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
</ScrollView>
|
|
||||||
</View>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
screen: {
|
|
||||||
flex: 1,
|
|
||||||
},
|
|
||||||
content: {
|
content: {
|
||||||
paddingBottom: 40,
|
gap: spacing[16],
|
||||||
|
paddingTop: spacing[24],
|
||||||
},
|
},
|
||||||
row: {
|
header: {
|
||||||
flexDirection: 'row',
|
gap: spacing[8],
|
||||||
gap: 14,
|
marginBottom: spacing[8],
|
||||||
},
|
},
|
||||||
cell: {
|
kicker: {
|
||||||
flex: 1,
|
...typography.sectionLabel,
|
||||||
gap: 10,
|
color: colors.textSecondary,
|
||||||
},
|
},
|
||||||
caption: {
|
title: {
|
||||||
textAlign: 'center',
|
...typography.body,
|
||||||
},
|
color: colors.textPrimary,
|
||||||
iconRow: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
justifyContent: 'center',
|
|
||||||
gap: 12,
|
|
||||||
},
|
|
||||||
autoWidthButton: {
|
|
||||||
alignSelf: 'center',
|
|
||||||
width: 140,
|
|
||||||
},
|
|
||||||
badgeWrap: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
flexWrap: 'wrap',
|
|
||||||
gap: 12,
|
|
||||||
alignItems: 'center',
|
|
||||||
},
|
|
||||||
chipWrap: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
flexWrap: 'wrap',
|
|
||||||
gap: 10,
|
|
||||||
alignItems: 'center',
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
342
src/app/switch-demo.tsx
Normal file
342
src/app/switch-demo.tsx
Normal file
@@ -0,0 +1,342 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { StyleSheet, Text, View } from 'react-native';
|
||||||
|
|
||||||
|
import { Button } from '@/components/Button';
|
||||||
|
import { FormField, Switch } from '@/components/form';
|
||||||
|
import { AttendeeSummary, Avatar, AvatarStack, RangeSlider, Screen, Slider } from '@/components/ui';
|
||||||
|
import { colors } from '@/theme/colors';
|
||||||
|
import { spacing } from '@/theme/spacing';
|
||||||
|
import { typography } from '@/theme/typography';
|
||||||
|
|
||||||
|
export default function SwitchDemoScreen() {
|
||||||
|
const [pushEnabled, setPushEnabled] = useState(true);
|
||||||
|
const [weeklyDigestEnabled, setWeeklyDigestEnabled] = useState(false);
|
||||||
|
const [locationEnabled, setLocationEnabled] = useState(true);
|
||||||
|
const [autoPlayEnabled, setAutoPlayEnabled] = useState(false);
|
||||||
|
const [radiusKm, setRadiusKm] = useState(25);
|
||||||
|
const [resultCount, setResultCount] = useState(128);
|
||||||
|
const [priceRange, setPriceRange] = useState<[number, number]>([0, 65]);
|
||||||
|
|
||||||
|
const attendees = [
|
||||||
|
{
|
||||||
|
id: 'lea',
|
||||||
|
source:
|
||||||
|
'https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=240&q=80',
|
||||||
|
name: 'Lea Martin',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'yanis',
|
||||||
|
source:
|
||||||
|
'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=240&q=80',
|
||||||
|
name: 'Yanis Belaid',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'omar',
|
||||||
|
source:
|
||||||
|
'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=240&q=80',
|
||||||
|
name: 'Omar Khelifi',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const attendeesWithFallbacks = [
|
||||||
|
{ id: 'nora', source: null, name: 'Nora Salem' },
|
||||||
|
{ id: 'idris', source: null, name: 'Idris Khan' },
|
||||||
|
{
|
||||||
|
id: 'mila',
|
||||||
|
source:
|
||||||
|
'https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=240&q=80',
|
||||||
|
name: 'Mila Chen',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const formatKm = (v: number) => `${v} km`;
|
||||||
|
const formatChf = (v: number) => `${v} CHF`;
|
||||||
|
const formatPriceRange = (minValue: number, maxValue: number) => {
|
||||||
|
const left = minValue === 0 ? 'Gratuit' : `${minValue} CHF`;
|
||||||
|
return `${left} - ${maxValue} CHF`;
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Screen contentContainerStyle={styles.content}>
|
||||||
|
<View style={styles.header}>
|
||||||
|
<Text style={styles.kicker}>DESIGN SYSTEM · SWITCH & SLIDER</Text>
|
||||||
|
<Text style={styles.title}>Demos phase 4</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
label="Notifications push"
|
||||||
|
helper="Switch custom basé sur Expo/React Native"
|
||||||
|
>
|
||||||
|
<View style={styles.switchRow}>
|
||||||
|
<View style={styles.switchLabelWrap}>
|
||||||
|
<Text style={styles.switchLabel}>Activer les alertes de nouveaux événements</Text>
|
||||||
|
<Text style={styles.switchHint}>
|
||||||
|
{pushEnabled ? 'Activé' : 'Désactivé'}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
<Switch
|
||||||
|
accessibilityLabel="Activer les notifications push"
|
||||||
|
value={pushEnabled}
|
||||||
|
onValueChange={setPushEnabled}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</FormField>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
label="Digest hebdo"
|
||||||
|
helper="Exemple de taille large"
|
||||||
|
>
|
||||||
|
<View style={styles.switchRow}>
|
||||||
|
<View style={styles.switchLabelWrap}>
|
||||||
|
<Text style={styles.switchLabel}>Recevoir un recap chaque lundi</Text>
|
||||||
|
<Text style={styles.switchHint}>
|
||||||
|
{weeklyDigestEnabled ? 'Activé' : 'Désactivé'}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
<Switch
|
||||||
|
accessibilityLabel="Activer le digest hebdomadaire"
|
||||||
|
value={weeklyDigestEnabled}
|
||||||
|
onValueChange={setWeeklyDigestEnabled}
|
||||||
|
size="lg"
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</FormField>
|
||||||
|
|
||||||
|
<FormField label="Etat desactive" helper="Le switch est non interactif">
|
||||||
|
<View style={styles.switchRow}>
|
||||||
|
<View style={styles.switchLabelWrap}>
|
||||||
|
<Text style={styles.switchLabel}>Mode maintenance</Text>
|
||||||
|
<Text style={styles.switchHint}>Indisponible</Text>
|
||||||
|
</View>
|
||||||
|
<Switch
|
||||||
|
accessibilityLabel="Switch desactive"
|
||||||
|
value
|
||||||
|
disabled
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</FormField>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
label="Exemples rapides"
|
||||||
|
helper="Cas d'usage supplementaires"
|
||||||
|
>
|
||||||
|
<View style={styles.switchStack}>
|
||||||
|
<View style={styles.switchRowCompact}>
|
||||||
|
<Text style={styles.switchLabel}>Localisation precise</Text>
|
||||||
|
<Switch
|
||||||
|
accessibilityLabel="Activer la localisation precise"
|
||||||
|
value={locationEnabled}
|
||||||
|
onValueChange={setLocationEnabled}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={styles.switchRowCompact}>
|
||||||
|
<Text style={styles.switchLabel}>Lecture auto des extraits</Text>
|
||||||
|
<Switch
|
||||||
|
accessibilityLabel="Activer la lecture automatique"
|
||||||
|
value={autoPlayEnabled}
|
||||||
|
onValueChange={setAutoPlayEnabled}
|
||||||
|
size="lg"
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={styles.inlineActions}>
|
||||||
|
<Button
|
||||||
|
label="Reset switches"
|
||||||
|
variant="secondary"
|
||||||
|
onPress={() => {
|
||||||
|
setPushEnabled(true);
|
||||||
|
setWeeklyDigestEnabled(false);
|
||||||
|
setLocationEnabled(true);
|
||||||
|
setAutoPlayEnabled(false);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</FormField>
|
||||||
|
|
||||||
|
<View style={styles.sectionDivider} />
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
label="B3 · Rayon de recherche"
|
||||||
|
helper={`Resultats: ${resultCount}`}
|
||||||
|
>
|
||||||
|
<Slider
|
||||||
|
label="Distance"
|
||||||
|
value={radiusKm}
|
||||||
|
onChange={setRadiusKm}
|
||||||
|
onChangeEnd={(v) => {
|
||||||
|
const nextCount = Math.max(12, 220 - v * 4);
|
||||||
|
setResultCount(nextCount);
|
||||||
|
}}
|
||||||
|
min={1}
|
||||||
|
max={50}
|
||||||
|
step={1}
|
||||||
|
formatValue={formatKm}
|
||||||
|
showBounds
|
||||||
|
ticks={[1, 10, 25, 50]}
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
|
||||||
|
<FormField label="B3 · Fourchette de prix" helper="0 a 100 CHF">
|
||||||
|
<RangeSlider
|
||||||
|
label="Prix"
|
||||||
|
value={priceRange}
|
||||||
|
onChange={setPriceRange}
|
||||||
|
min={0}
|
||||||
|
max={100}
|
||||||
|
step={1}
|
||||||
|
minGap={1}
|
||||||
|
formatValue={formatChf}
|
||||||
|
formatRange={formatPriceRange}
|
||||||
|
showBounds
|
||||||
|
ticks={[0, 25, 50, 75, 100]}
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
|
||||||
|
<FormField label="Curseur desactive" helper="Exemple disabled">
|
||||||
|
<Slider
|
||||||
|
label="Quota"
|
||||||
|
value={40}
|
||||||
|
onChange={() => undefined}
|
||||||
|
min={0}
|
||||||
|
max={100}
|
||||||
|
step={1}
|
||||||
|
formatValue={(v) => `${v}%`}
|
||||||
|
disabled
|
||||||
|
showBounds
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
|
||||||
|
<View style={styles.sectionDivider} />
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
label="Avatar / Stack / Summary"
|
||||||
|
helper="Design system phase 4"
|
||||||
|
>
|
||||||
|
<View style={styles.avatarStack}>
|
||||||
|
<View style={styles.exampleRow}>
|
||||||
|
<Text style={styles.exampleLabel}>1) B1 · Stack 3 sur 12 (+9)</Text>
|
||||||
|
<AvatarStack items={attendees} max={3} total={12} size="sm" />
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={styles.exampleRow}>
|
||||||
|
<Text style={styles.exampleLabel}>2) B1 · Meme stack sans bulle</Text>
|
||||||
|
<AvatarStack items={attendees} max={3} total={12} size="sm" showOverflow={false} />
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={styles.exampleRow}>
|
||||||
|
<Text style={styles.exampleLabel}>3) C3 · Avatar XL gradient + live</Text>
|
||||||
|
<Avatar
|
||||||
|
size="xl"
|
||||||
|
ring="border"
|
||||||
|
shape='rounded'
|
||||||
|
ringColor={colors.primary}
|
||||||
|
badge="online"
|
||||||
|
source="https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&fit=crop&w=300&q=80"
|
||||||
|
name="Studio Bahla"
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={styles.exampleRow}>
|
||||||
|
<Text style={styles.exampleLabel}>4) Summary 0 puis 142 dont 3 amis</Text>
|
||||||
|
<View style={styles.summaryStack}>
|
||||||
|
<AttendeeSummary items={[]} total={0} size="sm" />
|
||||||
|
<AttendeeSummary
|
||||||
|
items={attendees}
|
||||||
|
total={142}
|
||||||
|
max={3}
|
||||||
|
size="sm"
|
||||||
|
highlight="dont 3 amis"
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={styles.exampleRow}>
|
||||||
|
<Text style={styles.exampleLabel}>5) Stack avec fallback initiales</Text>
|
||||||
|
<AvatarStack items={attendeesWithFallbacks} max={3} total={3} size="sm" />
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</FormField>
|
||||||
|
</Screen>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
content: {
|
||||||
|
gap: spacing[16],
|
||||||
|
paddingTop: spacing[24],
|
||||||
|
},
|
||||||
|
header: {
|
||||||
|
gap: spacing[8],
|
||||||
|
marginBottom: spacing[8],
|
||||||
|
},
|
||||||
|
kicker: {
|
||||||
|
...typography.sectionLabel,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
...typography.body,
|
||||||
|
color: colors.textPrimary,
|
||||||
|
},
|
||||||
|
switchRow: {
|
||||||
|
minHeight: 56,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: colors.inputBorder,
|
||||||
|
borderRadius: 14,
|
||||||
|
backgroundColor: colors.inputBackground,
|
||||||
|
paddingHorizontal: 14,
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
gap: spacing[12],
|
||||||
|
},
|
||||||
|
switchLabelWrap: {
|
||||||
|
flex: 1,
|
||||||
|
gap: 2,
|
||||||
|
},
|
||||||
|
switchLabel: {
|
||||||
|
...typography.body,
|
||||||
|
color: colors.textPrimary,
|
||||||
|
},
|
||||||
|
switchHint: {
|
||||||
|
...typography.caption,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
},
|
||||||
|
switchStack: {
|
||||||
|
gap: spacing[8],
|
||||||
|
},
|
||||||
|
switchRowCompact: {
|
||||||
|
minHeight: 56,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: colors.inputBorder,
|
||||||
|
borderRadius: 14,
|
||||||
|
backgroundColor: colors.inputBackground,
|
||||||
|
paddingHorizontal: 14,
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
gap: spacing[12],
|
||||||
|
},
|
||||||
|
inlineActions: {
|
||||||
|
marginTop: spacing[4],
|
||||||
|
},
|
||||||
|
sectionDivider: {
|
||||||
|
height: 1,
|
||||||
|
backgroundColor: colors.divider,
|
||||||
|
marginVertical: spacing[4],
|
||||||
|
},
|
||||||
|
avatarStack: {
|
||||||
|
gap: spacing[12],
|
||||||
|
},
|
||||||
|
exampleRow: {
|
||||||
|
gap: spacing[8],
|
||||||
|
},
|
||||||
|
exampleLabel: {
|
||||||
|
...typography.metadata,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
},
|
||||||
|
summaryStack: {
|
||||||
|
gap: spacing[8],
|
||||||
|
},
|
||||||
|
});
|
||||||
88
src/components/Card.tsx
Normal file
88
src/components/Card.tsx
Normal file
@@ -0,0 +1,88 @@
|
|||||||
|
import { Event } from '@/models/events';
|
||||||
|
import { StyleSheet, Text, View } from 'react-native';
|
||||||
|
|
||||||
|
import { Badge } from './Badge';
|
||||||
|
import { Button } from './Button';
|
||||||
|
import { AvatarStack, AvatarStackItem } from './ui/AvatarStack';
|
||||||
|
|
||||||
|
import { typography } from '@/theme';
|
||||||
|
import { colors } from '@/theme/colors';
|
||||||
|
import { borderRadius } from '@/theme/spacing';
|
||||||
|
|
||||||
|
import { Heart, MapPin } from 'lucide-react-native';
|
||||||
|
|
||||||
|
export type CardVariant = 'hero' | 'list' | 'compact';
|
||||||
|
|
||||||
|
export type CardProps = {
|
||||||
|
variant: CardVariant;
|
||||||
|
event: Event;
|
||||||
|
avatarStack?: AvatarStackItem[];
|
||||||
|
onPress?: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
function Card({
|
||||||
|
variant,
|
||||||
|
event,
|
||||||
|
avatarStack,
|
||||||
|
onPress
|
||||||
|
}: CardProps) {
|
||||||
|
const eventDate = event.start_date;
|
||||||
|
const badgeDate = {
|
||||||
|
day: eventDate.getDate().toString().padStart(2, '0'),
|
||||||
|
month: new Intl.DateTimeFormat('fr-FR', { month: 'short' })
|
||||||
|
.format(eventDate)
|
||||||
|
.replace('.', ''),
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View
|
||||||
|
style={styles.card}
|
||||||
|
>
|
||||||
|
<View style={styles.header}>
|
||||||
|
<Badge variant='date' date={badgeDate} />
|
||||||
|
<Button variant='ghost' icon={Heart} iconOnly onPress={onPress} />
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={styles.content}>
|
||||||
|
<Badge variant='tonight' label='CE SOIR' />
|
||||||
|
<Text style={styles.title}>
|
||||||
|
{event.name}
|
||||||
|
</Text>
|
||||||
|
<Text style={styles.subtitle}>
|
||||||
|
<MapPin size={16} color={colors.textBody} />{' '}
|
||||||
|
{event.address}, {event.city} - 18 km
|
||||||
|
</Text>
|
||||||
|
{avatarStack && <AvatarStack items={avatarStack} />}
|
||||||
|
</View>
|
||||||
|
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
card: {
|
||||||
|
borderRadius: borderRadius.card,
|
||||||
|
backgroundColor: colors.surface,
|
||||||
|
height: 230,
|
||||||
|
padding: 16,
|
||||||
|
},
|
||||||
|
header: {
|
||||||
|
flex: 1,
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
},
|
||||||
|
content: {
|
||||||
|
flex: 3,
|
||||||
|
justifyContent: 'flex-end',
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
...typography.cardTitle,
|
||||||
|
color: colors.textPrimary,
|
||||||
|
},
|
||||||
|
subtitle: {
|
||||||
|
...typography.label,
|
||||||
|
color: colors.textBody
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export default Card;
|
||||||
110
src/components/form/FormField.tsx
Normal file
110
src/components/form/FormField.tsx
Normal file
@@ -0,0 +1,110 @@
|
|||||||
|
import type { ReactNode } from 'react';
|
||||||
|
import { StyleSheet, Text, View } from 'react-native';
|
||||||
|
|
||||||
|
import { colors } from '@/theme/colors';
|
||||||
|
import { fontFamily, typography } from '@/theme/typography';
|
||||||
|
|
||||||
|
export type FieldCounter = {
|
||||||
|
value: number;
|
||||||
|
max: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type FormFieldProps = {
|
||||||
|
label?: string;
|
||||||
|
required?: boolean;
|
||||||
|
helper?: string;
|
||||||
|
error?: string;
|
||||||
|
counter?: FieldCounter;
|
||||||
|
children: ReactNode;
|
||||||
|
};
|
||||||
|
|
||||||
|
const FormField = ({
|
||||||
|
label,
|
||||||
|
required = false,
|
||||||
|
helper,
|
||||||
|
error,
|
||||||
|
counter,
|
||||||
|
children,
|
||||||
|
}: FormFieldProps) => {
|
||||||
|
const message = error ?? helper;
|
||||||
|
const isCounterOverflow =
|
||||||
|
typeof counter?.value === 'number' && typeof counter?.max === 'number'
|
||||||
|
? counter.value > counter.max
|
||||||
|
: false;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={styles.container}>
|
||||||
|
{label ? (
|
||||||
|
<Text style={styles.label}>
|
||||||
|
{label}
|
||||||
|
{required ? <Text style={styles.required}> *</Text> : null}
|
||||||
|
</Text>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{children}
|
||||||
|
|
||||||
|
{message || counter ? (
|
||||||
|
<View style={styles.bottomRow}>
|
||||||
|
{message ? (
|
||||||
|
<Text
|
||||||
|
style={[styles.message, error ? styles.errorMessage : null]}
|
||||||
|
accessibilityLiveRegion={error ? 'polite' : undefined}
|
||||||
|
>
|
||||||
|
{message}
|
||||||
|
</Text>
|
||||||
|
) : (
|
||||||
|
<View style={styles.messageSpacer} />
|
||||||
|
)}
|
||||||
|
|
||||||
|
{counter ? (
|
||||||
|
<Text
|
||||||
|
style={[styles.counter, isCounterOverflow ? styles.counterError : null]}
|
||||||
|
>
|
||||||
|
{counter.value} / {counter.max}
|
||||||
|
</Text>
|
||||||
|
) : null}
|
||||||
|
</View>
|
||||||
|
) : null}
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
gap: 8,
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
...typography.inputLabel,
|
||||||
|
color: colors.textBody,
|
||||||
|
},
|
||||||
|
required: {
|
||||||
|
color: colors.primary,
|
||||||
|
},
|
||||||
|
bottomRow: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'flex-start',
|
||||||
|
gap: 8,
|
||||||
|
},
|
||||||
|
message: {
|
||||||
|
...typography.helper,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
errorMessage: {
|
||||||
|
color: colors.danger,
|
||||||
|
},
|
||||||
|
messageSpacer: {
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
counter: {
|
||||||
|
...typography.metadataSm,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
fontFamily: fontFamily.mono,
|
||||||
|
},
|
||||||
|
counterError: {
|
||||||
|
color: colors.danger,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default FormField;
|
||||||
143
src/components/form/Input.tsx
Normal file
143
src/components/form/Input.tsx
Normal file
@@ -0,0 +1,143 @@
|
|||||||
|
import type { ReactNode } from 'react';
|
||||||
|
import {
|
||||||
|
forwardRef,
|
||||||
|
useImperativeHandle,
|
||||||
|
useRef,
|
||||||
|
useState,
|
||||||
|
} from 'react';
|
||||||
|
import {
|
||||||
|
Pressable,
|
||||||
|
StyleSheet,
|
||||||
|
TextInput,
|
||||||
|
View,
|
||||||
|
type StyleProp,
|
||||||
|
type TextInputProps,
|
||||||
|
type ViewStyle,
|
||||||
|
} from 'react-native';
|
||||||
|
|
||||||
|
import { colors } from '@/theme/colors';
|
||||||
|
import { typography } from '@/theme/typography';
|
||||||
|
|
||||||
|
export type InputSize = 'md' | 'lg';
|
||||||
|
export type InputState = 'default' | 'error' | 'success';
|
||||||
|
|
||||||
|
export type InputProps = Omit<TextInputProps, 'style'> & {
|
||||||
|
size?: InputSize;
|
||||||
|
state?: InputState;
|
||||||
|
left?: ReactNode;
|
||||||
|
right?: ReactNode;
|
||||||
|
containerStyle?: StyleProp<ViewStyle>;
|
||||||
|
};
|
||||||
|
|
||||||
|
const HEIGHT_BY_SIZE: Record<InputSize, number> = {
|
||||||
|
md: 48,
|
||||||
|
lg: 56,
|
||||||
|
};
|
||||||
|
|
||||||
|
const Input = forwardRef<TextInput, InputProps>(function Input(
|
||||||
|
{
|
||||||
|
size = 'md',
|
||||||
|
state = 'default',
|
||||||
|
left,
|
||||||
|
right,
|
||||||
|
containerStyle,
|
||||||
|
editable = true,
|
||||||
|
onFocus,
|
||||||
|
onBlur,
|
||||||
|
placeholderTextColor = colors.inputPlaceholder,
|
||||||
|
...textInputProps
|
||||||
|
},
|
||||||
|
ref,
|
||||||
|
) {
|
||||||
|
const [isFocused, setIsFocused] = useState(false);
|
||||||
|
const inputRef = useRef<TextInput>(null);
|
||||||
|
|
||||||
|
useImperativeHandle(ref, () => inputRef.current as TextInput);
|
||||||
|
|
||||||
|
const handleFocus: NonNullable<TextInputProps['onFocus']> = (event) => {
|
||||||
|
setIsFocused(true);
|
||||||
|
onFocus?.(event);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleBlur: NonNullable<TextInputProps['onBlur']> = (event) => {
|
||||||
|
setIsFocused(false);
|
||||||
|
onBlur?.(event);
|
||||||
|
};
|
||||||
|
|
||||||
|
const borderColor =
|
||||||
|
state === 'error'
|
||||||
|
? colors.danger
|
||||||
|
: isFocused
|
||||||
|
? colors.inputBorderFocus
|
||||||
|
: state === 'success'
|
||||||
|
? colors.success
|
||||||
|
: colors.inputBorder;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Pressable
|
||||||
|
onPress={() => {
|
||||||
|
if (editable) {
|
||||||
|
inputRef.current?.focus();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
style={[
|
||||||
|
styles.container,
|
||||||
|
{
|
||||||
|
height: HEIGHT_BY_SIZE[size],
|
||||||
|
borderColor,
|
||||||
|
backgroundColor: editable ? colors.inputBackground : colors.surface,
|
||||||
|
opacity: editable ? 1 : 0.5,
|
||||||
|
},
|
||||||
|
isFocused && state !== 'error' ? styles.focusRing : null,
|
||||||
|
containerStyle,
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
{left ? <View style={styles.slot}>{left}</View> : null}
|
||||||
|
<TextInput
|
||||||
|
ref={inputRef}
|
||||||
|
{...textInputProps}
|
||||||
|
editable={editable}
|
||||||
|
onFocus={handleFocus}
|
||||||
|
onBlur={handleBlur}
|
||||||
|
placeholderTextColor={placeholderTextColor}
|
||||||
|
style={styles.input}
|
||||||
|
/>
|
||||||
|
{right ? <View style={styles.slot}>{right}</View> : null}
|
||||||
|
</Pressable>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
borderWidth: 1,
|
||||||
|
borderRadius: 14,
|
||||||
|
paddingHorizontal: 14,
|
||||||
|
gap: 10,
|
||||||
|
},
|
||||||
|
input: {
|
||||||
|
...typography.input,
|
||||||
|
flex: 1,
|
||||||
|
alignSelf: 'stretch',
|
||||||
|
height: '100%',
|
||||||
|
color: colors.textPrimary,
|
||||||
|
paddingVertical: 0,
|
||||||
|
},
|
||||||
|
slot: {
|
||||||
|
minWidth: 20,
|
||||||
|
minHeight: 20,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignSelf: 'center',
|
||||||
|
},
|
||||||
|
focusRing: {
|
||||||
|
shadowColor: colors.focusRing,
|
||||||
|
shadowOffset: { width: 0, height: 0 },
|
||||||
|
shadowOpacity: 1,
|
||||||
|
shadowRadius: 10,
|
||||||
|
elevation: 2,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default Input;
|
||||||
117
src/components/form/PasswordInput.tsx
Normal file
117
src/components/form/PasswordInput.tsx
Normal file
@@ -0,0 +1,117 @@
|
|||||||
|
import { Eye, EyeOff } from 'lucide-react-native';
|
||||||
|
import { forwardRef, useState } from 'react';
|
||||||
|
import {
|
||||||
|
Pressable,
|
||||||
|
StyleSheet,
|
||||||
|
TextInput,
|
||||||
|
View,
|
||||||
|
type StyleProp,
|
||||||
|
type ViewStyle,
|
||||||
|
} from 'react-native';
|
||||||
|
|
||||||
|
import { colors } from '@/theme/colors';
|
||||||
|
|
||||||
|
import Input, { type InputProps } from './Input';
|
||||||
|
|
||||||
|
export type PasswordStrength = 0 | 1 | 2 | 3;
|
||||||
|
|
||||||
|
export type PasswordInputProps = Omit<InputProps, 'right' | 'secureTextEntry'> & {
|
||||||
|
strength?: PasswordStrength;
|
||||||
|
strengthContainerStyle?: StyleProp<ViewStyle>;
|
||||||
|
};
|
||||||
|
|
||||||
|
const SEGMENT_COUNT = 3;
|
||||||
|
|
||||||
|
function getStrengthColor(strength: PasswordStrength): string {
|
||||||
|
if (strength <= 1) {
|
||||||
|
return colors.danger;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (strength === 2) {
|
||||||
|
return colors.warning;
|
||||||
|
}
|
||||||
|
|
||||||
|
return colors.success;
|
||||||
|
}
|
||||||
|
|
||||||
|
const PasswordInput = forwardRef<TextInput, PasswordInputProps>(
|
||||||
|
function PasswordInput({ strength, strengthContainerStyle, ...props }, ref) {
|
||||||
|
const [revealed, setRevealed] = useState(false);
|
||||||
|
const strengthColor =
|
||||||
|
typeof strength === 'number' ? getStrengthColor(strength) : colors.divider;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={styles.wrapper}>
|
||||||
|
<Input
|
||||||
|
ref={ref}
|
||||||
|
secureTextEntry={!revealed}
|
||||||
|
autoCapitalize="none"
|
||||||
|
autoCorrect={false}
|
||||||
|
textContentType="password"
|
||||||
|
autoComplete="current-password"
|
||||||
|
right={
|
||||||
|
<Pressable
|
||||||
|
onPress={() => setRevealed((prev) => !prev)}
|
||||||
|
style={styles.toggleButton}
|
||||||
|
hitSlop={8}
|
||||||
|
accessibilityRole="button"
|
||||||
|
accessibilityLabel={
|
||||||
|
revealed
|
||||||
|
? 'Masquer le mot de passe'
|
||||||
|
: 'Afficher le mot de passe'
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{revealed ? (
|
||||||
|
<EyeOff color={colors.textSecondary} size={20} />
|
||||||
|
) : (
|
||||||
|
<Eye color={colors.textSecondary} size={20} />
|
||||||
|
)}
|
||||||
|
</Pressable>
|
||||||
|
}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{typeof strength === 'number' ? (
|
||||||
|
<View style={[styles.strengthRow, strengthContainerStyle]}>
|
||||||
|
{Array.from({ length: SEGMENT_COUNT }).map((_, index) => (
|
||||||
|
<View
|
||||||
|
// eslint-disable-next-line react/no-array-index-key
|
||||||
|
key={index}
|
||||||
|
style={[
|
||||||
|
styles.strengthSegment,
|
||||||
|
{
|
||||||
|
backgroundColor:
|
||||||
|
index < strength ? strengthColor : colors.divider,
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
) : null}
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
wrapper: {
|
||||||
|
gap: 8,
|
||||||
|
},
|
||||||
|
toggleButton: {
|
||||||
|
width: 44,
|
||||||
|
height: 44,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
strengthRow: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
gap: 4,
|
||||||
|
},
|
||||||
|
strengthSegment: {
|
||||||
|
flex: 1,
|
||||||
|
height: 3,
|
||||||
|
borderRadius: 999,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default PasswordInput;
|
||||||
84
src/components/form/SearchInput.tsx
Normal file
84
src/components/form/SearchInput.tsx
Normal file
@@ -0,0 +1,84 @@
|
|||||||
|
import { Search, X } from 'lucide-react-native';
|
||||||
|
import {
|
||||||
|
forwardRef,
|
||||||
|
useEffect,
|
||||||
|
useImperativeHandle,
|
||||||
|
useRef,
|
||||||
|
type ReactNode,
|
||||||
|
} from 'react';
|
||||||
|
import { Pressable, StyleSheet, TextInput } from 'react-native';
|
||||||
|
|
||||||
|
import { colors } from '@/theme/colors';
|
||||||
|
|
||||||
|
import Input, { type InputProps } from './Input';
|
||||||
|
|
||||||
|
export type SearchInputProps = Omit<InputProps, 'left' | 'right'> & {
|
||||||
|
onDebouncedChange?: (value: string) => void;
|
||||||
|
debounceMs?: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
const SearchInput = forwardRef<TextInput, SearchInputProps>(function SearchInput(
|
||||||
|
{ onDebouncedChange, debounceMs = 300, value, onChangeText, ...props },
|
||||||
|
ref,
|
||||||
|
) {
|
||||||
|
const inputRef = useRef<TextInput>(null);
|
||||||
|
const valueAsString = typeof value === 'string' ? value : '';
|
||||||
|
|
||||||
|
useImperativeHandle(ref, () => inputRef.current as TextInput);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!onDebouncedChange) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const timer = setTimeout(() => {
|
||||||
|
onDebouncedChange(valueAsString);
|
||||||
|
}, debounceMs);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
clearTimeout(timer);
|
||||||
|
};
|
||||||
|
}, [debounceMs, onDebouncedChange, valueAsString]);
|
||||||
|
|
||||||
|
const clearButton: ReactNode =
|
||||||
|
valueAsString.length > 0 ? (
|
||||||
|
<Pressable
|
||||||
|
onPress={() => {
|
||||||
|
onChangeText?.('');
|
||||||
|
inputRef.current?.clear();
|
||||||
|
inputRef.current?.focus();
|
||||||
|
}}
|
||||||
|
style={styles.clearButton}
|
||||||
|
hitSlop={8}
|
||||||
|
accessibilityRole="button"
|
||||||
|
accessibilityLabel="Vider la recherche"
|
||||||
|
>
|
||||||
|
<X color={colors.textSecondary} size={20} />
|
||||||
|
</Pressable>
|
||||||
|
) : null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Input
|
||||||
|
ref={inputRef}
|
||||||
|
value={value}
|
||||||
|
onChangeText={onChangeText}
|
||||||
|
left={<Search color={colors.textSecondary} size={20} />}
|
||||||
|
right={clearButton}
|
||||||
|
returnKeyType="search"
|
||||||
|
autoCorrect={false}
|
||||||
|
clearButtonMode="never"
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
clearButton: {
|
||||||
|
width: 44,
|
||||||
|
height: 44,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default SearchInput;
|
||||||
151
src/components/form/Switch.tsx
Normal file
151
src/components/form/Switch.tsx
Normal file
@@ -0,0 +1,151 @@
|
|||||||
|
import { LinearGradient } from 'expo-linear-gradient';
|
||||||
|
import { useEffect, useRef } from 'react';
|
||||||
|
import {
|
||||||
|
Animated,
|
||||||
|
Easing,
|
||||||
|
Pressable,
|
||||||
|
StyleSheet,
|
||||||
|
View,
|
||||||
|
type StyleProp,
|
||||||
|
type ViewStyle,
|
||||||
|
} from 'react-native';
|
||||||
|
|
||||||
|
import { colors } from '@/theme/colors';
|
||||||
|
|
||||||
|
export type SwitchSize = 'md' | 'lg';
|
||||||
|
|
||||||
|
export type SwitchProps = {
|
||||||
|
value: boolean;
|
||||||
|
onValueChange?: (value: boolean) => void;
|
||||||
|
disabled?: boolean;
|
||||||
|
testID?: string;
|
||||||
|
accessibilityLabel?: string;
|
||||||
|
size?: SwitchSize;
|
||||||
|
containerStyle?: StyleProp<ViewStyle>;
|
||||||
|
style?: StyleProp<ViewStyle>;
|
||||||
|
};
|
||||||
|
|
||||||
|
const SIZE_BY_VARIANT: Record<
|
||||||
|
SwitchSize,
|
||||||
|
{ width: number; height: number; thumb: number; padding: number }
|
||||||
|
> = {
|
||||||
|
md: { width: 56, height: 34, thumb: 26, padding: 4 },
|
||||||
|
lg: { width: 64, height: 38, thumb: 30, padding: 4 },
|
||||||
|
};
|
||||||
|
|
||||||
|
function Switch({
|
||||||
|
size = 'md',
|
||||||
|
value,
|
||||||
|
disabled,
|
||||||
|
onValueChange,
|
||||||
|
testID,
|
||||||
|
accessibilityLabel,
|
||||||
|
containerStyle,
|
||||||
|
style,
|
||||||
|
}: SwitchProps) {
|
||||||
|
const metrics = SIZE_BY_VARIANT[size];
|
||||||
|
const travel = metrics.width - metrics.padding * 2 - metrics.thumb;
|
||||||
|
const progress = useRef(new Animated.Value(value ? 1 : 0)).current;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
Animated.timing(progress, {
|
||||||
|
toValue: value ? 1 : 0,
|
||||||
|
duration: 180,
|
||||||
|
easing: Easing.out(Easing.cubic),
|
||||||
|
useNativeDriver: true,
|
||||||
|
}).start();
|
||||||
|
}, [progress, value]);
|
||||||
|
|
||||||
|
const thumbTranslateX = progress.interpolate({
|
||||||
|
inputRange: [0, 1],
|
||||||
|
outputRange: [0, travel],
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Pressable
|
||||||
|
testID={testID}
|
||||||
|
accessibilityRole="switch"
|
||||||
|
accessibilityState={{ checked: value, disabled }}
|
||||||
|
accessibilityLabel={accessibilityLabel}
|
||||||
|
disabled={disabled}
|
||||||
|
onPress={() => onValueChange?.(!value)}
|
||||||
|
style={[
|
||||||
|
styles.container,
|
||||||
|
{
|
||||||
|
width: metrics.width,
|
||||||
|
height: metrics.height,
|
||||||
|
borderRadius: metrics.height / 2,
|
||||||
|
opacity: disabled ? 0.5 : 1,
|
||||||
|
},
|
||||||
|
containerStyle,
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
{value ? (
|
||||||
|
<LinearGradient
|
||||||
|
colors={[colors.secondary, colors.primary]}
|
||||||
|
start={{ x: 0, y: 0.5 }}
|
||||||
|
end={{ x: 1, y: 0.5 }}
|
||||||
|
style={[
|
||||||
|
styles.trackFill,
|
||||||
|
{ borderRadius: metrics.height / 2, borderColor: 'rgba(255,255,255,0.18)' },
|
||||||
|
]}
|
||||||
|
pointerEvents="none"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<View
|
||||||
|
style={[
|
||||||
|
styles.trackFill,
|
||||||
|
styles.trackOff,
|
||||||
|
{ borderRadius: metrics.height / 2 },
|
||||||
|
]}
|
||||||
|
pointerEvents="none"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Animated.View
|
||||||
|
style={[
|
||||||
|
styles.thumb,
|
||||||
|
{
|
||||||
|
width: metrics.thumb,
|
||||||
|
height: metrics.thumb,
|
||||||
|
borderRadius: metrics.thumb / 2,
|
||||||
|
top: metrics.padding,
|
||||||
|
left: metrics.padding,
|
||||||
|
transform: [{ translateX: thumbTranslateX }],
|
||||||
|
backgroundColor: value ? '#FFFFFF' : colors.textStrong,
|
||||||
|
},
|
||||||
|
style,
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</Pressable>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
position: 'relative',
|
||||||
|
overflow: 'hidden',
|
||||||
|
},
|
||||||
|
trackFill: {
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
right: 0,
|
||||||
|
bottom: 0,
|
||||||
|
left: 0,
|
||||||
|
borderWidth: 1,
|
||||||
|
},
|
||||||
|
trackOff: {
|
||||||
|
backgroundColor: colors.surfaceElevated,
|
||||||
|
borderColor: colors.inputBorder,
|
||||||
|
},
|
||||||
|
thumb: {
|
||||||
|
position: 'absolute',
|
||||||
|
shadowColor: '#000000',
|
||||||
|
shadowOffset: { width: 0, height: 2 },
|
||||||
|
shadowOpacity: 0.25,
|
||||||
|
shadowRadius: 4,
|
||||||
|
elevation: 3,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default Switch;
|
||||||
44
src/components/form/TextArea.tsx
Normal file
44
src/components/form/TextArea.tsx
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
import { forwardRef } from 'react';
|
||||||
|
import { TextInput, type StyleProp, type ViewStyle } from 'react-native';
|
||||||
|
|
||||||
|
import { typography } from '@/theme/typography';
|
||||||
|
|
||||||
|
import Input, { type InputProps } from './Input';
|
||||||
|
|
||||||
|
export type TextAreaProps = Omit<
|
||||||
|
InputProps,
|
||||||
|
'multiline' | 'textAlignVertical' | 'containerStyle'
|
||||||
|
> & {
|
||||||
|
rows?: number;
|
||||||
|
containerStyle?: StyleProp<ViewStyle>;
|
||||||
|
};
|
||||||
|
|
||||||
|
const TextArea = forwardRef<TextInput, TextAreaProps>(function TextArea(
|
||||||
|
{ rows = 4, containerStyle, ...props },
|
||||||
|
ref,
|
||||||
|
) {
|
||||||
|
const lineHeight =
|
||||||
|
typeof typography.input.lineHeight === 'number'
|
||||||
|
? typography.input.lineHeight
|
||||||
|
: 22;
|
||||||
|
const minHeight = rows * lineHeight + 24;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Input
|
||||||
|
ref={ref}
|
||||||
|
multiline
|
||||||
|
textAlignVertical="top"
|
||||||
|
containerStyle={[
|
||||||
|
{
|
||||||
|
minHeight,
|
||||||
|
alignItems: 'flex-start',
|
||||||
|
paddingVertical: 12,
|
||||||
|
},
|
||||||
|
containerStyle,
|
||||||
|
]}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
export default TextArea;
|
||||||
14
src/components/form/index.ts
Normal file
14
src/components/form/index.ts
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
export { default as FormField } from './FormField';
|
||||||
|
export { default as Input } from './Input';
|
||||||
|
export { default as PasswordInput } from './PasswordInput';
|
||||||
|
export { default as SearchInput } from './SearchInput';
|
||||||
|
export { default as Switch } from './Switch';
|
||||||
|
export { default as TextArea } from './TextArea';
|
||||||
|
|
||||||
|
export type { FieldCounter, FormFieldProps } from './FormField';
|
||||||
|
export type { InputProps, InputSize, InputState } from './Input';
|
||||||
|
export type { PasswordInputProps, PasswordStrength } from './PasswordInput';
|
||||||
|
export type { SearchInputProps } from './SearchInput';
|
||||||
|
export type { SwitchProps, SwitchSize } from './Switch';
|
||||||
|
export type { TextAreaProps } from './TextArea';
|
||||||
|
|
||||||
278
src/components/navigation/BahlaTabBar copy.tsx
Normal file
278
src/components/navigation/BahlaTabBar copy.tsx
Normal file
@@ -0,0 +1,278 @@
|
|||||||
|
/* ------------------------------------------------------------------ *
|
||||||
|
* BahlaTabBar — barre d'onglets floutée, partagée par (tabs) et (org).
|
||||||
|
*
|
||||||
|
* Une seule implémentation pour les deux parcours : le verre dépoli,
|
||||||
|
* le calcul de safe area, le rendu des items et l'accessibilité sont
|
||||||
|
* identiques. Seul le bouton central change, et il est optionnel.
|
||||||
|
*
|
||||||
|
* Usage :
|
||||||
|
* <Tabs tabBar={(p) => <BahlaTabBar {...p} />}> // utilisateur
|
||||||
|
* <Tabs tabBar={(p) => <BahlaTabBar {...p} fabRouteName="create" // organisateur
|
||||||
|
* onFabPress={openCreateSheet} />}>
|
||||||
|
*
|
||||||
|
* Dépendances : expo-blur · expo-linear-gradient ·
|
||||||
|
* react-native-safe-area-context · react-native-svg
|
||||||
|
* ------------------------------------------------------------------ */
|
||||||
|
import { BlurView } from 'expo-blur';
|
||||||
|
import { LinearGradient } from 'expo-linear-gradient';
|
||||||
|
import { Tabs } from 'expo-router';
|
||||||
|
import { useCallback, type ComponentProps } from 'react';
|
||||||
|
import {
|
||||||
|
Platform,
|
||||||
|
Pressable,
|
||||||
|
StyleSheet,
|
||||||
|
Text,
|
||||||
|
View,
|
||||||
|
type ViewStyle,
|
||||||
|
} from 'react-native';
|
||||||
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||||
|
|
||||||
|
import { colors, gradientDirection, gradients } from '@/theme/colors';
|
||||||
|
import { fontFamily, typography } from '@/theme/typography';
|
||||||
|
import { Plus } from 'lucide-react-native';
|
||||||
|
|
||||||
|
/** Hauteur de la barre hors safe area. La hauteur réelle y ajoute l'inset bas. */
|
||||||
|
export const TAB_BAR_BASE_HEIGHT = 52;
|
||||||
|
const FAB_SIZE = 62;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* expo-blur ne rend rien d'exploitable sous Android 9 : sans ce repli on
|
||||||
|
* obtient un rectangle transparent et des libellés illisibles.
|
||||||
|
*/
|
||||||
|
const SUPPORTS_BLUR = Platform.OS === 'ios' || Number(Platform.Version) >= 28;
|
||||||
|
|
||||||
|
type ExpoRouterTabBarProps = Parameters<
|
||||||
|
NonNullable<ComponentProps<typeof Tabs>['tabBar']>
|
||||||
|
>[0];
|
||||||
|
|
||||||
|
type Props = ExpoRouterTabBarProps & {
|
||||||
|
/**
|
||||||
|
* Nom de la route factice qui occupe l'emplacement central.
|
||||||
|
* Absent côté utilisateur — il n'y a pas de bouton flottant.
|
||||||
|
*/
|
||||||
|
fabRouteName?: string;
|
||||||
|
/** Appelé à la place d'une navigation quand on presse le bouton central. */
|
||||||
|
onFabPress?: () => void;
|
||||||
|
/** Libellé lu par les lecteurs d'écran sur le bouton central. */
|
||||||
|
fabAccessibilityLabel?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function BahlaTabBar({
|
||||||
|
state,
|
||||||
|
descriptors,
|
||||||
|
navigation,
|
||||||
|
fabRouteName,
|
||||||
|
onFabPress,
|
||||||
|
fabAccessibilityLabel = 'Créer',
|
||||||
|
}: Props) {
|
||||||
|
const insets = useSafeAreaInsets();
|
||||||
|
|
||||||
|
const handlePress = useCallback(
|
||||||
|
(routeKey: string, routeName: string, isFocused: boolean) => {
|
||||||
|
const event = navigation.emit({
|
||||||
|
type: 'tabPress',
|
||||||
|
target: routeKey,
|
||||||
|
canPreventDefault: true,
|
||||||
|
});
|
||||||
|
if (isFocused || event.defaultPrevented) return;
|
||||||
|
navigation.navigate(routeName as never);
|
||||||
|
},
|
||||||
|
[navigation],
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleLongPress = useCallback(
|
||||||
|
(routeKey: string) => {
|
||||||
|
navigation.emit({ type: 'tabLongPress', target: routeKey });
|
||||||
|
},
|
||||||
|
[navigation],
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<BlurView
|
||||||
|
tint="dark"
|
||||||
|
intensity={SUPPORTS_BLUR ? 20 : 0}
|
||||||
|
blurMethod='dimezisBlurViewSdk31Plus'
|
||||||
|
style={[
|
||||||
|
styles.bar,
|
||||||
|
{
|
||||||
|
height: TAB_BAR_BASE_HEIGHT + insets.bottom,
|
||||||
|
paddingBottom: insets.bottom,
|
||||||
|
// Sans flou, le fond translucide ne suffit pas : on opacifie.
|
||||||
|
backgroundColor: SUPPORTS_BLUR
|
||||||
|
? colors.deepBackground
|
||||||
|
: 'rgba(10,10,18,0.96)',
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
{state.routes.map((route: (typeof state.routes)[number], index: number) => {
|
||||||
|
const { options } = descriptors[route.key];
|
||||||
|
const isFocused = state.index === index;
|
||||||
|
const tint = isFocused ? colors.primary : colors.textSecondary;
|
||||||
|
|
||||||
|
/* --- Emplacement central : bouton flottant, pas un onglet ---- */
|
||||||
|
if (fabRouteName && route.name === fabRouteName) {
|
||||||
|
return (
|
||||||
|
<View key={route.key} style={styles.fabSlot}>
|
||||||
|
<Pressable
|
||||||
|
accessibilityRole="button"
|
||||||
|
accessibilityLabel={fabAccessibilityLabel}
|
||||||
|
onPress={onFabPress}
|
||||||
|
style={({ pressed }) => [
|
||||||
|
styles.fab,
|
||||||
|
pressed && styles.fabPressed,
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<LinearGradient
|
||||||
|
colors={gradients.signature}
|
||||||
|
start={gradientDirection.start}
|
||||||
|
end={gradientDirection.end}
|
||||||
|
style={styles.fabGradient}
|
||||||
|
>
|
||||||
|
<Plus size={28} color={colors.onPrimary} />
|
||||||
|
</LinearGradient>
|
||||||
|
</Pressable>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Onglet ordinaire ---------------------------------------- */
|
||||||
|
const label =
|
||||||
|
typeof options.tabBarLabel === 'string'
|
||||||
|
? options.tabBarLabel
|
||||||
|
: (options.title ?? route.name);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Pressable
|
||||||
|
key={route.key}
|
||||||
|
accessibilityRole="button"
|
||||||
|
accessibilityState={isFocused ? { selected: true } : {}}
|
||||||
|
accessibilityLabel={options.tabBarAccessibilityLabel ?? label}
|
||||||
|
onPress={() => handlePress(route.key, route.name, isFocused)}
|
||||||
|
onLongPress={() => handleLongPress(route.key)}
|
||||||
|
style={styles.item}
|
||||||
|
>
|
||||||
|
<View>
|
||||||
|
{options.tabBarIcon?.({
|
||||||
|
focused: isFocused,
|
||||||
|
color: tint,
|
||||||
|
size: 23,
|
||||||
|
})}
|
||||||
|
{options.tabBarBadge != null && (
|
||||||
|
<View style={styles.badge}>
|
||||||
|
<Text style={styles.badgeText} numberOfLines={1}>
|
||||||
|
{options.tabBarBadge}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
<Text
|
||||||
|
numberOfLines={1}
|
||||||
|
style={[
|
||||||
|
styles.label,
|
||||||
|
{
|
||||||
|
color: tint,
|
||||||
|
fontFamily: isFocused
|
||||||
|
? fontFamily.bodySemi
|
||||||
|
: fontFamily.bodyMedium,
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</Text>
|
||||||
|
</Pressable>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</BlurView>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
bar: {
|
||||||
|
position: 'absolute',
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
bottom: 0,
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'flex-start',
|
||||||
|
paddingTop: 8,
|
||||||
|
borderTopWidth: StyleSheet.hairlineWidth * 2,
|
||||||
|
borderTopColor: colors.border,
|
||||||
|
overflow: 'visible',
|
||||||
|
} as ViewStyle,
|
||||||
|
|
||||||
|
item: {
|
||||||
|
flex: 1,
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: 5,
|
||||||
|
// La zone tactile couvre toute la hauteur de la barre.
|
||||||
|
alignSelf: 'stretch',
|
||||||
|
paddingTop: 2,
|
||||||
|
},
|
||||||
|
|
||||||
|
label: {
|
||||||
|
...typography.tabLabel,
|
||||||
|
fontFamily: undefined, // remplacé plus haut selon l'état
|
||||||
|
},
|
||||||
|
|
||||||
|
badge: {
|
||||||
|
position: 'absolute',
|
||||||
|
top: -4,
|
||||||
|
right: -8,
|
||||||
|
minWidth: 16,
|
||||||
|
height: 16,
|
||||||
|
paddingHorizontal: 4,
|
||||||
|
borderRadius: 999,
|
||||||
|
backgroundColor: colors.primary,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
|
||||||
|
badgeText: {
|
||||||
|
...typography.overlineSm,
|
||||||
|
fontSize: 9,
|
||||||
|
lineHeight: 16,
|
||||||
|
letterSpacing: 0,
|
||||||
|
color: colors.onPrimary,
|
||||||
|
},
|
||||||
|
|
||||||
|
/* Le créneau central est plus étroit que les onglets : 84 px fixes,
|
||||||
|
comme la colonne du même nom dans la maquette. */
|
||||||
|
fabSlot: {
|
||||||
|
width: 84,
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
|
|
||||||
|
fab: {
|
||||||
|
width: FAB_SIZE,
|
||||||
|
height: FAB_SIZE,
|
||||||
|
aspectRatio: 1,
|
||||||
|
borderRadius: 15,
|
||||||
|
// Remonte au-dessus de la barre et découpe un anneau dans le fond.
|
||||||
|
marginTop: -30,
|
||||||
|
overflow: 'hidden',
|
||||||
|
alignSelf: 'center',
|
||||||
|
borderWidth: 3,
|
||||||
|
borderColor: colors.deepBackground,
|
||||||
|
shadowColor: colors.primary,
|
||||||
|
shadowOffset: { width: 0, height: 14 },
|
||||||
|
shadowOpacity: 0.85,
|
||||||
|
shadowRadius: 17,
|
||||||
|
elevation: 12,
|
||||||
|
},
|
||||||
|
|
||||||
|
fabPressed: {
|
||||||
|
transform: [{ scale: 0.94 }],
|
||||||
|
shadowOpacity: 0.5,
|
||||||
|
},
|
||||||
|
|
||||||
|
fabGradient: {
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
aspectRatio: 1,
|
||||||
|
borderRadius: 15,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default BahlaTabBar;
|
||||||
@@ -13,17 +13,15 @@
|
|||||||
* Dépendances : expo-blur · expo-linear-gradient ·
|
* Dépendances : expo-blur · expo-linear-gradient ·
|
||||||
* react-native-safe-area-context · react-native-svg
|
* react-native-safe-area-context · react-native-svg
|
||||||
* ------------------------------------------------------------------ */
|
* ------------------------------------------------------------------ */
|
||||||
import { BlurView } from 'expo-blur';
|
|
||||||
import { LinearGradient } from 'expo-linear-gradient';
|
import { LinearGradient } from 'expo-linear-gradient';
|
||||||
import { Tabs } from 'expo-router';
|
import { Tabs } from 'expo-router';
|
||||||
import { useCallback, type ComponentProps } from 'react';
|
import { useCallback, type ComponentProps } from 'react';
|
||||||
import {
|
import {
|
||||||
Platform,
|
|
||||||
Pressable,
|
Pressable,
|
||||||
StyleSheet,
|
StyleSheet,
|
||||||
Text,
|
Text,
|
||||||
View,
|
View,
|
||||||
type ViewStyle,
|
type ViewStyle
|
||||||
} from 'react-native';
|
} from 'react-native';
|
||||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||||
|
|
||||||
@@ -33,13 +31,9 @@ import { Plus } from 'lucide-react-native';
|
|||||||
|
|
||||||
/** Hauteur de la barre hors safe area. La hauteur réelle y ajoute l'inset bas. */
|
/** Hauteur de la barre hors safe area. La hauteur réelle y ajoute l'inset bas. */
|
||||||
export const TAB_BAR_BASE_HEIGHT = 52;
|
export const TAB_BAR_BASE_HEIGHT = 52;
|
||||||
const FAB_SIZE = 62;
|
const FAB_SIZE = 72;
|
||||||
|
const FAB_RADIUS = 24;
|
||||||
/**
|
const FAB_LIFT = 40;
|
||||||
* expo-blur ne rend rien d'exploitable sous Android 9 : sans ce repli on
|
|
||||||
* obtient un rectangle transparent et des libellés illisibles.
|
|
||||||
*/
|
|
||||||
const SUPPORTS_BLUR = Platform.OS === 'ios' || Number(Platform.Version) >= 28;
|
|
||||||
|
|
||||||
type ExpoRouterTabBarProps = Parameters<
|
type ExpoRouterTabBarProps = Parameters<
|
||||||
NonNullable<ComponentProps<typeof Tabs>['tabBar']>
|
NonNullable<ComponentProps<typeof Tabs>['tabBar']>
|
||||||
@@ -88,18 +82,13 @@ export function BahlaTabBar({
|
|||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<BlurView
|
<View
|
||||||
tint="dark"
|
|
||||||
intensity={SUPPORTS_BLUR ? 20 : 0}
|
|
||||||
style={[
|
style={[
|
||||||
styles.bar,
|
styles.bar,
|
||||||
{
|
{
|
||||||
height: TAB_BAR_BASE_HEIGHT + insets.bottom,
|
height: TAB_BAR_BASE_HEIGHT + insets.bottom,
|
||||||
paddingBottom: insets.bottom,
|
paddingBottom: insets.bottom,
|
||||||
// Sans flou, le fond translucide ne suffit pas : on opacifie.
|
backgroundColor: colors.deepBackground,
|
||||||
backgroundColor: SUPPORTS_BLUR
|
|
||||||
? colors.deepBackground
|
|
||||||
: 'rgba(10,10,18,0.96)',
|
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
>
|
>
|
||||||
@@ -112,25 +101,29 @@ export function BahlaTabBar({
|
|||||||
if (fabRouteName && route.name === fabRouteName) {
|
if (fabRouteName && route.name === fabRouteName) {
|
||||||
return (
|
return (
|
||||||
<View key={route.key} style={styles.fabSlot}>
|
<View key={route.key} style={styles.fabSlot}>
|
||||||
|
<View style={styles.fabShell}>
|
||||||
<Pressable
|
<Pressable
|
||||||
accessibilityRole="button"
|
accessibilityRole="button"
|
||||||
accessibilityLabel={fabAccessibilityLabel}
|
accessibilityLabel={fabAccessibilityLabel}
|
||||||
onPress={onFabPress}
|
onPress={onFabPress}
|
||||||
style={({ pressed }) => [
|
style={styles.fabPressable}
|
||||||
styles.fab,
|
|
||||||
pressed && styles.fabPressed,
|
|
||||||
]}
|
|
||||||
>
|
>
|
||||||
|
{({ pressed }) => (
|
||||||
<LinearGradient
|
<LinearGradient
|
||||||
colors={gradients.signature}
|
colors={gradients.signature}
|
||||||
start={gradientDirection.start}
|
start={gradientDirection.start}
|
||||||
end={gradientDirection.end}
|
end={gradientDirection.end}
|
||||||
style={styles.fabGradient}
|
style={[
|
||||||
|
styles.fabGradient,
|
||||||
|
pressed && styles.fabGradientPressed,
|
||||||
|
]}
|
||||||
>
|
>
|
||||||
<Plus size={28} color={colors.onPrimary} />
|
<Plus size={28} color={colors.onPrimary} />
|
||||||
</LinearGradient>
|
</LinearGradient>
|
||||||
|
)}
|
||||||
</Pressable>
|
</Pressable>
|
||||||
</View>
|
</View>
|
||||||
|
</View>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -181,7 +174,7 @@ export function BahlaTabBar({
|
|||||||
</Pressable>
|
</Pressable>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</BlurView>
|
</View>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -237,41 +230,51 @@ const styles = StyleSheet.create({
|
|||||||
/* Le créneau central est plus étroit que les onglets : 84 px fixes,
|
/* Le créneau central est plus étroit que les onglets : 84 px fixes,
|
||||||
comme la colonne du même nom dans la maquette. */
|
comme la colonne du même nom dans la maquette. */
|
||||||
fabSlot: {
|
fabSlot: {
|
||||||
width: 84,
|
width: 96,
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
|
overflow: 'visible',
|
||||||
|
zIndex: 20,
|
||||||
},
|
},
|
||||||
|
|
||||||
fab: {
|
fabShell: {
|
||||||
width: FAB_SIZE,
|
width: FAB_SIZE,
|
||||||
height: FAB_SIZE,
|
height: FAB_SIZE,
|
||||||
aspectRatio: 1,
|
aspectRatio: 1,
|
||||||
borderRadius: 15,
|
borderRadius: FAB_RADIUS,
|
||||||
// Remonte au-dessus de la barre et découpe un anneau dans le fond.
|
// Remonte au-dessus de la barre et découpe un anneau dans le fond.
|
||||||
marginTop: -30,
|
marginTop: -FAB_LIFT,
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
alignSelf: 'center',
|
alignSelf: 'center',
|
||||||
|
zIndex: 20,
|
||||||
borderWidth: 3,
|
borderWidth: 3,
|
||||||
borderColor: colors.deepBackground,
|
borderColor: colors.deepBackground,
|
||||||
shadowColor: colors.primary,
|
shadowColor: colors.primary,
|
||||||
shadowOffset: { width: 0, height: 14 },
|
shadowOffset: { width: 0, height: 16 },
|
||||||
shadowOpacity: 0.85,
|
shadowOpacity: 0.9,
|
||||||
shadowRadius: 17,
|
shadowRadius: 20,
|
||||||
elevation: 12,
|
elevation: 18,
|
||||||
},
|
},
|
||||||
|
|
||||||
fabPressed: {
|
fabPressable: {
|
||||||
transform: [{ scale: 0.94 }],
|
width: '100%',
|
||||||
shadowOpacity: 0.5,
|
height: '100%',
|
||||||
|
borderRadius: FAB_RADIUS,
|
||||||
|
overflow: 'hidden',
|
||||||
},
|
},
|
||||||
|
|
||||||
fabGradient: {
|
fabGradient: {
|
||||||
width: '100%',
|
width: '100%',
|
||||||
height: '100%',
|
height: '100%',
|
||||||
aspectRatio: 1,
|
aspectRatio: 1,
|
||||||
borderRadius: 15,
|
borderRadius: FAB_RADIUS,
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
},
|
},
|
||||||
|
|
||||||
|
fabGradientPressed: {
|
||||||
|
transform: [{ scale: 0.96 }],
|
||||||
|
opacity: 0.92,
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
export default BahlaTabBar;
|
export default BahlaTabBar;
|
||||||
|
|||||||
@@ -15,7 +15,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|||||||
|
|
||||||
import { colors, gradientDirection, gradients } from '@/theme/colors';
|
import { colors, gradientDirection, gradients } from '@/theme/colors';
|
||||||
import { typography } from '@/theme/typography';
|
import { typography } from '@/theme/typography';
|
||||||
import { Plus } from 'lucide-react-native';
|
import { MessageSquare, Plus } from 'lucide-react-native';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
visible: boolean;
|
visible: boolean;
|
||||||
@@ -32,6 +32,7 @@ export function CreateActionSheet({
|
|||||||
}: Props) {
|
}: Props) {
|
||||||
const insets = useSafeAreaInsets();
|
const insets = useSafeAreaInsets();
|
||||||
|
|
||||||
|
/* TODO - rendre dynamique en fonction du club connecté */
|
||||||
return (
|
return (
|
||||||
<Modal
|
<Modal
|
||||||
visible={visible}
|
visible={visible}
|
||||||
@@ -40,14 +41,28 @@ export function CreateActionSheet({
|
|||||||
onRequestClose={onClose}
|
onRequestClose={onClose}
|
||||||
>
|
>
|
||||||
<Pressable style={styles.scrim} onPress={onClose} accessibilityLabel="Fermer" />
|
<Pressable style={styles.scrim} onPress={onClose} accessibilityLabel="Fermer" />
|
||||||
|
|
||||||
<View style={[styles.sheet, { paddingBottom: insets.bottom + 24 }]}>
|
<View style={[styles.sheet, { paddingBottom: insets.bottom + 24 }]}>
|
||||||
<View style={styles.handle} />
|
<View style={styles.handle} />
|
||||||
|
|
||||||
|
<Text
|
||||||
|
numberOfLines={1}
|
||||||
|
style={[
|
||||||
|
styles.modalTitle,
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
Créer - Club Vertige
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<Pressable
|
<Pressable
|
||||||
accessibilityRole="button"
|
accessibilityRole="button"
|
||||||
onPress={onCreateEvent}
|
onPress={onCreateEvent}
|
||||||
style={({ pressed }) => [styles.row, pressed && styles.rowPressed]}
|
style={styles.rowPressable}
|
||||||
>
|
>
|
||||||
|
{({ pressed }) => (
|
||||||
|
<View style={[styles.row, pressed && styles.rowPressed, { borderColor: colors.primary, borderWidth: 0.5 }]}>
|
||||||
<LinearGradient
|
<LinearGradient
|
||||||
colors={gradients.signature}
|
colors={gradients.signature}
|
||||||
start={gradientDirection.start}
|
start={gradientDirection.start}
|
||||||
@@ -60,20 +75,26 @@ export function CreateActionSheet({
|
|||||||
<Text style={styles.rowTitle}>Créer un événement</Text>
|
<Text style={styles.rowTitle}>Créer un événement</Text>
|
||||||
<Text style={styles.rowSub}>Date, lieu, line-up, billetterie</Text>
|
<Text style={styles.rowSub}>Date, lieu, line-up, billetterie</Text>
|
||||||
</View>
|
</View>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
</Pressable>
|
</Pressable>
|
||||||
|
|
||||||
<Pressable
|
<Pressable
|
||||||
accessibilityRole="button"
|
accessibilityRole="button"
|
||||||
onPress={onCreatePost}
|
onPress={onCreatePost}
|
||||||
style={({ pressed }) => [styles.row, pressed && styles.rowPressed]}
|
style={styles.rowPressable}
|
||||||
>
|
>
|
||||||
|
{({ pressed }) => (
|
||||||
|
<View style={[styles.row, pressed && styles.rowPressed]}>
|
||||||
<View style={[styles.iconBox, styles.iconBoxPlain]}>
|
<View style={[styles.iconBox, styles.iconBoxPlain]}>
|
||||||
<Plus size={22} color={colors.tertiary} />
|
<MessageSquare size={22} color={colors.tertiary} />
|
||||||
</View>
|
</View>
|
||||||
<View style={styles.rowText}>
|
<View style={styles.rowText}>
|
||||||
<Text style={styles.rowTitle}>Publier un post</Text>
|
<Text style={styles.rowTitle}>Publier un post</Text>
|
||||||
<Text style={styles.rowSub}>Sur un de tes événements à venir</Text>
|
<Text style={styles.rowSub}>Sur un de tes événements à venir</Text>
|
||||||
</View>
|
</View>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
</Pressable>
|
</Pressable>
|
||||||
</View>
|
</View>
|
||||||
</Modal>
|
</Modal>
|
||||||
@@ -117,7 +138,13 @@ const styles = StyleSheet.create({
|
|||||||
borderColor: colors.border,
|
borderColor: colors.border,
|
||||||
},
|
},
|
||||||
|
|
||||||
rowPressed: { opacity: 0.7 },
|
rowPressable: {
|
||||||
|
borderRadius: 18,
|
||||||
|
},
|
||||||
|
|
||||||
|
rowPressed: {
|
||||||
|
opacity: 0.7,
|
||||||
|
},
|
||||||
|
|
||||||
iconBox: {
|
iconBox: {
|
||||||
width: 48,
|
width: 48,
|
||||||
@@ -133,6 +160,13 @@ const styles = StyleSheet.create({
|
|||||||
borderColor: colors.border,
|
borderColor: colors.border,
|
||||||
},
|
},
|
||||||
|
|
||||||
|
modalTitle: {
|
||||||
|
...typography.sectionLabel,
|
||||||
|
color: colors.textPrimary,
|
||||||
|
fontSize: 14,
|
||||||
|
marginBottom: 10,
|
||||||
|
},
|
||||||
|
|
||||||
rowText: { flex: 1, gap: 2 },
|
rowText: { flex: 1, gap: 2 },
|
||||||
|
|
||||||
rowTitle: {
|
rowTitle: {
|
||||||
|
|||||||
85
src/components/ui/AttendeeSummary.tsx
Normal file
85
src/components/ui/AttendeeSummary.tsx
Normal file
@@ -0,0 +1,85 @@
|
|||||||
|
import { Pressable, StyleSheet, Text, View } from 'react-native';
|
||||||
|
|
||||||
|
import { colors } from '@/theme/colors';
|
||||||
|
import { fontFamily, typography } from '@/theme/typography';
|
||||||
|
|
||||||
|
import { AvatarStack, type AvatarStackProps } from './AvatarStack';
|
||||||
|
|
||||||
|
export type AttendeeSummaryProps = Pick<
|
||||||
|
AvatarStackProps,
|
||||||
|
'items' | 'max' | 'size' | 'ringColor'
|
||||||
|
> & {
|
||||||
|
total: number;
|
||||||
|
formatLabel?: (n: number) => string;
|
||||||
|
highlight?: string;
|
||||||
|
onPress?: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
function defaultFormatLabel(n: number): string {
|
||||||
|
if (n === 0) {
|
||||||
|
return 'Sois le premier';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (n === 1) {
|
||||||
|
return '1 participant';
|
||||||
|
}
|
||||||
|
|
||||||
|
return `${n} participants`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function AttendeeSummary({
|
||||||
|
items,
|
||||||
|
max,
|
||||||
|
size,
|
||||||
|
ringColor,
|
||||||
|
total,
|
||||||
|
formatLabel = defaultFormatLabel,
|
||||||
|
highlight,
|
||||||
|
onPress,
|
||||||
|
}: AttendeeSummaryProps) {
|
||||||
|
const label = formatLabel(total);
|
||||||
|
const accessibilityLabel = highlight ? `${label}, ${highlight}` : label;
|
||||||
|
const Root = onPress ? Pressable : View;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Root
|
||||||
|
onPress={onPress}
|
||||||
|
accessibilityRole={onPress ? 'button' : undefined}
|
||||||
|
accessibilityLabel={onPress ? accessibilityLabel : undefined}
|
||||||
|
style={styles.row}
|
||||||
|
>
|
||||||
|
<AvatarStack
|
||||||
|
items={items}
|
||||||
|
max={max}
|
||||||
|
size={size}
|
||||||
|
ringColor={ringColor}
|
||||||
|
total={total}
|
||||||
|
ring="border"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Text numberOfLines={1} style={styles.label}>
|
||||||
|
{label}
|
||||||
|
{highlight ? <Text style={styles.highlight}> {highlight}</Text> : null}
|
||||||
|
</Text>
|
||||||
|
</Root>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
row: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: 10,
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
...typography.metadata,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
flexShrink: 1,
|
||||||
|
},
|
||||||
|
highlight: {
|
||||||
|
color: colors.primary,
|
||||||
|
fontFamily: fontFamily.bodySemi,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default AttendeeSummary;
|
||||||
232
src/components/ui/Avatar.tsx
Normal file
232
src/components/ui/Avatar.tsx
Normal file
@@ -0,0 +1,232 @@
|
|||||||
|
import { Image } from 'expo-image';
|
||||||
|
import { LinearGradient } from 'expo-linear-gradient';
|
||||||
|
import { User } from 'lucide-react-native';
|
||||||
|
import { useEffect, useMemo, useState } from 'react';
|
||||||
|
import {
|
||||||
|
Pressable,
|
||||||
|
StyleSheet,
|
||||||
|
Text,
|
||||||
|
View,
|
||||||
|
type ImageSourcePropType,
|
||||||
|
type StyleProp,
|
||||||
|
type ViewStyle,
|
||||||
|
} from 'react-native';
|
||||||
|
|
||||||
|
import { colors, gradientDirection, gradients } from '@/theme/colors';
|
||||||
|
import { fontFamily } from '@/theme/typography';
|
||||||
|
|
||||||
|
export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
||||||
|
|
||||||
|
export const AVATAR_SIZES: Record<AvatarSize, number> = {
|
||||||
|
xs: 20,
|
||||||
|
sm: 26,
|
||||||
|
md: 34,
|
||||||
|
lg: 48,
|
||||||
|
xl: 72,
|
||||||
|
};
|
||||||
|
|
||||||
|
export type AvatarProps = {
|
||||||
|
source?: ImageSourcePropType | string | null;
|
||||||
|
name?: string;
|
||||||
|
size?: AvatarSize;
|
||||||
|
shape?: 'circle' | 'rounded';
|
||||||
|
ring?: 'none' | 'border' | 'gradient';
|
||||||
|
ringColor?: string;
|
||||||
|
badge?: 'none' | 'online' | 'live';
|
||||||
|
onPress?: () => void;
|
||||||
|
style?: StyleProp<ViewStyle>;
|
||||||
|
};
|
||||||
|
|
||||||
|
function getInitials(name?: string): string {
|
||||||
|
if (!name) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
|
const words = name
|
||||||
|
.trim()
|
||||||
|
.split(/\s+/)
|
||||||
|
.filter(Boolean)
|
||||||
|
.slice(0, 2);
|
||||||
|
|
||||||
|
if (words.length === 0) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
|
return words
|
||||||
|
.map((word) => word.charAt(0))
|
||||||
|
.join('')
|
||||||
|
.toUpperCase();
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Avatar({
|
||||||
|
source,
|
||||||
|
name,
|
||||||
|
size = 'md',
|
||||||
|
shape = 'circle',
|
||||||
|
ring = 'none',
|
||||||
|
ringColor,
|
||||||
|
badge = 'none',
|
||||||
|
onPress,
|
||||||
|
style,
|
||||||
|
}: AvatarProps) {
|
||||||
|
const [hasImageError, setHasImageError] = useState(false);
|
||||||
|
|
||||||
|
const diameter = AVATAR_SIZES[size];
|
||||||
|
const radius = shape === 'rounded' ? Math.round(diameter * 0.3) : diameter / 2;
|
||||||
|
const innerRadius = ring === 'gradient' ? Math.max(0, radius - 2) : radius;
|
||||||
|
const fallbackInitials = useMemo(() => getInitials(name), [name]);
|
||||||
|
const normalizedSource =
|
||||||
|
typeof source === 'string' ? { uri: source } : (source ?? null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setHasImageError(false);
|
||||||
|
}, [source]);
|
||||||
|
|
||||||
|
const shouldShowImage = normalizedSource !== null && !hasImageError;
|
||||||
|
const badgeSize = Math.max(8, Math.round(diameter * 0.26));
|
||||||
|
const fallbackTextSize = Math.round(diameter * 0.38);
|
||||||
|
const iconSize = Math.round(diameter * 0.5);
|
||||||
|
const minTouchSize = 44;
|
||||||
|
const hitSlopPadding = diameter < minTouchSize ? Math.ceil((minTouchSize - diameter) / 2) : 0;
|
||||||
|
|
||||||
|
const frameStyle: ViewStyle = {
|
||||||
|
width: diameter,
|
||||||
|
height: diameter,
|
||||||
|
borderRadius: radius,
|
||||||
|
};
|
||||||
|
|
||||||
|
const innerStyle: ViewStyle = {
|
||||||
|
flex: 1,
|
||||||
|
borderRadius: innerRadius,
|
||||||
|
overflow: 'hidden',
|
||||||
|
backgroundColor: colors.surfaceElevated,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
};
|
||||||
|
|
||||||
|
const borderStyle: ViewStyle =
|
||||||
|
ring === 'border'
|
||||||
|
? {
|
||||||
|
borderWidth: 2,
|
||||||
|
borderColor: ringColor ?? colors.border,
|
||||||
|
}
|
||||||
|
: {};
|
||||||
|
|
||||||
|
const badgeColor = badge === 'online' ? colors.success : colors.primary;
|
||||||
|
|
||||||
|
const innerContentNode = shouldShowImage ? (
|
||||||
|
<Image
|
||||||
|
source={normalizedSource}
|
||||||
|
style={styles.media}
|
||||||
|
contentFit="cover"
|
||||||
|
transition={180}
|
||||||
|
onError={() => setHasImageError(true)}
|
||||||
|
/>
|
||||||
|
) : fallbackInitials ? (
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
fontFamily: fontFamily.bodySemi,
|
||||||
|
fontSize: fallbackTextSize,
|
||||||
|
color: colors.textPrimary,
|
||||||
|
lineHeight: fallbackTextSize,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{fallbackInitials}
|
||||||
|
</Text>
|
||||||
|
) : (
|
||||||
|
<User size={iconSize} color={colors.textSecondary} strokeWidth={1.9} />
|
||||||
|
);
|
||||||
|
|
||||||
|
const avatarNode =
|
||||||
|
ring === 'gradient' ? (
|
||||||
|
<LinearGradient
|
||||||
|
colors={gradients.signature}
|
||||||
|
start={gradientDirection.start}
|
||||||
|
end={gradientDirection.end}
|
||||||
|
style={[frameStyle, styles.gradientFrame]}
|
||||||
|
>
|
||||||
|
<View style={innerStyle}>{innerContentNode}</View>
|
||||||
|
{badge !== 'none' ? (
|
||||||
|
<View
|
||||||
|
style={[
|
||||||
|
styles.badge,
|
||||||
|
{
|
||||||
|
width: badgeSize,
|
||||||
|
height: badgeSize,
|
||||||
|
borderRadius: badgeSize / 2,
|
||||||
|
backgroundColor: badgeColor,
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
</LinearGradient>
|
||||||
|
) : (
|
||||||
|
<View style={[frameStyle, styles.frame, borderStyle]}>
|
||||||
|
<View style={innerStyle}>{innerContentNode}</View>
|
||||||
|
{badge !== 'none' ? (
|
||||||
|
<View
|
||||||
|
style={[
|
||||||
|
styles.badge,
|
||||||
|
{
|
||||||
|
width: badgeSize,
|
||||||
|
height: badgeSize,
|
||||||
|
borderRadius: badgeSize / 2,
|
||||||
|
backgroundColor: badgeColor,
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!onPress) {
|
||||||
|
return (
|
||||||
|
<View style={style} accessible={false}>
|
||||||
|
{avatarNode}
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Pressable
|
||||||
|
onPress={onPress}
|
||||||
|
accessibilityRole="button"
|
||||||
|
accessibilityLabel={name ? `Avatar de ${name}` : 'Avatar'}
|
||||||
|
hitSlop={
|
||||||
|
hitSlopPadding > 0
|
||||||
|
? {
|
||||||
|
top: hitSlopPadding,
|
||||||
|
right: hitSlopPadding,
|
||||||
|
bottom: hitSlopPadding,
|
||||||
|
left: hitSlopPadding,
|
||||||
|
}
|
||||||
|
: undefined
|
||||||
|
}
|
||||||
|
style={style}
|
||||||
|
>
|
||||||
|
{avatarNode}
|
||||||
|
</Pressable>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
media: {
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
},
|
||||||
|
gradientFrame: {
|
||||||
|
padding: 2,
|
||||||
|
},
|
||||||
|
frame: {
|
||||||
|
backgroundColor: colors.surfaceElevated,
|
||||||
|
},
|
||||||
|
badge: {
|
||||||
|
position: 'absolute',
|
||||||
|
right: 0,
|
||||||
|
bottom: 0,
|
||||||
|
borderWidth: 2,
|
||||||
|
borderColor: colors.surface,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default Avatar;
|
||||||
138
src/components/ui/AvatarStack.tsx
Normal file
138
src/components/ui/AvatarStack.tsx
Normal file
@@ -0,0 +1,138 @@
|
|||||||
|
import { Pressable, StyleSheet, Text, View, type ViewStyle } from 'react-native';
|
||||||
|
|
||||||
|
import { colors } from '@/theme/colors';
|
||||||
|
import { fontFamily } from '@/theme/typography';
|
||||||
|
|
||||||
|
import { AVATAR_SIZES, Avatar, type AvatarSize } from './Avatar';
|
||||||
|
|
||||||
|
export type AvatarStackItem = { id: string; source?: string | null; name?: string };
|
||||||
|
|
||||||
|
export type AvatarStackProps = {
|
||||||
|
items: AvatarStackItem[];
|
||||||
|
max?: number;
|
||||||
|
size?: AvatarSize;
|
||||||
|
overlap?: number;
|
||||||
|
showOverflow?: boolean;
|
||||||
|
total?: number;
|
||||||
|
ring?: 'border' | 'none';
|
||||||
|
ringColor?: string;
|
||||||
|
onPress?: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
function formatParticipantsLabel(count: number): string {
|
||||||
|
return count === 1 ? '1 participant' : `${count} participants`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function AvatarStack({
|
||||||
|
items,
|
||||||
|
max = 3,
|
||||||
|
size = 'sm',
|
||||||
|
overlap = 0.34,
|
||||||
|
showOverflow = true,
|
||||||
|
total,
|
||||||
|
ring = 'border',
|
||||||
|
ringColor,
|
||||||
|
onPress,
|
||||||
|
}: AvatarStackProps) {
|
||||||
|
if (items.length === 0) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const diameter = AVATAR_SIZES[size];
|
||||||
|
const visibleCount = Math.max(0, Math.min(max, items.length));
|
||||||
|
const visibleItems = items.slice(0, visibleCount);
|
||||||
|
const effectiveTotal = total ?? items.length;
|
||||||
|
const overflowCount = Math.max(0, effectiveTotal - visibleCount);
|
||||||
|
const borderColor = ringColor ?? colors.surface;
|
||||||
|
|
||||||
|
type StackSlot =
|
||||||
|
| { key: string; kind: 'overflow'; value: number }
|
||||||
|
| { key: string; kind: 'avatar'; item: AvatarStackItem };
|
||||||
|
|
||||||
|
const slots: StackSlot[] = [];
|
||||||
|
|
||||||
|
if (showOverflow !== false && overflowCount > 0) {
|
||||||
|
slots.push({ key: 'overflow', kind: 'overflow', value: overflowCount });
|
||||||
|
}
|
||||||
|
|
||||||
|
visibleItems
|
||||||
|
.slice()
|
||||||
|
.reverse()
|
||||||
|
.forEach((item) => {
|
||||||
|
slots.push({ key: item.id, kind: 'avatar', item });
|
||||||
|
});
|
||||||
|
|
||||||
|
const rootStyle: ViewStyle = {
|
||||||
|
flexDirection: 'row-reverse',
|
||||||
|
alignItems: 'center',
|
||||||
|
};
|
||||||
|
|
||||||
|
const StackRoot = onPress ? Pressable : View;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<StackRoot
|
||||||
|
onPress={onPress}
|
||||||
|
accessibilityRole={onPress ? 'button' : 'image'}
|
||||||
|
accessibilityLabel={formatParticipantsLabel(effectiveTotal)}
|
||||||
|
accessible
|
||||||
|
style={rootStyle}
|
||||||
|
>
|
||||||
|
{slots.map((slot, index) => {
|
||||||
|
const offsetStyle = index === 0 ? null : { marginLeft: -(diameter * overlap) };
|
||||||
|
|
||||||
|
if (slot.kind === 'overflow') {
|
||||||
|
return (
|
||||||
|
<View
|
||||||
|
key={slot.key}
|
||||||
|
style={[
|
||||||
|
styles.overflow,
|
||||||
|
{
|
||||||
|
width: diameter,
|
||||||
|
height: diameter,
|
||||||
|
borderRadius: diameter / 2,
|
||||||
|
borderWidth: ring === 'border' ? 2 : 0,
|
||||||
|
borderColor: ring === 'border' ? borderColor : 'transparent',
|
||||||
|
},
|
||||||
|
offsetStyle,
|
||||||
|
]}
|
||||||
|
accessible={false}
|
||||||
|
>
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
fontFamily: fontFamily.monoMedium,
|
||||||
|
fontSize: Math.round(diameter * 0.36),
|
||||||
|
lineHeight: Math.round(diameter * 0.38),
|
||||||
|
color: colors.textSecondary,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
+{slot.value}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Avatar
|
||||||
|
key={slot.key}
|
||||||
|
source={slot.item.source ?? null}
|
||||||
|
name={slot.item.name}
|
||||||
|
size={size}
|
||||||
|
ring={ring === 'border' ? 'border' : 'none'}
|
||||||
|
ringColor={ring === 'border' ? borderColor : undefined}
|
||||||
|
style={offsetStyle}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</StackRoot>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
overflow: {
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
backgroundColor: colors.surfaceElevated,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default AvatarStack;
|
||||||
91
src/components/ui/Header.tsx
Normal file
91
src/components/ui/Header.tsx
Normal file
@@ -0,0 +1,91 @@
|
|||||||
|
/* ------------------------------------------------------------------ *
|
||||||
|
* Header — trois variantes : large, compact, overlay.
|
||||||
|
* ------------------------------------------------------------------ */
|
||||||
|
import { useRouter } from 'expo-router';
|
||||||
|
import { ChevronLeft } from 'lucide-react-native';
|
||||||
|
import { ReactNode } from 'react';
|
||||||
|
import { Pressable, StyleSheet, Text, View } from 'react-native';
|
||||||
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||||
|
|
||||||
|
import { colors } from '@/theme/colors';
|
||||||
|
import { typography } from '@/theme/typography';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
title?: string;
|
||||||
|
/** Overline mono au-dessus du titre (variante large uniquement). */
|
||||||
|
overline?: string;
|
||||||
|
variant?: 'large' | 'compact' | 'overlay';
|
||||||
|
/** Flèche retour. Auto : true sauf en `large`. */
|
||||||
|
back?: boolean;
|
||||||
|
onBack?: () => void;
|
||||||
|
/** Actions à droite — icônes 44×44 déjà encapsulées par l'appelant. */
|
||||||
|
right?: ReactNode;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function Header({ title, overline, variant = 'large', back, onBack, right }: Props) {
|
||||||
|
const router = useRouter();
|
||||||
|
const insets = useSafeAreaInsets();
|
||||||
|
const showBack = back ?? variant !== 'large';
|
||||||
|
const glass = variant === 'overlay';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View
|
||||||
|
style={[
|
||||||
|
styles.row,
|
||||||
|
variant === 'overlay' && [styles.absolute, { paddingTop: insets.top + 8 }],
|
||||||
|
variant === 'compact' && styles.compactRow,
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
{showBack && (
|
||||||
|
<Pressable
|
||||||
|
hitSlop={8}
|
||||||
|
accessibilityRole="button"
|
||||||
|
accessibilityLabel="Retour"
|
||||||
|
onPress={onBack ?? (() => router.back())}
|
||||||
|
style={[styles.iconButton, glass && styles.iconButtonGlass]}
|
||||||
|
>
|
||||||
|
<ChevronLeft size={22} color={colors.textPrimary} strokeWidth={1.8} />
|
||||||
|
</Pressable>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<View style={[styles.titleWrap, variant === 'compact' && styles.titleWrapCentered]}>
|
||||||
|
{overline && variant === 'large' && <Text style={styles.overline}>{overline}</Text>}
|
||||||
|
{title && (
|
||||||
|
<Text
|
||||||
|
numberOfLines={1}
|
||||||
|
style={variant === 'large' ? styles.titleLarge : styles.titleCompact}
|
||||||
|
>
|
||||||
|
{title}
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{right ?? (showBack && variant === 'compact' ? <View style={styles.spacer} /> : null)}
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
row: { flexDirection: 'row', alignItems: 'center', gap: 12, paddingTop: 6, paddingBottom: 14 },
|
||||||
|
compactRow: { paddingBottom: 10 },
|
||||||
|
absolute: { position: 'absolute', top: 0, left: 0, right: 0, zIndex: 10, paddingHorizontal: 20 },
|
||||||
|
|
||||||
|
titleWrap: { flex: 1, minWidth: 0, gap: 2 },
|
||||||
|
titleWrapCentered: { alignItems: 'center' },
|
||||||
|
overline: { ...typography.overlineSm, color: colors.textSecondary },
|
||||||
|
titleLarge: { ...typography.screenTitleLg, color: colors.textPrimary },
|
||||||
|
titleCompact: { ...typography.cardTitle, color: colors.textPrimary },
|
||||||
|
|
||||||
|
iconButton: {
|
||||||
|
width: 44,
|
||||||
|
height: 44,
|
||||||
|
borderRadius: 14,
|
||||||
|
backgroundColor: colors.surface,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: colors.border,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
iconButtonGlass: { backgroundColor: colors.glassFill, borderColor: 'transparent' },
|
||||||
|
spacer: { width: 44 },
|
||||||
|
});
|
||||||
619
src/components/ui/RangeSlider.tsx
Normal file
619
src/components/ui/RangeSlider.tsx
Normal file
@@ -0,0 +1,619 @@
|
|||||||
|
import * as Haptics from 'expo-haptics';
|
||||||
|
import { useCallback, useEffect, useMemo, useRef } from 'react';
|
||||||
|
import {
|
||||||
|
LayoutChangeEvent,
|
||||||
|
StyleSheet,
|
||||||
|
Text,
|
||||||
|
View,
|
||||||
|
type AccessibilityActionEvent,
|
||||||
|
} from 'react-native';
|
||||||
|
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
|
||||||
|
import Animated, {
|
||||||
|
runOnJS,
|
||||||
|
useAnimatedStyle,
|
||||||
|
useSharedValue,
|
||||||
|
withSpring,
|
||||||
|
} from 'react-native-reanimated';
|
||||||
|
|
||||||
|
import { colors } from '@/theme/colors';
|
||||||
|
import { sliderMetrics, sliderMotion, spacing } from '@/theme/spacing';
|
||||||
|
import { typography } from '@/theme/typography';
|
||||||
|
|
||||||
|
import { SliderFill, SliderThumb, SliderTrack, sliderSizes } from './sliderParts';
|
||||||
|
|
||||||
|
export type RangeSliderProps = {
|
||||||
|
value: [number, number];
|
||||||
|
onChange: (v: [number, number]) => void;
|
||||||
|
onChangeEnd?: (v: [number, number]) => void;
|
||||||
|
min?: number;
|
||||||
|
max?: number;
|
||||||
|
step?: number;
|
||||||
|
minGap?: number;
|
||||||
|
label?: string;
|
||||||
|
formatValue?: (v: number) => string;
|
||||||
|
formatRange?: (a: number, b: number) => string;
|
||||||
|
showBounds?: boolean;
|
||||||
|
ticks?: number[];
|
||||||
|
disabled?: boolean;
|
||||||
|
haptics?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
const accessibilityActions = [{ name: 'increment' }, { name: 'decrement' }] as const;
|
||||||
|
|
||||||
|
type ThumbKey = 'min' | 'max';
|
||||||
|
|
||||||
|
function clamp(value: number, min: number, max: number): number {
|
||||||
|
'worklet';
|
||||||
|
return Math.min(max, Math.max(min, value));
|
||||||
|
}
|
||||||
|
|
||||||
|
function safeStep(step: number): number {
|
||||||
|
return Number.isFinite(step) && step > 0 ? step : 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
function quantize(value: number, min: number, max: number, step: number): number {
|
||||||
|
'worklet';
|
||||||
|
const q = Math.round((value - min) / step) * step + min;
|
||||||
|
return clamp(q, min, max);
|
||||||
|
}
|
||||||
|
|
||||||
|
function valueToX(value: number, min: number, max: number, trackWidth: number): number {
|
||||||
|
'worklet';
|
||||||
|
if (trackWidth <= 0 || max <= min) {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ratio = (value - min) / (max - min);
|
||||||
|
return clamp(ratio, 0, 1) * trackWidth;
|
||||||
|
}
|
||||||
|
|
||||||
|
function xToValue(x: number, min: number, max: number, step: number, trackWidth: number): number {
|
||||||
|
'worklet';
|
||||||
|
if (trackWidth <= 0 || max <= min) {
|
||||||
|
return min;
|
||||||
|
}
|
||||||
|
|
||||||
|
const clampedX = clamp(x, 0, trackWidth);
|
||||||
|
const raw = min + (clampedX / trackWidth) * (max - min);
|
||||||
|
return quantize(raw, min, max, step);
|
||||||
|
}
|
||||||
|
|
||||||
|
function normalizeRange(
|
||||||
|
range: [number, number],
|
||||||
|
min: number,
|
||||||
|
max: number,
|
||||||
|
step: number,
|
||||||
|
minGap: number,
|
||||||
|
): [number, number] {
|
||||||
|
const start = quantize(range[0], min, max, step);
|
||||||
|
const end = quantize(range[1], min, max, step);
|
||||||
|
const boundedMinGap = Math.max(minGap, step);
|
||||||
|
const normalizedStart = clamp(start, min, end - boundedMinGap);
|
||||||
|
const normalizedEnd = clamp(end, normalizedStart + boundedMinGap, max);
|
||||||
|
|
||||||
|
return [normalizedStart, normalizedEnd];
|
||||||
|
}
|
||||||
|
|
||||||
|
export function RangeSlider({
|
||||||
|
value,
|
||||||
|
onChange,
|
||||||
|
onChangeEnd,
|
||||||
|
min = 0,
|
||||||
|
max = 100,
|
||||||
|
step = 1,
|
||||||
|
minGap = 1,
|
||||||
|
label,
|
||||||
|
formatValue,
|
||||||
|
formatRange,
|
||||||
|
showBounds = false,
|
||||||
|
ticks,
|
||||||
|
disabled = false,
|
||||||
|
haptics = true,
|
||||||
|
}: RangeSliderProps) {
|
||||||
|
const normalizedStep = safeStep(step);
|
||||||
|
const boundedMinGap = Math.max(minGap, normalizedStep);
|
||||||
|
const formatSingle = formatValue ?? ((v: number) => String(v));
|
||||||
|
const formatPair = formatRange ?? ((a: number, b: number) => `${a} – ${b}`);
|
||||||
|
|
||||||
|
const normalizedRange = useMemo(
|
||||||
|
() => normalizeRange(value, min, max, normalizedStep, boundedMinGap),
|
||||||
|
[boundedMinGap, max, min, normalizedStep, value],
|
||||||
|
);
|
||||||
|
|
||||||
|
const trackWidth = useSharedValue(0);
|
||||||
|
const minX = useSharedValue(0);
|
||||||
|
const maxX = useSharedValue(0);
|
||||||
|
const minValue = useSharedValue(normalizedRange[0]);
|
||||||
|
const maxValue = useSharedValue(normalizedRange[1]);
|
||||||
|
const startX = useSharedValue(0);
|
||||||
|
const activeThumb = useSharedValue<0 | 1 | 2>(0);
|
||||||
|
const minScale = useSharedValue(1);
|
||||||
|
const maxScale = useSharedValue(1);
|
||||||
|
|
||||||
|
const lastReportedRef = useRef<[number, number]>(normalizedRange);
|
||||||
|
|
||||||
|
const emitHaptic = useCallback(() => {
|
||||||
|
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light).catch(() => undefined);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const emitChange = useCallback(
|
||||||
|
(nextMin: number, nextMax: number) => {
|
||||||
|
const [prevMin, prevMax] = lastReportedRef.current;
|
||||||
|
if (prevMin === nextMin && prevMax === nextMax) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
lastReportedRef.current = [nextMin, nextMax];
|
||||||
|
onChange([nextMin, nextMax]);
|
||||||
|
if (haptics) {
|
||||||
|
emitHaptic();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[emitHaptic, haptics, onChange],
|
||||||
|
);
|
||||||
|
|
||||||
|
const emitChangeEnd = useCallback(
|
||||||
|
(nextMin: number, nextMax: number) => {
|
||||||
|
onChangeEnd?.([nextMin, nextMax]);
|
||||||
|
},
|
||||||
|
[onChangeEnd],
|
||||||
|
);
|
||||||
|
|
||||||
|
const syncFromProp = useCallback(() => {
|
||||||
|
if (trackWidth.value <= 0 || activeThumb.value !== 0) {
|
||||||
|
minValue.value = normalizedRange[0];
|
||||||
|
maxValue.value = normalizedRange[1];
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const nextMinX = valueToX(normalizedRange[0], min, max, trackWidth.value);
|
||||||
|
const nextMaxX = valueToX(normalizedRange[1], min, max, trackWidth.value);
|
||||||
|
|
||||||
|
minValue.value = normalizedRange[0];
|
||||||
|
maxValue.value = normalizedRange[1];
|
||||||
|
minX.value = withSpring(nextMinX, {
|
||||||
|
damping: sliderMotion.springDamping,
|
||||||
|
stiffness: sliderMotion.springStiffness,
|
||||||
|
mass: sliderMotion.springMass,
|
||||||
|
});
|
||||||
|
maxX.value = withSpring(nextMaxX, {
|
||||||
|
damping: sliderMotion.springDamping,
|
||||||
|
stiffness: sliderMotion.springStiffness,
|
||||||
|
mass: sliderMotion.springMass,
|
||||||
|
});
|
||||||
|
}, [activeThumb, max, maxValue, maxX, min, minValue, minX, normalizedRange, trackWidth]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
lastReportedRef.current = normalizedRange;
|
||||||
|
syncFromProp();
|
||||||
|
}, [normalizedRange, syncFromProp]);
|
||||||
|
|
||||||
|
const onTrackLayout = useCallback(
|
||||||
|
(event: LayoutChangeEvent) => {
|
||||||
|
const nextWidth = event.nativeEvent.layout.width;
|
||||||
|
trackWidth.value = nextWidth;
|
||||||
|
|
||||||
|
minValue.value = normalizedRange[0];
|
||||||
|
maxValue.value = normalizedRange[1];
|
||||||
|
minX.value = valueToX(normalizedRange[0], min, max, nextWidth);
|
||||||
|
maxX.value = valueToX(normalizedRange[1], min, max, nextWidth);
|
||||||
|
},
|
||||||
|
[max, maxValue, maxX, min, minValue, minX, normalizedRange, trackWidth],
|
||||||
|
);
|
||||||
|
|
||||||
|
const minPan = Gesture.Pan()
|
||||||
|
.enabled(!disabled)
|
||||||
|
.hitSlop({
|
||||||
|
left: sliderSizes.thumbHitSlop,
|
||||||
|
right: sliderSizes.thumbHitSlop,
|
||||||
|
top: sliderSizes.thumbHitSlop,
|
||||||
|
bottom: sliderSizes.thumbHitSlop,
|
||||||
|
})
|
||||||
|
.onStart((event) => {
|
||||||
|
if (trackWidth.value <= 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const distanceBetweenThumbs = Math.abs(maxX.value - minX.value);
|
||||||
|
const touchX = event.x;
|
||||||
|
const minCenter = minX.value;
|
||||||
|
const maxCenter = maxX.value;
|
||||||
|
const distToMin = Math.abs(touchX - minCenter);
|
||||||
|
const distToMax = Math.abs(touchX - maxCenter);
|
||||||
|
const draggableRadius = sliderSizes.thumbSize / 2 + sliderSizes.thumbHitSlop;
|
||||||
|
|
||||||
|
if (distToMin > draggableRadius) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (distanceBetweenThumbs < sliderMetrics.closeThumbThresholdPx && distToMin > distToMax) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
activeThumb.value = 1;
|
||||||
|
startX.value = minX.value;
|
||||||
|
minScale.value = withSpring(sliderMotion.activeScale, {
|
||||||
|
damping: sliderMotion.springDamping,
|
||||||
|
stiffness: sliderMotion.springStiffness,
|
||||||
|
mass: sliderMotion.springMass,
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.onUpdate((event) => {
|
||||||
|
if (activeThumb.value !== 1 || trackWidth.value <= 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const limitMaxValue = maxValue.value - boundedMinGap;
|
||||||
|
const rawX = clamp(startX.value + event.translationX, 0, trackWidth.value);
|
||||||
|
const rawValue = xToValue(rawX, min, max, normalizedStep, trackWidth.value);
|
||||||
|
const nextMinValue = clamp(rawValue, min, limitMaxValue);
|
||||||
|
const snappedX = valueToX(nextMinValue, min, max, trackWidth.value);
|
||||||
|
|
||||||
|
if (nextMinValue !== minValue.value) {
|
||||||
|
minValue.value = nextMinValue;
|
||||||
|
minX.value = snappedX;
|
||||||
|
runOnJS(emitChange)(nextMinValue, maxValue.value);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.onEnd(() => {
|
||||||
|
if (activeThumb.value !== 1) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
activeThumb.value = 0;
|
||||||
|
minScale.value = withSpring(1, {
|
||||||
|
damping: sliderMotion.springDamping,
|
||||||
|
stiffness: sliderMotion.springStiffness,
|
||||||
|
mass: sliderMotion.springMass,
|
||||||
|
});
|
||||||
|
runOnJS(emitChangeEnd)(minValue.value, maxValue.value);
|
||||||
|
})
|
||||||
|
.onFinalize(() => {
|
||||||
|
if (activeThumb.value === 1) {
|
||||||
|
activeThumb.value = 0;
|
||||||
|
}
|
||||||
|
minScale.value = withSpring(1, {
|
||||||
|
damping: sliderMotion.springDamping,
|
||||||
|
stiffness: sliderMotion.springStiffness,
|
||||||
|
mass: sliderMotion.springMass,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const maxPan = Gesture.Pan()
|
||||||
|
.enabled(!disabled)
|
||||||
|
.hitSlop({
|
||||||
|
left: sliderSizes.thumbHitSlop,
|
||||||
|
right: sliderSizes.thumbHitSlop,
|
||||||
|
top: sliderSizes.thumbHitSlop,
|
||||||
|
bottom: sliderSizes.thumbHitSlop,
|
||||||
|
})
|
||||||
|
.onStart((event) => {
|
||||||
|
if (trackWidth.value <= 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const distanceBetweenThumbs = Math.abs(maxX.value - minX.value);
|
||||||
|
const touchX = event.x;
|
||||||
|
const minCenter = minX.value;
|
||||||
|
const maxCenter = maxX.value;
|
||||||
|
const distToMin = Math.abs(touchX - minCenter);
|
||||||
|
const distToMax = Math.abs(touchX - maxCenter);
|
||||||
|
const draggableRadius = sliderSizes.thumbSize / 2 + sliderSizes.thumbHitSlop;
|
||||||
|
|
||||||
|
if (distToMax > draggableRadius) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (distanceBetweenThumbs < sliderMetrics.closeThumbThresholdPx && distToMax > distToMin) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
activeThumb.value = 2;
|
||||||
|
startX.value = maxX.value;
|
||||||
|
maxScale.value = withSpring(sliderMotion.activeScale, {
|
||||||
|
damping: sliderMotion.springDamping,
|
||||||
|
stiffness: sliderMotion.springStiffness,
|
||||||
|
mass: sliderMotion.springMass,
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.onUpdate((event) => {
|
||||||
|
if (activeThumb.value !== 2 || trackWidth.value <= 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const limitMinValue = minValue.value + boundedMinGap;
|
||||||
|
const rawX = clamp(startX.value + event.translationX, 0, trackWidth.value);
|
||||||
|
const rawValue = xToValue(rawX, min, max, normalizedStep, trackWidth.value);
|
||||||
|
const nextMaxValue = clamp(rawValue, limitMinValue, max);
|
||||||
|
const snappedX = valueToX(nextMaxValue, min, max, trackWidth.value);
|
||||||
|
|
||||||
|
if (nextMaxValue !== maxValue.value) {
|
||||||
|
maxValue.value = nextMaxValue;
|
||||||
|
maxX.value = snappedX;
|
||||||
|
runOnJS(emitChange)(minValue.value, nextMaxValue);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.onEnd(() => {
|
||||||
|
if (activeThumb.value !== 2) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
activeThumb.value = 0;
|
||||||
|
maxScale.value = withSpring(1, {
|
||||||
|
damping: sliderMotion.springDamping,
|
||||||
|
stiffness: sliderMotion.springStiffness,
|
||||||
|
mass: sliderMotion.springMass,
|
||||||
|
});
|
||||||
|
runOnJS(emitChangeEnd)(minValue.value, maxValue.value);
|
||||||
|
})
|
||||||
|
.onFinalize(() => {
|
||||||
|
if (activeThumb.value === 2) {
|
||||||
|
activeThumb.value = 0;
|
||||||
|
}
|
||||||
|
maxScale.value = withSpring(1, {
|
||||||
|
damping: sliderMotion.springDamping,
|
||||||
|
stiffness: sliderMotion.springStiffness,
|
||||||
|
mass: sliderMotion.springMass,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const tapGesture = Gesture.Tap()
|
||||||
|
.enabled(!disabled)
|
||||||
|
.onStart((event) => {
|
||||||
|
if (trackWidth.value <= 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const tapX = clamp(event.x, 0, trackWidth.value);
|
||||||
|
const distToMin = Math.abs(tapX - minX.value);
|
||||||
|
const distToMax = Math.abs(tapX - maxX.value);
|
||||||
|
const target: ThumbKey = distToMin <= distToMax ? 'min' : 'max';
|
||||||
|
|
||||||
|
const tappedValue = xToValue(tapX, min, max, normalizedStep, trackWidth.value);
|
||||||
|
|
||||||
|
if (target === 'min') {
|
||||||
|
const nextMin = clamp(tappedValue, min, maxValue.value - boundedMinGap);
|
||||||
|
minValue.value = nextMin;
|
||||||
|
minX.value = withSpring(valueToX(nextMin, min, max, trackWidth.value), {
|
||||||
|
damping: sliderMotion.springDamping,
|
||||||
|
stiffness: sliderMotion.springStiffness,
|
||||||
|
mass: sliderMotion.springMass,
|
||||||
|
});
|
||||||
|
runOnJS(emitChange)(nextMin, maxValue.value);
|
||||||
|
runOnJS(emitChangeEnd)(nextMin, maxValue.value);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const nextMax = clamp(tappedValue, minValue.value + boundedMinGap, max);
|
||||||
|
maxValue.value = nextMax;
|
||||||
|
maxX.value = withSpring(valueToX(nextMax, min, max, trackWidth.value), {
|
||||||
|
damping: sliderMotion.springDamping,
|
||||||
|
stiffness: sliderMotion.springStiffness,
|
||||||
|
mass: sliderMotion.springMass,
|
||||||
|
});
|
||||||
|
runOnJS(emitChange)(minValue.value, nextMax);
|
||||||
|
runOnJS(emitChangeEnd)(minValue.value, nextMax);
|
||||||
|
});
|
||||||
|
|
||||||
|
const gesture = Gesture.Simultaneous(minPan, maxPan, tapGesture);
|
||||||
|
|
||||||
|
const fillStyle = useAnimatedStyle(() => ({
|
||||||
|
left: minX.value,
|
||||||
|
width: Math.max(maxX.value - minX.value, 0),
|
||||||
|
}));
|
||||||
|
|
||||||
|
const minThumbStyle = useAnimatedStyle(() => ({
|
||||||
|
transform: [{ translateX: minX.value }, { scale: minScale.value }],
|
||||||
|
}));
|
||||||
|
|
||||||
|
const maxThumbStyle = useAnimatedStyle(() => ({
|
||||||
|
transform: [{ translateX: maxX.value }, { scale: maxScale.value }],
|
||||||
|
}));
|
||||||
|
|
||||||
|
const visualTicks = useMemo(() => {
|
||||||
|
if (!ticks || ticks.length === 0 || max <= min) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
return ticks
|
||||||
|
.map((tickValue) => {
|
||||||
|
const ratio = (tickValue - min) / (max - min);
|
||||||
|
const clampedRatio = Math.min(1, Math.max(0, ratio));
|
||||||
|
return { key: String(tickValue), left: `${clampedRatio * 100}%` };
|
||||||
|
});
|
||||||
|
}, [max, min, ticks]);
|
||||||
|
|
||||||
|
const applyAccessibilityStep = useCallback(
|
||||||
|
(thumb: ThumbKey, direction: 1 | -1) => {
|
||||||
|
const [currentMin, currentMax] = normalizedRange;
|
||||||
|
|
||||||
|
if (thumb === 'min') {
|
||||||
|
const nextMin = clamp(
|
||||||
|
quantize(currentMin + direction * normalizedStep, min, max, normalizedStep),
|
||||||
|
min,
|
||||||
|
currentMax - boundedMinGap,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (nextMin === currentMin) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
onChange([nextMin, currentMax]);
|
||||||
|
onChangeEnd?.([nextMin, currentMax]);
|
||||||
|
} else {
|
||||||
|
const nextMax = clamp(
|
||||||
|
quantize(currentMax + direction * normalizedStep, min, max, normalizedStep),
|
||||||
|
currentMin + boundedMinGap,
|
||||||
|
max,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (nextMax === currentMax) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
onChange([currentMin, nextMax]);
|
||||||
|
onChangeEnd?.([currentMin, nextMax]);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (haptics) {
|
||||||
|
emitHaptic();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[boundedMinGap, emitHaptic, haptics, max, min, normalizedRange, normalizedStep, onChange, onChangeEnd],
|
||||||
|
);
|
||||||
|
|
||||||
|
const onAccessibilityActionMin = useCallback(
|
||||||
|
(event: AccessibilityActionEvent) => {
|
||||||
|
const direction = event.nativeEvent.actionName === 'increment' ? 1 : -1;
|
||||||
|
applyAccessibilityStep('min', direction);
|
||||||
|
},
|
||||||
|
[applyAccessibilityStep],
|
||||||
|
);
|
||||||
|
|
||||||
|
const onAccessibilityActionMax = useCallback(
|
||||||
|
(event: AccessibilityActionEvent) => {
|
||||||
|
const direction = event.nativeEvent.actionName === 'increment' ? 1 : -1;
|
||||||
|
applyAccessibilityStep('max', direction);
|
||||||
|
},
|
||||||
|
[applyAccessibilityStep],
|
||||||
|
);
|
||||||
|
|
||||||
|
const trackTop = (sliderSizes.minTouchSize - sliderSizes.trackHeight) / 2;
|
||||||
|
const thumbTop = (sliderSizes.minTouchSize - sliderSizes.thumbSize) / 2;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={[styles.root, disabled && styles.disabled]}>
|
||||||
|
{(label || formatPair) ? (
|
||||||
|
<View style={styles.headerRow}>
|
||||||
|
<Text style={styles.headerLabel}>{label ?? ''}</Text>
|
||||||
|
<Text style={styles.headerValue}>
|
||||||
|
{formatPair(normalizedRange[0], normalizedRange[1])}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<GestureDetector gesture={gesture}>
|
||||||
|
<View onLayout={onTrackLayout} style={styles.railContainer}>
|
||||||
|
<SliderTrack style={[styles.track, { top: trackTop }]}>
|
||||||
|
<SliderFill style={[styles.fillBase, fillStyle]} />
|
||||||
|
</SliderTrack>
|
||||||
|
|
||||||
|
{visualTicks.length > 0 ? (
|
||||||
|
<View pointerEvents="none" style={styles.ticksRow}>
|
||||||
|
{visualTicks.map((tick) => (
|
||||||
|
<View key={tick.key} style={[styles.tickMark, { left: tick.left }]} />
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<Animated.View
|
||||||
|
style={[styles.thumbPosition, { top: thumbTop, left: -sliderSizes.thumbRadius }, minThumbStyle]}
|
||||||
|
accessible
|
||||||
|
accessibilityRole="adjustable"
|
||||||
|
accessibilityLabel="Prix minimum"
|
||||||
|
accessibilityActions={accessibilityActions as never}
|
||||||
|
onAccessibilityAction={onAccessibilityActionMin}
|
||||||
|
accessibilityValue={{
|
||||||
|
min,
|
||||||
|
max,
|
||||||
|
now: normalizedRange[0],
|
||||||
|
text: formatSingle(normalizedRange[0]),
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SliderThumb />
|
||||||
|
</Animated.View>
|
||||||
|
|
||||||
|
<Animated.View
|
||||||
|
style={[styles.thumbPosition, { top: thumbTop, left: -sliderSizes.thumbRadius }, maxThumbStyle]}
|
||||||
|
accessible
|
||||||
|
accessibilityRole="adjustable"
|
||||||
|
accessibilityLabel="Prix maximum"
|
||||||
|
accessibilityActions={accessibilityActions as never}
|
||||||
|
onAccessibilityAction={onAccessibilityActionMax}
|
||||||
|
accessibilityValue={{
|
||||||
|
min,
|
||||||
|
max,
|
||||||
|
now: normalizedRange[1],
|
||||||
|
text: formatSingle(normalizedRange[1]),
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SliderThumb />
|
||||||
|
</Animated.View>
|
||||||
|
</View>
|
||||||
|
</GestureDetector>
|
||||||
|
|
||||||
|
{showBounds ? (
|
||||||
|
<View style={styles.boundsRow}>
|
||||||
|
<Text style={styles.boundsText}>{formatSingle(min)}</Text>
|
||||||
|
<Text style={styles.boundsText}>{formatSingle(max)}</Text>
|
||||||
|
</View>
|
||||||
|
) : null}
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
root: {
|
||||||
|
gap: spacing[8],
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
opacity: 0.45,
|
||||||
|
},
|
||||||
|
headerRow: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
gap: spacing[8],
|
||||||
|
},
|
||||||
|
headerLabel: {
|
||||||
|
...typography.overlineSm,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
flexShrink: 1,
|
||||||
|
},
|
||||||
|
headerValue: {
|
||||||
|
...typography.cardTitle,
|
||||||
|
color: colors.textPrimary,
|
||||||
|
},
|
||||||
|
railContainer: {
|
||||||
|
minHeight: sliderSizes.minTouchSize,
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
track: {
|
||||||
|
position: 'absolute',
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
},
|
||||||
|
fillBase: {
|
||||||
|
position: 'absolute',
|
||||||
|
},
|
||||||
|
thumbPosition: {
|
||||||
|
position: 'absolute',
|
||||||
|
},
|
||||||
|
ticksRow: {
|
||||||
|
position: 'absolute',
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
top: sliderSizes.minTouchSize - sliderMetrics.trackHeight,
|
||||||
|
height: spacing[12],
|
||||||
|
},
|
||||||
|
tickMark: {
|
||||||
|
position: 'absolute',
|
||||||
|
width: spacing[2],
|
||||||
|
height: spacing[6],
|
||||||
|
borderRadius: spacing[2],
|
||||||
|
marginLeft: -spacing[2] / 2,
|
||||||
|
backgroundColor: colors.inputBorder,
|
||||||
|
},
|
||||||
|
boundsRow: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
|
boundsText: {
|
||||||
|
...typography.metadataSm,
|
||||||
|
fontFamily: typography.overlineSm.fontFamily,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default RangeSlider;
|
||||||
75
src/components/ui/Screen.tsx
Normal file
75
src/components/ui/Screen.tsx
Normal file
@@ -0,0 +1,75 @@
|
|||||||
|
/* ------------------------------------------------------------------ *
|
||||||
|
* Screen — enveloppe d'écran. Fond, zone sûre, padding de tab bar.
|
||||||
|
* ------------------------------------------------------------------ */
|
||||||
|
import { ReactNode } from 'react';
|
||||||
|
import { ScrollView, StyleSheet, View, ViewStyle } from 'react-native';
|
||||||
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||||
|
|
||||||
|
import { colors } from '@/theme/colors';
|
||||||
|
|
||||||
|
/** Hauteur de la tab bar custom, hors safe-area. Source unique. */
|
||||||
|
import { TAB_BAR_BASE_HEIGHT } from '@/components/navigation/BahlaTabBar';
|
||||||
|
export const TAB_BAR_HEIGHT = TAB_BAR_BASE_HEIGHT;
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
children: ReactNode;
|
||||||
|
/** `scroll` enveloppe dans un ScrollView, `static` en View simple. */
|
||||||
|
layout?: 'scroll' | 'static';
|
||||||
|
/** Applique le padding haut de la zone sûre. false pour un écran à image plein bord. */
|
||||||
|
edgeToEdge?: boolean;
|
||||||
|
/** Réserve la hauteur de la tab bar en bas. false sur les écrans modaux / (org)/create. */
|
||||||
|
tabBar?: boolean;
|
||||||
|
/** Halo violet décoratif en haut à gauche (B1, C1). */
|
||||||
|
halo?: boolean;
|
||||||
|
/** Padding horizontal des enfants. 20 par défaut, 0 pour du plein bord. */
|
||||||
|
gutter?: number;
|
||||||
|
contentContainerStyle?: ViewStyle;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function Screen({
|
||||||
|
children,
|
||||||
|
layout = 'scroll',
|
||||||
|
edgeToEdge = false,
|
||||||
|
tabBar = true,
|
||||||
|
halo = false,
|
||||||
|
gutter = 20,
|
||||||
|
contentContainerStyle,
|
||||||
|
}: Props) {
|
||||||
|
const insets = useSafeAreaInsets();
|
||||||
|
|
||||||
|
const padding: ViewStyle = {
|
||||||
|
paddingTop: edgeToEdge ? 0 : insets.top,
|
||||||
|
paddingHorizontal: gutter,
|
||||||
|
paddingBottom: tabBar ? TAB_BAR_HEIGHT + insets.bottom + 24 : insets.bottom + 24,
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={styles.root}>
|
||||||
|
{halo && <View pointerEvents="none" style={styles.halo} />}
|
||||||
|
{layout === 'scroll' ? (
|
||||||
|
<ScrollView
|
||||||
|
showsVerticalScrollIndicator={false}
|
||||||
|
contentContainerStyle={[padding, contentContainerStyle]}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</ScrollView>
|
||||||
|
) : (
|
||||||
|
<View style={[styles.flex, padding, contentContainerStyle]}>{children}</View>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
root: { flex: 1, backgroundColor: colors.deepBackground },
|
||||||
|
flex: { flex: 1 },
|
||||||
|
halo: {
|
||||||
|
position: 'absolute',
|
||||||
|
width: 380,
|
||||||
|
height: 380,
|
||||||
|
borderRadius: 190,
|
||||||
|
top: -140,
|
||||||
|
left: -60,
|
||||||
|
backgroundColor: colors.secondarySoft,
|
||||||
|
},
|
||||||
|
});
|
||||||
415
src/components/ui/Slider.tsx
Normal file
415
src/components/ui/Slider.tsx
Normal file
@@ -0,0 +1,415 @@
|
|||||||
|
import * as Haptics from 'expo-haptics';
|
||||||
|
import { useCallback, useEffect, useMemo, useRef } from 'react';
|
||||||
|
import {
|
||||||
|
LayoutChangeEvent,
|
||||||
|
StyleSheet,
|
||||||
|
Text,
|
||||||
|
View,
|
||||||
|
type AccessibilityActionEvent
|
||||||
|
} from 'react-native';
|
||||||
|
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
|
||||||
|
import Animated, {
|
||||||
|
runOnJS,
|
||||||
|
useAnimatedStyle,
|
||||||
|
useSharedValue,
|
||||||
|
withSpring,
|
||||||
|
} from 'react-native-reanimated';
|
||||||
|
|
||||||
|
import { colors } from '@/theme/colors';
|
||||||
|
import { sliderMetrics, sliderMotion, spacing } from '@/theme/spacing';
|
||||||
|
import { typography } from '@/theme/typography';
|
||||||
|
|
||||||
|
import { SliderFill, SliderThumb, SliderTrack, sliderSizes } from './sliderParts';
|
||||||
|
|
||||||
|
export type SliderProps = {
|
||||||
|
value: number;
|
||||||
|
onChange: (v: number) => void;
|
||||||
|
onChangeEnd?: (v: number) => void;
|
||||||
|
min?: number;
|
||||||
|
max?: number;
|
||||||
|
step?: number;
|
||||||
|
label?: string;
|
||||||
|
formatValue?: (v: number) => string;
|
||||||
|
showBounds?: boolean;
|
||||||
|
ticks?: number[];
|
||||||
|
disabled?: boolean;
|
||||||
|
haptics?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
const accessibilityActions = [{ name: 'increment' }, { name: 'decrement' }] as const;
|
||||||
|
|
||||||
|
function clamp(value: number, min: number, max: number): number {
|
||||||
|
'worklet';
|
||||||
|
return Math.min(max, Math.max(min, value));
|
||||||
|
}
|
||||||
|
|
||||||
|
function safeStep(step: number): number {
|
||||||
|
return Number.isFinite(step) && step > 0 ? step : 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
function quantize(value: number, min: number, max: number, step: number): number {
|
||||||
|
'worklet';
|
||||||
|
const q = Math.round((value - min) / step) * step + min;
|
||||||
|
return clamp(q, min, max);
|
||||||
|
}
|
||||||
|
|
||||||
|
function valueToX(value: number, min: number, max: number, trackWidth: number): number {
|
||||||
|
'worklet';
|
||||||
|
if (trackWidth <= 0 || max <= min) {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ratio = (value - min) / (max - min);
|
||||||
|
return clamp(ratio, 0, 1) * trackWidth;
|
||||||
|
}
|
||||||
|
|
||||||
|
function xToValue(x: number, min: number, max: number, step: number, trackWidth: number): number {
|
||||||
|
'worklet';
|
||||||
|
if (trackWidth <= 0 || max <= min) {
|
||||||
|
return min;
|
||||||
|
}
|
||||||
|
|
||||||
|
const clampedX = clamp(x, 0, trackWidth);
|
||||||
|
const raw = min + (clampedX / trackWidth) * (max - min);
|
||||||
|
return quantize(raw, min, max, step);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Slider({
|
||||||
|
value,
|
||||||
|
onChange,
|
||||||
|
onChangeEnd,
|
||||||
|
min = 0,
|
||||||
|
max = 100,
|
||||||
|
step = 1,
|
||||||
|
label,
|
||||||
|
formatValue,
|
||||||
|
showBounds = false,
|
||||||
|
ticks,
|
||||||
|
disabled = false,
|
||||||
|
haptics = true,
|
||||||
|
}: SliderProps) {
|
||||||
|
const normalizedStep = safeStep(step);
|
||||||
|
const format = formatValue ?? ((v: number) => String(v));
|
||||||
|
const normalizedValue = useMemo(
|
||||||
|
() => quantize(value, min, max, normalizedStep),
|
||||||
|
[max, min, normalizedStep, value],
|
||||||
|
);
|
||||||
|
|
||||||
|
const trackWidth = useSharedValue(0);
|
||||||
|
const thumbX = useSharedValue(0);
|
||||||
|
const currentValue = useSharedValue(normalizedValue);
|
||||||
|
const startX = useSharedValue(0);
|
||||||
|
const thumbScale = useSharedValue(1);
|
||||||
|
const isDragging = useSharedValue(false);
|
||||||
|
|
||||||
|
const lastReportedRef = useRef(normalizedValue);
|
||||||
|
|
||||||
|
const emitHaptic = useCallback(() => {
|
||||||
|
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light).catch(() => undefined);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const emitChange = useCallback(
|
||||||
|
(next: number) => {
|
||||||
|
if (lastReportedRef.current === next) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
lastReportedRef.current = next;
|
||||||
|
onChange(next);
|
||||||
|
if (haptics) {
|
||||||
|
emitHaptic();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[emitHaptic, haptics, onChange],
|
||||||
|
);
|
||||||
|
|
||||||
|
const emitChangeEnd = useCallback(
|
||||||
|
(next: number) => {
|
||||||
|
onChangeEnd?.(next);
|
||||||
|
},
|
||||||
|
[onChangeEnd],
|
||||||
|
);
|
||||||
|
|
||||||
|
const syncFromProp = useCallback(() => {
|
||||||
|
if (trackWidth.value <= 0 || isDragging.value) {
|
||||||
|
currentValue.value = normalizedValue;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const x = valueToX(normalizedValue, min, max, trackWidth.value);
|
||||||
|
currentValue.value = normalizedValue;
|
||||||
|
thumbX.value = withSpring(x, {
|
||||||
|
damping: sliderMotion.springDamping,
|
||||||
|
stiffness: sliderMotion.springStiffness,
|
||||||
|
mass: sliderMotion.springMass,
|
||||||
|
});
|
||||||
|
}, [currentValue, isDragging, max, min, normalizedValue, thumbX, trackWidth]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
lastReportedRef.current = normalizedValue;
|
||||||
|
syncFromProp();
|
||||||
|
}, [normalizedValue, syncFromProp]);
|
||||||
|
|
||||||
|
const onTrackLayout = useCallback(
|
||||||
|
(event: LayoutChangeEvent) => {
|
||||||
|
const nextWidth = event.nativeEvent.layout.width;
|
||||||
|
trackWidth.value = nextWidth;
|
||||||
|
currentValue.value = normalizedValue;
|
||||||
|
thumbX.value = valueToX(normalizedValue, min, max, nextWidth);
|
||||||
|
},
|
||||||
|
[currentValue, max, min, normalizedValue, thumbX, trackWidth],
|
||||||
|
);
|
||||||
|
|
||||||
|
const panGesture = Gesture.Pan()
|
||||||
|
.enabled(!disabled)
|
||||||
|
.hitSlop({
|
||||||
|
left: sliderSizes.thumbHitSlop,
|
||||||
|
right: sliderSizes.thumbHitSlop,
|
||||||
|
top: sliderSizes.thumbHitSlop,
|
||||||
|
bottom: sliderSizes.thumbHitSlop,
|
||||||
|
})
|
||||||
|
.onStart((event) => {
|
||||||
|
if (trackWidth.value <= 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const centerX = thumbX.value;
|
||||||
|
const distance = Math.abs(event.x - centerX);
|
||||||
|
const draggableRadius = sliderSizes.thumbSize / 2 + sliderSizes.thumbHitSlop;
|
||||||
|
|
||||||
|
if (distance > draggableRadius) {
|
||||||
|
isDragging.value = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
isDragging.value = true;
|
||||||
|
startX.value = thumbX.value;
|
||||||
|
thumbScale.value = withSpring(sliderMotion.activeScale, {
|
||||||
|
damping: sliderMotion.springDamping,
|
||||||
|
stiffness: sliderMotion.springStiffness,
|
||||||
|
mass: sliderMotion.springMass,
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.onUpdate((event) => {
|
||||||
|
if (!isDragging.value || trackWidth.value <= 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const rawX = clamp(startX.value + event.translationX, 0, trackWidth.value);
|
||||||
|
const nextValue = xToValue(rawX, min, max, normalizedStep, trackWidth.value);
|
||||||
|
const snappedX = valueToX(nextValue, min, max, trackWidth.value);
|
||||||
|
|
||||||
|
if (nextValue !== currentValue.value) {
|
||||||
|
currentValue.value = nextValue;
|
||||||
|
thumbX.value = snappedX;
|
||||||
|
runOnJS(emitChange)(nextValue);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.onEnd(() => {
|
||||||
|
if (!isDragging.value) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
isDragging.value = false;
|
||||||
|
thumbScale.value = withSpring(1, {
|
||||||
|
damping: sliderMotion.springDamping,
|
||||||
|
stiffness: sliderMotion.springStiffness,
|
||||||
|
mass: sliderMotion.springMass,
|
||||||
|
});
|
||||||
|
runOnJS(emitChangeEnd)(currentValue.value);
|
||||||
|
})
|
||||||
|
.onFinalize(() => {
|
||||||
|
isDragging.value = false;
|
||||||
|
thumbScale.value = withSpring(1, {
|
||||||
|
damping: sliderMotion.springDamping,
|
||||||
|
stiffness: sliderMotion.springStiffness,
|
||||||
|
mass: sliderMotion.springMass,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const tapGesture = Gesture.Tap()
|
||||||
|
.enabled(!disabled)
|
||||||
|
.onStart((event) => {
|
||||||
|
if (trackWidth.value <= 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const nextValue = xToValue(event.x, min, max, normalizedStep, trackWidth.value);
|
||||||
|
const snappedX = valueToX(nextValue, min, max, trackWidth.value);
|
||||||
|
|
||||||
|
currentValue.value = nextValue;
|
||||||
|
thumbX.value = withSpring(snappedX, {
|
||||||
|
damping: sliderMotion.springDamping,
|
||||||
|
stiffness: sliderMotion.springStiffness,
|
||||||
|
mass: sliderMotion.springMass,
|
||||||
|
});
|
||||||
|
|
||||||
|
runOnJS(emitChange)(nextValue);
|
||||||
|
runOnJS(emitChangeEnd)(nextValue);
|
||||||
|
});
|
||||||
|
|
||||||
|
const gesture = Gesture.Race(panGesture, tapGesture);
|
||||||
|
|
||||||
|
const fillStyle = useAnimatedStyle(() => ({
|
||||||
|
width: thumbX.value,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const thumbStyle = useAnimatedStyle(() => ({
|
||||||
|
transform: [{ translateX: thumbX.value }, { scale: thumbScale.value }],
|
||||||
|
}));
|
||||||
|
|
||||||
|
const visualTicks = useMemo(() => {
|
||||||
|
if (!ticks || ticks.length === 0 || max <= min) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
return ticks
|
||||||
|
.map((tickValue) => {
|
||||||
|
const ratio = (tickValue - min) / (max - min);
|
||||||
|
const clampedRatio = Math.min(1, Math.max(0, ratio));
|
||||||
|
return { key: String(tickValue), left: `${clampedRatio * 100}%` };
|
||||||
|
});
|
||||||
|
}, [max, min, ticks]);
|
||||||
|
|
||||||
|
const handleAccessibilityAction = useCallback(
|
||||||
|
(event: AccessibilityActionEvent) => {
|
||||||
|
const direction = event.nativeEvent.actionName === 'increment' ? 1 : -1;
|
||||||
|
const next = quantize(
|
||||||
|
normalizedValue + direction * normalizedStep,
|
||||||
|
min,
|
||||||
|
max,
|
||||||
|
normalizedStep,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (next === normalizedValue) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
onChange(next);
|
||||||
|
onChangeEnd?.(next);
|
||||||
|
if (haptics) {
|
||||||
|
emitHaptic();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[emitHaptic, haptics, max, min, normalizedStep, normalizedValue, onChange, onChangeEnd],
|
||||||
|
);
|
||||||
|
|
||||||
|
const trackTop = (sliderSizes.minTouchSize - sliderSizes.trackHeight) / 2;
|
||||||
|
const thumbTop = (sliderSizes.minTouchSize - sliderSizes.thumbSize) / 2;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={[styles.root, disabled && styles.disabled]}>
|
||||||
|
{(label || format) ? (
|
||||||
|
<View style={styles.headerRow}>
|
||||||
|
<Text style={styles.headerLabel}>{label ?? ''}</Text>
|
||||||
|
<Text style={styles.headerValue}>{format(normalizedValue)}</Text>
|
||||||
|
</View>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<GestureDetector gesture={gesture}>
|
||||||
|
<View
|
||||||
|
onLayout={onTrackLayout}
|
||||||
|
style={styles.railContainer}
|
||||||
|
accessible
|
||||||
|
accessibilityRole="adjustable"
|
||||||
|
accessibilityLabel={label ?? 'Curseur'}
|
||||||
|
accessibilityActions={accessibilityActions as never}
|
||||||
|
onAccessibilityAction={handleAccessibilityAction}
|
||||||
|
accessibilityValue={{
|
||||||
|
min,
|
||||||
|
max,
|
||||||
|
now: normalizedValue,
|
||||||
|
text: format(normalizedValue),
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SliderTrack style={[styles.track, { top: trackTop }]}>
|
||||||
|
<SliderFill style={fillStyle} />
|
||||||
|
</SliderTrack>
|
||||||
|
|
||||||
|
{visualTicks.length > 0 ? (
|
||||||
|
<View pointerEvents="none" style={styles.ticksRow}>
|
||||||
|
{visualTicks.map((tick) => (
|
||||||
|
<View key={tick.key} style={[styles.tickMark, { left: tick.left }]} />
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<Animated.View style={[styles.thumbPosition, { top: thumbTop }, thumbStyle]}>
|
||||||
|
<SliderThumb />
|
||||||
|
</Animated.View>
|
||||||
|
</View>
|
||||||
|
</GestureDetector>
|
||||||
|
|
||||||
|
{showBounds ? (
|
||||||
|
<View style={styles.boundsRow}>
|
||||||
|
<Text style={styles.boundsText}>{format(min)}</Text>
|
||||||
|
<Text style={styles.boundsText}>{format(max)}</Text>
|
||||||
|
</View>
|
||||||
|
) : null}
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
root: {
|
||||||
|
gap: spacing[8],
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
opacity: 0.45,
|
||||||
|
},
|
||||||
|
headerRow: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
gap: spacing[8],
|
||||||
|
},
|
||||||
|
headerLabel: {
|
||||||
|
...typography.overlineSm,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
flexShrink: 1,
|
||||||
|
},
|
||||||
|
headerValue: {
|
||||||
|
...typography.cardTitle,
|
||||||
|
color: colors.textPrimary,
|
||||||
|
},
|
||||||
|
railContainer: {
|
||||||
|
minHeight: sliderSizes.minTouchSize,
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
track: {
|
||||||
|
position: 'absolute',
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
},
|
||||||
|
thumbPosition: {
|
||||||
|
position: 'absolute',
|
||||||
|
left: -sliderSizes.thumbRadius,
|
||||||
|
},
|
||||||
|
ticksRow: {
|
||||||
|
position: 'absolute',
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
top: sliderSizes.minTouchSize - sliderMetrics.trackHeight,
|
||||||
|
height: spacing[12],
|
||||||
|
},
|
||||||
|
tickMark: {
|
||||||
|
position: 'absolute',
|
||||||
|
width: spacing[2],
|
||||||
|
height: spacing[6],
|
||||||
|
borderRadius: spacing[2],
|
||||||
|
marginLeft: -spacing[2] / 2,
|
||||||
|
backgroundColor: colors.inputBorder,
|
||||||
|
},
|
||||||
|
boundsRow: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
|
boundsText: {
|
||||||
|
...typography.metadataSm,
|
||||||
|
fontFamily: typography.overlineSm.fontFamily,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default Slider;
|
||||||
14
src/components/ui/index.ts
Normal file
14
src/components/ui/index.ts
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
export { AttendeeSummary } from './AttendeeSummary';
|
||||||
|
export { Avatar, AVATAR_SIZES } from './Avatar';
|
||||||
|
export { AvatarStack } from './AvatarStack';
|
||||||
|
export { Header } from './Header';
|
||||||
|
export { RangeSlider } from './RangeSlider';
|
||||||
|
export { Screen } from './Screen';
|
||||||
|
export { Slider } from './Slider';
|
||||||
|
|
||||||
|
export type { AttendeeSummaryProps } from './AttendeeSummary';
|
||||||
|
export type { AvatarProps, AvatarSize } from './Avatar';
|
||||||
|
export type { AvatarStackItem, AvatarStackProps } from './AvatarStack';
|
||||||
|
export type { RangeSliderProps } from './RangeSlider';
|
||||||
|
export type { SliderProps } from './Slider';
|
||||||
|
|
||||||
80
src/components/ui/sliderParts.tsx
Normal file
80
src/components/ui/sliderParts.tsx
Normal file
@@ -0,0 +1,80 @@
|
|||||||
|
import { LinearGradient } from 'expo-linear-gradient';
|
||||||
|
import { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
|
||||||
|
import Animated from 'react-native-reanimated';
|
||||||
|
|
||||||
|
import { colors, gradientDirection, gradients } from '@/theme/colors';
|
||||||
|
import { borderRadius, sliderMetrics, sliderShadow } from '@/theme/spacing';
|
||||||
|
|
||||||
|
export const sliderSizes = {
|
||||||
|
trackHeight: sliderMetrics.trackHeight,
|
||||||
|
thumbSize: sliderMetrics.thumbSize,
|
||||||
|
thumbRadius: sliderMetrics.thumbSize / 2,
|
||||||
|
thumbBorderWidth: sliderMetrics.thumbBorderWidth,
|
||||||
|
minTouchSize: sliderMetrics.minTouchSize,
|
||||||
|
trackRadius: borderRadius.chip,
|
||||||
|
thumbHitSlop: (sliderMetrics.minTouchSize - sliderMetrics.thumbSize) / 2,
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
type SliderTrackProps = {
|
||||||
|
style?: StyleProp<ViewStyle>;
|
||||||
|
children?: React.ReactNode;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function SliderTrack({ style, children }: SliderTrackProps) {
|
||||||
|
return <View style={[styles.track, style]}>{children}</View>;
|
||||||
|
}
|
||||||
|
|
||||||
|
type SliderFillProps = {
|
||||||
|
style?: StyleProp<ViewStyle>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function SliderFill({ style }: SliderFillProps) {
|
||||||
|
return (
|
||||||
|
<Animated.View pointerEvents="none" style={[styles.fillMask, style]}>
|
||||||
|
<LinearGradient
|
||||||
|
colors={gradients.signature}
|
||||||
|
start={gradientDirection.start}
|
||||||
|
end={gradientDirection.end}
|
||||||
|
style={styles.fillGradient}
|
||||||
|
/>
|
||||||
|
</Animated.View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
type SliderThumbProps = {
|
||||||
|
style?: StyleProp<ViewStyle>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function SliderThumb({ style }: SliderThumbProps) {
|
||||||
|
return <Animated.View pointerEvents="none" style={[styles.thumb, style]} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
track: {
|
||||||
|
height: sliderSizes.trackHeight,
|
||||||
|
borderRadius: sliderSizes.trackRadius,
|
||||||
|
backgroundColor: colors.surfaceElevated,
|
||||||
|
overflow: 'hidden',
|
||||||
|
},
|
||||||
|
fillMask: {
|
||||||
|
height: sliderSizes.trackHeight,
|
||||||
|
borderRadius: sliderSizes.trackRadius,
|
||||||
|
overflow: 'hidden',
|
||||||
|
},
|
||||||
|
fillGradient: {
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
thumb: {
|
||||||
|
width: sliderSizes.thumbSize,
|
||||||
|
height: sliderSizes.thumbSize,
|
||||||
|
borderRadius: sliderSizes.thumbRadius,
|
||||||
|
borderWidth: sliderSizes.thumbBorderWidth,
|
||||||
|
borderColor: colors.primary,
|
||||||
|
backgroundColor: colors.onPrimary,
|
||||||
|
shadowColor: colors.primary,
|
||||||
|
shadowOffset: { width: 0, height: 0 },
|
||||||
|
shadowOpacity: sliderShadow.opacity,
|
||||||
|
shadowRadius: sliderShadow.radius,
|
||||||
|
elevation: sliderShadow.elevation,
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
@tailwind base;
|
|
||||||
@tailwind components;
|
|
||||||
@tailwind utilities;
|
|
||||||
@@ -13,7 +13,7 @@ const DEV_MOCK_SESSION_ENABLED = true;
|
|||||||
const DEV_MOCK_SESSION: Session = {
|
const DEV_MOCK_SESSION: Session = {
|
||||||
userId: 'dev-user',
|
userId: 'dev-user',
|
||||||
token: 'dev-token',
|
token: 'dev-token',
|
||||||
role: 'org',
|
role: 'user',
|
||||||
};
|
};
|
||||||
|
|
||||||
type AuthState = {
|
type AuthState = {
|
||||||
|
|||||||
@@ -46,6 +46,11 @@ export const colors = {
|
|||||||
canvas: palette.ink950,
|
canvas: palette.ink950,
|
||||||
surface: palette.ink800,
|
surface: palette.ink800,
|
||||||
surfaceElevated: palette.ink700,
|
surfaceElevated: palette.ink700,
|
||||||
|
inputBackground: palette.ink700,
|
||||||
|
inputBorder: palette.ink600,
|
||||||
|
inputBorderFocus: palette.violet,
|
||||||
|
inputPlaceholder: palette.grey400,
|
||||||
|
focusRing: 'rgba(123,61,255,0.22)',
|
||||||
border: palette.ink600,
|
border: palette.ink600,
|
||||||
/** Séparateur intra-carte, plus léger que `border` */
|
/** Séparateur intra-carte, plus léger que `border` */
|
||||||
divider: 'rgba(255,255,255,0.12)',
|
divider: 'rgba(255,255,255,0.12)',
|
||||||
|
|||||||
@@ -9,8 +9,6 @@ export const theme = {
|
|||||||
borderRadius,
|
borderRadius,
|
||||||
} as const;
|
} as const;
|
||||||
|
|
||||||
export * from './ThemeProvider';
|
|
||||||
export * from './useTheme';
|
|
||||||
export { borderRadius, colors, spacing, typography };
|
export { borderRadius, colors, spacing, typography };
|
||||||
|
|
||||||
export default theme;
|
export default theme;
|
||||||
|
|||||||
@@ -1,10 +1,15 @@
|
|||||||
export const spacing = {
|
export const spacing = {
|
||||||
|
2: 2,
|
||||||
4: 4,
|
4: 4,
|
||||||
|
6: 6,
|
||||||
8: 8,
|
8: 8,
|
||||||
12: 12,
|
12: 12,
|
||||||
16: 16,
|
16: 16,
|
||||||
|
20: 20,
|
||||||
24: 24,
|
24: 24,
|
||||||
|
26: 26,
|
||||||
32: 32,
|
32: 32,
|
||||||
|
44: 44,
|
||||||
} as const;
|
} as const;
|
||||||
|
|
||||||
export const space = spacing;
|
export const space = spacing;
|
||||||
@@ -15,4 +20,25 @@ export const borderRadius = {
|
|||||||
chip: 9999,
|
chip: 9999,
|
||||||
} as const;
|
} as const;
|
||||||
|
|
||||||
|
export const sliderMetrics = {
|
||||||
|
trackHeight: spacing[6],
|
||||||
|
thumbSize: spacing[26],
|
||||||
|
thumbBorderWidth: 3,
|
||||||
|
minTouchSize: spacing[44],
|
||||||
|
closeThumbThresholdPx: spacing[24],
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
export const sliderMotion = {
|
||||||
|
activeScale: 1.18,
|
||||||
|
springDamping: 20,
|
||||||
|
springStiffness: 240,
|
||||||
|
springMass: 0.4,
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
export const sliderShadow = {
|
||||||
|
opacity: 0.55,
|
||||||
|
radius: 12,
|
||||||
|
elevation: 6,
|
||||||
|
} as const;
|
||||||
|
|
||||||
export default spacing;
|
export default spacing;
|
||||||
|
|||||||
@@ -100,6 +100,24 @@ export const typography = {
|
|||||||
lineHeight: 22,
|
lineHeight: 22,
|
||||||
letterSpacing: 0,
|
letterSpacing: 0,
|
||||||
},
|
},
|
||||||
|
input: {
|
||||||
|
fontFamily: fontFamily.body,
|
||||||
|
fontSize: 16,
|
||||||
|
lineHeight: 22,
|
||||||
|
letterSpacing: 0,
|
||||||
|
},
|
||||||
|
inputLabel: {
|
||||||
|
fontFamily: fontFamily.bodySemi,
|
||||||
|
fontSize: 13,
|
||||||
|
lineHeight: 18,
|
||||||
|
letterSpacing: 0,
|
||||||
|
},
|
||||||
|
helper: {
|
||||||
|
fontFamily: fontFamily.body,
|
||||||
|
fontSize: 12,
|
||||||
|
lineHeight: 16,
|
||||||
|
letterSpacing: 0,
|
||||||
|
},
|
||||||
/** Libellé de bouton — 52 px de haut, rayon 14 px */
|
/** Libellé de bouton — 52 px de haut, rayon 14 px */
|
||||||
button: {
|
button: {
|
||||||
fontFamily: fontFamily.bodySemi,
|
fontFamily: fontFamily.bodySemi,
|
||||||
|
|||||||
@@ -1,10 +0,0 @@
|
|||||||
/** @type {import('tailwindcss').Config} */
|
|
||||||
module.exports = {
|
|
||||||
content: ["src/**/*.{html,js,ts,jsx,tsx}"],
|
|
||||||
presets: [require("nativewind/preset")],
|
|
||||||
theme: {
|
|
||||||
extend: {},
|
|
||||||
},
|
|
||||||
plugins: [],
|
|
||||||
}
|
|
||||||
|
|
||||||
Reference in New Issue
Block a user