@enjoytech/ui-components v1.4.0

@enjoytech/ui-components

This is a library of standardized React components built on top of the Web DLS Tailwind configuration. You can view a Storybook of the current components here!

The intention for these components are to provide a set of common building blocks to construct Enjoy applications, with matching components for each component in this library existing within the Figma Web DLS Reference

Components added here are intended for general use within any Enjoy application, with additions to the library being governed by a discussion between the Design team and SWE. Engineers are encourage to build more special purpose components within their specific applications using a combination of the basic components in this library as well the Web DLS Tailwind classes.

Contribution

Each component in the library should have a matching *.stories.tsx file as well, detailing some examples for display in the Web DLS component Storybook site. After adding a new component and examples you can run yarn storybook to build a Storybook development server and verify your new component and example usage.

When merged and deployed, updates will automatically be visible at https://dls.enjoy.com

To-Do

• Customize the introduction of the Storybook site to give more background and examples of usage of the Web DLS library
• Update the branding of the Storybook site to be Enjoy-specific

Anti-Patterns

className properties

Components in this library should generally not accept a generic className property that allows their display to be overridden. If additional rendering variants become necessary for these components, those should be formally added as variations within the component library.

"Complex" components

Generally the components in this library should be simple building block pieces by which more complex behaviors are done. As a general rule, if the component is adding some data fetching behavior or other heavily stateful logic, it probably deserves to be created as a standalone module. This serves to keep the library focused on the most common elements needed across all applications, and limits the amount of additional dependencies that might creep in when adding more complex functionality.

Usage

import { Button } from '@enjoytech/ui-components'

<Button kind="primary" size="large">My Button</Button>