@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/typings2. 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>