@idealyst/mcp-server 1.2.24 → 1.2.26
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/index.cjs +22366 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +1 -0
- package/dist/index.d.ts +0 -2
- package/dist/index.js +22186 -1034
- package/dist/index.js.map +1 -1
- package/package.json +17 -7
- 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 -113
- 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 -80
- 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 -130
- 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 -91
- 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 -92
- package/dist/data/components/Breadcrumb.js.map +0 -1
- package/dist/data/components/Button.d.ts +0 -16
- package/dist/data/components/Button.d.ts.map +0 -1
- package/dist/data/components/Button.js +0 -118
- 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 -75
- 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 -94
- 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 -68
- 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 -68
- 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 -119
- 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 -155
- package/dist/data/components/Input.js.map +0 -1
- package/dist/data/components/Link.d.ts +0 -15
- package/dist/data/components/Link.d.ts.map +0 -1
- package/dist/data/components/Link.js +0 -142
- package/dist/data/components/Link.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 -123
- 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 -157
- 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 -93
- 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 -131
- 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 -109
- 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 -141
- 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 -100
- 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 -151
- 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 -128
- package/dist/data/components/Switch.js.map +0 -1
- package/dist/data/components/TabBar.d.ts +0 -17
- package/dist/data/components/TabBar.d.ts.map +0 -1
- package/dist/data/components/TabBar.js +0 -244
- 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 -159
- 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 -97
- 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 -156
- 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 -103
- 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 -166
- 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 -127
- package/dist/data/components/View.js.map +0 -1
- package/dist/data/components/index.d.ts +0 -38
- package/dist/data/components/index.d.ts.map +0 -1
- package/dist/data/components/index.js +0 -113
- 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 -1730
- 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 -2144
- package/dist/data/navigation-guides.js.map +0 -1
- package/dist/data/packages.d.ts +0 -39
- package/dist/data/packages.d.ts.map +0 -1
- package/dist/data/packages.js +0 -550
- package/dist/data/packages.js.map +0 -1
- package/dist/data/recipes.d.ts +0 -36
- package/dist/data/recipes.d.ts.map +0 -1
- package/dist/data/recipes.js +0 -2945
- package/dist/data/recipes.js.map +0 -1
- package/dist/data/storage-guides.d.ts +0 -2
- package/dist/data/storage-guides.d.ts.map +0 -1
- package/dist/data/storage-guides.js +0 -418
- package/dist/data/storage-guides.js.map +0 -1
- package/dist/data/translate-guides.d.ts +0 -2
- package/dist/data/translate-guides.d.ts.map +0 -1
- package/dist/data/translate-guides.js +0 -1030
- package/dist/data/translate-guides.js.map +0 -1
- package/dist/index.d.ts.map +0 -1
- package/dist/tools/get-types.d.ts +0 -37
- package/dist/tools/get-types.d.ts.map +0 -1
- package/dist/tools/get-types.js +0 -148
- package/dist/tools/get-types.js.map +0 -1
|
@@ -1,155 +0,0 @@
|
|
|
1
|
-
export const Input = {
|
|
2
|
-
category: "form",
|
|
3
|
-
description: "Text input field with icons, password visibility toggle, margin variants, and various input types",
|
|
4
|
-
props: `
|
|
5
|
-
- \`value\`: string - The current value of the input
|
|
6
|
-
- \`onChangeText\`: function - Called when the text changes
|
|
7
|
-
- \`onFocus\`: function - Called when the input receives focus
|
|
8
|
-
- \`onBlur\`: function - Called when the input loses focus
|
|
9
|
-
- \`placeholder\`: string - Placeholder text
|
|
10
|
-
- \`disabled\`: boolean - Whether the input is disabled
|
|
11
|
-
- \`inputType\`: InputInputType - The type of input (affects keyboard type on mobile)
|
|
12
|
-
- \`secureTextEntry\`: boolean - Whether to show the password
|
|
13
|
-
- \`leftIcon\`: IconName | React.ReactNode - Icon to display on the left side of the input
|
|
14
|
-
- \`rightIcon\`: IconName | React.ReactNode - Icon to display on the right side of the input
|
|
15
|
-
- \`showPasswordToggle\`: boolean - Show password visibility toggle for password inputs (defaults to true for password type)
|
|
16
|
-
- \`autoCapitalize\`: 'none' | 'sentences' | 'words' | 'characters' - Auto-capitalization behavior
|
|
17
|
-
- \`size\`: InputSize - Size variant of the input
|
|
18
|
-
- \`type\`: InputType - Style variant of the input
|
|
19
|
-
- \`intent\`: InputIntent - The intent/color scheme of the input (for focus states, validation, etc.)
|
|
20
|
-
- \`hasError\`: boolean - Whether the input has an error state
|
|
21
|
-
- \`margin\`: Size - Margin on all sides ('xs' | 'sm' | 'md' | 'lg' | 'xl')
|
|
22
|
-
- \`marginVertical\`: Size - Top and bottom margin
|
|
23
|
-
- \`marginHorizontal\`: Size - Left and right margin
|
|
24
|
-
`,
|
|
25
|
-
features: [
|
|
26
|
-
"Left and right icon support with MDI icons",
|
|
27
|
-
"Password visibility toggle with eye/eye-off icons",
|
|
28
|
-
"Multiple input types (text, email, password, number)",
|
|
29
|
-
"Five size variants (xs, sm, md, lg, xl)",
|
|
30
|
-
"Three style variants (outlined, filled, bare)",
|
|
31
|
-
"Intent colors for focus/validation states",
|
|
32
|
-
"Disabled and error states",
|
|
33
|
-
"Auto-capitalization control",
|
|
34
|
-
"Focus and blur event handlers",
|
|
35
|
-
],
|
|
36
|
-
bestPractices: [
|
|
37
|
-
"Use leftIcon for contextual hints (e.g., email icon for email input)",
|
|
38
|
-
"Password inputs automatically show visibility toggle",
|
|
39
|
-
"Use inputType='email' for email fields to get proper keyboard on mobile",
|
|
40
|
-
"Use inputType='number' for numeric input",
|
|
41
|
-
"Disable password toggle with showPasswordToggle={false} if needed",
|
|
42
|
-
],
|
|
43
|
-
usage: `
|
|
44
|
-
import { Input } from '@idealyst/components';
|
|
45
|
-
import { useState } from 'react';
|
|
46
|
-
|
|
47
|
-
function Example() {
|
|
48
|
-
const [email, setEmail] = useState('');
|
|
49
|
-
|
|
50
|
-
return (
|
|
51
|
-
<Input
|
|
52
|
-
leftIcon="email"
|
|
53
|
-
value={email}
|
|
54
|
-
onChangeText={setEmail}
|
|
55
|
-
placeholder="Enter your email"
|
|
56
|
-
inputType="email"
|
|
57
|
-
/>
|
|
58
|
-
);
|
|
59
|
-
}
|
|
60
|
-
`,
|
|
61
|
-
examples: {
|
|
62
|
-
basic: `import { Input } from '@idealyst/components';
|
|
63
|
-
|
|
64
|
-
<Input
|
|
65
|
-
placeholder="Enter username"
|
|
66
|
-
/>`,
|
|
67
|
-
variants: `import { Input } from '@idealyst/components';
|
|
68
|
-
|
|
69
|
-
// Small size
|
|
70
|
-
<Input size="sm" placeholder="Small input" />
|
|
71
|
-
|
|
72
|
-
// Medium size (default)
|
|
73
|
-
<Input size="md" placeholder="Medium input" />
|
|
74
|
-
|
|
75
|
-
// Large size
|
|
76
|
-
<Input size="lg" placeholder="Large input" />
|
|
77
|
-
|
|
78
|
-
// Outlined variant
|
|
79
|
-
<Input type="outlined" placeholder="Outlined" />
|
|
80
|
-
|
|
81
|
-
// Filled variant
|
|
82
|
-
<Input type="filled" placeholder="Filled" />
|
|
83
|
-
|
|
84
|
-
// Bare variant
|
|
85
|
-
<Input type="bare" placeholder="Bare" />`,
|
|
86
|
-
"with-icons": `import { Input } from '@idealyst/components';
|
|
87
|
-
|
|
88
|
-
// Left icon
|
|
89
|
-
<Input
|
|
90
|
-
leftIcon="email"
|
|
91
|
-
placeholder="Email address"
|
|
92
|
-
inputType="email"
|
|
93
|
-
/>
|
|
94
|
-
|
|
95
|
-
// Right icon
|
|
96
|
-
<Input
|
|
97
|
-
rightIcon="magnify"
|
|
98
|
-
placeholder="Search"
|
|
99
|
-
/>
|
|
100
|
-
|
|
101
|
-
// Both icons
|
|
102
|
-
<Input
|
|
103
|
-
leftIcon="lock"
|
|
104
|
-
rightIcon="check"
|
|
105
|
-
placeholder="Secure field"
|
|
106
|
-
/>
|
|
107
|
-
|
|
108
|
-
// Password with visibility toggle (default)
|
|
109
|
-
<Input
|
|
110
|
-
inputType="password"
|
|
111
|
-
placeholder="Password"
|
|
112
|
-
/>
|
|
113
|
-
|
|
114
|
-
// Password without visibility toggle
|
|
115
|
-
<Input
|
|
116
|
-
inputType="password"
|
|
117
|
-
showPasswordToggle={false}
|
|
118
|
-
placeholder="Password"
|
|
119
|
-
/>
|
|
120
|
-
|
|
121
|
-
// Custom icons with password toggle
|
|
122
|
-
<Input
|
|
123
|
-
leftIcon="lock"
|
|
124
|
-
inputType="password"
|
|
125
|
-
placeholder="Enter password"
|
|
126
|
-
/>`,
|
|
127
|
-
interactive: `import { Input } from '@idealyst/components';
|
|
128
|
-
import { useState } from 'react';
|
|
129
|
-
|
|
130
|
-
function Example() {
|
|
131
|
-
const [email, setEmail] = useState('');
|
|
132
|
-
const [password, setPassword] = useState('');
|
|
133
|
-
|
|
134
|
-
return (
|
|
135
|
-
<View spacing="md">
|
|
136
|
-
<Input
|
|
137
|
-
leftIcon="email"
|
|
138
|
-
value={email}
|
|
139
|
-
onChangeText={setEmail}
|
|
140
|
-
placeholder="Email"
|
|
141
|
-
inputType="email"
|
|
142
|
-
/>
|
|
143
|
-
<Input
|
|
144
|
-
leftIcon="lock"
|
|
145
|
-
value={password}
|
|
146
|
-
onChangeText={setPassword}
|
|
147
|
-
placeholder="Password"
|
|
148
|
-
inputType="password"
|
|
149
|
-
/>
|
|
150
|
-
</View>
|
|
151
|
-
);
|
|
152
|
-
}`,
|
|
153
|
-
}
|
|
154
|
-
};
|
|
155
|
-
//# sourceMappingURL=Input.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/data/components/Input.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,KAAK,GAAG;IACrB,QAAQ,EAAE,MAAM;IACZ,WAAW,EAAE,mGAAmG;IAC5G,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;CAoBd;IACG,QAAQ,EAAE;QACR,4CAA4C;QAC5C,mDAAmD;QACnD,sDAAsD;QACtD,yCAAyC;QACzC,+CAA+C;QAC/C,2CAA2C;QAC3C,2BAA2B;QAC3B,6BAA6B;QAC7B,+BAA+B;KAChC;IACD,aAAa,EAAE;QACb,sEAAsE;QACtE,sDAAsD;QACtD,yEAAyE;QACzE,0CAA0C;QAC1C,mEAAmE;KACpE;IACD,KAAK,EAAE;;;;;;;;;;;;;;;;;CAiBV;IACG,QAAQ,EAAE;QACR,KAAK,EAAE;;;;GAIV;QACG,QAAQ,EAAE;;;;;;;;;;;;;;;;;;yCAkByB;QACnC,YAAY,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCjB;QACG,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;EAyBjB;KACG;CACJ,CAAC"}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
export declare const Link: {
|
|
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=Link.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/data/components/Link.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI;;;;;;;;;;;;;CA+IhB,CAAC"}
|
|
@@ -1,142 +0,0 @@
|
|
|
1
|
-
export const Link = {
|
|
2
|
-
category: "navigation",
|
|
3
|
-
description: "Navigation component that wraps children in a pressable area and navigates to a specified path when pressed",
|
|
4
|
-
props: `
|
|
5
|
-
- \`to\`: string (required) - The destination path to navigate to
|
|
6
|
-
- \`vars\`: Record<string, string> - Variables to substitute in the path (e.g., { id: '123' } for '/user/:id')
|
|
7
|
-
- \`children\`: React.ReactNode - Content to render inside the link
|
|
8
|
-
- \`disabled\`: boolean - Whether the link is disabled
|
|
9
|
-
- \`style\`: StyleProp<ViewStyle> - Style to apply to the link container
|
|
10
|
-
- \`testID\`: string - Test ID for testing
|
|
11
|
-
- \`accessibilityLabel\`: string - Accessibility label for screen readers
|
|
12
|
-
- \`onPress\`: function - Callback fired when the link is pressed (before navigation)
|
|
13
|
-
`,
|
|
14
|
-
features: [
|
|
15
|
-
"Declarative navigation with path-based routing",
|
|
16
|
-
"Path variable substitution for dynamic routes",
|
|
17
|
-
"Works with @idealyst/navigation system",
|
|
18
|
-
"Disabled state support",
|
|
19
|
-
"Custom styling",
|
|
20
|
-
"Accessibility support",
|
|
21
|
-
"Cross-platform (web and native)",
|
|
22
|
-
"onPress callback before navigation",
|
|
23
|
-
],
|
|
24
|
-
bestPractices: [
|
|
25
|
-
"Use for navigation between screens/pages",
|
|
26
|
-
"Prefer Link over manual navigator.navigate() for declarative routing",
|
|
27
|
-
"Use vars prop for dynamic path parameters",
|
|
28
|
-
"Provide accessibilityLabel for screen readers",
|
|
29
|
-
"Wrap any content - text, buttons, cards, icons",
|
|
30
|
-
"Use disabled prop for conditional navigation",
|
|
31
|
-
],
|
|
32
|
-
usage: `
|
|
33
|
-
import { Link, Text } from '@idealyst/components';
|
|
34
|
-
|
|
35
|
-
// Basic text link
|
|
36
|
-
<Link to="/home">
|
|
37
|
-
<Text color="primary">Go Home</Text>
|
|
38
|
-
</Link>
|
|
39
|
-
|
|
40
|
-
// Link with path variables
|
|
41
|
-
<Link to="/user/:id" vars={{ id: '123' }}>
|
|
42
|
-
<Text>View User Profile</Text>
|
|
43
|
-
</Link>
|
|
44
|
-
|
|
45
|
-
// Link wrapping a button
|
|
46
|
-
<Link to="/settings">
|
|
47
|
-
<Button intent="primary">Settings</Button>
|
|
48
|
-
</Link>
|
|
49
|
-
`,
|
|
50
|
-
examples: {
|
|
51
|
-
basic: `import { Link, Text } from '@idealyst/components';
|
|
52
|
-
|
|
53
|
-
<Link to="/home">
|
|
54
|
-
<Text color="primary">Go to Home</Text>
|
|
55
|
-
</Link>`,
|
|
56
|
-
variants: `import { Link, Text, Button, Card, View, Icon } from '@idealyst/components';
|
|
57
|
-
|
|
58
|
-
// Text link
|
|
59
|
-
<Link to="/about">
|
|
60
|
-
<Text color="primary">About Us</Text>
|
|
61
|
-
</Link>
|
|
62
|
-
|
|
63
|
-
// Button link
|
|
64
|
-
<Link to="/dashboard">
|
|
65
|
-
<Button type="contained" intent="primary">
|
|
66
|
-
Go to Dashboard
|
|
67
|
-
</Button>
|
|
68
|
-
</Link>
|
|
69
|
-
|
|
70
|
-
// Card link
|
|
71
|
-
<Link to="/article/1">
|
|
72
|
-
<Card type="outlined" padding="md">
|
|
73
|
-
<Text weight="semibold">Article Title</Text>
|
|
74
|
-
<Text size="sm" color="secondary">Click to read more...</Text>
|
|
75
|
-
</Card>
|
|
76
|
-
</Link>
|
|
77
|
-
|
|
78
|
-
// Icon + Text link
|
|
79
|
-
<Link to="/notifications">
|
|
80
|
-
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
|
|
81
|
-
<Icon name="bell" size={20} intent="primary" />
|
|
82
|
-
<Text color="primary">Notifications</Text>
|
|
83
|
-
</View>
|
|
84
|
-
</Link>`,
|
|
85
|
-
"with-icons": `import { Link, View, Icon, Text } from '@idealyst/components';
|
|
86
|
-
|
|
87
|
-
// Navigation menu item
|
|
88
|
-
<Link to="/settings">
|
|
89
|
-
<View style={{ flexDirection: 'row', alignItems: 'center', padding: 16, gap: 12 }}>
|
|
90
|
-
<Icon name="cog" size={20} intent="primary" />
|
|
91
|
-
<Text style={{ flex: 1 }}>Settings</Text>
|
|
92
|
-
<Icon name="chevron-right" size={16} color="gray.500" />
|
|
93
|
-
</View>
|
|
94
|
-
</Link>
|
|
95
|
-
|
|
96
|
-
// Icon-only link
|
|
97
|
-
<Link to="/search" accessibilityLabel="Search">
|
|
98
|
-
<Icon name="magnify" size={24} intent="primary" />
|
|
99
|
-
</Link>`,
|
|
100
|
-
interactive: `import { Link, Text, Card, View, Icon } from '@idealyst/components';
|
|
101
|
-
|
|
102
|
-
// Clickable card with navigation
|
|
103
|
-
function ArticleCard({ article }) {
|
|
104
|
-
return (
|
|
105
|
-
<Link
|
|
106
|
-
to="/article/:id"
|
|
107
|
-
vars={{ id: article.id }}
|
|
108
|
-
onPress={() => console.log('Navigating to article:', article.id)}
|
|
109
|
-
>
|
|
110
|
-
<Card type="elevated" padding="md">
|
|
111
|
-
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
|
|
112
|
-
<Icon name="file-document" size={24} intent="primary" />
|
|
113
|
-
<View style={{ flex: 1 }}>
|
|
114
|
-
<Text weight="semibold">{article.title}</Text>
|
|
115
|
-
<Text size="sm" color="secondary">{article.excerpt}</Text>
|
|
116
|
-
</View>
|
|
117
|
-
<Icon name="chevron-right" size={20} color="gray.500" />
|
|
118
|
-
</View>
|
|
119
|
-
</Card>
|
|
120
|
-
</Link>
|
|
121
|
-
);
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
// Disabled link
|
|
125
|
-
<Link to="/premium" disabled>
|
|
126
|
-
<Text color="secondary">Premium Feature (Disabled)</Text>
|
|
127
|
-
</Link>
|
|
128
|
-
|
|
129
|
-
// Styled link container
|
|
130
|
-
<Link
|
|
131
|
-
to="/special"
|
|
132
|
-
style={{
|
|
133
|
-
backgroundColor: '#e3f2fd',
|
|
134
|
-
padding: 12,
|
|
135
|
-
borderRadius: 8,
|
|
136
|
-
}}
|
|
137
|
-
>
|
|
138
|
-
<Text color="primary">Special Offer</Text>
|
|
139
|
-
</Link>`,
|
|
140
|
-
},
|
|
141
|
-
};
|
|
142
|
-
//# sourceMappingURL=Link.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../../src/data/components/Link.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,QAAQ,EAAE,YAAY;IACtB,WAAW,EAAE,6GAA6G;IAC1H,KAAK,EAAE;;;;;;;;;CASR;IACC,QAAQ,EAAE;QACR,gDAAgD;QAChD,+CAA+C;QAC/C,wCAAwC;QACxC,wBAAwB;QACxB,gBAAgB;QAChB,uBAAuB;QACvB,iCAAiC;QACjC,oCAAoC;KACrC;IACD,aAAa,EAAE;QACb,0CAA0C;QAC1C,sEAAsE;QACtE,2CAA2C;QAC3C,+CAA+C;QAC/C,gDAAgD;QAChD,8CAA8C;KAC/C;IACD,KAAK,EAAE;;;;;;;;;;;;;;;;;CAiBR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;;;QAIH;QAEJ,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA4BN;QAEJ,YAAY,EAAE;;;;;;;;;;;;;;QAcV;QAEJ,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAuCT;KACL;CACF,CAAC"}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
export declare const List: {
|
|
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=List.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../src/data/components/List.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI;;;;;;;;;;;;;CA+GhB,CAAC"}
|
|
@@ -1,113 +0,0 @@
|
|
|
1
|
-
export const List = {
|
|
2
|
-
category: "display",
|
|
3
|
-
description: "Vertical list container with spacing variants, sections, icons, and interactive items",
|
|
4
|
-
props: `
|
|
5
|
-
- \`children\`: React.ReactNode - List items and sections to display
|
|
6
|
-
- \`type\`: ListType - The visual style variant of the list
|
|
7
|
-
- \`size\`: ListSizeVariant - The size variant of list items
|
|
8
|
-
- \`gap\`: Size - Space between children ('xs' | 'sm' | 'md' | 'lg' | 'xl')
|
|
9
|
-
- \`padding\`: Size - Padding on all sides
|
|
10
|
-
- \`paddingVertical\`: Size - Top and bottom padding
|
|
11
|
-
- \`paddingHorizontal\`: Size - Left and right padding
|
|
12
|
-
- \`margin\`: Size - Margin on all sides
|
|
13
|
-
- \`marginVertical\`: Size - Top and bottom margin
|
|
14
|
-
- \`marginHorizontal\`: Size - Left and right margin
|
|
15
|
-
- \`scrollable\`: boolean - Whether the list is scrollable
|
|
16
|
-
- \`maxHeight\`: number | string - Maximum height of the scrollable list
|
|
17
|
-
`,
|
|
18
|
-
features: [
|
|
19
|
-
"Three visual variants",
|
|
20
|
-
"Configurable item sizes",
|
|
21
|
-
"Gap variant for spacing between items",
|
|
22
|
-
"Padding and margin variants",
|
|
23
|
-
"Leading and trailing elements (icons, badges, etc.)",
|
|
24
|
-
"Selected and active states",
|
|
25
|
-
"Section grouping with titles",
|
|
26
|
-
"Indentation for hierarchy",
|
|
27
|
-
"Icon support via string names",
|
|
28
|
-
],
|
|
29
|
-
bestPractices: [
|
|
30
|
-
"Use sections to organize related items",
|
|
31
|
-
"Use leading icons for visual categorization",
|
|
32
|
-
"Use trailing elements for metadata or actions",
|
|
33
|
-
"Keep list items concise and scannable",
|
|
34
|
-
],
|
|
35
|
-
usage: `
|
|
36
|
-
import { List, ListItem, ListSection } from '@idealyst/components';
|
|
37
|
-
|
|
38
|
-
<List type="bordered">
|
|
39
|
-
<ListSection title="Main">
|
|
40
|
-
<ListItem
|
|
41
|
-
label="Dashboard"
|
|
42
|
-
leading="home"
|
|
43
|
-
onPress={() => navigate('/dashboard')}
|
|
44
|
-
/>
|
|
45
|
-
<ListItem
|
|
46
|
-
label="Settings"
|
|
47
|
-
leading="cog"
|
|
48
|
-
onPress={() => navigate('/settings')}
|
|
49
|
-
/>
|
|
50
|
-
</ListSection>
|
|
51
|
-
</List>
|
|
52
|
-
`,
|
|
53
|
-
examples: {
|
|
54
|
-
basic: `import { List, ListItem } from '@idealyst/components';
|
|
55
|
-
|
|
56
|
-
<List type="divided">
|
|
57
|
-
<ListItem label="Item 1" />
|
|
58
|
-
<ListItem label="Item 2" />
|
|
59
|
-
<ListItem label="Item 3" />
|
|
60
|
-
</List>`,
|
|
61
|
-
variants: `import { List, ListItem } from '@idealyst/components';
|
|
62
|
-
|
|
63
|
-
<List type="default">
|
|
64
|
-
<ListItem label="Default" />
|
|
65
|
-
</List>
|
|
66
|
-
|
|
67
|
-
<List type="bordered">
|
|
68
|
-
<ListItem label="Bordered" />
|
|
69
|
-
</List>
|
|
70
|
-
|
|
71
|
-
<List type="divided">
|
|
72
|
-
<ListItem label="Divided" />
|
|
73
|
-
</List>`,
|
|
74
|
-
"with-icons": `import { List, ListItem, Badge } from '@idealyst/components';
|
|
75
|
-
|
|
76
|
-
<List type="bordered">
|
|
77
|
-
<ListItem
|
|
78
|
-
label="Notifications"
|
|
79
|
-
leading="bell"
|
|
80
|
-
trailing={<Badge>3</Badge>}
|
|
81
|
-
/>
|
|
82
|
-
<ListItem
|
|
83
|
-
label="Messages"
|
|
84
|
-
leading="email"
|
|
85
|
-
trailing={<Badge>12</Badge>}
|
|
86
|
-
/>
|
|
87
|
-
</List>`,
|
|
88
|
-
interactive: `import { List, ListItem } from '@idealyst/components';
|
|
89
|
-
import { useState } from 'react';
|
|
90
|
-
|
|
91
|
-
function Example() {
|
|
92
|
-
const [selected, setSelected] = useState('home');
|
|
93
|
-
|
|
94
|
-
return (
|
|
95
|
-
<List type="bordered">
|
|
96
|
-
<ListItem
|
|
97
|
-
label="Home"
|
|
98
|
-
leading="home"
|
|
99
|
-
selected={selected === 'home'}
|
|
100
|
-
onPress={() => setSelected('home')}
|
|
101
|
-
/>
|
|
102
|
-
<ListItem
|
|
103
|
-
label="Profile"
|
|
104
|
-
leading="account"
|
|
105
|
-
selected={selected === 'profile'}
|
|
106
|
-
onPress={() => setSelected('profile')}
|
|
107
|
-
/>
|
|
108
|
-
</List>
|
|
109
|
-
);
|
|
110
|
-
}`,
|
|
111
|
-
}
|
|
112
|
-
};
|
|
113
|
-
//# sourceMappingURL=List.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"List.js","sourceRoot":"","sources":["../../../src/data/components/List.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,IAAI,GAAG;IACpB,QAAQ,EAAE,SAAS;IACf,WAAW,EAAE,uFAAuF;IAChG,KAAK,EAAE;;;;;;;;;;;;;CAad;IACG,QAAQ,EAAE;QACR,uBAAuB;QACvB,yBAAyB;QACzB,uCAAuC;QACvC,6BAA6B;QAC7B,qDAAqD;QACrD,4BAA4B;QAC5B,8BAA8B;QAC9B,2BAA2B;QAC3B,+BAA+B;KAChC;IACD,aAAa,EAAE;QACb,wCAAwC;QACxC,6CAA6C;QAC7C,+CAA+C;QAC/C,uCAAuC;KACxC;IACD,KAAK,EAAE;;;;;;;;;;;;;;;;;CAiBV;IACG,QAAQ,EAAE;QACR,KAAK,EAAE;;;;;;QAML;QACF,QAAQ,EAAE;;;;;;;;;;;;QAYR;QACF,YAAY,EAAE;;;;;;;;;;;;;QAaZ;QACF,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;EAsBjB;KACG;CACJ,CAAC"}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
export declare const Menu: {
|
|
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=Menu.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/data/components/Menu.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI;;;;;;;;;;;;;CA4HhB,CAAC"}
|
|
@@ -1,123 +0,0 @@
|
|
|
1
|
-
export const Menu = {
|
|
2
|
-
category: "overlay",
|
|
3
|
-
description: "Contextual menu with list of actions, typically triggered by a button or other element",
|
|
4
|
-
props: `
|
|
5
|
-
- \`children\`: React.ReactNode - The trigger element that opens the menu
|
|
6
|
-
- \`items\`: MenuItem[] - Array of menu items to display
|
|
7
|
-
- \`open\`: boolean - Whether the menu is currently open (controlled)
|
|
8
|
-
- \`onOpenChange\`: function - Called when the menu open state changes
|
|
9
|
-
- \`placement\`: MenuPlacement - The placement of the menu relative to the trigger
|
|
10
|
-
- \`closeOnSelection\`: boolean - Whether to close the menu when an item is selected
|
|
11
|
-
- \`size\`: MenuSizeVariant - The size variant of the menu
|
|
12
|
-
`,
|
|
13
|
-
features: [
|
|
14
|
-
"Icon support for menu items",
|
|
15
|
-
"Intent colors for items",
|
|
16
|
-
"Separators between items",
|
|
17
|
-
"Disabled items",
|
|
18
|
-
"Multiple placement options",
|
|
19
|
-
"Auto-close on selection",
|
|
20
|
-
"Three size options",
|
|
21
|
-
],
|
|
22
|
-
bestPractices: [
|
|
23
|
-
"Use separators to group related actions",
|
|
24
|
-
"Place destructive actions at the bottom with error intent",
|
|
25
|
-
"Keep menu items concise (1-3 words)",
|
|
26
|
-
"Use icons for visual scanning",
|
|
27
|
-
"Close menu after action unless multi-select",
|
|
28
|
-
],
|
|
29
|
-
usage: `
|
|
30
|
-
import { Menu, Button } from '@idealyst/components';
|
|
31
|
-
import { useState, useRef } from 'react';
|
|
32
|
-
|
|
33
|
-
function Example() {
|
|
34
|
-
const [open, setOpen] = useState(false);
|
|
35
|
-
const buttonRef = useRef(null);
|
|
36
|
-
|
|
37
|
-
const items = [
|
|
38
|
-
{ id: '1', label: 'Edit', icon: 'pencil', onClick: () => handleEdit() },
|
|
39
|
-
{ id: '2', label: 'Duplicate', icon: 'content-copy', onClick: () => handleDuplicate() },
|
|
40
|
-
{ id: '3', label: 'Delete', icon: 'delete', intent: 'error', onClick: () => handleDelete(), separator: true },
|
|
41
|
-
];
|
|
42
|
-
|
|
43
|
-
return (
|
|
44
|
-
<>
|
|
45
|
-
<div ref={buttonRef}>
|
|
46
|
-
<Button onPress={() => setOpen(true)}>Actions</Button>
|
|
47
|
-
</div>
|
|
48
|
-
<Menu
|
|
49
|
-
items={items}
|
|
50
|
-
open={open}
|
|
51
|
-
onOpenChange={setOpen}
|
|
52
|
-
anchor={buttonRef}
|
|
53
|
-
placement="bottom-start"
|
|
54
|
-
/>
|
|
55
|
-
</>
|
|
56
|
-
);
|
|
57
|
-
}
|
|
58
|
-
`,
|
|
59
|
-
examples: {
|
|
60
|
-
basic: `import { Menu, Button } from '@idealyst/components';
|
|
61
|
-
import { useRef, useState } from 'react';
|
|
62
|
-
|
|
63
|
-
const buttonRef = useRef(null);
|
|
64
|
-
const [open, setOpen] = useState(false);
|
|
65
|
-
|
|
66
|
-
const items = [
|
|
67
|
-
{ id: '1', label: 'Option 1', onClick: () => console.log('1') },
|
|
68
|
-
{ id: '2', label: 'Option 2', onClick: () => console.log('2') },
|
|
69
|
-
];
|
|
70
|
-
|
|
71
|
-
<div ref={buttonRef}>
|
|
72
|
-
<Button onPress={() => setOpen(true)}>Menu</Button>
|
|
73
|
-
</div>
|
|
74
|
-
<Menu items={items} open={open} onOpenChange={setOpen} anchor={buttonRef} />`,
|
|
75
|
-
variants: `import { Menu } from '@idealyst/components';
|
|
76
|
-
|
|
77
|
-
// Different sizes
|
|
78
|
-
<Menu items={items} open={open} onOpenChange={setOpen} anchor={ref} size="sm" />
|
|
79
|
-
<Menu items={items} open={open} onOpenChange={setOpen} anchor={ref} size="md" />
|
|
80
|
-
<Menu items={items} open={open} onOpenChange={setOpen} anchor={ref} size="lg" />`,
|
|
81
|
-
"with-icons": `import { Menu, Button } from '@idealyst/components';
|
|
82
|
-
import { useRef, useState } from 'react';
|
|
83
|
-
|
|
84
|
-
const items = [
|
|
85
|
-
{ id: '1', label: 'Profile', icon: 'account', onClick: () => navigate('/profile') },
|
|
86
|
-
{ id: '2', label: 'Settings', icon: 'cog', onClick: () => navigate('/settings') },
|
|
87
|
-
{ id: '3', label: 'Logout', icon: 'logout', intent: 'error', onClick: () => logout(), separator: true },
|
|
88
|
-
];
|
|
89
|
-
|
|
90
|
-
<Menu items={items} open={open} onOpenChange={setOpen} anchor={buttonRef} />`,
|
|
91
|
-
interactive: `import { Menu, Button, Text, View } from '@idealyst/components';
|
|
92
|
-
import { useRef, useState } from 'react';
|
|
93
|
-
|
|
94
|
-
function Example() {
|
|
95
|
-
const [open, setOpen] = useState(false);
|
|
96
|
-
const [selected, setSelected] = useState('');
|
|
97
|
-
const buttonRef = useRef(null);
|
|
98
|
-
|
|
99
|
-
const items = [
|
|
100
|
-
{ id: 'edit', label: 'Edit', icon: 'pencil', onClick: () => setSelected('edit') },
|
|
101
|
-
{ id: 'share', label: 'Share', icon: 'share', onClick: () => setSelected('share') },
|
|
102
|
-
{ id: 'delete', label: 'Delete', icon: 'delete', intent: 'error', onClick: () => setSelected('delete') },
|
|
103
|
-
];
|
|
104
|
-
|
|
105
|
-
return (
|
|
106
|
-
<View spacing="md">
|
|
107
|
-
<div ref={buttonRef}>
|
|
108
|
-
<Button onPress={() => setOpen(true)}>Actions</Button>
|
|
109
|
-
</div>
|
|
110
|
-
<Menu
|
|
111
|
-
items={items}
|
|
112
|
-
open={open}
|
|
113
|
-
onOpenChange={setOpen}
|
|
114
|
-
anchor={buttonRef}
|
|
115
|
-
placement="bottom-start"
|
|
116
|
-
/>
|
|
117
|
-
{selected && <Text>Selected: {selected}</Text>}
|
|
118
|
-
</View>
|
|
119
|
-
);
|
|
120
|
-
}`,
|
|
121
|
-
},
|
|
122
|
-
};
|
|
123
|
-
//# sourceMappingURL=Menu.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../src/data/components/Menu.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,QAAQ,EAAE,SAAS;IACnB,WAAW,EAAE,wFAAwF;IACjG,KAAK,EAAE;;;;;;;;CAQZ;IACC,QAAQ,EAAE;QACR,6BAA6B;QAC7B,yBAAyB;QACzB,0BAA0B;QAC1B,gBAAgB;QAChB,4BAA4B;QAC5B,yBAAyB;QACzB,oBAAoB;KACrB;IACD,aAAa,EAAE;QACb,yCAAyC;QACzC,2DAA2D;QAC3D,qCAAqC;QACrC,+BAA+B;QAC/B,6CAA6C;KAC9C;IACD,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;;;;;;;;;;;;;6EAckE;QAEzE,QAAQ,EAAE;;;;;iFAKmE;QAE7E,YAAY,EAAE;;;;;;;;;6EAS2D;QAEzE,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6Bf;KACC;CACF,CAAC"}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
export declare const Popover: {
|
|
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=Popover.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/data/components/Popover.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;;;;;;;CA8JnB,CAAC"}
|