كيف تخلينا عن استخدام نظام التصميم لتصميم مكونات واختراع دراجتنا الخاصة

كيف بدأ كل شيء

• عمل غير مريح مع نقاط التوقف ؛
• الافتقار إلى القدرة على كتابة الأنماط لتحوم الدولة ، والتركيز ، وما إلى ذلك ؛
• بدا لنا أن آلية التعامل مع المواضيع ليست مرنة بما يكفي.

ما هو Atomize (لفترة وجيزة)

• القدرة على استخدام المتغيرات من الموضوع في خصائص css المركبة ؛
• دعم التحويم وأي فئات زائفة أخرى ؛
• الأسماء المستعارة القصيرة لكل عقار (كما في emmet) ؛
• القدرة على تحديد الأنماط لنقطة توقف محددة ، مع الحفاظ على قراءة الترميز ؛
• واجهة أضيق الحدود.

• إنشاء مكونات تدعم CSS الذرية والمواضيع ؛
• إنشاء أدوات للتحرير التفاعلي في مشروع Quarkly.

تفتيت تعليمات الاستخدام

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 - تكوين عناصر التحكم التي سيتم عرضها في اللوحة اليمنى (علامة التبويب props).

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

• إدخال
• تحديد
• اللون
• الخط
• ظل
• انتقال
• تحول
• منقي،
• خلفية
• رمز خانة الاختيار ،
• رمز الراديو ،
• مجموعة راديو
• خانة الاختيار.

والآن المنافسة!