playroom

---

في الوقت نفسه ، قم بتصميم مجموعة متنوعة من الموضوعات وأحجام الشاشة ، مدعومة من JSX ومكتبة المكونات الخاصة بك.

تتيح لك Playroom إنشاء بيئة تصميم موجهة نحو الرمز ، مدمجة في حزمة مستقلة يمكن نشرها إلى جانب وثائق نظام التصميم الحالية.

• تكرار على تصميماتك في الوسيلة النهائية.

• قم بإنشاء نماذج سريعة ونماذج تفاعلية مع رمز حقيقي.

• ممارسة وتقييم مرونة نظام التصميم الخاص بك.

• شارك عملك مع الآخرين ببساطة عن طريق نسخ عنوان URL.

العروض التوضيحية

نظام تصميم جديلة (تحت عنوان)

بومباج

Overdrive

مكعبات (تحت عنوان)

نظام تصميم شبكة (تحت عنوان)

نظام تصميم Mística (تحت عنوان)

Shopify Polaris

نظام تصميم الزراعة

أرسل لنا العلاقات العامة إذا كنت ترغب في أن تكون في هذه القائمة!

ابدء

 تثبيت $ npm-غرفة اللعب-ديف

أضف البرامج النصية التالية إلى package.json الخاصة بك. json:

 {"Scripts": {"Room: Start": "Playroom Start" ، "Playroom: Build": "Playroom Build"
  }
}

إضافة ملف playroom.config.js إلى جذر مشروعك:

 module.exports = {
  المكونات: './src/components' ،
  Outpathpath: './dist/playroom' ،

  // خياري:
  العنوان: "مكتبتي الرائعة" ،
  موضوعات: "./src/themes" ،
  قصاصات: './playroom/snippets.js' ،
  FrameComponent: './playroom/frameComponent.js' ،
  النطاق: './playroom/usescope.js' ،
  العروض: [320 ، 768 ، 1024] ،
  الميناء: 9000 ،
  OpenBrowser: صحيح ،
  paramtype: "البحث" ، // الافتراضي هو "التجزئة"
  رمز الامتحانات: `<button> Hello World!    </button> `،
  baseurl: '/playroom/' ،
  WebPackConfig: () => ({// custom webpack config يذهب هنا ...
  }) ،
  iframesandbox: "السماح بالنشر" ،
  DefaultVisibleWidths: [// مجموعة فرعية من العروض لعرضها على التحميل الأول
  ]
  DefaultVisiblethemes: [// مجموعة فرعية من الموضوعات التي يجب عرضها على التحميل الأول
  ] ،} ؛

ملاحظة: سيتم تعيين خيارات port و openBrowser على 9000 true (على التوالي) افتراضيًا كلما تم حذفها من التكوين أعلاه.

من المتوقع أن يقوم ملف components الخاص بك بتصدير كائن واحد أو سلسلة من الصادرات المسماة. على سبيل المثال:

 Export {default as text} from '../text' ؛ // إعادة تصدير التصدير الافتراضي {button} من '../button' ؛ // إعادة تصدير تصدير اسم // وما إلى ذلك ...

يمكن استخدام خيار iframeSandbox لتعيين سمة sandbox على iframe's Iframe's. هناك حاجة إلى حد أدنى من allow-scripts بها حتى تعمل غرفة اللعب.

الآن بعد تكوين مشروعك ، يمكنك بدء تشغيل خادم تطوير محلي:

 $ NPM Run Room: ابدأ

لبناء أصولك للإنتاج:

 $ NPM Run Room: Build

قصاصات

تتيح لك Playroom إدراج قصاصات من التعليمات البرمجية المحددة مسبقًا بسرعة ، وتوفير معاينات حية عبر الموضوعات ومنافذ العرض أثناء التنقل في القائمة. يمكن تكوين هذه المقتطفات عبر ملف snippets يبدو ذلك:

 تصدير الافتراضي [
  {Group: 'Button' ، Name: 'Strong' ، code: `<button weight =" strong "> زر </button>` ،
  } ،
  // إلخ...]؛

مكون الإطار المخصص

إذا كانت مكوناتك بحاجة إلى أن تكون متداخلة ضمن مكونات مخصصة مخصصة ، فيمكنك توفير ملف مكون React مخصص عبر خيار frameComponent ، وهو مسار إلى ملف يصدر مكونًا. على سبيل المثال ، إذا كانت مكتبة المكون الخاصة بك تحتوي على موضوعات متعددة:

 استيراد رد الفعل من 'React' ؛ Import {themeProvider} من '../TOT/TO/YOUR/THEMING-SYSTEM' ؛
  return <themeprovider theme = {theme}> {children} </themeprovider> ؛}

النطاق المخصص

يمكنك توفير متغيرات إضافية في نطاق JSX الخاص بك عبر خيار scope ، وهو طريق إلى ملف يصدر خطافًا useScope الذي يرجع كائن نطاق. على سبيل المثال ، إذا كنت ترغب في فضح متغير theme قائم على السياق للمستهلكين في غرفة اللعب:

 استيراد {USETHEME} من '../TOPH/TO/YOUR/THEMING-SYSTEM' ؛
  العودة {الموضوع: USETHEME () ،
  } ؛

دعم الموضوع

إذا كانت مكتبة المكون الخاصة بك تحتوي على سمات متعددة ، فيمكنك تخصيص غرفة اللعب لتقديم كل سمة في وقت واحد عبر خيار تكوين themes .

على غرار ملف components الخاص بك ، من المتوقع أن يقوم ملف themes الخاص بك بتصدير كائن واحد أو سلسلة من الصادرات المسماة. على سبيل المثال:

 Export {semea} من '.

دعم TypeScript

إذا كان ملف tsconfig.json موجودًا في مشروعك ، يتم تحليل أنواع الدعامة الثابتة باستخدام موظف من نوع React-Docgen لتوفير إكمال تلقائي أفضل في محرر غرفة اللعب.

بشكل افتراضي ، يتم تضمين جميع ملفات .ts و .tsx في دليل العمل الحالي ، باستثناء node_modules .

إذا كنت بحاجة إلى تخصيص هذا السلوك ، فيمكنك توفير خيار typeScriptFiles في playroom.config.js ، وهي مجموعة من الكرات.

 module.exports = {
  // ...
  TypeScriptFiles: ['src/components/**/*. {ts ، tsx}' ، '! **/node_modules'] ،} ؛

إذا كنت بحاجة إلى تخصيص خيارات المحلل ، فيمكنك توفير خيار reactDocgenTypescriptConfig في playroom.config.js .

على سبيل المثال:

 module.exports = {
  // ...
  ReactDocgentypescriptConfig: {propfilter: (prop ، component) => {// ...} ،
  } ،} ؛

دعم ESM

Playroom تدعم تحميل ملفات تكوين ESM. بشكل افتراضي ، ستبحث Playroom عن ملف تكوين غرفة اللعب باستخدام ملحق ملف .js أو .mjs أو .cjs .

تكامل القصص

إذا كنت مهتمًا بدمج غرفة اللعب في Storybook ، تحقق من Storybook-Addon-Playroom.

دعم المتصفح

تم تصميم Playroom للعمل على أحدث الإصدارات المستقرة من جميع المتصفحات الرئيسية. قد لا تعمل بعض الميزات كما هو متوقع في المتصفحات القديمة.

رخصة

معهد ماساتشوستس للتكنولوجيا.