Bagaimana kami meninggalkan penggunaan Sistem Styled untuk membuat komponen dan menciptakan sepeda kami sendiri

Bagaimana semua ini dimulai

• kerja tidak nyaman dengan breakpoints;
• kurangnya kemampuan untuk menulis gaya untuk negara melayang, fokus dll;
• Mekanisme kami menangani topik tampaknya tidak cukup fleksibel.

Apa itu Atomize (secara singkat)

• kemampuan untuk menggunakan variabel dari topik dalam properti css-komposit;
• dukungan untuk hover dan kelas pseudo lainnya;
• alias pendek untuk setiap properti (seperti di emmet);
• kemampuan untuk menentukan gaya untuk breakpoint tertentu, sambil mempertahankan keterbacaan markup;
• antarmuka minimalis.

• membuat komponen yang mendukung CSS atomik dan tema;
• membuat widget untuk pengeditan interaktif di proyek Quarkly.

Atomisasi instruksi untuk digunakan

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

Bekerja dengan tema

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

Efek

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

Beberapa contoh

• Komponen sederhana yang menunjukkan semua fitur perpustakaan ;
• contoh yang lebih kompleks dengan kartu pokemon .

Tapi itu belum semuanya

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

• efek - mendefinisikan kelas pseudo browser (melayang, fokus, dll);
• deskripsi - deskripsi komponen yang akan muncul ketika kursor melayang di atas namanya;
• propInfo - konfigurasi kontrol yang akan ditampilkan di panel kanan (props tab).

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

• memasukkan
• Pilih
• warna
• fonta
• bayangan
• transisi
• mengubah
• Saring,
• Latar Belakang
• ikon kotak centang,
• ikon radio,
• kelompok radio
• kotak centang.

Dan sekarang kompetisi!