@plurix/ecom-components

Dependencies

Use yarn to install all dependencies and prepare husky (used to run scripts in git steps).

Folder Structure

• lib: files that will be compiled and published in the @plurix/ecom-components package
• src: local development

How to Create a New Component in the Package

• Create a new folder in lib/packages, with your component name. Example: MyComponent;
• Create a .tsx file inside this new folder and export a component from there. Example:

// lib/packages/MyComponent/MyComponent.tsx

export const MyComponent = () => {
  return <h1>My Component</h1>
}

• Export the new component in lib/main.ts. Example:

// lib/main.ts

export { MyComponent } from './packages/MyComponent/MyComponent'

• Create a new file called <component-name>Example.tsx in src/examples and import your component. Example:

// src/examples/MyComponentExample.tsx

import { MyComponent } from '../../lib/main'

export const MyComponentExample = () => {
  return (
    <div className="my-component-example-container">
      <MyComponent />
    </div>
  )
}

• Export the new example component in src/index.ts. Example:

// src/examples/index.ts

export { MyComponentExample } from './MyComponentExample'

• Run yarn dev;
• Open the localhost link in the terminal;
• Choose your component in the sidebar. Now, you can develop your component and test it with fast refresh.

OBS: If you need to use css in your components, create them as <component-name>.global.css and import them in your Lib Component. Then, you are able to use that in VTEX IO and VTEX Faststore.

Publishing

• After finishing your component changes, upgrade the package version in package.json and create an entry in CHANGELOG.md.
• Commit and push your changes to the remote repository. It will run the husky scripts: commitlint, prettier, lint, tests, and build.
• After all scripts pass successfully, run npm publish in your terminal.
• Copy the published version from your terminal and install it in another repository.
• You can import the new component by using:

import { MyComponent } from '@plurix/ecom-components'
import '@plurix/ecom-components/dist/styles/my-component.global.css' // If you are using css