@idealyst/mcp-server 1.0.87 → 1.0.88
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/ARCHITECTURE.md +313 -0
- package/README.md +292 -104
- package/TYPE-SYSTEM.md +397 -0
- package/dist/index.js +170 -1
- package/examples/components/Accordion.examples.tsx +147 -0
- package/examples/components/ActivityIndicator.examples.tsx +350 -0
- package/examples/components/Alert.examples.tsx +335 -0
- package/examples/components/Avatar.examples.tsx +188 -0
- package/examples/components/Badge.examples.tsx +242 -0
- package/examples/components/Breadcrumb.examples.tsx +303 -0
- package/examples/components/Button.examples.tsx +113 -0
- package/examples/components/Card.examples.tsx +131 -0
- package/examples/components/Checkbox.examples.tsx +195 -0
- package/examples/components/Chip.examples.tsx +87 -0
- package/examples/components/Dialog.examples.tsx +344 -0
- package/examples/components/Divider.examples.tsx +258 -0
- package/examples/components/Icon.examples.tsx +202 -0
- package/examples/components/Input.examples.tsx +205 -0
- package/examples/components/Menu.examples.tsx +321 -0
- package/examples/components/Popover.examples.tsx +439 -0
- package/examples/components/Progress.examples.tsx +340 -0
- package/examples/components/RadioButton.examples.tsx +443 -0
- package/examples/components/Screen.examples.tsx +347 -0
- package/examples/components/Select.examples.tsx +279 -0
- package/examples/components/Skeleton.examples.tsx +278 -0
- package/examples/components/Slider.examples.tsx +249 -0
- package/examples/components/Switch.examples.tsx +94 -0
- package/examples/components/TabBar.examples.tsx +356 -0
- package/examples/components/Text.examples.tsx +177 -0
- package/examples/components/TextArea.examples.tsx +203 -0
- package/examples/components/Tooltip.examples.tsx +318 -0
- package/examples/components/View.examples.tsx +307 -0
- package/package.json +15 -2
- package/scripts/extract-types.ts +71 -0
- package/scripts/type-extractor.ts +286 -0
- package/scripts/validate-examples.ts +142 -0
- package/src/data/components/Icon.ts +1 -1
- package/src/data/components/index.ts +2 -0
- package/src/index.ts +181 -1
- package/src/tools/get-types.ts +169 -0
- package/tsconfig.examples.json +14 -0
- package/dist/data/cli-commands.d.ts +0 -2
- package/dist/data/cli-commands.d.ts.map +0 -1
- package/dist/data/cli-commands.js +0 -100
- package/dist/data/cli-commands.js.map +0 -1
- package/dist/data/components/Accordion.d.ts +0 -15
- package/dist/data/components/Accordion.d.ts.map +0 -1
- package/dist/data/components/Accordion.js +0 -112
- package/dist/data/components/Accordion.js.map +0 -1
- package/dist/data/components/ActivityIndicator.d.ts +0 -15
- package/dist/data/components/ActivityIndicator.d.ts.map +0 -1
- package/dist/data/components/ActivityIndicator.js +0 -82
- package/dist/data/components/ActivityIndicator.js.map +0 -1
- package/dist/data/components/Alert.d.ts +0 -15
- package/dist/data/components/Alert.d.ts.map +0 -1
- package/dist/data/components/Alert.js +0 -132
- package/dist/data/components/Alert.js.map +0 -1
- package/dist/data/components/Avatar.d.ts +0 -15
- package/dist/data/components/Avatar.d.ts.map +0 -1
- package/dist/data/components/Avatar.js +0 -93
- package/dist/data/components/Avatar.js.map +0 -1
- package/dist/data/components/Badge.d.ts +0 -15
- package/dist/data/components/Badge.d.ts.map +0 -1
- package/dist/data/components/Badge.js +0 -64
- package/dist/data/components/Badge.js.map +0 -1
- package/dist/data/components/Breadcrumb.d.ts +0 -15
- package/dist/data/components/Breadcrumb.d.ts.map +0 -1
- package/dist/data/components/Breadcrumb.js +0 -96
- package/dist/data/components/Breadcrumb.js.map +0 -1
- package/dist/data/components/Button.d.ts +0 -15
- package/dist/data/components/Button.d.ts.map +0 -1
- package/dist/data/components/Button.js +0 -87
- package/dist/data/components/Button.js.map +0 -1
- package/dist/data/components/Card.d.ts +0 -15
- package/dist/data/components/Card.d.ts.map +0 -1
- package/dist/data/components/Card.js +0 -67
- package/dist/data/components/Card.js.map +0 -1
- package/dist/data/components/Checkbox.d.ts +0 -15
- package/dist/data/components/Checkbox.d.ts.map +0 -1
- package/dist/data/components/Checkbox.js +0 -118
- package/dist/data/components/Checkbox.js.map +0 -1
- package/dist/data/components/Chip.d.ts +0 -15
- package/dist/data/components/Chip.d.ts.map +0 -1
- package/dist/data/components/Chip.js +0 -76
- package/dist/data/components/Chip.js.map +0 -1
- package/dist/data/components/Dialog.d.ts +0 -15
- package/dist/data/components/Dialog.d.ts.map +0 -1
- package/dist/data/components/Dialog.js +0 -137
- package/dist/data/components/Dialog.js.map +0 -1
- package/dist/data/components/Divider.d.ts +0 -15
- package/dist/data/components/Divider.d.ts.map +0 -1
- package/dist/data/components/Divider.js +0 -71
- package/dist/data/components/Divider.js.map +0 -1
- package/dist/data/components/Icon.d.ts +0 -15
- package/dist/data/components/Icon.d.ts.map +0 -1
- package/dist/data/components/Icon.js +0 -70
- package/dist/data/components/Icon.js.map +0 -1
- package/dist/data/components/Image.d.ts +0 -15
- package/dist/data/components/Image.d.ts.map +0 -1
- package/dist/data/components/Image.js +0 -122
- package/dist/data/components/Image.js.map +0 -1
- package/dist/data/components/Input.d.ts +0 -15
- package/dist/data/components/Input.d.ts.map +0 -1
- package/dist/data/components/Input.js +0 -109
- package/dist/data/components/Input.js.map +0 -1
- package/dist/data/components/List.d.ts +0 -15
- package/dist/data/components/List.d.ts.map +0 -1
- package/dist/data/components/List.js +0 -113
- package/dist/data/components/List.js.map +0 -1
- package/dist/data/components/Menu.d.ts +0 -15
- package/dist/data/components/Menu.d.ts.map +0 -1
- package/dist/data/components/Menu.js +0 -132
- package/dist/data/components/Menu.js.map +0 -1
- package/dist/data/components/Popover.d.ts +0 -15
- package/dist/data/components/Popover.d.ts.map +0 -1
- package/dist/data/components/Popover.js +0 -159
- package/dist/data/components/Popover.js.map +0 -1
- package/dist/data/components/Pressable.d.ts +0 -15
- package/dist/data/components/Pressable.d.ts.map +0 -1
- package/dist/data/components/Pressable.js +0 -125
- package/dist/data/components/Pressable.js.map +0 -1
- package/dist/data/components/Progress.d.ts +0 -15
- package/dist/data/components/Progress.d.ts.map +0 -1
- package/dist/data/components/Progress.js +0 -95
- package/dist/data/components/Progress.js.map +0 -1
- package/dist/data/components/RadioButton.d.ts +0 -15
- package/dist/data/components/RadioButton.d.ts.map +0 -1
- package/dist/data/components/RadioButton.js +0 -140
- package/dist/data/components/RadioButton.js.map +0 -1
- package/dist/data/components/SVGImage.d.ts +0 -15
- package/dist/data/components/SVGImage.d.ts.map +0 -1
- package/dist/data/components/SVGImage.js +0 -112
- package/dist/data/components/SVGImage.js.map +0 -1
- package/dist/data/components/Screen.d.ts +0 -15
- package/dist/data/components/Screen.d.ts.map +0 -1
- package/dist/data/components/Screen.js +0 -99
- package/dist/data/components/Screen.js.map +0 -1
- package/dist/data/components/Select.d.ts +0 -15
- package/dist/data/components/Select.d.ts.map +0 -1
- package/dist/data/components/Select.js +0 -146
- package/dist/data/components/Select.js.map +0 -1
- package/dist/data/components/Skeleton.d.ts +0 -15
- package/dist/data/components/Skeleton.d.ts.map +0 -1
- package/dist/data/components/Skeleton.js +0 -110
- package/dist/data/components/Skeleton.js.map +0 -1
- package/dist/data/components/Slider.d.ts +0 -15
- package/dist/data/components/Slider.d.ts.map +0 -1
- package/dist/data/components/Slider.js +0 -129
- package/dist/data/components/Slider.js.map +0 -1
- package/dist/data/components/Switch.d.ts +0 -15
- package/dist/data/components/Switch.d.ts.map +0 -1
- package/dist/data/components/Switch.js +0 -127
- package/dist/data/components/Switch.js.map +0 -1
- package/dist/data/components/TabBar.d.ts +0 -15
- package/dist/data/components/TabBar.d.ts.map +0 -1
- package/dist/data/components/TabBar.js +0 -145
- package/dist/data/components/TabBar.js.map +0 -1
- package/dist/data/components/Table.d.ts +0 -15
- package/dist/data/components/Table.d.ts.map +0 -1
- package/dist/data/components/Table.js +0 -151
- package/dist/data/components/Table.js.map +0 -1
- package/dist/data/components/Tabs.d.ts +0 -15
- package/dist/data/components/Tabs.d.ts.map +0 -1
- package/dist/data/components/Tabs.js +0 -150
- package/dist/data/components/Tabs.js.map +0 -1
- package/dist/data/components/Text.d.ts +0 -15
- package/dist/data/components/Text.d.ts.map +0 -1
- package/dist/data/components/Text.js +0 -85
- package/dist/data/components/Text.js.map +0 -1
- package/dist/data/components/TextArea.d.ts +0 -15
- package/dist/data/components/TextArea.d.ts.map +0 -1
- package/dist/data/components/TextArea.js +0 -155
- package/dist/data/components/TextArea.js.map +0 -1
- package/dist/data/components/Tooltip.d.ts +0 -15
- package/dist/data/components/Tooltip.d.ts.map +0 -1
- package/dist/data/components/Tooltip.js +0 -105
- package/dist/data/components/Tooltip.js.map +0 -1
- package/dist/data/components/Video.d.ts +0 -15
- package/dist/data/components/Video.d.ts.map +0 -1
- package/dist/data/components/Video.js +0 -168
- package/dist/data/components/Video.js.map +0 -1
- package/dist/data/components/View.d.ts +0 -15
- package/dist/data/components/View.d.ts.map +0 -1
- package/dist/data/components/View.js +0 -126
- package/dist/data/components/View.js.map +0 -1
- package/dist/data/components/index.d.ts +0 -37
- package/dist/data/components/index.d.ts.map +0 -1
- package/dist/data/components/index.js +0 -110
- package/dist/data/components/index.js.map +0 -1
- package/dist/data/framework-guides.d.ts +0 -2
- package/dist/data/framework-guides.d.ts.map +0 -1
- package/dist/data/framework-guides.js +0 -589
- package/dist/data/framework-guides.js.map +0 -1
- package/dist/data/icon-guide.d.ts +0 -2
- package/dist/data/icon-guide.d.ts.map +0 -1
- package/dist/data/icon-guide.js +0 -285
- package/dist/data/icon-guide.js.map +0 -1
- package/dist/data/icons.json +0 -7452
- package/dist/data/navigation-guides.d.ts +0 -2
- package/dist/data/navigation-guides.d.ts.map +0 -1
- package/dist/data/navigation-guides.js +0 -1196
- package/dist/data/navigation-guides.js.map +0 -1
- package/dist/index.d.ts +0 -3
- package/dist/index.d.ts.map +0 -1
- package/dist/index.js.map +0 -1
|
@@ -1,146 +0,0 @@
|
|
|
1
|
-
export const Select = {
|
|
2
|
-
category: "form",
|
|
3
|
-
description: "Dropdown select component for choosing from a list of options",
|
|
4
|
-
props: `
|
|
5
|
-
- \`options\`: SelectOption[] - Array of select options
|
|
6
|
-
- \`value\`: string - Unique value
|
|
7
|
-
- \`label\`: string - Display label
|
|
8
|
-
- \`disabled\`: boolean - Whether disabled
|
|
9
|
-
- \`icon\`: ReactNode - Optional icon
|
|
10
|
-
- \`value\`: string - Currently selected value
|
|
11
|
-
- \`onValueChange\`: (value: string) => void - Selection change handler
|
|
12
|
-
- \`placeholder\`: string - Placeholder text when no value
|
|
13
|
-
- \`disabled\`: boolean - Whether the select is disabled
|
|
14
|
-
- \`error\`: boolean - Whether to show error state
|
|
15
|
-
- \`helperText\`: string - Helper text below select
|
|
16
|
-
- \`label\`: string - Label text above select
|
|
17
|
-
- \`variant\`: 'outlined' | 'filled' - Visual style
|
|
18
|
-
- \`intent\`: IntentVariant - Color scheme
|
|
19
|
-
- \`size\`: 'small' | 'medium' | 'large' - Select size
|
|
20
|
-
- \`searchable\`: boolean - Enable search/filter (web only)
|
|
21
|
-
- \`filterOption\`: (option, searchTerm) => boolean - Custom filter function
|
|
22
|
-
- \`presentationMode\`: 'dropdown' | 'actionSheet' - iOS presentation (native only)
|
|
23
|
-
- \`maxHeight\`: number - Maximum height for dropdown
|
|
24
|
-
- \`style\`: any - Additional styles
|
|
25
|
-
- \`testID\`: string - Test identifier
|
|
26
|
-
- \`accessibilityLabel\`: string - Accessibility label
|
|
27
|
-
`,
|
|
28
|
-
features: [
|
|
29
|
-
"Single selection from options",
|
|
30
|
-
"Searchable dropdown (web)",
|
|
31
|
-
"Icon support for options",
|
|
32
|
-
"Two visual variants",
|
|
33
|
-
"Label and helper text",
|
|
34
|
-
"Error state",
|
|
35
|
-
"Disabled options",
|
|
36
|
-
"Custom filtering",
|
|
37
|
-
"Platform-specific presentation modes",
|
|
38
|
-
],
|
|
39
|
-
bestPractices: [
|
|
40
|
-
"Use for 5+ options (use RadioGroup for fewer)",
|
|
41
|
-
"Enable searchable for long option lists",
|
|
42
|
-
"Provide clear placeholder text",
|
|
43
|
-
"Group related options visually",
|
|
44
|
-
"Show error states inline with helperText",
|
|
45
|
-
"Consider icons for visual categorization",
|
|
46
|
-
],
|
|
47
|
-
usage: `
|
|
48
|
-
import { Select } from '@idealyst/components';
|
|
49
|
-
import { useState } from 'react';
|
|
50
|
-
|
|
51
|
-
function Example() {
|
|
52
|
-
const [value, setValue] = useState('');
|
|
53
|
-
|
|
54
|
-
const options = [
|
|
55
|
-
{ value: 'us', label: 'United States' },
|
|
56
|
-
{ value: 'ca', label: 'Canada' },
|
|
57
|
-
{ value: 'uk', label: 'United Kingdom' },
|
|
58
|
-
];
|
|
59
|
-
|
|
60
|
-
return (
|
|
61
|
-
<Select
|
|
62
|
-
label="Country"
|
|
63
|
-
options={options}
|
|
64
|
-
value={value}
|
|
65
|
-
onValueChange={setValue}
|
|
66
|
-
placeholder="Select a country"
|
|
67
|
-
/>
|
|
68
|
-
);
|
|
69
|
-
}
|
|
70
|
-
`,
|
|
71
|
-
examples: {
|
|
72
|
-
basic: `import { Select } from '@idealyst/components';
|
|
73
|
-
|
|
74
|
-
const options = [
|
|
75
|
-
{ value: '1', label: 'Option 1' },
|
|
76
|
-
{ value: '2', label: 'Option 2' },
|
|
77
|
-
];
|
|
78
|
-
|
|
79
|
-
<Select options={options} placeholder="Choose..." />`,
|
|
80
|
-
variants: `import { Select, View } from '@idealyst/components';
|
|
81
|
-
|
|
82
|
-
const options = [{ value: '1', label: 'Option' }];
|
|
83
|
-
|
|
84
|
-
<View spacing="md">
|
|
85
|
-
<Select options={options} variant="outlined" size="small" />
|
|
86
|
-
<Select options={options} variant="filled" size="medium" />
|
|
87
|
-
<Select options={options} variant="outlined" size="large" />
|
|
88
|
-
</View>`,
|
|
89
|
-
"with-icons": `import { Select } from '@idealyst/components';
|
|
90
|
-
|
|
91
|
-
const options = [
|
|
92
|
-
{ value: 'light', label: 'Light Mode', icon: <Icon name="white-balance-sunny" /> },
|
|
93
|
-
{ value: 'dark', label: 'Dark Mode', icon: <Icon name="weather-night" /> },
|
|
94
|
-
{ value: 'auto', label: 'Auto', icon: <Icon name="brightness-auto" /> },
|
|
95
|
-
];
|
|
96
|
-
|
|
97
|
-
<Select
|
|
98
|
-
label="Theme"
|
|
99
|
-
options={options}
|
|
100
|
-
value={theme}
|
|
101
|
-
onValueChange={setTheme}
|
|
102
|
-
/>`,
|
|
103
|
-
interactive: `import { Select, View, Text } from '@idealyst/components';
|
|
104
|
-
import { useState } from 'react';
|
|
105
|
-
|
|
106
|
-
function Example() {
|
|
107
|
-
const [country, setCountry] = useState('');
|
|
108
|
-
const [error, setError] = useState('');
|
|
109
|
-
|
|
110
|
-
const countries = [
|
|
111
|
-
{ value: 'us', label: 'United States' },
|
|
112
|
-
{ value: 'ca', label: 'Canada' },
|
|
113
|
-
{ value: 'uk', label: 'United Kingdom' },
|
|
114
|
-
{ value: 'au', label: 'Australia' },
|
|
115
|
-
];
|
|
116
|
-
|
|
117
|
-
const handleChange = (value: string) => {
|
|
118
|
-
setCountry(value);
|
|
119
|
-
setError('');
|
|
120
|
-
};
|
|
121
|
-
|
|
122
|
-
const handleSubmit = () => {
|
|
123
|
-
if (!country) {
|
|
124
|
-
setError('Please select a country');
|
|
125
|
-
}
|
|
126
|
-
};
|
|
127
|
-
|
|
128
|
-
return (
|
|
129
|
-
<View spacing="md">
|
|
130
|
-
<Select
|
|
131
|
-
label="Country"
|
|
132
|
-
options={countries}
|
|
133
|
-
value={country}
|
|
134
|
-
onValueChange={handleChange}
|
|
135
|
-
placeholder="Select your country"
|
|
136
|
-
error={!!error}
|
|
137
|
-
helperText={error || 'Choose your country of residence'}
|
|
138
|
-
searchable
|
|
139
|
-
/>
|
|
140
|
-
<Button onPress={handleSubmit}>Submit</Button>
|
|
141
|
-
</View>
|
|
142
|
-
);
|
|
143
|
-
}`,
|
|
144
|
-
},
|
|
145
|
-
};
|
|
146
|
-
//# sourceMappingURL=Select.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/data/components/Select.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,QAAQ,EAAE,MAAM;IAChB,WAAW,EAAE,+DAA+D;IAC5E,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;CAuBR;IACC,QAAQ,EAAE;QACR,+BAA+B;QAC/B,2BAA2B;QAC3B,0BAA0B;QAC1B,qBAAqB;QACrB,uBAAuB;QACvB,aAAa;QACb,kBAAkB;QAClB,kBAAkB;QAClB,sCAAsC;KACvC;IACD,aAAa,EAAE;QACb,+CAA+C;QAC/C,yCAAyC;QACzC,gCAAgC;QAChC,gCAAgC;QAChC,0CAA0C;QAC1C,0CAA0C;KAC3C;IACD,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;CAuBR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;;;;;;qDAO0C;QAEjD,QAAQ,EAAE;;;;;;;;QAQN;QAEJ,YAAY,EAAE;;;;;;;;;;;;;GAaf;QAEC,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwCf;KACC;CACF,CAAC"}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
export declare const Skeleton: {
|
|
2
|
-
category: string;
|
|
3
|
-
description: string;
|
|
4
|
-
props: string;
|
|
5
|
-
features: string[];
|
|
6
|
-
bestPractices: string[];
|
|
7
|
-
usage: string;
|
|
8
|
-
examples: {
|
|
9
|
-
basic: string;
|
|
10
|
-
variants: string;
|
|
11
|
-
"with-icons": string;
|
|
12
|
-
interactive: string;
|
|
13
|
-
};
|
|
14
|
-
};
|
|
15
|
-
//# sourceMappingURL=Skeleton.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/data/components/Skeleton.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;CA+GpB,CAAC"}
|
|
@@ -1,110 +0,0 @@
|
|
|
1
|
-
export const Skeleton = {
|
|
2
|
-
category: "feedback",
|
|
3
|
-
description: "Loading placeholder that mimics content structure while data loads",
|
|
4
|
-
props: `
|
|
5
|
-
Skeleton Props:
|
|
6
|
-
- \`width\`: number | string - Width of skeleton (default: '100%')
|
|
7
|
-
- \`height\`: number | string - Height of skeleton (default: 20)
|
|
8
|
-
- \`shape\`: 'rectangle' | 'circle' | 'rounded' - Shape of skeleton (default: 'rectangle')
|
|
9
|
-
- \`borderRadius\`: number - Border radius for 'rounded' shape (default: 8)
|
|
10
|
-
- \`animation\`: 'pulse' | 'wave' | 'none' - Animation type (default: 'pulse')
|
|
11
|
-
- \`style\`: ViewStyle - Additional custom styles
|
|
12
|
-
- \`testID\`: string - Test identifier
|
|
13
|
-
|
|
14
|
-
SkeletonGroup Props:
|
|
15
|
-
- \`count\`: number - Number of skeleton items (default: 3)
|
|
16
|
-
- \`spacing\`: number - Spacing between items in pixels (default: 12)
|
|
17
|
-
- \`skeletonProps\`: Omit<SkeletonProps, 'testID'> - Props for each skeleton
|
|
18
|
-
- \`style\`: ViewStyle - Container styles
|
|
19
|
-
- \`testID\`: string - Test identifier
|
|
20
|
-
`,
|
|
21
|
-
features: [
|
|
22
|
-
"Three shapes: rectangle, circle, rounded",
|
|
23
|
-
"Three animation types",
|
|
24
|
-
"Configurable dimensions",
|
|
25
|
-
"Group component for multiple skeletons",
|
|
26
|
-
"Customizable spacing",
|
|
27
|
-
"Mimics content structure",
|
|
28
|
-
],
|
|
29
|
-
bestPractices: [
|
|
30
|
-
"Match skeleton shape to actual content",
|
|
31
|
-
"Use pulse animation for general loading",
|
|
32
|
-
"Use wave animation for feed-like content",
|
|
33
|
-
"Show skeleton while data is loading",
|
|
34
|
-
"Replace skeleton with actual content smoothly",
|
|
35
|
-
"Use SkeletonGroup for consistent layouts",
|
|
36
|
-
],
|
|
37
|
-
usage: `
|
|
38
|
-
import { Skeleton, SkeletonGroup } from '@idealyst/components';
|
|
39
|
-
|
|
40
|
-
// Single skeleton
|
|
41
|
-
<Skeleton width={200} height={20} shape="rounded" />
|
|
42
|
-
|
|
43
|
-
// Multiple skeletons
|
|
44
|
-
<SkeletonGroup
|
|
45
|
-
count={3}
|
|
46
|
-
spacing={16}
|
|
47
|
-
skeletonProps={{ width: '100%', height: 60, shape: 'rounded' }}
|
|
48
|
-
/>
|
|
49
|
-
`,
|
|
50
|
-
examples: {
|
|
51
|
-
basic: `import { Skeleton } from '@idealyst/components';
|
|
52
|
-
|
|
53
|
-
<Skeleton width={150} height={20} />`,
|
|
54
|
-
variants: `import { Skeleton, View } from '@idealyst/components';
|
|
55
|
-
|
|
56
|
-
<View spacing="md">
|
|
57
|
-
<Skeleton width="100%" height={20} shape="rectangle" />
|
|
58
|
-
<Skeleton width={100} height={100} shape="circle" />
|
|
59
|
-
<Skeleton width={200} height={40} shape="rounded" />
|
|
60
|
-
</View>`,
|
|
61
|
-
"with-icons": `import { Skeleton, View } from '@idealyst/components';
|
|
62
|
-
|
|
63
|
-
// Mimicking a user card
|
|
64
|
-
<View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
|
|
65
|
-
<Skeleton width={48} height={48} shape="circle" />
|
|
66
|
-
<View spacing="sm" style={{ flex: 1 }}>
|
|
67
|
-
<Skeleton width="60%" height={16} />
|
|
68
|
-
<Skeleton width="40%" height={14} />
|
|
69
|
-
</View>
|
|
70
|
-
</View>`,
|
|
71
|
-
interactive: `import { Skeleton, SkeletonGroup, View, Card, Text, Button } from '@idealyst/components';
|
|
72
|
-
import { useState, useEffect } from 'react';
|
|
73
|
-
|
|
74
|
-
function Example() {
|
|
75
|
-
const [loading, setLoading] = useState(true);
|
|
76
|
-
const [data, setData] = useState(null);
|
|
77
|
-
|
|
78
|
-
useEffect(() => {
|
|
79
|
-
setTimeout(() => {
|
|
80
|
-
setData({ title: 'Article Title', content: 'Article content...' });
|
|
81
|
-
setLoading(false);
|
|
82
|
-
}, 2000);
|
|
83
|
-
}, []);
|
|
84
|
-
|
|
85
|
-
if (loading) {
|
|
86
|
-
return (
|
|
87
|
-
<Card padding="medium">
|
|
88
|
-
<View spacing="md">
|
|
89
|
-
<Skeleton width="80%" height={24} shape="rounded" />
|
|
90
|
-
<SkeletonGroup
|
|
91
|
-
count={3}
|
|
92
|
-
skeletonProps={{ width: '100%', height: 16 }}
|
|
93
|
-
/>
|
|
94
|
-
</View>
|
|
95
|
-
</Card>
|
|
96
|
-
);
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
return (
|
|
100
|
-
<Card padding="medium">
|
|
101
|
-
<View spacing="md">
|
|
102
|
-
<Text size="large" weight="bold">{data.title}</Text>
|
|
103
|
-
<Text>{data.content}</Text>
|
|
104
|
-
</View>
|
|
105
|
-
</Card>
|
|
106
|
-
);
|
|
107
|
-
}`,
|
|
108
|
-
},
|
|
109
|
-
};
|
|
110
|
-
//# sourceMappingURL=Skeleton.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../src/data/components/Skeleton.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,QAAQ,EAAE,UAAU;IACpB,WAAW,EAAE,oEAAoE;IACjF,KAAK,EAAE;;;;;;;;;;;;;;;;CAgBR;IACC,QAAQ,EAAE;QACR,0CAA0C;QAC1C,uBAAuB;QACvB,yBAAyB;QACzB,wCAAwC;QACxC,sBAAsB;QACtB,0BAA0B;KAC3B;IACD,aAAa,EAAE;QACb,wCAAwC;QACxC,yCAAyC;QACzC,0CAA0C;QAC1C,qCAAqC;QACrC,+CAA+C;QAC/C,0CAA0C;KAC3C;IACD,KAAK,EAAE;;;;;;;;;;;;CAYR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;qCAE0B;QAEjC,QAAQ,EAAE;;;;;;QAMN;QAEJ,YAAY,EAAE;;;;;;;;;QASV;QAEJ,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCf;KACC;CACF,CAAC"}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
export declare const Slider: {
|
|
2
|
-
category: string;
|
|
3
|
-
description: string;
|
|
4
|
-
props: string;
|
|
5
|
-
features: string[];
|
|
6
|
-
bestPractices: string[];
|
|
7
|
-
usage: string;
|
|
8
|
-
examples: {
|
|
9
|
-
basic: string;
|
|
10
|
-
variants: string;
|
|
11
|
-
"with-icons": string;
|
|
12
|
-
interactive: string;
|
|
13
|
-
};
|
|
14
|
-
};
|
|
15
|
-
//# sourceMappingURL=Slider.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/data/components/Slider.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;CAkIlB,CAAC"}
|
|
@@ -1,129 +0,0 @@
|
|
|
1
|
-
export const Slider = {
|
|
2
|
-
category: "form",
|
|
3
|
-
description: "Input slider for selecting numeric values from a range",
|
|
4
|
-
props: `
|
|
5
|
-
- \`value\`: number - Current slider value
|
|
6
|
-
- \`defaultValue\`: number - Default value (uncontrolled)
|
|
7
|
-
- \`min\`: number - Minimum value (default: 0)
|
|
8
|
-
- \`max\`: number - Maximum value (default: 100)
|
|
9
|
-
- \`step\`: number - Step increment (default: 1)
|
|
10
|
-
- \`disabled\`: boolean - Whether slider is disabled
|
|
11
|
-
- \`showValue\`: boolean - Show current value label
|
|
12
|
-
- \`showMinMax\`: boolean - Show min/max labels
|
|
13
|
-
- \`marks\`: SliderMark[] - Custom marks on slider
|
|
14
|
-
- \`value\`: number - Mark position
|
|
15
|
-
- \`label\`: string - Mark label (optional)
|
|
16
|
-
- \`intent\`: 'primary' | 'success' | 'error' | 'warning' | 'neutral' - Color scheme
|
|
17
|
-
- \`size\`: 'small' | 'medium' | 'large' - Slider size
|
|
18
|
-
- \`onValueChange\`: (value: number) => void - Called during drag
|
|
19
|
-
- \`onValueCommit\`: (value: number) => void - Called when drag ends
|
|
20
|
-
- \`style\`: ViewStyle - Additional styles
|
|
21
|
-
- \`testID\`: string - Test identifier
|
|
22
|
-
`,
|
|
23
|
-
features: [
|
|
24
|
-
"Controlled and uncontrolled modes",
|
|
25
|
-
"Min/max value constraints",
|
|
26
|
-
"Step increment",
|
|
27
|
-
"Custom marks",
|
|
28
|
-
"Value display",
|
|
29
|
-
"Min/max labels",
|
|
30
|
-
"Three sizes",
|
|
31
|
-
"Five intent colors",
|
|
32
|
-
"Change and commit callbacks",
|
|
33
|
-
],
|
|
34
|
-
bestPractices: [
|
|
35
|
-
"Use for continuous numeric values",
|
|
36
|
-
"Show current value for user feedback",
|
|
37
|
-
"Use marks for important values",
|
|
38
|
-
"Set appropriate step size for precision",
|
|
39
|
-
"Use onValueCommit for expensive operations",
|
|
40
|
-
"Provide min/max labels for context",
|
|
41
|
-
],
|
|
42
|
-
usage: `
|
|
43
|
-
import { Slider } from '@idealyst/components';
|
|
44
|
-
import { useState } from 'react';
|
|
45
|
-
|
|
46
|
-
function Example() {
|
|
47
|
-
const [value, setValue] = useState(50);
|
|
48
|
-
|
|
49
|
-
return (
|
|
50
|
-
<Slider
|
|
51
|
-
value={value}
|
|
52
|
-
onValueChange={setValue}
|
|
53
|
-
min={0}
|
|
54
|
-
max={100}
|
|
55
|
-
step={5}
|
|
56
|
-
showValue
|
|
57
|
-
showMinMax
|
|
58
|
-
/>
|
|
59
|
-
);
|
|
60
|
-
}
|
|
61
|
-
`,
|
|
62
|
-
examples: {
|
|
63
|
-
basic: `import { Slider } from '@idealyst/components';
|
|
64
|
-
|
|
65
|
-
<Slider min={0} max={100} defaultValue={50} />`,
|
|
66
|
-
variants: `import { Slider, View } from '@idealyst/components';
|
|
67
|
-
|
|
68
|
-
<View spacing="md">
|
|
69
|
-
<Slider size="small" value={25} />
|
|
70
|
-
<Slider size="medium" value={50} />
|
|
71
|
-
<Slider size="large" value={75} />
|
|
72
|
-
</View>`,
|
|
73
|
-
"with-icons": `import { Slider, View, Text, Icon } from '@idealyst/components';
|
|
74
|
-
import { useState } from 'react';
|
|
75
|
-
|
|
76
|
-
function VolumeControl() {
|
|
77
|
-
const [volume, setVolume] = useState(50);
|
|
78
|
-
|
|
79
|
-
return (
|
|
80
|
-
<View spacing="sm">
|
|
81
|
-
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
|
|
82
|
-
<Icon name="volume-low" size="md" />
|
|
83
|
-
<Slider
|
|
84
|
-
value={volume}
|
|
85
|
-
onValueChange={setVolume}
|
|
86
|
-
min={0}
|
|
87
|
-
max={100}
|
|
88
|
-
style={{ flex: 1 }}
|
|
89
|
-
/>
|
|
90
|
-
<Icon name="volume-high" size="md" />
|
|
91
|
-
</View>
|
|
92
|
-
<Text align="center">{volume}%</Text>
|
|
93
|
-
</View>
|
|
94
|
-
);
|
|
95
|
-
}`,
|
|
96
|
-
interactive: `import { Slider, View, Text, Button } from '@idealyst/components';
|
|
97
|
-
import { useState } from 'react';
|
|
98
|
-
|
|
99
|
-
function Example() {
|
|
100
|
-
const [price, setPrice] = useState(50);
|
|
101
|
-
|
|
102
|
-
const marks = [
|
|
103
|
-
{ value: 0, label: '$0' },
|
|
104
|
-
{ value: 50, label: '$50' },
|
|
105
|
-
{ value: 100, label: '$100' },
|
|
106
|
-
];
|
|
107
|
-
|
|
108
|
-
return (
|
|
109
|
-
<View spacing="md">
|
|
110
|
-
<Text weight="bold">Price Range: \${price}</Text>
|
|
111
|
-
<Slider
|
|
112
|
-
value={price}
|
|
113
|
-
onValueChange={setPrice}
|
|
114
|
-
min={0}
|
|
115
|
-
max={100}
|
|
116
|
-
step={5}
|
|
117
|
-
marks={marks}
|
|
118
|
-
showValue
|
|
119
|
-
intent="primary"
|
|
120
|
-
/>
|
|
121
|
-
<Button onPress={() => console.log('Filter:', price)}>
|
|
122
|
-
Apply Filter
|
|
123
|
-
</Button>
|
|
124
|
-
</View>
|
|
125
|
-
);
|
|
126
|
-
}`,
|
|
127
|
-
},
|
|
128
|
-
};
|
|
129
|
-
//# sourceMappingURL=Slider.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../src/data/components/Slider.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,QAAQ,EAAE,MAAM;IAChB,WAAW,EAAE,wDAAwD;IACrE,KAAK,EAAE;;;;;;;;;;;;;;;;;;CAkBR;IACC,QAAQ,EAAE;QACR,mCAAmC;QACnC,2BAA2B;QAC3B,gBAAgB;QAChB,cAAc;QACd,eAAe;QACf,gBAAgB;QAChB,aAAa;QACb,oBAAoB;QACpB,6BAA6B;KAC9B;IACD,aAAa,EAAE;QACb,mCAAmC;QACnC,sCAAsC;QACtC,gCAAgC;QAChC,yCAAyC;QACzC,4CAA4C;QAC5C,oCAAoC;KACrC;IACD,KAAK,EAAE;;;;;;;;;;;;;;;;;;;CAmBR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;+CAEoC;QAE3C,QAAQ,EAAE;;;;;;QAMN;QAEJ,YAAY,EAAE;;;;;;;;;;;;;;;;;;;;;;EAsBhB;QAEE,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8Bf;KACC;CACF,CAAC"}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
export declare const Switch: {
|
|
2
|
-
category: string;
|
|
3
|
-
description: string;
|
|
4
|
-
props: string;
|
|
5
|
-
features: string[];
|
|
6
|
-
bestPractices: string[];
|
|
7
|
-
usage: string;
|
|
8
|
-
examples: {
|
|
9
|
-
basic: string;
|
|
10
|
-
variants: string;
|
|
11
|
-
"with-icons": string;
|
|
12
|
-
interactive: string;
|
|
13
|
-
};
|
|
14
|
-
};
|
|
15
|
-
//# sourceMappingURL=Switch.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/data/components/Switch.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;CAgIlB,CAAC"}
|
|
@@ -1,127 +0,0 @@
|
|
|
1
|
-
export const Switch = {
|
|
2
|
-
category: "form",
|
|
3
|
-
description: "Toggle switch for binary on/off states",
|
|
4
|
-
props: `
|
|
5
|
-
- \`checked\`: boolean - Whether the switch is checked/on
|
|
6
|
-
- \`onCheckedChange\`: (checked: boolean) => void - Called when switch toggles
|
|
7
|
-
- \`disabled\`: boolean - Whether the switch is disabled
|
|
8
|
-
- \`label\`: string - Label text next to switch
|
|
9
|
-
- \`labelPosition\`: 'left' | 'right' - Position of label relative to switch
|
|
10
|
-
- \`intent\`: 'primary' | 'neutral' | 'success' | 'error' | 'warning' - Color scheme
|
|
11
|
-
- \`size\`: 'small' | 'medium' | 'large' - Switch size
|
|
12
|
-
- \`enabledIcon\`: IconName | ReactNode - Icon shown when enabled
|
|
13
|
-
- \`disabledIcon\`: IconName | ReactNode - Icon shown when disabled
|
|
14
|
-
- \`style\`: ViewStyle - Additional styles
|
|
15
|
-
- \`testID\`: string - Test identifier
|
|
16
|
-
`,
|
|
17
|
-
features: [
|
|
18
|
-
"Binary on/off toggle",
|
|
19
|
-
"Label with configurable position",
|
|
20
|
-
"Three sizes",
|
|
21
|
-
"Five intent colors",
|
|
22
|
-
"Custom icons for states",
|
|
23
|
-
"Disabled state",
|
|
24
|
-
"Animated transition",
|
|
25
|
-
],
|
|
26
|
-
bestPractices: [
|
|
27
|
-
"Use for binary settings (on/off, enabled/disabled)",
|
|
28
|
-
"Provide clear labels",
|
|
29
|
-
"Use intent colors to indicate state meaning",
|
|
30
|
-
"Place label on left for form layouts",
|
|
31
|
-
"Use icons sparingly for clarity",
|
|
32
|
-
"Immediate effect - no submit button needed",
|
|
33
|
-
],
|
|
34
|
-
usage: `
|
|
35
|
-
import { Switch } from '@idealyst/components';
|
|
36
|
-
import { useState } from 'react';
|
|
37
|
-
|
|
38
|
-
function Example() {
|
|
39
|
-
const [enabled, setEnabled] = useState(false);
|
|
40
|
-
|
|
41
|
-
return (
|
|
42
|
-
<Switch
|
|
43
|
-
checked={enabled}
|
|
44
|
-
onCheckedChange={setEnabled}
|
|
45
|
-
label="Enable notifications"
|
|
46
|
-
intent="primary"
|
|
47
|
-
/>
|
|
48
|
-
);
|
|
49
|
-
}
|
|
50
|
-
`,
|
|
51
|
-
examples: {
|
|
52
|
-
basic: `import { Switch } from '@idealyst/components';
|
|
53
|
-
|
|
54
|
-
<Switch label="Enable feature" />`,
|
|
55
|
-
variants: `import { Switch, View } from '@idealyst/components';
|
|
56
|
-
|
|
57
|
-
<View spacing="md">
|
|
58
|
-
<Switch label="Small" size="small" checked />
|
|
59
|
-
<Switch label="Medium" size="medium" checked />
|
|
60
|
-
<Switch label="Large" size="large" checked />
|
|
61
|
-
</View>`,
|
|
62
|
-
"with-icons": `import { Switch, View } from '@idealyst/components';
|
|
63
|
-
import { useState } from 'react';
|
|
64
|
-
|
|
65
|
-
function Example() {
|
|
66
|
-
const [darkMode, setDarkMode] = useState(false);
|
|
67
|
-
|
|
68
|
-
return (
|
|
69
|
-
<Switch
|
|
70
|
-
checked={darkMode}
|
|
71
|
-
onCheckedChange={setDarkMode}
|
|
72
|
-
label="Dark Mode"
|
|
73
|
-
enabledIcon="weather-night"
|
|
74
|
-
disabledIcon="white-balance-sunny"
|
|
75
|
-
intent="primary"
|
|
76
|
-
/>
|
|
77
|
-
);
|
|
78
|
-
}`,
|
|
79
|
-
interactive: `import { Switch, View, Text, Card } from '@idealyst/components';
|
|
80
|
-
import { useState } from 'react';
|
|
81
|
-
|
|
82
|
-
function SettingsPanel() {
|
|
83
|
-
const [settings, setSettings] = useState({
|
|
84
|
-
notifications: true,
|
|
85
|
-
location: false,
|
|
86
|
-
analytics: true,
|
|
87
|
-
});
|
|
88
|
-
|
|
89
|
-
const toggle = (key: string) => {
|
|
90
|
-
setSettings({ ...settings, [key]: !settings[key] });
|
|
91
|
-
};
|
|
92
|
-
|
|
93
|
-
return (
|
|
94
|
-
<Card variant="outlined" padding="medium">
|
|
95
|
-
<View spacing="md">
|
|
96
|
-
<Text weight="bold">Privacy Settings</Text>
|
|
97
|
-
|
|
98
|
-
<Switch
|
|
99
|
-
checked={settings.notifications}
|
|
100
|
-
onCheckedChange={() => toggle('notifications')}
|
|
101
|
-
label="Push Notifications"
|
|
102
|
-
labelPosition="left"
|
|
103
|
-
intent="primary"
|
|
104
|
-
/>
|
|
105
|
-
|
|
106
|
-
<Switch
|
|
107
|
-
checked={settings.location}
|
|
108
|
-
onCheckedChange={() => toggle('location')}
|
|
109
|
-
label="Location Services"
|
|
110
|
-
labelPosition="left"
|
|
111
|
-
intent="warning"
|
|
112
|
-
/>
|
|
113
|
-
|
|
114
|
-
<Switch
|
|
115
|
-
checked={settings.analytics}
|
|
116
|
-
onCheckedChange={() => toggle('analytics')}
|
|
117
|
-
label="Analytics & Data"
|
|
118
|
-
labelPosition="left"
|
|
119
|
-
intent="neutral"
|
|
120
|
-
/>
|
|
121
|
-
</View>
|
|
122
|
-
</Card>
|
|
123
|
-
);
|
|
124
|
-
}`,
|
|
125
|
-
},
|
|
126
|
-
};
|
|
127
|
-
//# sourceMappingURL=Switch.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/data/components/Switch.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,QAAQ,EAAE,MAAM;IAChB,WAAW,EAAE,wCAAwC;IACrD,KAAK,EAAE;;;;;;;;;;;;CAYR;IACC,QAAQ,EAAE;QACR,sBAAsB;QACtB,kCAAkC;QAClC,aAAa;QACb,oBAAoB;QACpB,yBAAyB;QACzB,gBAAgB;QAChB,qBAAqB;KACtB;IACD,aAAa,EAAE;QACb,oDAAoD;QACpD,sBAAsB;QACtB,6CAA6C;QAC7C,sCAAsC;QACtC,iCAAiC;QACjC,4CAA4C;KAC7C;IACD,KAAK,EAAE;;;;;;;;;;;;;;;;CAgBR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;kCAEuB;QAE9B,QAAQ,EAAE;;;;;;QAMN;QAEJ,YAAY,EAAE;;;;;;;;;;;;;;;;EAgBhB;QAEE,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6Cf;KACC;CACF,CAAC"}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
export declare const TabBar: {
|
|
2
|
-
category: string;
|
|
3
|
-
description: string;
|
|
4
|
-
props: string;
|
|
5
|
-
features: string[];
|
|
6
|
-
bestPractices: string[];
|
|
7
|
-
usage: string;
|
|
8
|
-
examples: {
|
|
9
|
-
basic: string;
|
|
10
|
-
variants: string;
|
|
11
|
-
"with-icons": string;
|
|
12
|
-
interactive: string;
|
|
13
|
-
};
|
|
14
|
-
};
|
|
15
|
-
//# sourceMappingURL=TabBar.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TabBar.d.ts","sourceRoot":"","sources":["../../../src/data/components/TabBar.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;CAkJlB,CAAC"}
|