@storybook/angular 7.0.0-alpha.46 → 7.0.0-alpha.48

package/template/stories/core/moduleMetadata/merge-default-and-story.stories.ts

@@ -0,0 +1,35 @@
+import { Meta, StoryFn, moduleMetadata } from '@storybook/angular';
+import { TokenComponent, ITEMS, DEFAULT_NAME } from './angular-src/token.component';
+import { CustomPipePipe } from './angular-src/custom.pipe';
+
+export const MergeWithDefaultModuleMetadata: StoryFn = () => ({
+  template: `<storybook-simple-token-component [name]="name | customPipe"></storybook-simple-token-component>`,
+  props: {
+    name: 'Prop Name',
+  },
+  moduleMetadata: {
+    declarations: [CustomPipePipe],
+    providers: [],
+  },
+});
+MergeWithDefaultModuleMetadata.storyName = 'Merge with default ModuleMetadata';
+
+export default {
+  // title: 'Core / ModuleMetadata / Merge default and story',
+  component: MergeWithDefaultModuleMetadata,
+  decorators: [
+    moduleMetadata({
+      declarations: [TokenComponent],
+      providers: [
+        {
+          provide: ITEMS,
+          useValue: ['Joe', 'Jane'],
+        },
+        {
+          provide: DEFAULT_NAME,
+          useValue: 'Provider Name',
+        },
+      ],
+    }),
+  ],
+} as Meta;

package/template/stories/core/parameters/bootstrap-options.stories.ts

@@ -0,0 +1,22 @@
+import { Meta, StoryFn } from '@storybook/angular';
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'component-with-whitespace',
+  template: ` <div>
+    <p>Some content</p>
+  </div>`,
+})
+class ComponentWithWhitespace {}
+
+export default {
+  // title: 'Core / Parameters / With Bootstrap Options',
+  component: ComponentWithWhitespace,
+  parameters: {
+    bootstrapOptions: {
+      preserveWhitespaces: true,
+    },
+  },
+} as Meta;
+
+export const WithPreserveWhitespaces: StoryFn = (_args) => ({});

package/template/stories/core/styles/story-styles.stories.ts

@@ -0,0 +1,50 @@
+import { Meta, StoryFn, moduleMetadata } from '@storybook/angular';
+import Button from '../../button.component';
+
+export const TemplateStory: StoryFn = () => ({
+  template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
+  props: {
+    text: 'Button with custom styles',
+    onClick: () => {},
+  },
+  styles: [
+    `
+      storybook-button-component {
+        background-color: yellow;
+        padding: 25px;
+      }
+    `,
+  ],
+});
+TemplateStory.storyName = 'With story template';
+
+export const WithArgsStory: StoryFn = (args) => ({
+  template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
+  props: args,
+  styles: [
+    `
+  storybook-button-component {
+    background-color: red;
+    padding: 25px;
+  }
+`,
+  ],
+});
+WithArgsStory.storyName = 'With Args';
+WithArgsStory.argTypes = {
+  text: { control: 'text' },
+  onClick: { action: 'On click' },
+};
+WithArgsStory.args = {
+  text: 'Button with custom styles',
+};
+
+export default {
+  // title: 'Core / Story host styles',
+  component: TemplateStory,
+  decorators: [
+    moduleMetadata({
+      declarations: [Button],
+    }),
+  ],
+} as Meta;

package/template/stories/others/issues/12009-unknown-component.stories.ts

@@ -0,0 +1,14 @@
+import { Meta, StoryFn } from '@storybook/angular';
+import Button from '../../button.component';
+
+export default {
+  // title: 'Others / Issues / 12009 unknown component',
+  component: Button,
+} as Meta;
+
+const Template: StoryFn = (args) => ({
+  props: args,
+});
+
+export const Basic = Template.bind({});
+Basic.args = { text: 'Unknown component' };

package/template/stories/others/ngx-translate/README.stories.mdx

@@ -0,0 +1,58 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="stories / frameworks / angular / others / ngx-translate" />
+
+# [ngx-translate](https://github.com/ngx-translate/core)
+
+> No real example here to avoid adding more dependency to storybook mono repository
+
+There are several ways to configure ngx-translate in storybook which will depend on your context.
+
+Here is a simple example with a storybook decorator that you can place in the `preview.ts` or locally on the stories.
+[See the doc on decorators](https://storybook.js.org/docs/angular/writing-stories/decorators)
+
+```ts
+import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { moduleMetadata } from '@storybook/angular';
+
+function createTranslateLoader(http: HttpClient) {
+  return new TranslateHttpLoader(http, '/assets/i18n/', '.json');
+}
+
+const TranslateModuleDecorator = (storyFunc, context) => {
+  const { locale } = context.globals;
+
+  return moduleMetadata({
+    imports: [
+      HttpClientModule,
+      TranslateModule.forRoot({
+        defaultLanguage: locale,
+        loader: {
+          provide: TranslateLoader,
+          useFactory: createTranslateLoader,
+          deps: [HttpClient],
+        },
+      }),
+    ],
+  })(storyFunc, context);
+};
+
+// for `preview.ts`
+export const decorators = [TranslateModuleDecorator];
+```
+
+If the `TranslateModule.forRoot` is made by another module you can try to set this provider `DEFAULT_LANGUAGE`
+
+```ts
+import { DEFAULT_LANGUAGE } from '@ngx-translate/core';
+
+const TranslateModuleDecorator = (storyFunc, context) => {
+  const { locale } = context.globals;
+
+  return moduleMetadata({
+    providers: [{ provide: DEFAULT_LANGUAGE, useValue: locale }],
+  })(storyFunc, context);
+};
+```