Winch UI

A Vue 3 + Vuetify UI component library for Winch 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

pnpm add @winchsa/ui

Basic Usage

// main.ts
import { createApp } from 'vue'
import '@winchsa/ui/core/template/index.scss'; // <- WINCH styles
import './assets/scss/styles.scss'; //<- overwritten styles

const app = createApp(App)
app.mount('#app')

Configuration

Vite Configuration

To use the Winch UI package in your Vite project, add the following configuration to your vite.config.ts:

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))
    }
  }
})

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

cd playground
pnpm install
pnpm dev

Building and Installing Locally in an Actual Project

This script compiles the UI package, generates a tarball, and installs it into your project for local development and testing.

 ./build-and-install.sh

Release Process

The bump command in package.json does the following:

1. pnpm version patch: Increments the patch version of the package (e.g., from 0.1.9 to 0.1.10).
2. pnpm run build: Builds the project.
3. git add .: Stages all changes for commit.
4. git commit -m "chore: release v$(node -p \"require('./package.json').version\")": Creates a new commit with a message indicating a release, including the new version number.

Publishing

After running pnpm run bump, go to GitHub → Releases and create a new release based on the commit generated. This will trigger the publish.yaml GitHub Actions workflow, which handles the actual publishing process