Skip to content

Commit 4d41d60

Browse files
jonniebigodesjonniebigodes
authoredJan 10, 2025··
Merge pull request #795 from chromaui/docs_intro_storybook_angular_19
Docs: Intro to Storybook - Angular 19 updates
2 parents 5072bb6 + 17b3b6b commit 4d41d60

22 files changed

+32
-21
lines changed
 

‎content/intro-to-storybook/angular/en/composite-component.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: 'Assemble a composite component'
33
tocTitle: 'Composite component'
44
description: 'Assemble a composite component out of simpler components'
5-
commit: 'd6ccebb'
5+
commit: 'cddf606'
66
---
77

88
Last chapter, we built our first component; this chapter extends what we learned to make TaskList, a list of Tasks. Let’s combine components together and see what happens when we introduce more complexity.
@@ -30,6 +30,7 @@ import { Task } from '../models/task.model';
3030

3131
@Component({
3232
selector: 'app-task-list',
33+
standalone: false,
3334
template: `
3435
<div class="list-items">
3536
<div *ngIf="loading">loading</div>
@@ -167,6 +168,7 @@ import { Task } from '../models/task.model';
167168

168169
@Component({
169170
selector: 'app-task-list',
171+
standalone: false,
170172
+ template: `
171173
+ <div class="list-items">
172174
+ <app-task

‎content/intro-to-storybook/angular/en/data.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: 'Wire in data'
33
tocTitle: 'Data'
44
description: 'Learn how to wire in data to your UI component'
5-
commit: '33e3597'
5+
commit: 'db7a1a2'
66
---
77

88
So far, we have created isolated stateless components-–great for Storybook, but ultimately not helpful until we give them some data in our app.
@@ -143,6 +143,7 @@ import { Task } from '../models/task.model';
143143
@Component({
144144
- selector:'app-task-list',
145145
+ selector: 'app-pure-task-list',
146+
standalone: false,
146147
template: `
147148
<div class="list-items">
148149
<app-task
@@ -213,6 +214,7 @@ import { Observable } from 'rxjs';
213214

214215
@Component({
215216
selector: 'app-task-list',
217+
standalone: false,
216218
template: `
217219
<app-pure-task-list
218220
[tasks]="tasks$ | async"

‎content/intro-to-storybook/angular/en/deploy.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: 'Deploy Storybook'
33
tocTitle: 'Deploy'
44
description: 'Learn how to deploy Storybook online'
5-
commit: '3f59dc0'
5+
commit: '359daa2'
66
---
77

88
Throughout this tutorial, we built components on our local development machine. At some point, we'll need to share our work to get team feedback. Let's deploy Storybook online to help teammates review UI implementation.

‎content/intro-to-storybook/angular/en/get-started.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: 'Storybook for Angular tutorial'
33
tocTitle: 'Get started'
44
description: 'Set up Angular Storybook in your development environment'
5-
commit: 'e14c490'
5+
commit: '20f5b89'
66
---
77

88
Storybook runs alongside your app in development mode. It helps you build UI components isolated from the business logic and context of your app. This edition of the Intro to Storybook tutorial is for Angular; other editions exist for [React](/intro-to-storybook/react/en/get-started), [React Native](/intro-to-storybook/react-native/en/get-started), [Vue](/intro-to-storybook/vue/en/get-started), [Svelte](/intro-to-storybook/svelte/en/get-started) and [Ember](/intro-to-storybook/ember/en/get-started).

‎content/intro-to-storybook/angular/en/screen.md

+4-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: 'Construct a screen'
33
tocTitle: 'Screens'
44
description: 'Construct a screen out of components'
5-
commit: 'ec8b30a'
5+
commit: 'da405c1'
66
---
77

88
We've concentrated on building UIs from the bottom up, starting small and adding complexity. Doing so has allowed us to develop each component in isolation, figure out its data needs, and play with it in Storybook. All without needing to stand up a server or build out screens!
@@ -148,6 +148,7 @@ import { Component, Input } from '@angular/core';
148148

149149
@Component({
150150
selector: 'app-pure-inbox-screen',
151+
standalone: false,
151152
template: `
152153
<div *ngIf="error" class="page lists-show">
153154
<div class="wrapper-message">
@@ -179,6 +180,7 @@ import { Observable } from 'rxjs';
179180

180181
@Component({
181182
selector: 'app-inbox-screen',
183+
standalone: false,
182184
template: `
183185
<app-pure-inbox-screen [error]="error$ | async"></app-pure-inbox-screen>
184186
`,
@@ -198,6 +200,7 @@ import { Component } from '@angular/core';
198200

199201
@Component({
200202
selector: 'app-root',
203+
standalone: false,
201204
- templateUrl: './app.component.html',
202205
- styleUrls: ['./app.component.css']
203206
+ template: `

‎content/intro-to-storybook/angular/en/simple-component.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: 'Build a simple component'
33
tocTitle: 'Simple component'
44
description: 'Build a simple component in isolation'
5-
commit: 'b4ebe43'
5+
commit: 'a4bf2a8'
66
---
77

88
We’ll build our UI following a [Component-Driven Development](https://www.componentdriven.org/) (CDD) methodology. It’s a process that builds UIs from the “bottom-up”, starting with components and ending with screens. CDD helps you scale the amount of complexity you’re faced with as you build out the UI.
@@ -29,6 +29,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
2929

3030
@Component({
3131
selector: 'app-task',
32+
standalone: false,
3233
template: `
3334
<div class="list-item">
3435
<label [attr.aria-label]="task.title + ''" for="title">
@@ -206,6 +207,7 @@ import { Task } from '../models/task.model';
206207

207208
@Component({
208209
selector: 'app-task',
210+
standalone: false,
209211
template: `
210212
<div class="list-item {{ task?.state }}">
211213
<label

‎content/intro-to-storybook/angular/en/test.md

+1
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ Change `src/app/components/task.component` to the following:
4848
```diff:title=src/app/components/task.component.ts
4949
@Component({
5050
selector: 'app-task',
51+
standalone: false,
5152
template: `
5253
<div class="list-item {{ task?.state }}">
5354
<label

‎content/intro-to-storybook/angular/en/using-addons.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: 'Addons'
33
tocTitle: 'Addons'
44
description: 'Learn how to integrate and use the popular Controls addon'
5-
commit: 'd648b74'
5+
commit: 'f6d3d1c'
66
---
77

88
Storybook has a robust ecosystem of [addons](https://storybook.js.org/docs/configure/user-interface/storybook-addons) that you can use to enhance the developer experience for everybody in your team. View them all [here](https://storybook.js.org/addons).
@@ -43,6 +43,7 @@ Now let's fix the issue with overflowing by adding a style to `task.component`:
4343
```diff:title=src/app/components/task.component.ts
4444
@Component({
4545
selector: 'app-task',
46+
standalone: false,
4647
template: `
4748
<div class="list-item {{ task?.state }}">
4849
<label

‎content/intro-to-storybook/angular/es/composite-component.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: 'Ensambla un componente compuesto'
33
tocTitle: 'Componente Compuesto'
44
description: 'Ensambla un componente compuesto a partir de componentes simples'
5-
commit: 'd6ccebb'
5+
commit: 'cddf606'
66
---
77

88
En el capítulo anterior construimos nuestro primer componente; este capítulo extiende lo que aprendimos para construir `TaskListComponent`, una lista de Tareas. Combinemos varios componentes y veamos qué sucede cuando se añade más complejidad a la ecuación.

‎content/intro-to-storybook/angular/es/data.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: 'Introducir datos'
33
tocTitle: 'Datos'
44
description: 'Aprende como introducir datos a tus componentes interfaz gráfica'
5-
commit: '33e3597'
5+
commit: 'db7a1a2'
66
---
77

88
Hasta ahora hemos creado componentes aislados que no contienen estado propio, sino que reciben entradas por medio de

‎content/intro-to-storybook/angular/es/deploy.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: 'Desplegar Storybook'
33
tocTitle: 'Desplegar'
44
description: 'Aprende a desplegar Storybook'
5-
commit: '3f59dc0'
5+
commit: '359daa2'
66
---
77

88
A lo largo de este tutorial, creamos componentes en nuestra máquina de desarrollo local. En algún momento, tendremos

‎content/intro-to-storybook/angular/es/get-started.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: 'Tutorial de Storybook para Angular'
33
tocTitle: 'Empezando'
44
description: 'Configurar Angular Storybook en tu entorno de desarrollo'
5-
commit: 'e14c490'
5+
commit: '20f5b89'
66
---
77

88
Storybook se ejecuta junto con su aplicación en modo de desarrollo. Le ayuda a crear componentes de interfaz de

‎content/intro-to-storybook/angular/es/screen.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: 'Construir una pantalla'
33
tocTitle: 'Pantallas'
44
description: 'Construir una pantalla utilizando componentes'
5-
commit: 'ec8b30a'
5+
commit: 'da405c1'
66
---
77

88
Nos hemos concentrado en crear interfaces de usuario desde "abajo hacia arriba"; empezando con los componentes individuales y añadiendo complejidad gradualmente. Esto nos ha permitido desarrollar cada componente de forma aislada, determinar los datos que necesita y jugar con ellos en Storybook. ¡Todo sin necesidad de utilizar un servidor o, siquiera, construir una sola pantalla!

‎content/intro-to-storybook/angular/es/simple-component.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: 'Construye un componente simple'
33
tocTitle: 'Componente simple'
44
description: 'Construye un componente simple en aislamiento'
5-
commit: 'b4ebe43'
5+
commit: 'a4bf2a8'
66
---
77

88
Construiremos nuestra UI siguiendo la metodología [Component-Driven Development](https://www.componentdriven.org/)

‎content/intro-to-storybook/angular/es/using-addons.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: 'Complementos'
33
tocTitle: 'Complementos'
44
description: 'Aprenda a integrar y utilizar el popular complemento de controles'
5-
commit: 'd648b74'
5+
commit: 'f6d3d1c'
66
---
77

88
Storybook tiene un ecosistema robusto de [complementos](https://storybook.js.

‎content/intro-to-storybook/angular/ja/composite-component.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: '複合的なコンポーネントを組み立てる'
33
tocTitle: '複合的なコンポーネント'
44
description: '単純なコンポーネントから複合的なコンポーネントを組み立てましょう'
5-
commit: '3da0d0a'
5+
commit: 'cddf606'
66
---
77

88
前の章では、最初のコンポーネントを作成しました。この章では、学習した内容を基にタスクのリストである `TaskList` を作成します。それではコンポーネントを組み合わせて、複雑になった場合にどうすればよいか見てみましょう。

‎content/intro-to-storybook/angular/ja/data.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: 'データを繋ぐ'
33
tocTitle: 'データ'
44
description: 'UI コンポーネントとデータを繋ぐ方法を学びましょう'
5-
commit: 'c416f74'
5+
commit: 'db7a1a2'
66
---
77

88
これまでに、Storybook の切り離された環境で、状態を持たないコンポーネントを作成してきました。しかし、究極的には、アプリケーションからコンポーネントにデータを渡さなければ役には立ちません。

‎content/intro-to-storybook/angular/ja/deploy.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: 'Storybook をデプロイする'
33
tocTitle: 'デプロイ'
44
description: 'Storybook をインターネット上にデプロイする方法を学びましょう'
5-
commit: '1586781'
5+
commit: '359daa2'
66
---
77

88
ここまで、ローカルの開発マシンでコンポーネントを作成してきました。しかし、ある時点で、フィードバックを得るためにチームに作業を共有しなければならないこともあるでしょう。チームメートに UI の実装をレビューしてもらうため、Storybook をインターネット上にデプロイしてみましょう。

‎content/intro-to-storybook/angular/ja/get-started.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: 'Angular 向け Storybook のチュートリアル'
33
tocTitle: 'はじめに'
44
description: '開発環境に Storybook を導入しましょう'
5-
commit: '8dba3e3'
5+
commit: '20f5b89'
66
---
77

88
Storybook は開発時にアプリケーションと並行して動きます。Storybook を使用することで、UI コンポーネントをビジネスロジックやコンテキストから切り離して開発できるようになります。 この Storybook チュートリアルのバージョンは Angular 向けです。他にも [React](/intro-to-storybook/react/en/get-started)、 [React Native](/intro-to-storybook/react-native/en/get-started)、 [Vue](/intro-to-storybook/vue/en/get-started)、 [Svelte](/intro-to-storybook/svelte/en/get-started) and [Ember](/intro-to-storybook/ember/en/get-started) 向けのバージョンがあります。

‎content/intro-to-storybook/angular/ja/screen.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: '画面を作る'
33
tocTitle: '画面'
44
description: 'コンポーネントをまとめて画面を作りましょう'
5-
commit: 'f8d168d'
5+
commit: 'da405c1'
66
---
77

88
今までボトムアップ (小さく始めてから複雑性を追加していく) で UI の作成に集中してきました。ボトムアップで作業することで、Storybook で遊びながら、それぞれのコンポーネントを切り離された環境で、それぞれに必要なデータを考えながら開発することができました。サーバーを立ち上げたり、画面を作ったりする必要は全くありませんでした！

‎content/intro-to-storybook/angular/ja/simple-component.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: '単純なコンポーネントを作る'
33
tocTitle: '単純なコンポーネント'
44
description: '単純なコンポーネントを切り離して作りましょう'
5-
commit: '6ba8a4e'
5+
commit: 'a4bf2a8'
66
---
77

88
それでは、[コンポーネント駆動開発](https://www.componentdriven.org/) (CDD) の手法にのっとって UI を作ってみましょう。コンポーネント駆動開発とは、UI を最初にコンポーネントから作り始めて、最後に画面を作り上げる「ボトムアップ」の開発プロセスです。CDD を用いれば UI を作る際に直面する複雑性を軽減することができます。

‎content/intro-to-storybook/angular/ja/using-addons.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: 'アドオン'
33
tocTitle: 'アドオン'
44
description: 'アドオンを組み込んで利用する方法を、人気のある例を使って学びましょう'
5-
commit: 'f39e46b'
5+
commit: 'f6d3d1c'
66
---
77

88
Storybook にはチームの開発効率を向上する堅牢な[アドオン](https://storybook.js.org/docs/angular/configure/storybook-addons)のエコシステムがあります。[こちら](https://storybook.js.org/addons) でアドオンのリストが見られます。

0 commit comments

Comments
 (0)
Please sign in to comment.