kaizten-vue v1.0.1
Kaizten Vue
- :notebook_with_decorative_cover: Description
- :building_construction: Building
- :package: Publishing
- :computer_mouse: How to use
:notebook_with_decorative_cover: Description
Kaizten Vue is a custom components library leverages the powerful combination of Vue, Vuetify, and TypeScript to deliver a versatile and robust UI toolkit. Built with Vue, a progressive JavaScript framework, it ensures seamless component integration and reactivity. Vuetify, a popular Material Design component framework, provides a rich set of pre-styled UI components and utilities, enhancing the overall design consistency and aesthetic appeal. TypeScript adds an additional layer of type safety and developer tooling, facilitating easier debugging and more maintainable code. Together, these technologies form a comprehensive library that supports rapid development, scalability, and a polished user experience.
:building_construction: Building
Installation of dependencies
In order to install the dependencies associated with Kaizten Vue, the following command must be executed:
$ yarn install
yarn install v1.22.19
info No lockfile found.
[1/4] Resolving packages...
warning vite-plugin-dts > @rushstack/node-core-library > z-schema@5.0.6: has issues with node 14
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning " > vite-plugin-vuetify@2.0.3" has incorrect peer dependency "vite@>=5".
warning " > rollup-plugin-typescript2@0.34.1" has unmet peer dependency "rollup@>=1.26.3".
warning " > vite-plugin-sass-dts@1.3.24" has unmet peer dependency "postcss@^8".
warning "vite-plugin-sass-dts > postcss-js@4.0.1" has unmet peer dependency "postcss@^8.4.21".
[4/4] Building fresh packages...
success Saved lockfile.
Done in 34.40s.As can be seen, this command will resolve and fetch the required packages, link the dependencies, and build the packages. Once the installation is complete, the necessary dependencies for using Kaizten Vue will be available in folder node_modules/.
Distribution
Once the dependencies are already installed (as indicated here), the package can be obtained by executing the following command:
$ yarn build
yarn run v1.22.19
$ vue-tsc && vite build
vite v4.5.3 building for production...
✓ 1005 modules transformed.
dist/components/bar-plot/BarPlot.vue.d.ts 0.10 kB
dist/components/box-plot/BoxPlot.vue.d.ts 0.10 kB
dist/components/line-plot/LinePlot.vue.d.ts 0.10 kB
dist/components/pie-chart/PieChart.vue.d.ts 0.10 kB
dist/components/contours/Contours.vue.d.ts 0.10 kB
dist/components/histogram/Histogram.vue.d.ts 0.10 kB
dist/components/dendogram/Dendogram.vue.d.ts 0.10 kB
dist/components/area-chart/AreaChart.vue.d.ts 0.10 kB
dist/components/scatter-plot/ScatterPlot.vue.d.ts 0.10 kB
dist/components/network-chart/NetworkChart.vue.d.ts 0.10 kB
dist/components/ridgeline-plot/RidgelinePlot.vue.d.ts 0.10 kB
dist/components/pie-chart/PieChartDonut.vue.d.ts 0.10 kB
dist/components/bar-plot/StackedBarPlot.vue.d.ts 0.10 kB
dist/components/radical-stacked-bar/RadicalStackedBar.vue.d.ts 0.11 kB
dist/components/scatter-plot/ScatterPlotMultiple.vue.d.ts 0.11 kB
dist/components/word-cloud/WordCloudProportional.vue.d.ts 0.11 kB
dist/components/calendar-chart/HeatmapChart.vue.d.ts 0.23 kB
dist/components/radar-chart/RadarChart.vue.d.ts 0.24 kB
dist/components/bubble-chart/CirclePackingBubble.vue.d.ts 0.24 kB
dist/components/maps/MapGeoJson.vue.d.ts 0.25 kB
dist/components/maps/MapMoveLocation.vue.d.ts 0.26 kB
dist/components/production-planning-visualizer/ProductionPlanningVisualizer.vue.d.ts 0.28 kB
dist/components/maps/MapMoveLocationGeoJson.vue.d.ts 0.29 kB
dist/components/kpi/KPI.vue.d.ts 0.31 kB
dist/components/snackbar/Snackbar.vue.d.ts 0.33 kB
dist/components/HelloWorld.vue.d.ts 0.35 kB
dist/components/input-tooltip/InputTooltip.vue.d.ts 0.35 kB
dist/components/section-title/SectionTitle.vue.d.ts 0.35 kB
dist/components/button-tooltip/ButtonTooltip.vue.d.ts 0.36 kB
dist/components/selector-tooltip/SelectTooltip.vue.d.ts 0.36 kB
dist/components/checkbox-tooltip/CheckboxTooltip.vue.d.ts 0.37 kB
dist/components/textarea-tooltip/TextAreaTooltip.vue.d.ts 0.37 kB
dist/components/footer/Footer.vue.d.ts 0.44 kB
dist/components/production-planning-visualizer/ProductionPlanningVisualizerTSToFix.vue.d.ts 0.48 kB
dist/kaizten-vue.es.js 1,369.98 kB │ gzip: 318.13 kB
dist/components/bar-plot/BarPlot.vue.d.ts 0.10 kB
dist/components/box-plot/BoxPlot.vue.d.ts 0.10 kB
dist/components/line-plot/LinePlot.vue.d.ts 0.10 kB
dist/components/pie-chart/PieChart.vue.d.ts 0.10 kB
dist/components/contours/Contours.vue.d.ts 0.10 kB
dist/components/histogram/Histogram.vue.d.ts 0.10 kB
dist/components/dendogram/Dendogram.vue.d.ts 0.10 kB
dist/components/area-chart/AreaChart.vue.d.ts 0.10 kB
dist/components/scatter-plot/ScatterPlot.vue.d.ts 0.10 kB
dist/components/network-chart/NetworkChart.vue.d.ts 0.10 kB
dist/components/ridgeline-plot/RidgelinePlot.vue.d.ts 0.10 kB
dist/components/pie-chart/PieChartDonut.vue.d.ts 0.10 kB
dist/components/bar-plot/StackedBarPlot.vue.d.ts 0.10 kB
dist/components/radical-stacked-bar/RadicalStackedBar.vue.d.ts 0.11 kB
dist/components/scatter-plot/ScatterPlotMultiple.vue.d.ts 0.11 kB
dist/components/word-cloud/WordCloudProportional.vue.d.ts 0.11 kB
dist/components/calendar-chart/HeatmapChart.vue.d.ts 0.23 kB
dist/components/radar-chart/RadarChart.vue.d.ts 0.24 kB
dist/components/bubble-chart/CirclePackingBubble.vue.d.ts 0.24 kB
dist/components/maps/MapGeoJson.vue.d.ts 0.25 kB
dist/components/maps/MapMoveLocation.vue.d.ts 0.26 kB
dist/components/production-planning-visualizer/ProductionPlanningVisualizer.vue.d.ts 0.28 kB
dist/components/maps/MapMoveLocationGeoJson.vue.d.ts 0.29 kB
dist/components/kpi/KPI.vue.d.ts 0.31 kB
dist/components/snackbar/Snackbar.vue.d.ts 0.33 kB
dist/components/HelloWorld.vue.d.ts 0.35 kB
dist/components/input-tooltip/InputTooltip.vue.d.ts 0.35 kB
dist/components/section-title/SectionTitle.vue.d.ts 0.35 kB
dist/components/button-tooltip/ButtonTooltip.vue.d.ts 0.36 kB
dist/components/selector-tooltip/SelectTooltip.vue.d.ts 0.36 kB
dist/components/checkbox-tooltip/CheckboxTooltip.vue.d.ts 0.37 kB
dist/components/textarea-tooltip/TextAreaTooltip.vue.d.ts 0.37 kB
dist/components/footer/Footer.vue.d.ts 0.44 kB
dist/components/production-planning-visualizer/ProductionPlanningVisualizerTSToFix.vue.d.ts 0.48 kB
dist/kaizten-vue.cjs.js 1,010.91 kB │ gzip: 266.97 kB
dist/components/bar-plot/BarPlot.vue.d.ts 0.10 kB
dist/components/box-plot/BoxPlot.vue.d.ts 0.10 kB
dist/components/line-plot/LinePlot.vue.d.ts 0.10 kB
dist/components/pie-chart/PieChart.vue.d.ts 0.10 kB
dist/components/contours/Contours.vue.d.ts 0.10 kB
dist/components/histogram/Histogram.vue.d.ts 0.10 kB
dist/components/dendogram/Dendogram.vue.d.ts 0.10 kB
dist/components/area-chart/AreaChart.vue.d.ts 0.10 kB
dist/components/scatter-plot/ScatterPlot.vue.d.ts 0.10 kB
dist/components/network-chart/NetworkChart.vue.d.ts 0.10 kB
dist/components/ridgeline-plot/RidgelinePlot.vue.d.ts 0.10 kB
dist/components/pie-chart/PieChartDonut.vue.d.ts 0.10 kB
dist/components/bar-plot/StackedBarPlot.vue.d.ts 0.10 kB
dist/components/radical-stacked-bar/RadicalStackedBar.vue.d.ts 0.11 kB
dist/components/scatter-plot/ScatterPlotMultiple.vue.d.ts 0.11 kB
dist/components/word-cloud/WordCloudProportional.vue.d.ts 0.11 kB
dist/components/calendar-chart/HeatmapChart.vue.d.ts 0.23 kB
dist/components/radar-chart/RadarChart.vue.d.ts 0.24 kB
dist/components/bubble-chart/CirclePackingBubble.vue.d.ts 0.24 kB
dist/components/maps/MapGeoJson.vue.d.ts 0.25 kB
dist/components/maps/MapMoveLocation.vue.d.ts 0.26 kB
dist/components/production-planning-visualizer/ProductionPlanningVisualizer.vue.d.ts 0.28 kB
dist/components/maps/MapMoveLocationGeoJson.vue.d.ts 0.29 kB
dist/components/kpi/KPI.vue.d.ts 0.31 kB
dist/components/snackbar/Snackbar.vue.d.ts 0.33 kB
dist/components/HelloWorld.vue.d.ts 0.35 kB
dist/components/input-tooltip/InputTooltip.vue.d.ts 0.35 kB
dist/components/section-title/SectionTitle.vue.d.ts 0.35 kB
dist/components/button-tooltip/ButtonTooltip.vue.d.ts 0.36 kB
dist/components/selector-tooltip/SelectTooltip.vue.d.ts 0.36 kB
dist/components/checkbox-tooltip/CheckboxTooltip.vue.d.ts 0.37 kB
dist/components/textarea-tooltip/TextAreaTooltip.vue.d.ts 0.37 kB
dist/components/footer/Footer.vue.d.ts 0.44 kB
dist/components/production-planning-visualizer/ProductionPlanningVisualizerTSToFix.vue.d.ts 0.48 kB
dist/kaizten-vue.umd.js 1,127.16 kB │ gzip: 288.44 kB
[vite:dts] Start generate declaration files...
[vite-plugin-static-copy] Copied 2 items.
✓ built in 11.39s
[vite:dts] Declaration files built in 4329ms.
Done in 25.00s.The resulting distribution will be available in the dist/ folder.
:package: Publishing
:warning: In order to deploy the library as GitHub package, the distribution of the library must be firstly created. The distribution can be created as indicated here.
In order to deploy the library, the following command must be executed:
$ yarn publish
yarn publish v1.22.19
[1/4] Bumping version...
info Current version: 1.0.0
question New version: 1.0.1
[2/4] Logging in...
[3/4] Publishing...
success Published.
[4/4] Revoking token...
info Not revoking login token, specified via config file.
Done in 10.13s.Please note that a new version of the package must be deployed for the update to take effect. In this case, the resulting package will be published in the repository of the library.
:computer_mouse: How to use
Given a Vue project, Kaizten Vue can be added as a dependency to the project under construction by following these steps:
$ touch .npmrc
$ echo "//npm.pkg.github.com/:_authToken=\${GITHUB_TOKEN}" >> .npmrc
$ echo "@kaizten:registry=https://npm.pkg.github.com" >> .npmrc
$ export GITHUB_TOKEN=<PERSONAL_ACCESS_TOKEN>
$ yarn add @kaizten/kaizten-vue@1.0.1It is important that you replace <PERSONAL_ACCESS_TOKEN> with your personal token from GitHub. If you don't have it, create a personal token in your GitHub account. Here are the steps. The type of token you need to create is Personal access tokens (classic). Additionally, it is important that when you create the token, you select the read-packages option.