Desire-ui NPM | npm.io

Usage

Import

Install this package via

npm install desire-ui

Theming

This package requires theming similar to @material/core.

Create a setup file e.g. Theme.js

Declare your theme

import {
  addColor,
  addPrimaryColor,
  addSecondaryColor,
  createTheme,
  finalizeMaterialTheme,
  setFontfamily,
} from 'desire-ui';

// create Theme
export let theme = createTheme();

// add colors, fonts here
addPrimaryColor(theme, '#56aa12');
addSecondaryColor(theme, '#566');
addColor(theme, 'mainColor', '#187420');
addColor(theme, 'accentColor', '#159');
setFontfamily(theme, 'Arial, Helvetica, sans-serif');

// finalize
theme = finalizeMaterialTheme(theme);

Wrap your DesireComponents with the provided ThemeProvider

import { ThemeProvider } from 'desire-ui';
import { theme } from '../../Theme';

<ThemeProvider theme="{theme}"> /* Desire Components */ </ThemeProvider>

Components

`Jobs`

Jobs are elements that give the user an overview of the current jobs status, e.g. the currently produced parts or the deadline when the job is due.

Jobs can be used as standalone elements or can be wrapped inside a JobList, e.g.:

import { Job, JobList, ThemeProvider } from 'desire-ui';

<JobList>
  {jobs.map((job: JobType) => (
  <Job
    key="{job.id}"
    deadline="{job.deadline}"
    description="{job.description}"
    backgroundColorMain="{job.backgroundColorMain}"
    backgroundColorAccent="{job.backgroundColorAccent}"
    parts="{job.parts}"
    user="Thomas"
    icon="{job.icon}"
  />
  ))}
</JobList>

The full job interface:

Name	Type	Description
deadline	Date	The time when the job is due.
description	string	The description of the job.
icon	ReactElement	The icon rendered above the job as an ReactElement.
backgroundColorAccent	string	The accent color.
backgroundColorMain	string	The main color.
jobTitle?	string	The title of the job.
parts?	number	The amount of parts to be produced.
currentlyProducedParts?	number	The amount of parts that already have been produced.
expectedDuration?	number	The expected duration in minutes for the job to finish all parts.
user?	string	The user's name responsible for the job.
position?	number	The jobs displayed position within the job list.
active?	boolean	The active state of the job.
activeBackgroundColorAccent?	string	The accent color, when active prop is set to true.
activeBackgroundColorMain?	string	The main color, when active prop is set to true.

`MinMaxInput`

Min Max Input Component is a numerical input which has to be between a Minimum and a Maximum

import { MinMaxInput } from 'desire-ui';

<MinMaxInput label="label" minValue="{0}" maxValue="{10}" handleSubmit="{setInput()}" />

The full job interface:

Name	Type	Description
label	string	The Label of the Input
minValue	number	The minimum Value the input has to be above
maxValue	number	The maximum Value the input has to be above
handleSubmit	(input: number) => void;	The function, which gets triggered on submit

@infinitebrahmanuniverse/nolb-des @everything-registry/sub-chunk-1470 @zalastax/nolb-des

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago