ساختن یک سیستم طراحی از ابتدا

قبل از اینکه وارد بخش ساخت و ساز واقعی این پست وبلاگ بشوم، ابتدا می‌خواهم کمی زمینه را بیان کنم چرا من تصمیم گرفتم زمانی را به این پروژه اختصاص دهم.
در میان دلایل متعددی که باعث شد این پروژه به حیات خود ادامه دهد، عمدتاً خواهید یافت:

• برندسازی: من خیلی سعی می کنم در دریای بی پایان وبلاگ ها/وب سایت های توسعه دهندگان که کم و بیش یکسان به نظر می رسند، منحصر به فرد باشم. من می خواهم مردم کارهای من را از راه دور از طریق انتخاب رنگ ها، لوگو، طراحی اجزا، بازیگوشی و توجه به جزئیات تشخیص دهند.

• سازگاری: هر بخشی که این سیستم را تشکیل می دهد باید هدفی داشته باشد. همه مؤلفه‌ها از دستورالعمل‌های یکسانی پیروی می‌کنند و از عناصر/توکن‌های ابتدایی‌تری تشکیل شده‌اند.

• سرگرمی و یادگیری: هنگام ساخت این کتابخانه کوچک چیزهای زیادی در مورد ساخت اجزا، تفکر طراحی سیستم و خودم یاد گرفتم. این به من کمک کرد تا مقداری همدلی ایجاد کنم و به عقب برگردم و دو بار در مورد رابط مؤلفه، ترکیب پذیری، انتزاع و مقیاس پذیری فکر کنم. تمرکز بر یک بخش از سیستم در یک زمان و ساختن یک جزء از آن، بسیار سرگرم کننده و بسیار رضایت بخش بود.

این پروژه به خودی خود یک ضرورت نبود، اما هر چه وبلاگ/ نمونه کارها و نام تجاری من بیشتر می شد، بیشتر برای این چیزها تلاش می کردم و فقدان یک سیستم طراحی سرعتم را کاهش می داد. من به مجموعه‌ای از «قطعه‌های لگو» نیاز داشتم که بتوانم بی‌پایان آن‌ها را دوباره تنظیم/ترکیب کنم. بنابراین ایده ساخت یک سیستم طراحی شخصی به ذهنم آمد:

یک سیستم طراحی با دامنه کوچک که عمدتاً از اجزای اولیه تشکیل شده است که صرفاً بر برندسازی شخصی و استفاده شخصی متمرکز شده است.

اگرچه دامنه این سیستم طراحی در مقایسه با سیستم‌های بزرگ‌تری که می‌توانیم در زمینه کاری روی آنها کار کنیم، کوچک به نظر می‌رسد، لزوماً ساخت آن پیچیده‌تر نیست. در قسمت های بعدی چالش ها و تصمیماتی که در حین کار روی این پروژه گرفتم را مرور خواهم کرد.

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

سیستم رنگ

ابتدا می خواستم یک جامد موثر را تعریف کنم سیستم رنگ. در پایان، چیزی را انتخاب کردم که آن را “سیستم دو لایه با رنگ های متغیر” نامیدم:

1. لایه اول مجموعه ای از متغیرها است که مقادیر HSL (Hue, Saturation, Lightness) رنگ های مختلف درون پالت ها را نشان می دهد. --blue-10: '222, 89%, 90%' یا --red-60: 0, 95%, 40%.

2. لایه دوم بیشتر یک نام مستعار عمومی برای رنگ ها است که در نهایت توسط اجزای سیستم طراحی مشخص می شود: --brand: hsl(var(--blue-50)) یا --foreground: hsla(var(--gray-05), 60%). در این لایه از رنگ های تعریف شده در اول استفاده می کنیم و آنها را ترکیب یا گسترش می دهیم.

این سیستم به دلایل زیر برای من کار می کند:

• اجزاء هرگز در نهایت به «رنگ‌ها» واقعی اشاره دارد: رنگ پس‌زمینه Button جزء نیست --blue-10 اما --brand و مقدار این متغیر ممکن است در طول زمان از آبی به بنفش یا چیز دیگری تغییر کند. به لطف این سیستم، قطعات در برابر تغییرات مقاومت بیشتری دارند: می خواهید رنگ برند را تغییر دهید؟ تنها کاری که باید انجام دهید این است که مقدار آن را به روز کنید --brand متغیر و تمام اجزایی که به آن ارجاع می دهند بر این اساس به روز می شوند.

