Como abandonamos o uso do Styled-System para criar componentes e inventamos nossa própria bicicleta

Como tudo começou

• trabalho desconfortável com pontos de interrupção;
• falta de capacidade de escrever estilos para o foco do estado, foco etc;
• O mecanismo de trabalhar com tópicos nos pareceu não ser flexível o suficiente.

O que é o Atomize (brevemente)

• a capacidade de usar variáveis ​​do tópico em propriedades css compostas;
• suporte para pairar e quaisquer outras pseudo-classes;
• aliases curtos para cada propriedade (como emmet);
• a capacidade de especificar estilos para um ponto de interrupção específico, mantendo a legibilidade da marcação;
• interface minimalista.

• criar componentes que suportem CSS e temas atômicos;
• criando widgets para edição interativa no projeto Quarkly.

Atomize as instruções de uso

npm i react react-dom styled-components @quarkly/atomize @quarkly/theme

import atomize from '@quarkly/atomize';
 
const MyBox = atomize.div();

ReactDOM.render(<MyBox bgc="red" />, root);

const MySuperComponent = ({ className }) => {
   // some logic here
   return <div className={className} />;
};
 
const MyWrappedComponent = atomize(MySuperComponent);

Trabalhar com temas

import Theme from "@quarkly/theme";
 
const theme = {
   colors: {
       dark: "#04080C",
   },
};
export const MyComp = () => (
   <Theme>
       <Box bgc="--colors-dark" height="100px" width="100px" />
   </Theme>
);

import Theme from "@quarkly/theme";
 
const theme = {
   colors: {
       dark: "#04080C",
   },
   borders: {
       dark: "5px solid --colors-dark",
   },
};
export const MyComp = () => (
   <Theme>
       <Box border="--borders-dark" height="100px" width="100px" />
   </Theme>
);

import Theme from "@quarkly/theme";
 
const theme = {
   colors: {
       dark: "#04080C",
   },
};
export const MyComp = () => (
   <Theme>
       <Box bgc="--dark" height="100px" width="100px" />
   </Theme>
);

import Theme from "@quarkly/theme";
 
const theme = {
   breakpoints: {
       sm: [{ type: "max-width", value: 576 }],
       md: [{ type: "max-width", value: 768 }],
       lg: [{ type: "max-width", value: 992 }],
   },
   colors: {
       dark: "#04080C",
   },
   borders: {
       dark: "5px solid --colors-dark",
   },
};
export const MyComp = () => (
   <Theme>
       <Box
           md-bgc="--dark"
           border="--borders-dark"
           height="100px"
           width="100px"
       />
   </Theme>
);

Efeitos

const MySuperButton = atomize.button({
 effects: {
   hover: ":hover",
   focus: ":focus",
   active: ":active",
   disabled: ":disabled",
 },
});

ReactDOM.render(<MySuperButton hover-bgc="blue" />, root);

ReactDOM.render(<MySuperButton md-hover-bgc="blue" />, root);

Alguns exemplos

• Um componente simples que mostra todos os recursos da biblioteca ;
• exemplo mais complexo com um cartão de pokemon .

Mas isso não é tudo

export default atomize(PokemonCard)(
 {
   name: "PokeCard",
   effects: {
     hover: ":hover",
   },
   description: {
     // past here description for your component
     en: "PokeCard — my awesome component",
   },
   propInfo: {
     // past here props description for your component
     name: {
       control: "input",
     },
   },
 },
 { name: "pikachu" }
);

• efeitos - define pseudo-classes do navegador (foco, foco, etc);
• descrição - uma descrição do componente que aparecerá quando o cursor passar o mouse sobre seu nome;
• propInfo - configuração dos controles que serão exibidos no painel direito (guia props).

propInfo: {
   yourCustomProps: { //  
       description: { en: "test" }, //    
       control: "input" //  
   }
}

• entrada
• selecionar
• cor
• Fonte
• sombra
• transição
• transformar
• filtro,
• fundo
• ícone da caixa de seleção,
• ícone de rádio,
• grupo de rádio
• caixa de seleção.

E agora a competição!