@zuckersalzundpfeffer/growtrade-ui v4.0.4
growtrade UI Library
Installation as maintainer
- Clone the repository
yarn install
to install all dependenciesyarn serve
to start the development server- 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
- All components have to be stored in ./src/elements/components
- Each component registered property has to have a default value
- Low-level components like
button
orinput
only emit Events like "clicked" or "input" or "change". There is no logic inside the low-level components. - Each components uses the prefix cot (e.g. cotButton). This is used to identify components in the library registry. IT's NOT WORKING WITHOUT
- 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:
import the component at the top of the file
import <componentname> from <location of the component>
add the component to the const components-array
- add the component to the export default object
- 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:
- make your changes (own branch)
- merge changes into master
- npm version x.x.x (x.x.x is the new version number)
- yarn package
- git add .
- git commit -m"message"
- git push
- 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
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago