Cómo abandonamos el uso del Styled-System para crear componentes e inventamos nuestra propia bicicleta

Cómo todo empezó

• trabajo incómodo con puntos de interrupción;
• falta de la capacidad de escribir estilos para el estado de desplazamiento, enfoque, etc.
• El mecanismo de trabajar con temas no nos pareció lo suficientemente flexible.

Qué es atomizar (brevemente)

• la capacidad de usar variables del tema en propiedades css compuestas;
• soporte para hover y cualquier otra pseudo-clase;
• alias cortos para cada propiedad (como en emmet);
• la capacidad de especificar estilos para un punto de interrupción específico, mientras se mantiene la legibilidad del marcado;
• Interfaz minimalista.

• creando componentes que soporten CSS atómico y temas;
• creando widgets para edición interactiva en el proyecto Quarkly.

Atomice las instrucciones 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);

Trabajar con 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>
);

Efectos

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);

Algunos ejemplos

• Un componente simple que muestra todas las características de la biblioteca ;
• ejemplo más complejo con una tarjeta de pokemon .

Pero eso no es todo

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" }
);

• efectos - define pseudo-clases del navegador (hover, focus, etc.);
• descripción : una descripción del componente que aparecerá cuando el cursor se desplace sobre su nombre;
• propInfo : configuración de controles que se mostrarán en el panel derecho (pestaña accesorios).

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

• entrada
• Seleccione
• color
• fuente
• sombra
• transición
• transformar
• filtrar,
• antecedentes
• icono de casilla de verificación,
• icono de radio
• grupo de radio
• caja.

Y ahora la competencia!