Atomic Form Components Library

This project holds the components and theming for use across Atomic Form's web properties.

It contains

A Storybook for the review and documentation of components.

An NPM module for importing components into Atomic Form's web properties

Using these components in another codebase

Install the library bun install atomicform-component-library or if you aren't using bun npm install atomicform-component-library

Install Tailwind in your Project

set your tailwind.config.js to match the below Make sure to update the content array to include the files and paths you will be using the styled components in

/** @type {import('tailwindcss').Config} */
// tailwind.config.js
import tailwindConfig from 'atomicform-component-library/tailwind.config.js';

tailwindConfig.content = [
  "./index.html",
  "./src/**/*.{js,ts,jsx,tsx}",
  "./components/**/*.{js,ts,jsx,tsx}",
];

export default tailwindConfig

Import the CSS file into the top level of your app

import 'atomicform-component-library/dist/style/lib.css';

Updates/Changes

This component library will continue to change over time as we add new components, refine existing ones, both in terms of design and functionality (for example, the arguments a component expects or adding a click handler)

The basic flow will be as follows

1. A Jira ticket in the atomicform-components project is created that clearly defines the work to be done and what qualifies as done.
2. If no engineer is assigned to take this ticket, an engineer will need to be assigned in the #software slack channel.
3. The engineer will work on a branch to complete the ticket.
4. Once the work is ready for review, update the JIRA ticket with any necessary screenshots, video recordings or links and share the ticket with the reviewer in Slack and let them know its ready for review. Let's try to keep as much of the feedback and responses in JIRA as possible for future reference. Any feedback will need to be addressed and then go back through the review process.
5. On Approval, the code will be merged in.
6. If being deployed, a new release will be created, changelog filled out and published to NPM

New views/components

Create a JIRA ticket that links to the figma component/view for what should be included in this component library, what it will be used for and what qualifies as complete for this task. If the person creating this ticket is going to implement it, assign it to yourself. If not,share the ticket in the #software channel and ensure that it gets assigned to an engineer.

The engineer will create a new branch of this repo with the naming convention add/{component_or_view_name} and implement the component on this branch. Create the component as well as a story for that component. Once it matches Figma and is ready for review, create a pull request from the add/{component_or_view_name} branch into staging. The Pull Request will automatically create a preview deployment of Storybook. Share this with Dani and incorporate any feedback required until she gives it :+1: , then you can merge to staging.

Requesting Design Changes

If an existing component requires a design change or fix, create a JIRA ticket that includes screenshots/video recordings of the current design/behavior and a link to where the desired design/behavior are in Figma.

Share in #software if there isn't someone assigned to this and ensure it is assigned to someone, if the engineer didn't create the ticket, ensure that they understand the ticket creator on exactly what they're focusing on.

The engineer will create a new branch of this repo with the naming convention fix/{component_or_view_name} and the go through the review process once ready.

Requesting Functionality Changes

The requester will create a JIRA ticket that specifies what change needs to be made and what the desired end result is.

Share in #software if there isn't someone assigned to this and ensure it is assigned to someone, if the engineer didn't create the ticket, ensure that they understand the ticket creator on exactly what they're focusing on.

The engineer will create a new branch of this repo with the naming convention fix/{component_or_view_name} and the go through the review process once ready.

Making code changes

Pull down the latest staging branch, create a new branch off of staging with the following naming convention

add/{component_name} fix/{component_name}_{reason} remove/{component_name}

Versioning

This component library's versioning follows standard naming conventions, being "Major.Minor.Patch". "Major" will include either a significant non-retrocompatible refactor of existing components, or a large new set of components. "Minor" will include either small new features, retrocompatible refactors, or single new components. "Patch" will only include bugfixes, and those fixes must always be retrocompatible.

Deployment

Once something is ready for production, increment the version, create a release tag, fill out a changelog and merge into main.

Switch to the main branch locally, pull down the latest changes and run npm run build``npm publish

Storybook

• Storybook deployments will happen automatically through Vercel

NPM package

To build the library for publising in NPM, it is required to install rollup locally. To do so, run the following command:

npm install rollup -g

Once it is done, it can be verified by running rollup -c inside the project's directory

Then,you must authenticate with NPM to publish the new update. Do so by executing:

npm login

This should ask you for the Atomic Form NPM credentials. Once logged in, you can publish new updates by following these steps:

• Increment the package version in the package.json
• Run npm run build to delete the existing dist directory and generate a new build
• Run npm publish to upload it to NPM

Plugins

Tailwind

We are using tailwindcss to help with styling. Additional CSS styles can be added in the traditional way but this helps with development.

All of the colors can be found in tailwind.config.js We have the following Tailwind plugins included

• Tailwindcss Forms
• Tailwindcss Aspect Ratio
• Tailwindcss Animate

Docs for handling dark mode with tailwind

Docs for handling responsive design with tailwind

Docs for handling focus states

Headless UI

Headless UI is a set of unstyled components that we can expand on top of that provide easier development for interactive components

Headless UI Docs

Resources

Boilerplate codebases with the component library already implemented

React Starter

React Starter

Remix Starter

Remix Starter