@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,95 +0,0 @@
|
|
|
1
|
-
export const Progress = {
|
|
2
|
-
category: "feedback",
|
|
3
|
-
description: "Progress indicator showing completion status of tasks or operations",
|
|
4
|
-
props: `
|
|
5
|
-
- \`value\`: number - Current progress value (0-max)
|
|
6
|
-
- \`max\`: number - Maximum value (default: 100)
|
|
7
|
-
- \`variant\`: 'linear' | 'circular' - Progress bar style
|
|
8
|
-
- \`intent\`: 'primary' | 'neutral' | 'success' | 'error' | 'warning' - Color scheme
|
|
9
|
-
- \`size\`: 'small' | 'medium' | 'large' - Size of progress indicator
|
|
10
|
-
- \`indeterminate\`: boolean - Show indeterminate/loading state
|
|
11
|
-
- \`showLabel\`: boolean - Show percentage label
|
|
12
|
-
- \`label\`: string - Custom label text
|
|
13
|
-
- \`rounded\`: boolean - Rounded ends (linear variant)
|
|
14
|
-
- \`style\`: ViewStyle - Additional custom styles
|
|
15
|
-
- \`testID\`: string - Test identifier
|
|
16
|
-
`,
|
|
17
|
-
features: [
|
|
18
|
-
"Linear and circular variants",
|
|
19
|
-
"Determinate and indeterminate modes",
|
|
20
|
-
"Five intent colors",
|
|
21
|
-
"Three sizes",
|
|
22
|
-
"Percentage label support",
|
|
23
|
-
"Custom label text",
|
|
24
|
-
"Rounded ends option",
|
|
25
|
-
],
|
|
26
|
-
bestPractices: [
|
|
27
|
-
"Use determinate progress when percentage is known",
|
|
28
|
-
"Use indeterminate progress for unknown duration",
|
|
29
|
-
"Show label for user feedback",
|
|
30
|
-
"Use circular variant for compact spaces",
|
|
31
|
-
"Match intent to operation context",
|
|
32
|
-
],
|
|
33
|
-
usage: `
|
|
34
|
-
import { Progress } from '@idealyst/components';
|
|
35
|
-
|
|
36
|
-
<Progress
|
|
37
|
-
value={65}
|
|
38
|
-
variant="linear"
|
|
39
|
-
intent="primary"
|
|
40
|
-
showLabel
|
|
41
|
-
/>
|
|
42
|
-
`,
|
|
43
|
-
examples: {
|
|
44
|
-
basic: `import { Progress } from '@idealyst/components';
|
|
45
|
-
|
|
46
|
-
<Progress value={50} />`,
|
|
47
|
-
variants: `import { Progress, View } from '@idealyst/components';
|
|
48
|
-
|
|
49
|
-
<View spacing="md">
|
|
50
|
-
<Progress value={30} variant="linear" intent="primary" />
|
|
51
|
-
<Progress value={60} variant="linear" intent="success" />
|
|
52
|
-
<Progress value={value} variant="circular" size="large" showLabel />
|
|
53
|
-
</View>`,
|
|
54
|
-
"with-icons": `import { Progress, View, Text } from '@idealyst/components';
|
|
55
|
-
|
|
56
|
-
<View spacing="sm">
|
|
57
|
-
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
|
|
58
|
-
<Text>Uploading...</Text>
|
|
59
|
-
<Text>{progress}%</Text>
|
|
60
|
-
</View>
|
|
61
|
-
<Progress value={progress} intent="primary" />
|
|
62
|
-
</View>`,
|
|
63
|
-
interactive: `import { Progress, Button, View, Text } from '@idealyst/components';
|
|
64
|
-
import { useState, useEffect } from 'react';
|
|
65
|
-
|
|
66
|
-
function Example() {
|
|
67
|
-
const [progress, setProgress] = useState(0);
|
|
68
|
-
const [running, setRunning] = useState(false);
|
|
69
|
-
|
|
70
|
-
useEffect(() => {
|
|
71
|
-
if (running && progress < 100) {
|
|
72
|
-
const timer = setTimeout(() => setProgress(progress + 10), 500);
|
|
73
|
-
return () => clearTimeout(timer);
|
|
74
|
-
} else if (progress >= 100) {
|
|
75
|
-
setRunning(false);
|
|
76
|
-
}
|
|
77
|
-
}, [progress, running]);
|
|
78
|
-
|
|
79
|
-
const handleStart = () => {
|
|
80
|
-
setProgress(0);
|
|
81
|
-
setRunning(true);
|
|
82
|
-
};
|
|
83
|
-
|
|
84
|
-
return (
|
|
85
|
-
<View spacing="md">
|
|
86
|
-
<Progress value={progress} intent="success" showLabel />
|
|
87
|
-
<Button onPress={handleStart} disabled={running}>
|
|
88
|
-
Start
|
|
89
|
-
</Button>
|
|
90
|
-
</View>
|
|
91
|
-
);
|
|
92
|
-
}`,
|
|
93
|
-
},
|
|
94
|
-
};
|
|
95
|
-
//# sourceMappingURL=Progress.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Progress.js","sourceRoot":"","sources":["../../../src/data/components/Progress.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,QAAQ,EAAE,UAAU;IACpB,WAAW,EAAE,qEAAqE;IAClF,KAAK,EAAE;;;;;;;;;;;;CAYR;IACC,QAAQ,EAAE;QACR,8BAA8B;QAC9B,qCAAqC;QACrC,oBAAoB;QACpB,aAAa;QACb,0BAA0B;QAC1B,mBAAmB;QACnB,qBAAqB;KACtB;IACD,aAAa,EAAE;QACb,mDAAmD;QACnD,iDAAiD;QACjD,8BAA8B;QAC9B,yCAAyC;QACzC,mCAAmC;KACpC;IACD,KAAK,EAAE;;;;;;;;;CASR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;wBAEa;QAEpB,QAAQ,EAAE;;;;;;QAMN;QAEJ,YAAY,EAAE;;;;;;;;QAQV;QAEJ,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6Bf;KACC;CACF,CAAC"}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
export declare const RadioButton: {
|
|
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=RadioButton.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButton.d.ts","sourceRoot":"","sources":["../../../src/data/components/RadioButton.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW;;;;;;;;;;;;;CA6IvB,CAAC"}
|
|
@@ -1,140 +0,0 @@
|
|
|
1
|
-
export const RadioButton = {
|
|
2
|
-
category: "form",
|
|
3
|
-
description: "Radio button for single-choice selection within a group",
|
|
4
|
-
props: `
|
|
5
|
-
RadioButton Props:
|
|
6
|
-
- \`value\`: string - The value of this radio button
|
|
7
|
-
- \`checked\`: boolean - Whether the radio is checked
|
|
8
|
-
- \`onPress\`: () => void - Press handler
|
|
9
|
-
- \`disabled\`: boolean - Whether disabled
|
|
10
|
-
- \`label\`: string - Label text
|
|
11
|
-
- \`size\`: 'small' | 'medium' | 'large' - Radio size
|
|
12
|
-
- \`intent\`: 'primary' | 'success' | 'error' | 'warning' | 'neutral' - Color scheme
|
|
13
|
-
- \`style\`: ViewStyle - Additional styles
|
|
14
|
-
- \`testID\`: string - Test identifier
|
|
15
|
-
|
|
16
|
-
RadioGroup Props:
|
|
17
|
-
- \`value\`: string - Currently selected value
|
|
18
|
-
- \`onValueChange\`: (value: string) => void - Selection change handler
|
|
19
|
-
- \`disabled\`: boolean - Disable all radio buttons
|
|
20
|
-
- \`orientation\`: 'horizontal' | 'vertical' - Layout orientation
|
|
21
|
-
- \`children\`: ReactNode - Radio button children
|
|
22
|
-
- \`style\`: ViewStyle - Additional styles
|
|
23
|
-
- \`testID\`: string - Test identifier
|
|
24
|
-
`,
|
|
25
|
-
features: [
|
|
26
|
-
"Single selection within group",
|
|
27
|
-
"Horizontal and vertical layouts",
|
|
28
|
-
"Label support",
|
|
29
|
-
"Three sizes",
|
|
30
|
-
"Five intent colors",
|
|
31
|
-
"Disabled state (individual or group)",
|
|
32
|
-
"Controlled component",
|
|
33
|
-
],
|
|
34
|
-
bestPractices: [
|
|
35
|
-
"Use RadioGroup to manage selection state",
|
|
36
|
-
"Always provide labels for accessibility",
|
|
37
|
-
"Use for mutually exclusive options (3-5 choices)",
|
|
38
|
-
"For 2 options, consider Switch or Checkbox",
|
|
39
|
-
"For many options (>5), consider Select",
|
|
40
|
-
"Group related options visually",
|
|
41
|
-
],
|
|
42
|
-
usage: `
|
|
43
|
-
import { RadioGroup, RadioButton } from '@idealyst/components';
|
|
44
|
-
import { useState } from 'react';
|
|
45
|
-
|
|
46
|
-
function Example() {
|
|
47
|
-
const [value, setValue] = useState('option1');
|
|
48
|
-
|
|
49
|
-
return (
|
|
50
|
-
<RadioGroup value={value} onValueChange={setValue}>
|
|
51
|
-
<RadioButton value="option1" label="Option 1" />
|
|
52
|
-
<RadioButton value="option2" label="Option 2" />
|
|
53
|
-
<RadioButton value="option3" label="Option 3" />
|
|
54
|
-
</RadioGroup>
|
|
55
|
-
);
|
|
56
|
-
}
|
|
57
|
-
`,
|
|
58
|
-
examples: {
|
|
59
|
-
basic: `import { RadioGroup, RadioButton } from '@idealyst/components';
|
|
60
|
-
|
|
61
|
-
<RadioGroup value={selected} onValueChange={setSelected}>
|
|
62
|
-
<RadioButton value="a" label="Choice A" />
|
|
63
|
-
<RadioButton value="b" label="Choice B" />
|
|
64
|
-
</RadioGroup>`,
|
|
65
|
-
variants: `import { RadioGroup, RadioButton, View } from '@idealyst/components';
|
|
66
|
-
|
|
67
|
-
<View spacing="md">
|
|
68
|
-
{/* Vertical (default) */}
|
|
69
|
-
<RadioGroup value={value} onValueChange={setValue}>
|
|
70
|
-
<RadioButton value="1" label="Option 1" />
|
|
71
|
-
<RadioButton value="2" label="Option 2" />
|
|
72
|
-
</RadioGroup>
|
|
73
|
-
|
|
74
|
-
{/* Horizontal */}
|
|
75
|
-
<RadioGroup value={value} onValueChange={setValue} orientation="horizontal">
|
|
76
|
-
<RadioButton value="1" label="Small" size="small" />
|
|
77
|
-
<RadioButton value="2" label="Medium" size="medium" />
|
|
78
|
-
<RadioButton value="3" label="Large" size="large" />
|
|
79
|
-
</RadioGroup>
|
|
80
|
-
</View>`,
|
|
81
|
-
"with-icons": `import { RadioGroup, RadioButton } from '@idealyst/components';
|
|
82
|
-
|
|
83
|
-
<RadioGroup value={plan} onValueChange={setPlan}>
|
|
84
|
-
<RadioButton
|
|
85
|
-
value="free"
|
|
86
|
-
label="Free Plan"
|
|
87
|
-
intent="neutral"
|
|
88
|
-
/>
|
|
89
|
-
<RadioButton
|
|
90
|
-
value="pro"
|
|
91
|
-
label="Pro Plan"
|
|
92
|
-
intent="primary"
|
|
93
|
-
/>
|
|
94
|
-
<RadioButton
|
|
95
|
-
value="enterprise"
|
|
96
|
-
label="Enterprise Plan"
|
|
97
|
-
intent="success"
|
|
98
|
-
/>
|
|
99
|
-
</RadioGroup>`,
|
|
100
|
-
interactive: `import { RadioGroup, RadioButton, View, Text, Card } from '@idealyst/components';
|
|
101
|
-
import { useState } from 'react';
|
|
102
|
-
|
|
103
|
-
function Example() {
|
|
104
|
-
const [shipping, setShipping] = useState('standard');
|
|
105
|
-
|
|
106
|
-
const options = [
|
|
107
|
-
{ value: 'standard', label: 'Standard (5-7 days)', price: 'Free' },
|
|
108
|
-
{ value: 'express', label: 'Express (2-3 days)', price: '$10' },
|
|
109
|
-
{ value: 'overnight', label: 'Overnight', price: '$25' },
|
|
110
|
-
];
|
|
111
|
-
|
|
112
|
-
return (
|
|
113
|
-
<View spacing="md">
|
|
114
|
-
<Text weight="bold">Select Shipping Method</Text>
|
|
115
|
-
<RadioGroup value={shipping} onValueChange={setShipping}>
|
|
116
|
-
{options.map((option) => (
|
|
117
|
-
<Card
|
|
118
|
-
key={option.value}
|
|
119
|
-
variant={shipping === option.value ? 'outlined' : 'default'}
|
|
120
|
-
padding="small"
|
|
121
|
-
clickable
|
|
122
|
-
onPress={() => setShipping(option.value)}
|
|
123
|
-
>
|
|
124
|
-
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
|
|
125
|
-
<RadioButton
|
|
126
|
-
value={option.value}
|
|
127
|
-
label={option.label}
|
|
128
|
-
checked={shipping === option.value}
|
|
129
|
-
/>
|
|
130
|
-
<Text weight="bold">{option.price}</Text>
|
|
131
|
-
</View>
|
|
132
|
-
</Card>
|
|
133
|
-
))}
|
|
134
|
-
</RadioGroup>
|
|
135
|
-
</View>
|
|
136
|
-
);
|
|
137
|
-
}`,
|
|
138
|
-
},
|
|
139
|
-
};
|
|
140
|
-
//# sourceMappingURL=RadioButton.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButton.js","sourceRoot":"","sources":["../../../src/data/components/RadioButton.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,QAAQ,EAAE,MAAM;IAChB,WAAW,EAAE,yDAAyD;IACtE,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;CAoBR;IACC,QAAQ,EAAE;QACR,+BAA+B;QAC/B,iCAAiC;QACjC,eAAe;QACf,aAAa;QACb,oBAAoB;QACpB,sCAAsC;QACtC,sBAAsB;KACvB;IACD,aAAa,EAAE;QACb,0CAA0C;QAC1C,yCAAyC;QACzC,kDAAkD;QAClD,4CAA4C;QAC5C,wCAAwC;QACxC,gCAAgC;KACjC;IACD,KAAK,EAAE;;;;;;;;;;;;;;;CAeR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;;;;cAKG;QAEV,QAAQ,EAAE;;;;;;;;;;;;;;;QAeN;QAEJ,YAAY,EAAE;;;;;;;;;;;;;;;;;;cAkBJ;QAEV,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqCf;KACC;CACF,CAAC"}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
export declare const SVGImage: {
|
|
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=SVGImage.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SVGImage.d.ts","sourceRoot":"","sources":["../../../src/data/components/SVGImage.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;CAiHpB,CAAC"}
|
|
@@ -1,112 +0,0 @@
|
|
|
1
|
-
export const SVGImage = {
|
|
2
|
-
category: "media",
|
|
3
|
-
description: "SVG image component with color, size, and intent support",
|
|
4
|
-
props: `
|
|
5
|
-
- \`source\`: string | { uri: string } | React.FC<SvgProps> - SVG source (local file, URL, or component)
|
|
6
|
-
- \`width\`: number | string - Image width
|
|
7
|
-
- \`height\`: number | string - Image height
|
|
8
|
-
- \`size\`: number | string - Sets both width and height
|
|
9
|
-
- \`color\`: string - Custom color override
|
|
10
|
-
- \`intent\`: IntentNames - Theme intent color
|
|
11
|
-
- \`resizeMode\`: 'contain' | 'cover' | 'stretch' - How SVG fits container
|
|
12
|
-
- \`style\`: ViewProps - Additional styles
|
|
13
|
-
`,
|
|
14
|
-
features: [
|
|
15
|
-
"Multiple source types (file, URL, component)",
|
|
16
|
-
"Size and dimension control",
|
|
17
|
-
"Color customization",
|
|
18
|
-
"Theme intent colors",
|
|
19
|
-
"Resize modes",
|
|
20
|
-
"Cross-platform support",
|
|
21
|
-
],
|
|
22
|
-
bestPractices: [
|
|
23
|
-
"Use local SVG files for icons and logos",
|
|
24
|
-
"Use remote URLs for dynamic SVGs",
|
|
25
|
-
"Set explicit size for consistent rendering",
|
|
26
|
-
"Use intent colors for theme consistency",
|
|
27
|
-
"Prefer 'contain' resizeMode to preserve aspect ratio",
|
|
28
|
-
"Optimize SVG files for web performance",
|
|
29
|
-
],
|
|
30
|
-
usage: `
|
|
31
|
-
import { SVGImage } from '@idealyst/components';
|
|
32
|
-
import LogoIcon from './assets/logo.svg';
|
|
33
|
-
|
|
34
|
-
// Local SVG file
|
|
35
|
-
<SVGImage source={LogoIcon} size={48} intent="primary" />
|
|
36
|
-
|
|
37
|
-
// Remote SVG
|
|
38
|
-
<SVGImage
|
|
39
|
-
source={{ uri: 'https://cdn.example.com/icon.svg' }}
|
|
40
|
-
width={32}
|
|
41
|
-
height={32}
|
|
42
|
-
color="#FF0000"
|
|
43
|
-
/>
|
|
44
|
-
`,
|
|
45
|
-
examples: {
|
|
46
|
-
basic: `import { SVGImage } from '@idealyst/components';
|
|
47
|
-
import Icon from './icon.svg';
|
|
48
|
-
|
|
49
|
-
<SVGImage source={Icon} size={24} />`,
|
|
50
|
-
variants: `import { SVGImage, View } from '@idealyst/components';
|
|
51
|
-
import Logo from './logo.svg';
|
|
52
|
-
|
|
53
|
-
<View style={{ flexDirection: 'row', gap: 16, alignItems: 'center' }}>
|
|
54
|
-
<SVGImage source={Logo} size={24} />
|
|
55
|
-
<SVGImage source={Logo} size={32} />
|
|
56
|
-
<SVGImage source={Logo} size={48} />
|
|
57
|
-
<SVGImage source={Logo} size={64} />
|
|
58
|
-
</View>`,
|
|
59
|
-
"with-icons": `import { SVGImage, View, Text } from '@idealyst/components';
|
|
60
|
-
import ReactLogo from './react-logo.svg';
|
|
61
|
-
|
|
62
|
-
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
|
|
63
|
-
<SVGImage source={ReactLogo} size={32} color="#61dafb" />
|
|
64
|
-
<View spacing="xs">
|
|
65
|
-
<Text weight="bold">React Application</Text>
|
|
66
|
-
<Text size="small">Built with React & React Native</Text>
|
|
67
|
-
</View>
|
|
68
|
-
</View>`,
|
|
69
|
-
interactive: `import { SVGImage, View, Button, Text } from '@idealyst/components';
|
|
70
|
-
import { useState } from 'react';
|
|
71
|
-
import AppIcon from './app-icon.svg';
|
|
72
|
-
|
|
73
|
-
function Example() {
|
|
74
|
-
const [size, setSize] = useState(48);
|
|
75
|
-
const [intent, setIntent] = useState('primary');
|
|
76
|
-
|
|
77
|
-
const intents = ['primary', 'neutral', 'success', 'error', 'warning'];
|
|
78
|
-
|
|
79
|
-
return (
|
|
80
|
-
<View spacing="md" style={{ alignItems: 'center' }}>
|
|
81
|
-
<SVGImage source={AppIcon} size={size} intent={intent} />
|
|
82
|
-
|
|
83
|
-
<View style={{ flexDirection: 'row', gap: 8 }}>
|
|
84
|
-
<Button size="small" onPress={() => setSize(Math.max(24, size - 12))}>
|
|
85
|
-
Smaller
|
|
86
|
-
</Button>
|
|
87
|
-
<Button size="small" onPress={() => setSize(Math.min(96, size + 12))}>
|
|
88
|
-
Larger
|
|
89
|
-
</Button>
|
|
90
|
-
</View>
|
|
91
|
-
|
|
92
|
-
<View spacing="xs">
|
|
93
|
-
<Text size="small">Intent:</Text>
|
|
94
|
-
<View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
|
|
95
|
-
{intents.map((i) => (
|
|
96
|
-
<Button
|
|
97
|
-
key={i}
|
|
98
|
-
size="small"
|
|
99
|
-
variant={intent === i ? 'contained' : 'outlined'}
|
|
100
|
-
onPress={() => setIntent(i)}
|
|
101
|
-
>
|
|
102
|
-
{i}
|
|
103
|
-
</Button>
|
|
104
|
-
))}
|
|
105
|
-
</View>
|
|
106
|
-
</View>
|
|
107
|
-
</View>
|
|
108
|
-
);
|
|
109
|
-
}`,
|
|
110
|
-
},
|
|
111
|
-
};
|
|
112
|
-
//# sourceMappingURL=SVGImage.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SVGImage.js","sourceRoot":"","sources":["../../../src/data/components/SVGImage.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,QAAQ,EAAE,OAAO;IACjB,WAAW,EAAE,0DAA0D;IACvE,KAAK,EAAE;;;;;;;;;CASR;IACC,QAAQ,EAAE;QACR,8CAA8C;QAC9C,4BAA4B;QAC5B,qBAAqB;QACrB,qBAAqB;QACrB,cAAc;QACd,wBAAwB;KACzB;IACD,aAAa,EAAE;QACb,yCAAyC;QACzC,kCAAkC;QAClC,4CAA4C;QAC5C,yCAAyC;QACzC,sDAAsD;QACtD,wCAAwC;KACzC;IACD,KAAK,EAAE;;;;;;;;;;;;;;CAcR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;;qCAG0B;QAEjC,QAAQ,EAAE;;;;;;;;QAQN;QAEJ,YAAY,EAAE;;;;;;;;;QASV;QAEJ,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwCf;KACC;CACF,CAAC"}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
export declare const Screen: {
|
|
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=Screen.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Screen.d.ts","sourceRoot":"","sources":["../../../src/data/components/Screen.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;CAoGlB,CAAC"}
|
|
@@ -1,99 +0,0 @@
|
|
|
1
|
-
export const Screen = {
|
|
2
|
-
category: "layout",
|
|
3
|
-
description: "Full-screen container component with background variants, padding, and safe area support",
|
|
4
|
-
props: `
|
|
5
|
-
- \`children\`: ReactNode - Content to display inside the screen
|
|
6
|
-
- \`background\`: 'primary' | 'secondary' | 'tertiary' | 'inverse' - Background color variant
|
|
7
|
-
- \`padding\`: 'none' | 'sm' | 'md' | 'lg' | 'xl' - Screen padding variant
|
|
8
|
-
- \`safeArea\`: boolean - Apply safe area padding for mobile devices
|
|
9
|
-
- \`style\`: any - Additional custom styles
|
|
10
|
-
- \`testID\`: string - Test identifier
|
|
11
|
-
- \`scrollable\`: boolean - Make content scrollable
|
|
12
|
-
`,
|
|
13
|
-
features: [
|
|
14
|
-
"Four background color variants",
|
|
15
|
-
"Five padding options",
|
|
16
|
-
"Safe area support for notches/home indicators",
|
|
17
|
-
"Optional scrollable content",
|
|
18
|
-
"Full-screen container",
|
|
19
|
-
"Cross-platform support",
|
|
20
|
-
],
|
|
21
|
-
bestPractices: [
|
|
22
|
-
"Use as root container for app screens",
|
|
23
|
-
"Enable safeArea for mobile apps",
|
|
24
|
-
"Use 'primary' background for main content",
|
|
25
|
-
"Use 'inverse' background for dark mode or special screens",
|
|
26
|
-
"Combine with View for internal spacing",
|
|
27
|
-
"Enable scrollable for long content",
|
|
28
|
-
],
|
|
29
|
-
usage: `
|
|
30
|
-
import { Screen, View, Text } from '@idealyst/components';
|
|
31
|
-
|
|
32
|
-
<Screen background="primary" padding="md" safeArea>
|
|
33
|
-
<View spacing="lg">
|
|
34
|
-
<Text size="xlarge" weight="bold">Screen Title</Text>
|
|
35
|
-
<Text>Screen content goes here</Text>
|
|
36
|
-
</View>
|
|
37
|
-
</Screen>
|
|
38
|
-
`,
|
|
39
|
-
examples: {
|
|
40
|
-
basic: `import { Screen, Text } from '@idealyst/components';
|
|
41
|
-
|
|
42
|
-
<Screen background="primary" padding="md">
|
|
43
|
-
<Text>Basic screen content</Text>
|
|
44
|
-
</Screen>`,
|
|
45
|
-
variants: `import { Screen, Text } from '@idealyst/components';
|
|
46
|
-
|
|
47
|
-
// Different backgrounds
|
|
48
|
-
<Screen background="primary"><Text>Primary</Text></Screen>
|
|
49
|
-
<Screen background="secondary"><Text>Secondary</Text></Screen>
|
|
50
|
-
<Screen background="tertiary"><Text>Tertiary</Text></Screen>
|
|
51
|
-
<Screen background="inverse"><Text>Inverse</Text></Screen>`,
|
|
52
|
-
"with-icons": `import { Screen, View, Icon, Text } from '@idealyst/components';
|
|
53
|
-
|
|
54
|
-
<Screen background="primary" padding="lg" safeArea>
|
|
55
|
-
<View spacing="md">
|
|
56
|
-
<View style={{ alignItems: 'center' }}>
|
|
57
|
-
<Icon name="check-circle" size="xl" color="success" />
|
|
58
|
-
</View>
|
|
59
|
-
<Text align="center" size="xlarge" weight="bold">
|
|
60
|
-
Success!
|
|
61
|
-
</Text>
|
|
62
|
-
<Text align="center">
|
|
63
|
-
Your action was completed successfully
|
|
64
|
-
</Text>
|
|
65
|
-
</View>
|
|
66
|
-
</Screen>`,
|
|
67
|
-
interactive: `import { Screen, View, Text, Button } from '@idealyst/components';
|
|
68
|
-
import { useState } from 'react';
|
|
69
|
-
|
|
70
|
-
function Example() {
|
|
71
|
-
const [darkMode, setDarkMode] = useState(false);
|
|
72
|
-
|
|
73
|
-
return (
|
|
74
|
-
<Screen
|
|
75
|
-
background={darkMode ? 'inverse' : 'primary'}
|
|
76
|
-
padding="md"
|
|
77
|
-
safeArea
|
|
78
|
-
scrollable
|
|
79
|
-
>
|
|
80
|
-
<View spacing="lg">
|
|
81
|
-
<Text size="xlarge" weight="bold">
|
|
82
|
-
Settings
|
|
83
|
-
</Text>
|
|
84
|
-
<Button
|
|
85
|
-
onPress={() => setDarkMode(!darkMode)}
|
|
86
|
-
variant="outlined"
|
|
87
|
-
>
|
|
88
|
-
Toggle {darkMode ? 'Light' : 'Dark'} Mode
|
|
89
|
-
</Button>
|
|
90
|
-
<Text>
|
|
91
|
-
Current theme: {darkMode ? 'Dark' : 'Light'}
|
|
92
|
-
</Text>
|
|
93
|
-
</View>
|
|
94
|
-
</Screen>
|
|
95
|
-
);
|
|
96
|
-
}`,
|
|
97
|
-
},
|
|
98
|
-
};
|
|
99
|
-
//# sourceMappingURL=Screen.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Screen.js","sourceRoot":"","sources":["../../../src/data/components/Screen.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,QAAQ,EAAE,QAAQ;IAClB,WAAW,EAAE,0FAA0F;IACvG,KAAK,EAAE;;;;;;;;CAQR;IACC,QAAQ,EAAE;QACR,gCAAgC;QAChC,sBAAsB;QACtB,+CAA+C;QAC/C,6BAA6B;QAC7B,uBAAuB;QACvB,wBAAwB;KACzB;IACD,aAAa,EAAE;QACb,uCAAuC;QACvC,iCAAiC;QACjC,2CAA2C;QAC3C,2DAA2D;QAC3D,wCAAwC;QACxC,oCAAoC;KACrC;IACD,KAAK,EAAE;;;;;;;;;CASR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;;;UAID;QAEN,QAAQ,EAAE;;;;;;2DAM6C;QAEvD,YAAY,EAAE;;;;;;;;;;;;;;UAcR;QAEN,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6Bf;KACC;CACF,CAAC"}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
export declare const Select: {
|
|
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=Select.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/data/components/Select.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;CAmJlB,CAAC"}
|