playroom
v0.39.1
Entwerfen Sie gleichzeitig über verschiedene Themen und Bildschirmgrößen hinweg, die von JSX und Ihrer eigenen Komponentenbibliothek betrieben werden.
Mit dem Spielzimmer können Sie eine null-installierende codorientierte Designumgebung erstellen, die in ein eigenständiges Bündel integriert ist, das neben Ihrer vorhandenen Dokumentation des Designsystems eingesetzt werden kann.
Iterieren Sie Ihre Entwürfe im endgültigen Medium.
Erstellen Sie schnelle Mock-Ups und interaktive Prototypen mit echtem Code.
Üben und bewerten Sie die Flexibilität Ihres Designsystems.
Teilen Sie Ihre Arbeit mit anderen, indem Sie einfach die URL kopieren.
Geflechtes Designsystem (Themen)
Gürteltasche
Overdrive
Würfel (Themen)
Netzdesignsystem (Themen)
Mística -Designsystem (thematiert)
Shopify Polaris
Agrardesignsystem
Senden Sie uns eine PR, wenn Sie in dieser Liste sein möchten!
$ npm install-Save-dev Playroom
Fügen Sie Ihrem package.json die folgenden Skripte hinzu.json:
{"Skripte": {"Playroom: Start": "Playroom Start", "Playroom: Build": "Playroom Build"
}
} Fügen Sie dem Stamm Ihres Projekts eine playroom.config.js -Datei hinzu:
module.exports = {
Komponenten: './src/components',
Ausgangspath: './dist/playroom',
// optional:
Titel: 'Meine großartige Bibliothek',
Themen: './src/themes',
Snippets: './playroom/snippets.js',
Framecomponent: './playroom/framecomponent.js',
Scope: './Playroom/Usescope.js',
Breiten: [320, 768, 1024],
Port: 9000,
OpenBrowser: Richtig,
Paramtype: 'Search', // Standard ist 'Hash'
BeispielPlecode: `<butth> Hallo Welt! </Button> `,
BasisaRl: '/Playroom/',
WebPackConfig: () => ({// benutzerdefinierte Webpack -Konfiguration geht hier ...
}),
IFramesAndbox: 'Zulassungsschriften',
Standardvissible -Widths: [// Teilmenge der Breiten, die beim ersten Last angezeigt werden sollen
],
Standardvisvibletheme: [// Teilmenge der Themen, die beim ersten Laden angezeigt werden sollen
],}; HINWEIS: Die Optionen für port und openBrowser -Optionen werden standardmäßig auf 9000 bzw. true (jeweils) eingestellt, wenn sie in der obigen Konfiguration weggelassen werden.
Es wird erwartet, dass Ihre components ein einzelnes Objekt oder eine Reihe benannter Exporte exportiert. Zum Beispiel:
exportieren {Standard als Text} aus '../text'; // Neuportierung eines Standard-Extexport {Button} aus '../Button'; // einen genannten Export erneut exportieren // usw. ... Mit der Option iframeSandbox kann das sandbox -Attribut auf dem Iframe von Playroom festgelegt werden. Es ist ein Minimum an allow-scripts erforderlich, damit das Spielzimmer funktioniert.
Nachdem Ihr Projekt konfiguriert ist, können Sie einen lokalen Entwicklungsserver starten:
$ NPM Run Playroom: Start
Um Ihre Vermögenswerte für die Produktion aufzubauen:
$ NPM Run Playroom: Build
Mit dem Spielzimmer können Sie schnell vordefinierte Codeausschnitte einfügen und Live -Voransichten über Themen und Ansichtsfinder hinweg bereitstellen, während Sie die Liste navigieren. Diese Snippets können über eine snippets -Datei konfiguriert werden, die so aussieht:
Standard ausführen [
{Gruppe: 'Button', Name: 'Strong', Code: `<button Weight =" Strong "> Button </button>`,,
},
// usw...]; Wenn Ihre Komponenten in benutzerdefinierte Anbieterkomponenten verschachtelt sein müssen, können Sie eine benutzerdefinierte React -Komponentendatei über die Option frameComponent bereitstellen, die ein Pfad zu einer Datei ist, die eine Komponente exportiert. Wenn beispielsweise Ihre Komponentenbibliothek mehrere Themen enthält:
Importieren von 'React'; import {ithemeProvider} aus '../path/to/your/theming-system
return <ithemeProvider thema = {thema}> {children} </theeProvider>;} Sie können zusätzliche Variablen innerhalb des Umfangs Ihres JSX über die Option scope bereitstellen. Dies ist ein Pfad zu einer Datei, die einen useScope -Haken exportiert, der ein Zielfernrohrobjekt zurückgibt. Wenn Sie beispielsweise einen kontextbasierten theme für Verbraucher Ihres Spielzimmers vorstellen wollten:
Importieren {Usetheme} aus '../path/to/your/theming-System'; export Standardfunktion Usescope () {
Rückgabe {Thema: UsetheMe (),
}; Wenn Ihre Komponentenbibliothek über mehrere Themen verfügt, können Sie das Spielzimmer so anpassen, dass jedes Thema über die Konfigurationsoption themes gleichzeitig rendert.
Ähnlich wie bei Ihrer components wird erwartet, dass Ihre themes ein einzelnes Objekt oder eine Reihe benannter Exporte exportiert. Zum Beispiel:
exportieren {ithema} aus './themea'iexport {themenb} von' ./themeb';// etc. Wenn in Ihrem Projekt eine tsconfig.json Datei vorhanden ist, werden statische Proptypen mithilfe von React-Docgen-Typ-Typskripten analysiert, um eine bessere Autocompletion im Playroom-Editor zu bieten.
Standardmäßig sind alle .ts und .tsx -Dateien im aktuellen Arbeitsverzeichnis ohne node_modules enthalten.
Wenn Sie dieses Verhalten anpassen müssen, können Sie in playroom.config.js eine Option typeScriptFiles angeben.
module.exports = {
// ...
TypeScriptFiles: ['src/components/**/*. {ts, tsx}', '! **/node_modules'],}; Wenn Sie die Parser -Optionen anpassen müssen, können Sie eine reactDocgenTypescriptConfig -Option in playroom.config.js bereitstellen.
Zum Beispiel:
module.exports = {
// ...
ReactDocGentypescriptConfig: {PropFilter: (Prop, Komponente) => {// ...},
},}; Das Spielzimmer unterstützt das Laden von ESM -Konfigurationsdateien. Standardmäßig sucht das Spielzimmer nach einer Playroom -Konfigurationsdatei mit einem .js , .mjs oder .cjs -Dateierweiterung.
Wenn Sie daran interessiert sind, das Spielzimmer in ein Storybook zu integrieren, lesen Sie das Storybook-Addon-Playroom.
Das Spielzimmer ist für die Arbeit an den neuesten stabilen Versionen aller wichtigen Browser gebaut. Einige Funktionen funktionieren möglicherweise nicht wie erwartet in älteren Browsern.
MIT.
