Storybook: Soporte Angular 2

Hemos convertido nuestra interfaz de usuario principal en una aplicación separada. Estamos planeando usarlo para NG2 directamente. Ver: https://github.com/kadirahq/storybook-ui

Frio. ¡Espero que llegue! :)

Hey, @arunoda , ¿cuál será el enfoque para este?
¿Queremos crear una interfaz de usuario de libro de cuentos específica de ng2? Solo tengo curiosidad por obtener una descripción de alto nivel de lo que quieren lograr y ver si puedo ayudar

Las API de Angular 2 se han estabilizado con el lanzamiento de RC5. No habrá cambios importantes ahora. Así que es un buen momento para empezar a desarrollarlo. cc: @arunoda @mnmtanish

@arunoda : Me inclino a pensar que esto es bajo en la hoja de ruta, pero en el caso de Angular, en esta división, la idea sería que un ng2-storybook teórico permita que storybook-ui Reaccione interfaz incrustar componentes angulares entonces? ¿Se ha hecho eso?

@ tycho01 Tienes razón. Es una especie de baja en nuestra prioridad.
Espero que podamos empezar con storybook-ui como base. Entonces, la mayoría de los complementos podrían usar eso.
Estoy buscando ayuda para que alguien comience a trabajar en ello. Si es así, envíame un ping en nuestro Slack. Hablemos mas

@ tycho01 , @arunoda ustedes, chicos, avíseme si comienzan a trabajar en esto.

@alterx : Punteros que obtuve: storybook-react está separado de storybook-ui (se ejecuta dentro de un iframe); El siguiente paso es experimentar para ver si se puede reemplazar con una versión Angular. No he comenzado desde mi último intento.

Consulte esto: https://twitter.com/amcdnl/status/804776546246520832

@ tycho01 , verifiqué la fuente y tienen un componente de reacción completamente separado que es básicamente un iframe glorificado (https://github.com/storybooks/react-storybook/blob/master/src/client/manager/preview.js). Deberíamos poder cargar las historias de ng2 en ese iframe de vista previa.

react-storybook básicamente extiende el Provider proporcionado por storybook-ui , renderiza el Preview y maneja la API de la historia. Luego, se pasa una nueva instancia de este proveedor al renderStorybookUI

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

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

Después de esto, storybook-ui tiene el control, construye el contexto (que incluye al proveedor) y crea la aplicación (usando createApp mantra-core). El proveedor (junto con los otros accesorios de contexto) se inyectan en el módulo ui (https://github.com/storybooks/storybook-ui/blob/master/src/modules/ui/routes.js ) que genera la vista previa usando el método renderPreview definido cuando lo creamos en react-storybook

@arunoda , avísame si me falta algo

@amcdnl , eso parece prometedor. ¿Le importaría darme una descripción general rápida de cómo funciona? (nada lujoso, solo el panorama general)

@amcdnl : gracias por vincular, lo comprobaré.
Editar: ¿quizás tendrías alguna demostración con él? Tengo problemas para encontrar algo listo para ejecutar.

@ MikeRyan52 ^^

@alterx Sí. Estás 100% correcto.
También necesitamos exponer una API similar a React Storybook para crear historias.

Posible importado de angular-storybook o similar.

@arunoda ¿Tiene una URL para el libro de cuentos angular que mencionó? Google se está quedando seco.

@bcowgill afaik esto aún no existe, aparte de @amcdnl mencionado anteriormente

También existe esto ahora: http://www.angularplayground.it/

Está en la hoja de ruta ahora:
https://github.com/storybooks/storybook/blob/master/ROADMAP.md#angular

Así que Storybook for Vue se lanzará pronto 🎉

Esto agrega un buen ejemplo de cómo se podría hacer una versión para NG2.
¿Hay almas valientes viendo este hilo que estén dispuestas a trabajar juntas y hacer que suceda?

Podría echar un vistazo, ¿tienes una URL de repositorio a la mano, @ndelangen ?

Lo estás mirando 😄

Storybook es un monorepo, tenemos paquetes aquí, publicados en npm por separado.

Actualmente, la aplicación vue aún no está en la versión maestra, por lo que aquí hay 3 enlaces para comenzar:
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

El render.js es donde se encuentra la mayor parte del código específico de Vue y en la parte del servidor hay una configuración de paquete web que es diferente.

¡Está bien duplicar mucho código al principio! Nos ocuparemos de eso más tarde. Después, encontramos lo que es realmente común y lo que no lo es.

Solo para empezar, diría

1. duplicar la totalidad de app / vue a app / angular (estamos hablando de angular2 y más, ¿verdad?)
2. modifique la configuración del paquete web, para que cargue el código algunas cosas angulares y compile.
3. modificar render.js hasta que aparezca algo, preferiblemente el componente que esperaba
4. Prueba algunos complementos
5. Corregir errores
6. Prueba lo que ahora es posible
7. Escribe documentación, enumera qué complementos funcionan
8. Borrador de entrada de blog (puedo hacerlo o agregar su cuenta a nuestra publicación mediana)
9. Lanzamiento del plan
10. Hacer lanzamiento alfa
11. Corregir errores
12. Lanzamiento real, publicación de blog, anuncio de tweet
13. Corregir más errores
14. Pruebe y agregue soporte para más complementos

@shilman es nuestro chef maestro de lanzamiento 👨‍🍳

Puede unirse a nosotros en holgura para obtener una experiencia de chat un poco más rápida que github 💬

https://storybooks-slackin.herokuapp.com

Perfecto, @ndelangen!
Echaré un vistazo al código y me uniré al canal de Slack: D

@alterx ¿Estás trabajando en eso ahora? Estoy clonando la versión de vue.js ahora

@ Jordan-Hall, ya hay un PR con una aplicación básica funcionando.
Consulte el n. ° 1474
Actualmente estoy revisando los complementos para ver qué funcionan de fábrica. ¿Te importaría unirte al canal de Slack para que podamos coordinarnos?

@alterx Seguro. ¿Cuál es el canal que https://storybooks-slackin.herokuapp.com parece estar caído?

Vaya, se supone que es así 🤔
Quizás @ndelangen pueda ayudar con eso.
Por el momento, mi PR cubre el trabajo básico (renderizar un componente, enviar entradas). Es un poco diferente de lo que otros hicieron con vue y react , pero angular 's manera de hacer las cosas ( NgModules ) necesarios algunos cambios.

Nuestro objetivo es incluir compatibilidad con Angular (2+) como parte de la versión 3.3.

Sí, heroku decidió cerrar la aplicación, así que la implementé en now.sh:
https://now-examples-slackin-nqnzoygycp.now.sh/

¯\_(ツ)_/¯

No entiendo por qué la gente no usa gitter para este tipo de proyectos xD

Hola chicos, ¿solo querían ver si alguien todavía está trabajando activamente en este?

Sí, el trabajo avanza:
https://github.com/storybooks/storybook/pull/1474

Sí, necesito encontrar algo de tiempo hoy para enviar algunos cambios que tengo en mi computadora. Probablemente lo haga durante el almuerzo 😄

¡Felicidades por la fusión!
¿Puedo npm i -g @storybook/[email protected] y probar esto o se requiere una configuración más manual para jugar?

Me encantaría ayudar a probar esto y contribuir 👍

@shilman @alterx ¿ Tenía la impresión de que se había realizado una versión alfa con la aplicación angular?
¿Parece que todavía no es así?

¿Qué tan pronto podríamos hacer 1? @tomatosource aquí está dispuesto a hacer algunas pruebas por nosotros 🙇

@shilman mencionó que le gustaría lanzarlo "en los próximos días" en el canal de holgura angular, así que supongo que no se ha lanzado :)

¿alguna actualización? :-)

