Storybook: Angular2のサポート

コアUIを別のアプリにしました。 NG2に直接使用する予定です。 参照： https ：

涼しい。 楽しみにしています！ :)

ねえ、 @ arunoda 、それでこれのアプローチはどうなるの？
ng2固有のストーリーブックUIを作成しますか？ あなたたちが達成したいことの高レベルの説明を取得し、私が助けることができるかどうかを確認することに興味があります

Angular 2 APIは、RC5のリリースで安定しました。 現在、重大な変更はありません。 それで、それを開発し始める良い時期です。 cc： @arunoda @mnmtanish

@arunoda ：これはロードマップでは低いと思う傾向がありますが、Angularの場合、この分割では、理論上のng2-storybook storybook-ui反応させるというアイデアになります。インターフェースはAngularコンポーネントを埋め込みますか？ それは行われましたか？

@ tycho01その通りです。 それは私たちの優先順位が少し低いです。
storybook-uiをベースとして始められるといいのですが。 したがって、ほとんどのアドオンはそれを使用できます。
私は誰かがそれに取り組み始めるための助けを探しています。 もしそうなら、私たちのSlackで私にpingしてください。 もっと話しましょう。

@ tycho01、あなたたちは、あなたがこの上で作業を開始なら、私に知らせて@arunoda。

@alterx ：私が得たポインタ： storybook-reactはstorybook-uiとは別です（iframe内で実行されます）。 次のステップは、Angularバージョンに置き換えることができるかどうかを実験することです。 私の最後の試み以来始めていません。

これをチェックアウト-https ：//twitter.com/amcdnl/status/804776546246520832

@ tycho01 、私はソースをチェックしました、そしてそれらは基本的に栄光のiframe（https://github.com/storybooks/react-storybook/blob/master/src/client/manager/preview.js）である完全に別個のreactコンポーネントを持っています。 そのプレビューiframeにng2ストーリーをロードできるはずです。

react-storybook基本的に、 storybook-uiによって提供されるProvider拡張し、前述のPreviewをレンダリングし、ストーリーAPIを処理します。 次に、このプロバイダーの新しいインスタンスがrenderStorybookUI渡されます

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

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

この後、 storybook-uiが制御され、コンテキスト（プロバイダーを含む）を構築し、アプリを作成します（mantra-coreのcreateApp ）。 次に、プロバイダー（および他のコンテキストプロップ）がuiモジュール（https://github.com/storybooks/storybook-ui/blob/master/src/modules/ui/routes.js）に挿入されます。 ） react-storybook作成したときに定義されたrenderPreviewメソッドを使用してプレビューを作成します

@arunoda 、何か足りないものがあれば教えてください

@amcdnl 、それは有望に見えます。 それがどのように機能するかについて簡単に説明していただけませんか。 （派手なものはなく、全体像だけです）

@amcdnl ：リンクしてくれてありがとう、チェックしてみます。
編集：あなたはおそらくそれで何かデモを持っていますか？ 実行する準備ができているものを見つけるのに問題があります。

@ MikeRyan52 ^^

@alterxうん。 あなたは100％正しいです。
また、ストーリーを作成するには、ReactStorybookと同様のAPIを公開する必要があります。

angular-storybookなどからインポートされる可能性があります。

@arunodaあなたが言及したangular-

@bcowgill afaikこれは、上記の@amcdnlを除いて、まだ存在していません。

これも今あります-http：//www.angularplayground.it/

現在ロードマップにあります：
https://github.com/storybooks/storybook/blob/master/ROADMAP.md#angular

そのため、Vueのストーリーブックはまもなくリリースされる予定です🎉

これは、NG2のバージョンを作成する方法のかなり良い例を追加します。
このスレッドを見て、一緒に働いてそれを実現させてくれる勇敢な魂はいますか？

私は見てみることができます、あなたは便利なリポジトリURLを持っていますか、 @ ndelangen ？

あなたはそれを見ています😄

Storybookはモノレポです。ここにはパッケージがあり、npmに個別に公開されています。

現在、vueアプリはまだマスターになっていないため、次の3つのリンクを使用してください。
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

render.jsは、Vue固有のコードのほとんどが存在する場所であり、サーバー部分には異なるwebpack構成があります。

最初はたくさんのコードを複製しても大丈夫です！ これについては後で説明します。 本当に一般的なものとそうでないものを見つけた後。

はじめに、私は言うだろう

