playroom
v0.39.1
Concevoir simultanément sur une variété de thèmes et de tailles d'écran, alimentés par JSX et votre propre bibliothèque de composants.
La salle de jeux vous permet de créer un environnement de conception axé sur le code zéro, intégré à un bundle autonome qui peut être déployé parallèlement à votre documentation du système de conception existant.
Itérez sur vos conceptions dans le milieu final.
Créez des maquettes rapides et des prototypes interactifs avec du code réel.
Faites de l'exercice et évaluez la flexibilité de votre système de conception.
Partagez votre travail avec les autres en copiant simplement l'URL.
Système de conception de tresse (sur le thème)
Bumbag
Surmultipliée
Cubes (sur le thème)
Système de conception de maillage (sur le thème)
Mística Design System (sur le thème)
Shopify Polaris
Système de conception de l'agriculture
Envoyez-nous un PR si vous souhaitez être dans cette liste!
$ install npm - Save-DEv salle de jeux
Ajoutez les scripts suivants à votre package.json :
? } }
Ajoutez un fichier de playroom.config.js à la racine de votre projet:
module.exports = {
Composants: './src/components',
OutputPath: './dist/playroom',
// Facultatif:
Titre: «Ma superbe bibliothèque»,
Thèmes: './src/themes',
Extraits: './playroom/snippets.js',
FrameComponent: './playroom/framecomponent.js',
Portée: './playroom/usescope.js',
Largeurs: [320, 768, 1024],
Port: 9000,
OpenBrowser: vrai,
Paramtype: «Recherche», // par défaut est «hachage»
ExampleCode: `<Fit Button> Hello World! </futton> `,
BUSURL: '/ salle de jeux /',
webPackConfig: () => ({// La configuration WebPack personnalisée va ici ...
}),
ifRamesandbox: «perturber les scripts»,
DefaultVisiblewidths: [// sous-ensemble de largeurs à afficher sur la première charge
],
DefaultVisibleThemes: [// sous-ensemble de thèmes à afficher sur la première charge
],}; Remarque: les options port et openBrowser seront définies sur 9000 et true (respectivement) par défaut chaque fois qu'elles sont omises de la configuration ci-dessus.
Votre fichier components devrait exporter un seul objet ou une série d'exportations nommées. Par exemple:
exporter {par défaut en texte} de '../Text'; // réexportant un exportExport par défaut {Button} depuis '../button'; // réexportant une exportation nommée // etc ... L'option iframeSandbox peut être utilisée pour définir l'attribut sandbox sur Iframe de Playroom. Un minimum de allow-scripts est requis pour que la salle de jeux fonctionne.
Maintenant que votre projet est configuré, vous pouvez démarrer un serveur de développement local:
$ NPM Run Playroom: Start
Pour construire vos actifs pour la production:
$ NPM Run Playroom: Build
La salle de jeux vous permet d'insérer rapidement des extraits de code prédéfinis, en fournissant des aperçus en direct entre les thèmes et les fenêtres lorsque vous naviguez dans la liste. Ces extraits peuvent être configurés via un fichier snippets qui ressemble à ceci:
Exporter par défaut [
{Groupe: 'Button', nom: 'Strong', code: `<Button Weight =" Strong "> Button </utton>`,
},
// etc...]; Si vos composants doivent être imbriqués dans les composants du fournisseur personnalisé, vous pouvez fournir un fichier de composant React personnalisé via l'option frameComponent , qui est un chemin d'accès à un fichier qui exporte un composant. Par exemple, si votre bibliothèque de composants a plusieurs thèmes:
Importer React à partir de 'react'; import {themeprovider} de '../path/to/your/theming-system' ;export function frameComponent ({thème, enfants}) {
return <themeprovider theme = {thème}> {enfants} </memeprovider>;} Vous pouvez fournir des variables supplémentaires dans le cadre de votre JSX via l'option scope , qui est un chemin vers un fichier qui exporte un crochet useScope qui renvoie un objet de portée. Par exemple, si vous vouliez exposer une variable theme basée sur le contexte aux consommateurs de votre salle de jeux:
import {usetheme} de '../path/to/your/theming-system' ;export function default uSescope () {{
return {thème: useTheme (),
}; Si votre bibliothèque de composants dispose de plusieurs thèmes, vous pouvez personnaliser la salle de jeux pour rendre chaque thème simultanément via l'option de configuration themes .
Semblable à votre fichier components , votre fichier themes devrait exporter un seul objet ou une série d'exportations nommées. Par exemple:
export {themea} de './themea' ;export {thèmeb} de' ./themeb' ;// etc ... Si un fichier tsconfig.json est présent dans votre projet, les types d'hélices statiques sont analysés à l'aide de React-Docgen-TypeScript pour fournir une meilleure complétion automatique dans l'éditeur de salle de jeux.
Par défaut, tous les fichiers .ts et .tsx dans le répertoire de travail actuel sont inclus, à l'exclusion de node_modules .
Si vous devez personnaliser ce comportement, vous pouvez fournir une option typeScriptFiles dans playroom.config.js , qui est un tableau de globs.
module.exports = {
// ...
TypeScriptFiles: ['src / composants / ** / *. {ts, tsx}', '! ** / node_modules'],}; Si vous avez besoin de personnaliser les options d'analyse, vous pouvez fournir une option reactDocgenTypescriptConfig dans playroom.config.js .
Par exemple:
module.exports = {
// ...
reactDocGentyPescriptConfig: {propFilter: (prop, composant) => {// ...},
},}; La salle de jeux prend en charge le chargement des fichiers de configuration ESM. Par défaut, la salle de jeux recherchera un fichier de configuration de salle de jeux avec une extension de fichier .js , .mjs ou .cjs .
Si vous êtes intéressé à intégrer une salle de jeux dans le livre de contes, consultez le livre de contes-play-Play.
La salle de jeux est conçue pour fonctionner sur les dernières versions stables de tous les principaux navigateurs. Certaines fonctionnalités peuvent ne pas fonctionner comme prévu dans les navigateurs plus âgés.
Mit.
