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:
To do
There are still things to do when it comes to making Alpha Centauri "complete".
- [x] Move over from standalone repo to Control Panel monorepo.
- [x] Move away from old Theme package to the new
tailwind-configpackage. - [x] 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.