Created
July 17, 2025 04:54
-
-
Save denyherianto/42fc254ab27ed162639bc7565cbf9c87 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| - Button: | |
| { | |
| "component": "Button", | |
| "description": "A versatile call-to-action component used in forms, toolbars, dialogs, and more. Supports multiple colors, sizes, variants, icons, and states.", | |
| "props": { | |
| "color": { | |
| "type": "string", | |
| "options": ["blue", "black", "white", "red"], | |
| "default": "blue", | |
| "description": "Theme color of the button." | |
| }, | |
| "size": { | |
| "type": "string", | |
| "options": ["sm", "md", "lg"], | |
| "default": "md", | |
| "description": "Controls the size of the button." | |
| }, | |
| "variant": { | |
| "type": "string", | |
| "options": ["solid", "ghost"], | |
| "default": "solid", | |
| "description": "Visual style of the button — filled (solid) or transparent (ghost)." | |
| }, | |
| "onClick": { | |
| "type": "function", | |
| "required": true, | |
| "description": "Callback when the button is clicked." | |
| }, | |
| "disabled": { | |
| "type": "boolean", | |
| "default": false, | |
| "description": "Disables the button." | |
| }, | |
| "isLoading": { | |
| "type": "boolean", | |
| "default": false, | |
| "description": "Shows a loading spinner and disables interactions." | |
| }, | |
| "fullWidth": { | |
| "type": "boolean", | |
| "default": false, | |
| "description": "Stretches the button to the full width of its container." | |
| }, | |
| "iconOnly": { | |
| "type": "boolean", | |
| "default": false, | |
| "description": "Hides label text and displays only an icon inside the button." | |
| }, | |
| "children": { | |
| "type": "string", | |
| "description": "Label text or content inside the button." | |
| } | |
| }, | |
| "styles": { | |
| "base": { | |
| "display": "inline-flex", | |
| "alignItems": "center", | |
| "justifyContent": "center", | |
| "gap": "8px", | |
| "padding": "0 16px", | |
| "height": "40px", | |
| "borderRadius": "4px", | |
| "fontSize": "14px", | |
| "fontWeight": "500" | |
| }, | |
| "variants": { | |
| "solid": { | |
| "background": { | |
| "blue": "#0B5FEF", | |
| "black": "#000000", | |
| "white": "#FFFFFF", | |
| "red": "#EF4444" | |
| }, | |
| "textColor": { | |
| "white": "#000", | |
| "blue": "#FFF" | |
| } | |
| }, | |
| "ghost": { | |
| "background": "transparent", | |
| "border": "1px solid", | |
| "textColor": { | |
| "blue": "#0B5FEF", | |
| "red": "#EF4444" | |
| } | |
| } | |
| }, | |
| "disabled": { | |
| "opacity": "0.5", | |
| "cursor": "not-allowed" | |
| } | |
| }, | |
| "usageExample": "<Button color=\"blue\" size=\"md\" variant=\"solid\" onClick={() => alert('Clicked')}>Submit</Button>" | |
| } | |
| - Badge: | |
| { | |
| "component": "Badge", | |
| "description": "A graphical element used to display status or contextual information like 'tag' or 'status'. Typically used to convey semantic meaning such as success, error, or informational states.", | |
| "props": { | |
| "variant": { | |
| "type": "string", | |
| "options": [ | |
| "success", | |
| "critical", | |
| "warning", | |
| "informational", | |
| "neutral", | |
| "expressive-success", | |
| "expressive-warning", | |
| "expressive-critical", | |
| "expressive-informational", | |
| "expressive-neutral" | |
| ], | |
| "description": "Defines the semantic meaning and style of the badge (e.g., success, warning, expressive variants)." | |
| }, | |
| "size": { | |
| "type": "string", | |
| "options": ["sm", "md"], | |
| "default": "sm", | |
| "description": "Size of the badge. Use 'sm' for compact, 'md' for medium display." | |
| }, | |
| "children": { | |
| "type": "string", | |
| "description": "Text content inside the badge." | |
| } | |
| }, | |
| "styles": { | |
| "display": "flex", | |
| "flexDirection": "row", | |
| "alignItems": "flex-start", | |
| "padding": "2px 8px", | |
| "gap": "10px", | |
| "width": "60px", | |
| "height": "24px", | |
| "background": "#9AE5B9", | |
| "borderRadius": "20px", | |
| "flex": "none", | |
| "order": "0", | |
| "flexGrow": "0" | |
| }, | |
| "usageExample": "<Badge size=\"sm\" variant=\"success\">Active</Badge>" | |
| } | |
| - Checkbox | |
| { | |
| "component": "Checkbox", | |
| "description": "A toggle control that lets users select one or more options from a list. Can be used individually or inside a CheckboxGroup.", | |
| "props": { | |
| "value": { | |
| "type": "string", | |
| "required": true, | |
| "description": "The value associated with the checkbox, used in form data or selected values." | |
| }, | |
| "disabled": { | |
| "type": "boolean", | |
| "default": false, | |
| "description": "Disables the checkbox, preventing interaction." | |
| }, | |
| "children": { | |
| "type": "string", | |
| "description": "Label or text displayed next to the checkbox." | |
| } | |
| }, | |
| "states": [ | |
| "default: unchecked and enabled", | |
| "checked: selected by the user", | |
| "disabled: not interactive" | |
| ], | |
| "styles": { | |
| "checkedColor": "#0B5FEF", | |
| "disabledColor": "#BDBDBD", | |
| "font": "14px sans-serif", | |
| "spacing": "8px between checkbox and label", | |
| "marginBottom": "8px for vertical layout" | |
| }, | |
| "usageExample": "<Checkbox value=\"john\">John Doe</Checkbox>" | |
| } | |
| - CheckboxGroup | |
| { | |
| "component": "CheckboxGroup", | |
| "description": "Groups multiple checkboxes together and manages selected state. Useful for multi-select scenarios.", | |
| "props": { | |
| "name": { | |
| "type": "string", | |
| "required": true, | |
| "description": "Name of the form group." | |
| }, | |
| "value": { | |
| "type": "array", | |
| "description": "Array of selected values." | |
| }, | |
| "onChange": { | |
| "type": "function", | |
| "description": "Function to call when selection changes." | |
| }, | |
| "children": { | |
| "type": "node", | |
| "description": "One or more <Checkbox> components." | |
| }, | |
| "className": { | |
| "type": "string", | |
| "description": "Custom layout styling (e.g., vertical or horizontal)." | |
| } | |
| }, | |
| "usageExample": "<CheckboxGroup name=\"select-user\" value={[\"jane\"]} onChange={setSelected}><Checkbox value=\"jane\">Jane Doe</Checkbox></CheckboxGroup>" | |
| } | |
| - Textarea: | |
| { | |
| "component": "Textarea", | |
| "description": "A multi-line text input field for user input such as comments, descriptions, or messages. Supports validation states, helper text, and character counters.", | |
| "props": { | |
| "placeholder": { | |
| "type": "string", | |
| "description": "Placeholder text displayed when the textarea is empty." | |
| }, | |
| "disabled": { | |
| "type": "boolean", | |
| "default": false, | |
| "description": "Disables the textarea input." | |
| }, | |
| "invalid": { | |
| "type": "boolean", | |
| "default": false, | |
| "description": "Displays the textarea in an error state." | |
| }, | |
| "helperText": { | |
| "type": "string", | |
| "description": "Text shown below the input to assist the user." | |
| }, | |
| "maxLength": { | |
| "type": "number", | |
| "description": "Maximum number of characters allowed." | |
| }, | |
| "errorMessage": { | |
| "type": "string", | |
| "description": "Text shown below the input when `invalid` is true." | |
| }, | |
| "counterSlot": { | |
| "type": "function", | |
| "description": "Custom render function to show character count. Example: `(count, text) => \`\${count} characters\``" | |
| }, | |
| "value": { | |
| "type": "string", | |
| "description": "The current text value of the textarea." | |
| } | |
| }, | |
| "states": [ | |
| "default: normal input with placeholder", | |
| "disabled: grayed out and non-editable", | |
| "invalid: error styling with errorMessage shown" | |
| ], | |
| "styles": { | |
| "base": { | |
| "padding": "8px", | |
| "border": "1px solid #ccc", | |
| "borderRadius": "4px", | |
| "fontSize": "14px", | |
| "lineHeight": "1.5", | |
| "width": "100%", | |
| "minHeight": "120px" | |
| }, | |
| "invalid": { | |
| "borderColor": "#EF4444", | |
| "backgroundColor": "#FFF5F5" | |
| }, | |
| "disabled": { | |
| "backgroundColor": "#E5E5E5", | |
| "color": "#A0A0A0" | |
| }, | |
| "helperText": { | |
| "fontSize": "12px", | |
| "marginTop": "4px", | |
| "color": "#6B7280" | |
| }, | |
| "errorText": { | |
| "fontSize": "12px", | |
| "marginTop": "4px", | |
| "color": "#EF4444" | |
| }, | |
| "counterText": { | |
| "fontSize": "12px", | |
| "textAlign": "right", | |
| "marginTop": "4px", | |
| "color": "#6B7280" | |
| } | |
| }, | |
| "usageExample": "<Textarea placeholder=\"Write your message...\" maxLength={140} helperText=\"Max 140 characters\" />" | |
| } | |
| - Select: | |
| { | |
| "component": "Select", | |
| "description": "Dropdown input component that allows users to select one item from a list. Supports labels, placeholders, validation, and custom rendering.", | |
| "props": { | |
| "label": { | |
| "type": "string", | |
| "description": "The label shown above the select field." | |
| }, | |
| "selected": { | |
| "type": "string", | |
| "description": "Currently selected option value." | |
| }, | |
| "options": { | |
| "type": "Array<{ label: string, value: string, disabled?: boolean }>", | |
| "required": true, | |
| "description": "Array of available options for the select input." | |
| }, | |
| "placeholder": { | |
| "type": "string", | |
| "description": "Text shown when no option is selected." | |
| }, | |
| "error": { | |
| "type": "string", | |
| "description": "Optional error message shown below the field." | |
| }, | |
| "disabled": { | |
| "type": "boolean", | |
| "description": "Disables the select input when true." | |
| }, | |
| "customIcon": { | |
| "type": "ReactNode", | |
| "description": "Optional icon to render inside the select." | |
| }, | |
| "onChange": { | |
| "type": "function", | |
| "description": "Callback fired when the selected option changes." | |
| } | |
| }, | |
| "states": [ | |
| "Default", | |
| "Disabled", | |
| "With Helper", | |
| "Error", | |
| "Custom Select", | |
| "With Custom List", | |
| "With Custom Icon" | |
| ], | |
| "usageExamples": [ | |
| { | |
| "label": "Pilih opsi", | |
| "options": [ | |
| { "label": "Option 1", "value": "1" }, | |
| { "label": "Option 2", "value": "2", "disabled": true }, | |
| { "label": "Option 3", "value": "3" } | |
| ], | |
| "placeholder": "Choose...", | |
| "selected": "1" | |
| }, | |
| { | |
| "label": "Pilih kepala sekolah", | |
| "options": [ | |
| { "label": "Jared Parsons", "value": "jared" } | |
| ], | |
| "customIcon": "<UserIcon />" | |
| } | |
| ], | |
| "validation": { | |
| "errorExample": { | |
| "error": "This is an error message", | |
| "selected": "1" | |
| }, | |
| "helperText": "Informational or helper text shown under the select." | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment