growtrade UI Library

Installation as maintainer

1. Clone the repository
2. yarn install to install all dependencies
3. yarn serve to start the development server
4. commit your changes to github

Installation as a package in projects

TBD import as npm package than include in main.js as dependency

import growtradeUI from '@/growtrade-ui';
Vue.use('growtradeUI');

change the vue.config.js to use sass from dependency

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@zuckersalzundpfeffer/growtrade-ui/dist/theme/theme.scss";
        @import "~@/assets/vars.scss";`
      }
    }
  }
};

Developing for the library

Ruleset

1. All components have to be stored in ./src/elements/components
2. Each component registered property has to have a default value
3. Low-level components like button or input only emit Events like "clicked" or "input" or "change". There is no logic inside the low-level components.
4. Each components uses the prefix cot (e.g. cotButton). This is used to identify components in the library registry. IT's NOT WORKING WITHOUT
5. Each component has to have a name attribute. The name is used to register the component properly

Developing a component

Start your work inside the ./src/elements/components dir. You can use subfolders if you like. They are not necassary for later use.

To add the component to the library after developing the component itself, you have to add the component to the elements.js file inside the ./src/elements/ folder. To import the component you have to:

1. import the component at the top of the file import <componentname> from <location of the component>

2. add the component to the const components-array

3. add the component to the export default object

4. have a cup of coffee

Testing your components

Each component in the elements.js file is automatically injected into the development-server. If you have the server running, you can see the component directly in the browser with its default values. If you want to check out the variants of your component you have to add them manually to the Storybook.vue file inside the elements dir.

Pushing new changes

To be able to push the package to npm you need an account at npm and have to be invited to the growtrade-ui package

Then you can push your changes to the project like this:

1. make your changes (own branch)
2. merge changes into master
3. npm version x.x.x (x.x.x is the new version number)
4. yarn package
5. git add .
6. git commit -m"message"
7. git push
8. npm publish

#OR: run ./publish-patch.sh for minor changes (chmod -x publish-patch.sh) if access error

After the package is published you can update it in other repos via: yarn or specific with yarn add @zuckersalzundpfeffer/growtrade-ui