De hecho sí =) https://github.com/storybooks/storybook/releases/tag/v3.3.0-alpha.3

@Hypnosphi, ¿cómo se instala realmente esto? Tipo de proyecto no admitido. (código: UNDETECTED)

@aaronksaunders ¿Tiene un repositorio que pueda compartir con nosotros para ayudarnos a depurar la CLI? Además, si desea hacerlo a mano, hay una aplicación de ejemplo aquí con una configuración completa: https://github.com/storybooks/storybook/tree/release/3.3/examples/angular-cli

@alterx @tomatosource Perdón por la demora en el lanzamiento, ya está disponible y me encantaría tu ayuda para probarlo.

¿Qué versión de angular admite?

@ToniaDemchuk relacionado:
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 @ Cristiano-Bromann @diagramatics @dlcardozo @ Elad-morphisec @jbueza @johannesjo @jshthornton @ justinlee0777 @mixn @ npatta01 @qrrock @realappie @ruedap @ tiny-dancer @ tycho01 @ priley86

El soporte de Angular2 + está en alfa ( 3.3.0-alpha.4 para ser precisos) gracias a un esfuerzo hercúleo de @alterx para que funcione. ¡Ayúdenos a probarlo para que podamos prepararlo para su lanzamiento!

A continuación, le indicamos cómo comenzar en solo un minuto:

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

Así es como se ve el libro de cuentos examples/angular-cli de nuestro repositorio, y debería ver una versión simplificada en su navegador:

Por favor pruébalo y avísanos aquí si tienes algún problema. También puede unirse a nosotros en el canal #angular de Storybook slack para obtener ayuda en tiempo real.

¡Muchas gracias por su ayuda!

@shilman ejecutando yarn getstorybook arroja el siguiente error:

(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)

cambiar el archivo node_modules/@storybook/cli/bin/index.js:1 resolvería el problema:

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

