t2-core-react-components v0.1.11
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:
Make sure that your application loads the Tele2 Core style library. For example:
- Your application's `package.json` imports the [tele2-core-styles](https://git.is.comhem.com/tcs/tele2-core-styles) NPM package,
as a runtime dependency. - Your application has
@import "~tele2-core-styles/main.css";
somewhere near the top.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.
- When you find an example that you like (such as "Simple datepicker", open the corresponding example code (
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.