gist from clipboard

import { Component, Input } from '@angular/core';
import {
  moduleMetadata,
  Story,
  Meta,
  componentWrapperDecorator,
} from '@storybook/angular';
import { ActionGridComponent } from './action-grid.component';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'wrapped-action-grid',
  standalone: true,
  template: `<swc-ui-action-grid
    [actions]="actions"
    [maxActionsPerRow]="maxActionsPerRow"
    [showLabels]="showLabels"
    (actionClick)="handleClick($event)"
  ></swc-ui-action-grid>`,
  imports: [ActionGridComponent],
})
class WrapperComponent {
  // Add wrapper component props...
  @Input() actions: ActionGridComponent['actions'] = [];
  @Input() maxActionsPerRow = 4; // Default value, can be overridden
  @Input() showLabels = false;

  handleClick(key: string): void {
    console.log('%c ActionGridComponent: handleClick', 'color: green', key);
  }
}

export default {
  title: 'ActionGridComponent',
  component: WrapperComponent,
  decorators: [
    moduleMetadata({
      imports: [],
    }),
    // Wrap the template in a div with a white background to make it easier to see the skeleton loader
    componentWrapperDecorator(
      (story) =>
        `<div style="background-color: white;padding: 20px;">${story}</div>`
    ),
  ],
} as Meta<WrapperComponent>;

const Template: Story<WrapperComponent> = (args: WrapperComponent) => ({
  props: args,
});

export const Primary = Template.bind({});
Primary.args = {
  showLabels: true,
  maxActionsPerRow: 4,
  //icons are like "pi pi-undo"
  actions: [
    { key: 'undo', icon: 'pi pi-undo', label: 'Undo' },
    { key: 'redo', icon: 'pi pi-redo', label: 'Redo' },
    { key: 'copy', icon: 'pi pi-copy', label: 'Copy' },
    { key: 'paste', icon: 'pi pi-paste', label: 'Paste' },
    { key: 'save', icon: 'pi pi-save', label: 'Save' },
    { key: 'delete', icon: 'pi pi-trash', label: 'Delete' },
    { key: 'print', icon: 'pi pi-print', label: 'Print' },
    { key: 'email', icon: 'pi pi-envelope', label: 'Email' },
    { key: 'search', icon: 'pi pi-search', label: 'Search' },
    { key: 'settings', icon: 'pi pi-cog', label: 'Settings' },
    { key: 'help', icon: 'pi pi-question-circle', label: 'Help' },
    { key: 'info', icon: 'pi pi-info-circle', label: 'Info' },
    { key: 'exit', icon: 'pi pi-times-circle', label: 'Exit' },
  ],
};