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 |