-
-
Notifications
You must be signed in to change notification settings - Fork 9.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #26413 from storybookjs/valentin/add-input-support…
…-for-angular Angular: Add support for Angular's input signals
- Loading branch information
Showing
12 changed files
with
1,341 additions
and
1,202 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| /** | ||
| * This postbuild fix is needed to add a ts-ignore to the generated public-types.d.ts file. | ||
| * The AngularCore.InputSignal and AngularCore.InputSignalWithTransform types do not exist in Angular | ||
| * versions < 17.2. In these versions, the unresolved types will error and prevent Storybook from starting/building. | ||
| * This postbuild script adds a ts-ignore statement above the unresolved types to prevent the errors. | ||
| */ | ||
|
|
||
| const fs = require('fs'); | ||
| const path = require('path'); | ||
|
|
||
| const filePath = path.join(__dirname, '../dist/client/public-types.d.ts'); | ||
| const fileContent = fs.readFileSync(filePath, 'utf8'); | ||
| const newContent = fileContent.replaceAll(/(type AngularInputSignal)/g, '// @ts-ignore\n$1'); | ||
| fs.writeFileSync(filePath, newContent, 'utf8'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
51 changes: 51 additions & 0 deletions
51
code/frameworks/angular/template/stories_angular-cli-default-ts/signal/button.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| import { Component, Input, Output, EventEmitter, input } from '@angular/core'; | ||
|
|
||
| @Component({ | ||
| // Needs to be a different name to the CLI template button | ||
| selector: 'storybook-signal-button', | ||
| template: ` <button | ||
| type="button" | ||
| (click)="onClick.emit($event)" | ||
| [ngClass]="classes" | ||
| [ngStyle]="{ 'background-color': backgroundColor }" | ||
| > | ||
| {{ label() }} | ||
| </button>`, | ||
| styleUrls: ['./button.css'], | ||
| }) | ||
| export default class SignalButtonComponent { | ||
| /** | ||
| * Is this the principal call to action on the page? | ||
| */ | ||
| primary = input(false); | ||
|
|
||
| /** | ||
| * What background color to use | ||
| */ | ||
| @Input() | ||
| backgroundColor?: string; | ||
|
|
||
| /** | ||
| * How large should the button be? | ||
| */ | ||
| size = input('medium', { | ||
| transform: (val: 'small' | 'medium') => val, | ||
| }); | ||
|
|
||
| /** | ||
| * Button contents | ||
| */ | ||
| label = input.required({ transform: (val: string) => val.trim() }); | ||
|
|
||
| /** | ||
| * Optional click handler | ||
| */ | ||
| @Output() | ||
| onClick = new EventEmitter<Event>(); | ||
|
|
||
| public get classes(): string[] { | ||
| const mode = this.primary() ? 'storybook-button--primary' : 'storybook-button--secondary'; | ||
|
|
||
| return ['storybook-button', `storybook-button--${this.size()}`, mode]; | ||
| } | ||
| } |
30 changes: 30 additions & 0 deletions
30
code/frameworks/angular/template/stories_angular-cli-default-ts/signal/button.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| .storybook-button { | ||
| font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; | ||
| font-weight: 700; | ||
| border: 0; | ||
| border-radius: 3em; | ||
| cursor: pointer; | ||
| display: inline-block; | ||
| line-height: 1; | ||
| } | ||
| .storybook-button--primary { | ||
| color: white; | ||
| background-color: #1ea7fd; | ||
| } | ||
| .storybook-button--secondary { | ||
| color: #333; | ||
| background-color: transparent; | ||
| box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset; | ||
| } | ||
| .storybook-button--small { | ||
| font-size: 12px; | ||
| padding: 10px 16px; | ||
| } | ||
| .storybook-button--medium { | ||
| font-size: 14px; | ||
| padding: 11px 20px; | ||
| } | ||
| .storybook-button--large { | ||
| font-size: 16px; | ||
| padding: 12px 24px; | ||
| } |
65 changes: 65 additions & 0 deletions
65
code/frameworks/angular/template/stories_angular-cli-default-ts/signal/button.stories.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import { Meta, StoryObj } from '@storybook/angular'; | ||
| import { fn } from '@storybook/test'; | ||
| import SignalButtonComponent from './button.component'; | ||
|
|
||
| // More on how to set up stories at: https://storybook.js.org/docs/writing-stories | ||
| const meta: Meta<SignalButtonComponent> = { | ||
| component: SignalButtonComponent, | ||
| tags: ['autodocs'], | ||
| argTypes: { | ||
| backgroundColor: { | ||
| control: 'color', | ||
| }, | ||
| // The following argTypes are necessary, | ||
| // because Compodoc does not support Angular's new input and output signals yet | ||
| primary: { | ||
| type: 'boolean', | ||
| }, | ||
| size: { | ||
| control: { | ||
| type: 'radio', | ||
| }, | ||
| options: ['small', 'medium'], | ||
| }, | ||
| label: { | ||
| type: 'string', | ||
| }, | ||
| }, | ||
| // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args | ||
| args: { | ||
| onClick: fn(), | ||
| primary: false, | ||
| size: 'medium', | ||
| }, | ||
| }; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<SignalButtonComponent>; | ||
|
|
||
| // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args | ||
| export const Primary: Story = { | ||
| args: { | ||
| primary: true, | ||
| label: 'Button', | ||
| }, | ||
| }; | ||
|
|
||
| export const Secondary: Story = { | ||
| args: { | ||
| label: 'Button', | ||
| }, | ||
| }; | ||
|
|
||
| export const Medium: Story = { | ||
| args: { | ||
| size: 'medium', | ||
| label: 'Button', | ||
| }, | ||
| }; | ||
|
|
||
| export const Small: Story = { | ||
| args: { | ||
| size: 'small', | ||
| label: 'Button', | ||
| }, | ||
| }; |
51 changes: 51 additions & 0 deletions
51
code/frameworks/angular/template/stories_angular-cli-prerelease/signal/button.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| import { Component, Input, Output, EventEmitter, input } from '@angular/core'; | ||
|
|
||
| @Component({ | ||
| // Needs to be a different name to the CLI template button | ||
| selector: 'storybook-signal-button', | ||
| template: ` <button | ||
| type="button" | ||
| (click)="onClick.emit($event)" | ||
| [ngClass]="classes" | ||
| [ngStyle]="{ 'background-color': backgroundColor }" | ||
| > | ||
| {{ label() }} | ||
| </button>`, | ||
| styleUrls: ['./button.css'], | ||
| }) | ||
| export default class SignalButtonComponent { | ||
| /** | ||
| * Is this the principal call to action on the page? | ||
| */ | ||
| primary = input(false); | ||
|
|
||
| /** | ||
| * What background color to use | ||
| */ | ||
| @Input() | ||
| backgroundColor?: string; | ||
|
|
||
| /** | ||
| * How large should the button be? | ||
| */ | ||
| size = input('medium', { | ||
| transform: (val: 'small' | 'medium') => val, | ||
| }); | ||
|
|
||
| /** | ||
| * Button contents | ||
| */ | ||
| label = input.required({ transform: (val: string) => val.trim() }); | ||
|
|
||
| /** | ||
| * Optional click handler | ||
| */ | ||
| @Output() | ||
| onClick = new EventEmitter<Event>(); | ||
|
|
||
| public get classes(): string[] { | ||
| const mode = this.primary() ? 'storybook-button--primary' : 'storybook-button--secondary'; | ||
|
|
||
| return ['storybook-button', `storybook-button--${this.size()}`, mode]; | ||
| } | ||
| } |
30 changes: 30 additions & 0 deletions
30
code/frameworks/angular/template/stories_angular-cli-prerelease/signal/button.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| .storybook-button { | ||
| font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; | ||
| font-weight: 700; | ||
| border: 0; | ||
| border-radius: 3em; | ||
| cursor: pointer; | ||
| display: inline-block; | ||
| line-height: 1; | ||
| } | ||
| .storybook-button--primary { | ||
| color: white; | ||
| background-color: #1ea7fd; | ||
| } | ||
| .storybook-button--secondary { | ||
| color: #333; | ||
| background-color: transparent; | ||
| box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset; | ||
| } | ||
| .storybook-button--small { | ||
| font-size: 12px; | ||
| padding: 10px 16px; | ||
| } | ||
| .storybook-button--medium { | ||
| font-size: 14px; | ||
| padding: 11px 20px; | ||
| } | ||
| .storybook-button--large { | ||
| font-size: 16px; | ||
| padding: 12px 24px; | ||
| } |
Oops, something went wrong.