@winchsa/ui 0.1.6 → 0.1.8

package/README.md

@@ -2,55 +2,146 @@
 
 # Winch UI
 
-A Vue 3 + Vuetify UI component library for Winch SA.
+A Vue 3 + Vuetify UI component library for Winch projects.
 
-## 🚀 Installation in Projects
+## Overview
+
+Winch UI is a comprehensive Vue 3 + Vuetify component library designed specifically for Winch projects. It provides pre-built components, utilities, and styling that follow Winch design standards.
+
+## Getting Started
+
+### Installation
 
 ```bash
-# Using pnpm
 pnpm add @winchsa/ui
+```
 
-# Using npm
-npm install @winchsa/ui
+### Basic Usage
 
-# Using yarn
-yarn add @winchsa/ui
-```
 
-## 📖 Usage
+```javascript
+// main.ts
+import { createApp } from 'vue'
+import '@winchsa/ui/core/template/index.scss'; // <- WINCH styles
+import './assets/scss/styles.scss'; //<- overwritten styles
 
-```vue
-<template>
-  <div>
-    <!-- Your Winch UI components here -->
-  </div>
-</template>
+const app = createApp(App)
+app.mount('#app')
+```
 
-<script setup>
-// Import components as needed
-// import { YourComponent } from '@winchsa/ui'
-</script>
+## Configuration
+
+### Vite Configuration
+
+To use the Winch UI package in your Vite project, add the following configuration to your `vite.config.ts`:
+
+```typescript
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vuetify from 'vite-plugin-vuetify'
+import Components from 'unplugin-vue-components/vite'
+import AutoImport from 'unplugin-auto-import/vite'
+import { fileURLToPath } from 'node:url'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    vuetify({
+      styles: {
+        configFile: 'node_modules/@winchsa/ui/dist/styles/assets/scss/variables/_vuetify.scss'
+      }
+    }),
+    Components({
+      resolvers: [
+        (name) => {
+          if (name.startsWith('W')) {
+            return { name, from: '@winchsa/ui' }
+          }
+        }
+      ],
+      dts: true
+    }),
+    AutoImport({
+      imports: [
+        {
+          '@winchsa/ui/utils': [
+            'buildApiUrl',
+            'printPdf',
+            'saveFile',
+            'formValidator',
+            'getErrorMessage',
+            'formatDate',
+            'formatNumber',
+            'toaster',
+            'responseAlert'
+            ...
+          ]
+        }
+      ],
+      dts: true
+    })
+  ],
+  resolve: {
+    alias: {
+      '@styles': fileURLToPath(new URL('node_modules/@winchsa/ui/dist/styles', import.meta.url))
+    }
+  }
+})
 ```
 
-## 🛠️ Development
+This configuration:
+- Sets up Vuetify with custom styles
+- Auto-imports Winch UI components that start with 'W'
+- Auto-imports utility functions from the package
+- Creates proper TypeScript definitions
+- Sets up the alias for styles
+
+## Development
+
+### Playground
+
+The playground is located in the `playground/` directory and provides a development environment for testing and showcasing components.
+
+#### Running the Playground
 
 ```bash
-# Install dependencies
+cd playground
 pnpm install
+pnpm dev
+```
 
-# Start development server
-pnpm run dev
+### Building and Installing Locally in an Actual Project
 
-# Build for production
-pnpm run build
+This script compiles the UI package, generates a tarball, and installs it into your project for local development and testing.
+
+```bash
+ ./build-and-install.sh
+```
+
+## Release Process
 
-# Run linting
-pnpm run lint
+This project uses a **tag-based release system** that automatically publishes to npm only when you push version tags. This ensures you have full control over when releases are published.
 
-# Fix linting issues
-pnpm run lint:fix
 
-# Run tests
-pnpm run test
+### **Option 1: Using the Release Script (Recommended)**
+```bash
+# Complete automated release process
+pnpm run release
 ```
 
+### **Option 2: Manual Tag-Based Release**
+```bash
+# 1. Update version in package.json
+# 2. Build the package
+pnpm run build
+
+# 3. Commit your changes
+git add .
+git commit -m "feat: new features"
+
+# 4. Create and push a tag
+git tag v1.2.3
+git push origin master --tags
+
+# GitHub Actions will automatically trigger and publish to npm
+```

package/dist/components/table/StaticTable.vue.d.ts

@@ -14,9 +14,7 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
     attrs: any;
     slots: __VLS_PrettifyGlobal<any>;
     emit: {};
-}>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}> & {
+}>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
 export default _default;

package/dist/styles/assets/scss/variables/_template.scss

@@ -1 +1 @@
-@forward '../../../@core/scss/template/variables';
+@forward '../../../core/template/variables';

package/dist/styles/assets/scss/variables/_vuetify.scss

@@ -1 +1 @@
-@forward '../../../@core/scss/template/libs/vuetify/variables';
+@forward '../../../core/template/libs/vuetify/variables';

package/dist/styles/{@core/scss → core}/base/_components.scss

