unoapps-library

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