@situaction/traquiste-mobile 1.0.0-next.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (168) hide show
  1. package/.eslintrc.js +5 -0
  2. package/.releaserc +12 -0
  3. package/CLAUDE.md +25 -0
  4. package/README.md +124 -0
  5. package/app.json +5 -0
  6. package/bitbucket-pipelines.yml +81 -0
  7. package/build/components/Button/Button.d.ts +31 -0
  8. package/build/components/Button/Button.d.ts.map +1 -0
  9. package/build/components/Button/Button.js +67 -0
  10. package/build/components/Button/Button.js.map +1 -0
  11. package/build/components/Button/Button.stories.d.ts +19 -0
  12. package/build/components/Button/Button.stories.d.ts.map +1 -0
  13. package/build/components/Button/Button.stories.js +95 -0
  14. package/build/components/Button/Button.stories.js.map +1 -0
  15. package/build/components/Button/index.d.ts +3 -0
  16. package/build/components/Button/index.d.ts.map +1 -0
  17. package/build/components/Button/index.js +2 -0
  18. package/build/components/Button/index.js.map +1 -0
  19. package/build/components/ButtonAction/ButtonAction.d.ts +21 -0
  20. package/build/components/ButtonAction/ButtonAction.d.ts.map +1 -0
  21. package/build/components/ButtonAction/ButtonAction.js +35 -0
  22. package/build/components/ButtonAction/ButtonAction.js.map +1 -0
  23. package/build/components/ButtonAction/ButtonAction.stories.d.ts +13 -0
  24. package/build/components/ButtonAction/ButtonAction.stories.d.ts.map +1 -0
  25. package/build/components/ButtonAction/ButtonAction.stories.js +51 -0
  26. package/build/components/ButtonAction/ButtonAction.stories.js.map +1 -0
  27. package/build/components/ButtonAction/index.d.ts +3 -0
  28. package/build/components/ButtonAction/index.d.ts.map +1 -0
  29. package/build/components/ButtonAction/index.js +2 -0
  30. package/build/components/ButtonAction/index.js.map +1 -0
  31. package/build/components/ButtonMap/ButtonMap.d.ts +18 -0
  32. package/build/components/ButtonMap/ButtonMap.d.ts.map +1 -0
  33. package/build/components/ButtonMap/ButtonMap.js +17 -0
  34. package/build/components/ButtonMap/ButtonMap.js.map +1 -0
  35. package/build/components/ButtonMap/ButtonMap.stories.d.ts +12 -0
  36. package/build/components/ButtonMap/ButtonMap.stories.d.ts.map +1 -0
  37. package/build/components/ButtonMap/ButtonMap.stories.js +36 -0
  38. package/build/components/ButtonMap/ButtonMap.stories.js.map +1 -0
  39. package/build/components/ButtonMap/index.d.ts +3 -0
  40. package/build/components/ButtonMap/index.d.ts.map +1 -0
  41. package/build/components/ButtonMap/index.js +2 -0
  42. package/build/components/ButtonMap/index.js.map +1 -0
  43. package/build/components/ButtonMenu/ButtonMenu.d.ts +21 -0
  44. package/build/components/ButtonMenu/ButtonMenu.d.ts.map +1 -0
  45. package/build/components/ButtonMenu/ButtonMenu.js +56 -0
  46. package/build/components/ButtonMenu/ButtonMenu.js.map +1 -0
  47. package/build/components/ButtonMenu/ButtonMenu.stories.d.ts +15 -0
  48. package/build/components/ButtonMenu/ButtonMenu.stories.d.ts.map +1 -0
  49. package/build/components/ButtonMenu/ButtonMenu.stories.js +52 -0
  50. package/build/components/ButtonMenu/ButtonMenu.stories.js.map +1 -0
  51. package/build/components/ButtonMenu/index.d.ts +3 -0
  52. package/build/components/ButtonMenu/index.d.ts.map +1 -0
  53. package/build/components/ButtonMenu/index.js +2 -0
  54. package/build/components/ButtonMenu/index.js.map +1 -0
  55. package/build/components/FilterChip/FilterChip.d.ts +28 -0
  56. package/build/components/FilterChip/FilterChip.d.ts.map +1 -0
  57. package/build/components/FilterChip/FilterChip.js +66 -0
  58. package/build/components/FilterChip/FilterChip.js.map +1 -0
  59. package/build/components/FilterChip/FilterChip.stories.d.ts +15 -0
  60. package/build/components/FilterChip/FilterChip.stories.d.ts.map +1 -0
  61. package/build/components/FilterChip/FilterChip.stories.js +55 -0
  62. package/build/components/FilterChip/FilterChip.stories.js.map +1 -0
  63. package/build/components/FilterChip/index.d.ts +3 -0
  64. package/build/components/FilterChip/index.d.ts.map +1 -0
  65. package/build/components/FilterChip/index.js +2 -0
  66. package/build/components/FilterChip/index.js.map +1 -0
  67. package/build/constants/colors.d.ts +2 -0
  68. package/build/constants/colors.d.ts.map +1 -0
  69. package/build/constants/colors.js +3 -0
  70. package/build/constants/colors.js.map +1 -0
  71. package/build/context/ThemeContext.d.ts +30 -0
  72. package/build/context/ThemeContext.d.ts.map +1 -0
  73. package/build/context/ThemeContext.js +34 -0
  74. package/build/context/ThemeContext.js.map +1 -0
  75. package/build/index.d.ts +7 -0
  76. package/build/index.d.ts.map +1 -0
  77. package/build/index.js +8 -0
  78. package/build/index.js.map +1 -0
  79. package/build/theme/index.d.ts +5 -0
  80. package/build/theme/index.d.ts.map +1 -0
  81. package/build/theme/index.js +6 -0
  82. package/build/theme/index.js.map +1 -0
  83. package/build/theme/tokens/dark.d.ts +8 -0
  84. package/build/theme/tokens/dark.d.ts.map +1 -0
  85. package/build/theme/tokens/dark.js +146 -0
  86. package/build/theme/tokens/dark.js.map +1 -0
  87. package/build/theme/tokens/light.d.ts +8 -0
  88. package/build/theme/tokens/light.d.ts.map +1 -0
  89. package/build/theme/tokens/light.js +152 -0
  90. package/build/theme/tokens/light.js.map +1 -0
  91. package/build/theme/type.d.ts +75 -0
  92. package/build/theme/type.d.ts.map +1 -0
  93. package/build/theme/type.js +7 -0
  94. package/build/theme/type.js.map +1 -0
  95. package/docs/README.md +73 -0
  96. package/docs/eslint.config.js +22 -0
  97. package/docs/index.html +16 -0
  98. package/docs/package-lock.json +5578 -0
  99. package/docs/package.json +37 -0
  100. package/docs/public/favicon.svg +1 -0
  101. package/docs/public/icons.svg +24 -0
  102. package/docs/src/App.css +184 -0
  103. package/docs/src/App.tsx +38 -0
  104. package/docs/src/assets/hero.png +0 -0
  105. package/docs/src/assets/react.svg +1 -0
  106. package/docs/src/assets/vite.svg +1 -0
  107. package/docs/src/components/Layout.tsx +108 -0
  108. package/docs/src/components/LiveEditor.tsx +294 -0
  109. package/docs/src/components/PropsTable.tsx +101 -0
  110. package/docs/src/components/Sidebar.tsx +103 -0
  111. package/docs/src/components/TableOfContents.tsx +75 -0
  112. package/docs/src/context/ColorModeContext.tsx +34 -0
  113. package/docs/src/index.css +76 -0
  114. package/docs/src/lib/createComponentPage.tsx +270 -0
  115. package/docs/src/main.tsx +13 -0
  116. package/docs/src/pages/Examples.tsx +273 -0
  117. package/docs/src/pages/Home.tsx +70 -0
  118. package/docs/src/pages/components/button-action.ts +88 -0
  119. package/docs/src/pages/components/button-map.ts +67 -0
  120. package/docs/src/pages/components/button-menu.ts +90 -0
  121. package/docs/src/pages/components/button.ts +158 -0
  122. package/docs/src/pages/components/filter-chip.ts +109 -0
  123. package/docs/tsconfig.app.json +32 -0
  124. package/docs/tsconfig.json +7 -0
  125. package/docs/tsconfig.node.json +24 -0
  126. package/docs/vite.config.ts +18 -0
  127. package/ios/.xcode.env +11 -0
  128. package/ios/Podfile +63 -0
  129. package/ios/Podfile.properties.json +4 -0
  130. package/ios/situactiontraquistemobile/AppDelegate.swift +69 -0
  131. package/ios/situactiontraquistemobile/Images.xcassets/AppIcon.appiconset/Contents.json +13 -0
  132. package/ios/situactiontraquistemobile/Images.xcassets/Contents.json +6 -0
  133. package/ios/situactiontraquistemobile/Images.xcassets/SplashScreenLegacy.imageset/Contents.json +21 -0
  134. package/ios/situactiontraquistemobile/Images.xcassets/SplashScreenLegacy.imageset/SplashScreenLegacy.png +0 -0
  135. package/ios/situactiontraquistemobile/Info.plist +53 -0
  136. package/ios/situactiontraquistemobile/SplashScreen.storyboard +47 -0
  137. package/ios/situactiontraquistemobile/Supporting/Expo.plist +6 -0
  138. package/ios/situactiontraquistemobile/situactiontraquistemobile-Bridging-Header.h +3 -0
  139. package/ios/situactiontraquistemobile.xcodeproj/project.pbxproj +432 -0
  140. package/ios/situactiontraquistemobile.xcodeproj/xcshareddata/xcschemes/situactiontraquistemobile.xcscheme +88 -0
  141. package/jest.config.js +197 -0
  142. package/package.json +90 -0
  143. package/src/components/.gitkeep +0 -0
  144. package/src/components/Button/Button.stories.tsx +123 -0
  145. package/src/components/Button/Button.tsx +128 -0
  146. package/src/components/Button/index.ts +2 -0
  147. package/src/components/ButtonAction/ButtonAction.stories.tsx +67 -0
  148. package/src/components/ButtonAction/ButtonAction.tsx +67 -0
  149. package/src/components/ButtonAction/index.ts +2 -0
  150. package/src/components/ButtonMap/ButtonMap.stories.tsx +49 -0
  151. package/src/components/ButtonMap/ButtonMap.tsx +40 -0
  152. package/src/components/ButtonMap/index.ts +2 -0
  153. package/src/components/ButtonMenu/ButtonMenu.stories.tsx +68 -0
  154. package/src/components/ButtonMenu/ButtonMenu.tsx +97 -0
  155. package/src/components/ButtonMenu/index.ts +2 -0
  156. package/src/components/FilterChip/FilterChip.stories.tsx +71 -0
  157. package/src/components/FilterChip/FilterChip.tsx +124 -0
  158. package/src/components/FilterChip/index.ts +2 -0
  159. package/src/constants/colors.ts +2 -0
  160. package/src/context/ThemeContext.tsx +84 -0
  161. package/src/index.ts +23 -0
  162. package/src/theme/index.ts +20 -0
  163. package/src/theme/tokens/dark.ts +160 -0
  164. package/src/theme/tokens/light.ts +166 -0
  165. package/src/theme/type.ts +122 -0
  166. package/src/types/.gitkeep +0 -0
  167. package/src/utils/.gitkeep +0 -0
  168. package/tsconfig.json +9 -0
