@situaction/traquiste-mobile 1.0.0-next.2 → 1.0.0-next.4

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 (99) hide show
  1. package/package.json +4 -1
  2. package/.eslintrc.js +0 -5
  3. package/.releaserc +0 -12
  4. package/CLAUDE.md +0 -25
  5. package/app.json +0 -5
  6. package/bitbucket-pipelines.yml +0 -81
  7. package/build/components/Button/Button.stories.d.ts +0 -19
  8. package/build/components/Button/Button.stories.d.ts.map +0 -1
  9. package/build/components/Button/Button.stories.js +0 -95
  10. package/build/components/Button/Button.stories.js.map +0 -1
  11. package/build/components/ButtonAction/ButtonAction.stories.d.ts +0 -13
  12. package/build/components/ButtonAction/ButtonAction.stories.d.ts.map +0 -1
  13. package/build/components/ButtonAction/ButtonAction.stories.js +0 -51
  14. package/build/components/ButtonAction/ButtonAction.stories.js.map +0 -1
  15. package/build/components/ButtonMap/ButtonMap.stories.d.ts +0 -12
  16. package/build/components/ButtonMap/ButtonMap.stories.d.ts.map +0 -1
  17. package/build/components/ButtonMap/ButtonMap.stories.js +0 -36
  18. package/build/components/ButtonMap/ButtonMap.stories.js.map +0 -1
  19. package/build/components/ButtonMenu/ButtonMenu.stories.d.ts +0 -15
  20. package/build/components/ButtonMenu/ButtonMenu.stories.d.ts.map +0 -1
  21. package/build/components/ButtonMenu/ButtonMenu.stories.js +0 -52
  22. package/build/components/ButtonMenu/ButtonMenu.stories.js.map +0 -1
  23. package/build/components/FilterChip/FilterChip.stories.d.ts +0 -15
  24. package/build/components/FilterChip/FilterChip.stories.d.ts.map +0 -1
  25. package/build/components/FilterChip/FilterChip.stories.js +0 -55
  26. package/build/components/FilterChip/FilterChip.stories.js.map +0 -1
  27. package/docs/README.md +0 -73
  28. package/docs/eslint.config.js +0 -22
  29. package/docs/index.html +0 -16
  30. package/docs/package-lock.json +0 -5578
  31. package/docs/package.json +0 -37
  32. package/docs/public/favicon.svg +0 -1
  33. package/docs/public/icons.svg +0 -24
  34. package/docs/src/App.css +0 -184
  35. package/docs/src/App.tsx +0 -38
  36. package/docs/src/assets/hero.png +0 -0
  37. package/docs/src/assets/react.svg +0 -1
  38. package/docs/src/assets/vite.svg +0 -1
  39. package/docs/src/components/Layout.tsx +0 -108
  40. package/docs/src/components/LiveEditor.tsx +0 -294
  41. package/docs/src/components/PropsTable.tsx +0 -101
  42. package/docs/src/components/Sidebar.tsx +0 -103
  43. package/docs/src/components/TableOfContents.tsx +0 -75
  44. package/docs/src/context/ColorModeContext.tsx +0 -34
  45. package/docs/src/index.css +0 -76
  46. package/docs/src/lib/createComponentPage.tsx +0 -270
  47. package/docs/src/main.tsx +0 -13
  48. package/docs/src/pages/Examples.tsx +0 -273
  49. package/docs/src/pages/Home.tsx +0 -70
  50. package/docs/src/pages/components/button-action.ts +0 -88
  51. package/docs/src/pages/components/button-map.ts +0 -67
  52. package/docs/src/pages/components/button-menu.ts +0 -90
  53. package/docs/src/pages/components/button.ts +0 -158
  54. package/docs/src/pages/components/filter-chip.ts +0 -109
  55. package/docs/tsconfig.app.json +0 -32
  56. package/docs/tsconfig.json +0 -7
  57. package/docs/tsconfig.node.json +0 -24
  58. package/docs/vite.config.ts +0 -18
  59. package/ios/.xcode.env +0 -11
  60. package/ios/Podfile +0 -63
  61. package/ios/Podfile.properties.json +0 -4
  62. package/ios/situactiontraquistemobile/AppDelegate.swift +0 -69
  63. package/ios/situactiontraquistemobile/Images.xcassets/AppIcon.appiconset/Contents.json +0 -13
  64. package/ios/situactiontraquistemobile/Images.xcassets/Contents.json +0 -6
  65. package/ios/situactiontraquistemobile/Images.xcassets/SplashScreenLegacy.imageset/Contents.json +0 -21
  66. package/ios/situactiontraquistemobile/Images.xcassets/SplashScreenLegacy.imageset/SplashScreenLegacy.png +0 -0
  67. package/ios/situactiontraquistemobile/Info.plist +0 -53
  68. package/ios/situactiontraquistemobile/SplashScreen.storyboard +0 -47
  69. package/ios/situactiontraquistemobile/Supporting/Expo.plist +0 -6
  70. package/ios/situactiontraquistemobile/situactiontraquistemobile-Bridging-Header.h +0 -3
  71. package/ios/situactiontraquistemobile.xcodeproj/project.pbxproj +0 -432
  72. package/ios/situactiontraquistemobile.xcodeproj/xcshareddata/xcschemes/situactiontraquistemobile.xcscheme +0 -88
  73. package/jest.config.js +0 -197
  74. package/src/components/.gitkeep +0 -0
  75. package/src/components/Button/Button.stories.tsx +0 -123
  76. package/src/components/Button/Button.tsx +0 -128
  77. package/src/components/Button/index.ts +0 -2
  78. package/src/components/ButtonAction/ButtonAction.stories.tsx +0 -67
  79. package/src/components/ButtonAction/ButtonAction.tsx +0 -67
  80. package/src/components/ButtonAction/index.ts +0 -2
  81. package/src/components/ButtonMap/ButtonMap.stories.tsx +0 -49
  82. package/src/components/ButtonMap/ButtonMap.tsx +0 -40
  83. package/src/components/ButtonMap/index.ts +0 -2
  84. package/src/components/ButtonMenu/ButtonMenu.stories.tsx +0 -68
  85. package/src/components/ButtonMenu/ButtonMenu.tsx +0 -97
  86. package/src/components/ButtonMenu/index.ts +0 -2
  87. package/src/components/FilterChip/FilterChip.stories.tsx +0 -71
  88. package/src/components/FilterChip/FilterChip.tsx +0 -124
  89. package/src/components/FilterChip/index.ts +0 -2
  90. package/src/constants/colors.ts +0 -2
  91. package/src/context/ThemeContext.tsx +0 -84
  92. package/src/index.ts +0 -23
  93. package/src/theme/index.ts +0 -20
  94. package/src/theme/tokens/dark.ts +0 -160
  95. package/src/theme/tokens/light.ts +0 -166
  96. package/src/theme/type.ts +0 -122
  97. package/src/types/.gitkeep +0 -0
  98. package/src/utils/.gitkeep +0 -0
  99. package/tsconfig.json +0 -9
