@colobri-ui/typings

With @colibri-ui/typings it is possible to transform any component into a declarative component (based on the declarative interface principles).

With the example below, we can see the real application of this structure in a project for a company that I consulted for.

1. installation

yarn add @colibri-ui/typings

2. guide

create a react-app

yarn create react-app --template typescript

create a componet named Image

components/Image/index.tsx

import React from "react";

// import the interface RestTypes and insert into props
// from component
import { RestTypes } from "@colibri-ui/typings";
import { Img } from "./styles";

export type ImageProps = {
  src: string;
  alt: string;
  objectFit?: "fill" | "contain" | "cover" | "none" | "scale-down";
  className?: string;
} & RestTypes; // <-- this module

export const Image = ({ src, alt, className, ...restProps }: ImageProps) => (
  <Img
    alt={alt}
    src={src}
    {...(className ? { className: className } : {})}
    {...restProps} // <-- pass the restProps to style layer
  />
);

components/Image/styles.ts

import styled, { css } from "styled-components";
import { ImageProps } from "."; // call the props from image component

// import the method renderRestTypes and pass the props from ImageProps
import { renderRestTypes } from "@colibri-ui/typings";

export const Img = styled.img<ImageProps>`
  ${({
    objectFit,
    _layout,
    _positioning,
    _sizing,
    _spacing,
    _flex,
  }) => css`
    ${!!objectFit && `object-fit: ${objectFit}`};

    // call the method to render the typings passed in image props
    ${renderRestTypes(
      { _spacing, _sizing, _layout, _positioning, _flex }
    )}
  `}
`;

3. real use case

<Flex
  _sizing={{
    height: "100vh",
    width: "100%",
  }}
>
  <Content
    _sizing={{
      height: "100%",
      width: "100%",
    }}
  >
    <Image
      //default properties
      src="https://avatars.githubusercontent.com/u/82906575?s=200&v=4"
      alt="image description"
      objectFit="cover"
      // declarative styles properties
      _sizing={{
        height: "100%",
        width: "100%",
      }}
    />
  </Content>
</Flex>