tui-components v2.0.32

TUI Styleguide Components

Requirements:

1. Latest LTS version of nodejs
   • Get it from the official site
   • Install it using Homebrew: brew install node
2. Go to the project folder and run npm install
   • In some cases removing node_modules, package-lock.json and .env files might be useful when having problems with previous installs.

Most used scripts

• npm run develop: starts the development server with hot reloading in your local machine
• npm run test:watch: starts the test server, watching for changes continously
• npm run build:components: creates the build
• Look for more (bundle analysis, test coverages, etc.) in package.json file

Note on Atomic design

We are following a not-too-strict Atomic Design pattern. When you create a new component, or modify an existing one and you don't know where to locate it, keep in mind:

• Atoms: small-ish with no dependencies from the other components (but might have dependencies from third party packages), example: Button
• Molecule: composed by various Atoms, example: FilterBlock
• Organism: composed by some Atoms and/or Molecules, with some more complex functionality tied to it. Example: HotelCard
• Apps: the whole set of components, functionalities and behaviors put together. These could even evolved into their own separate repository at some point. Example: SunnyCars

Create your own component from scratch

Let's say you want to create a new component. In order to do so you will have to:

• Create the component files:
  • The component itself: src/common-ux/atoms/MyAtom.tsx
  • Most of the times you'll need some styles: src/common-ux/atoms/MyAtom.scss
  • The test file src/common-ux/atoms/MyAtom.spec.js (.ts, .jsx and .tsx are also valid)
• Create the example files, so they appear in the styleguide itself: - src/styleguide/pages/MyAtom.tsx: the example file where you import and use your previously defined component - Import and export your example file in src/styleguide/pages/index.js so it is available in the styleguide menu. You might have to restart your development environment after doing this in order to see the changes. - src/styleguide/pages/MyAtom.md: the documentation file where you explain your component and how it's used. This files has to include a fronmatter like this: --- title: Example of MyAtom component: MyAtom category: atoms extras: [ 'MyAtom.scss' ] --- Explanation, examples, etc in markdown format here... After all the steps, your "MyAtom" should be already showing in the styleguide menu and you should be able to check it.

It's recommended to start from little, for example just render a div with some text and make sure it's showing in the styleguide, then start adding some logic. Check out the existing components with .tsx format for guidelines.

VSCode recommended setup

Extensions:

• eslint
• stylelint
• prettier

Workspace settings:

{
  "css.validate": false,
  "scss.validate": false,
  "editor.formatOnSave": true,
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ]
}