Agregar variantes de un componente base

Se explica el flujo para agregar variantes a un componente base a la librería.

Prerequisitos

Acciones previas antes de implementar un desarrollo nuevo en la librería

• Clonar el repositorio de Inlaze-ui-react perteneciente a la organización de github sport-enlace-sas

• Instalar dependencias con npm

• Ejecutar el comando npm run libs:storybook para ir visualizando y documentando el componente a agregar.

• Que ya exista un componente base creado.

• Identificar una más props con las cuales se puede sacar variantes desde el componente base

Casos de uso

• Crear variantes de un componente base ya existente.

Paso a paso para el ciclo de vida completa en la adición de un componente nuevo

Paso 1: Agregar un nuevo componente base

1. Determinar el {componentType} si el componente es UIkit o CompoundComponents, para saber si se guarda en common/UiKit o en common/CompundComponents

2. Ejecutar el comando del CLI de NX: npx nx g @nx/react:component libs/src/lib/common/{ComponentType}/{PluralComponentName}/{SingularComponentVariantName}/{SingularComponentVariantName}

3. Una vez creado el componente se crea en la historia para que se pueda visualizar en el storybook ejecutando el comando: npm run libs:stories

Step 2: Desarrollar el componente Base

Una variante son versiones que reutilizan un componente base donde varia una prop tipo union type o enum.

type ComponentProps = {
  size: "s" | "l" | "xl"
  otherProp:string
}

type ExampleComponenteBaseProps = BaseComponentProps<ComponentProps>

function ComponentBase({size, otherProp}: ExampleComponenteBaseProps){
  if(size === "s") return otherProp.toLowerCase()
  if(size === "l") return otherProp
  if(size === "xl") return otherProp.toUpperCase()
}

En este caso solo se pueden definir variantes de size

type variantProps = Omit<ExampleComponenteBaseProps , "size">;

function VariantL(props: variantProps) {
  return <ComponentBase {...props} size="s"/>;
}

function VariantS(props: variantProps) {
  return <ComponentBase {...props} size="l" />;
}

function VariantXL(props: variantProps) {
  return <ComponentBase {...props} size="xl" />;
}

Las props deben ser todas las del componente base menos la prop elegida como variante, ya que esta es pasada al momento de reutilizarlo. Y no tiene sentido exponer al cliente una prop que por más que se modifique no va a tener efecto en la variante.

Paso 3: Desarrollo de tests unitarios

Dado que esta librería tiene como propósito ser usado en los múltiples proyectos de la organización, especialmente los componentes base deben ser testeados dado que al momento de hacerles mantenimiento se debe garantizar que las nuevas features no afecten el desarrollo existente o de hacerlo sea intencionalmente y se reporte en el breaking change en la versión a publicar.

Entonces los test unitarios y no las pruebas manuales del desarrollador deben ser las que identifiquen el impacto que puede llegar a tener una actualización en todos los clientes que lo consumen.

Como factor a tener en cuenta en la librería es importante que los tests prueben que:

1. Si el children es cerrado se debe poder probar que el cliente tiene acceso a los atributos nativos HTML de la etiqueta contenedora.

2. Se debe poder probar el desacoplamiento entre el html y las funcionalidades del componente, es decir que el cliente puede definir cualquier HTML como children y ese children puede acceder a las funcionaldiades que el componente necesita para cumplir su responsabildiad.

3. Probar el comportamiento de las funciones específicas propias del componente como hooks y utilidades.

Paso 4: Validar que el storybook halla documentado claramente como un cliente puede usar el componente.

El storybook debe tener un control por cada una de las props y el ejemplo de como el componente se ve afectado al modificar interactivamente esos controles.

Entorno a como configurar los controles del storybook véase: Storybook argtypes

Conclusión

Luego de conocer la receta de como crear las variantes componete base, el paso siguiente es ver la receta sobre como crear un sus variantes.