[](https://github.com/UKHomeOffice/cop-react-design-system/actions/workflows/build-and-test.yml) [

To get started run nvm use to switch to currently supported node version (if your using node version manager). Otherwise, install node version specified in .nvmrc.
In the project directory, you can run:
Installs the package.json dependencies.
Runs the app in the development mode.\
Open http://localhost:6006 to view it in the browser.
The page will reload if you make edits.\
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.\
See the section about running tests for more information.
You can also use npm test:coverage to see the % code coverage for the repo.
Builds the components for production to the dist folder.\
It correctly bundles React components in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.\
Your components are ready to be deployed!
See the section about compile for more information.
.stories.mdx to static HTML, CSS & JS files located in storybook-static folder.~/.yalc (%LOCALAPPDATA%/Yalc on Windows).To use in another repo, use yalc add @ukhomeoffice/cop-react-components@6.0.0 (with your version number)
You can learn more in the Introduction to Storybook for React.
To learn React, check out the React documentation.
This section has moved here: https://babeljs.io/docs/en/usage/#configuration
The ui is available here.
This project contains public sector information licensed under the Open Government Licence v3.0. (http://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/)
TODO:
* Update github/drone config
* Add ALPHA, NEW-STYLE and INTERNAL tags as required
* HTML in TextArea description may not render correctly
* Cleanup and standardise docs and Javadocs
* Rimraf seems unnecessary and like it may result in slower builds (no caching), can it be removed?
* Remove unnecessary stories, e.g. for "erroring", "disabled" and "erroring & disabled", "erroring & disabled" can be removed
* Fix broken JavaDoc markdown links copied from MDX format that had link reuse
* Remove all ESLint exceptions
* Remove all TS warning exceptions
* Resolve all Sonar warnings and exceptions
* Remove unsafe as typescript casts
* Convert all JS to TS
* Remove all JSX files (note they can't be linted and will need fixes)
* Strongly type everything accurately (no more ? optional props)
* Remove null as passable value for props (use undefined instead)
* Remove deprecated props that are no longer used
* Resolve broken tsconfig matcher paths for files like those in .storybook/
* Add stricter typescript rules
* Add automated linting
* Fix Utils getAttributes bug for FILE_UPLOAD - it looks like it's improperly filtered
* Add stricter ESLint rules (no unused exports etc)
* Autocomplete needs updating and has a lot of tech debt
* Link with inverted background colour doesn't render correctly with the new storybooks iframe
* Previously unfinished work referenced should be ticketed:
* Was ErrorMessage intended to have a Label, Legend and Prefix feature (see old stories)?
* Checkboxes story contained references to a "nested" options option field that is unused
* DateInput tried to force a name field on the Readonly element for a div. This appears to be broken
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
``js
export default defineConfig([
globalIgnores(['dist']),
{
files: ['*/.{ts,tsx}'],
extends: [
// Other configs...
// Remove tseslint.configs.recommended and replace with this
tseslint.configs.recommendedTypeChecked,
// Alternatively, use this for stricter rules
tseslint.configs.strictTypeChecked,
// Optionally, add this for stylistic rules
tseslint.configs.stylisticTypeChecked,
// Other configs...
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])
`
You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:
`js
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'
export default defineConfig([
globalIgnores(['dist']),
{
files: ['*/.{ts,tsx}'],
extends: [
// Other configs...
// Enable lint rules for React
reactX.configs['recommended-typescript'],
// Enable lint rules for React DOM
reactDom.configs.recommended,
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])
``