UI-Kit Falabella

1. Why
2. Commands
3. UI Elements
   1. Button
   2. Rating Star
   3. Modal
4. Change log

Why

The project aims to create a common place to share the UI components used on falabella's site(including: browse, checkout and nodeapp).

More than just moving the current components into this repository, the idea is generating a new solution for the common problems which usually arises using the old components:

• There's no real re-usability on the components, they are tightly coupled.
• They contain business logic, making them hard to extend.
• The CSS styling is exposed directly and can clash with other definitions.

Commands

• make init: It will download the project's dependencies and configure git hooks.
• npm run start: It will start a server on http://localhost:1337 with the code.
• npm run dev: It will start compiling the code on dev mode and it will be looking for new changes.
• npm run lint: It will run the lint rules on the project.
• npm run test: It will run the unit tests + it's going to show the current code coverage of the project.
• make build: It will create the build meant for production ready lib.

UI Elements

Button

The implementation of the Button component has default styles, these classes are button besides that it has three other optional styles, primary for buttons type CTA, default for buttons with less relevance than a CTA and disabled to indicate that the button is not available.

props:

• children <text|node>: It is the property that is passed as children inside the button.
• css <[]string>: Array of custom classes, these classes are added. default: []
• primary <boolean>: Add class primary. default false
• default <boolean>: Add class default. default false
• disabled <boolean>: Add class disabled. default false

Remember that when you want to deliver a onSomething event you must do it thinking that it is a ReactJs component, so if you need to add a data-something = "true" it is done directly.

Example:

//In ReactJs
return(
  <Button
    primary
    onClick={action}
    cssClasses={['special-sale', 'black-monday']}
    data-sale="true">
    Message
  </Button>
);

//output
<button class="button primary special-sale black-monday" data-sale="true">Message</button>

Modal

The modal implementation has 4 components to work with:

• Modal: Main wrapper and it creates everything around it to make it look like a modal.
• Modal.Header: It's the component that will place the styles around header.
• Modal.Body: It's the component that will place the styles aound body.
• Modal.Footer: It's the component that will place the styles around footer.

props:

• opened<boolean>: to show/hide the modal, default: false

return (
  <Modal opened={true}>
    <Modal.Header>
      <h1>A title</h1>
    </Modal.Header>
    <Modal.Body>
      <p>A body</p>
    </Modal.Body>
    <Modal.Footer>
      <p>A footer</p>
    </Modal.Footer>
  </Modal>
);

Change log

• 0.2.0 (04/10/2019)

  • added a SVG to CSS transformer, next to this change the svg command is added and added in the different compilation processes.
  • lint configuration for jsx files.
  • UI Modal: The Modal Component is added.
  • UI Rating Star: The RatingStar is added.

• 0.1.0 (04/09/2019):

  • All the necessary configurations for rollup and friends.
  • UI Button: The Button Component is added.