component-ui-design v0.2.1

🚘 Vistoria Digital

👨‍🏫 Getting started

🧱 Build

• Run yarn build to build the app for production to the build folder.

⚙️Configuring style guide in vscode

• Download the following extensions. - Eslint - Prettier - Code formatter - EditorConfig for VS Code

• Add the following excerpt to the vscode settings file.

  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "emmet.syntaxProfiles": {
  "javascript": "jsx"
  },
  "emmet.includeLanguages": {
  "javascript": "javascriptreact"
  },
  "[javascript]": {
  "editor.formatOnSave": true
  },
  "editor.codeActionsOnSave": {
  "source.fixAll": true
  },

👨‍💻 Code design patterns

• Components and pages file structure.

  Pages and components follow the same structures.

  	```bash
  		📁ui
  		 ├── 📁src/
  		 │   ├── 📁components/
  		 │   │   └── 📁Button/
  		 │   │       └──📄 index.ts
  		 │   │       └──📄 Button.tsx
  		 │   │       └──📄 Button.styles.ts
  		 │   │       └──📄 Button.types.ts
  		 │   │       └──📄 Button.test.ts
  		 │   ├── 📁pages/
  		 │   │   └── 📁Home/
  		 │   │       └──📄 index.ts
  		 │   │       └──📄 Home.tsx
  		 │   │       └──📄 Home.styles.ts
  		 │   │       └──📄 Home.types.ts
  		 │   │       └──📄 Home.test.ts
  	```

• Structure of the index.ts file. > Export the .tsx and .types.ts files. javascript export * from './Button'; export * from './Button.types';

• Structure of the Button.types.ts file. > Interface tem o prefixo "I" e type tem o prefixo "Type".

  export interface IButtonProps {
  buttonType: ButtonType;
  }
  
      	export type ButtonType = 'contained' | 'outlined' | 'disabled';
      	```

• Structure of the Button.styles.ts file. > Create your CSS styles.

  import styled from 'styled-components';
  
      	export const Button = styled.button`
      	  // CSS code;
      	`
      	```

• Structure of the Button.tsx file. > Create your component.

  import React from 'react';
  import { IButtonProps } from './/Button.types';
  import { Button } from './Button.styles';
  
      	export const Button: React.FC<IButtonProps> = ({ buttonType }) => (
      	  <Button type={buttonType }/>
      	);
      	```

• Structure of the Button.test.ts file. > Create your tests.

  import React from 'react';
  import { render } from '@testing-library/react';
  import Button from './Button';
  
      	describe('Should render a button component', () => {
      	  // Your tests
      	});
      	```