@clearfacts/cf-components

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, which provides an easy way to mock data (Test-data-bot uses 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.
Docs enables the use of mdx, 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
The following addons are included:

addon/docs

For documentation

addon/knobs

Allows you to edit props dynamically

addon/actions

Allows you to display data received by event handlers

(Component.styled.ts)

Styling of the component, made with styled-components
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

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. The index.js file is the one being used as input for the build.

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.
Run yarn build-web-components to make a build that outputs in the dist folder.

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 to point to the project on your machine.

Commit the resulting cf-components.js file in the desired project to use the web components.

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.