Tipos utilitários

Leitura sugerida

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:
Formulário da Section 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:
Formulário da Section com label e descrição costumizadas

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.

Was this page helpful?
Can't find what you're looking for? Spot an error in the documentation? Get in touch with us on our Community Forum
Continue reading