1. app / vue全体をapp / angularに複製します（angular2以上について話しているのですか？）
2. webpackの設定を微調整して、コードをいくつかの角度のあるものをロードしてコンパイルします。
3. 何かが表示されるまでrender.jsを微調整します。できれば、期待するコンポーネントを調整します。
4. いくつかのアドオンを試してください
5. バグを修正する
6. 今可能なことを試してください
7. ドキュメントを作成し、どのアドオンが機能するかをリストします
8. ドラフトブログ投稿（私はそれを行うことができます、またはあなたのアカウントを私たちの中規模の出版物に追加することができます）
9. 計画リリース
10. アルファリリースを行う
11. バグを修正する
12. 実際のリリース、ブログ投稿の公開、ツイートの発表
13. その他のバグを修正
14. より多くのアドオンのサポートを追加してみてください

@shilmanは私たちのリリースマスターシェフです👨‍🍳

Slackに参加して、githubよりも少し速いチャットエクスペリエンスを得ることができます💬

https://storybooks-slackin.herokuapp.com

パーフェクト、@ ndelangen！
コードを見て、Slackチャネルに参加します：D

@alterxあなたは今それに取り組んでいますか？ 私は今vue.jsバージョンのクローンを作成しています

@ Jordan-ホール、基本的なアプリが機能しているPRがすでにあります。
＃1474を参照してください
私は現在、アドオンをチェックして、箱から出してすぐに機能するものを確認しています。 調整できるように、Slackチャネルに参加していただけませんか。

@alterxもちろんです。 https://storybooks-slackin.herokuapp.comがダウンしているように見えるチャンネルは何ですか？

おっと、それはそれであるはずです🤔
たぶん@ndelangenがそれを助けることができます。
とりあえず、私のPRは基本的な作業（コンポーネントのレンダリング、入力の送信）をカバーしています。 他の人がvueとreactで行ったこととは少し異なりますが、 angularのやり方（ NgModules ）にはいくつかの変更が必要でした。

3.3リリースの一部としてAngular（2+）サポートを含めることを目指しています。

ええ、herokuはアプリをシャットダウンすることに決めたので、now.shにデプロイしました。
https://now-examples-slackin-nqnzoygycp.now.sh/

¯\_(ツ)_/¯

人々がこの種のプロジェクトxDに単にgitterを使用しない理由がわかりません

Hey Guysは、誰かがまだこれに積極的に取り組んでいるかどうかを確認したかっただけですか？

はい、作業は進行中です：
https://github.com/storybooks/storybook/pull/1474

はい、今日、コンピューターに加えた変更を送信する時間を見つける必要があります。 おそらく昼食時にそれをします😄

マージおめでとうございます！
npm i -g @storybook/[email protected]を試してみることができますか、それともプレイするにはもっと手動のセットアップが必要ですか？

これをテストして貢献したいと思います👍

@shilman @alterxAngularアプリでアルファリリースが行われたという印象を受けましたか？
まだそうではないようですか？

どれくらい早く1を行うことができますか？ ここの@tomatosourceは私たちのためにいくつかのテストを喜んで行います🙇

@shilmanは、Angular slackチャネルで「数日以内に」リリースしたいと述べたので、まだリリースされていないと思います:)

更新はありますか？ :-)

実際にはそうです=） https://github.com/storybooks/storybook/releases/tag/v3.3.0-alpha.3

@Hypnosphi実際にこれをどのようにインストールしますか？ サポートされていないプロジェクトタイプ。 （コード：未検出）

@aaronksaunders CLIのデバッグに役立つリポジトリを共有できますか？ また、手動で実行する場合は、完全なセットアップを備えたサンプルアプリがここにあります： https ：

@alterx @tomatosourceリリースが遅れて申し訳ありません-現在リリースされており、テストにご協力いただければ幸いです。

どのバージョンのAngularをサポートしていますか？

@ToniaDemchuk関連：
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 @クリスチャン・bromann @diagramatics @dlcardozo @ ELAD-morphisec @jbueza @johannesjo @jshthornton @ justinlee0777 @mixn @ npatta01 @qrrock @realappie @ruedap @ tiny-dancer @ tycho01 @ priley86

Angular2 +のサポートは（アルファである3.3.0-alpha.4正確には）@alterxから超人的な努力のおかげでそれが働いて取得します。 リリース準備ができるように、テストにご協力ください。

ほんの数分で始める方法は次のとおりです。

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

リポジトリのexamples/angular-cliストーリーブックは次のようになり、ブラウザに簡略化されたバージョンが表示されます。

ぜひお試しいただき、問題がございましたらこちらからお知らせください。 Storybook slack #angularチャンネルに参加して、リアルタイムのヘルプを

ご協力いただき誠にありがとうございます！

