GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-04 20:51:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

remove docgen components (already under argTypes)

Browse Source
This commit is contained in:
Tom Coleman 2022-10-11 09:51:04 +11:00
parent b62fbc2f23
commit 157c2058bc
15 changed files with 0 additions and 477 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
code/frameworks/angular/template/stories/docgen-components/doc-button/__snapshots__/doc-button.stories.storyshot
View File

@ -1,43 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Addons/Docs/DocButton Basic 1`] = `
<storybook-wrapper>
<my-button
ng-reflect-is-disabled="false"
ng-reflect-label="Args test"
>
<button
class="btn-secondary btn-medium"
ng-reflect-ng-class="btn-secondary,btn-medium"
>
<img
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo="
width="100"
/>
Args test
</button>
</my-button>
</storybook-wrapper>
`;
exports[`Storyshots Addons/Docs/DocButton With Template 1`] = `
<storybook-wrapper>
<my-button
ng-reflect-appearance="primary"
ng-reflect-label="Template test"
>
<button
class="btn-primary btn-medium"
ng-reflect-ng-class="btn-primary,btn-medium"
>
<img
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo="
width="100"
/>
Template test
</button>
</my-button>
</storybook-wrapper>
`;

7
code/frameworks/angular/template/stories/docgen-components/doc-button/doc-button.component.html
View File

@ -1,7 +0,0 @@
<button [disabled]="isDisabled" [ngClass]="classes" #buttonRef>
<img
width="100"
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo="
/>
{{ label }}
</button>

3
code/frameworks/angular/template/stories/docgen-components/doc-button/doc-button.component.scss
View File

@ -1,3 +0,0 @@
.btn-primary {
background-color: #ff9899;
}

232
code/frameworks/angular/template/stories/docgen-components/doc-button/doc-button.component.ts
View File

@ -1,232 +0,0 @@
/* eslint-disable no-console */
/* eslint-disable no-underscore-dangle */
import {
Component,
ElementRef,
EventEmitter,
HostBinding,
HostListener,
Input,
Output,
ViewChild,
} from '@angular/core';
export const exportedConstant = 'An exported constant';
export type ButtonSize = 'small' | 'medium' | 'large' | 'xlarge';
export interface ISomeInterface {
one: string;
two: boolean;
three: any[];
}
export enum ButtonAccent {
'Normal' = 'Normal',
'High' = 'High',
}
/**
* This is a simple button that demonstrates various JSDoc handling in Storybook Docs for Angular.
*
* It supports [markdown](https://en.wikipedia.org/wiki/Markdown), so you can embed formatted text,
* like **bold**, _italic_, and `inline code`.
*
* > How you like dem apples?! It's never been easier to document all your components.
*
* @string Hello world
* @link [Example](http://example.com)
* @code `ThingThing`
* @html <span class="badge">aaa</span>
*/
@Component({
selector: 'my-button',
templateUrl: './doc-button.component.html',
styleUrls: ['./doc-button.component.scss'],
})
export class DocButtonComponent<T> {
@ViewChild('buttonRef', { static: false }) buttonRef: ElementRef;
/** Test default value. */
@Input()
public theDefaultValue = 'Default value in component';
/**
* Setting default value here because compodoc won't get the default value for accessors
* @default Another default value
* */
@Input()
get anotherDefaultValue() {
return this._anotherDefaultValue;
}
set anotherDefaultValue(v: string) {
this._anotherDefaultValue = v;
}
_anotherDefaultValue = 'Another default value';
/** Test null default value. */
@Input()
public aNullValue = null;
/** Test null default value. */
@Input()
public anUndefinedValue;
/** Test numeric default value. */
@Input()
public aNumericValue = 123;
/** Appearance style of the button. */
@Input()
public appearance: 'primary' | 'secondary' = 'secondary';
/** Sets the button to a disabled state. */
@Input()
public isDisabled = false;
/** Specify the accent-type of the button */
@Input()
public accent: ButtonAccent = ButtonAccent.Normal;
/** Specifies some arbitrary object. This comment is to test certain chars like apostrophes - it's working */
@Input() public someDataObject: ISomeInterface;
/**
* The inner text of the button.
*
* @required
*/
@Input()
public label: string;
/** Size of the button. */
@Input()
public size?: ButtonSize = 'medium';
/**
* Some input you shouldn't use.
*
* @deprecated
*/
@Input()
public somethingYouShouldNotUse = false;
/**
* Handler to be called when the button is clicked by a user.
*
* Will also block the emission of the event if `isDisabled` is true.
*/
@Output()
public onClick = new EventEmitter<Event>();
/**
* This is an internal method that we don't want to document and have added the `ignore` annotation to.
*
* @ignore
*/
public handleClick(event: Event) {
event.stopPropagation();
if (!this.isDisabled) {
this.onClick.emit(event);
}
}
private _inputValue = 'some value';
/** Setter for `inputValue` that is also an `@Input`. */
@Input()
public set inputValue(value: string) {
this._inputValue = value;
}
/** Getter for `inputValue`. */
public get inputValue() {
return this._inputValue;
}
@HostListener('click', ['$event'])
onClickListener(event) {
console.log('button', event.target);
this.handleClick(event);
}
@HostBinding('class.focused') focus = false;
/**
* Returns all the CSS classes for the button.
*
* @ignore
*/
public get classes(): string[] {
return [this.appearance, this.size]
.filter((_class) => !!_class)
.map((_class) => `btn-${_class}`);
}
/**
* @ignore
*/
public ignoredProperty = 'Ignore me';
/** Public value. */
public internalProperty = 'Public hello';
/** Private value. */
private _value = 'Private hello';
/** Set the private value. */
public set value(value: string | number) {
this._value = `${value}`;
}
/** Get the private value. */
public get value(): string | number {
return this._value;
}
/**
* An internal calculation method which adds `x` and `y` together.
*
* @param x Some number you'd like to use.
* @param y Some other number or string you'd like to use, will have `parseInt()` applied before calculation.
*/
public calc(x: number, y: string | number): number {
return x + parseInt(`${y}`, 10);
}
/** A public method using an interface. */
public publicMethod(things: ISomeInterface) {
console.log(things);
}
/**
* A protected method.
*
* @param id Some `id`.
*/
protected protectedMethod(id?: number) {
console.log(id);
}
/**
* A private method.
*
* @param password Some `password`.
*/
private privateMethod(password: string) {
console.log(password);
}
@Input('showKeyAlias')
public showKey: keyof T;
@Input()
public set item(item: T[]) {
this.processedItem = item;
}
public processedItem: T[];
}

10
code/frameworks/angular/template/stories/docgen-components/doc-button/doc-button.stories.mdx
View File

@ -1,10 +0,0 @@
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { DocButtonComponent } from './doc-button.component';
<Meta title='Addons/Docs/DocButtonDefaultValue' />
# ArgsTable in MDX with default values
`theDefaultValue` should show the default value from the component comments
<ArgsTable of={DocButtonComponent}/>

24
code/frameworks/angular/template/stories/docgen-components/doc-button/doc-button.stories.ts
View File

@ -1,24 +0,0 @@
import { DocButtonComponent } from './doc-button.component';
export default {
title: 'Addons/Docs/DocButton',
component: DocButtonComponent,
};
export const Basic = (args) => ({
props: args,
});
Basic.args = { label: 'Args test', isDisabled: false };
Basic.ArgTypes = {
theDefaultValue: {
table: {
defaultValue: { summary: 'Basic default value' },
},
},
};
export const WithTemplate = (args) => ({
props: args,
template: '<my-button [label]="label" [appearance]="appearance"></my-button>',
});
WithTemplate.args = { label: 'Template test', appearance: 'primary' };

15
code/frameworks/angular/template/stories/docgen-components/doc-directive/__snapshots__/doc-directive.stories.storyshot
View File

@ -1,15 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Addons/Docs/DocDirective Basic 1`] = `
<storybook-wrapper>
<div
docdirective=""
ng-reflect-has-gray-background="true"
style="background-color: lightgray;"
>
<h1>
DocDirective
</h1>
</div>
</storybook-wrapper>
`;

