-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: added few more docs for ui components
- Loading branch information
1 parent
d9306b6
commit 700e4a5
Showing
14 changed files
with
1,977 additions
and
47 deletions.
There are no files selected for viewing
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,126 @@ | ||
| --- | ||
| title: No Data | ||
| description: No Data component documentation | ||
| --- | ||
|
|
||
| The No Data component provides a UI element for displaying a message when there is no data available. It includes optional features like icons, descriptions, and action buttons. | ||
|
|
||
| import { DocsPage } from "@/components/docs-page"; | ||
|
|
||
| <DocsPage.ComponentExample | ||
| client:only | ||
| code={`<NoData | ||
| title="No Data Available" | ||
| iconName="no-data-folder" | ||
| description={["There is no data to display."]} | ||
| primaryButton={{ label: "Primary Action", onClick: () => console.log("Primary Action Clicked") }} | ||
| secondaryButton={{ label: "Secondary Action", onClick: () => console.log("Secondary Action Clicked") }} | ||
| />`} | ||
| /> | ||
|
|
||
| ## Usage | ||
|
|
||
| ```typescript jsx | ||
| import { NoData } from '@harnessio/ui/components' | ||
|
|
||
| return ( | ||
| <NoData | ||
| title="No Data Available" | ||
| iconName="no-data-folder" | ||
| description={["There is no data to display."]} | ||
| primaryButton={{ label: "Primary Action", onClick: () => console.log("Primary Action Clicked") }} | ||
| secondaryButton={{ label: "Secondary Action", onClick: () => console.log("Secondary Action Clicked") }} | ||
| /> | ||
| ) | ||
| ``` | ||
|
|
||
| ## API Reference | ||
|
|
||
| <DocsPage.PropsTable | ||
| props={[ | ||
| { | ||
| name: "title", | ||
| description: "The title of the no data message", | ||
| required: true, | ||
| value: "string", | ||
| }, | ||
| { | ||
| name: "iconName", | ||
| description: "The name of the icon to display", | ||
| required: false, | ||
| value: "string", | ||
| }, | ||
| { | ||
| name: "iconSize", | ||
| description: "The size of the icon", | ||
| required: false, | ||
| value: "number", | ||
| defaultValue: "112", | ||
| }, | ||
| { | ||
| name: "description", | ||
| description: "The description text for the no data message", | ||
| required: true, | ||
| value: "string[]", | ||
| }, | ||
| { | ||
| name: "primaryButton", | ||
| description: "The primary action button", | ||
| required: false, | ||
| value: "{ label: string, onClick?: () => void, to?: string }", | ||
| }, | ||
| { | ||
| name: "secondaryButton", | ||
| description: "The secondary action button", | ||
| required: false, | ||
| value: "{ label: string, onClick?: () => void, to?: string }", | ||
| }, | ||
| { | ||
| name: "withBorder", | ||
| description: "Whether to display a border around the no data message", | ||
| required: false, | ||
| value: "boolean", | ||
| defaultValue: "false", | ||
| }, | ||
| { | ||
| name: "loadState", | ||
| description: "The current load state", | ||
| required: false, | ||
| value: "string", | ||
| }, | ||
| { | ||
| name: "setLoadState", | ||
| description: "Function to set the load state", | ||
| required: false, | ||
| value: "Dispatch<SetStateAction<string>>", | ||
| }, | ||
| { | ||
| name: "textWrapperClassName", | ||
| description: "Additional class names for the text wrapper", | ||
| required: false, | ||
| value: "string", | ||
| }, | ||
| { | ||
| name: "className", | ||
| description: "Additional class names for the no data message", | ||
| required: false, | ||
| value: "string", | ||
| }, | ||
| ]} | ||
| /> | ||
|
|
||
| ### Supported Icon Names | ||
|
|
||
| The `NoData` component supports the following icon names: | ||
|
|
||
| - `no-data-folder` | ||
| - `no-search-magnifying-glass` | ||
| - `no-data-merge` | ||
| - `no-data-cog` | ||
| - `no-data-webhooks` | ||
| - `no-data-branches` | ||
| - `no-data-members` | ||
| - `no-repository` | ||
| - `no-data-error` | ||
| - `no-data-commits` | ||
| - `no-data-pr` |
106 changes: 106 additions & 0 deletions
106
apps/portal/src/content/docs/components/scroll-area.mdx
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| --- | ||
| title: Scroll Area | ||
| description: Scroll Area component documentation | ||
| --- | ||
|
|
||
| The Scroll Area component provides a UI element for creating scrollable areas with custom scrollbars. It includes various customization options. | ||
|
|
||
| import { DocsPage } from "@/components/docs-page"; | ||
|
|
||
| <DocsPage.ComponentExample | ||
| client:only | ||
| code={`<ScrollArea className="h-24"> | ||
| <div className="p-4"> | ||
| <p>Scrollable content goes here.</p> | ||
| <p>Scrollable content goes here.</p> | ||
| <p>Scrollable content goes here.</p> | ||
| <p>Scrollable content goes here.</p> | ||
| <p>Scrollable content goes here.</p> | ||
| </div> | ||
| </ScrollArea>`} | ||
| /> | ||
|
|
||
| ## Usage | ||
|
|
||
| ```typescript jsx | ||
| import { ScrollArea } from '@harnessio/ui/components' | ||
|
|
||
| return ( | ||
| <ScrollArea className="h-64 w-64"> | ||
| <div className="p-4"> | ||
| <p>Scrollable content goes here.</p> | ||
| <p>Scrollable content goes here.</p> | ||
| <p>Scrollable content goes here.</p> | ||
| <p>Scrollable content goes here.</p> | ||
| <p>Scrollable content goes here.</p> | ||
| </div> | ||
| </ScrollArea> | ||
| ) | ||
| ``` | ||
|
|
||
| ## Anatomy | ||
|
|
||
| The Scroll Area component can be used to create scrollable areas with custom scrollbars. | ||
|
|
||
| ```typescript jsx | ||
| <ScrollArea className="h-64 w-64"> | ||
| <div className="p-4"> | ||
| <p>Scrollable content goes here.</p> | ||
| <p>Scrollable content goes here.</p> | ||
| <p>Scrollable content goes here.</p> | ||
| <p>Scrollable content goes here.</p> | ||
| <p>Scrollable content goes here.</p> | ||
| </div> | ||
| </ScrollArea> | ||
| ``` | ||
|
|
||
| ## API Reference | ||
|
|
||
| ### ScrollArea | ||
|
|
||
| The `ScrollArea` component serves as the main container for the scrollable area. | ||
|
|
||
| <DocsPage.PropsTable | ||
| props={[ | ||
| { | ||
| name: "children", | ||
| description: "The content to display inside the scroll area", | ||
| required: true, | ||
| value: "ReactNode", | ||
| }, | ||
| { | ||
| name: "className", | ||
| description: "Additional class names for the scroll area", | ||
| required: false, | ||
| value: "string", | ||
| }, | ||
| { | ||
| name: "viewportClassName", | ||
| description: "Additional class names for the viewport", | ||
| required: false, | ||
| value: "string", | ||
| }, | ||
| ]} | ||
| /> | ||
|
|
||
| ### ScrollBar | ||
|
|
||
| The `ScrollBar` component is used to display a custom scrollbar inside the scroll area. | ||
|
|
||
| <DocsPage.PropsTable | ||
| props={[ | ||
| { | ||
| name: "orientation", | ||
| description: "The orientation of the scrollbar", | ||
| required: false, | ||
| value: "'horizontal' | 'vertical'", | ||
| defaultValue: "'vertical'", | ||
| }, | ||
| { | ||
| name: "className", | ||
| description: "Additional class names for the scrollbar", | ||
| required: false, | ||
| value: "string", | ||
| }, | ||
| ]} | ||
| /> |
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,148 @@ | ||
| --- | ||
| title: Search Box | ||
| description: Search Box component documentation | ||
| --- | ||
|
|
||
| The Search Box component provides a UI element for entering search queries. It includes optional features like search icon, keyboard shortcuts, and custom content. | ||
|
|
||
| import { DocsPage } from "@/components/docs-page"; | ||
|
|
||
| <DocsPage.ComponentExample | ||
| client:only | ||
| code={`<SearchBox.Root | ||
| placeholder="Search..." | ||
| hasSearchIcon={true} | ||
| hasShortcut={true} | ||
| shortcutLetter="K" | ||
| shortcutModifier="alt" | ||
| />`} | ||
| /> | ||
|
|
||
| ## Usage | ||
|
|
||
| ```typescript jsx | ||
| import { SearchBox } from '@harnessio/ui/components' | ||
|
|
||
| return ( | ||
| <SearchBox | ||
| placeholder="Search..." | ||
| hasSearchIcon={true} | ||
| hasShortcut={true} | ||
| shortcutLetter="K" | ||
| shortcutModifier="cmd" | ||
| /> | ||
| ) | ||
| ``` | ||
|
|
||
| ## API Reference | ||
|
|
||
| ### SearchBox | ||
|
|
||
| The `SearchBox` component serves as the main container for the search box element. | ||
|
|
||
| <DocsPage.PropsTable | ||
| props={[ | ||
| { | ||
| name: "placeholder", | ||
| description: "The placeholder text for the search box", | ||
| required: true, | ||
| value: "string", | ||
| }, | ||
| { | ||
| name: "width", | ||
| description: "The width of the search box", | ||
| required: false, | ||
| value: "'full' | 'fixed'", | ||
| defaultValue: "'fixed'", | ||
| }, | ||
| { | ||
| name: "hasShortcut", | ||
| description: "Whether to enable keyboard shortcuts", | ||
| required: false, | ||
| value: "boolean", | ||
| defaultValue: "false", | ||
| }, | ||
| { | ||
| name: "hasSearchIcon", | ||
| description: "Whether to display the search icon", | ||
| required: false, | ||
| value: "boolean", | ||
| defaultValue: "true", | ||
| }, | ||
| { | ||
| name: "shortcutLetter", | ||
| description: "The letter for the keyboard shortcut", | ||
| required: false, | ||
| value: "string", | ||
| }, | ||
| { | ||
| name: "shortcutModifier", | ||
| description: "The modifier key for the keyboard shortcut", | ||
| required: false, | ||
| value: "'cmd' | 'ctrl' | 'alt' | 'shift'", | ||
| }, | ||
| { | ||
| name: "textSize", | ||
| description: "The text size of the search box", | ||
| required: false, | ||
| value: "TextSize", | ||
| defaultValue: "TextSize['text-sm']", | ||
| }, | ||
| { | ||
| name: "onSearch", | ||
| description: "Function to handle search action", | ||
| required: false, | ||
| value: "() => void", | ||
| }, | ||
| { | ||
| name: "onFocus", | ||
| description: "Function to handle focus action", | ||
| required: false, | ||
| value: "() => void", | ||
| }, | ||
| { | ||
| name: "handleChange", | ||
| description: "Function to handle input change", | ||
| required: false, | ||
| value: "ChangeEventHandler<HTMLInputElement>", | ||
| }, | ||
| { | ||
| name: "showOnFocus", | ||
| description: "Whether to show the search box on focus", | ||
| required: false, | ||
| value: "boolean", | ||
| defaultValue: "false", | ||
| }, | ||
| { | ||
| name: "defaultValue", | ||
| description: "The default value of the search box", | ||
| required: false, | ||
| value: "InputHTMLAttributes<HTMLInputElement>['defaultValue']", | ||
| }, | ||
| { | ||
| name: "value", | ||
| description: "The current value of the search box", | ||
| required: false, | ||
| value: "InputHTMLAttributes<HTMLInputElement>['value']", | ||
| }, | ||
| { | ||
| name: "className", | ||
| description: "Additional class names for the search box", | ||
| required: false, | ||
| value: "string", | ||
| }, | ||
| { | ||
| name: "inputClassName", | ||
| description: "Additional class names for the input element", | ||
| required: false, | ||
| value: "string", | ||
| }, | ||
| { | ||
| name: "children", | ||
| description: "Custom content to display inside the search box", | ||
| required: false, | ||
| value: "ReactNode", | ||
| }, | ||
| ]} | ||
| /> | ||
|
|
Oops, something went wrong.