@albdigitalteam/components v0.46.1

Delta Components

NOTE: The architecture of this project follows the criteria defined by the ALB Digital Team's Team Front-end. All procedures and standards expected in the development can be consulted on the official Wiki on Azure DevOps. This documentation is intended to explain how to develop, test, build, and release application.

Available Scripts

In the project directory, you can run:

yarn start

Runs the library and show the components with storybook. Open http://localhost:9009/ to view it in the browser.

You will also see any lint errors in the console.

yarn test

Launches the test runner in the interactive watch mode.

Build application

yarn build

Build the component library, this command will generate a lib folder with all the componentes.

Available components

This project implements the Material UI responsible for the absorption of React components for a faster and easier web development with Alb Digital team implementation. The components are separated by the contexts:

• Containers: (components responsible for providing similar structures and serve as a basis for other components)
• DataDisplay: (components used to display, define and separate content, like texts, lists or tables)
• Feedback: (components responsible to appears in front of application content to provide information or ask for a decision and also to inform about the status of ongoing processes)
• Inputs: (components responsible for enter, edit, select or validate records properties and for take actions with clicks)
• Layout: (components that serves as a wrapper, adapting to screen size and orientation, ensuring consistency across layouts)
• Navigation: (components responsible for managing the presentation of navigation providing access to destinations and functionalities)
• Surfaces: (components responsible for serve as a surface for components placed on them to display information and contents)
• Utils: (components responsible for settings and components that helps in some way others components like transitions)

Syntax Highlighting in the Editor

To configure the syntax highlighting in your favorite text editor, head to the Babel's docs and follow the instructions. Some of the most popular editors are covered.

Displaying Lint Output in the Editor

Some editors, including Sublime Text, Atom, and Visual Studio Code, provide plugins for ESLint.

They are not required for linting. You should see the linter output right in your terminal as well as the browser console. However, if you prefer the lint results to appear right in your editor, there are some extra steps you can do.

You would need to install an ESLint plugin for your editor first.

Linting (for VS Code)

1. Install ESLint extension
2. Install Prettier extension
3. Add the following configuration in your settings.json:

  "editor.formatOnSave": true,
  "eslint.autoFixOnSave": true,
  "eslint.validate":  [
    "javascript",
    "javascriptreact",
    {"language":  "typescript",  "autoFix":  true  },
    {"language":  "typescriptreact",  "autoFix":  true  }
  ],

Commit helpers

This project uses commitlint for checks if your commit messages meet the conventional commit format. Common types according to commitlint-config-conventional based on the the Angular convention can be:

• build: (changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
• ci: (changes to our CI configuration files and scripts)
• chore: (updating grunt tasks etc; no production code change)
• docs: (changes to the documentation)
• feat: (new feature for the user, not a new feature for build script)
• fix: (bug fix for the user, not a fix to a build script)
• perf: (a code change that improves performance)
• revert: (reverts a previous commit)
• style: (formatting, missing semi colons, etc; no production code change)
• test: (adding missing tests, refactoring tests; no production code change)

You can commit it in two ways, using the commitzen message creation CLI by just running:

• git commit, or
• git commit -m "types: your message".

After that, you will open a CLI to create the default message, if you want to skip this step press CTRL + C

For more information visit the official commitzen documentation.

🛣 Components Roadmap

• Data Table
• Button
• Input Autocomplete
• Data Table
• Chart
• Breadcrumb
• HeaderScreen
• ScreenContainer
• Input File

🛣 Storybook Roadmap

• Button
• Input Autocomplete
• Data Table
• Chart
• Breadcrumb
• HeaderScreen
• ScreeContainer
• Input File