25
code/frameworks/angular/template/stories/docgen-components/doc-directive/doc-directive.directive.ts
View File

@ -1,25 +0,0 @@
/* eslint-disable no-useless-constructor */
import { Directive, ElementRef, AfterViewInit, Input } from '@angular/core';
/**
* This is an Angular Directive
* example that has a Prop Table.
*/
@Directive({
selector: '[docDirective]',
})
export class DocDirective implements AfterViewInit {
constructor(private ref: ElementRef) {}
/**
* Will apply gray background color
* if set to true.
*/
@Input() hasGrayBackground = false;
ngAfterViewInit(): void {
if (this.hasGrayBackground) {
this.ref.nativeElement.style = 'background-color: lightgray';
}
}
}

15
code/frameworks/angular/template/stories/docgen-components/doc-directive/doc-directive.stories.ts
View File

@ -1,15 +0,0 @@
import { DocDirective } from './doc-directive.directive';
export default {
title: 'Addons/Docs/DocDirective',
component: DocDirective,
};
const modules = {
declarations: [DocDirective],
};
export const Basic = () => ({
moduleMetadata: modules,
template: '<div docDirective [hasGrayBackground]="true"><h1>DocDirective</h1></div>',
});

11
code/frameworks/angular/template/stories/docgen-components/doc-injectable/__snapshots__/doc-injectable.stories.storyshot
View File

