Royal Navy - NELSON Standards Toolkit
The Standards Toolkit is made up of a responsive component library, icon library and SASS framework. It's here to help developers build web applications that meet the Royal Navy's service standards.
All packages are published to the NPM registry and we adhere to semantic versioning.
The following view layer libraries are currently supported:
- React
Please refer to the component demo pages to see live examples, code snippets and details on how best to consume each of the components.
To install and save to your projects package.json dependencies, run:
# with npm
npm install @royalnavy/css-framework @royalnavy/react-component-library
# ...or with yarn
yarn add @royalnavy/css-framework @royalnavy/react-component-library
Here's a quick example application to get you started:
import React from 'react'
import ReactDOM from 'react-dom'
import '@royalnavy/css-framework/dist/style.css'
import { Button } from '@royalnavy/react-component-library'
function App() {
return (
<Button variant="primary">
Hello, World!
</Button>
)
}
ReactDOM.render(<App />, document.querySelector('#app'))
Splitting up large codebases into separate independently versioned packages is extremely useful for code sharing. However, making changes across many repositories is messy and difficult to track, and testing across repositories gets complicated really fast.
To solve these (and many other) problems, some projects will organize their codebases into multi-package repositories (sometimes called monorepos).
Each package folder has it's own npm package.json and can act like a stand alone project. Yarn workspaces detects dependencies that are held within the monorepo and creates a link between them, so you can work on a react component and it's styles in the css-framework and see instant updates in storybook.
Manage dependencies for packages like normal, but remember to use yarn add
instead of npm install
.
You'll need Git and Node.js installed to get this project running.
Note: You will need the active LTS (Long-term support) Node.js version for this project (as specified in .nvmrc)
If you're an external contributor make sure to fork this project first
git clone git@github.com:Royal-Navy/standards-toolkit.git # or clone your own fork
cd standards-toolkit
If you work across multiple Node.js projects there's a good chance they require different Node.js and npm versions.
To enable this we use nvm (Node Version Manager) to switch between versions easily.
- Install nvm
- Run
nvm install
in the project directory (this will use .nvmrc)
The top level project contains scripts that are then executed for all packages.
lint
Checks syntax and simple errors in javascript files.test
Runs Jest tests in all the packages.build
Runs the build script in all packages
Git commit hooks trigger linting of all staged files when a change is committed.
We have configured a set of Prettier options to enforce consistent code formatting.
The Standards Toolkit currently supports all major evergreen browsers.
The Royal-Navy/standards-toolkit is licensed under the Apache License 2.0.
Read the contributing guidelines.
We use Chromatic for visual regression testing and it's great.