readytech-ui-library-v2 0.0.37 → 0.0.39

package/README.md

@@ -1,5 +1,95 @@
-# Vue 3 + Vite
+# default
 
-This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+## Project setup (install dependencies)
 
-Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
+```
+# 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](https://vitejs.dev/config/).
+
+
+
+# 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.
+```
+
+
+<div className="subheading">What UI library is are the Readytech Digital UI Library based off [Vuetify](https://vuetifyjs.com/en/)</div>
+<h4>The Readytech Digital UI Library component are based off the [Vuetify](https://vuetifyjs.com/en/) library.</h4>
+<p>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.</p>
+<p><strong>It's clean it's modern and it's very flexible, simple and easy to use!</strong></p>
+
+<div className="subheading">Adding a new component</div>
+
+<div>
+<h4>To add a new component, follow these steps:</h4>  
+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.
+</div>
+
+<div className="subheading">Updating the export file for npmregistry</div>
+
+<div>
+<h4>Once you've added a new component, you'll need to update the export file for npmregistry:</h4>  
+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)
+</div>
+
+<div className="subheading">Testing your new component locally and pushing to your branch</div>
+
+<div>
+<h4>Testing your new component:</h4>  
+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.
+</div>
+
+<div className="subheading">Creating a Merge Request</div>
+
+<div>
+<h4>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`:</h4>  
+1. Instructions to raise a merge request can be found <a href="https://docs.gitlab.com/ee/user/project/merge_requests/creating_merge_requests.html" target="_blank">here</a>.
+</div>