ACHS Webkit UI

Este paquete proporciona un conjunto de componentes de UI para su uso en aplicaciones web de ACHS (Asociación Chilena de Seguridad). Está construido con React, TypeScript y Vite.

Instalación

npm install @achs/webkit
# o
pnpm add @achs/webkit

Uso

Aquí tienes un ejemplo de cómo usar un componente del paquete ACHS Webkit UI:

import React from 'react';
import { Button } from '@achs/webkit';

const App = () => {
  return (
    <div data-theme="salud">
      <h1>Bienvenido a ACHS Webkit UI</h1>
      <Button>Haz clic aquí</Button>
    </div>
  );
};

export default App;

Desarrollo

Esta plantilla proporciona una configuración mínima para que React funcione en Vite con HMR y algunas reglas de ESLint.

Actualmente, hay dos plugins oficiales disponibles:

• @vitejs/plugin-react usa Babel para Fast Refresh
• @vitejs/plugin-react-swc usa SWC para Fast Refresh

sobre manejo de estilos en css respecto al tema

varibles generales desde el tema que se pueden usar en hojas de estillos scss: --primary-color --secondary-color --complementary-color --texto-color --light --dark --disabled-color

por temas de lograr transparencia en shadows y otras propiedades con las variables generales del tema se decidio que las variables de colores ya no estan seteadas con los codigos de colores sin estar pasados por la funcion rgb de css ej: --primary-color: 39, 147, 62; para usar la variable en las hojas de estilos se debe usar con la funcion de rgb ej: background-color: var(--primary-color) ó background-color: rgba((var(--secondary-color)), 0.5);

Ampliando la configuración de ESLint

Si estás desarrollando una aplicación de producción, te recomendamos actualizar la configuración para habilitar reglas de lint con conocimiento de tipos:

export default tseslint.config({
  extends: [
    // Elimina ...tseslint.configs.recommended y reemplázalo con esto
    ...tseslint.configs.recommendedTypeChecked,
    // Alternativamente, usa esto para reglas más estrictas
    ...tseslint.configs.strictTypeChecked,
    // Opcionalmente, agrega esto para reglas estilísticas
    ...tseslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    // otras opciones...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})