midone-components v1.1.0

Midone component library

setup

• clone
• run docker image

sh shell_scripts/start_container_dev.sh 

Development

• Make changes to component, commit cahnges to git

• set styles if necessary

<style>
@import "tom-select/dist/css/tom-select.css";
@import "../../assets/css/components/_tom-select.css";
</style>

• go to docker terminal, give access rigths

docker exec -it midone-components_3126756467172968334 bash
chmod 777 /application/node_modules/.cache/ /root -R

• build and pack component by running script. Select number which one.

// container terminal
bash shell_scripts/build.sh

• go to target project, copy .tgz file into /packages folder,

cp ../../lib/midone-components_3126756467172968334/packages/midone-components-local-0.0.1.tgz ./packages/midone-components-local-0.0.1.tgz

• go to target app docker terminal, install package from file

npm install file:packages/midone-components-local-0.0.1.tgz

• reload target app. If new components are added, rebuid docker image. If changes are made to component, just reinstall package

• copy .tgz to /packages folder in the root of target app

// target app
rm ./packages/midone-components-local-0.0.1.tgz
cp ../../lib/midone-components_3126756467172968334/packages/midone-components-local-0.0.1.tgz  ./packages

• go to container

docker exec -it target-app_123 bash
// first time install
npm install file:packages/midone-components-local-0.0.1.tgz

// Dockerfile-dev
COPY packages ./packages

target app should have dependencies

  "dependencies": {
    "core-js": "^3.8.3",
    "midone-components-local": "file:packages/midone-components-local-0.0.1.tgz",
    "vue": "^3.2.13"
    ...
 },

• reload somehow

• configure target app:

  // tailwind.confing.js  
  content: [
    "./node_modules/midone-components-local/dist/*.{js,html}" // old
    "./node_modules/@wpmss/midone-notification/dist/*.{js,html}",
    ...
  ],

// main.ts
import MidoneConponents from 'midone-components-local'

createApp(App).use(MidoneConponents).mount('#app')

// app.css
@import "midone-components-local/dist/midone-components.css";

• use component as a global import

  <MidoneButton variant="outline-danger" class="w-24 mb-2 mr-1">BUTTON</MidoneButton>

if component use another component as a props

example: Show Tooltip

• import component that is used from current instance of target app

import { getCurrentInstance } from 'vue';

const MidoneButton = getCurrentInstance().appContext.components.MidoneButton;

• update package

npm update midone-components-demo 

Bugs

• tom-select: 'ts-wrapper tom-select' element has class .ts-wrapper, which should contain position: unset. When in quinqun, it is owerwritten because old css files in management_main app.

Publish packages

• set name to 'midone-components' in package.json

• log into npm via terminal

  npm adduser

• publish

  npm publish

• update node_modules & serve

  npm install
  npm run serve


  #npm update midone-components
  #npm run serve

npm hub

• To unpublish a single package version, run npm unpublish

  <package_name>@<version>

If all the versions of a package can be unpublished, you can unpublish all versions at once by running

npm unpublish <package_name> --force

Adding Midone components to older application

1. go to docker terminal

2. Install components

  npm install midone-components

Commands

Docker

docker logs --follow midone-components_3126756467172968334

NPM

npm whoami
npm outdated
npm list --depth=0

Latest awailable version

npm view midone-testcomponents version

npm update midone-testcomponents --dd

Docs

https://cli.vuejs.org/guide/build-targets.html#library

midone-general

In target app, add

// tailwind.config.js
module.exports = {
  ...
  plugins: [
    require("@tailwindcss/forms")
    ...