@deskpro/react-components

A react-based set of components for building DeskPRO apps.

• Overview
• Components
  • Common
  • Forms
  • Buttons
  • Columns
  • Tabs
  • Cards
  • Badges
• Utilities
  • Props
  • Numbers
  • Strings
  • Regexp
  • Objects
  • Dates
  • DOM
  • CSS
• Bindings
• License

Overview

A Storybook demo is available online at https://deskpro.github.io/react-components.

Components

• Alert
  Renders a notification message.
• Icon
  Renders an icon using the Font Awesome library.
• Avatar
  Renders an avatar image.
• Urgency
  Renders a message in a box which is colored to match an urgency level between 1 and 10.
• Progress
  Renders a progress bar.
• Stars
  Renders a group of star icons which represent a vote between 1 and 5.
• Loader
  Renders an animated loader spinner.

Common

• Common/Heading
  A generic header element.
• Common/Count
  Renders a number with thousandths formatting.
• Common/Subheading
  Represents a sub heading element.
• Common/Popper
  Uses absolute positioning to place elements relative to other elements.
• Common/Portal
  Mounts its children in the document body.
• Common/ToggleableList
  Changes prop values on its children by responding to events triggered by the children.
• Common/QueryableList
  An unordered list which can be filtered and reduced by query values.
• Common/SelectableList
  An unordered list that can be scrolled through using arrow keys.
• Common/Scrollbar
  Wraps children with styled scrollbars.
• Common/Highlighter
  Highlights a word or phrase.

Forms

• Forms/Form
  Renders a form and handles its submission.
• Forms/Group
  Groups a label and form children together.
• Forms/Input
  Standard form input element.
• Forms/Textarea
  Renders a form textarea.
• Forms/HiddenFields
  Wraps optional form fields which may be shown or hidden.
• Forms/SearchInline
  Renders an inline search input.
• Forms/SearchSubmit
  Renders a search input with submit button, where search results are displayed in a popper below the input.
• Forms/SearchButton
  Renders a button which opens a search form.
• Forms/Datepicker
  Renders an input with drop down date picker.
• Forms/CustomSelect
  Renders a custom select input.
• Forms/Toggle
  Renders a toggle input.

Buttons

• Buttons/Button
  Standard button.
• Buttons/ConfirmButton
  Button with click confirmation.
• Buttons/SplitButton
  Renders a button with a left side and right side, where clicking the right side opens a popper.
• Buttons/DropdownButton
  Renders a button with a drop down icon and popper.
• Buttons/ProgressButton
  Renders a button which contains a progress bar.
• Buttons/TranslateButton
  Renders a progress button along with globe icon.

Columns

• Columns/Column
  A navigation column containing expandable drawers.
• Columns/Drawer
  An expandable drawer within a navigation column.
• Columns/Item
  Standard drawer item which may contain an icon and number.

Tabs

• Tabs/Tabs
  Renders a group of links as tabs.

Cards

• Cards/Card
  Renders a standard card.

Badges

• Badges/TextBadge
  Renders any text as a badge.
• Badges/CircleBadge
  Circle shaped badge designed to display small numbers.
• Badges/DateBadge
  Displays the month and day in badge or pill format.

Utilities

• newid
  Generates a unique id value.
• noop
  Provides an empty function to use as a default callback.

Props

• props/childrenComponentType
  Returns a function used in propTypes to validate that children are of a specific component type.

Numbers

• numbers/numberFormat
  Formats a number to include commas (or any separator) in the thousandths place.
• numbers/numberRandom
  Returns a random whole number between a minimum and maximum number.

Strings

• strings/stringUpperFirst
  Upper cases the first letter in a string.
• strings/stringEscapeHTML
  Converts HTML special characters into entities.
• strings/stringHighlight
  Wraps the given word in HTML tags where found in the given string.
• strings/stringInterpolate
  Interpolate placeholder values found in the given string.

Regexp

• regexp/regexpEscape
  Escapes the given string of any special regexp characters.

Objects

• objects/objectKeyFilter
  Performs a key comparison between two objects, deleting from the first where the keys exist in the second.
• objects/objectForEach
  Iterates over an object.
• objects/objectMap
  Creates an array from the results of calling a function on each item in an object.

Dates

• dates/dateNumberOfDaysInMonth
  Returns the number of days in the given date.
• dates/dateCalendarDays
  Returns an array of all the days in the given date
• dates/dateToMonth
  Returns the name of the month for the given date.

DOM

• dom/domIsReactClassComponent
  Tests whether an object is a class which extends React.Component.
• dom/domIsReactFunctionComponent
  Tests whether an object is a stateless functional component.
• dom/domIsReactComponent
  Tests whether an object is any type of React component.
• dom/domIsElement
  Tests whether an object is a valid DOM or React element.

CSS

• css/cssMatchComputedWidth
  Sets the width of one element to the computed width of another.

Bindings

• Redux Form

License

The library is released under the BSD License. See LICENSE for more information.