@@ -1,88 +0,0 @@
1
- <?xml version="1.0" encoding="UTF-8"?>
2
- <Scheme
3
- LastUpgradeVersion = "1130"
4
- version = "1.3">
5
- <BuildAction
6
- parallelizeBuildables = "YES"
7
- buildImplicitDependencies = "YES">
8
- <BuildActionEntries>
9
- <BuildActionEntry
10
- buildForTesting = "YES"
11
- buildForRunning = "YES"
12
- buildForProfiling = "YES"
13
- buildForArchiving = "YES"
14
- buildForAnalyzing = "YES">
15
- <BuildableReference
16
- BuildableIdentifier = "primary"
17
- BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
18
- BuildableName = "situactiontraquistemobile.app"
19
- BlueprintName = "situactiontraquistemobile"
20
- ReferencedContainer = "container:situactiontraquistemobile.xcodeproj">
21
- </BuildableReference>
22
- </BuildActionEntry>
23
- </BuildActionEntries>
24
- </BuildAction>
25
- <TestAction
26
- buildConfiguration = "Debug"
27
- selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
28
- selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
29
- shouldUseLaunchSchemeArgsEnv = "YES">
30
- <Testables>
31
- <TestableReference
32
- skipped = "NO">
33
- <BuildableReference
34
- BuildableIdentifier = "primary"
35
- BlueprintIdentifier = "00E356ED1AD99517003FC87E"
36
- BuildableName = "situactiontraquistemobileTests.xctest"
37
- BlueprintName = "situactiontraquistemobileTests"
38
- ReferencedContainer = "container:situactiontraquistemobile.xcodeproj">
39
- </BuildableReference>
40
- </TestableReference>
41
- </Testables>
42
- </TestAction>
43
- <LaunchAction
44
- buildConfiguration = "Debug"
45
- selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
46
- selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
47
- launchStyle = "0"
48
- useCustomWorkingDirectory = "NO"
49
- ignoresPersistentStateOnLaunch = "NO"
50
- debugDocumentVersioning = "YES"
51
- debugServiceExtension = "internal"
52
- allowLocationSimulation = "YES">
53
- <BuildableProductRunnable
54
- runnableDebuggingMode = "0">
55
- <BuildableReference
56
- BuildableIdentifier = "primary"
57
- BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
58
- BuildableName = "situactiontraquistemobile.app"
59
- BlueprintName = "situactiontraquistemobile"
60
- ReferencedContainer = "container:situactiontraquistemobile.xcodeproj">
61
- </BuildableReference>
62
- </BuildableProductRunnable>
63
- </LaunchAction>
64
- <ProfileAction
65
- buildConfiguration = "Release"
66
- shouldUseLaunchSchemeArgsEnv = "YES"
67
- savedToolIdentifier = ""
68
- useCustomWorkingDirectory = "NO"
69
- debugDocumentVersioning = "YES">
70
- <BuildableProductRunnable
71
- runnableDebuggingMode = "0">
72
- <BuildableReference
73
- BuildableIdentifier = "primary"
74
- BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
75
- BuildableName = "situactiontraquistemobile.app"
76
- BlueprintName = "situactiontraquistemobile"
77
- ReferencedContainer = "container:situactiontraquistemobile.xcodeproj">
78
- </BuildableReference>
79
- </BuildableProductRunnable>
80
- </ProfileAction>
81
- <AnalyzeAction
82
- buildConfiguration = "Debug">
83
- </AnalyzeAction>
84
- <ArchiveAction
85
- buildConfiguration = "Release"
86
- revealArchiveInOrganizer = "YES">
87
- </ArchiveAction>
88
- </Scheme>
package/jest.config.js DELETED
@@ -1,197 +0,0 @@
1
- /**
2
- * For a detailed explanation regarding each configuration property, visit:
3
- * https://jestjs.io/docs/configuration
4
- */
5
-
6
- /** @type {import('jest').Config} */
7
- const config = {
8
- // All imported modules in your tests should be mocked automatically
9
- // automock: false,
10
-
11
- // Stop running tests after `n` failures
12
- // bail: 0,
13
-
14
- // The directory where Jest should store its cached dependency information
15
- // cacheDirectory: "/private/var/folders/2h/q6p2v9t50l7b_vtjw41zzqbr0000gn/T/jest_dx",
16
-
17
- // Automatically clear mock calls, instances, contexts and results before every test
18
- clearMocks: true,
19
-
20
- // Indicates whether the coverage information should be collected while executing the test
21
- // collectCoverage: false,
22
-
23
- // An array of glob patterns indicating a set of files for which coverage information should be collected
24
- // collectCoverageFrom: undefined,
25
-
26
- // The directory where Jest should output its coverage files
27
- // coverageDirectory: undefined,
28
-
29
- // An array of regexp pattern strings used to skip coverage collection
30
- // coveragePathIgnorePatterns: [
31
- // "/node_modules/"
32
- // ],
33
-
34
- // Indicates which provider should be used to instrument code for coverage
35
- coverageProvider: "v8",
36
-
37
- // A list of reporter names that Jest uses when writing coverage reports
38
- // coverageReporters: [
39
- // "json",
40
- // "text",
41
- // "lcov",
42
- // "clover"
43
- // ],
44
-
45
- // An object that configures minimum threshold enforcement for coverage results
46
- // coverageThreshold: undefined,
47
-
48
- // A path to a custom dependency extractor
49
- // dependencyExtractor: undefined,
50
-
51
- // Make calling deprecated APIs throw helpful error messages
52
- // errorOnDeprecated: false,
53
-
54
- // The default configuration for fake timers
55
- // fakeTimers: {
56
- // "enableGlobally": false
57
- // },
58
-
59
- // Force coverage collection from ignored files using an array of glob patterns
60
- // forceCoverageMatch: [],
61
-
62
- // A path to a module which exports an async function that is triggered once before all test suites
63
- // globalSetup: undefined,
64
-
65
- // A path to a module which exports an async function that is triggered once after all test suites
66
- // globalTeardown: undefined,
67
-
68
- // A set of global variables that need to be available in all test environments
69
- // globals: {},
70
-
71
- // The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.
72
- // maxWorkers: "50%",
73
-
74
- // An array of directory names to be searched recursively up from the requiring module's location
75
- // moduleDirectories: [
76
- // "node_modules"
77
- // ],
78
-
79
- // An array of file extensions your modules use
80
- // moduleFileExtensions: [
81
- // "js",
82
- // "mjs",
83
- // "cjs",
84
- // "jsx",
85
- // "ts",
86
- // "tsx",
87
- // "json",
88
- // "node"
89
- // ],
90
-
91
- // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
92
- // moduleNameMapper: {},
93
-
94
- // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
95
- // modulePathIgnorePatterns: [],
96
-
97
- // Activates notifications for test results
98
- // notify: false,
99
-
100
- // An enum that specifies notification mode. Requires { notify: true }
101
- // notifyMode: "failure-change",
102
-
103
- // A preset that is used as a base for Jest's configuration
104
- preset: 'jest-expo/ios',
105
-
106
- // Run tests from one or more projects
107
- // projects: undefined,
108
-
109
- // Use this configuration option to add custom reporters to Jest
110
- // reporters: undefined,
111
-
112
- // Automatically reset mock state before every test
113
- // resetMocks: false,
114
-
115
- // Reset the module registry before running each individual test
116
- // resetModules: false,
117
-
118
- // A path to a custom resolver
119
- // resolver: undefined,
120
-
121
- // Automatically restore mock state and implementation before every test
122
- // restoreMocks: false,
123
-
124
- // The root directory that Jest should scan for tests and modules within
125
- // rootDir: undefined,
126
-
127
- // A list of paths to directories that Jest should use to search for files in
128
- roots: [
129
- '<rootDir>/src',
130
- ],
131
-
132
- // Allows you to use a custom runner instead of Jest's default test runner
133
- // runner: "jest-runner",
134
-
135
- // The paths to modules that run some code to configure or set up the testing environment before each test
136
- // setupFiles: [],
137
-
138
- // A list of paths to modules that run some code to configure or set up the testing framework before each test
139
- setupFilesAfterEnv: ['@testing-library/react-native/matchers'],
140
-
141
- // The number of seconds after which a test is considered as slow and reported as such in the results.
142
- // slowTestThreshold: 5,
143
-
144
- // A list of paths to snapshot serializer modules Jest should use for snapshot testing
145
- // snapshotSerializers: [],
146
-
147
- // The test environment that will be used for testing
148
- // testEnvironment: "jest-environment-node",
149
-
150
- // Options that will be passed to the testEnvironment
151
- // testEnvironmentOptions: {},
152
-
153
- // Adds a location field to test results
154
- // testLocationInResults: false,
155
-
156
- // The glob patterns Jest uses to detect test files
157
- // testMatch: [
158
- // "**/__tests__/**/*.[jt]s?(x)",
159
- // "**/?(*.)+(spec|test).[tj]s?(x)"
160
- // ],
161
-
162
- // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
163
- // testPathIgnorePatterns: [
164
- // "/node_modules/"
165
- // ],
166
-
167
- // The regexp pattern or array of patterns that Jest uses to detect test files
168
- // testRegex: [],
169
-
170
- // This option allows the use of a custom results processor
171
- // testResultsProcessor: undefined,
172
-
173
- // This option allows use of a custom test runner
174
- // testRunner: "jest-circus/runner",
175
-
176
- // A map from regular expressions to paths to transformers
177
- // transform: undefined,
178
-
179
- // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
180
- transformIgnorePatterns: [
181
- 'node_modules/(?!((jest-)?react-native|@react-native(-community)?|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg))',
182
- ],
183
-
184
- // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
185
- // unmockedModulePathPatterns: undefined,
186
-
187
- // Indicates whether each individual test should be reported during the run
188
- // verbose: undefined,
189
-
190
- // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
191
- // watchPathIgnorePatterns: [],
192
-
193
- // Whether to use watchman for file crawling
194
- // watchman: true,
195
- };
196
-
197
- module.exports = config;
File without changes
@@ -1,123 +0,0 @@
1
- /** Storybook stories for the Button component */
2
- import React from 'react';
3
- import type { Meta, StoryObj } from '@storybook/react-native';
4
- import { View } from 'react-native';
5
- import { ArrowRight, Check, Trash, Plus, X, MagnifyingGlass } from 'phosphor-react-native';
6
- import { Button, type ButtonProps } from './Button';
7
-
8
- type StoryArgs = ButtonProps & { colorScheme: 'light' | 'dark' };
9
-
10
- const meta: Meta<StoryArgs> = {
11
- title: 'Components/Button',
12
- component: Button,
13
- render: ({ colorScheme: _colorScheme, ...args }) => <Button {...args} />,
14
- argTypes: {
15
- colorScheme: {
16
- control: { type: 'radio' },
17
- options: ['light', 'dark'],
18
- },
19
- variant: {
20
- control: { type: 'radio' },
21
- options: ['primary', 'tertiary', 'ghost', 'destructive'],
22
- },
23
- size: {
24
- control: { type: 'radio' },
25
- options: ['S', 'M', 'L', 'XL'],
26
- },
27
- content: {
28
- control: { type: 'radio' },
29
- options: ['icon-only', 'icon-only-rounded', 'icon-both'],
30
- },
31
- disabled: { control: { type: 'boolean' } },
32
- },
33
- args: {
34
- colorScheme: 'light',
35
- label: 'Button',
36
- variant: 'primary',
37
- size: 'M',
38
- content: 'icon-both',
39
- disabled: false,
40
- },
41
- };
42
-
43
- export default meta;
44
-
45
- type Story = StoryObj<StoryArgs>;
46
-
47
- export const Primary: Story = {
48
- args: { variant: 'primary', label: 'Primary' },
49
- };
50
-
51
- export const Tertiary: Story = {
52
- args: { variant: 'tertiary', label: 'Tertiary' },
53
- };
54
-
55
- export const Ghost: Story = {
56
- args: { variant: 'ghost', label: 'Ghost' },
57
- };
58
-
59
- export const Destructive: Story = {
60
- args: { variant: 'destructive', label: 'Destructive' },
61
- };
62
-
63
- export const WithIconLeft: Story = {
64
- render: () => (
65
- <View style={{ gap: 12, padding: 16, alignItems: 'flex-start' }}>
66
- <Button variant="primary" label="Rechercher" iconLeft={<MagnifyingGlass />} />
67
- <Button variant="tertiary" label="Ajouter" iconLeft={<Plus />} />
68
- <Button variant="ghost" label="Confirmer" iconLeft={<Check />} />
69
- <Button variant="destructive" label="Supprimer" iconLeft={<Trash />} />
70
- </View>
71
- ),
72
- };
73
-
74
- export const WithIconRight: Story = {
75
- render: () => (
76
- <View style={{ gap: 12, padding: 16, alignItems: 'flex-start' }}>
77
- <Button variant="primary" label="Suivant" iconRight={<ArrowRight />} />
78
- <Button variant="tertiary" label="Fermer" iconRight={<X />} />
79
- </View>
80
- ),
81
- };
82
-
83
- export const WithIconBoth: Story = {
84
- render: () => (
85
- <View style={{ gap: 12, padding: 16, alignItems: 'flex-start' }}>
86
- <Button variant="primary" label="Rechercher" iconLeft={<MagnifyingGlass />} iconRight={<ArrowRight />} />
87
- <Button variant="tertiary" label="Supprimer" iconLeft={<Trash />} iconRight={<X />} />
88
- </View>
89
- ),
90
- };
91
-
92
- export const IconOnly: Story = {
93
- render: () => (
94
- <View style={{ flexDirection: 'row', gap: 12, padding: 16 }}>
95
- <Button variant="primary" content="icon-only" iconLeft={<Plus />} />
96
- <Button variant="tertiary" content="icon-only" iconLeft={<MagnifyingGlass />} />
97
- <Button variant="ghost" content="icon-only" iconLeft={<X />} />
98
- <Button variant="destructive" content="icon-only-rounded" iconLeft={<Trash />} />
99
- </View>
100
- ),
101
- };
102
-
103
- export const AllSizes: Story = {
104
- render: () => (
105
- <View style={{ gap: 12, padding: 16, alignItems: 'flex-start' }}>
106
- <Button variant="primary" size="S" label="Small" iconLeft={<Check />} />
107
- <Button variant="primary" size="M" label="Medium" iconLeft={<Check />} />
108
- <Button variant="primary" size="L" label="Large" iconLeft={<Check />} />
109
- <Button variant="primary" size="XL" label="XLarge" iconLeft={<Check />} />
110
- </View>
111
- ),
112
- };
113
-
114
- export const Disabled: Story = {
115
- render: () => (
116
- <View style={{ gap: 12, padding: 16, alignItems: 'flex-start' }}>
117
- <Button variant="primary" disabled label="Primary" iconLeft={<Check />} />
118
- <Button variant="tertiary" disabled label="Tertiary" iconLeft={<Check />} />
119
- <Button variant="ghost" disabled label="Ghost" iconLeft={<Check />} />
120
- <Button variant="destructive" disabled label="Destructive" iconLeft={<Trash />} />
121
- </View>
122
- ),
123
- };
@@ -1,128 +0,0 @@
1
- /**
2
- * Button component for Traq[UI]ste Mobile.
3
- * Supports four variants, four sizes and three content layouts.
4
- */
5
- import React, { useState } from 'react';
6
- import { Pressable, Text } from 'react-native';
7
- import type { StyleProp, ViewStyle } from 'react-native';
8
- import { useTheme } from '../../context/ThemeContext';
9
-
10
- export type ButtonVariant = 'primary' | 'tertiary' | 'ghost' | 'destructive';
11
- export type ButtonSize = 'S' | 'M' | 'L' | 'XL';
12
- export type ButtonContent = 'icon-only' | 'icon-only-rounded' | 'icon-both';
13
-
14
- export interface ButtonProps {
15
- /** Button visual variant */
16
- variant?: ButtonVariant;
17
- /** Button size */
18
- size?: ButtonSize;
19
- /** Content layout */
20
- content?: ButtonContent;
21
- /** Label text — required when content is 'icon-both' */
22
- label?: string;
23
- /** Left icon component (Phosphor icon) */
24
- iconLeft?: React.ReactElement;
25
- /** Right icon component (Phosphor icon) */
26
- iconRight?: React.ReactElement;
27
- /** Disabled state */
28
- disabled?: boolean;
29
- /** Press handler */
30
- onPress?: () => void;
31
- /** Additional container styles */
32
- style?: StyleProp<ViewStyle>;
33
- }
34
-
35
- // --- Size tokens (static, theme-independent) ---
36
-
37
- const SIZE_TOKENS = {
38
- S: { height: 36, paddingVertical: 10, paddingHorizontal: 10, gap: 8, borderRadius: 8, iconSize: 16, fontSize: 12, lineHeight: 16 },
39
- M: { height: 40, paddingVertical: 10, paddingHorizontal: 16, gap: 4, borderRadius: 8, iconSize: 18, fontSize: 14, lineHeight: 20 },
40
- L: { height: 48, paddingVertical: 12, paddingHorizontal: 12, gap: 10, borderRadius: 8, iconSize: 20, fontSize: 16, lineHeight: 24 },
41
- XL: { height: 60, paddingVertical: 16, paddingHorizontal: 32, gap: 12, borderRadius: 8, iconSize: 24, fontSize: 18, lineHeight: 26 },
42
- } as const;
43
-
44
- // --- Component ---
45
-
46
- export function Button({
47
- variant = 'primary',
48
- size = 'M',
49
- content = 'icon-both',
50
- label,
51
- iconLeft,
52
- iconRight,
53
- disabled = false,
54
- onPress,
55
- style,
56
- }: ButtonProps) {
57
- const [pressed, setPressed] = useState(false);
58
- const { colors } = useTheme();
59
-
60
- const sizeTokens = SIZE_TOKENS[size];
61
- const state = disabled ? 'disabled' : pressed ? 'pressed' : 'default';
62
- const colorTokens = colors.button[variant][state];
63
-
64
- const isIconOnly = content === 'icon-only' || content === 'icon-only-rounded';
65
- const borderRadius = content === 'icon-only-rounded' ? 9999 : sizeTokens.borderRadius;
66
- const hasBorder = colorTokens.border !== 'transparent';
67
-
68
- const containerStyle: ViewStyle = {
69
- height: sizeTokens.height,
70
- paddingVertical: isIconOnly ? undefined : sizeTokens.paddingVertical,
71
- paddingHorizontal: isIconOnly ? undefined : sizeTokens.paddingHorizontal,
72
- width: isIconOnly ? sizeTokens.height : undefined,
73
- borderRadius,
74
- gap: sizeTokens.gap,
75
- backgroundColor: colorTokens.background,
76
- borderWidth: hasBorder ? 1 : undefined,
77
- borderColor: hasBorder ? colorTokens.border : undefined,
78
- alignItems: 'center',
79
- justifyContent: 'center',
80
- flexDirection: 'row',
81
- };
82
-
83
- const textStyle = {
84
- color: colorTokens.text,
85
- fontSize: sizeTokens.fontSize,
86
- lineHeight: sizeTokens.lineHeight,
87
- fontFamily: 'Urbanist',
88
- fontWeight: '500' as const,
89
- };
90
-
91
- // Clone icon elements to inject size and color from active theme state
92
- const cloneIcon = (icon: React.ReactElement | undefined) => {
93
- if (!icon) return null;
94
- return React.cloneElement(icon, {
95
- size: sizeTokens.iconSize,
96
- color: colorTokens.icon,
97
- ...(icon.props as Record<string, unknown>),
98
- } as object);
99
- };
100
-
101
- if (isIconOnly) {
102
- return (
103
- <Pressable
104
- pointerEvents={disabled ? 'none' : 'auto'}
105
- onPressIn={() => setPressed(true)}
106
- onPressOut={() => setPressed(false)}
107
- onPress={disabled ? undefined : onPress}
108
- style={[containerStyle, style]}
109
- >
110
- {cloneIcon(iconLeft)}
111
- </Pressable>
112
- );
113
- }
114
-
115
- return (
116
- <Pressable
117
- pointerEvents={disabled ? 'none' : 'auto'}
118
- onPressIn={() => setPressed(true)}
119
- onPressOut={() => setPressed(false)}
120
- onPress={disabled ? undefined : onPress}
121
- style={[containerStyle, style]}
122
- >
123
- {cloneIcon(iconLeft)}
124
- {label != null && <Text style={textStyle}>{label}</Text>}
125
- {cloneIcon(iconRight)}
126
- </Pressable>
127
- );
128
- }
@@ -1,2 +0,0 @@
1
- export { Button } from './Button';
2
- export type { ButtonProps, ButtonVariant, ButtonSize, ButtonContent } from './Button';
@@ -1,67 +0,0 @@
1
- /** Storybook stories for the ButtonAction component */
2
- import React from 'react';
3
- import type { Meta, StoryObj } from '@storybook/react-native';
4
- import { View } from 'react-native';
5
- import { X, DotsThree, ArrowLeft, MagnifyingGlass, Bell } from 'phosphor-react-native';
6
- import { ButtonAction, type ButtonActionProps } from './ButtonAction';
7
-
8
- type StoryArgs = ButtonActionProps & { colorScheme: 'light' | 'dark' };
9
-
10
- const meta: Meta<StoryArgs> = {
11
- title: 'Components/ButtonAction',
12
- component: ButtonAction,
13
- render: ({ colorScheme: _colorScheme, ...args }) => (
14
- <ButtonAction {...args} icon={<X />} />
15
- ),
16
- argTypes: {
17
- colorScheme: {
18
- control: { type: 'radio' },
19
- options: ['light', 'dark'],
20
- },
21
- size: {
22
- control: { type: 'radio' },
23
- options: ['XS', 'S', 'M', 'L', 'XL', 'XXL'],
24
- },
25
- disabled: { control: { type: 'boolean' } },
26
- },
27
- args: {
28
- colorScheme: 'light',
29
- size: 'M',
30
- disabled: false,
31
- },
32
- };
33
-
34
- export default meta;
35
-
36
- type Story = StoryObj<StoryArgs>;
37
-
38
- export const Default: Story = {};
39
-
40
- export const Disabled: Story = {
41
- args: { disabled: true },
42
- };
43
-
44
- export const AllSizes: Story = {
45
- render: () => (
46
- <View style={{ flexDirection: 'row', gap: 16, padding: 16, alignItems: 'center' }}>
47
- <ButtonAction size="XS" icon={<X />} />
48
- <ButtonAction size="S" icon={<X />} />
49
- <ButtonAction size="M" icon={<X />} />
50
- <ButtonAction size="L" icon={<X />} />
51
- <ButtonAction size="XL" icon={<X />} />
52
- <ButtonAction size="XXL" icon={<X />} />
53
- </View>
54
- ),
55
- };
56
-
57
- export const AllIcons: Story = {
58
- render: () => (
59
- <View style={{ flexDirection: 'row', gap: 16, padding: 16, alignItems: 'center' }}>
60
- <ButtonAction size="L" icon={<ArrowLeft />} />
61
- <ButtonAction size="L" icon={<MagnifyingGlass />} />
62
- <ButtonAction size="L" icon={<Bell />} />
63
- <ButtonAction size="L" icon={<DotsThree />} />
64
- <ButtonAction size="L" icon={<X />} />
65
- </View>
66
- ),
67
- };
@@ -1,67 +0,0 @@
1
- /**
2
- * ButtonAction component — bare icon-only pressable with no background or border.
3
- * Extends Button size range with XS and XXL sizes.
4
- */
5
- import React from 'react';
6
- import { Pressable } from 'react-native';
7
- import type { StyleProp, ViewStyle } from 'react-native';
8
- import { useTheme } from '../../context/ThemeContext';
9
-
10
- export type ButtonActionSize = 'XS' | 'S' | 'M' | 'L' | 'XL' | 'XXL';
11
-
12
- export interface ButtonActionProps {
13
- /** Icon component (Phosphor Duotone) */
14
- icon: React.ReactElement;
15
- /** Icon size */
16
- size?: ButtonActionSize;
17
- /** Disabled state */
18
- disabled?: boolean;
19
- /** Press handler */
20
- onPress?: () => void;
21
- /** Additional container styles */
22
- style?: StyleProp<ViewStyle>;
23
- }
24
-
25
- const ICON_SIZE: Record<ButtonActionSize, number> = {
26
- XS: 12,
27
- S: 16,
28
- M: 20,
29
- L: 24,
30
- XL: 28,
31
- XXL: 32,
32
- };
33
-
34
- export function ButtonAction({
35
- icon,
36
- size = 'M',
37
- disabled = false,
38
- onPress,
39
- style,
40
- }: ButtonActionProps) {
41
- const { colors } = useTheme();
42
- const iconPx = ICON_SIZE[size];
43
-
44
- const containerStyle: ViewStyle = {
45
- width: iconPx,
46
- height: iconPx,
47
- opacity: disabled ? 0.5 : 1,
48
- alignItems: 'center',
49
- justifyContent: 'center',
50
- };
51
-
52
- const clonedIcon = React.cloneElement(icon, {
53
- size: iconPx,
54
- color: colors.text.primary,
55
- ...(icon.props as Record<string, unknown>),
56
- } as object);
57
-
58
- return (
59
- <Pressable
60
- pointerEvents={disabled ? 'none' : 'auto'}
61
- onPress={disabled ? undefined : onPress}
62
- style={[containerStyle, style]}
63
- >
64
- {clonedIcon}
65
- </Pressable>
66
- );
67
- }
@@ -1,2 +0,0 @@
1
- export { ButtonAction } from './ButtonAction';
2
- export type { ButtonActionProps, ButtonActionSize } from './ButtonAction';