Zeyad Etman
Home

Thoughts about software development and Life

  • Home
  • About
  • Gallery
  • Twitter
  • Github
  • Books
  • Notes
  • Create your own design system in ReactJS | بالعربي

    0 Views

    3 min read

    threadtechnicaldesign systemreactjsfrontend

    فى الثريد دى هتكلم عن ازاى بطبّق ال design system فى الفرونت اند.

    الثريد دى هتساعدك لو انت fullstack او فرونت اند وهتلاقى فيه implementation.

    انا بفضّل استخدم styled system concept عن حاجة زى tailwind css مثلًا، فال styled system انت بس بتعمل ال theme configs وبتستخدم ال components من غير ما تغير فيها styles تانى، كل اللى بتعمله انك بت import ال component من ال lib وخلاص وهو بي render بال styles.

    فى كذا ui framework بيستخدموا ال concept ده زى material ui و theme ui و chakra ui بس ممكن تلاقى اختلافات بسيطة فال implementation، انا فى الثريد دى هقولكم ازاى نعمل Button ب chakra ui.

    اختيار ال Theme

    اول حاجة هنختار design system من figma community وليكن ده ال design الجميل ده.

    Project Setup

    بعد كدة هنبدأ نعمل setup للبروجكت https://chakra-ui.com/getting-started.

    1// src/index.tsx
    2import { ChakraProvider } from "@chakra-ui/react";
    3import "@fontsource/patrick-hand/400.css";
    4import * as ReactDOMClient from "react-dom/client";
    5
    6import App from "./App";
    7import theme from "./theme";
    8
    9const rootElement = document.getElementById("root");
    10const root = ReactDOMClient.createRoot(rootElement);
    11
    12root.render(
    13 <StrictMode>
    14 <ChakraProvider theme={theme}>
    15 <App />
    16 </ChakraProvider>
    17 </StrictMode>
    18);
    19

    Theme Customization

    بس وبعدين نبدأ ن customize ال theme حسب ال design system بتاع figma اللى اخترناه https://chakra-ui.com/docs/styled-system/theming/customize-theme واول حاجة ال foundations نعملها الاول بس

    1// theme/foundations/index.ts
    2
    3export default {
    4 colors: {
    5 black: "#333",
    6 darkGray: "#7D7D7D",
    7 gray: "#B4B4B4",
    8 lightGray: "#EEE",
    9 },
    10 fonts: {
    11 heading: "Patrick Hand, sans-serif",
    12 body: "Patrick Hand, sans-serif",
    13 },
    14 fontSizes: {
    15 md: "1rem",
    16 lg: "1.2rem",
    17 },
    18};
    19

    وبعدين نعمل ال components وده مثال لل button

    1// theme/components/index.tsx
    2
    3export default {
    4 Button: {
    5 baseStyle: ({ theme }: any) => ({
    6 _disabled: {
    7 opacity: 1,
    8 cursor: "not-allowed",
    9 boxShadow: "none",
    10 border: "4px solid",
    11 borderColor: theme.colors.black,
    12 bgColor: theme.colors.gray,
    13 color: theme.colors.black,
    14 _hover: {
    15 borderColor: theme.colors.black,
    16 bgColor: theme.colors.gray,
    17 color: theme.colors.black,
    18 },
    19 },
    20 _hover: {
    21 _disabled: {
    22 borderColor: theme.colors.black,
    23 bgColor: theme.colors.gray,
    24 color: theme.colors.black,
    25 },
    26 },
    27 }),
    28 sizes: {
    29 md: {
    30 border: "none",
    31 boxSizing: "border-box",
    32 borderColor: "black",
    33 padding: "12px 24px",
    34 fontSize: "lg",
    35 },
    36 },
    37 variants: {
    38 outline: ({ theme }: any) => ({
    39 border: "4px solid",
    40 borderColor: theme.colors.black,
    41 color: theme.colors.black,
    42 bg: theme.colors.white,
    43 _hover: {
    44 bg: theme.colors.lightGray,
    45 color: theme.colors.black,
    46 },
    47 _active: {
    48 bg: theme.colors.gray,
    49 color: theme.colors.black,
    50 borderColor: theme.colors.black,
    51 },
    52 }),
    53 solid: ({ theme }: any) => ({
    54 border: "4px solid",
    55 borderColor: theme.colors.black,
    56 color: theme.colors.white,
    57 bg: theme.colors.black,
    58 _hover: {
    59 bg: theme.colors.darkGray,
    60 color: theme.colors.white,
    61 },
    62 _active: {
    63 bg: theme.colors.gray,
    64 color: theme.colors.white,
    65 borderColor: theme.colors.black,
    66 },
    67 }),
    68 ghost: {
    69 _hover: {
    70 bg: "transparent",
    71 },
    72 _active: {
    73 bg: "transparent",
    74 },
    75 _focus: {
    76 bg: "transparent",
    77 },
    78 },
    79 },
    80 },
    81};
    82

    فال function اللي فوق انت بسهولة جدًا تقدر ت access كل ال theme وتقدر تستخدم اللي عايزه يعني.

    النتيجة

    بس بقى ده كدة ال Button component بنفس الديزاين سيستم وتقدر تستخدمه فالبروجكت كله من غير ما تكتب styles تانى وال files بتاعتك هتكون مركزة اكتر على ال logic.

    بس انت تقدر تعمل كدة مع باقي ال components وتقدر تغير وتستخدم styles global.

    ده لينك الثريد علي تويتر.

    Signature of the author