@ -1,11 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Addons/Docs/DocInjectable Basic 1`] = `
<storybook-wrapper>
<div>
<h1>
DocInjectable
</h1>
</div>
</storybook-wrapper>
`;

27
code/frameworks/angular/template/stories/docgen-components/doc-injectable/doc-injectable.service.ts
View File

@ -1,27 +0,0 @@
import { Injectable } from '@angular/core';
import { HttpHeaders } from '@angular/common/http';
/**
* This is an Angular Injectable
* example that has a Prop Table.
*/
@Injectable({
providedIn: 'root',
})
export class DocInjectableService {
/**
* Auth headers to use.
*/
auth: any;
constructor() {
this.auth = new HttpHeaders({ 'Content-Type': 'application/json' });
}
/**
* Get posts from Backend.
*/
getPosts() {
return [];
}
}

18
code/frameworks/angular/template/stories/docgen-components/doc-injectable/doc-injectable.stories.ts
View File

@ -1,18 +0,0 @@
import { DocInjectableService } from './doc-injectable.service';
export default {
title: 'Addons/Docs/DocInjectable',
component: DocInjectableService,
parameters: {
controls: { hideNoControlsWarning: true },
},
};
const modules = {
provider: [DocInjectableService],
};
export const Basic = () => ({
moduleMetadata: modules,
template: '<div><h1>DocInjectable</h1></div>',
});

11
code/frameworks/angular/template/stories/docgen-components/doc-pipe/__snapshots__/doc-pipe.stories.storyshot
View File

@ -1,11 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Addons/Docs/DocPipe Basic 1`] = `
<storybook-wrapper>
<div>
<h1>
DOCPIPE
</h1>
</div>
</storybook-wrapper>
`;

18
code/frameworks/angular/template/stories/docgen-components/doc-pipe/doc-pipe.pipe.ts
View File

@ -1,18 +0,0 @@
import { Pipe, PipeTransform } from '@angular/core';
/**
* This is an Angular Pipe
* example that has a Prop Table.
*/
@Pipe({
name: 'docPipe',
})
export class DocPipe implements PipeTransform {
/**
* Transforms a string into uppercase.
* @param value string
*/
transform(value: string): string {
return value?.toUpperCase();
}
}

18
code/frameworks/angular/template/stories/docgen-components/doc-pipe/doc-pipe.stories.ts
View File

@ -1,18 +0,0 @@
import { DocPipe } from './doc-pipe.pipe';
export default {
title: 'Addons/Docs/DocPipe',
component: DocPipe,
parameters: {
controls: { hideNoControlsWarning: true },
},
};
const modules = {
declarations: [DocPipe],
};
export const Basic = () => ({
moduleMetadata: modules,
template: `<div><h1>{{ 'DocPipe' | docPipe }}</h1></div>`,
});