# cf-components

ClearFacts Web and React Components.

## Components

- Alert
- AutoResizeInput
- AutoResizeTextArea
- Button
- ButtonDropdown
- ButtonTooltip
- Checkbox
- DateButton
- DateInput
- Header
- Icon
- InputFieldValuta
- InputMaskedBankComment
- InputMaskedDate
- InputWrapper
- RadioField
- Select
- Spinner
- Table
- TextField
- Tooltip
- PdfViewer

### hooks

- useOnClickOutside
- useCustomEvent
- usePrevious

### styles

- colors
- fonts
- shadows

## Local development

These are the most important commands:

- `yarn build`: makes a build using rollup in the dist folder
- `yarn test`: runs the tests in watch mode (keeps running)
- `yarn test:coverage`: runs the tests with a coverage report
- `yarn storybook`: runs the storybook for viewing the components
- `yarn lint`: runs eslint to check for errors
- `yarn format`: runs prettier to format the files
- `yarn format:check`: run prettier, but only as a check (no writing)

## Local usage

When you want to use cf-components locally you will have to use `yarn link`, there are a few caveats you have to take into account
(issues with multiple react instances).

- run `yarn build` in **cf-components**
- run `yarn link` in **node_modules/react** of the other project
- run `yarn link` in **node_modules/react-dom** of the other project
- run `yarn link react` and `yarn link react-dom` in **cf-components**
- run `yarn link` in **cf-components**
- run `yarn link @clearfacts/cf-components` in the other project
- start the other project

## Structure

Each component has the following files:  
optional = ()

### `(/components/*)`

Folder containing all sub-components that are needed.

### `(dummyData.ts)`

File to set dummy data (for example, possible options in a Select).  
Dummy-data is generated with [test-data-bot](https://github.com/jackfranklin/test-data-bot), which provides an easy way to mock
data (Test-data-bot uses [faker.js](https://github.com/marak/Faker.js/) internally)

### `Component.mdx`

Documentation of the component, which can be viewed in the **Docs** tab of storybook.

#### Technical

Documentation is generated using the storybook addon [docs](https://github.com/storybookjs/storybook/tree/master/addons/docs).  
Docs enables the use of [mdx](https://mdxjs.com/), where you can add documentation as markdown and combine it with actual code.

#### Usage

Documentation can be added to the story as followed:

```
export default {
  title: 'Component',
  component: Component,
  decorators: [withKnobs],
  parameters: {
    docs: {
      page: mdx,
    },
  },
};
```

In the mdx file you can either show a story by using the id (= pathname in storybook) or by implementing a component

```
  <Story id="component--basic" />
```

### `Component.stories.tsx`

Story of the component, made with [storybook](https://storybook.js.org/)  
The following addons are included:

#### [addon/docs](https://github.com/storybookjs/storybook/tree/master/addons/docs)

For documentation

#### [addon/knobs](https://github.com/storybookjs/storybook/tree/master/addons/knobs)

Allows you to edit props dynamically

#### [addon/actions](https://github.com/storybookjs/storybook/tree/master/addons/actions)

Allows you to display data received by event handlers

### `(Component.styled.ts)`

Styling of the component, made with [styled-components](https://styled-components.com/)  
Styling is kept separate of the main component by declaring it in a separate file and including it as follows:

```
import * as St from './component.styled';

<St.ComponentThatIsStyled> // usage
```

### `Component.test.tsx`

Test of the component, made with [testing-library](https://testing-library.com/)

### `Component.tsx`

Component implementation.

## Web Components

- pdf-viewer

### Structure

All web components have their own directory inside src/web-components and are imported in 
[src/web-components/index.js](src/web-components/index.js).
The index.js file is the one being used as input for the build.  
<br>
All web components are named using lower case and hyphens to separate words.\
This is a standard practice for web components.

### Build

Web components use their own [rollup.web.config.js](rollup.web.config.js).\
Run `yarn build-web-components` to make a build that outputs in the dist folder.  
<br>
By default the build will output in the dist folder. To make the build available in the desired project
you have two options:

- Copy the resulting cf-components.js file to the project manually.
- Edit the output file in [rollup.web.config.js](rollup.web.config.js) to point to the project on your machine.

Commit the resulting cf-components.js file in the desired project to use the web components.  
<br>
__Why can't we use the npm package?__

Web components need to be defined in the custom elements registry of the dom using `window.customElements.define()` first in order to be available in your html.  
This implies that before rendering the page which uses a web component a script that defines it in the custom elements registry has to run.  
That's why we use the resulting cf-components.js file directly in our project(s) and include it in the page that uses web components.

## Technical debt links

[Barometer IT](https://wolterskluwer.barometerit.com/b/system/041800002496)
[SonarQube Project](https://sonarqube.cloud-dev.wolterskluwer.eu/dashboard?id=clearfacts%3Acf-components)
[Black Duck Project](https://wolterskluwer.app.blackduck.com/api/projects/12b95178-67d9-4821-acb4-16c5c2d023e8)
[Checkmarx Project](https://test4tools.cchaxcess.com/CxWebClient/ProjectStateSummary.aspx?projectid=17795)