arachnys-ui

UI component library for Arachnys

Usage no npm install needed!

<script type="module">
  import arachnysUi from 'https://cdn.skypack.dev/arachnys-ui';
</script>

README

Arachnys UI

Welcome to the homeplace of the Arachnys design system.

Getting started

  1. Make sure you're downloading the correct fonts. You can use the following tag in your html:
<link
  href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400&display=swap"
  rel="stylesheet"
/>

  1. To get the styles working you will need to include the CSS in your app which can be found at arachnys-ui/dist/style.css.

  2. Import the RootStyles component and wrap your root component with it:

...
import { RootStyles } from 'arachnys-ui';
...

const App = () => (
    <RootStyles>
        <AppContainer>
            ...
        </AppContainer>
    </RootStyles>
)

The RootStyles component includes some base styles like font-family and line-height that we inherit rather than specifying them in every single component.

Developing locally

Prerequisites

Installing dependencies

Run yarn in the root of the project.

Running tests

yarn test

Starting the styleguide

yarn start

Committing

We use commitlint to ensure our commit messages are consistently formatted.

After running yarn in this repo a git hook will automatically be installed that lints your commit messages and fails if they do not meet the Conventional Commits format.

yarn will also install a CLI prompt that you can use to help write commit messages if you do not want to write them manually. To use the CLI prompt you can run yarn commit instead of git commit.

Updating icons

Icon SVGs are located in src/components/Icon/svgs. React components are automatically generated from these SVGs when you run yarn start or yarn build. If you make changes to the SVGs you will need to run yarn icons again to generate the updated React components.

Building the component library

yarn build

Publishing

We are using semantic-release for publishing to npm: https://github.com/semantic-release/semantic-release. This means publishing will happen automatically as part of CI.

Other scripts

For a list of all scripts see the scripts field in the package.json.