1.0.3 • Published 1 year ago
unoappslibraryuat v1.0.3
Uno apps component library
Table of Contents
What is this repository for?
This is a package to keep common components for singular uno apps.
Reusable Components: A variety of pre-built components for faster development. Customizable: Easily customize components to fit your design needs.
Installation
Install library as a dependency to your project.
npm
npm install unoappslibraryUsage
Basic usage
Example of importing and using CheckButton
jsx or tsx
import { CheckButton } from "unoAppsLibrary";
const AppComponent = () => {
return (
<div>
<Header />
<CheckButton {...checkButtonProps} />
<Footer />
</div>
);
};Available Components
| Component | Property | Type | Required? | Default value | Description |
|---|---|---|---|---|---|
| AppJs | |||||
| singularApp | Record<string, any> | yes | |||
| useAppJsStore | () => Record<string, any>, React.Dispatch<Record<string, any>> | yes | |||
| config | Record<string, any> | yes | |||
| AppStorage | any | yes | |||
| CompositionManager | Record<string, any> | yes | |||
| hideCustomizeTile | boolean? | no | |||
| hideSettingsTile | boolean? | no | |||
| Button | |||||
| value | string | yes | |||
| onChange | Function | yes | |||
| disabled | boolean? | no | |||
| ...otherProps | DetailedHTMLProps | no | - | All other props from DetailedHTMLProps | |
| CheckButton | |||||
| value | boolean | yes | |||
| onChange | Function | yes | |||
| labelOn | string? | no | |||
| labelOff | string? | no | |||
| disabled | boolean? | no | |||
| small | boolean? | no | |||
| Clock | |||||
| value | any | yes | |||
| onChange | (value: any) => void | yes | |||
| showSeconds | boolean? | no | |||
| showMinutes | boolean? | no | |||
| showHours | boolean? | no | |||
| Color | type ColorRecord = { type: string; solidColor: string; }; | ||||
| value | ColorRecord | string | yes | |||
| onChange | Function | yes | |||
| disabled | boolean? | no | |||
| getPopoverParent | Function? | no | |||
| Counter | |||||
| value | string | number | yes | |||
| onChange | Function | yes | |||
| reset | number | yes | |||
| disabled | boolean? | no | |||
| max | number | string? | no | |||
| min | number | string? | no | |||
| unit | string? | no | |||
| modifyButtons | any[]? | no | |||
| setButtons | any[]? | no | |||
| DataSourceConnect | |||||
| type | string | yes | |||
| templateUrl | string | yes | |||
| connectedUrl | string | yes | |||
| DateTime | |||||
| value | number | string | yes | |||
| onChange | Function | yes | |||
| disabled | boolean? | no | |||
| Duration | |||||
| value | string | number | yes | |||
| onChange | Function | yes | |||
| EditorCarousell | |||||
| isSettingsTileRemoved | boolean | yes | |||
| removeNavigationMenu | boolean | yes | |||
| children | ReactNode | yes | |||
| FieldMapper | |||||
| model | any[] | yes | |||
| data | any[] | yes | |||
| dataMapping | Record<string, any> | yes | |||
| onChange | Function | yes | |||
| FillInForm | |||||
| fields | any[] | ||||
| groups | any[] | yes | |||
| payload | Record<string, any> | yes | |||
| subCompId | string? | no | |||
| imageBrowserAvailable | boolean | yes | |||
| showStyle | boolean | yes | |||
| groupExpanded | Record<string, any> | yes | |||
| onChange | Function | yes | |||
| onOpenImageBrowser | Function | yes | |||
| onGroupExpanded | Function | yes | |||
| getPopoverParent | Function | yes | |||
| Image | |||||
| value | string | yes | |||
| onChange | Function | yes | |||
| getPopoverParent | Function? | no | |||
| disabled | boolean? | no | |||
| imageBrowserAvailable | boolean? | no | |||
| onOpenImageBrowser | any | yes | |||
| ImageBrowser | |||||
| InfoText | |||||
| value | string | yes | |||
| Location | |||||
| value | Record<string, any> | yes | |||
| onChange | Function | yes | |||
| disabled | boolean? | no | |||
| NumberField | |||||
| value | number | string | yes | |||
| onChange | () => void | yes | |||
| disabled | boolean? | no | |||
| Panel | |||||
| headerless | boolean? | no | |||
| fieldlist | boolean? | no | |||
| splitPane | boolean? | no | |||
| logicLayers | boolean? | no | |||
| noTopMargin | boolean? | no | |||
| outputPlayer | boolean? | no | |||
| split | boolean? | no | |||
| tabularData | boolean? | no | |||
| className | string? | no | |||
| collapsed | boolean? | no | |||
| Playlist | |||||
| data | any[] | yes | |||
| value | number | yes | |||
| columns | any[] | yes | |||
| onChange | Function | yes | |||
| PresetSelect | |||||
| value | any | yes | |||
| onChange | Function | yes | |||
| disabled | boolean? | no | |||
| source | string? | no | |||
| sourceUrl | string? | no | |||
| format | string? | no | |||
| useReload | boolean? | no | |||
| useCustomize | boolean? | no | |||
| isSearchable | any | yes | |||
| onPresetCustomization | any | yes | |||
| Radio | |||||
| options | {id: string; label: string}[] | yes | |||
| value | string | yes | |||
| onChange | Function | yes | |||
| itemsPerRow | number? | no | |||
| Search | |||||
| mode | enter' | 'key' | yes | |||
| placeholder | string? | no | |||
| OnSearch | Function | yes | |||
| Select | |||||
| value | string | yes | |||
| onChange | Function | yes | |||
| useReload | boolean | yes | |||
| disabled | boolean? | no | |||
| source | string? | no | |||
| sourceUrl | string? | no | |||
| format | string? | no | |||
| isSearchable | boolean? | no | |||
| options | any[]? | no | |||
| TextArea | |||||
| value | string | number | yes | |||
| onChange | Function | yes | |||
| disabled | boolean? | no | |||
| TextField | |||||
| value | string | number | yes | |||
| onChange | Function | yes | |||
| disabled | boolean? | no | |||
| TimeControl | |||||
| value | Record<string, any> | yes | |||
| onChange | Function | yes | |||
| disabled | boolean? | no |
Storybook
You can run the storybook locally
npm
npm run storybookChangelog
All notable changes to this project will be documented in the CHANGELOG.md.