@willphan1712000/frontend 1.9.0 → 1.9.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 (6) hide show
  1. package/README.md +39 -0
  2. package/dist/index.d.mts +49 -20
  3. package/dist/index.d.ts +49 -20
  4. package/dist/index.js +395 -240
  5. package/dist/index.mjs +395 -240
  6. package/package.json +2 -6
package/README.md CHANGED
@@ -28,6 +28,7 @@ Reusable React UI components and frontend utilities packaged for application dev
28
28
  - `Transform`
29
29
  - `tools`
30
30
  - `LinearAlgebra`
31
+ - `useThemeState`
31
32
 
32
33
  ### Auth helpers
33
34
  - `useSession`
@@ -249,6 +250,44 @@ function AppProviders({ children }: { children: React.ReactNode }) {
249
250
  - `session`
250
251
  - `auth`
251
252
 
253
+ ## Theme management usage
254
+
255
+ ### `useThemeState`
256
+
257
+ A custom React hook for managing, persisting, and applying the application's theme state (`'light'`, `'dark'`, or `'system'`). It synchronizes state with browser `localStorage` and applies/removes the theme class on `document.body`.
258
+
259
+ ```tsx
260
+ import { useThemeState } from '@willphan1712000/frontend';
261
+
262
+ const Example = () => {
263
+ const { setThemeState, getThemeState } = useThemeState();
264
+
265
+ return (
266
+ <div>
267
+ <p>Current Theme: {getThemeState()}</p>
268
+ <button onClick={() => setThemeState('light')}>Light</button>
269
+ <button onClick={() => setThemeState('dark')}>Dark</button>
270
+ <button onClick={() => setThemeState('system')}>System</button>
271
+ </div>
272
+ );
273
+ };
274
+ ```
275
+
276
+ #### API Reference
277
+
278
+ - `getThemeState(): 'light' | 'dark' | 'system'`
279
+ Retrieves the active theme setting from `localStorage`. Defaults to `'light'`.
280
+ - `setThemeState(mode: 'light' | 'dark' | 'system'): void`
281
+ Sets the active theme setting.
282
+ - `'light'`: Stores `'light'`, removes `'will-dark'` class from `document.body`, and disables OS preference event listeners.
283
+ - `'dark'`: Stores `'dark'`, adds `'will-dark'` class to `document.body`, and disables OS preference event listeners.
284
+ - `'system'`: Stores `'system'`, automatically toggles `'will-dark'` based on OS preferences, and registers a listener to react to future OS preference changes.
285
+
286
+ #### Configuration Details
287
+
288
+ - **Local Storage Key:** `'will-theme'`
289
+ - **CSS Class Applied to `<body>`:** `'will-dark'`
290
+
252
291
  ## Exported utilities
253
292
 
254
293
  ```ts
package/dist/index.d.mts CHANGED
@@ -1,6 +1,13 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import React$1, { ReactNode } from 'react';
3
3
 
4
+ /**
5
+ * Represents the structure of options available in the dropdown selection.
6
+ *
7
+ * Each item in the array contains:
8
+ * @property {string} label - The user-friendly text displayed in the dropdown list.
9
+ * @property {string} value - The actual value associated with the option.
10
+ */
4
11
  type Options$2 = {
5
12
  label: string;
6
13
  value: string;
@@ -12,10 +19,11 @@ interface Props$d {
12
19
  }
13
20
  /**
14
21
  * Dropdown Select component, allowing users to select options from dropdown menu
15
- * @param options - list of options, which is an array of object [{ label: string, value: string }]
16
- * @param value - a chosen value
17
- * @param onChange - a function to set a value
18
- * @returns
22
+ *
23
+ * @param options - List of select options of type {@link Options}
24
+ * @param value - The currently selected value
25
+ * @param onChange - Callback function triggered when a new value is selected
26
+ * @returns React Element rendering the dropdown select input
19
27
  */
20
28
  declare const DropdownSelect: ({ options, value, onChange }: Props$d) => react_jsx_runtime.JSX.Element;
21
29
 
@@ -46,7 +54,6 @@ type Options$1 = {
46
54
  interface Props$b {
47
55
  value: string;
48
56
  onChange: (value: string) => void;
49
- width?: string;
50
57
  options: Options$1;
51
58
  color?: string;
52
59
  }
@@ -54,10 +61,9 @@ interface Props$b {
54
61
  * Option Slider component, allowing users to select a value they want with the help of element representaion. Label is a React Node jsx that represents the option. For example, if a value was a font, the label would be a React Node jsx that represents a character using the font
55
62
  * @param value - a chosen value
56
63
  * @param onChange - to set a value
57
- * @options - list of options, format [{ label: React Node Syntax, value: string }]
58
- * @returns
64
+ * @options - list of options, format Options {@link Options}
59
65
  */
60
- declare const OptionSlider: ({ value, onChange, width, options, color, }: Props$b) => react_jsx_runtime.JSX.Element;
66
+ declare const OptionSlider: ({ value, onChange, options, color, }: Props$b) => react_jsx_runtime.JSX.Element;
61
67
 
62
68
  interface Props$a {
63
69
  value: string;
@@ -81,17 +87,14 @@ interface Props$9 {
81
87
  options: Options;
82
88
  value: string[];
83
89
  onChange: React.Dispatch<React.SetStateAction<string[]>>;
84
- width?: string;
85
90
  }
86
91
  /**
87
92
  * MultiSelect component, allowing users to select multiple options from dropdown menu with search
88
- * @param options - list of options, which is an array of object [{ label: string, value: string }]
93
+ * @param options - list of options, which is an array of object Options {@link Options}
89
94
  * @param value - an array of chosen values
90
95
  * @param onChange - a function to set an array of values
91
- * @param width - specify the width of the component
92
- * @returns
93
96
  */
94
- declare const MultiSelect: ({ options, value, onChange, width }: Props$9) => react_jsx_runtime.JSX.Element;
97
+ declare const MultiSelect: ({ options, value, onChange }: Props$9) => react_jsx_runtime.JSX.Element;
95
98
 
96
99
  interface Props$8 {
97
100
  buttonType?: 'gradient' | 'solid' | 'normal';
@@ -174,7 +177,10 @@ interface Props$5 {
174
177
  setValue?: (value?: string) => void;
175
178
  label?: string;
176
179
  options?: {
177
- focusColor: string;
180
+ focusColor?: string;
181
+ backgroundColor?: string;
182
+ textColor?: string;
183
+ borderColor?: string;
178
184
  };
179
185
  }
180
186
  /**
@@ -186,14 +192,24 @@ interface Props$5 {
186
192
  * @param value value of input
187
193
  * @param setValue set value function
188
194
  * @param label set label
189
- * @param options options object containing focusColor property -> color when input is focused
195
+ * @param options options object containing styling properties (focusColor, backgroundColor, textColor, borderColor)
190
196
  *
191
197
  * @example
192
198
  * ... component declaration
193
199
  * const [value, setValue] = useState<string|undefined>('')
194
200
  *
195
201
  * return (
196
- * <InputGoogle value={value} setValue={setValue} label="Input Google Component Label" options={{ focusColor: "yellow" }}/>
202
+ * <InputGoogle
203
+ * value={value}
204
+ * setValue={setValue}
205
+ * label="Input Google Component Label"
206
+ * options={{
207
+ * focusColor: "yellow",
208
+ * backgroundColor: "white",
209
+ * textColor: "black",
210
+ * borderColor: "gray"
211
+ * }}
212
+ * />
197
213
  * )
198
214
  */
199
215
  declare const InputGoogle: ({ value, setValue, label, options, ...props }: Props$5 & React.ComponentProps<"input">) => react_jsx_runtime.JSX.Element;
@@ -203,7 +219,10 @@ interface Props$4 {
203
219
  setValue?: (value?: string) => void;
204
220
  label?: string;
205
221
  options?: {
206
- focusColor: string;
222
+ focusColor?: string;
223
+ backgroundColor?: string;
224
+ textColor?: string;
225
+ borderColor?: string;
207
226
  };
208
227
  }
209
228
  /**
@@ -212,14 +231,24 @@ interface Props$4 {
212
231
  * @param value value of input
213
232
  * @param setValue set value function
214
233
  * @param label set label
215
- * @param options options object containing focusColor property -> color when input is focused
234
+ * @param options options object containing styling properties (focusColor, backgroundColor, textColor, borderColor)
216
235
  *
217
236
  * @example
218
237
  * ... component declaration
219
238
  * const [value, setValue] = useState<string|undefined>('')
220
239
  *
221
240
  * return (
222
- * <TextArea value={value} setValue={setValue} label="Text Component Label" options={{ focusColor: "yellow" }}/>
241
+ * <TextArea
242
+ * value={value}
243
+ * setValue={setValue}
244
+ * label="Text Component Label"
245
+ * options={{
246
+ * focusColor: "yellow",
247
+ * backgroundColor: "white",
248
+ * textColor: "black",
249
+ * borderColor: "gray"
250
+ * }}
251
+ * />
223
252
  * )
224
253
  */
225
254
  declare const TextArea: ({ value, setValue, label, options, ...props }: Props$4 & React.ComponentProps<"textarea">) => react_jsx_runtime.JSX.Element;
@@ -794,4 +823,4 @@ interface UseThemeState {
794
823
  */
795
824
  declare function useThemeState(): UseThemeState;
796
825
 
797
- export { type AuthInterface, Avatar, Button, Canvas, ColorPickerSlider, DropdownSelect, Image$1 as Image, ImageEditor, Image as ImageUtilities, InputFile, InputGoogle, LinearAlgebra, Modern as ModernButton, MultiSelect, OptionSlider, type Options$2 as Options, RangeSlider, SessionProvider, type SessionType, type Options$1 as SliderOptions, type StorageInterface, TextArea, Transform, UploadImage, tools, useAuthClient, useSession, useThemeState };
826
+ export { type AuthInterface, Avatar, Button, Canvas, ColorPickerSlider, DropdownSelect, Image$1 as Image, ImageEditor, Image as ImageUtilities, InputFile, InputGoogle, LinearAlgebra, Modern as ModernButton, MultiSelect, OptionSlider, RangeSlider, SessionProvider, type SessionType, type StorageInterface, TextArea, Transform, UploadImage, tools, useAuthClient, useSession, useThemeState };
package/dist/index.d.ts CHANGED
@@ -1,6 +1,13 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import React$1, { ReactNode } from 'react';
3
3
 
4
+ /**
5
+ * Represents the structure of options available in the dropdown selection.
6
+ *
7
+ * Each item in the array contains:
8
+ * @property {string} label - The user-friendly text displayed in the dropdown list.
9
+ * @property {string} value - The actual value associated with the option.
10
+ */
4
11
  type Options$2 = {
5
12
  label: string;
6
13
  value: string;
@@ -12,10 +19,11 @@ interface Props$d {
12
19
  }
13
20
  /**
14
21
  * Dropdown Select component, allowing users to select options from dropdown menu
15
- * @param options - list of options, which is an array of object [{ label: string, value: string }]
16
- * @param value - a chosen value
17
- * @param onChange - a function to set a value
18
- * @returns
22
+ *
23
+ * @param options - List of select options of type {@link Options}
24
+ * @param value - The currently selected value
25
+ * @param onChange - Callback function triggered when a new value is selected
26
+ * @returns React Element rendering the dropdown select input
19
27
  */
20
28
  declare const DropdownSelect: ({ options, value, onChange }: Props$d) => react_jsx_runtime.JSX.Element;
21
29
 
@@ -46,7 +54,6 @@ type Options$1 = {
46
54
  interface Props$b {
47
55
  value: string;
48
56
  onChange: (value: string) => void;
49
- width?: string;
50
57
  options: Options$1;
51
58
  color?: string;
52
59
  }
@@ -54,10 +61,9 @@ interface Props$b {
54
61
  * Option Slider component, allowing users to select a value they want with the help of element representaion. Label is a React Node jsx that represents the option. For example, if a value was a font, the label would be a React Node jsx that represents a character using the font
55
62
  * @param value - a chosen value
56
63
  * @param onChange - to set a value
57
- * @options - list of options, format [{ label: React Node Syntax, value: string }]
58
- * @returns
64
+ * @options - list of options, format Options {@link Options}
59
65
  */
60
- declare const OptionSlider: ({ value, onChange, width, options, color, }: Props$b) => react_jsx_runtime.JSX.Element;
66
+ declare const OptionSlider: ({ value, onChange, options, color, }: Props$b) => react_jsx_runtime.JSX.Element;
61
67
 
62
68
  interface Props$a {
63
69
  value: string;
@@ -81,17 +87,14 @@ interface Props$9 {
81
87
  options: Options;
82
88
  value: string[];
83
89
  onChange: React.Dispatch<React.SetStateAction<string[]>>;
84
- width?: string;
85
90
  }
86
91
  /**
87
92
  * MultiSelect component, allowing users to select multiple options from dropdown menu with search
88
- * @param options - list of options, which is an array of object [{ label: string, value: string }]
93
+ * @param options - list of options, which is an array of object Options {@link Options}
89
94
  * @param value - an array of chosen values
90
95
  * @param onChange - a function to set an array of values
91
- * @param width - specify the width of the component
92
- * @returns
93
96
  */
94
- declare const MultiSelect: ({ options, value, onChange, width }: Props$9) => react_jsx_runtime.JSX.Element;
97
+ declare const MultiSelect: ({ options, value, onChange }: Props$9) => react_jsx_runtime.JSX.Element;
95
98
 
96
99
  interface Props$8 {
97
100
  buttonType?: 'gradient' | 'solid' | 'normal';
@@ -174,7 +177,10 @@ interface Props$5 {
174
177
  setValue?: (value?: string) => void;
175
178
  label?: string;
176
179
  options?: {
177
- focusColor: string;
180
+ focusColor?: string;
181
+ backgroundColor?: string;
182
+ textColor?: string;
183
+ borderColor?: string;
178
184
  };
179
185
  }
180
186
  /**
@@ -186,14 +192,24 @@ interface Props$5 {
186
192
  * @param value value of input
187
193
  * @param setValue set value function
188
194
  * @param label set label
189
- * @param options options object containing focusColor property -> color when input is focused
195
+ * @param options options object containing styling properties (focusColor, backgroundColor, textColor, borderColor)
190
196
  *
191
197
  * @example
192
198
  * ... component declaration
193
199
  * const [value, setValue] = useState<string|undefined>('')
194
200
  *
195
201
  * return (
196
- * <InputGoogle value={value} setValue={setValue} label="Input Google Component Label" options={{ focusColor: "yellow" }}/>
202
+ * <InputGoogle
203
+ * value={value}
204
+ * setValue={setValue}
205
+ * label="Input Google Component Label"
206
+ * options={{
207
+ * focusColor: "yellow",
208
+ * backgroundColor: "white",
209
+ * textColor: "black",
210
+ * borderColor: "gray"
211
+ * }}
212
+ * />
197
213
  * )
198
214
  */
199
215
  declare const InputGoogle: ({ value, setValue, label, options, ...props }: Props$5 & React.ComponentProps<"input">) => react_jsx_runtime.JSX.Element;
@@ -203,7 +219,10 @@ interface Props$4 {
203
219
  setValue?: (value?: string) => void;
204
220
  label?: string;
205
221
  options?: {
206
- focusColor: string;
222
+ focusColor?: string;
223
+ backgroundColor?: string;
224
+ textColor?: string;
225
+ borderColor?: string;
207
226
  };
208
227
  }
209
228
  /**
@@ -212,14 +231,24 @@ interface Props$4 {
212
231
  * @param value value of input
213
232
  * @param setValue set value function
214
233
  * @param label set label
215
- * @param options options object containing focusColor property -> color when input is focused
234
+ * @param options options object containing styling properties (focusColor, backgroundColor, textColor, borderColor)
216
235
  *
217
236
  * @example
218
237
  * ... component declaration
219
238
  * const [value, setValue] = useState<string|undefined>('')
220
239
  *
221
240
  * return (
222
- * <TextArea value={value} setValue={setValue} label="Text Component Label" options={{ focusColor: "yellow" }}/>
241
+ * <TextArea
242
+ * value={value}
243
+ * setValue={setValue}
244
+ * label="Text Component Label"
245
+ * options={{
246
+ * focusColor: "yellow",
247
+ * backgroundColor: "white",
248
+ * textColor: "black",
249
+ * borderColor: "gray"
250
+ * }}
251
+ * />
223
252
  * )
224
253
  */
225
254
  declare const TextArea: ({ value, setValue, label, options, ...props }: Props$4 & React.ComponentProps<"textarea">) => react_jsx_runtime.JSX.Element;
@@ -794,4 +823,4 @@ interface UseThemeState {
794
823
  */
795
824
  declare function useThemeState(): UseThemeState;
796
825
 
797
- export { type AuthInterface, Avatar, Button, Canvas, ColorPickerSlider, DropdownSelect, Image$1 as Image, ImageEditor, Image as ImageUtilities, InputFile, InputGoogle, LinearAlgebra, Modern as ModernButton, MultiSelect, OptionSlider, type Options$2 as Options, RangeSlider, SessionProvider, type SessionType, type Options$1 as SliderOptions, type StorageInterface, TextArea, Transform, UploadImage, tools, useAuthClient, useSession, useThemeState };
826
+ export { type AuthInterface, Avatar, Button, Canvas, ColorPickerSlider, DropdownSelect, Image$1 as Image, ImageEditor, Image as ImageUtilities, InputFile, InputGoogle, LinearAlgebra, Modern as ModernButton, MultiSelect, OptionSlider, RangeSlider, SessionProvider, type SessionType, type StorageInterface, TextArea, Transform, UploadImage, tools, useAuthClient, useSession, useThemeState };