Comment nous avons abandonné l'utilisation du Styled-System pour créer des composants et inventé notre propre vélo

Comment tout a commencé

• travail inconfortable avec des points d'arrêt;
• manque de capacité à écrire des styles pour le survol de l'état, la concentration, etc.;
• Le mécanisme de travail sur des sujets ne nous a pas semblé suffisamment flexible.

Qu'est-ce qu'Atomize (brièvement)

• la possibilité d'utiliser des variables du sujet dans les propriétés css composites;
• prise en charge du survol et de toutes les autres pseudo-classes;
• alias courts pour chaque propriété (comme dans emmet);
• la possibilité de spécifier des styles pour un point d'arrêt spécifique, tout en maintenant la lisibilité du balisage;
• interface minimaliste.

• créer des composants qui prennent en charge le CSS et les thèmes atomiques;
• créer des widgets pour l'édition interactive dans le projet Quarkly.

Atomiser les instructions d'utilisation

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

Travailler avec des thèmes

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

Effets

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

Quelques exemples

• Un composant simple qui montre toutes les fonctionnalités de la bibliothèque ;
• exemple plus complexe avec une carte pokemon .

Mais ce n'est pas tout

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

• effets - définit les pseudo-classes du navigateur (survol, focus, etc.);
• description - une description du composant qui apparaîtra lorsque le curseur survolera son nom;
• propInfo - configuration des contrôles qui seront affichés dans le panneau de droite (onglet accessoires).

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

• contribution
• sélectionner
• Couleur
• Police de caractère
• ombre
• transition
• transformer
• filtre,
• Contexte
• checkbox-icon,
• radio-icône,
• groupe radio
• case à cocher.

Et maintenant la compétition!