taxfix-components-beta

taxfix-components

Repository for Italy/Spain UI components

Project structure

├── components
│   ├── dataEntry // Inputs checkboxes, radio buttons, text fields, etc.
│   ├── feedback // Alerts and Loadings
│   ├── general // General UI componets
│   │   ├── Button
│   │   ├── Icon
│   │   ├── IconButton
│   │   ├── Image
│   │   └── text
│   ├── layout // Layout especific components
│   │   ├── Container
│   │   ├── Grid
│   │   └── Pages
│   ├── navigation
│   └── other // Misc
├── index.ts //
└── theme
    ├── ThemeProvider.tsx
    ├── colors.ts
    ├── font.ts
    ├── index.tsx
    └── raw-colors.ts

Installation

1. Go to the project folder and run yarn install
2. Go to ios/ folder and run pod install

Run the iOS storybook

Go to the project folder and run yarn sb:ios

Run the Android storybook

Go to the project folder and run yarn sb:android

Run the Web storybook

Go to the project folder and run yarn sb:web

Creating a new component

https://user-images.githubusercontent.com/7741167/142962498-ff7b42bc-ff84-479b-8cb9-0be5293f120f.mov

Using the comand line run yarn generate this will prompt you to enter the component name and the component type. this command will create a new component folder and a new component file, and will also create a storybook for the component.

Building the Library

to create a new version of the library, run yarn build this will create a new version of the library in the dist folder. after this you can upload the new version to the dist folder to the github repository or npm registry.

Local development workflow

to test the library locally, fist link the library to the project folder with

yarn link

than in the consumer project, run

yarn link italy-ui-library

once the project is linked you can import the library normali like any other import like

import { Button } from 'italy-ui-library';

const App = () => {
  <Button variant="primary">Hello World</Button>;
};

Styled Components setup

according to the documentation styled-compoents need to run as a singleton in order to work so we need to make sure that we add the webpack alias to the webpack.config file in the consumer project

'styled-components': path.resolve('node_modules/styled-components'),

this will make sure that the styled-components package is available in the consumer project as a singleton