@artilleryio/alpha-centauri-components

Alpha Centauri

Simple, extensible and reusable UI components.

Intro

Welcome to Alpha Centauri. This is our internal component library that we use across our products. At it's core, Alpha Centauri is a small design system that helps us keep some semblence of consistency across our products.

You may wonder why this lives as a dependency of Control Panel and not it's own standalone repo. The main reasoning is, we're iterating Alpha Centauri through Control Panel. Control Panel is the main front end focus of Artillery, so the look and feel of it dictates the rest of our front end apps or products (e.g. the website).

This is an ever evolving library that we aim to maintain with regularity.

Getting Started

If you are working with Control Panel, there's not too much you have to do. Whenever you run npm run dev from root, a new build of Alpha Centauri is generated. Each time you make a change to a component with the Alpha Centauri package a new build generates.

If you are using this library outside of the Control Panel monorepo, you simply run:

npm install @artilleryio/alpha-centauri-components

Your external project will also require the Artillery Tailwind config:

npm install @artilleryio/tailwind-config --save-dev

Generating a build

As mentioned above, if you are working with Control Panel, builds happen locally. This enables you to tweak or add components in real time to our Control Panel project while you're developing locally.

When you've decided to merge to main, GitHub expects the commit to begin with the follow:

ci: release v2.0.0-beta.3 @artilleryio/alpha-centauri-components

Basically, GitHub Actions listen for a change in package.json and wait for us to declare it via a commit.

If you are using Alpha Centauri in an external project you will then have to update to the latest version:

npm install @artilleryio/alpha-centauri-components@latest

Usage

When using Alpha Centauri components, you simply require them like so:

import { Text } from '@artilleryio/alpha-centauri-components';

...

<Text type="h1" variant="primary" weight="regular">Hello Artillery!</Text>

Contribution

We try not to change core components too often. Sometimes there will be a need to extend, modify or fix bugs and that's fine. In general though, for new components or major changes to a component, we recommend opening a new PR separate to feature work.

Please mark your PR with a title like so:

feat|fix|chore(alpha-centauri): my change

Bugs & Issues

If you find any bugs, discrepencies or just general improvements that could be made, please open a new ticket inside Linear and tag it with the Alpha Centauri tag.

Often we'll add or modify things via feature work. For example, if we are working on the Saved Views feature and this introduces a new <Input />, we would do that as a part of the Saved Views project.

Caveat - For Next's transpile option to work, for whatever reason in the package.json of this app we had to set our types to ./src/index.ts. This is not typically standard as you would set it to wherever your generated types are defined, but this work around seems to get everything working as intended.

Dependencies

Alpha Centauri is built upon simple technologies. We use generic React for components, so there are no library specific hooks or features. For example, we do not use componentise Next Link or Next Image here due to it being very Next.js specific.

Here are some of the libraries that help make Alpha Centauri happen:

• TailwindCSS
• Radix UI
• Radix Colors
• Headless UI
• Tabler Icons
• Tsup

To do

There are still things to do when it comes to making Alpha Centauri "complete".

• Move over from standalone repo to Control Panel monorepo.
• Move away from old Theme package to the new tailwind-config package.
• Setup GitHub Action to deploy to NPM.
• Migrate from old Alpha Centauri Icons library to Tabler Icons.

Authors

Alpha Centauri is maintained by the Artillery team. It is not intended for external use and should only ever be used with Artillery products.

✨🪐