playroom

---

Simultaneamente, projete em uma variedade de temas e tamanhos de tela, alimentados pelo JSX e sua própria biblioteca de componentes.

A sala de jogos permite criar um ambiente de design orientado a código de instalação zero, incorporado a um pacote independente que pode ser implantado juntamente com a documentação do sistema de design existente.

• Itera seus projetos no meio final.

• Crie modelos rápidos e protótipos interativos com código real.

• Exercite e avalie a flexibilidade do seu sistema de design.

• Compartilhe seu trabalho com outras pessoas simplesmente copiando o URL.

Demos

Sistema de design de tranças (temático)

Bumbag

Overdrive

Cubos (temáticos)

Sistema de design de malha (temático)

Sistema de design da Mmitica (temático)

Shopify Polaris

Sistema de design agrícola

Envie -nos um PR se quiser estar nesta lista!

Começando

 $ NPM Instalação-Salo de jogo-dev-dev

Adicione os seguintes scripts ao seu package.json :

 {"scripts": {"salro de jogos: start": "start start", "sala de jogos: build": "bruk da sala de jogos"
  }
}

Adicione um arquivo playroom.config.js à raiz do seu projeto:

 module.exports = {
  Componentes: './src/components',
  outputPath: './dist/playroom',

  // opcional:
  Título: 'My Awesome Library',
  Temas: './src/themes',
  trechos: './playroom/snippets.js',
  FrameComponent: './playroom/framecomponent.js',
  Escopo: './playroom/usescope.js',
  larguras: [320, 768, 1024],
  Porta: 9000,
  OpenBrowser: True,
  Paramtype: 'Pesquisa', // O padrão é 'hash'
  ExampleCode: `<butto> Olá, mundo!    </Button> `,
  BaseUrl: '/sala de jogos/',
  webpackconfig: () => ({// A configuração personalizada do webpack vai aqui ...
  }),
  ifRamesAndBox: 'Allow-scripts',
  DefaultVisibleWidths: [// subconjunto de larguras para exibir na primeira carga
  ],
  DefaultVisibleThemes: [// subconjunto de temas a serem exibidos na primeira carga
  ],};

Nota: as opções port e openBrowser serão definidas como 9000 e true (respectivamente) por padrão sempre que forem omitidas na configuração acima.

Seu arquivo components deve exportar um único objeto ou uma série de exportações nomeadas. Por exemplo:

 exportar {padrão como texto} de '../text'; // reexportando um exportação padrão {botão} de '../button'; // reexportando uma exportação nomeada // etc ...

A opção iframeSandbox pode ser usada para definir o atributo sandbox no iFrame da sala de jogos. É necessário um mínimo de allow-scripts para que a sala de jogo funcione.

Agora que seu projeto está configurado, você pode iniciar um servidor de desenvolvimento local:

 $ NPM Run Run Shoom: Iniciar

Para construir seus ativos para produção:

 $ NPM Run Run Sala de jogos: Construir

Trechos

A sala de jogos permite que você insira rapidamente trechos de código predefinidos, fornecendo visualizações ao vivo nos temas e viewports enquanto navega na lista. Esses trechos podem ser configurados por meio de um arquivo de snippets que se parece com o seguinte:

 exportação padrão [
  {Grupo: 'Button', Nome: 'Strong', Código: `<butter weight =" Strong "> Button </butut>`,
  },
  // etc ...];

Componente de quadro personalizado

Se seus componentes precisarem ser aninhados nos componentes do provedor personalizado, você poderá fornecer um arquivo de componente de reação personalizado através da opção frameComponent , que é um caminho para um arquivo que exporta um componente. Por exemplo, se sua biblioteca de componentes tiver vários temas:

 importar reagir de 'react'; importar {shemeprovider} de '../path/to/your/theming-system' ;export Função padrão FRAMECOMPON ({tema, crianças}) {
  Return <tema tema tema = {tema}> {crianças} </emasprovider>;}

Escopo personalizado

Você pode fornecer variáveis ​​extras dentro do escopo do seu JSX por meio da opção scope , que é um caminho para um arquivo que exporta um gancho useScope que retorna um objeto de escopo. Por exemplo, se você quiser expor uma variável theme baseado em contexto para os consumidores da sua sala de jogos:

 importar {undeetheme} de '../path/to/your/theming-system';
  Retornar {tema: usetheMe (),
  };

Suporte ao tema

Se sua biblioteca de componentes tiver vários temas, você poderá personalizar a sala de jogos para renderizar todos os temas simultaneamente através da opção de configuração themes .

Semelhante ao seu arquivo components , o arquivo themes deve exportar um único objeto ou uma série de exportações nomeadas. Por exemplo:

 exportar {themea} de './TheMea' ;export {themeb} de' ./themeb' ;// etc ...

Suporte TypeScript

Se um arquivo tsconfig.json estiver presente em seu projeto, os tipos de suporte estáticos serão analisados ​​usando o tipo React-Docgen para fornecer melhor conclusão automática no editor da sala de jogos.

Por padrão, todos os arquivos .ts e .tsx no diretório de trabalho atual estão incluídos, excluindo node_modules .

Se você precisar personalizar esse comportamento, poderá fornecer uma opção typeScriptFiles no playroom.config.js , que é uma matriz de globs.

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

Se você precisar personalizar as opções do analisador, poderá fornecer uma opção reactDocgenTypescriptConfig no playroom.config.js .

Por exemplo:

 module.exports = {
  // ...
  reactdocgentypeScriptConfig: {propfilter: (prop, componente) => {// ...},
  },};

Suporte ESM

A sala de jogos suporta carregar arquivos de configuração do ESM. Por padrão, a sala de jogos procurará um arquivo de configuração da sala de jogos com uma extensão de arquivo .js , .mjs ou .cjs .

Integração do livro de histórias

Se você estiver interessado em integrar a sala de jogos no livro de histórias, confira o Storybook-Addon-Playroom.

Suporte do navegador

A sala de jogos é construída para trabalhar nas mais recentes versões estáveis ​​de todos os principais navegadores. Alguns recursos podem não funcionar conforme o esperado em navegadores mais antigos.

Licença

Mit.