yarn getstorybook実行している@shilmanは、次のエラーをスローします。

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

ファイルnode_modules/@storybook/cli/bin/index.js:1を変更すると、問題が解決します。

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

奇妙なことに、私たちは実際にcli@alphaでbabel-registerを使用しています

@aitboudadどのノードバージョンを使用していますか？

どのノードバージョンを使用していますか？

v8.9.0、ノードのバージョンとは関係ありませんが、 node_modulesあるすべてのファイルのトランスパイルを無視するbabelに関するものです

@shilman私が持っている2番目の問題は

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

/node_modules/@storybook/angular/dist/server/config/webpack.config.jsでtranspileOnlyをtrueに設定することで解決

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

不足している機能：

カスタムNgModule渡す：
現在、現在の実装を非常に制限するカスタムNgModuleを渡す方法はありません。

node_modulesあるすべてのファイルのトランスパイルを無視するbabelについてです

なるほど、修正します。 以前はどのように機能していたのだろうか

@aitboudadこれをデバッグしてくれてありがとう！ @HypnosphiはCLIの問題を修正し、リリースしたばかりです。 すぐに角度修正を取得しようとします！

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

@aitboudad 、私たちはその不足している機能を認識しており、それを

あなたの正確なユースケースは何ですか？ 多分私たちは何かを理解することができます。

また、トランスパイルのみを使用すると、型チェックが不要になります。 この変更を行う前に、これを調べる必要があります。

@alterxあなたの正確なユースケースは何ですか？

コンポーネントがマテリアルなどの外部モジュールを必要とする場合、現在のアプローチでどのように処理できますか？

その場合、プロバイダー、インポート、スキーマ（必要な場合は、idk、カスタム要素）で十分です。 カスタムモジュールを組み込む際の問題は、ユーザーが送信できるコンポーネントの量を制御できず、破損する可能性があることです。 Storybookは、コンポーネントを分離されたユニットとして開発およびテストすることを目的としています。 これはReactとVueで少し異なりますが、角度についてはいくつかの仮定を行い、スコープを制限する必要があります。

私は、インポートと宣言を使用してプロバイダーとスキーマを渡すことができるようにする必要があるものに取り組んでいますが、それはもう少し複雑です。 この種のフィードバックは完璧です。テストして人々が何を必要としているかを確認できるものを入手したかったのです。

@aitboudad新しく作成した@angular/cliアプリとgetstorybookて問題を再現しようとしましたが、すべてが期待どおりに機能します。 セットアップについてもう少し詳しく教えてください。 Angularバージョン？ TypeScriptバージョン？
すぐにテストすることはできません。

@alterxは再試行しましたが、新しいアルファバージョンで正常に動作しているようです。ありがとうございます。

ああ、完璧だ！
また、作成したモジュールにインポートやプロバイダーなどを提供する方法をサポートする予定ですので、ご安心ください。 私たちはそれを理解する必要があります:)

次のパッケージバージョンでstorybook / examples / angular-cliを実行しようとしました。

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

component.__annotations__[0]を取得しようとしたときにエラーが発生した_Addon Knobs_コンポーネントに移動した後、ブラウザコンソールでクラッシュします。

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テストしてくれてありがとう。 マシンにどのように設定しましたか？ 再現を共有できますか？ どうもありがとう！

やあみんな、これを追加するのがいかに簡単だったかにとても興奮しています。 いくつかの問題。

package.jsonにも"@storybook/addon-notes": "3.3.0-alpha.4",を追加する必要がありました。

ローカルのtypescriptパスを尊重する方法はありますか？ それらはtsconfigで定義されています。
リポジトリ： https ：
Cannot find module 'ngx-color/helpers'.を取得しないので、取得します。

@shilmanここにある例https://github.com/ToniaDemchuk/storybook/tree/angular-4.3.5-sample
セットアップコマンド：

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

ブラウザでlocalhost:9009を開き、メニューの[アドオンノブ]> [シンプル]に移動します

これはうまくいきました：

これはしませんでした：

コンソールのエラー：

@neo 、私は再現しようとしましたが、私にとってはすべてがうまく機能しています。 より多くのコンテキストを共有できますか？ 多分あなたはレポを持っていますか？

@ shilman 、 @ alterx 、angular v4.3.5（ @ToniaDemchuk ）の問題に関して、私はこの問題を調査しました（Angularにあまり詳しくないので、...）コードがあります。コンポーネントオブジェクトにannotations配列があるという事実。 この配列は、新しいバージョンのangular/coreパッケージによって設定されます。 ただし、以前のバージョン（この場合はv4.3.5）では、 reflect-metadataパッケージを使用していました（これが削除された差分です）。 どうしたらいいのかよくわかりません。

