Utility types

Leitura sugerida

• Conceitos: Section
• Codificando uma nova Section

Você já sabe que é fácil criar uma Section configurável na deco.cx. Neste post vamos detalhar todas as formas possíveis de declarar os types das props e como isso afeta o formulário que renderizamos no Admin da deco.cx.

Personalizando Sections

As Sections, como componentes Preact, aceitam props como seus primeiro argumento e usam esses valores em seus markups para exibir textos, imagens ou configurar algum comportamento.

Normalmente, essas props são passadas a partir de outro componente, mas quando você usa deco.cx essas props são configuradas no Admin, o que facilita usuários de negócios alterarem o conteúdo em seus Sites.

Para declarar como essas props serão configuradas você usa o Typescript type, especificando quais props e seus respectivos tipos como string , number , Array<T> , etc.

Exemplo:

• Configuração de Section em um site deco.cx.

 interface Props {
  título: string;
}

export default function LatestPosts({ title }: Props) {
  return (
    <div>
      <h1 class="font-bold">{title}</h1>
      <p>Esta é uma Section de exemplo</p>
    </div>
  );
} 

• Como fica o editor no Admin:

Tipos suportados

O editor aceita um subconjunto de tipos Typescript para configuração da Section. Esta é a lista de tipos suportados atualmente:

Tipos nativos

string

 export interface Props {
  title: string;
} 

number

 export interface Props {
  lineNumber: número;
} 

object

 export interface Props {
  address: {
    street: string;
    postalCode: string;
  };
} 

array

 export default {
   menuItems: Array<{ label: string; value: string }>;
} 

string options

 export interface Props {
  variant: "primary" | "secondary" | "tertiary";
} 

Tipos Especiais

Imagem

Este tipo renderiza um widget de upload de imagem no editor, possibilitando os usuários fazer upload de imagens.

O tipo é um wrapper para string , então a Section receberá a URL da imagem hospedada nos servidores da deco.cx.

Opcional: A deco.cx fornece um componente que otimiza o carregamento da imagens e pode ser usado em conjunto com esta propriedade.

Exemplo:

 import type { ImageWidget as Image } from "apps/admin/widgets.ts";

export interface props {
  bannerImg: Image;
} 

Vídeo

Semelhante à Imagem, as propriedades com este tipo serão editadas através de um widget com a possibilidade de upload de vídeos.

Exemplo de uso aqui.

 import type { VideoWidget as Video } from "apps/admin/widgets.ts";

export interface props {
  myVideo: Video;
} 

Enriquecendo o editor

Ao usar tipos nativos, o editor usará o nome do prop como a label padrão do formulário. Mas é possível personalizar isso usando tags JSDoc.

• Exemplo: Código da Section:

 export interface props {
  /** @title Numero de produtos */
  /** @description Total de produtos para mostrar na vitrine */
  count: number;
} 

• Editor:

As tags disponíveis são os campos compatíveis com JSON Schema, ou seja, @title , @description , @format entre outros. Por exemplo, para aceitar apenas e-mails:

 export interface props {
  /** @format email */
  color: string;
} 

Outros tipos de formatos válidos são: uri , color . Você pode ler mais sobre isso na documentação de Annotations.