tele2-core-react-components

This project is based on the Storybook design system.

Learn more at Learn Storybook.

If you want to use these core components in your React app

First, you can have a look at what this React sub-lib provides:

• npm install
• npm start

If you like what you see, and want to use one of those components in your app:

1. Make sure that your application loads the Tele2 Core style library. For example:

   • Your application's package.json imports the tele2-core-styles NPM package, as a runtime dependency.
   • Your application has @import "~tele2-core-styles/main.css"; somewhere near the top.

2. You are now ready to import components from this React sub-lib:

   • When you find an example that you like (such as "Simple datepicker", open the corresponding example code (demo/datepicker/examples/SimpleDatepicker.js) and copy/paste it in your app.
   • Some import declarations will have the wrong path. You'll need to fix them.

If you want to add a component to this library

Before you get started, ask yourself this fundamental question: Can this component be implemented purely in CSS? If yes, do it in the superior Tele2 Core style library. It will be more widely used, and for longer, than if the component is written here in the React sub-lib. Once you have determined that you cannot do without JS:

Getting started:

• npm install
• npm start
• In another terminal, run npm run compile-less-watch

LESS

Although Create React App supports Sass (the best CSS preprocessor around!), it doesn't support LESS. This limitation is solved by running npm run compile-less-watch in the background (just like for the style library).

Adding a component

Take example on the datepicker component. All its JS and LESS code lies inside the core-components/datepicker folder. The demo code explaining how to use the component lies under demo/datepicker.

Your component may have variants. For example, datepicker has two variants: SingleDatepicker and DateRangepicker. These two variants have very similar HTML markup, and therefore the style is written in a single LESS file. If you have two variants with significant differences in their markup, it probably means they should be two different components.

To sum up:

• Create a subdirectory inside src/core-components
• Add one LESS file for your component
• Add one or more

ESLint

Every time you modify the ESLint rule overrides (defined in package.json), you have to run npm clean-install for that change to be taken into account. It took me several hours to figure this out.