Merged PR 1967: Reward Shopping Cart Implementation

apps/isa-app/stories/shared/quantity-control/quantity-control.stories.ts

@@ -0,0 +1,145 @@
+import {
+  argsToTemplate,
+  moduleMetadata,
+  type Meta,
+  type StoryObj,
+} from '@storybook/angular';
+import { QuantityControlComponent } from '@isa/shared/quantity-control';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+
+interface QuantityControlStoryProps {
+  value: number;
+  disabled: boolean;
+  min?: number;
+  max?: number;
+  presetLimit?: number;
+}
+
+const meta: Meta<QuantityControlStoryProps> = {
+  component: QuantityControlComponent,
+  title: 'shared/quantity-control/QuantityControl',
+  argTypes: {
+    value: {
+      control: { type: 'number', min: 0, max: 99 },
+      description: 'The quantity value',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disables the control when true',
+    },
+    min: {
+      control: { type: 'number', min: 0, max: 10 },
+      description: 'Minimum selectable value',
+    },
+    max: {
+      control: { type: 'number', min: 1, max: 99 },
+      description: 'Maximum selectable value (e.g., stock available)',
+    },
+    presetLimit: {
+      control: { type: 'number', min: 1, max: 99 },
+      description: 'Number of preset options before requiring Edit',
+    },
+  },
+  args: {
+    value: 1,
+    disabled: false,
+    min: 1,
+    max: undefined,
+    presetLimit: 10,
+  },
+  render: (args) => ({
+    props: args,
+    template: `<shared-quantity-control ${argsToTemplate(args)} />`,
+  }),
+};
+
+export default meta;
+
+type Story = StoryObj<QuantityControlStoryProps>;
+
+export const Default: Story = {
+  args: {
+    value: 1,
+    disabled: false,
+  },
+};
+
+export const WithCustomValue: Story = {
+  args: {
+    value: 5,
+    disabled: false,
+  },
+};
+
+export const HighStock: Story = {
+  args: {
+    value: 15,
+    disabled: false,
+    min: 1,
+    max: 50,
+    presetLimit: 20, // Shows 1-20, Edit for 21-50
+  },
+};
+
+export const LimitedStock: Story = {
+  args: {
+    value: 3,
+    disabled: false,
+    min: 1,
+    max: 5,
+    presetLimit: 10, // Shows 1-5 (capped at max), no Edit
+  },
+};
+
+export const ExactStock: Story = {
+  args: {
+    value: 1,
+    disabled: false,
+    min: 1,
+    max: 10,
+    presetLimit: 10, // Shows 1-10, no Edit (max=10 == presetLimit)
+  },
+};
+
+export const StartFromZero: Story = {
+  args: {
+    value: 0,
+    disabled: false,
+    min: 0,
+    max: undefined,
+    presetLimit: 10, // Shows 0-9, Edit for unlimited
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    value: 3,
+    disabled: true,
+  },
+};
+
+export const InFormContext: Story = {
+  args: {
+    value: 2,
+    disabled: false,
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [ReactiveFormsModule],
+    }),
+  ],
+  render: (args) => ({
+    props: {
+      ...args,
+      quantityControl: new FormControl(args.value),
+    },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 1rem;">
+        <shared-quantity-control [formControl]="quantityControl" />
+        <div style="margin-top: 1rem; padding: 1rem; background: #f5f5f5; border-radius: 4px;">
+          <strong>Form Value:</strong> {{ quantityControl.value }}
+        </div>
+      </div>
+    `,
+  }),
+};

apps/isa-app/stories/ui/tooltip/tooltip.stories.ts

@@ -11,11 +11,17 @@ const meta: Meta<TooltipDirective> = {
       control: 'multi-select',
       options: ['click', 'hover', 'focus'],
     },
+    variant: {
+      control: { type: 'select' },
+      options: ['default', 'warning'],
+      description: 'Determines the visual variant of the tooltip',
+    },
   },
   args: {
     title: 'Tooltip Title',
     content: 'This is the tooltip content.',
     triggerOn: ['click', 'hover', 'focus'],
+    variant: 'default',
   },
   render: (args) => ({
     props: args,
@@ -37,3 +43,12 @@ export const Default: Story = {
     triggerOn: ['hover', 'click'],
   },
 };
+
+export const Warning: Story = {
+  args: {
+    title: 'Warning Tooltip',
+    content: 'This is a warning message.',
+    triggerOn: ['hover', 'click'],
+    variant: 'warning',
+  },
+};