npm.io
1.0.200 • Published 10 months ago

readytech-ui-library-v2

Licence
—
Version
1.0.200
Deps
10
Size
3.4 MB
Vulns
0
Weekly
0
SummaryDependencyVersions

default

Project setup (install dependencies)

# yarn
yarn

Run Storybook

# yarn
yarn storybook
Run build to compile components
# yarn
yarn build
Publish to NPM
# yarn
yarn publish

(It will ask you to enter the new version number)
Customize configuration

See Configuration Reference.

Welcome to Readytech Digital UI Library Storybook

This application is a Storybook for the Readytech Digital UI Library. It will show you the components that are available in the library and how to use them.

Storybook helps you build UI components in isolation from your app's business logic, data, and context.
That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.

Browse example stories now by navigating to them in the sidebar.
View their code in the `stories` directory to learn how they work.
We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
What UI library is are the Readytech Digital UI Library based off [Vuetify](https://vuetifyjs.com/en/)

The Readytech Digital UI Library component are based off the [Vuetify](https://vuetifyjs.com/en/) library.

Vuetify is a Vue UI Library with beautifully handcrafted Material Components that gives you the power of Vue plus the functionality of a Material Design. It is a Vue implementation of the Google Material Design specification.

It's clean it's modern and it's very flexible, simple and easy to use!

Adding a new component

To add a new component, follow these steps:

1. Branch off of the `main` branch. Preferably create a new branch from `main` called `feature/{my new component name} OR use the Jira ticket number in such a format as `feature/RT-1234-my-new-component`. 2. Create within the branch a new folder in the `src/components/{my new component name}`. 3. Create within the branch a new component file in the `src/components/{my new component folder}/{my new component name}.vue`. 4. Create within the branch a new story file in the `src/components/{my new component folder}/{my new component name}.stories.js`. 5. Create within the branch a new test file in the `src/components/{my new component folder}/{my new component name}.spec.js`. 6. Please ensure you have a test within your spec file which test to see if the component is listed within the exports of the `src/index.js` file.
Updating the export file for npmregistry

Once you've added a new component, you'll need to update the export file for npmregistry:

1. Locate the `src/index.js` file. 2. Update the export file to include your new component. (See previous entries for examples) 3. Once this is done, you'll need to bump the version of the library in the `package.json` file. (This means increasing the version number on line 3 and that's it)
Testing your new component locally and pushing to your branch

Testing your new component:

1. You can test your new component by running the task `yarn test {path to your new component}.spec.js`. 2. Or if you want to you can run the test suite by simply running the task `yarn test`. 3. If this is the first time you are running the tests, it may prompt you to install the necessary dependencies. Say `Y` to install. 4. If the test for your new component passes you are ready to commit your changes to your branch! 5. If the tests fails please correct the errors before commiting your changes to your branch.
Creating a Merge Request

Once you've tested your new component and have pushed your changed to your branch you are ready to commit to raise a merge request to merge your branch into `main`:

1. Instructions to raise a merge request can be found here.