Taskship Design System

Biblioteca Vue do design system do ecossistema Taskship.

O repositório agora e restrito ao design system: tokens, tema, identidade multitenant, acessibilidade, validacao de conteudo e componentes organizados em Atomic Design. O app de backoffice deixou de ser o foco deste pacote e foi substituido por uma showcase tecnica local.

Stack

• Vue 3 + TypeScript
• Vite em modo biblioteca
• Atomic Design
• Tema claro/escuro, acessibilidade e identidade configuravel por tenant
• Base Taskship alinhada ao manual: Dosis para hierarquia e corpo, Capriola para display de marca, e a paleta Emerald Blue / Green Leaf / Midnight Green / White / Platinum

Estrutura

• src/index.ts: API publica do pacote
• src/showcase: vitrine tecnica local para validacao visual
• src/design-system/atoms: primitivas visuais
• src/design-system/molecules: composicoes pequenas com comportamento
• src/design-system/organisms: blocos ricos reutilizaveis
• src/design-system/assets: assets oficiais do produto, incluindo o logo Taskship empacotado na lib
• src/design-system/theme: tokens, tema, acessibilidade e identidade
• src/config: configuracoes base de tenant identity
• src/composables: contratos reutilizaveis de validacao
• src/security: saneamento e regras declarativas de conteudo

Scripts

• npm run dev: abre a showcase local do design system
• npm run build: gera a biblioteca em dist/ e emite tipos .d.ts
• npm run build:demo: gera a showcase estaticamente
• npm run preview: faz preview da showcase buildada em modo demo
• npm pack: gera o pacote local a partir do dist/ produzido pelo build

Release

• Qualquer push para main dispara o workflow .github/workflows/publish.yml.
• O workflow calcula a proxima versao com base na ultima release publicada ou tag vX.Y.Z, publica via npm Trusted Publishing, cria a tag vX.Y.Z e abre uma GitHub Release com notas geradas automaticamente.
• Quando executado manualmente via workflow_dispatch, o workflow permite escolher o release_type entre patch, minor e major.
• No npm, registre um trusted publisher para instantsoftgithub/TaskshipDS apontando para publish.yml.
• O campo repository.url do package.json precisa bater exatamente com o repo para o trusted publishing funcionar. Aqui usamos o formato canônico git+https://github.com/instantsoftgithub/TaskshipDS.git.

Consumo

Exemplo de uso em outro projeto Vue:

import { createApp } from 'vue'
import App from './App.vue'
import TaskshipDesignSystem from '@taskship/design-system'
import '@taskship/design-system/styles.css'

createApp(App).use(TaskshipDesignSystem).mount('#app')

Se preferir o alias classico, @taskship/design-system/style.css aponta para o mesmo arquivo.

Importacao direta de componentes:

import {
  DsButton,
  DsField,
  DsSelect,
  DsDataTable,
  DsLogo,
  DsPage,
  DsPlatformMenu,
  DsPlatformShell,
  defaultPlatformMenuConfig,
  normalizePlatformMenuConfig,
  DsDrawer,
  DsBottomSheet,
  taskshipLogoGallery,
  initializeTenantIdentity,
  initializeAccessibilityPreferences,
} from '@taskship/design-system'

O menu principal da plataforma nasce de um YAML dedicado. O pacote exporta o parser e o config padrao:

import menuYaml from './menu.yml?raw'
import { DsPlatformShell, normalizePlatformMenuConfig } from '@taskship/design-system'

const menuConfig = normalizePlatformMenuConfig(menuYaml)

<DsPlatformShell :menu="menuConfig" active-path="/operacoes/filas">
  <DsPage>...</DsPage>
</DsPlatformShell>

O menu inclui um controle no rodape para o usuario alternar entre full, rail e compact. Quando usado com DsPlatformShell, o offset do conteudo e atualizado automaticamente; o shell tambem emite update:variant para a plataforma persistir a preferencia, se necessario.

Para tenants com marca propria, o slot brand personaliza as superficies full e rail, e o slot compact-brand personaliza somente o acionador reduzido do modo compact.

O pacote tambem exporta DsLogo, taskshipLogoSources e taskshipLogoGallery, com as variantes oficiais do logo organizadas por superficie e layout.

Paginas de plataforma devem usar DsPage em modo fluido, sem maxWidth, para ocupar 100% da area visivel disponivel. O slot profile posiciona a referencia do usuario no canto superior direito do viewport util em desktop e quebra para uma linha propria no mobile.

<DsPage
  eyebrow="Taskship Platform"
  title="Backoffice"
  description="Gerencie operacoes, acompanhe indicadores e navegue pelos modulos liberados."
>
  <template #profile>
    <UserProfileMenu />
  </template>

  <DashboardCards />
</DsPage>

Exemplo de uso:

<DsLogo variant="horizontal-light" :width="180" alt="Taskship" />
<DsLogo variant="mark-sm" decorative />

Se o consumidor preferir controlar o bootstrap manualmente:

initializeTenantIdentity()
initializeAccessibilityPreferences()

Principios do pacote

• Branding por tenant altera tokens e identidade, nao contratos de componente.
• Layout base de paginas, drawers e bottom sheets nasce do mesmo contrato de viewport, espacamento e safe area.
• O menu principal da plataforma nasce de um YAML dedicado, com tres modos visuais, controle de modo pelo usuario e destaque automatico da rota ativa.
• Tema claro, escuro e preferencias assistidas nascem da mesma base semantica.
• Validacao no frontend melhora UX e seguranca de entrada, mas nao substitui backend.
• Tooltips e overlays ricos devem explicar o componente em linguagem humana.
• Data grids precisam suportar filtros tipados, ordenacao, selecao e colunas reordenaveis por drag.