arachnys-ui v7.3.1
Arachnys UI
Welcome to the homeplace of the Arachnys design system.
Getting started
- 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"
/>
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
.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.
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago