Storybook: Suporte Angular 2

Transformamos nossa UI principal em um aplicativo separado. Estamos planejando usá-lo para NG2 diretamente. Veja: https://github.com/kadirahq/storybook-ui

Legal. Estou ansioso por isso! :)

Ei, @arunoda , qual será a abordagem para este?
Queremos criar uma IU de livro de histórias específica para ng2? Só estou curioso para obter uma descrição de alto nível do que vocês querem alcançar e ver se posso ajudar

As APIs do Angular 2 se tornaram estáveis ​​com o lançamento do RC5. Não haverá nenhuma alteração significativa agora. Portanto, é um bom momento para começar a desenvolvê-lo. cc: @arunoda @mnmtanish

@arunoda : Estou inclinado a pensar que isso está baixo no roteiro, mas no caso do Angular, nesta divisão, a ideia seria para um ng2-storybook teórico para deixar storybook-ui 's React interface incorporar componentes angulares, então? Isso foi feito?

@ tycho01 Você está certo. É uma espécie de baixa em nossa prioridade.
Espero que possamos começar com o storybook-ui como base. Portanto, a maioria dos addons poderia usar isso.
Estou procurando ajuda para alguém começar a trabalhar nisso. Se sim, envie um ping em nosso Slack. Vamos conversar mais.

@ tycho01 , @arunoda vocês me

@alterx : Ponteiros que obtive: storybook-react é separado de storybook-ui (roda dentro de um iframe); a próxima etapa é experimentar para ver se ele pode ser substituído por uma versão Angular. Não comecei desde minha última tentativa.

Verifique isto - https://twitter.com/amcdnl/status/804776546246520832

@ tycho01 , verifiquei a fonte e eles têm um componente de reação completamente separado que é basicamente um iframe glorificado (https://github.com/storybooks/react-storybook/blob/master/src/client/manager/preview.js). Devemos ser capazes de carregar as histórias do ng2 nesse iframe de visualização.

react-storybook basicamente estende o Provider fornecido por storybook-ui , renderiza o Preview mencionado anteriormente e controla a API de história. Em seguida, uma nova instância deste provedor é passada para o renderStorybookUI

import renderStorybookUI from '@kadira/storybook-ui';
import Provider from './provider';

const rootEl = document.getElementById('root');
renderStorybookUI(rootEl, new Provider());

Depois disso, storybook-ui está no controle, ele constrói o contexto (que inclui o provedor) e cria o aplicativo (usando createApp mantra-core). O provedor (junto com os outros adereços de contexto) são então injetados no módulo ui (https://github.com/storybooks/storybook-ui/blob/master/src/modules/ui/routes.js ) que constrói a visualização usando o método renderPreview definido quando o criamos em react-storybook

@arunoda , por favor me avise se estiver faltando alguma coisa

@amcdnl , isso parece promissor. Você se importaria de me dar uma visão geral rápida de como funciona? (nada extravagante, apenas o quadro geral)

@amcdnl : obrigado pelo link, vamos dar uma olhada.
Edit: você teria alguma demonstração com ele? Estou tendo problemas para encontrar algo pronto para ser executado.

@ MikeRyan52 ^^

@alterx Sim. Você está 100% correto.
Também precisamos expor uma API semelhante ao React Storybook para criar histórias.

Possível importado de angular-storybook ou similar.

@arunoda Você tem um url para o livro de histórias angular que mencionou? O Google está

@bcowgill afaik isso ainda não existe, além do @amcdnl mencionado acima

Também há isso agora - http://www.angularplayground.it/

Está no roteiro agora:
https://github.com/storybooks/storybook/blob/master/ROADMAP.md#angular

Então, o Storybook for Vue será lançado em breve 🎉

Isso adiciona um bom exemplo de como uma versão para NG2 poderia ser feita.
Existem almas corajosas assistindo este tópico que estariam dispostas a trabalhar juntas e fazer acontecer?

Eu poderia dar uma olhada, você tem um repo url em mãos, @ndelangen ?

Você está olhando para isso 😄

Storybook é um monorepo, nós temos pacotes aqui, publicados para a npm separadamente.

Atualmente, o aplicativo vue ainda não está no mestre, então aqui estão três links para começar:
https://github.com/storybooks/storybook/tree/release/3.2/app/vue
https://github.com/storybooks/storybook/blob/release/3.2/app/vue/src/client/preview/render.js
https://github.com/storybooks/storybook/blob/release/3.2/app/vue/src/server/config/webpack.config.js#L40

O render.js é onde está a maior parte do código específico do Vue e na parte do servidor há uma configuração do webpack que é diferente.

Não há problema em duplicar muito código no início! Abordaremos isso mais tarde. Depois de descobrirmos o que é realmente comum e o que não é.

Só para começar, eu diria

1. duplique todo o app / vue para app / angular (estamos falando do angular2 e acima, certo?)
2. ajuste a configuração do webpack, para que carregue o código de algumas coisas angulares e compile.
3. ajuste render.js até que algo apareça, de preferência o componente que você esperava
4. Experimente alguns addons
5. Corrigir bugs
6. Experimente o que agora é possível
7. Escreva a documentação, liste quais complementos funcionam
8. Rascunho de postagem do blog (posso fazer isso ou adicionar sua conta à nossa publicação média)
9. Lançamento do plano
10. Faça a versão alfa
11. Corrigir bugs
12. Lançamento real, publicação de postagem de blog, anúncio de tweet
13. Corrija mais bugs
14. Experimente e adicione suporte para mais complementos

@shilman é o nosso novo chef mestre 👨‍🍳

Você pode se juntar a nós no descanso para ter uma experiência de chat um pouco mais rápida do que no github 💬

https://storybooks-slackin.herokuapp.com

Perfeito, @ndelangen!
Vou dar uma olhada no código e entrar no canal do Slack: D

@alterx Você está trabalhando nisso agora? Estou clonando a versão vue.js agora

@ Jordan-Hall, já existe um PR com um aplicativo básico funcionando.
Por favor, consulte # 1474
No momento, estou verificando os complementos para ver quais funcionam fora da caixa. Você se importaria de entrar no canal do Slack para que possamos coordenar?

@alterx Claro. Qual é o canal https://storybooks-slackin.herokuapp.com parece estar fora do ar?

Ups, era para ser isso 🤔
Talvez @ndelangen possa ajudar com isso.
Por enquanto, meu RP cobre o trabalho básico (renderização de um componente, envio de informações). É um pouco diferente do que outros fizeram com vue e react , mas angular 's maneira de fazer as coisas ( NgModules ) necessário algumas mudanças.

Nosso objetivo é incluir suporte para Angular (2+) como parte da versão 3.3.

Sim, o heroku decidiu encerrar o aplicativo, então acabei de implantar no now.sh:
https://now-examples-slackin-nqnzoygycp.now.sh/

¯\_(ツ)_/¯

Eu não entendo porque as pessoas não usam o gitter para este tipo de projetos xD

Ei pessoal só queria ver se alguém ainda está trabalhando ativamente neste?

Sim, o trabalho está progredindo:
https://github.com/storybooks/storybook/pull/1474

Sim, eu preciso encontrar algum tempo hoje para enviar algumas alterações que tenho no meu computador. Provavelmente farei isso durante o almoço 😄

Parabéns pela fusão!
Posso npm i -g @storybook/[email protected] e experimentar ou é necessária uma configuração mais manual para jogar?

Adoraria ajudar a testar isso e contribuir 👍

@shilman @alterx Eu estava com a impressão de que uma versão alfa foi feita com o aplicativo angular?
Parece que ainda não é o caso?

Em quanto tempo poderíamos fazer 1? @tomatosource aqui está disposta a fazer alguns testes para nós 🙇

@shilman mencionou que gostaria de lançá-lo "nos próximos dias" no canal Slack Angular, então acho que ainda não foi lançado :)

alguma atualização? :-)

Na verdade, sim =) https://github.com/storybooks/storybook/releases/tag/v3.3.0-alpha.3

@Hypnosphi como você realmente instala isso? Tipo de projeto não suportado. (código: UNDETECTED)

@aaronksaunders Você tem um repo que pode compartilhar conosco para nos ajudar a depurar a CLI? Além disso, se você quiser fazer isso manualmente, há um aplicativo de exemplo aqui com uma configuração completa: https://github.com/storybooks/storybook/tree/release/3.3/examples/angular-cli

@alterx @tomatosource Desculpe pelo atraso no lançamento - já foi lançado e adoraríamos sua ajuda nos testes!

qual versão do angular é compatível?

@ToniaDemchuk related:
https://github.com/storybooks/storybook/pull/1474#issuecomment -329659825
https://github.com/storybooks/storybook/pull/1474#issuecomment -335527228

@Insayt @ LTiger14 @MTariqAziz @MathieuFouillet @Quramy @RemiAWE @VadimDez @aitboudad @bermanboris @cheapsteak @ christian-bromann @diagramatics @dlcardozo @ elad- morfisec @jbueza @realqrockrock @ jbueza @realqrockj @ jbueza @realqrockj @ jbueza @realqrock0 @juednaport @juednocko @juedshlee @juednockrock @ jbueza @realqrock0 @jjinthlee @juednockrock0 @juednockrockie0 @juednocko7 @patixnapp0 @realqrockthlee0 @juednockthlee @juedshlee7 @ patixnapp0 . @ tiny-dancer @ tycho01 @ priley86

O suporte para Angular2 + está em alfa ( 3.3.0-alpha.4 para ser preciso) graças a um esforço hercúleo de @alterx para fazê-lo funcionar. Ajude-nos a testá-lo para que possamos deixá-lo pronto para o lançamento!

Veja como começar em apenas um minuto:

cd my-angular-project
yarn add @storybook/cli<strong i="33">@alpha</strong>
yarn getstorybook
yarn storybook
open http://localhost:6006

Esta é a aparência do livro de histórias examples/angular-cli de nosso repositório, e você deverá ver uma versão simplificada em seu navegador:

Experimente e diga-nos aqui se tiver algum problema. Você também pode se juntar a nós no canal #angular da folga do

Muito obrigado pela sua ajuda!

@shilman executando yarn getstorybook lança o seguinte erro:

(function (exports, require, module, __filename, __dirname) { import updateNotifier from 'update-notifier';
                                                              ^^^^^^
SyntaxError: Unexpected token import
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)

alterar o arquivo node_modules/@storybook/cli/bin/index.js:1 resolveria o problema:

require("babel-register")({
  ignore: /node_modules\/(?!@storybook)/
});

Estranho, nós usamos o babel-register em cli@alpha

@aitboudad qual versão de nó você usa?

qual versão de nó você usa?

v8.9.0, não está relacionado à versão do nó, mas é sobre o babel que ignora a transpilação de todos os arquivos localizados no node_modules

@shilman, o segundo problema que tenho é

odule build failed: Error: Typescript emitted no output for node_modules/@storybook/angular/dist/client/preview/angular/app.token.ts.

resolvido definindo transpileOnly como verdadeiro em /node_modules/@storybook/angular/dist/server/config/webpack.config.js

{
  test: /\.ts?$/,
  use: [
    {
      loader: 'ts-loader',
      options: {
        transpileOnly: true
      }
    },
    { loader: 'angular2-template-loader' }
  ]
}

Recurso ausente:

Passando um NgModule :
No momento, não há como passar um NgModule personalizado, o que torna a implementação atual muito limitada.

é sobre o babel que ignora a transpilação de todos os arquivos localizados no node_modules

Oh, entendo, vai consertar. Eu me pergunto como funcionava antes

@aitboudad Muito obrigado por depurar isso! @Hypnosphi corrigiu o problema da CLI e acabei de lançar. Tentarei obter as correções angulares logo!

https://github.com/storybooks/storybook/releases/tag/v3.3.0-alpha.4

@aitboudad , estamos cientes desse recurso ausente e estamos tentando compensar isso. O problema com NgModules personalizados é que, com nossa implementação atual, construímos nossos módulos de maneira programática e os fornecemos. Tenho algumas alterações em meu local para permitir a passagem de provedores e esquemas, mas agora não podemos apenas permitir a passagem de módulos personalizados, pois um módulo pode conter vários componentes.

Qual é o seu caso de uso exato? Talvez possamos descobrir algo.

Além disso, usar apenas transpile o deixará sem verificação de tipo. Precisamos examinar isso antes de fazer essa alteração.

@alterx Qual é o seu caso de uso exato?

E se meu componente exigir alguns módulos externos como material ou qualquer coisa para funcionar, como poderíamos lidar com isso com a abordagem atual?

Nesse caso, deve bastar com fornecedores, importações e esquemas (no caso de você precisar, idk, elementos personalizados). O problema de permitir a entrada de um módulo personalizado é que não podemos controlar a quantidade de componentes que um usuário pode enviar e ele pode quebrar. Storybook é sobre como desenvolver e testar componentes como unidades isoladas. Isso funciona um pouco diferente no React e no Vue, mas para angular, precisamos fazer algumas suposições e limitar o escopo.

Estou trabalhando em algo que deve permitir que você passe provedores e esquemas, com importações e declarações, é um pouco mais complexo. Esse tipo de feedback é perfeito, queríamos tirar algo que pudesse ser testado e ver o que as pessoas precisam.

@aitboudad Tentei replicar seu problema com um aplicativo @angular/cli recém-criado e getstorybook mas tudo funciona conforme o esperado. Você poderia fornecer mais alguns detalhes sobre sua configuração? Versão angular? Versão do TypeScript?
Não serei capaz de testá-lo imediatamente, embora.

@alterx acabou de tentar novamente e parece estar funcionando bem com a nova versão alfa, obrigado!

Oh, perfeito!
E fique tranquilo, temos planos de oferecer suporte de alguma forma para fornecer importações, provedores e assim por diante para o módulo que criamos. Só precisamos descobrir :)

Acabei de tentar executar storybook / examples / angular-cli com as seguintes versões de pacote:

  "dependencies": {
    "@angular/animations": "4.3.5",
    "@angular/common": "4.3.5",
    "@angular/compiler": "4.3.5",
    "@angular/core": "4.3.5",
    "@angular/forms": "4.3.5",
    "@angular/http": "4.3.5",
    "@angular/platform-browser": "4.3.5",
    "@angular/platform-browser-dynamic": "4.3.5",
    "@angular/router": "4.3.5",
    "core-js": "2.4.1",
    "rxjs": "5.4.3",
    "zone.js": "0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.3.2",
    "@angular/compiler-cli": "4.3.5",
    "@angular/language-service": "4.3.5",
    "@storybook/addon-actions": "3.3.0-alpha.4",
    "@storybook/addon-links": "3.3.0-alpha.4",
    "@storybook/addon-notes": "3.3.0-alpha.4",
    "@storybook/addon-knobs": "3.3.0-alpha.4",
    "@storybook/addons": "3.3.0-alpha.4",
    "@storybook/angular": "3.3.0-alpha.4",
    "@types/jasmine": "2.5.53",
    "@types/node": "6.0.87",
    "codelyzer": "3.1.2",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "3.2.0",
    "karma": "1.4.1",
    "karma-chrome-launcher": "2.0.0",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "0.2.3",
    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "karma-trx-reporter": "0.2.9",
    "protractor": "5.2.0",
    "ts-node": "3.2.0",
    "tslint": "5.6.0",
    "typescript": "2.4.0"
  }

Ele trava no console do navegador depois de navegar para os componentes _Addon Knobs_ com o erro ao tentar obter component.__annotations__[0] :

helpers.js:32 Uncaught TypeError: Cannot read property '0' of undefined
    at getComponentMetadata (helpers.js:32)
    at prepareComponent (helpers.js:140)
    at index.js:33
    at withKnobs (index.js:48)
    at client_api.js:109
    at initModule (helpers.ts:87)
    at helpers.ts:167
    at later (helpers.ts:27)
    at ZoneDelegate.invokeTask (zone.js:424)
    at Zone.runTask (zone.js:191)

