Full Stack Development

    git clone https://github.com/WesternSydneyUniversity/comp3036-assignment-1-2
cd comp3036-assignment-1-2
pnpm i
  

    pnpx storybook@latest init
  

    import React from 'react';
import styles from './Button.module.css'

interface ButtonProps {
  label: string;
  onClick?: () => void;
  variant?: 'primary' | 'secondary';
  size?: 'small' | 'medium' | 'large';
}

const Button: React.FC<ButtonProps> = ({ label, onClick, variant = 'primary', size = 'medium' }) => {
  const className = `button ${styles[variant]} ${styles[size]}`;
  return (
    <button className={className} onClick={onClick}>
      {label}
    </button>
  );
};

export default Button;
  

    import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import Button from './Button';

const meta: ComponentMeta<typeof Button> = {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    variant: { control: 'radio', options: ['primary', 'secondary'] },
    size: { control: 'radio', options: ['small', 'medium', 'large'] },
    onClick: { action: 'clicked' },
  },
};

export default meta;
type Story = ComponentStory<typeof Button>;

export const Primary: Story = {
  args: {
    label: 'Button',
    variant: 'primary',
  },
};

export const Secondary: Story = {
  args: {
    label: 'Button',
    variant: 'secondary',
  },
};

export const Large: Story = {
  args: {
    label: 'Large Button',
    size: 'large',
  },
};

  

    pnpm run storybook