Table of contents

• General Information
• Technologies
• Features
• Download

General Information

This Design System, grounded in atomic design principles, comprises meticulously styled and reusable components. Find more details in our Storybook here.

Technologies

The project incorporates the following technologies:

• React
• Custom hooks
• Monorepo
• Lerna
• SCSS
• Storybook

Features

The Design System provides an array of components documented in the Storybook, supplemented by additional packages, hooks, and helpers.

Our Helper package offers useful functions such as:

• callFnsInSequence
• findCharIndexesBetweenIndexes
• dateHelpers that include:
  • startMonth
  • endMonth
  • differenceInMs
  • differenceInDays
  • prevMonth
  • nextMonth
  • nextYear
  • prevYear
  • isToday
  • isSameDate
  • isInRange

Our Hook package provides practical custom hooks such as:

• useArray
• useFocusWithin
• useToggle
• useDate

Download

All packages are published to npm and are available for download.

To install the main package:

npm i @or.ds.e/react

If you only wish to download the hooks or helpers, you can use:

npm i @or.ds.e/hooks

npm i @or.ds.e/helpers