@ToniaDemchuk Muito obrigado por testá-lo. Como você configurou em sua máquina? Você pode compartilhar uma reprodução? Muito Obrigado!

Ei pessoal, estou super entusiasmado com a facilidade de adicionar isso. Alguns problemas.

Tive que adicionar "@storybook/addon-notes": "3.3.0-alpha.4", ao package.json também.

Existe uma maneira de respeitar meus caminhos de texto datilografado locais? Eles são definidos em tsconfig.
repo: https://github.com/scttcper/ngx-color
Eu recebo Cannot find module 'ngx-color/helpers'. porque não vou pegá-los.

@shilman O exemplo que você pode encontrar aqui https://github.com/ToniaDemchuk/storybook/tree/angular-4.3.5-sample
Comandos de configuração:

npm i
npm i -g @storybook/cli
npm run storybook

Abra localhost:9009 no navegador e navegue até _Addon Knobs> Simple_ no menu

Funcionou:

Isso não:

Erro no console:

@neo , tentei reproduzir, mas para mim está tudo funcionando bem. Você pode compartilhar mais contexto? Talvez você tenha um repo?

@shilman , @alterx , Sobre o problema com o angular v4.3.5 ( @ToniaDemchuk ), pesquisei o problema (não estou muito familiarizado com o angular, então ...) No complemento de botões, há código que depende fato de que um objeto de componente tem um array annotations nele. Esta matriz é definida pelo pacote angular/core na nova versão. Mas na versão anterior (neste caso, v4.3.5) eles usavam um pacote reflect-metadata (aqui está o diff de onde ele foi removido). Eu realmente não sei o que fazer com isso.

Sim, essa mudança definitivamente tem um impacto em como obtemos os metadados. Vai
olhar para ele assim que eu tiver algum tempo livre. Provavelmente em algum momento no próximo
semana

No sábado, 9 de dezembro de 2017, 11h41, Igor [email protected] escreveu:

@shilman https://github.com/shilman , @alterx
https://github.com/alterx , Sobre o problema com angular v4.3.5 (
@ToniaDemchuk https://github.com/toniademchuk ), eu pesquisei o
problema (não estou muito familiarizado com angular, então ...) No addon de botões,
existe um código que depende do fato de que um objeto de componente tem um
matriz de anotações nele. Esta matriz é definida pelo pacote angular / núcleo no
nova versão. Mas na versão anterior (neste caso, v4.3.5) eles usaram um
pacote reflect-metadata (aqui está o diff
https://github.com/angular/angular/commit/cac130eff9b9cb608f2308ae40c42c9cd1850c4d#diff-635fe23be5795132e3385c8f4899dc3aR58
onde foi removido). Eu realmente não sei o que fazer com isso.

-
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/storybooks/storybook/issues/269#issuecomment-350492916 ,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/ABhRmCjzdKQq2NNVYU7UTc-NVmvd8a9Tks5s-sZEgaJpZM4I70nl
.

@aitboudad , aqui está o PR para oferecer suporte aos metadados do módulo personalizado.
Até agora, adicionei exemplos para Pipes e serviços. Eu preciso testar diretivas, esquemas, etc, mas eles devem estar funcionando também.

Diz-me o que pensas

@ToniaDemchuk , você se importaria de verificar novamente com as novas alterações?

Acabei de lançar 3.3.0-alpha.6 contendo um monte de mudanças angulares de @alterx @ igor-dv @ralzinov

https://github.com/storybooks/storybook/releases/tag/v3.3.0-alpha.6

As mudanças angulares relevantes incluem:

• Adicionada anotação de tipo para auxiliares, arquivos de declaração ts adicionados para angu… # 2459
• Adicionando metadados extras ao módulo / componentes # 2526
• Correção da substituição da saída do componente prop # 2456
• [WIP] Versões angulares suportam # 2467
• Angular Adicionar tubos personalizados suporte # 2518