Extraño, en realidad usamos babel-register en cli@alpha

@aitboudad ¿Qué versión de nodo usas?

¿Qué versión de nodo usas?

v8.9.0, no está relacionado con la versión del nodo, pero se trata de babel que ignora la transpilación de todos los archivos ubicados en node_modules

@shilman, el segundo problema que tengo es

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

resuelto estableciendo transpileOnly en verdadero en /node_modules/@storybook/angular/dist/server/config/webpack.config.js

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

Característica que falta:

Pasando un NgModule :
En este momento no hay forma de pasar un NgModule personalizado que hace que la implementación actual sea muy limitada.

se trata de babel que ignora la transpilación de todos los archivos ubicados en node_modules

Oh, ya veo, lo arreglaré. Me pregunto cómo solía funcionar antes

@aitboudad ¡ Muchas gracias por depurar esto! @Hypnosphi solucionó el problema de CLI y lo acabo de publicar. ¡Intentaremos solucionar los arreglos angulares pronto!

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

@aitboudad , somos conscientes de esa característica que falta y estamos tratando de compensarla. El problema con los NgModules personalizados es que, con nuestra implementación actual, construimos nuestros módulos de manera programática y los proporcionamos. Tengo algunos cambios en mi local para permitir el paso de proveedores y esquemas, pero en este momento no podemos permitir pasar módulos personalizados ya que un módulo podría contener varios componentes.

¿Cuál es tu caso de uso exacto? Quizás podamos resolver algo.

Además, usar solo transpile lo dejará sin verificación de tipo. Necesitamos analizar esto antes de realizar este cambio.

@alterx ¿Cuál es su caso de uso exacto?

¿Qué pasa si mi componente requiere algunos módulos externos como material o lo que sea para funcionar, cómo podríamos manejarlo con el enfoque actual?

En ese caso debería ser suficiente con proveedores, importaciones y esquemas (en caso de que lo necesite, idk, elementos personalizados). El problema de permitir la entrada de un módulo personalizado es que no podemos controlar la cantidad de componentes que un usuario puede enviar y podría romperse. Storybook trata sobre el desarrollo y la prueba de componentes como unidades aisladas. Esto funciona un poco diferente en React y Vue, pero para el angular necesitamos hacer algunas suposiciones y limitar el alcance.

Estoy trabajando en algo que debería permitirle pasar proveedores y esquemas, con importaciones y declaraciones, es un poco más complejo. Este tipo de comentarios es perfecto, queríamos obtener algo que pudiera probarse y ver qué necesita la gente.

@aitboudad Traté de replicar su problema con una aplicación @angular/cli recién creada y getstorybook pero todo funciona como se esperaba. ¿Podría proporcionar más detalles sobre su configuración? ¿Versión angular? ¿Versión de TypeScript?
Aunque no podré probarlo de inmediato.

@alterx acaba de intentarlo de nuevo y parece que funciona bien con la nueva versión alfa, ¡gracias!

¡Oh perfecto!
Y tenga la seguridad de que tenemos planes para admitir alguna forma de proporcionar importaciones, proveedores, etc., al módulo que creamos. Solo tenemos que resolverlo :)

Intenté ejecutar storybook / examples / angular-cli con las siguientes versiones del paquete:

  "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"
  }

Se bloquea en la consola del navegador después de navegar a los componentes _Addon Knobs_ con el error al intentar obtener 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 Muchas gracias por probarlo. ¿Cómo lo configuró en su máquina? ¿Puedes compartir una reproducción? ¡Muchas gracias!

Hola chicos, muy emocionado de lo fácil que fue agregar esto. Pocos problemas.

Tuve que agregar "@storybook/addon-notes": "3.3.0-alpha.4", a package.json también.

¿Hay alguna forma de respetar mis rutas de mecanografiado locales? Están definidos en tsconfig.
repositorio: https://github.com/scttcper/ngx-color
Recibo Cannot find module 'ngx-color/helpers'. porque no los está recogiendo.

@shilman El ejemplo lo puedes encontrar aquí https://github.com/ToniaDemchuk/storybook/tree/angular-4.3.5-sample
Comandos de configuración:

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

Abra localhost:9009 en el navegador y navegue a _Addon Knobs> Simple_ en el menú

Esto funcionó:

Esto no lo hizo:

Error en la consola:

@neo , he intentado reproducir, pero para mí todo está funcionando bien. ¿Puedes compartir más contexto? ¿Quizás tienes un repositorio?

@shilman , @alterx , con respecto al problema con angular v4.3.5 ( @ToniaDemchuk ), he investigado el problema (no estoy familiarizado con angular mucho, así que ...) En el complemento de perillas, hay un código que se basa en hecho de que un objeto componente tiene una matriz annotations en él. Esta matriz está establecida por el paquete angular/core en la nueva versión. Pero en la versión anterior (en este caso v4.3.5) usaban un paquete reflect-metadata (aquí está la diferencia donde se eliminó). Realmente no sé qué hacer con él.

