monster-design-system

نحوه استفاده

• پکیج را نصب کنید.
• فایل css را یک بار در ابتدای نرم‌افزار ایمپورت کنید.

import 'monster-design-system/styles.css'

• سپس هر جا که خواستید کامپوننت‌ها را ایمپورت کرده و استفاده کنید.

import { Button, Textfield } from 'monster-design-system'

<Button text="text" />
<Textfield />

نحوه تعریف کامپوننت جدید

هر کامپوننت یک فولدر است که با حرف بزرگ شروع شده و در داخل فولدر components قرار دارد. برای افزودن کامپوننت جدید یک فولدر ساخته و داخل آن ۳ فایل زیر را قرار دهید:

• index.js
• style.scss
• readme.md

در تعریف محتوای این فایل‌ها به نکات زیر توجه کنید:

• دو فایل variables.scss و mixins.scss موجود در فولدر shared به طور خودکار در تمام فایل‌های style.scss قابل دسترسی هستند و نیازی به ایمپورت ندارند.
• عکس‌ها در فولدر assets/images بر اساس پسوند فایل در فولدر مناسب خود قرار گرفته‌اند. برای استفاده از عکس‌ها کافی‌است نام آن‌ها را بیاوریم. مثلا برای دسترسی به فایل موجود در assets/images/png/picture.png کافی‌است بنویسیم:

background-image: url('picture.png');

• همچنین برای دسترسی به assets/images/svg/sub-folder-1/sub-folder-2/file.svg کد زیر را می‌نویسیم. توجه شود که نام فولدر (در اینجا svg) از پسوند عکس به طور خودکار محاسبه می‌شود:

background-image: url('sub-folder-1/sub-folder-2/file.svg');

• کتابخانه‌های react و prop-types و همچنین تعدادی از توابع پر‌استفاده‌ی react مثل useState، useEffect و memo به طور خودکار در تمام فایل‌های index.js قابل دسترسی هستند و نیازی به ایمپورت ندارند.
• در فایل index.js نام کامپوننت باید هم‌نام فولدر باشد و نیازی به export ندارد.
• برای هر کامپوننت باید propTypes و defaultProps تعریف شود. قبل از هر پراپ نام‌برده‌شده در propTypes کامنتی بنویسید که کاربرد آن را توضیح دهد. به عنوان مثال:

Button.propTypes = {
  /**
  * متن دکمه
  */
  text: PropTypes.string.isRequired,
  // ...
}

• ساختار کامنت‌های بالای پراپ‌ها مهم است. باید حتما ۳ خط باشد و خط اول شامل ۲ ستاره و خطوط بعدی شامل یک ستاره باشند.
• تابع cn در تمام فایل‌های js قابل دسترسی است. این تابع که مخفف className است به ما در گرفتن نام کلاس‌ها کمک می‌کند. به عنوان مثال فرض کنید فایل components/Button/style.scss شامل کد زیر است:

.button {
  font-family: iryekan;
  align-items: center;
  justify-content: center;

  &--disabled {
    background: #999;
  }

  &--xs {
    width: 50px;
  }
  &--sm {
    width: 100px;
  }
  &--md {
    width: 150px;
  }
  &--lg {
    width: 200px;
  }
}

خروجی نهایی به شکل زیر خواهد بود:

._button_141oi_1 {
  font-family: iryekan;
  align-items: center;
  justify-content: center;
}
._button--disabled_141oi_11 {
  background: #999;
}
._button--xs_141oi_12 {
  width: 50px;
}
._button--sm_141oi_13 {
  width: 100px;
}
._button--md_141oi_14 {
  width: 150px;
}
._button--lg_141oi_15 {
  width: 200px;
}

همان‌طور که مشخص است، به انتهای نام همه‌ی کلاس‌ها پسوندی اضافه شده‌است تا از تداخل با کلاس‌های دیگر جلوگیری شود. در این شرایط:

• خروجی cn('button') برابر است با _button_141oi_1
• خروجی cn('button', { xs: true }) برابر است با _button_141oi_1 _button_xs_141oi_12 یعنی هر دو کلاس را می‌گیرد. این امر inheritance را خیلی ساده می‌کند.
• خروجی cn('button'و 'other-class-name' { lg: true, disabled: true }) برابر است با _button_141oi_1 _button--lg_141oi_15 other-class-name