• ایجاد تم آسان مانند حالت روشن و تاریک: در حالت روشن --brand ممکن است اشاره شود --blue-60، در حالت تاریک خواهد بود --blue-20.

برای نشان دادن مراحلی که برای جمع‌آوری رنگ‌ها، ایجاد یک پالت و ایجاد نشانه‌ها برداشتم، موارد کوچک را ساختم. نمایش اسلاید متحرک ✨ در زیر:

نشانه های دیگر

رنگ های متغیر برای شروع تمرکز اصلی من بودند. آنها شاید مهمترین مجموعه نشانه ها برای شروع ساختن یک زبان بصری جذاب باشند. سپس نیاز به تعریف واحدهای فاصله ثابت مطرح شد:

و نشانه های مرتبط با فونت:

2
--font-size-2: 0.875rem;
4
--font-size-4: 1.125rem;

و چیزهای کوچکی مانند شعاع مرزی:

3
--border-radius-2: 16px;

کامپوننت‌ها مستقیماً به این نشانه‌ها اشاره می‌کنند، زیرا احتمال تغییر آن‌ها در طول زمان کمتر است.

درس های آموخته شده

همانطور که در مورد اجزاء تکرار می‌کردم و الگوهای رایج را توسعه می‌دادم، اغلب مجبور بودم به صفحه طراحی برگردم و نشانه‌های جدیدی تعریف کنم، برخی دیگر را دوباره تعریف/تصفیه کنم، یا برخی را ترکیب و حذف کنم. این روند به خصوص برای من آزاردهنده بود زیرا:

• بر خلاف تجربه من از کار بر روی یک سیستم طراحی در زمینه حرفه ای، من طراح ندارم که روی این سیستم کار کند. فقط می توانستم روی آن حساب کنم شهود یا آزمون و خطا تا زمانی که احساس کنم آن را میخکوب کرده ام یا چیزی را تعریف کرده ام که عالی به نظر می رسد.

• من یک قانون گذاشتم: تا جایی که ممکن است حاوی توکن باشد. این گاهی اوقات واقعاً دشوار بود زیرا مجبور بودم بین “پیچیدگی سیستم طراحی من” و سطح سازگاری تعادل را حفظ کنم.

نشانه هایی که من تا کنون تعریف کرده ام به احتمال زیاد در آینده با گسترش تعداد مؤلفه ها یا آزمایش با رنگ های جدید یا روش های جدید برای تعریف متغیرها، تکامل خواهند یافت. از طریق این پروژه، من یاد گرفتم که آنها را بیشتر به عنوان یک لایه انعطاف پذیر از یک سیستم طراحی ببینم، به جای یک پایه سفت و سخت که همه چیز در بالای آن قرار دارد.

تا به امروز، سیستم طراحی من فقط شامل اجزای ساده یا ابتدایی است. تنها چیزی که نیاز دارم یک مجموعه است ساده قطعاتی که به من امکان می‌دهند چیزها را سریع‌تر و با ثبات بسازم، در حالی که هنوز فضایی برای خلاقیت باقی می‌گذارند: مثل ست لگو. بنابراین، من این پروژه را برای حفظ تعادل در موارد زیر بهینه کردم:

• تجربه توسعه دهنده خوب (DX). من می خواهم اجزای من باشند مفید و به من کمک کنید سریعتر کار کنم، آزمایش کنم و تکرار کنم.

• زبان طراحی/طراحی زیبا و منسجم. به این ترتیب به اجزاء اجازه می دهد تا نه تنها در سمت کد چیزها، بلکه به صورت بصری نیز ترکیب شوند.

من این بخش را به نشان دادن برخی از الگوها و ترفندهایی که برای رسیدن به این اهداف در نظر گرفته ام اختصاص می دهم و در عین حال استفاده و نگهداری از اجزای سیستم طراحی خود را آسان تر می کنم. اگر به کامپوننت DX و مدل‌های ترکیب علاقه دارید، این بخش باید برای شما دردسرساز باشد.

اجزای متغیر رانده

من همیشه از طرفداران پر و پا قرص اجزای سبک شده بودم و می خواستم آنها در قلب این سیستم طراحی باشند. با این حال، این بار، چیزی کمی ماندگارتر را انتخاب کردم: @stitches/react.

در میان دلایل متعددی که من این کتابخانه را به جای کتابخانه ای که به طور گسترده پذیرفته شده است انتخاب کردم عبارتند از:

