<commit_before>import { storiesOf, moduleMetadata } from '@storybook/angular';
import { withKnobs, text, object } from '@storybook/addon-knobs';
import { ChipsGroupComponent } from './chips-group.component';

import { ChipsModule } from './chips.module';
import { ChipComponent } from './chip.component';
import { CHIP_COLOR } from './chip-color.token';

storiesOf('Custom|Module Context', module)
  .addDecorator(withKnobs)
  .addDecorator(
    moduleMetadata({
      imports: [ChipsModule],
    })
  )
  .add(
    'Component with self and child component declared in its feature module',
    () => {
      const props: { [K in keyof ChipsGroupComponent]?: any } = {
        chips: object('Chips', [
          {
            id: 1,
            text: 'Chip 1',
          },
          {
            id: 2,
            text: 'Chip 2',
          },
        ]),
      };
      return {
        component: ChipsGroupComponent,
        requiresComponentDeclaration: false,
        props,
      };
    },
    {
      notes: `
        Typically, when developing features in Angular, it is advantageous to use "feature modules"
        which provide a "context" for declared components including required imports, declarations,
        and providers.

        To simulate this context in Storybook, we may want to use the component delcared in this
        context, rather than having to recreate this context using just to get the component to
        perform its basic functionality.

        However, as the default behavior of Storkybook for Angular is to delcare specified components
        in a dynamic module, which prevents us from using the version of the component declared in our
        feature module (with its appropriate context).

        To prevent this dynamic declaration, set the "requiresComponentDeclaration" flag to false.
      `,
    }
  )
  .add('Component with default providers', () => {
    const props: { [K in keyof ChipComponent]?: any } = {
      displayText: text('Display Text', 'My Chip'),
    };
    return {
      component: ChipComponent,
      requiresComponentDeclaration: false,
      props,
    };
  })
  .add('Component with overridden provider', () => {
    const props: { [K in keyof ChipComponent]?: any } = {
      displayText: text('Display Text', 'My Chip'),
    };
    return {
      component: ChipComponent,
      moduleMetadata: {
        providers: [
          {
            provide: CHIP_COLOR,
            useValue: 'yellow',
          },
        ],
      },
      requiresComponentDeclaration: false,
      props,
    };
  });
<commit_msg>Simplifies description<commit_after>import { storiesOf, moduleMetadata } from '@storybook/angular';
import { withKnobs, text, object } from '@storybook/addon-knobs';
import { ChipsGroupComponent } from './chips-group.component';

import { ChipsModule } from './chips.module';
import { ChipComponent } from './chip.component';
import { CHIP_COLOR } from './chip-color.token';

storiesOf('Custom|Module Context', module)
  .addDecorator(withKnobs)
  .addDecorator(
    moduleMetadata({
      imports: [ChipsModule],
    })
  )
  .add(
    'Component with self and child component declared in its feature module',
    () => {
      const props: { [K in keyof ChipsGroupComponent]?: any } = {
        chips: object('Chips', [
          {
            id: 1,
            text: 'Chip 1',
          },
          {
            id: 2,
            text: 'Chip 2',
          },
        ]),
      };
      return {
        component: ChipsGroupComponent,
        requiresComponentDeclaration: false,
        props,
      };
    },
    {
      notes: `
        This component includes a child component, a pipe, and a default provider, all which come from 
        the specified feature module.

        This behavior is possible by setting the "requiresComponentDeclaration" flag to false.
      `.replace(/ {1,}/g, ' '),
    }
  )
  .add('Component with default providers', () => {
    const props: { [K in keyof ChipComponent]?: any } = {
      displayText: text('Display Text', 'My Chip'),
    };
    return {
      component: ChipComponent,
      requiresComponentDeclaration: false,
      props,
    };
  })
  .add('Component with overridden provider', () => {
    const props: { [K in keyof ChipComponent]?: any } = {
      displayText: text('Display Text', 'My Chip'),
    };
    return {
      component: ChipComponent,
      moduleMetadata: {
        providers: [
          {
            provide: CHIP_COLOR,
            useValue: 'yellow',
          },
        ],
      },
      requiresComponentDeclaration: false,
      props,
    };
  });

{'fraction_non_alphanumeric': 0.11130322022909012, 'fraction_numerical': 0.0019451048195374973, 'mean_word_length': 2.2568613652357494, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 9, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5630641', 'n_tokens_mistral': 1283, 'n_tokens_neox': 1237, 'n_words': 389}