@rc-tech/web-ui v0.1.8

Introduction

A library of reusable UI components used by RCTech on the EMA platform. Built with Vuetify.

Installation

Follow these steps to install the UI component library and use it in your project 1. Run npm install --save @rc-tech/web-ui OR yarn add @rc-tech/web-ui 2. Include the CSS file at the main or index file of your project (import '@rc-tech/web-ui/dist/web-ui.css';) 3. Import the component you want to use in your file (import { RCPhone } from '@rc-tech/web-ui';) 4. Include the imported component in the "components" property of your component

Project Structure

The components are kept in the /src/components directory. They are broken into 3 categories:

1. Atoms - Small components with only a single function, and no nested child components. Eg. buttons, text fields.
2. Molecules - Medium-sized components with may be comprised of a few atoms. Eg. A search header, a select list
3. Organisms - Large, complex components with multiple functionalities and children. Eg. A sidebar with menu items and inputs

Creating a New Component

To add a new component to the library, follow these steps.

1. Create your component file. Determine if your component is an atom, molecule or organism and put it in the right directory. All components should be put in a folder with the same name as the component. Eg. @/components/molecules/SearchBar/SearchBar.vue
2. To develop your component, you can import it into App.vue and run the project with yarn serve.
3. Make sure to export your component from index.ts, or else it will not be available from the npm package.
4. You must add TypeScript typings for your component. In the types/ folder, create a file for your component. Use rcphone.d.ts as an example.
5. Import and re-export your typing from the web-ui.d.ts file in the types/ folder. Use RCPhone as an example.

Unit Testing

All components must be unit tested before being published. Tests go in the tests/unit/ folder. Use RCPhone.spec.js as an example. You can run unit tests with yarn test:unit.

Publishing the Library

When your changes have been completed and merged into the branch, follow these steps to publish the package to npm.

1. Build the package by running yarn build:lib. Verify that you have the correct output in the dist/ folder.
2. Increment the version number. Run the command npm version new version number.
3. Publish the package by running npm publish --access public. You must be logged in to npm to do so. Login with the command npm login.