• رویکرد متغیر محور. درزها استفاده از انواع. مجموعه انواعی که یک جزء پشتیبانی می کند باید از پیش تعریف شده باشد، که به این معنی است که هیچ ابزار یک ظاهر طراحی پویا مجاز نیست. من به شدت به این مدل در هنگام کار بر روی یک سیستم طراحی اعتقاد دارم. واقعا باعث می شود من فکر می کنم در مورد تجربه توسعه دهنده و رابط اجزای شما. من تمام تلاش خود را انجام داده‌ام تا تعداد واریانت‌ها را کم نگه دارم و ترکیب و اجزای تشکیل دهنده را در اولویت قرار دهم که بعداً در این مقاله به جزئیات آن خواهم پرداخت.

• پشتیبانی از پلی مورفیسم. بخیه ها به شما امکان می دهند برچسب یک جزء را با یک پلی مورفیک جایگزین کنید as پشتیبانی من چند نمونه از این مدل را در زیر نشان خواهم داد.

• پشتیبانی پیشرفته تایپ اسکریپت. انواع کامپوننت های استایل به طور خودکار انواع مختلفی دارند. هیچ کار اضافی مورد نیاز نیست.

1
import { styled } from '@stitches/react';
3
const Block = styled('div', {
8
    justifyContent: 'center;
19
                background: 'hotpink';
27
        appearance: 'primary';
34
        Block as="section" appearance="secondary">

وقتی نوبت به نوشتن سبک های واقعی می رسد، من سهم خود را از CSS اسپاگتی در طول زندگی حرفه ای ام نوشته ام و نمی خواستم این پروژه به همین شکل تمام شود. خوشبختانه Stitches کد اجزای استایل شده من را تحت کنترل نگه می دارد چه بر اساس مدل (بدون وسایل پویا، فقط انواع) یا بر اساس نوع، و به من اجازه می‌دهد از بسیاری از مشکلاتی که در کتابخانه‌های مؤلفه‌های سبک‌دار دیگر به آن برخورد کرده‌ام اجتناب کنم. علاوه بر آن، من با برخی از الگوها/قوانین سفارشی برای بهبود بیشتر خوانایی و قابلیت نگهداری کدم آمدم.

یکی از الگوهایی که در حین ساختن اجزای خود مدام به آن بازمی گشتم، شمارش بود متغیرهای CSS محلی برای مدیریت انتقال ها و حالت های نگه داشتن/تمرکز/فعالیت.

1
import { styled } from '@stitches/react';
3
const StyledButton = styled('button', {
5
  background: 'var(--background, white)',
6
  color: 'var(--color, black)',
7
  boxShadow: 'var(--shadow, none)',
8
  opacity: 'var(--opacity, 1)',
9
  transform: 'scale(var(--button-scale, 1)) translateZ(0)',
12
  padding: 'var(--space-3) var(--space-4)',
13
  fontSize: 'var(--font-size-2)',
14
  fontWeight: 'var(--font-weight-500)',
17
  transition: 'background 0.2s, transform 0.2s, color 0.2s, box-shadow 0.3s',
18
  borderRadius: 'var(--border-radius-1)',
22
    '--button-scale': 0.95,
26
    '--background': 'var(--form-input-disabled)',
27
    '--color': 'var(--typeface-tertiary)',
32
      '--shadow': 'var(--shadow-hover)',
36
    '--shadow': 'var(--shadow-hover)',
42
        '--background': 'var(--brand)',
43
        '--color': 'var(--typeface-primary)',
46
        '--background': 'var(--brand-transparent)',
47
        '--color': 'var(--brand)',

در قطعه بالا می توانید ببینید:

• متغیرهای محلی مورد استفاده در این جزء در بالا قرار دارند. اینجاست که من آنها را با مقادیر پیش فرض مقداردهی اولیه می کنم.

• سپس به کار اصلی ادامه می دهم بدن از CSS، که شامل تمام ویژگی های اصلی CSS است.

• سپس هر کد تودرتو، انواع، انتخابگرها، ::before، یا ::after بیانیه ها فقط این متغیرهای CSS را مجدداً اختصاص دهید.

خواندن کدهای به دست آمده بسیار ساده تر است و من کمتر از آزمایش کدهای پیچیده تر CSS بدون اینکه احساس کنم از پشتیبانی خود دست می کشم، می ترسم.

اجزای کمکی

از آنجایی که هدف این سیستم طراحی اجازه دادن به کار/آزمایش سریع‌تر بود، من مجموعه‌ای از آن را ارائه کردم اجزای مفید. این مولفه ها شامل موارد زیر است:

1
import { styled } from '@stitches/react';
3
const Box = styled('div', {});
11
                background: 'var(--brand-transparent)';
12
                color: 'var(--typeface-primary)';
13
                borderRadius: 'var(--border-radius-1)';

• Flex و Grid. اینا مال منن کمک کننده های چیدمان. هدف آنها ایجاد سریع است flex و grid طرح بندی های CSS آنها با انواع / ویژگی های از پیش تعریف شده ارائه می شوند تا به شما کمک کنند برخی از ویژگی های منحصر به فرد آنها را تنظیم کنید alignItems، justifyContent، gap، یا columns. آنها به آرامی در پایگاه‌های کدی که از سیستم طراحی من استفاده می‌کنند، نجات‌بخش شده‌اند. آنها به من اجازه می دهند تا در کمترین زمان نمونه های اولیه با طرح های پیچیده ایجاد کنم.

7
        justifyContent="center"
13
      Grid gap="4" templateColumns="repeat(2, 1fr)">

• Text. نگه داشتن چیزی مرتبط با تایپوگرافی در هر پروژه ای که انجام داده ام همیشه یک چالش بوده است. بنابراین، برای حل این مشکل، این کامپوننت کمکی را ایجاد کردم. این دارای گزینه های ویژه ای برای اندازه ها، رنگ ها، وزن ها و لوازم کوچک مفید مانند است truncate که بارها نجات دهنده بوده است. من از استفاده روزانه از این مؤلفه قدردانی می‌کنم و در نهایت مؤلفه‌های تایپوگرافی خاص‌تری را در بالای آن نوشتم.

5
        Almost before we knew it,
6
        we had left the ground.
9
        Almost before we knew it,
10
        we had left the ground.
16
            'linear-gradient(...)',
21
        Almost before we knew it,
22
        we had left the ground.

• VisuallyHidden. به خاطر سپردن CSS برای پنهان کردن بصری یک عنصر بسیار سخت است. بنابراین من یک کامپوننت ایجاد کردم تا مجبور نباشید آن را اغلب در گوگل جستجو کنید 😄. این به من کمک می کند متن فناوری کمکی اضافی را به مواردی اضافه کنم که در صورت نیاز می توانند زمینه بیشتری داشته باشند.

اجزای تشکیل دهنده

من عشق اجزای تشکیل دهنده من حتی سه مقاله مختلف را به آنها اختصاص دادم 😄 (که الان کمی قدیمی شده اند). من معتقدم که ایجاد یک مجموعه خوب از کامپوزیت ها می تواند تا حد زیادی DX یک جزء را بهبود بخشد.

دو مورد استفاده وجود داشت که در نهایت من کامپوزیت ها را انتخاب کردم:

1. در جایی که اگر به اجزای متصل کوچکتر تقسیم نشود، رابط پشتیبانی بیش از حد بارگذاری می شود.

2. جایی که یک جزء به طور بالقوه می تواند به طرق مختلف ترکیب شود.

برخی از اجزایی که در نهایت از مدل کامپوزیت استفاده می کنند عبارتند از:

1
Radio.Group name="options" direction="vertical" onChange={...}>

2
  Card.Header>Title of the cardCard.Header>
3
  Card.Body>Content of the cardCard.Body>

برخی از رای دهندگان من بیشتر هستند محدود کننده در مورد انواع مؤلفه هایی که می توان در کودکی به آنها ارائه داد، نسبت به دیگران. در صورت Card، من انعطاف پذیری را انتخاب کردم زیرا نمی خواستم استفاده از آن را “ممنوع” کنم. برای Radio، اما نیاز به تجویز نحوه استفاده از آن را احساس کردم، بنابراین ابزار کوچک زیر را ایجاد کردم:

1
export function isElementOfType(element, ComponentType): element {
2
  return element?.type?.displayName === ComponentType.displayName;

این ویژگی به من اجازه می دهد تا اجزای ارائه شده در زیر را فیلتر کنم Radio بر اساس displayName از کودک:

1
import RadioItem from './RadioItem';
3
const RadioGroup = (props) => {
4
  const { children, ... } = props;
6
  const filteredChildren = React.Children.toArray(children).filter((child) =>
7
    isElementOfType(child, RadioItem);
11
    Flex gap={2} role="radiogroup">

چند شکلی و ترکیب

استفاده از ترکیب بندی منجر به اجزای انتزاعی بیشتری می شود که نسبت به همتایان ابتدایی خود به قطعات کمتری نیاز دارند و کاربرد محدودتری دارند. وقتی به خوبی انجام شوند، می توانند سرعت توسعه دهندگان را افزایش دهند و استفاده از سیستم طراحی را آسان تر کنند.
با توجه به گستردگی کاربردها، این سیستم طراحی می تواند چگونه نیز داشته باشد بدوی قطعات آن عبارتند از، من می خواستم از ابتدا برای ترکیب و توسعه پذیری بهینه سازی کنم. برای من خوش شانس، انتخاب @stiches/react کتابخانه به دلیل پشتیبانی از پلی مورفیسم از طریق آن، یک انتخاب عالی بود as پشتیبانی می کند

را as prop به شما این امکان را می دهد که انتخاب کنید کدام تگ را یک جزء داده شده ارائه دهید. من آن را در بسیاری از مؤلفه های مفید خود، مانند Text به عنوان مثال:

نه تنها این مؤلفه ها می توانند هر تگ HTML را در خود بپذیرند as prop ، اما من موارد استفاده زیادی پیدا کرده ام که مشخص کردن اجزای دیگر کاملاً منطقی است:

3
  Card.Body as={Flex} direction="column" gap="2">

قطعه کد بالا نشان می دهدCard.Body جزء مرکب به صورت a Flex جزء در این مورد نه تنها Card.Body سبک ها را به ارث می برد اما آن را نیز به ارث می برد لوازم و انواع! 🤯

اینجا متوقف نمی شود! علاوه بر اجازه چندشکلی، مؤلفه‌های استایل‌شده من نیز برای ترکیب‌بندی طراحی شده‌اند:

1
const DEFAULT_TAG = 'h1';
6
    1: { '@initial': '4' },
7
    2: { '@initial': '5' },
8
    3: { '@initial': '6' },
9
    4: { '@initial': '7' },
15
      fontWeight: 'var(--font-weight-600)',
18
      marginBottom: '1.45rem',
21
      fontWeight: 'var(--font-weight-600)',
24
      marginBottom: '1.45rem',
27
      fontWeight: 'var(--font-weight-600)',
30
      marginBottom: '1.45rem',
33
      fontWeight: 'var(--font-weight-600)',
36
      marginBottom: '1.45rem',
45
      size={headingSize[size]}
47
        ...merge(headingCSS[size], props.css),
54
const H1 = (props) => Heading {...props} as="h1" size="4" />;
55
const H2 = (props) => Heading {...props} as="h2" size="3" />;
56
const H3 = (props) => Heading {...props} as="h3" size="2" />;
57
const H4 = (props) => Heading {...props} as="h4" size="1" />;

این به من اجازه می دهد تا اجزای انتزاعی تر و با تمرکز محدودتری را از سیستم های اولیه طراحی ایجاد کنم.

کاری کن که بدرخشد!

ظاهر و احساس نهایی کل سیستم برای من به اندازه DX مهم است. من این قطعات را نه تنها برای ساخت سریعتر، بلکه برای ساختن سریعتر طراحی کردم زیباتر بساز. جدا از رنگ ها و جزئیات کوچک مانند:

من در برخی از ریز تعاملات ظریف اما لذت بخش با الهام از برخی از کارهای @aaroniker_me در اجزای من:

افزودن این جزئیات کوچک باعث شد این پروژه سرگرم کننده باشد و من را ادامه دهد. استفاده از آنها در پروژه های دیگر و این وبلاگ باعث خوشحالی من می شود ✨.

در این قسمت آخر می خواهم روی آن تمرکز کنم تحویل جنبه های یک سیستم طراحی مانند:

نسخه سازی

آیا نیاز به ایجاد یک کتابخانه سفارشی دارید؟ یا برای هر جزء یک بسته وجود دارد؟
اینها وقتی به این فکر می کنید که پروژه های شما چگونه سیستم طراحی شما را مصرف می کند، سؤالات معتبری هستند.

از آنجایی که من برای سادگی در این پروژه بهینه‌سازی می‌کردم، یک بسته را برای کل سیستم طراحی خود انتخاب کردم: @maximeheckel/design-system. به این ترتیب من فقط باید نگران نسخه آن کتابخانه باشم. با این حال، این با یک دام بزرگ همراه بود: حالا باید بسته ام را درست می کردم درخت تزلزل ناپذیر بنابراین وارد کردن یک جزء از سیستم طراحی من باعث افزایش بزرگی در اندازه بسته در پروژه های من نمی شود.

اگر در مورد سایر مدل‌های نسخه‌بندی/بسته‌بندی به همراه مزایا و معایب مربوط به آنها کنجکاو هستید، توصیه می‌کنم نسخه‌های طراحی سیستم: کتابخانه واحد یا اجزای جداگانه را بررسی کنید؟ از @brad_frost. این یک خواندن عالی است و به من در فرآیند تصمیم گیری برای نسخه این پروژه کمک کرد.

ساختار فایل

وقتی نوبت به ساختار فایل ها می رسد، الهامات زیادی در آن پیدا کردم @JoshWComeauپیشنهاد در یکی از پست های وبلاگ اخیر خود با عنوان ساختار فایل/دایرکتوری دلپذیر React. برخی از راه حل های او برای من منطقی بود و شما را به خواندن آنها بسیار تشویق می کنم!

گروه بندی

برای بسته بندی esbuild گرفتم. من در طول دوران حرفه‌ای‌ام با سهم من از بسته‌ها بازی کرده‌ام، اما هیچ چیز به سرعت esbuild نزدیک نمی‌شود. من می توانم کل سیستم طراحی خود را (به جز نسل تایپ اسکریپت) تنها در یک ثانیه جمع کنم.
من که تجربه قبلی زیادی با خود esbuilt نداشتم، هنوز توانستم یک پیکربندی کاری نسبتاً سریع ایجاد کنم:

1
const esbuild = require('esbuild');
2
const packagejson = require('./package.json');
3
const { globPlugin } = require('esbuild-plugin-glob');
13
  jsxFactory: 'createElement',
14
  jsxFragment: 'Fragment',
17
  external: [...Object.keys(packagejson.peerDependencies || {})],
23
    entryPoints: ['src/index.ts'],
27
      js: "const { createElement, Fragment } = require('react');\n",
30
  .catch(() => process.exit(1));
37
      'src/components/**/index.tsx',
38
      'src/lib/stitches.config.ts',
39
      'src/lib/globalStyles.ts',
45
      js: "import { createElement, Fragment } from 'react';\n",
47
    plugins: [globPlugin()],
49
  .catch(() => process.exit(1));

در اینجا برخی از نکات اصلی این پیکربندی آورده شده است:

• esbuild هیچ عملکرد یا پلاگین تبدیل JSX مانند Babel ارائه نمی دهد. باید الف را تعیین می کردم jsxFactory (L13-14) و jsxFragment گزینه به عنوان یک راه حل

• در همین یادداشت باید اضافه کنم react واردات/درخواست گزارش از طریق banner گزینه این شیک ترین چیز نیست، اما تنها راهی است که می توانم این بسته را به کار ببرم.

• من این بسته را در قالب ESM و CJS پیوند داده ام.

• ESM از لرزش درختان پشتیبانی می کند، به همین دلیل چندین مورد را مشاهده خواهید کرد entryPoints (L35-40) در این بخش پیکربندی ارائه شده است.

به لطف این پیکربندی، راهی برای تولید یک داشتم مثل بسته درخت می لرزد برای سیستم طراحی من در چند ثانیه این به من اجازه داد تا بزرگترین اشکال استفاده از یک بسته را برطرف کنم: مهم نیست که چه چیزی را از سیستم طراحی وارد می کنید، فقط آنچه وارد شده است در پروژه کاربر گنجانده می شود.

2
import { Button } from '@maximeheckel/design-system';
5
import { Button, Flex, Grid, Icon, Text } from '@maximeheckel/design-system';

رهایی

برای روند انتشار این پروژه، یک را انتخاب کردم نیمه دستی رویکرد در حال حاضر:

من مطمئناً به زودی کل این روند را تکرار خواهم کرد:

• من هنوز یک فرآیند CI مناسب برای این پروژه ندارم.

• من حتی یک کتاب داستان ندارم که بتوانم نسخه های مختلف اجزای سیستم طراحی خود را پست و مقایسه کنم. این هنوز در لیست کارهای من است.

• من می خواهم با استفاده از کتابخانه هایی مانند انتشار معنایی، فرآیند انتشار را حتی بیشتر خودکار کنم.

این به احتمال زیاد سزاوار پست وبلاگ خود خواهد بود 👀 زیرا تنها در مورد این موضوع صحبت زیادی وجود دارد. در همین حین، می توانید برای بررسی جریان کار انتشار فعلی به مخزن این پروژه بروید.