From 320e41db43493538ac22a35cb20a0c4c51e2793f Mon Sep 17 00:00:00 2001 From: AndyKIron Date: Wed, 27 Nov 2024 17:28:03 +0200 Subject: [PATCH] chore(sb-8): fix story for top-filter v3 --- .../v3/top-filter-dropdown.stories.ts | 263 +++++++++++++++ .../v3/top-filter-include-exclude.stories.ts | 312 ++++++++++++++++++ .../top-filter-trigger.component.stories.ts | 108 ++++++ .../v3/top-filter-trigger.component.ts | 1 + 4 files changed, 684 insertions(+) create mode 100644 projects/fusion-ui/components/top-filter-trigger/v3/top-filter-dropdown.stories.ts create mode 100644 projects/fusion-ui/components/top-filter-trigger/v3/top-filter-include-exclude.stories.ts create mode 100644 projects/fusion-ui/components/top-filter-trigger/v3/top-filter-trigger.component.stories.ts diff --git a/projects/fusion-ui/components/top-filter-trigger/v3/top-filter-dropdown.stories.ts b/projects/fusion-ui/components/top-filter-trigger/v3/top-filter-dropdown.stories.ts new file mode 100644 index 000000000..40d9a8a5d --- /dev/null +++ b/projects/fusion-ui/components/top-filter-trigger/v3/top-filter-dropdown.stories.ts @@ -0,0 +1,263 @@ +import {StoryFn, Meta} from '@storybook/angular'; +import {moduleMetadata} from '@storybook/angular'; +import {CommonModule} from '@angular/common'; +import {dedent} from 'ts-dedent'; +import {SvgModule} from '@ironsource/fusion-ui/components/svg'; +import {environment} from '../../../../../stories/environments/environment'; +import {IconModule} from '@ironsource/fusion-ui/components/icon/v1'; +import {TopFilterTriggerComponent} from '@ironsource/fusion-ui/components/top-filter-trigger/v3/top-filter-trigger.component'; +import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms'; +import {MOK_APPLICATIONS_ONE_LINE_OPTIONS} from '@ironsource/fusion-ui/components/dropdown/v3/stories/dropdown.mock'; +import {DropdownModule} from '@ironsource/fusion-ui/components/dropdown/v3'; + +export default { + title: 'V3/Components/Filters/Top Filter/Filter Dropdown', + component: TopFilterTriggerComponent, + decorators: [ + moduleMetadata({ + declarations: [], + imports: [ + CommonModule, + FormsModule, + ReactiveFormsModule, + SvgModule.forRoot({assetsPath: environment.assetsPath}), + IconModule, + DropdownModule + ] + }) + ], + tags: ['autodocs'], + parameters: { + docs: { + description: { + component: dedent`**Top Filter Trigger Component**` + } + }, + design: { + type: 'figma', + url: 'https://www.figma.com/file/V4eZU3qDgKYPhR4eaTvSwy/%F0%9F%8E%A8-Style-guide-2021-Master?node-id=15033%3A122198&t=AkzAq91BGNVsVY4p-1' + } + }, + args: { + placeholder: 'Select application' + }, + argTypes: { + formControl: { + control: false + } + } +} as Meta; + +const DefaultTemplate: StoryFn = args => ({ + props: {...args}, + template: `
+ +
+ + +
+ +
` +}); + +export const Default = { + render: DefaultTemplate, + + args: { + optionsTitle: 'Applications', + search: true, + options: MOK_APPLICATIONS_ONE_LINE_OPTIONS, + formControl: new FormControl(), + placeholder: 'Select Application' + }, + + parameters: { + docs: { + source: { + language: 'typescript', + code: dedent` + import { Component} from '@angular/core'; + import { ReactiveFormsModule, FormControl } from '@angular/forms'; + import {TopFilterTriggerComponent} from '@ironsource/fusion-ui/components/top-filter-trigger' + import { DropdownOption } from '@ironsource/fusion-ui/components/dropdown-option/entities'; + import {DropdownModule} from '@ironsource/fusion-ui/components/dropdown/v3'; + + @Component({ + selector: 'fusion-story-wrapper', + template: \`
+ +
+ + +
+ +
\`, + standalone: true, + imports: [ReactiveFormsModule, TopFilterTriggerComponent, DropdownModule], + }) + export class FusionStoryWrapperComponent { + optionsTitle = 'Applications'; + placeholder = 'Select Application'; + formControl = new FormControl(); + search = true; + options: DropdownOption[] = ${JSON.stringify(MOK_APPLICATIONS_ONE_LINE_OPTIONS)}; + + selectedChange($event){ + console.log('selectedChange', $event); + } + } + `, + format: true, + type: 'code' + } + } + } +}; + +export const Loading = { + render: DefaultTemplate, + + args: { + loading: true, + optionsTitle: 'Applications', + search: true, + options: MOK_APPLICATIONS_ONE_LINE_OPTIONS, + formControl: new FormControl(), + placeholder: 'Select Application' + }, + + parameters: { + docs: { + source: { + language: 'typescript', + code: dedent` + import { Component} from '@angular/core'; + import { ReactiveFormsModule, FormControl } from '@angular/forms'; + import {TopFilterTriggerComponent} from '@ironsource/fusion-ui/components/top-filter-trigger' + import { DropdownOption } from '@ironsource/fusion-ui/components/dropdown-option/entities'; + import {DropdownModule} from '@ironsource/fusion-ui/components/dropdown/v3'; + + @Component({ + selector: 'fusion-story-wrapper', + template: \`
+ +
+ + +
+ +
\`, + standalone: true, + imports: [ReactiveFormsModule, TopFilterTriggerComponent, DropdownModule], + }) + export class FusionStoryWrapperComponent { + optionsTitle = 'Applications'; + placeholder = 'Select Application'; + formControl = new FormControl(); + search = true; + loading = true; + options: DropdownOption[] = ${JSON.stringify(MOK_APPLICATIONS_ONE_LINE_OPTIONS)}; + + selectedChange($event){ + console.log('selectedChange', $event); + } + } + `, + format: true, + type: 'code' + } + } + } +}; + +export const SelectedApplication = { + render: DefaultTemplate, + + args: { + title: 'Applications', + options: MOK_APPLICATIONS_ONE_LINE_OPTIONS, + formControl: new FormControl([MOK_APPLICATIONS_ONE_LINE_OPTIONS[2]]), + placeholder: 'Select Application' + }, + + parameters: { + docs: { + source: { + language: 'typescript', + code: dedent` + import { Component} from '@angular/core'; + import { ReactiveFormsModule, FormControl } from '@angular/forms'; + import {TopFilterTriggerComponent} from '@ironsource/fusion-ui/components/top-filter-trigger' + import { DropdownOption } from '@ironsource/fusion-ui/components/dropdown-option/entities'; + import {DropdownModule} from '@ironsource/fusion-ui/components/dropdown/v3'; + + @Component({ + selector: 'fusion-story-wrapper', + template: \`
+ +
+ + +
+ +
\`, + standalone: true, + imports: [ReactiveFormsModule, TopFilterTriggerComponent, DropdownModule], + }) + export class FusionStoryWrapperComponent { + optionsTitle = 'Applications'; + placeholder = 'Select Application'; + search = true; + options: DropdownOption[] = ${JSON.stringify(MOK_APPLICATIONS_ONE_LINE_OPTIONS)}; + formControl = new FormControl(this.options[1]); + + selectedChange($event){ + console.log('selectedChange', $event); + } + } + `, + format: true, + type: 'code' + } + } + } +}; diff --git a/projects/fusion-ui/components/top-filter-trigger/v3/top-filter-include-exclude.stories.ts b/projects/fusion-ui/components/top-filter-trigger/v3/top-filter-include-exclude.stories.ts new file mode 100644 index 000000000..12925ed8f --- /dev/null +++ b/projects/fusion-ui/components/top-filter-trigger/v3/top-filter-include-exclude.stories.ts @@ -0,0 +1,312 @@ +import {StoryFn, Meta} from '@storybook/angular'; +import {moduleMetadata} from '@storybook/angular'; +import {CommonModule} from '@angular/common'; +import {dedent} from 'ts-dedent'; +import {SvgModule} from '@ironsource/fusion-ui/components/svg'; +import {environment} from '../../../../../stories/environments/environment'; +import {IconModule} from '@ironsource/fusion-ui/components/icon/v1'; +import {TopFilterTriggerComponent} from './top-filter-trigger.component'; +import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms'; +import {DropdownDualMultiSelectModule} from '@ironsource/fusion-ui/components/dropdown-dual-multi-select'; +import { + MOK_APPLICATIONS_ONE_LINE_OPTIONS, + MOK_APPLICATIONS_OPTIONS +} from '@ironsource/fusion-ui/components/dropdown/v3/stories/dropdown.mock'; + +export default { + title: 'V3/Components/Filters/Top Filter/Filter Include-Exclude', + component: TopFilterTriggerComponent, + decorators: [ + moduleMetadata({ + declarations: [], + imports: [ + CommonModule, + FormsModule, + ReactiveFormsModule, + SvgModule.forRoot({assetsPath: environment.assetsPath}), + IconModule, + DropdownDualMultiSelectModule + ] + }) + ], + tags: ['autodocs'], + parameters: { + docs: { + description: { + component: dedent`**Top Filter Trigger Component**` + } + }, + design: { + type: 'figma', + url: 'https://www.figma.com/file/V4eZU3qDgKYPhR4eaTvSwy/%F0%9F%8E%A8-Style-guide-2021-Master?node-id=15033%3A122198&t=AkzAq91BGNVsVY4p-1' + } + }, + args: { + placeholder: 'Select application' + }, + argTypes: { + formControl: { + control: false + } + } +} as Meta; + +const DefaultTemplate: StoryFn = args => ({ + props: {...args}, + template: `
+ +
+ +
+ +
` +}); + +export const Default = { + render: DefaultTemplate, + + args: { + title: 'Applications', + items: MOK_APPLICATIONS_ONE_LINE_OPTIONS, + formControl: new FormControl(), + placeholder: 'Select Application' + }, + + parameters: { + docs: { + source: { + language: 'typescript', + code: dedent` + import { Component} from '@angular/core'; + import { ReactiveFormsModule, FormControl } from '@angular/forms'; + import {TopFilterTriggerComponent} from '@ironsource/fusion-ui/components/top-filter-trigger' + import { DropdownDualMultiSelectModule } from "@ironsource/fusion-ui/components/dropdown-dual-multi-select"; + import { DropdownOption } from '@ironsource/fusion-ui/components/dropdown-option/entities'; + + @Component({ + selector: 'fusion-story-wrapper', + template: \`
+ +
+ +
+ +
\`, + standalone: true, + imports: [ReactiveFormsModule, TopFilterTriggerComponent, DropdownDualMultiSelectModule], + }) + export class FusionStoryWrapperComponent { + title = 'Applications'; + placeholder = 'Select Application'; + formControl = new FormControl(); + items: DropdownOption[] = ${JSON.stringify(MOK_APPLICATIONS_OPTIONS)}; + + selectedChange($event){ + console.log('selectedChange', $event); + } + } + `, + format: true, + type: 'code' + } + } + } +}; + +export const SelectedOneApplication = { + render: DefaultTemplate, + + args: { + title: 'Applications', + items: MOK_APPLICATIONS_ONE_LINE_OPTIONS, + formControl: new FormControl([MOK_APPLICATIONS_ONE_LINE_OPTIONS[2]]), + placeholder: 'Select Application' + }, + + parameters: { + docs: { + source: { + language: 'typescript', + code: dedent` + import { Component, ChangeDetectionStrategy} from '@angular/core'; + import { ReactiveFormsModule, FormControl } from '@angular/forms'; + import {TopFilterTriggerComponent} from '@ironsource/fusion-ui/components/top-filter-trigger' + import { DropdownDualMultiSelectModule } from "@ironsource/fusion-ui/components/dropdown-dual-multi-select"; + import { DropdownOption } from '@ironsource/fusion-ui/components/dropdown-option/entities'; + + @Component({ + selector: 'fusion-story-wrapper', + changeDetection: ChangeDetectionStrategy.OnPush, + template: \`
+ +
+ +
+ +
\`, + standalone: true, + imports: [ReactiveFormsModule, TopFilterTriggerComponent, DropdownDualMultiSelectModule], + }) + export class FusionStoryWrapperComponent { + title = 'Applications'; + placeholder = 'Select Application'; + items: DropdownOption[] = ${JSON.stringify(MOK_APPLICATIONS_OPTIONS)}; + formControl = new FormControl([this.items[2]]); + + selectedChange($event){ + console.log('selectedChange', $event); + } + } + `, + format: true, + type: 'code' + } + } + } +}; + +export const SelectedSomeApplications = { + render: DefaultTemplate, + + args: { + title: 'Applications', + items: MOK_APPLICATIONS_ONE_LINE_OPTIONS, + formControl: new FormControl([MOK_APPLICATIONS_ONE_LINE_OPTIONS[2], MOK_APPLICATIONS_ONE_LINE_OPTIONS[4]]), + placeholder: 'Select Application' + }, + + parameters: { + docs: { + source: { + language: 'typescript', + code: dedent` + import { Component} from '@angular/core'; + import { ReactiveFormsModule, FormControl } from '@angular/forms'; + import {TopFilterTriggerComponent} from '@ironsource/fusion-ui/components/top-filter-trigger' + import { DropdownDualMultiSelectModule } from "@ironsource/fusion-ui/components/dropdown-dual-multi-select"; + import { DropdownOption } from '@ironsource/fusion-ui/components/dropdown-option/entities'; + + @Component({ + selector: 'fusion-story-wrapper', + template: \`
+ +
+ +
+ +
\`, + standalone: true, + imports: [ReactiveFormsModule, TopFilterTriggerComponent, DropdownDualMultiSelectModule], + }) + export class FusionStoryWrapperComponent { + title = 'Applications'; + placeholder = 'Select Application'; + items: DropdownOption[] = ${JSON.stringify(MOK_APPLICATIONS_OPTIONS)}; + formControl = new FormControl([this.items[2],this.items[4]]); + + selectedChange($event){ + console.log('selectedChange', $event); + } + } + `, + format: true, + type: 'code' + } + } + } +}; + +export const Loading = { + render: DefaultTemplate, + + args: { + loading: true, + title: 'Applications', + items: MOK_APPLICATIONS_ONE_LINE_OPTIONS, + formControl: new FormControl(), + placeholder: 'Select Application' + }, + + parameters: { + docs: { + source: { + language: 'typescript', + code: dedent` + import { Component} from '@angular/core'; + import { ReactiveFormsModule, FormControl } from '@angular/forms'; + import {TopFilterTriggerComponent} from '@ironsource/fusion-ui/components/top-filter-trigger' + import { DropdownDualMultiSelectModule } from "@ironsource/fusion-ui/components/dropdown-dual-multi-select"; + import { DropdownOption } from '@ironsource/fusion-ui/components/dropdown-option/entities'; + + @Component({ + selector: 'fusion-story-wrapper', + template: \`
+ +
+ +
+ +
\`, + standalone: true, + imports: [ReactiveFormsModule, TopFilterTriggerComponent, DropdownDualMultiSelectModule], + }) + export class FusionStoryWrapperComponent { + loading = true; + title = 'Applications'; + placeholder = 'Select Application'; + formControl = new FormControl(); + items: DropdownOption[] = ${JSON.stringify(MOK_APPLICATIONS_OPTIONS)}; + + selectedChange($event){ + console.log('selectedChange', $event); + } + } + `, + format: true, + type: 'code' + } + } + } +}; diff --git a/projects/fusion-ui/components/top-filter-trigger/v3/top-filter-trigger.component.stories.ts b/projects/fusion-ui/components/top-filter-trigger/v3/top-filter-trigger.component.stories.ts new file mode 100644 index 000000000..6b9f7fdde --- /dev/null +++ b/projects/fusion-ui/components/top-filter-trigger/v3/top-filter-trigger.component.stories.ts @@ -0,0 +1,108 @@ +import {StoryFn, Meta} from '@storybook/angular'; +import {moduleMetadata} from '@storybook/angular'; +import {CommonModule} from '@angular/common'; +import {dedent} from 'ts-dedent'; +import {SvgModule} from '@ironsource/fusion-ui/components/svg'; +import {environment} from '../../../../../stories/environments/environment'; +import {IconModule} from '@ironsource/fusion-ui/components/icon/v1'; +import {TopFilterTriggerComponent} from '@ironsource/fusion-ui/components/top-filter-trigger/v3/top-filter-trigger.component'; + +export default { + title: 'V3/Components/Filters/Top Filter/Trigger', + component: TopFilterTriggerComponent, + decorators: [ + moduleMetadata({ + declarations: [], + imports: [CommonModule, SvgModule.forRoot({assetsPath: environment.assetsPath}), IconModule] + }) + ], + tags: ['autodocs'], + parameters: { + docs: { + description: { + component: dedent`**Top Filter Trigger Component**` + } + }, + design: { + type: 'figma', + url: 'https://www.figma.com/file/V4eZU3qDgKYPhR4eaTvSwy/%F0%9F%8E%A8-Style-guide-2021-Master?node-id=15033%3A122198&t=AkzAq91BGNVsVY4p-1' + } + } +} as Meta; + +const DefaultTemplate: StoryFn = args => ({ + props: {...args}, + template: ` +` +}); + +export const Default = { + render: DefaultTemplate +}; + +export const SelectedAmountApps = { + render: DefaultTemplate, + + args: { + placeholder: '33 apps selected', + helper: 'Dizzy Diamond and 32 more' + } +}; + +export const SelectedAllApps = { + render: DefaultTemplate, + + args: { + placeholder: 'All Apps selected', + helper: '65 applications' + } +}; + +export const SingleIOSAppSelected = { + render: DefaultTemplate, + + args: { + label: 'Dizzy Diamond Puzzle', + helper: 'appKey', + icon: 'ios', + imageApp: 'https://fusion-storybook.ironsrc.mobi/branch_demo-assets/4_app.png' + } +}; + +export const SingleAndroidAppSelected = { + render: DefaultTemplate, + + args: { + label: 'Moy 7 the Virtual Pet Game', + helper: 'appKey', + icon: 'android', + imageApp: 'https://fusion-storybook.ironsrc.mobi/branch_demo-assets/12_app.png' + } +}; + +export const ErrorRequired = { + render: DefaultTemplate, + + args: { + placeholder: 'Select App', + required: true, + error: 'Mandatory field' + } +}; + +export const Loading = { + render: DefaultTemplate, + + args: { + loading: true + } +}; diff --git a/projects/fusion-ui/components/top-filter-trigger/v3/top-filter-trigger.component.ts b/projects/fusion-ui/components/top-filter-trigger/v3/top-filter-trigger.component.ts index 09bd32acc..3ba4e3c23 100644 --- a/projects/fusion-ui/components/top-filter-trigger/v3/top-filter-trigger.component.ts +++ b/projects/fusion-ui/components/top-filter-trigger/v3/top-filter-trigger.component.ts @@ -26,6 +26,7 @@ import {TooltipModule} from '@ironsource/fusion-ui/components/tooltip'; @Component({ selector: 'fusion-top-filter-trigger', + standalone: true, // todo: just for storybook to work, will be fixed in storybook 8.5.0 imports: [CommonModule, IconModule, TooltipModule], templateUrl: './top-filter-trigger.component.html', styleUrls: ['./top-filter-trigger.component.scss'],