Alchemy Component Library

This is a comprehensive library of accessible and reusable React components that streamlines the development of DataHub's applications and websites. The library offers a diverse range of components that can be easily combined to build complex user interfaces while adhering to accessibility best practices.

Component Usage

It's easy to use the components available in the library. Simply import the component and use it anywhere you're rendering React components.

import { Button } from '@components';

function YourComponent() {
    return <Button>Click me!</Button>;
}

In addition to the components themselves, you can also import their types:

import type { ButtonProps } from '@components';

Theme Usage

This component library comes with a complete theme utility that pre-defines all of our styling atoms and makes them accessible at @components/theme.

import { colors } from '@components/theme';

function YourComponent() {
	return (
		<div style={{ bgColor: colors.green.400 }}>
			This div has a green background!
		</div>
	)
}

You can access the theme types at @components/theme/types and the theme config at @components/theme/config.

Writing Docs

Our docs are generated using Storybook and deployed to Cloudflare.

• Storybook config is located at .storybook
• Static doc files are located at alchemy-components/.docs
• Component stories are located in each component directory: alchemy-components/components/Component/Component.stories.tsx

Storybook serves as our playground for developing components. You can start it locally:

yarn storybook

This launches the docs app at localhost:6006 and enables everything you need to quickly develop and document components.

Contributing

Building a component library is a collaborative effort! We're aiming to provide a first-class experience, so here's a list of the standards we'll be looking for:

• Consistent prop and variant naming conventions:

  -- variant is used to define style types, such as outline or filled.

  -- color is used to define the components color, such as violet or blue.

  -- size is used to define the components size, such as xs or 4xl.

  -- Booleans are prefixed with is: isLoading or isDisabled.

• All style props have a corresponding theme type, ie. FontSizeOptions.

• All components have an export of default props.

• Styles are defined using style objects instead of tagged template literals.

• Stories are organized into the correct directory .

FAQs

• How are components being styled? Our components are built using Styled Components that dynamically generate styles based on variant selection.