@@ -0,0 +1,88 @@
1
+ /** Doc page for the ButtonAction component */
2
+ import { View } from 'react-native'
3
+ import { X, DotsThree, ArrowLeft, MagnifyingGlass, Bell } from '@phosphor-icons/react'
4
+ import { createComponentPage } from '../../lib/createComponentPage'
5
+ import type { PropDef } from '../../lib/createComponentPage'
6
+ import { ButtonAction } from '../../../../src/components/ButtonAction'
7
+
8
+ const PROPS: PropDef[] = [
9
+ {
10
+ name: 'icon',
11
+ type: 'React.ReactElement',
12
+ required: true,
13
+ description: 'Icône affichée (composant Phosphor Duotone).',
14
+ },
15
+ {
16
+ name: 'size',
17
+ type: "'XS' | 'S' | 'M' | 'L' | 'XL' | 'XXL'",
18
+ required: false,
19
+ default: "'M'",
20
+ description: 'Taille de l\'icône — détermine aussi la taille du conteneur (12 → 32px).',
21
+ },
22
+ {
23
+ name: 'disabled',
24
+ type: 'boolean',
25
+ required: false,
26
+ default: 'false',
27
+ description: 'Désactive le bouton (opacity 0.5, interactions bloquées).',
28
+ },
29
+ {
30
+ name: 'onPress',
31
+ type: '() => void',
32
+ required: false,
33
+ description: "Callback déclenché à l'appui.",
34
+ },
35
+ {
36
+ name: 'style',
37
+ type: 'StyleProp<ViewStyle>',
38
+ required: false,
39
+ description: 'Styles supplémentaires appliqués au conteneur.',
40
+ },
41
+ ]
42
+
43
+ export default createComponentPage({
44
+ title: 'ButtonAction',
45
+ status: 'stable',
46
+ description:
47
+ "Pressable icône sans background ni border. Utilisé pour les actions contextuelles (fermer, naviguer, options). Container dimensionné à la taille exacte de l'icône.",
48
+ scope: { ButtonAction, View, X, DotsThree, ArrowLeft, MagnifyingGlass, Bell },
49
+ demos: [
50
+ {
51
+ section: 'Utilisation',
52
+ title: 'Default',
53
+ code: `<ButtonAction icon={<X />} size="L" />`,
54
+ },
55
+ {
56
+ title: 'Disabled',
57
+ code: `<ButtonAction icon={<X />} size="L" disabled />`,
58
+ },
59
+ {
60
+ section: 'Tailles',
61
+ sectionDescription:
62
+ 'Six tailles couvrent tous les contextes, de XS (12px) pour les espaces contraints à XXL (32px) pour les actions proéminentes.',
63
+ title: 'Toutes les tailles',
64
+ code: `<View style={{ flexDirection: 'row', gap: 16, alignItems: 'center' }}>
65
+ <ButtonAction size="XS" icon={<X />} />
66
+ <ButtonAction size="S" icon={<X />} />
67
+ <ButtonAction size="M" icon={<X />} />
68
+ <ButtonAction size="L" icon={<X />} />
69
+ <ButtonAction size="XL" icon={<X />} />
70
+ <ButtonAction size="XXL" icon={<X />} />
71
+ </View>`,
72
+ },
73
+ {
74
+ section: 'Exemples d\'usage',
75
+ sectionDescription:
76
+ "Actions contextuelles typiques dans une interface mobile : retour, recherche, notifications, options.",
77
+ title: 'Actions contextuelles',
78
+ code: `<View style={{ flexDirection: 'row', gap: 16, alignItems: 'center' }}>
79
+ <ButtonAction size="L" icon={<ArrowLeft />} />
80
+ <ButtonAction size="L" icon={<MagnifyingGlass />} />
81
+ <ButtonAction size="L" icon={<Bell />} />
82
+ <ButtonAction size="L" icon={<DotsThree />} />
83
+ <ButtonAction size="L" icon={<X />} />
84
+ </View>`,
85
+ },
86
+ ],
87
+ props: PROPS,
88
+ })
@@ -0,0 +1,67 @@
1
+ /** Doc page for the ButtonMap component */
2
+ import { View } from 'react-native'
3
+ import { Plus, Minus, Crosshair, MapPin, MagnifyingGlass } from '@phosphor-icons/react'
4
+ import { createComponentPage } from '../../lib/createComponentPage'
5
+ import type { PropDef } from '../../lib/createComponentPage'
6
+ import { ButtonMap } from '../../../../src/components/ButtonMap'
7
+
8
+ const PROPS: PropDef[] = [
9
+ {
10
+ name: 'icon',
11
+ type: 'React.ReactElement',
12
+ required: true,
13
+ description: 'Icône affichée dans le bouton (composant Phosphor Duotone).',
14
+ },
15
+ {
16
+ name: 'disabled',
17
+ type: 'boolean',
18
+ required: false,
19
+ default: 'false',
20
+ description: 'Désactive le bouton (couleurs atténuées, interactions bloquées).',
21
+ },
22
+ {
23
+ name: 'onPress',
24
+ type: '() => void',
25
+ required: false,
26
+ description: "Callback déclenché à l'appui.",
27
+ },
28
+ {
29
+ name: 'style',
30
+ type: 'StyleProp<ViewStyle>',
31
+ required: false,
32
+ description: 'Styles supplémentaires appliqués au conteneur (surcharge la shadow).',
33
+ },
34
+ ]
35
+
36
+ export default createComponentPage({
37
+ title: 'ButtonMap',
38
+ status: 'stable',
39
+ description:
40
+ "Bouton circulaire pour les interfaces cartographiques. Wrapper de Button (tertiary, icon-only-rounded, S) avec une ombre spécifique cartographie.",
41
+ scope: { ButtonMap, View, Plus, Minus, Crosshair, MapPin, MagnifyingGlass },
42
+ demos: [
43
+ {
44
+ section: 'Utilisation',
45
+ title: 'Default',
46
+ code: `<ButtonMap icon={<Crosshair />} />`,
47
+ },
48
+ {
49
+ title: 'Disabled',
50
+ code: `<ButtonMap icon={<Crosshair />} disabled />`,
51
+ },
52
+ {
53
+ section: 'Exemple contrôles carte',
54
+ sectionDescription:
55
+ "Disposition typique sur une interface carte : zoom, recentrage et recherche empilés verticalement.",
56
+ title: 'Contrôles carte',
57
+ code: `<View style={{ gap: 8, alignItems: 'flex-start' }}>
58
+ <ButtonMap icon={<Plus />} />
59
+ <ButtonMap icon={<Minus />} />
60
+ <ButtonMap icon={<Crosshair />} />
61
+ <ButtonMap icon={<MapPin />} />
62
+ <ButtonMap icon={<MagnifyingGlass />} disabled />
63
+ </View>`,
64
+ },
65
+ ],
66
+ props: PROPS,
67
+ })
@@ -0,0 +1,90 @@
1
+ /** Doc page for the ButtonMenu component */
2
+ import { View } from 'react-native'
3
+ import { House, MagnifyingGlass, Bell, Gear } from '@phosphor-icons/react'
4
+ import { createComponentPage } from '../../lib/createComponentPage'
5
+ import type { PropDef } from '../../lib/createComponentPage'
6
+ import {ButtonMenu} from "../../../../src/components/ButtonMenu";
7
+
8
+ const PROPS: PropDef[] = [
9
+ {
10
+ name: 'icon',
11
+ type: 'ReactElement',
12
+ required: true,
13
+ description: 'Icône affichée dans le bouton (composant Phosphor Duotone).',
14
+ },
15
+ {
16
+ name: 'state',
17
+ type: "'default' | 'active' | 'disabled'",
18
+ required: false,
19
+ default: "'default'",
20
+ description: 'État visuel du bouton.',
21
+ },
22
+ {
23
+ name: 'notif',
24
+ type: 'boolean',
25
+ required: false,
26
+ default: 'false',
27
+ description: 'Affiche un point de notification rouge en haut à droite.',
28
+ },
29
+ {
30
+ name: 'onPress',
31
+ type: '() => void',
32
+ required: false,
33
+ description: "Callback déclenché à l'appui. Ignoré si state est 'disabled'.",
34
+ },
35
+ {
36
+ name: 'style',
37
+ type: 'StyleProp<ViewStyle>',
38
+ required: false,
39
+ description: 'Styles supplémentaires appliqués au conteneur.',
40
+ },
41
+ ]
42
+
43
+ export default createComponentPage({
44
+ title: 'ButtonMenu',
45
+ status: 'stable',
46
+ description:
47
+ "Bouton icône pour barres de navigation ou menus. Supporte trois états (default, active, disabled) et un point de notification.",
48
+ scope: { ButtonMenu, View, House, MagnifyingGlass, Bell, Gear },
49
+ demos: [
50
+ {
51
+ section: 'États',
52
+ sectionDescription:
53
+ 'Trois états couvrent tous les contextes : default pour un bouton inactif, active pour le bouton sélectionné, disabled pour une action indisponible.',
54
+ title: 'Default',
55
+ code: `<ButtonMenu icon={<House />} state="default" />`,
56
+ },
57
+ {
58
+ title: 'Active',
59
+ code: `<ButtonMenu icon={<House />} state="active" />`,
60
+ },
61
+ {
62
+ title: 'Disabled',
63
+ code: `<ButtonMenu icon={<House />} state="disabled" />`,
64
+ },
65
+ {
66
+ section: 'Notification',
67
+ sectionDescription:
68
+ 'Le point de notification signale une activité en attente. Il peut être combiné avec n\'importe quel état.',
69
+ title: 'Avec notification',
70
+ code: `<ButtonMenu icon={<Bell />} notif />`,
71
+ },
72
+ {
73
+ title: 'Active avec notification',
74
+ code: `<ButtonMenu icon={<Bell />} state="active" notif />`,
75
+ },
76
+ {
77
+ section: 'Exemple barre de navigation',
78
+ sectionDescription:
79
+ 'Utilisation typique dans une barre de navigation avec un bouton actif et un indicateur de notification.',
80
+ title: 'Barre de navigation',
81
+ code: `<View style={{ flexDirection: 'row', gap: 8 }}>
82
+ <ButtonMenu icon={<House />} state="active" />
83
+ <ButtonMenu icon={<MagnifyingGlass />} state="default" />
84
+ <ButtonMenu icon={<Bell />} state="default" notif />
85
+ <ButtonMenu icon={<Gear />} state="default" />
86
+ </View>`,
87
+ },
88
+ ],
89
+ props: PROPS,
90
+ })
@@ -0,0 +1,158 @@
1
+ /** Doc page for the Button component */
2
+ import { Button } from '@situaction/traquiste-mobile'
3
+ import { View } from 'react-native'
4
+ import { ArrowRight, Check, Trash, Plus, X, MagnifyingGlass } from '@phosphor-icons/react'
5
+ import { createComponentPage } from '../../lib/createComponentPage'
6
+ import type { PropDef } from '../../lib/createComponentPage'
7
+
8
+ const PROPS: PropDef[] = [
9
+ {
10
+ name: 'variant',
11
+ type: "'primary' | 'tertiary' | 'ghost' | 'destructive'",
12
+ required: false,
13
+ default: "'primary'",
14
+ description: 'Style visuel du bouton.',
15
+ },
16
+ {
17
+ name: 'size',
18
+ type: "'S' | 'M' | 'L' | 'XL'",
19
+ required: false,
20
+ default: "'M'",
21
+ description: 'Taille du bouton.',
22
+ },
23
+ {
24
+ name: 'content',
25
+ type: "'icon-only' | 'icon-only-rounded' | 'icon-both'",
26
+ required: false,
27
+ default: "'icon-both'",
28
+ description: 'Disposition du contenu : icône seule, icône seule arrondie, ou icône + label.',
29
+ },
30
+ {
31
+ name: 'label',
32
+ type: 'string',
33
+ required: false,
34
+ description: "Texte affiché dans le bouton. Requis lorsque content est 'icon-both'.",
35
+ },
36
+ {
37
+ name: 'iconLeft',
38
+ type: 'React.ReactElement',
39
+ required: false,
40
+ description: 'Icône à gauche du label (composant Phosphor).',
41
+ },
42
+ {
43
+ name: 'iconRight',
44
+ type: 'React.ReactElement',
45
+ required: false,
46
+ description: 'Icône à droite du label (composant Phosphor).',
47
+ },
48
+ {
49
+ name: 'disabled',
50
+ type: 'boolean',
51
+ required: false,
52
+ default: 'false',
53
+ description: 'Désactive le bouton (couleurs atténuées, interactions bloquées).',
54
+ },
55
+ {
56
+ name: 'onPress',
57
+ type: '() => void',
58
+ required: false,
59
+ description: "Callback déclenché à l'appui.",
60
+ },
61
+ {
62
+ name: 'style',
63
+ type: 'StyleProp<ViewStyle>',
64
+ required: false,
65
+ description: 'Styles supplémentaires appliqués au conteneur.',
66
+ },
67
+ ]
68
+
69
+ export default createComponentPage({
70
+ title: 'Button',
71
+ status: 'stable',
72
+ figma:
73
+ 'https://www.figma.com/design/LTZ6w6ObO9IZVKefw9gndi/%F0%9F%93%B2-TRAQ-UI-STE-MOBILE?node-id=1655-7902&p=f&m=dev',
74
+ description:
75
+ 'Bouton d\'action principal. Disponible en quatre variantes, quatre tailles et trois dispositions de contenu.',
76
+ scope: { Button, View, ArrowRight, Check, Trash, Plus, X, MagnifyingGlass },
77
+ demos: [
78
+ {
79
+ section: 'Variantes',
80
+ sectionDescription:
81
+ 'Quatre variantes couvrent tous les niveaux d\'importance. Utilisez primary pour l\'action principale, tertiary ou ghost pour les actions secondaires, et destructive pour les actions irréversibles.',
82
+ title: 'Primary',
83
+ code: `<Button variant="primary" label="Valider" />`,
84
+ },
85
+ {
86
+ title: 'Tertiary',
87
+ code: `<Button variant="tertiary" label="Annuler" />`,
88
+ },
89
+ {
90
+ title: 'Ghost',
91
+ code: `<Button variant="ghost" label="En savoir plus" />`,
92
+ },
93
+ {
94
+ title: 'Destructive',
95
+ code: `<Button variant="destructive" label="Supprimer" />`,
96
+ },
97
+ {
98
+ section: 'Icônes',
99
+ sectionDescription:
100
+ 'Les icônes Phosphor peuvent être placées à gauche, à droite, ou des deux côtés du label. La couleur et la taille sont injectées automatiquement selon la variante et la taille du bouton.',
101
+ title: 'Icon left',
102
+ code: `<View style={{ gap: 12, alignItems: 'flex-start' }}>
103
+ <Button variant="primary" label="Rechercher" iconLeft={<MagnifyingGlass />} />
104
+ <Button variant="tertiary" label="Ajouter" iconLeft={<Plus />} />
105
+ <Button variant="ghost" label="Confirmer" iconLeft={<Check />} />
106
+ <Button variant="destructive" label="Supprimer" iconLeft={<Trash />} />
107
+ </View>`,
108
+ },
109
+ {
110
+ title: 'Icon right',
111
+ code: `<View style={{ gap: 12, alignItems: 'flex-start' }}>
112
+ <Button variant="primary" label="Suivant" iconRight={<ArrowRight />} />
113
+ <Button variant="tertiary" label="Fermer" iconRight={<X />} />
114
+ </View>`,
115
+ },
116
+ {
117
+ title: 'Icon left + right',
118
+ code: `<View style={{ gap: 12, alignItems: 'flex-start' }}>
119
+ <Button variant="primary" label="Rechercher" iconLeft={<MagnifyingGlass />} iconRight={<ArrowRight />} />
120
+ <Button variant="tertiary" label="Supprimer" iconLeft={<Trash />} iconRight={<X />} />
121
+ </View>`,
122
+ },
123
+ {
124
+ title: 'Icon only',
125
+ code: `<View style={{ flexDirection: 'row', gap: 12 }}>
126
+ <Button variant="primary" content="icon-only" iconLeft={<Plus />} />
127
+ <Button variant="tertiary" content="icon-only" iconLeft={<MagnifyingGlass />} />
128
+ <Button variant="ghost" content="icon-only" iconLeft={<X />} />
129
+ <Button variant="destructive" content="icon-only-rounded" iconLeft={<Trash />} />
130
+ </View>`,
131
+ },
132
+ {
133
+ section: 'Tailles',
134
+ sectionDescription:
135
+ 'Quatre tailles permettent d\'adapter le bouton à chaque contexte : S pour les espaces contraints, XL pour les CTA proéminents.',
136
+ title: 'Toutes les tailles',
137
+ code: `<View style={{ gap: 12, alignItems: 'flex-start' }}>
138
+ <Button size="S" label="Small" iconLeft={<Check />} />
139
+ <Button size="M" label="Medium" iconLeft={<Check />} />
140
+ <Button size="L" label="Large" iconLeft={<Check />} />
141
+ <Button size="XL" label="XLarge" iconLeft={<Check />} />
142
+ </View>`,
143
+ },
144
+ {
145
+ section: 'États',
146
+ sectionDescription:
147
+ 'Un bouton désactivé indique qu\'une action n\'est pas disponible. Les couleurs sont atténuées sans modifier l\'opacité du composant.',
148
+ title: 'Disabled',
149
+ code: `<View style={{ gap: 12, alignItems: 'flex-start' }}>
150
+ <Button variant="primary" disabled label="Primary" iconLeft={<Check />} />
151
+ <Button variant="tertiary" disabled label="Tertiary" iconLeft={<Check />} />
152
+ <Button variant="ghost" disabled label="Ghost" iconLeft={<Check />} />
153
+ <Button variant="destructive" disabled label="Destructive" iconLeft={<Trash />} />
154
+ </View>`,
155
+ },
156
+ ],
157
+ props: PROPS,
158
+ })
@@ -0,0 +1,109 @@
1
+ /** Doc page for the FilterChip component */
2
+ import { View } from 'react-native'
3
+ import { Funnel, CaretDown, X, MagnifyingGlass } from '@phosphor-icons/react'
4
+ import { createComponentPage } from '../../lib/createComponentPage'
5
+ import type { PropDef } from '../../lib/createComponentPage'
6
+ import { FilterChip } from '../../../../src/components/FilterChip'
7
+
8
+ const PROPS: PropDef[] = [
9
+ {
10
+ name: 'type',
11
+ type: "'icon' | 'icon-text'",
12
+ required: false,
13
+ default: "'icon-text'",
14
+ description: "Disposition du contenu : icône seule ou icône + label.",
15
+ },
16
+ {
17
+ name: 'selected',
18
+ type: 'boolean',
19
+ required: false,
20
+ default: 'false',
21
+ description: 'État de sélection contrôlé. Affiche une bordure épaisse quand actif.',
22
+ },
23
+ {
24
+ name: 'disabled',
25
+ type: 'boolean',
26
+ required: false,
27
+ default: 'false',
28
+ description: 'Désactive le chip (couleurs atténuées, interactions bloquées).',
29
+ },
30
+ {
31
+ name: 'label',
32
+ type: 'string',
33
+ required: false,
34
+ description: "Texte affiché dans le chip. Requis lorsque type est 'icon-text'.",
35
+ },
36
+ {
37
+ name: 'iconLeft',
38
+ type: 'React.ReactElement',
39
+ required: false,
40
+ description: 'Icône à gauche du label (composant Phosphor Duotone, 20px).',
41
+ },
42
+ {
43
+ name: 'iconRight',
44
+ type: 'React.ReactElement',
45
+ required: false,
46
+ description: 'Icône à droite du label — typiquement un caret ou une croix (16px).',
47
+ },
48
+ {
49
+ name: 'onPress',
50
+ type: '() => void',
51
+ required: false,
52
+ description: "Callback déclenché à l'appui.",
53
+ },
54
+ {
55
+ name: 'style',
56
+ type: 'StyleProp<ViewStyle>',
57
+ required: false,
58
+ description: 'Styles supplémentaires appliqués au wrapper externe.',
59
+ },
60
+ ]
61
+
62
+ export default createComponentPage({
63
+ title: 'FilterChip',
64
+ status: 'stable',
65
+ description:
66
+ 'Chip pill pour les barres de filtres. Supporte un état de sélection contrôlé, une icône gauche et une icône droite (caret ou croix).',
67
+ scope: { FilterChip, View, Funnel, CaretDown, X, MagnifyingGlass },
68
+ demos: [
69
+ {
70
+ section: 'Types',
71
+ sectionDescription:
72
+ "Deux dispositions : icon-text pour les filtres avec label, icon pour les filtres compacts.",
73
+ title: 'Icon + texte',
74
+ code: `<FilterChip label="Filtrer" iconLeft={<Funnel />} iconRight={<CaretDown />} />`,
75
+ },
76
+ {
77
+ title: 'Icône seule',
78
+ code: `<FilterChip type="icon" iconLeft={<MagnifyingGlass />} />`,
79
+ },
80
+ {
81
+ section: 'États',
82
+ sectionDescription:
83
+ 'Default pour un filtre inactif, selected pour un filtre appliqué (bordure épaisse), disabled pour une option indisponible.',
84
+ title: 'Default',
85
+ code: `<FilterChip label="Catégorie" iconLeft={<Funnel />} iconRight={<CaretDown />} />`,
86
+ },
87
+ {
88
+ title: 'Selected',
89
+ code: `<FilterChip label="Catégorie" iconLeft={<Funnel />} iconRight={<X />} selected />`,
90
+ },
91
+ {
92
+ title: 'Disabled',
93
+ code: `<FilterChip label="Catégorie" iconLeft={<Funnel />} disabled />`,
94
+ },
95
+ {
96
+ section: 'Exemple barre de filtres',
97
+ sectionDescription:
98
+ 'Usage typique : plusieurs chips en ligne, certains sélectionnés avec une icône de suppression.',
99
+ title: 'Barre de filtres',
100
+ code: `<View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
101
+ <FilterChip label="Catégorie" iconLeft={<Funnel />} iconRight={<CaretDown />} />
102
+ <FilterChip label="Prix" iconLeft={<Funnel />} iconRight={<X />} selected />
103
+ <FilterChip label="Date" iconLeft={<Funnel />} iconRight={<X />} selected />
104
+ <FilterChip type="icon" iconLeft={<MagnifyingGlass />} />
105
+ </View>`,
106
+ },
107
+ ],
108
+ props: PROPS,
109
+ })
@@ -0,0 +1,32 @@
1
+ {
2
+ "compilerOptions": {
3
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
4
+ "target": "es2023",
5
+ "lib": ["ES2023", "DOM"],
6
+ "module": "esnext",
7
+ "types": ["vite/client", "react", "react-native"],
8
+ "skipLibCheck": true,
9
+
10
+ /* Bundler mode */
11
+ "moduleResolution": "bundler",
12
+ "allowImportingTsExtensions": true,
13
+ "verbatimModuleSyntax": true,
14
+ "moduleDetection": "force",
15
+ "noEmit": true,
16
+ "jsx": "react-jsx",
17
+
18
+ /* Linting */
19
+ "noUnusedLocals": true,
20
+ "noUnusedParameters": true,
21
+ "erasableSyntaxOnly": true,
22
+ "noFallthroughCasesInSwitch": true,
23
+
24
+ /* Path aliases */
25
+ "ignoreDeprecations": "6.0",
26
+ "baseUrl": ".",
27
+ "paths": {
28
+ "@situaction/traquiste-mobile": ["../src/index.ts"]
29
+ }
30
+ },
31
+ "include": ["src"]
32
+ }
@@ -0,0 +1,7 @@
1
+ {
2
+ "files": [],
3
+ "references": [
4
+ { "path": "./tsconfig.app.json" },
5
+ { "path": "./tsconfig.node.json" }
6
+ ]
7
+ }
@@ -0,0 +1,24 @@
1
+ {
2
+ "compilerOptions": {
3
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
4
+ "target": "es2023",
5
+ "lib": ["ES2023"],
6
+ "module": "esnext",
7
+ "types": ["node"],
8
+ "skipLibCheck": true,
9
+
10
+ /* Bundler mode */
11
+ "moduleResolution": "bundler",
12
+ "allowImportingTsExtensions": true,
13
+ "verbatimModuleSyntax": true,
14
+ "moduleDetection": "force",
15
+ "noEmit": true,
16
+
17
+ /* Linting */
18
+ "noUnusedLocals": true,
19
+ "noUnusedParameters": true,
20
+ "erasableSyntaxOnly": true,
21
+ "noFallthroughCasesInSwitch": true
22
+ },
23
+ "include": ["vite.config.ts"]
24
+ }
@@ -0,0 +1,18 @@
1
+ import { defineConfig } from 'vite'
2
+ import react from '@vitejs/plugin-react'
3
+ import path from 'path'
4
+
5
+ export default defineConfig({
6
+ server: {
7
+ host: '0.0.0.0',
8
+ },
9
+ plugins: [react()],
10
+ resolve: {
11
+ alias: [
12
+ // Redirect react-native imports to react-native-web for browser rendering
13
+ { find: /^react-native$/, replacement: 'react-native-web' },
14
+ // Point the lib alias to local source for dev without publishing
15
+ { find: '@situaction/traquiste-mobile', replacement: path.resolve(__dirname, '../src/index.ts') },
16
+ ],
17
+ },
18
+ })
package/ios/.xcode.env ADDED
@@ -0,0 +1,11 @@
1
+ # This `.xcode.env` file is versioned and is used to source the environment
2
+ # used when running script phases inside Xcode.
3
+ # To customize your local environment, you can create an `.xcode.env.local`
4
+ # file that is not versioned.
5
+
6
+ # NODE_BINARY variable contains the PATH to the node executable.
7
+ #
8
+ # Customize the NODE_BINARY variable here.
9
+ # For example, to use nvm with brew, add the following line
10
+ # . "$(brew --prefix nvm)/nvm.sh" --no-use
11
+ export NODE_BINARY=$(command -v node)
package/ios/Podfile ADDED
@@ -0,0 +1,63 @@
1
+ require File.join(File.dirname(`node --print "require.resolve('expo/package.json')"`), "scripts/autolinking")
2
+ require File.join(File.dirname(`node --print "require.resolve('react-native/package.json')"`), "scripts/react_native_pods")
3
+
4
+ require 'json'
5
+ podfile_properties = JSON.parse(File.read(File.join(__dir__, 'Podfile.properties.json'))) rescue {}
6
+
7
+ def ccache_enabled?(podfile_properties)
8
+ # Environment variable takes precedence
9
+ return ENV['USE_CCACHE'] == '1' if ENV['USE_CCACHE']
10
+
11
+ # Fall back to Podfile properties
12
+ podfile_properties['apple.ccacheEnabled'] == 'true'
13
+ end
14
+
15
+ ENV['EX_DEV_CLIENT_NETWORK_INSPECTOR'] ||= podfile_properties['EX_DEV_CLIENT_NETWORK_INSPECTOR']
16
+ ENV['RCT_USE_RN_DEP'] ||= '1' if podfile_properties['ios.buildReactNativeFromSource'] != 'true'
17
+ ENV['RCT_USE_PREBUILT_RNCORE'] ||= '1' if podfile_properties['ios.buildReactNativeFromSource'] != 'true'
18
+ ENV['RCT_HERMES_V1_ENABLED'] ||= '1' if podfile_properties['expo.useHermesV1'] == 'true'
19
+ platform :ios, podfile_properties['ios.deploymentTarget'] || '15.1'
20
+
21
+ prepare_react_native_project!
22
+
23
+ target 'situactiontraquistemobile' do
24
+ use_expo_modules!
25
+
26
+ if ENV['EXPO_USE_COMMUNITY_AUTOLINKING'] == '1'
27
+ config_command = ['node', '-e', "process.argv=['', '', 'config'];require('@react-native-community/cli').run()"];
28
+ else
29
+ config_command = [
30
+ 'node',
31
+ '--no-warnings',
32
+ '--eval',
33
+ 'require(\'expo/bin/autolinking\')',
34
+ 'expo-modules-autolinking',
35
+ 'react-native-config',
36
+ '--json',
37
+ '--platform',
38
+ 'ios'
39
+ ]
40
+ end
41
+
42
+ config = use_native_modules!(config_command)
43
+
44
+ use_frameworks! :linkage => podfile_properties['ios.useFrameworks'].to_sym if podfile_properties['ios.useFrameworks']
45
+ use_frameworks! :linkage => ENV['USE_FRAMEWORKS'].to_sym if ENV['USE_FRAMEWORKS']
46
+
47
+ use_react_native!(
48
+ :path => config[:reactNativePath],
49
+ :hermes_enabled => podfile_properties['expo.jsEngine'] == nil || podfile_properties['expo.jsEngine'] == 'hermes',
50
+ # An absolute path to your application root.
51
+ :app_path => "#{Pod::Config.instance.installation_root}/..",
52
+ :privacy_file_aggregation_enabled => podfile_properties['apple.privacyManifestAggregationEnabled'] != 'false',
53
+ )
54
+
55
+ post_install do |installer|
56
+ react_native_post_install(
57
+ installer,
58
+ config[:reactNativePath],
59
+ :mac_catalyst_enabled => false,
60
+ :ccache_enabled => ccache_enabled?(podfile_properties),
61
+ )
62
+ end
63
+ end