Sí, este cambio definitivamente tiene un impacto en cómo obtenemos los metadatos. Será
Míralo una vez que tenga algo de tiempo libre. Probablemente en algún momento del próximo
semana

El sábado 9 de diciembre de 2017 a las 11:41 a.m., Igor [email protected] escribió:

@shilman https://github.com/shilman , @alterx
https://github.com/alterx , Respecto al problema con angular v4.3.5 (
@ToniaDemchuk https://github.com/toniademchuk ), he investigado el
problema (no estoy familiarizado con angular mucho, así que ...) En el complemento de perillas,
hay un código que se basa en el hecho de que un objeto componente tiene un
matriz de anotaciones en él. Esta matriz se establece mediante el paquete angular / core en el
nueva versión. Pero en la versión anterior (en este caso v4.3.5) usaban un
paquete reflect-metadata (aquí está el diff
https://github.com/angular/angular/commit/cac130eff9b9cb608f2308ae40c42c9cd1850c4d#diff-635fe23be5795132e3385c8f4899dc3aR58
donde fue eliminado). Realmente no sé qué hacer con él.

-
Estás recibiendo esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/storybooks/storybook/issues/269#issuecomment-350492916 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/ABhRmCjzdKQq2NNVYU7UTc-NVmvd8a9Tks5s-sZEgaJpZM4I70nl
.

@aitboudad , aquí está el PR para admitir metadatos de módulos personalizados.
Hasta ahora he agregado ejemplos de tuberías y servicios. Necesito probar Directivas, Esquemas, etc. pero también deberían estar funcionando.

Déjame saber lo que piensas

@ToniaDemchuk , ¿te importaría comprobar de nuevo con nuevos cambios?

Acabo de lanzar 3.3.0-alpha.6 que contiene un montón de cambios angulares de @alterx @ igor-dv @ralzinov

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

Los cambios angulares relevantes incluyen:

• Se agregó una anotación de tipo a los ayudantes, se agregaron archivos de declaración ts para angu… # 2459
• Agregar metadatos adicionales al módulo / componentes # 2526
• Arreglar la anulación de salida de prop del componente # 2456
• [WIP] Compatibilidad con versiones angulares n . ° 2467
• Soporte de tuberías personalizadas Angular Add # 2518

Intente actualizar a esta versión en sus proyectos y avísenos si tiene algún problema. Espero que esta sea la última versión de RC, ¡y podamos hacer una versión 3.3 adecuada para mañana!

@alterx eso es exactamente lo que estoy buscando, ¡gracias!

Sería bueno si pudiéramos proporcionar el contenido de la plantilla en lugar del 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 bien, el único problema que noté es que los complementos no están incluidos en el paquete como @storybook/angular , resuelto 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, Gracias por la respuesta. Ahora está funcionando bien.

@shilman , algunos cambios rompieron el ejemplo de angular-cli, ahora NameComponent y ServiceComponent no se compilan debido a mecanografía:

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'.

Supongo que moduleMetadata?: { [p: string]: NgModuleMetadata; } en IGetStory debería ser moduleMetadata?: NgModuleMetadata . Después de enviar los metadatos del módulo en ejemplos a any todo funciona como se esperaba.

También me he enfrentado a algunos problemas con los cargadores scss para angular, similar al problema @neo descrito anteriormente.
Resolví el problema con la siguiente regla de configuración del paquete web:

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

Parece que el angular no funciona con style-loader y necesita usar to-string-loader lugar.
Sería bueno proporcionar documentación y (o) ejemplo de cómo usar componentes con hojas de estilo scss.

@ToniaDemchuk Sí, tienes razón con moduleMetadata?: { [p: string]: NgModuleMetadata; } . En realidad, ya lo arreglé aquí con moduleMetadata?: Partial<NgModuleMetadata>;

Publiqué el cambio de 3.3.0-rc.0 que está debajo de la etiqueta NPM rc lugar de alpha .

@ToniaDemchuk, por favor, pruébelo y avísenos si eso lo soluciona.

¡Gracias a todos por su paciencia y su arduo trabajo para ayudarnos a sacar esto!

Todavía tengo el error con el cargador scss y el libro de cuentos angular v3.3.3 con los cambios de @ralzinov :

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

npm ejecutar libro de cuentos
https://gist.github.com/karlos1337/18e4538b37128818ec3e4b507b3b3a3c

Gracias.

@ karlos1337 , eche un vistazo a este número - # 2616.

¡Lanzado en 3.3! 🎉

Cerrando este problema, y ​​si tiene problemas con el libro de cuentos para angular, presente un problema por separado. ¡Gracias!