ええ、この変更はメタデータの取得方法に間違いなく影響を及ぼします。 意志
暇があれば調べてみてください。 おそらく次のいつか
週間

土、2017年12月9日には、11：41 AMイゴールの[email protected]は書きました：

@shilman https://github.com/shilman、@ alterx
https://github.com/alterx、Angular v4.3.5の問題について（
@ToniaDemchuk https://github.com/toniademchuk ）、私は調査しました
問題（私は角度にあまり詳しくないので...）ノブアドオンでは、
コンポーネントオブジェクトが持っているという事実に依存するコードがあります
その上に注釈配列。 この配列は、Angular / Coreパッケージによって設定されます。
新しいバージョン。 しかし、以前のバージョン（この場合はv4.3.5）では、
Reflect-metadataパッケージ（ここにdiffがあります
https://github.com/angular/angular/commit/cac130eff9b9cb608f2308ae40c42c9cd1850c4d#diff-635fe23be5795132e3385c8f4899dc3aR58
削除された場所）。 どうしたらいいのかよくわかりません。

—
あなたが言及されたのであなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/storybooks/storybook/issues/269#issuecomment-350492916 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/ABhRmCjzdKQq2NNVYU7UTc-NVmvd8a9Tks5s-sZEgaJpZM4I70nl
。

@aitboudad 、カスタムモジュールメタデータをサポートするためのPRです。
これまで、パイプとサービスの例を追加しました。 ディレクティブ、スキーマなどをテストする必要がありますが、それらも機能するはずです。

どう考えているか教えてください

@ToniaDemchuk 、新しい変更をもう一度確認して

@alterx @ igor -dv @ ralzinovからのAngularの変更の束を含む3.3.0-alpha.6をリリースしました

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

関連するAngularの変更は次のとおりです。

• ヘルパーに型注釈を追加し、anguのts宣言ファイルを追加しました… ＃2459
• モジュール/コンポーネントへのメタデータの追加＃2526
• ngコンポーネントの小道具出力オーバーライド＃2456を修正
• [WIP] Angularバージョンは＃2467をサポートします
• Angular Addカスタムパイプサポート＃2518

プロジェクトでこのバージョンにアップグレードしてみてください。問題が発生した場合はお知らせください。 これが最後のRCリリースになることを願っています。明日までに適切な3.3リリースを行うことができます。

@alterxはまさに私が探しているものです、ありがとう！

コンポーネントの代わりにテンプレートコンテンツを提供できれば便利です。

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

@shilman for 3.3.0-alpha.6は私には良さそうですが、私が気付いた唯一の問題は、アドオンが@storybook/angularようにパッケージに含まれていないことです。

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、ご回答ありがとうございます。 今では正常に動作しています。

@shilman 、いくつかの変更がangular-cliの例を壊しました。現在、NameComponentとServiceComponentは入力のためにコンパイルされていません。

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

IGetStoryのmoduleMetadata?: { [p: string]: NgModuleMetadata; }はmoduleMetadata?: NgModuleMetadataになっていると思います。 例のモジュールメタデータをanyキャストした後、すべてが期待どおりに機能します。

また、上記の@neoの問題と同様に、Angular用のscssローダーでいくつかの問題に直面しました。
次のwebpack設定ルールで問題を解決しました。

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

角度がstyle-loader機能しないようで、代わりにto-string-loaderを使用する必要があります。
ドキュメントや（または）scssスタイルシートでコンポーネントを使用する方法の例を提供するとよいでしょう。

@ToniaDemchukはい、 moduleMetadata?: { [p: string]: NgModuleMetadata; }問題が発生します。 実際、私はすでにここでmoduleMetadata?: Partial<NgModuleMetadata>;それを修正しました

私は、@ralzinovの変更に公開3.3.0-rc.0 NPMタグの下にあるrcの代わりにalpha 。

@ToniaDemchuk試してみて、問題が解決するかどうかお知らせください。

私たちがこれを解決するのを助けるためにあなたの忍耐と努力に感謝します！

@ralzinovの変更を伴うscssローダーとAngularStorybookv3.3.3でまだエラーがあります：

node_modules / @ storybook /：grep -r "moduleMetadata？：部分的「」
angular/index.d.ts: moduleMetadata?: Partial<NgModuleMetadata>;

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

ありがとう。

@ karlos1337 、この問題を見てください-＃2616。

3.3でリリース！ 🎉

この号を締めくくり、Angularのストーリーブックで問題が発生した場合は、別の号を提出してください。 ありがとう！