@@ -1,6 +1,6 @@
 @use 'mixins';
-@use '../../../@layouts/styles/placeholders';
-@use '../../../assets/scss/variables/template' as variables;
+@use '../../layouts/placeholders';
+@use '../../assets/scss/variables/template' as variables;
 
 //  Avatar group
 .v-avatar-group {

package/dist/styles/{@core/scss → core}/base/_dark.scss

@@ -1,4 +1,4 @@
-@use '../../../assets/scss/variables/template' as variables;
+@use '../../assets/scss/variables/template' as variables;
 
 // ————————————————————————————————————
 // * ——— Perfect Scrollbar

package/dist/styles/{@core/scss → core}/base/_default-layout-w-vertical-nav.scss

@@ -1,4 +1,4 @@
-@use '../../../assets/scss/variables/template' as variables;
+@use '../../assets/scss/variables/template' as variables;
 @use 'placeholders' as *;
 @use '../template/placeholders' as *;
 @use 'misc';

package/dist/styles/{@core/scss → core}/base/_layouts.scss

@@ -1,4 +1,4 @@
-@use '../../../assets/scss/variables/template' as variables;
+@use '../../assets/scss/variables/template' as variables;
 
 /* ℹ️ This styles extends the existing layout package's styles for handling cases that aren't related to layouts package */
 

package/dist/styles/{@core/scss → core}/base/_mixins.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../../../assets/scss/variables/vuetify.scss';
+@use '../../assets/scss/variables/vuetify.scss';
 
 @mixin elevation($z, $important: false) {
   box-shadow: map.get(vuetify.$shadow-key-umbra, $z), map.get(vuetify.$shadow-key-penumbra, $z),

package/dist/styles/{@core/scss → core}/base/_utilities.scss

@@ -1,5 +1,5 @@
-@use '../../../assets/scss/variables/template' as variables;
-@use '../../../@layouts/styles/mixins' as layoutsMixins;
+@use '../../assets/scss/variables/template' as variables;
+@use '../../layouts/mixins' as layoutsMixins;
 
 //  Demo spacers
 // TODO: Use vuetify SCSS variable here

package/dist/styles/{@core/scss → core}/base/_utils.scss

@@ -1,6 +1,6 @@
 @use 'sass:map';
 @use 'sass:list';
-@use '../../../assets/scss/variables/template' as variables;
+@use '../../assets/scss/variables/template' as variables;
 
 // Thanks: https://css-tricks.com/snippets/sass/deep-getset-maps/
 @function map-deep-get($map, $keys...) {

package/dist/styles/{@core/scss → core}/base/_variables.scss

@@ -11,18 +11,18 @@
     - You can also use variable for consistency (e.g. mx 1 rem should be applied to both vertical nav items and vertical nav header)
 */
 
-@forward '../../../@layouts/styles/variables' with (
+@forward '../../layouts/variables' with (
   // Adjust z-index so vertical nav & overlay stays on top of v-layout in v-main. E.g. Email app
   $layout-vertical-nav-z-index: 1004,
   $layout-overlay-z-index: 1003
 );
-@use '../../../@layouts/styles/variables' as *;
+@use '../../layouts/variables' as *;
 
 //  Default layout
 
 $navbar-high-emphasis-text: true !default;
 
-// @forward "@layouts/styles/variables" with (
+// @forward "layouts/variables" with (
 //   $layout-vertical-nav-width: 350px !default,
 // );
 
@@ -105,7 +105,7 @@ $plugin-ps-thumb-y-dark: rgba(var(--v-theme-surface-variant), 0.35) !default;
 
 //  Vuetify
 
-// Used in src/@core/scss/base/libs/vuetify/_overrides.scss
+// Used in src/core/base/libs/vuetify/_overrides.scss
 $vuetify-reduce-default-compact-button-icon-size: true !default;
 
 //  Custom variables

package/dist/styles/{@core/scss → core}/base/_vertical-nav.scss

@@ -1,7 +1,7 @@
 @use 'placeholders' as *;
 @use '../template/placeholders' as *;
-@use '../../../@layouts/styles/mixins' as layoutsMixins;
-@use '../../../assets/scss/variables/template' as variables;
+@use '../../layouts/mixins' as layoutsMixins;
+@use '../../assets/scss/variables/template' as variables;
 @use 'mixins' as mixins;
 @use 'vuetify/lib/styles/tools/states' as vuetifyStates;
 

package/dist/styles/{@core/scss → core}/base/libs/vuetify/_overrides.scss

@@ -1,5 +1,5 @@
 @use '../../utils';
-@use '../../../../../assets/scss/variables/template' as variables;
+@use '../../../../core/template/variables' as variables;
 
 //  Application
 // ℹ️ We need accurate vh in mobile devices as well

package/dist/styles/{@core/scss → core}/base/placeholders/_default-layout-vertical-nav.scss

@@ -1,4 +1,4 @@
-@use '../../../../assets/scss/variables/template' as variables;
+@use '../../../core/template/variables' as variables;
 @use 'misc';
 @use '../mixins';
 

package/dist/styles/{@core/scss → core}/base/placeholders/_vertical-nav.scss

@@ -1,5 +1,5 @@
 @use '../mixins';
-@use '../../../../assets/scss/variables/template' as variables;
+@use '../../../core/template/variables' as variables;
 @use 'vuetify/lib/styles/tools/states' as vuetifyStates;
 
 %nav-header-action {

package/dist/styles/{@core/scss → core}/base/skins/_bordered.scss

@@ -1,6 +1,6 @@
 @use 'sass:map';
 @use '../mixins';
-@use '../../../../assets/scss/variables/template' as variables;
+@use '../../../core/template/variables' as variables;
 @use '../utils';
 
 $header: '.layout-navbar';

package/dist/styles/{@core/scss → core}/template/_components.scss

@@ -1,9 +1,9 @@
 @use 'sass:list';
 @use 'sass:map';
 @use '../base/mixins';
-@use '../../../@layouts/styles/mixins' as layoutsMixins;
-@use '../../../assets/scss/variables/template' as variables;
-@use '../../../assets/scss/variables/vuetify';
+@use '../../layouts/mixins' as layoutsMixins;
+@use '../../assets/scss/variables/template' as variables;
+@use '../../assets/scss/variables/vuetify';
 
 //  Autocomplete
 .v-input--density-compact .v-field--variant-plain,

package/dist/styles/{@core/scss → core}/template/_vertical-nav.scss

@@ -1,4 +1,4 @@
-@use '../../../assets/scss/variables/template' as variables;
+@use '../../assets/scss/variables/template' as variables;
 @use '../base/mixins';
 
 .layout-nav-type-vertical {

package/dist/styles/{@core/scss → core}/template/placeholders/_default-layout-vertical-nav.scss

@@ -1,4 +1,4 @@
-@use '../../../../assets/scss/variables/template' as variables;
+@use '../../../core/template/variables' as variables;
 
 %default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled {
   // If navbar is contained => Squeeze navbar content on scroll

package/dist/styles/{@core/scss → core}/template/skins/_bordered.scss

@@ -1,6 +1,6 @@
 @use 'sass:map';
 @use '../../base/mixins';
-@use '../../../../assets/scss/variables/template' as variables;
+@use '../../../core/template/variables' as variables;
 
 $header: '.layout-navbar';
 

package/dist/styles/{@layouts/styles → layouts}/_dashboard-layout.scss

@@ -2,7 +2,7 @@
 @use 'rtl';
 @use 'placeholders';
 @use 'mixins';
-@use '../../assets/scss/variables/template' as variables;
+@use '../assets/scss/variables/template' as variables;
 
 html,
 body {

package/dist/styles/{@layouts/styles → layouts}/_mixins.scss

@@ -1,5 +1,5 @@
 @use 'placeholders';
-@use '../../assets/scss/variables/template' as variables;
+@use '../assets/scss/variables/template' as variables;
 
 @mixin rtl {
   @if variables.$enable-rtl-styles {

package/dist/styles/{@layouts/styles → layouts}/_placeholders.scss

@@ -1,5 +1,5 @@
 // placeholders
-@use '../../assets/scss/variables/template' as variables;
+@use '../assets/scss/variables/template' as variables;
 
 %boxed-content {
   @at-root #{&}-spacing {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@winchsa/ui",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "type": "module",
   "private": false,
   "publishConfig": {
@@ -52,7 +52,7 @@
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-vue": "^9.32.0",
     "sass": "1.86.0",
-    "typescript": "5.5.4",
+    "typescript": "^5.8.3",
     "unbuild": "^3.0.0",
     "vite": "^4.5.14",
     "vite-plugin-vuetify": "1.0.2",
@@ -62,16 +62,8 @@
   "scripts": {
     "dev": "vite",
     "build": "unbuild",
-    "test": "vitest --run",
     "lint": "eslint \"**/*.{ts,vue,mjs,json}\"",
     "lint:fix": "eslint \"**/*.{ts,vue,mjs,json}\" --fix",
-    "version:patch": "pnpm version patch --no-git-tag-version",
-    "version:minor": "pnpm version minor --no-git-tag-version",
-    "version:major": "pnpm version major --no-git-tag-version",
-    "publish:patch": "pnpm run version:patch && git add package.json && git commit -m \"chore: bump version\" && git push origin master",
-    "publish:minor": "pnpm run version:minor && git add package.json && git commit -m \"chore: bump version\" && git push origin master",
-    "publish:major": "pnpm run version:major && git add package.json && git commit -m \"chore: bump version\" && git push origin master",
-    "release": "pnpm run build && pnpm publish",
-    "release:dry-run": "pnpm run build && pnpm publish --dry-run"
+    "release": "pnpm version patch && pnpm run build && git add . && git commit -m \"chore: release v$(node -p \"require('./package.json').version\")\" && git tag v$(node -p \"require('./package.json').version\") && git push origin master --tags && pnpm publish"
   }
 }