कैसे हम घटकों बनाने के लिए स्टाइल-सिस्टम का उपयोग छोड़ दिया और अपनी खुद की बाइक का आविष्कार किया

ये सब कैसे शुरू हुआ

• ब्रेकपॉइंट के साथ असहज काम;
• राज्य होवर, फोकस आदि के लिए शैलियों को लिखने की क्षमता की कमी;
• विषयों के साथ काम करने का तंत्र हमें लचीला नहीं लग रहा था।

एटमाइज़ क्या है (संक्षेप में)

• समग्र सीएसएस-गुणों में विषय से चर का उपयोग करने की क्षमता;
• हॉवर और किसी भी अन्य छद्म वर्गों के लिए समर्थन;
• प्रत्येक संपत्ति के लिए कम उपनाम (जैसा कि एम्मेट में);
• मार्कअप की पठनीयता को बनाए रखते हुए एक विशिष्ट ब्रेकपॉइंट के लिए शैलियों को निर्दिष्ट करने की क्षमता;
• न्यूनतम इंटरफ़ेस।

• ऐसे घटक बनाना जो परमाणु सीएसएस और विषयों का समर्थन करते हैं;
• क्वार्कली प्रोजेक्ट में इंटरैक्टिव एडिटिंग के लिए विजेट्स बनाना।

उपयोग के लिए निर्देश जारी करें

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

थीम के साथ काम करें

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

प्रभाव

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

कुछ उदाहरण

• एक साधारण घटक जो पुस्तकालय की सभी विशेषताओं को दर्शाता है ;
• एक पोकेमॉन कार्ड के साथ और अधिक जटिल उदाहरण ।

लेकिन वह सब नहीं है

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

• प्रभाव - ब्राउज़र छद्म वर्गों (हॉवर, फ़ोकस आदि) को परिभाषित करता है;
• विवरण - घटक का एक विवरण जो कर्सर को उसके नाम पर हो जाने पर दिखाई देगा;
• propInfo - नियंत्रणों का कॉन्फ़िगरेशन जो दाहिने पैनल (प्रॉप्स टैब) में प्रदर्शित किया जाएगा।

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

• इनपुट
• चुनते हैं
• रंग
• फ़ॉन्ट
• साया
• संक्रमण
• परिवर्तन
• फिल्टर,
• पृष्ठभूमि
• चेकबॉक्स-चिह्न,
• रेडियो आइकन,
• रेडियो-समूह
• चेकबॉक्स।

और अब प्रतियोगिता!