@uxhispam/kenos-web

Kénos Web

Kénos Web es una colección de componentes de React que te permiten construir aplicaciones web modernas y atractivas con facilidad destinado para Telefónica Hispam.

Contenido

• Kénos Web
  • Contenido
  • ¿Qué puedes encontrar en Kénos?
  • Instalación
    • Utilizando yarn
    • Utilizando npm
  • Configuración inicial
  • Desarrollo
  • Contribución
  • Kénos en plataformas nativas

¿Qué puedes encontrar en Kénos?

Desde botones hasta elementos complejos, la librería Kénos ofrece una amplia variedad de componentes altamente personalizables y fáciles de usar que te ayudarán a mejorar la usabilidad y el atractivo visual de tus proyectos de React.

Instalación

Solamente con los comandos de instalación en tu proyecto React podrás utilizar esta librería.

Utilizando yarn

yarn add @uxhispam/kenos-web

Utilizando npm

npm install @uxhispam/kenos-web

Configuración inicial

Antes de usar cualquiera de nuestros componentes, debes agregar <ThemeContextProvider> en la raíz de su aplicación React. Aquí hay un ejemplo completo de un formulario con dos campos de texto y un botón de envío:

import {createRoot} from 'react-dom/client';
// Import Kenos styles. Depending on the bundler you use, you may need to import it in a different way.
import '@uxhispam/kenos-web/css/kenos.css';

// Use kenos components
import {
  ThemeContextProvider,
  Form,
  Box,
  Stack,
  TextField,
  EmailField,
  ButtonLayout,
  ButtonPrimary,
  alert,
  getMovistarSkin,
} from '@uxhispam/kenos-web';

const App = () => (
  <Form
    onSubmit={(formData) =>
      alert({
        title: 'This is your data',
        message: JSON.stringify(formData, null, 2),
      })
    }
  >
    <Box padding={16}>
      <Stack space={16}>
        <TextField name="name" label="Name" />
        <EmailField name="email" label="Email" />
        <ButtonLayout>
          <ButtonPrimary submit>Send</ButtonPrimary>
        </ButtonLayout>
      </Stack>
    </Box>
  </Form>
);

const kenosTheme = {
  skin: getMovistarSkin(),
  i18n: {locale: 'es-AR', phoneNumberFormattingRegionCode: 'AR'},
};

const container = document.getElementById('app');
const root = createRoot(container);
root.render(
  <ThemeContextProvider theme={kenosTheme}>
    <App />
  </ThemeContextProvider>
);

El prop theme en ThemeContextProvider es obligatorio, y puedes usarlo para configurar algunos aspectos de la biblioteca. Hay múltiples configuraciones, pero los únicos dos campos obligatorios son skin e i18n. Leer el theme config doc para más información.

:advertencia: Por lo general, el objeto theme es constante y no necesitará cambiar dinámicamente en su aplicación, en ese caso recomendamos extraerlo a una variable const externa fuera del componente, de esta manera en la referencia del objeto será la misma en cada renderizado. Si por alguna razón el theme debe ser dinámico en su app, considera memorizarla (por ejemplo, con el hook React.useMemo).

Desarrollo

• yarn test: run tests
• yarn test-acceptance: run acceptance tests headless (you need to start storybook first)
• yarn test-acceptance --ui: run acceptance tests with ui (you need to start storybook first)
• yarn lint: check codestyle
• yarn ts-check: check static types
• yarn build: build package
• yarn storybook: starts storybook
• yarn playroom: starts playroom

Contribución

Para detalles sobre cómo contribuir al proyecto, consulta el archivo CONTRIBUTING.

Kénos en plataformas nativas

• Kénos Native