@profitliga/ui

UI Kit

Vue 3 UI component library with TypeScript and SCSS support.

View Storybook Library

Storybook Library

Installation

yarn @profitliga/ui

Usage

Importing Components

import { Button } from '@profitliga/ui/components'
import '@profitliga/ui/style.css'

Using Components

<script setup lang="ts">
import { Button } from '@profitliga/ui/components'

const handleClick = () => {
	console.log('Button clicked!')
}
</script>

<template>
	<div>
		<Button @click="handleClick"> Click Me </Button>

		<Button variant="secondary" size="large"> Secondary Button </Button>

		<Button variant="outline" :disabled="true"> Disabled Button </Button>
	</div>
</template>

Importing Icons

Each icon is a separate module, so only the icons you import end up in your bundle.

// From the barrel (tree-shakable)
import { BellIcon } from '@profitliga/ui/icons'

// Or directly by path (default export)
import BellIcon from '@profitliga/ui/icons/BellIcon'

Adding an icon: put <Name>Icon.vue into src/icons/monochrome or src/icons/colored and run yarn icons:generate (the build does this automatically).

Using Composables

<script setup lang="ts">
import { useCounter } from '@profitliga/ui/utils'

const { count, increment, decrement, reset, isAtMax, isAtMin } = useCounter({
	initialValue: 0,
	min: 0,
	max: 10
})
</script>

<template>
	<div>
		<p>Count: {{ count }}</p>
		<button @click="increment" :disabled="isAtMax">+</button>
		<button @click="decrement" :disabled="isAtMin">-</button>
		<button @click="reset">Reset</button>
	</div>
</template>

Customization with SCSS

You can import and customize SCSS variables in your project:

// Override default variables
$primary-color: #your-color;
$border-radius: 0.5rem;

// Import ui-kit styles
@use '@profitliga/ui/styles/variables' as *;
@use '@profitliga/ui/styles/mixins' as *;

Available SCSS Variables

// Colors
$primary-color: #3b82f6
$secondary-color: #64748b
$text-color: #1e293b
$background-color: #ffffff
$border-color: #e2e8f0

// Spacing
$spacing-xs: 0.25rem
$spacing-sm: 0.5rem
$spacing-md: 1rem
$spacing-lg: 1.5rem
$spacing-xl: 2rem

// Border radius
$border-radius: 0.375rem
$border-radius-sm: 0.25rem
$border-radius-lg: 0.5rem

Available Mixins

@use '@profitliga/ui/styles/mixins' as *;

.my-component {
	@include flex-center;
	@include hover-lift;
	@include responsive('tablet') {
		// tablet styles
	}
}

Components

Button

A versatile button component with multiple variants and sizes.

Props:

• variant: 'primary' | 'secondary' | 'outline' (default: 'primary')
• size: 'small' | 'medium' | 'large' (default: 'medium')
• disabled: boolean (default: false)

Events:

• click: Emitted when button is clicked (with MouseEvent)

Composables

useCounter

A composable for managing counter state with min/max constraints.

Options:

• initialValue: Starting value (default: 0)
• min: Minimum allowed value (default: -Infinity)
• max: Maximum allowed value (default: Infinity)

Returns:

• count: Reactive counter value
• increment(): Increment counter
• decrement(): Decrement counter
• reset(): Reset to initial value
• set(value): Set to specific value
• isAtMin: Boolean indicating if at minimum
• isAtMax: Boolean indicating if at maximum

Development

# Install dependencies
yarn

# Build library
yarn build

# Type check
yarn type-check

License

MIT