@kick.com/kick-components

Kick Components

This is Kick's internal components library built with Vue 3 and integrated with Storybook. This library allows us to create, test, and manage reusable components for the web app.

Getting Started

Prerequisites

• Node.js v16.0.0 or higher
• npm v6.0.0 or higher

Installation

• Clone the repository:

git clone https://github.com/Trade-Arcade-Inc/kick-components.git

• Install dependencies:

cd kick-components && npm i

Usage

Running Storybook

To start the Storybook server, run the following command:

npm run storybook

This will open the Storybook UI in your default web browser at http://localhost:6006/.

Creating a new component

• Inside the /src/components directory, create a new Vue component (.vue) with its name in PascalCase.
• Export the newly created component from the src/index.ts file.
• Create a story for the component in the src/stories directory called Base<ComponentName>.stories.ts.

Adding a new icon

• Inside the /src/icons directory, find the corresponding category of the icon you want to create.
• Create a Vue component (.vue) which only holds the SVG of the icon in its template.
• Export the newly created icon from the index file of the icon's category.

Building the NPM package

To build the components for production, run the following command:

npm run build

This will generate a dist directory containing the production-ready code.