Tente atualizar para esta versão em seus projetos e nos informe se tiver algum problema. Espero que este seja o último lançamento RC, e podemos fazer um lançamento 3.3 adequado amanhã!

@alterx é exatamente o que estou procurando, obrigado!

seria bom se pudéssemos fornecer o conteúdo do modelo em vez do componente:

storiesOf('Welcome', module).add('to Storybook', () => ({
  moduleMetadata: { imports: [FormModule] },
  template: '<dynamic-forms [form]="form"></dynamic-forms>',
  props: {
    form: [{ key: name }]
  },
}));

@shilman por 3.3.0-alpha.6 parece bom para mim, o único problema que percebi é que os complementos não estão incluídos no pacote como @storybook/angular , resolvido por

yarn add @storybook/addon-actions<strong i="14">@alpha</strong> @storybook/addon-links<strong i="15">@alpha</strong> @storybook/addon-notes<strong i="16">@alpha</strong>

@ igor-dv, Obrigado pela resposta. Agora está funcionando bem.

@shilman , Algumas mudanças quebraram o exemplo angular-cli, agora NameComponent e ServiceComponent não estão compilando devido a digitações:

ERROR in ./src/stories/index.ts
(200,19): error TS2345: Argument of type '() => { component: typeof NameComponent; props: { field: string; }; moduleMetadata: { imports: an...' is not assignable to parameter of type 'IGetStory'.
  Type '{ component: typeof NameComponent; props: { field: string; }; moduleMetadata: { imports: any[]; s...' is not assignable to type '{ props?: { [p: string]: any; }; moduleMetadata?: { [p: string]: NgModuleMetadata; }; component: ...'.
    Types of property 'moduleMetadata' are incompatible.
      Type '{ imports: any[]; schemas: any[]; declarations: (typeof CustomPipePipe)[]; providers: any[]; }' is not assignable to type '{ [p: string]: NgModuleMetadata; }'.
        Property 'imports' is incompatible with index signature.
          Type 'any[]' is not assignable to type 'NgModuleMetadata'.

Suponho que moduleMetadata?: { [p: string]: NgModuleMetadata; } em IGetStory deve ser igual a moduleMetadata?: NgModuleMetadata . Depois de lançar metadados do módulo em exemplos para any tudo funciona conforme o esperado.

Também enfrentei alguns problemas com carregadores scss para angular, semelhante ao problema @neo descrito acima.
Resolvi o problema com a seguinte regra de configuração do webpack:

    storybookBaseConfig.module.rules.push({
      test: /\.scss$/,
      loaders: ["to-string-loader", "css-loader", "sass-loader"],
      include: path.resolve(__dirname, '../')
    });

Parece que o angular não funciona com style-loader e você precisa usar to-string-loader .
Seria bom fornecer documentação e (ou) exemplo de como usar componentes com folhas de estilo scss.

@ToniaDemchuk Sim, você acertou o problema com moduleMetadata?: { [p: string]: NgModuleMetadata; } . Na verdade eu consertei isso já aqui com moduleMetadata?: Partial<NgModuleMetadata>;

Publiquei a alteração de 3.3.0-rc.0 que está sob a tag NPM rc vez de alpha .

@ToniaDemchuk , experimente e nos informe se isso corrige para você.

Obrigado a todos pela paciência e trabalho árduo para nos ajudar a resolver isso!

Ainda tem o erro com o carregador de scss e o angular storybook v3.3.3 com alterações de @ralzinov :

node_modules / @ storybook /: grep -r "moduleMetadata ?: Parcial"
angular/index.d.ts: moduleMetadata?: Partial<NgModuleMetadata>;

npm run storybook
https://gist.github.com/karlos1337/18e4538b37128818ec3e4b507b3b3a3c

Obrigado.

@ karlos1337 , dê uma olhada neste problema - # 2616.

Lançado em 3.3! 🎉

Encerrando esta edição, e se você estiver tendo problemas com o livro de histórias do angular, registre uma edição separada. Obrigado!