Wie wir auf die Verwendung des Styled-Systems zur Herstellung von Komponenten verzichteten und unser eigenes Fahrrad erfanden

Wie alles begann

• unbequeme Arbeit mit Haltepunkten;
• mangelnde Fähigkeit, Stile für den Zustand Hover, Fokus usw.;
• Der Mechanismus der Arbeit mit Themen schien uns nicht flexibel genug.

Was ist Atomize (kurz)

• die Fähigkeit, Variablen aus dem Thema in zusammengesetzten CSS-Eigenschaften zu verwenden;
• Unterstützung für Hover und andere Pseudoklassen;
• kurze Aliase für jede Eigenschaft (wie in emmet);
• die Fähigkeit, Stile für einen bestimmten Haltepunkt anzugeben, während die Lesbarkeit des Markups erhalten bleibt;
• minimalistische Schnittstelle.

• Erstellen von Komponenten, die atomares CSS und Themen unterstützen;
• Erstellen von Widgets für die interaktive Bearbeitung im Quarkly-Projekt.

Gebrauchsanweisung zerstäuben

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

Arbeite mit Themen

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

Auswirkungen

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

Einige Beispiele

• Eine einfache Komponente, die alle Funktionen der Bibliothek anzeigt .
• komplexeres Beispiel mit einer Pokemon-Karte .

Aber das ist nicht alles

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

• Effekte - Definiert Browser-Pseudoklassen (Hover, Fokus usw.).
• description - Eine Beschreibung der Komponente, die angezeigt wird, wenn sich der Cursor über dem Namen befindet.
• propInfo - Konfiguration der Steuerelemente, die im rechten Bereich angezeigt werden (Registerkarte Requisiten).

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

• Eingang
• wählen
• Farbe
• Schriftart
• Schatten
• Überleitung
• verwandeln
• Filter,
• Hintergrund
• Kontrollkästchen-Symbol,
• Radiosymbol,
• Radiogruppe
• Kontrollkästchen.

Und jetzt die Konkurrenz!