# cop-react-form-renderer

The COP React Form Renderer is a library that renders a form on the basis of a supplied JSON.

It uses components from [COP React Design System](https://github.com/UKHomeOffice/cop-react-design-system).
- `@ukhomeoffice/cop-react-components` - and offers various styles of forms. These are showcased inside of
a [npm run storybook](Storybook) within the project.

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`.


This project is essentially 2 packaged into one repo:
* A library of React components with unit tests defined for reuse by other repos (see /src/stories)
* A React Storybook application with documentation for each React component (see .stories.tsx files)

The library of components is transpiled (and is cleaned up by rimraf). 
The storybook can be useful for developers and web designers to provide context for each component. 

## Available Scripts

In the project directory, you can run:

### `npm install`

Installs the `package.json` dependencies.

### `npm run storybook`

Runs the app in the development mode.\
Open [http://localhost:6006](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.

### `npm test`

Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://vitest.dev/guide/features.html#watch-mode) for more information.

You can also use `npm test:coverage` to see the % code coverage for the repo.


### `npm run lib:transpile`

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!

### `npm run build-storybook`
Builds the storybook files ending in `.stories.tsx` to static HTML, CSS & JS files located in `storybook-static` folder.

### `npm run lib:yalc-publish`
This will compile the code with source maps enabled and publish it to the local yalc repository in `~/.yalc` (`%LOCALAPPDATA%/Yalc` on Windows).

To use in another repo, use `yalc add @ukhomeoffice/cop-react-components@6.0.0` (with your version number)
To remove previous yalc versions, run within the other repo: `yalc remove --all`

Be weary that other dependencies using Vite or similar may cache the unchanged version of the module (instead of the auto-updating Yalc version) inside the node_modules of the project you're testing from


## Learn More

You can learn more in the [Introduction to Storybook for React](https://storybook.js.org/docs/react/get-started/introduction).

To learn React, check out the [React documentation](https://reactjs.org/).

# Using the Service
## Versioning
For versioning this project uses SemVer.

## Deploying Storybook
Storybook changes will be deployed automatically on merge to main, see [deploy-storybook.yml](.github/workflows/deploy-storybook.yml) or can alternatively be triggered manually via github actions ui for branch deployments.

The ui is available [here](https://ukhomeoffice.github.io/cop-react-components/?path=/story/d-accordion--default-story). 

## Authors
This project is authored by the Home Office.

## License
This project is licensed under the MIT license. For details please see [License](./LICENSE).

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/)






## Expanding the ESLint configuration

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](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/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...
    },
  },
])
```