Uno apps component library

Table of Contents

• Purpose
• Installation
• Usage
  • Basic usage
  • Available Components
  • Storybook
• Changelog
• License

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 unoappslibrary

Usage

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 storybook

Changelog

All notable changes to this project will be documented in the CHANGELOG.md.

License