@corentin-e/translui

Une bibliothèque de composants Vue 3 avec un système de design personnalisé.

Installation

npm install @corentin-e/translui

Prérequis

Votre projet doit avoir ces dépendances installées :

npm install vue@^3.5.0 tailwindcss@^4.0.0 boxicons@^2.1.4

Usage

1. Importer les styles CSS (OBLIGATOIRE)

Dans votre fichier principal (main.ts ou main.js) :

// Importer les styles de translUI
import '@corentin-e/translui/styles'

// Importer les icônes boxicons (requis pour IconBase)
import 'boxicons/css/boxicons.min.css'

2. Importer les composants et constantes

import { 
  ProgressBar, 
  IconBase,
  iconsAction,
  iconsInfos,
  ProgressState 
} from '@corentin-e/translui'

3. Utiliser dans vos composants

Exemple avec ProgressBar :

<template>
  <ProgressBar 
    :runProgress="true"
    :hasPercent="true"
    :hasIconState="true"
    :progressState="ProgressState.Loading"
  />
</template>

<script setup lang="ts">
import { ProgressBar, ProgressState } from '@corentin-e/translui'
</script>

Exemple avec IconBase :

<template>
  <IconBase 
    :icon="iconsAction.checkCircle"
    size="lg"
    color="text-lu-g"
  />
</template>

<script setup lang="ts">
import { IconBase, iconsAction } from '@corentin-e/translui'
</script>

Développement

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Run Unit Tests with Vitest

npm run test:unit

Run End-to-End Tests with Cypress

npm run test:e2e:dev

This runs the end-to-end tests against the Vite development server. It is much faster than the production build.

But it's still recommended to test the production build with test:e2e before deploying (e.g. in CI environments):

npm run build
npm run test:e2e

Lint with ESLint

npm run lint