@delightui/components 0.1.125 → 0.1.127
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/utils/WrapTextNodes/WrapTextNodes.types.d.ts +1 -1
- package/dist/cjs/library.css +5684 -1684
- package/dist/cjs/library.js +3 -3
- package/dist/cjs/library.js.map +1 -1
- package/dist/esm/components/utils/WrapTextNodes/WrapTextNodes.types.d.ts +1 -1
- package/dist/esm/library.css +5684 -1684
- package/dist/esm/library.js +3 -3
- package/dist/esm/library.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/docs/components/utils/NotificationProvider.md +70 -0
- package/docs/components/utils/ThemeProvider.md +228 -0
- package/package.json +1 -1
- package/dist/cjs/components/utils.d.ts +0 -28
- package/dist/esm/components/utils.d.ts +0 -28
package/dist/index.d.ts
CHANGED
|
@@ -2489,7 +2489,7 @@ type ConditionalViewProps = {
|
|
|
2489
2489
|
|
|
2490
2490
|
declare const ConditionalView: ({ condition, children }: ConditionalViewProps) => React$1.ReactNode;
|
|
2491
2491
|
|
|
2492
|
-
type WrapTextNodesProps =
|
|
2492
|
+
type WrapTextNodesProps = TextProps;
|
|
2493
2493
|
|
|
2494
2494
|
/**
|
|
2495
2495
|
* Wraps string and number children in a <Text> component.
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
# NotificationProvider
|
|
2
|
+
|
|
3
|
+
## Description
|
|
4
|
+
|
|
5
|
+
Context provider utility that manages notification state across your application. The NotificationProvider enables programmatic notification management by maintaining a centralized registry of active notifications and providing functions to display, manage, and dismiss them from anywhere in your component tree.
|
|
6
|
+
|
|
7
|
+
## Usage
|
|
8
|
+
|
|
9
|
+
### Basic Setup
|
|
10
|
+
|
|
11
|
+
```tsx
|
|
12
|
+
import { NotificationProvider, useNotification } from '@delightui/components';
|
|
13
|
+
|
|
14
|
+
// Wrap your app
|
|
15
|
+
<NotificationProvider>
|
|
16
|
+
<App />
|
|
17
|
+
</NotificationProvider>
|
|
18
|
+
|
|
19
|
+
// Use in components
|
|
20
|
+
const { trigger, clear, removeNotification } = useNotification();
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
### Triggering Notifications
|
|
24
|
+
|
|
25
|
+
```tsx
|
|
26
|
+
// Basic notification
|
|
27
|
+
trigger({
|
|
28
|
+
message: 'Success message!',
|
|
29
|
+
duration: 3000
|
|
30
|
+
});
|
|
31
|
+
|
|
32
|
+
// With style
|
|
33
|
+
trigger({
|
|
34
|
+
message: 'Error occurred!',
|
|
35
|
+
duration: 5000,
|
|
36
|
+
style: ToastNotificationStyleEnum.ERROR
|
|
37
|
+
});
|
|
38
|
+
|
|
39
|
+
// Persistent (no auto-dismiss)
|
|
40
|
+
trigger({
|
|
41
|
+
message: 'Manual dismiss only',
|
|
42
|
+
duration: 0
|
|
43
|
+
});
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## API
|
|
47
|
+
|
|
48
|
+
### trigger(payload)
|
|
49
|
+
- `message` - React content to display
|
|
50
|
+
- `duration` - Auto-dismiss time in ms (0 = manual dismiss only)
|
|
51
|
+
- `style` - Visual style (SUCCESS, ERROR, WARNING, INFO)
|
|
52
|
+
|
|
53
|
+
### clear()
|
|
54
|
+
Removes all notifications
|
|
55
|
+
|
|
56
|
+
### removeNotification(id)
|
|
57
|
+
Removes specific notification by ID
|
|
58
|
+
|
|
59
|
+
## Props
|
|
60
|
+
|
|
61
|
+
| Prop | Type | Required | Description |
|
|
62
|
+
|------|------|----------|-------------|
|
|
63
|
+
| `children` | `ReactNode` | Yes | Child components |
|
|
64
|
+
|
|
65
|
+
## Notes
|
|
66
|
+
|
|
67
|
+
- Place at application root level
|
|
68
|
+
- Notifications auto-generate unique IDs
|
|
69
|
+
- Duration 0 = no auto-dismiss
|
|
70
|
+
- Supports custom React content in messages
|
|
@@ -0,0 +1,228 @@
|
|
|
1
|
+
# ThemeProvider
|
|
2
|
+
|
|
3
|
+
## Description
|
|
4
|
+
|
|
5
|
+
Context provider utility that manages theme state across your application. The ThemeProvider enables programmatic theme switching by maintaining centralized theme state and automatically applying theme attributes to the document element. It works in conjunction with the component variant system to provide consistent theming across all UI components.
|
|
6
|
+
|
|
7
|
+
## How It Works
|
|
8
|
+
|
|
9
|
+
The ThemeProvider creates a cascading theme system that works at multiple levels:
|
|
10
|
+
|
|
11
|
+
### 1. Document-Level Theme Attribute
|
|
12
|
+
When you switch themes, ThemeProvider sets a `data-theme` attribute on `document.documentElement`:
|
|
13
|
+
|
|
14
|
+
```html
|
|
15
|
+
<html data-theme="dark">
|
|
16
|
+
<!-- Your app content -->
|
|
17
|
+
</html>
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
### 2. Component Variant Props System
|
|
21
|
+
Components use the `useBuildVariantProps` hook to generate theme-aware attributes:
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
// Inside a component like Spinner
|
|
25
|
+
const variantProps = useBuildVariantProps(
|
|
26
|
+
'spinner', // component name
|
|
27
|
+
{ size: 'Large' }, // variant props
|
|
28
|
+
{ disabled: true }, // state flags
|
|
29
|
+
componentVariant // optional override
|
|
30
|
+
);
|
|
31
|
+
|
|
32
|
+
// Generates: { "component-variant": "spinner-large", "disabled": "true" }
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
### 3. CSS Theme Variables
|
|
36
|
+
CSS files use attribute selectors that combine both systems:
|
|
37
|
+
|
|
38
|
+
```css
|
|
39
|
+
[data-theme='dark'],
|
|
40
|
+
[data-theme='light'] {
|
|
41
|
+
[component-variant^="spinner-"] {
|
|
42
|
+
--spinner-color: var(--colours-grey-50);
|
|
43
|
+
--spinner-height: 16px;
|
|
44
|
+
/* ... other theme variables */
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
This creates a powerful cascade where:
|
|
50
|
+
- `data-theme` determines the overall theme context
|
|
51
|
+
- `component-variant` provides component-specific styling
|
|
52
|
+
- CSS variables allow easy customization and theming
|
|
53
|
+
|
|
54
|
+
## Usage
|
|
55
|
+
|
|
56
|
+
### Basic Setup
|
|
57
|
+
|
|
58
|
+
```tsx
|
|
59
|
+
import { ThemeProvider, ThemeContext } from '@delightui/components';
|
|
60
|
+
|
|
61
|
+
// Wrap your app
|
|
62
|
+
<ThemeProvider theme="light">
|
|
63
|
+
<App />
|
|
64
|
+
</ThemeProvider>
|
|
65
|
+
|
|
66
|
+
// Use in components
|
|
67
|
+
const { theme, updateTheme } = useContext(ThemeContext);
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
### Theme Switching
|
|
71
|
+
|
|
72
|
+
```tsx
|
|
73
|
+
import { useContext } from 'react';
|
|
74
|
+
import { ThemeContext } from '@delightui/components';
|
|
75
|
+
|
|
76
|
+
function ThemeSwitcher() {
|
|
77
|
+
const { theme, updateTheme } = useContext(ThemeContext);
|
|
78
|
+
|
|
79
|
+
return (
|
|
80
|
+
<select
|
|
81
|
+
value={theme}
|
|
82
|
+
onChange={(e) => updateTheme(e.target.value)}
|
|
83
|
+
>
|
|
84
|
+
<option value="light">Light Theme</option>
|
|
85
|
+
<option value="dark">Dark Theme</option>
|
|
86
|
+
<option value="custom">Custom Theme</option>
|
|
87
|
+
</select>
|
|
88
|
+
);
|
|
89
|
+
}
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
## How Components Connect to Themes
|
|
93
|
+
|
|
94
|
+
### 1. Component Implementation
|
|
95
|
+
```tsx
|
|
96
|
+
// Example: Spinner component
|
|
97
|
+
const Spinner = ({ className, 'component-variant': componentVariant }) => {
|
|
98
|
+
const variantProps = useBuildVariantProps(
|
|
99
|
+
'spinner', // Component name
|
|
100
|
+
{}, // Variant props (size, style, etc.)
|
|
101
|
+
undefined, // State flags (disabled, active, etc.)
|
|
102
|
+
componentVariant // Optional override
|
|
103
|
+
);
|
|
104
|
+
|
|
105
|
+
return (
|
|
106
|
+
<div
|
|
107
|
+
className={cx(styles.spinner, className)}
|
|
108
|
+
{...variantProps} // Applies component-variant attribute
|
|
109
|
+
>
|
|
110
|
+
<div className={styles.inner} />
|
|
111
|
+
</div>
|
|
112
|
+
);
|
|
113
|
+
};
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
### 2. Generated HTML Output
|
|
117
|
+
```html
|
|
118
|
+
<div component-variant="spinner-default" class="spinner">
|
|
119
|
+
<div class="inner"></div>
|
|
120
|
+
</div>
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
### 3. CSS Theme Connection
|
|
124
|
+
```css
|
|
125
|
+
[data-theme='light'] {
|
|
126
|
+
[component-variant="spinner-default"] {
|
|
127
|
+
--spinner-color: #333;
|
|
128
|
+
--spinner-height: 16px;
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
[data-theme='dark'] {
|
|
133
|
+
[component-variant="spinner-default"] {
|
|
134
|
+
--spinner-color: #fff;
|
|
135
|
+
--spinner-height: 16px;
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
## Advanced Features
|
|
141
|
+
|
|
142
|
+
### Component Variant System
|
|
143
|
+
The `useBuildVariantProps` hook automatically:
|
|
144
|
+
- Converts component props to CSS attribute selectors
|
|
145
|
+
- Handles camelCase to kebab-case conversion
|
|
146
|
+
- Manages boolean state flags
|
|
147
|
+
- Creates consistent naming patterns
|
|
148
|
+
|
|
149
|
+
### Automatic CSS Variable Application
|
|
150
|
+
Components automatically inherit theme variables through CSS cascade:
|
|
151
|
+
```scss
|
|
152
|
+
// In component SCSS
|
|
153
|
+
.spinner {
|
|
154
|
+
color: var(--spinner-color);
|
|
155
|
+
height: var(--spinner-height);
|
|
156
|
+
// Theme variables are automatically available
|
|
157
|
+
}
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
## API
|
|
161
|
+
|
|
162
|
+
### ThemeContext
|
|
163
|
+
|
|
164
|
+
```tsx
|
|
165
|
+
const { theme, updateTheme } = useContext(ThemeContext);
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
- `theme` - Current active theme string
|
|
169
|
+
- `updateTheme(newTheme)` - Function to change the theme
|
|
170
|
+
|
|
171
|
+
### updateTheme(newTheme)
|
|
172
|
+
- `newTheme` - String identifying the theme to apply
|
|
173
|
+
|
|
174
|
+
## Props
|
|
175
|
+
|
|
176
|
+
| Prop | Type | Default | Required | Description |
|
|
177
|
+
|------|------|---------|----------|-------------|
|
|
178
|
+
| `theme` | `string` | `'light'` | No | Initial theme to apply |
|
|
179
|
+
| `children` | `ReactNode` | - | No | Child components |
|
|
180
|
+
|
|
181
|
+
## Built-in Themes
|
|
182
|
+
|
|
183
|
+
The system comes with pre-configured themes:
|
|
184
|
+
- `light` - Light theme with standard color palette
|
|
185
|
+
- `dark` - Dark theme with inverted colors
|
|
186
|
+
- `custom` - Extensible custom theme support
|
|
187
|
+
|
|
188
|
+
## Creating Custom Themes
|
|
189
|
+
|
|
190
|
+
### 1. Add Theme CSS File
|
|
191
|
+
```css
|
|
192
|
+
/* custom-theme.css */
|
|
193
|
+
[data-theme='custom'] {
|
|
194
|
+
[component-variant^="spinner-"] {
|
|
195
|
+
--spinner-color: #ff6b6b;
|
|
196
|
+
--spinner-height: 20px;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
[component-variant^="button-"] {
|
|
200
|
+
--button-background: #4ecdc4;
|
|
201
|
+
--button-color: white;
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
```
|
|
205
|
+
|
|
206
|
+
### 2. Import Theme CSS
|
|
207
|
+
```tsx
|
|
208
|
+
// In ThemeProvider or main app
|
|
209
|
+
import './themes/custom-theme.css';
|
|
210
|
+
```
|
|
211
|
+
|
|
212
|
+
### 3. Use Custom Theme
|
|
213
|
+
```tsx
|
|
214
|
+
<ThemeProvider theme="custom">
|
|
215
|
+
<App />
|
|
216
|
+
</ThemeProvider>
|
|
217
|
+
```
|
|
218
|
+
|
|
219
|
+
## Notes
|
|
220
|
+
|
|
221
|
+
- Automatically sets `data-theme` attribute on `document.documentElement`
|
|
222
|
+
- Defaults to 'light' theme if no theme prop provided
|
|
223
|
+
- Theme changes are applied immediately to the DOM
|
|
224
|
+
- Supports any string value as theme identifier
|
|
225
|
+
- CSS files are imported automatically (base, light, dark themes)
|
|
226
|
+
- Component variants are generated automatically from props
|
|
227
|
+
- CSS variables provide the connection between themes and components
|
|
228
|
+
- The system supports infinite customization through CSS variable overrides
|
package/package.json
CHANGED
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { Ref, ReactElement, ReactNode } from 'react';
|
|
2
|
-
import { TextTypeEnum, TextWeightEnum } from './atoms/Text';
|
|
3
|
-
/**
|
|
4
|
-
* Utility function to render children nodes.
|
|
5
|
-
*
|
|
6
|
-
* It checks if the child is a string or number and wraps it with a <Text> component.
|
|
7
|
-
* Otherwise, it renders the child as it is.
|
|
8
|
-
*
|
|
9
|
-
* @param children - The child nodes to be rendered.
|
|
10
|
-
* @param defaultWeight - Default weight for <Text> component when wrapping strings or numbers.
|
|
11
|
-
* @param defaultType - Default type for <Text> component when wrapping strings or numbers.
|
|
12
|
-
* @param appendProps - Additional props to be appended to the child nodes.
|
|
13
|
-
* @returns The rendered React element.
|
|
14
|
-
*/
|
|
15
|
-
export declare const renderChildren: (children: ReactNode, options?: {
|
|
16
|
-
defaultWeight?: TextWeightEnum;
|
|
17
|
-
defaultType?: TextTypeEnum;
|
|
18
|
-
noWrap?: boolean;
|
|
19
|
-
whiteSpaceNoWrap?: boolean;
|
|
20
|
-
as?: "span";
|
|
21
|
-
}, appendProps?: Record<string, any>) => ReactElement;
|
|
22
|
-
/**
|
|
23
|
-
* Utility function to merge multiple refs into a single ref callback function.
|
|
24
|
-
*
|
|
25
|
-
* @param refs - Refs to be merged.
|
|
26
|
-
* @returns A callback function that sets the value on all merged refs.
|
|
27
|
-
*/
|
|
28
|
-
export declare const mergeRefs: <T>(...refs: (Ref<T> | undefined)[]) => Ref<T>;
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { Ref, ReactElement, ReactNode } from 'react';
|
|
2
|
-
import { TextTypeEnum, TextWeightEnum } from './atoms/Text';
|
|
3
|
-
/**
|
|
4
|
-
* Utility function to render children nodes.
|
|
5
|
-
*
|
|
6
|
-
* It checks if the child is a string or number and wraps it with a <Text> component.
|
|
7
|
-
* Otherwise, it renders the child as it is.
|
|
8
|
-
*
|
|
9
|
-
* @param children - The child nodes to be rendered.
|
|
10
|
-
* @param defaultWeight - Default weight for <Text> component when wrapping strings or numbers.
|
|
11
|
-
* @param defaultType - Default type for <Text> component when wrapping strings or numbers.
|
|
12
|
-
* @param appendProps - Additional props to be appended to the child nodes.
|
|
13
|
-
* @returns The rendered React element.
|
|
14
|
-
*/
|
|
15
|
-
export declare const renderChildren: (children: ReactNode, options?: {
|
|
16
|
-
defaultWeight?: TextWeightEnum;
|
|
17
|
-
defaultType?: TextTypeEnum;
|
|
18
|
-
noWrap?: boolean;
|
|
19
|
-
whiteSpaceNoWrap?: boolean;
|
|
20
|
-
as?: "span";
|
|
21
|
-
}, appendProps?: Record<string, any>) => ReactElement;
|
|
22
|
-
/**
|
|
23
|
-
* Utility function to merge multiple refs into a single ref callback function.
|
|
24
|
-
*
|
|
25
|
-
* @param refs - Refs to be merged.
|
|
26
|
-
* @returns A callback function that sets the value on all merged refs.
|
|
27
|
-
*/
|
|
28
|
-
export declare const mergeRefs: <T>(...refs: (Ref<T> | undefined)[]) => Ref<T>;
|