taxfix-components

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 prepare 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, first we need to build the project. After, link the library to the project folder with:

yarn link

than in the consumer project, run:

yarn link "@taxfix/taxfix-components"

Also, in the consumer project is needed to install styled-components and native-base. In order to avoid problems related to double import of dependencies, the following webpack alias should be included in the webpack.config file of the consumer project:

config.resolve.alias = {
  //...
   'styled-components': path.resolve('node_modules/styled-components'),
    'native-base': path.resolve('node_modules/native-base'),
    react: path.resolve('node_modules/react'),
  //...

this will make sure that these packages are available in the consumer project as a singleton.

Once the project is linked and the webpack alias included, you can import the library normaly like any other import:

import { Button } from '@taxfix/taxfix-components';

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

Please, note that you would need to include the ThemeProvider of your project in order to add the theme values to the new components created in the consumer:

import { Collapsable, Child, ItalyThemeProvider } from '@taxfix/taxfix-components';

export const NewComponentInConsumer: React.FC<NewComponentProps> = ({ childVariant }) => {
  return (
    <ItalyThemeProvider>
      <Collapsable title="2022 Taxes" minHeight="80px" maxWidth="580px" startOpen>
        <Child variant={childVariant} />
      </Collapsable>
    </ItalyThemeProvider>
  );
};

Happy coding!