Initial Stoybook setup

StoryBook.md

StoryBook Gist

import { Meta, StoryObj } from "@storybook/react"
import { Component } from "./GameScreen"

const meta: Meta<typeof Component> = {
  component: Component,
  title: "Formapp/Player/Sessions/DefaultStoryName",
  tags: ["autodocs"],
}

export default meta

type Story = StoryObj<typeof Component>

export const DefaultStoryName: Story = {}

// https://storybook.js.org/docs/api/doc-blocks/doc-block-description
import { Canvas, Source, Story, Subtitle, Title } from '@storybook/blocks'
 parameters: {
    componentSubtitle: 'Hello',
    docs: {
      page: () => (
        <>
          <Title>Hello World</Title>
          <Description />
          <Subtitle />
          <Story />
          <Source />
          <Canvas />
        </>
      ),
    },

argTypes: {
    labels: {
      control: "object",
      defaultValue: {
        sessionTypeLabel: "Session type",
        coachLabel: "Coach name",
        noofTeamsLabel: "No. of teams",
        maxPlayersLabel: "Max no. of players",
        maxperTeamLabel: "Max no. per team",
      },
    },
  },

testimonial_modal.md

import DialogDemo from "@/components/TestimonalModal";
import { Button } from "@/components/ui/button";
import { Dialog, DialogTrigger } from "@/components/ui/dialog";
import { Meta, StoryObj } from "@storybook/react";

const meta: Meta<typeof DialogDemo> = {
  title: "Components/UI/Kit/TestimonialModal",
  component: DialogDemo,
  tags: ["autodocs"],
  argTypes: {
    name: { control: "text" },
    title: { control: "text" },
    image: { control: "text" },
    text: { control: "text" },
    rating: {
      control: { type: "range", min: 1, max: 5, step: 1 },
      description: "Rating from 1 to 5, with 0.5 step increments",
    },

    backgroundColor: { control: "color" },
    textColor: { control: "color" },
  },
};

export default meta;

type Story = StoryObj<typeof DialogDemo>;

const Template: Story = {
  render: (args) => (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="outline">Open Testimonial Modal</Button>
      </DialogTrigger>
      <DialogDemo {...args} />
    </Dialog>
  ),
};

export const Default: Story = {
  ...Template,
  args: {
    name: "John Doe",
    title: "Software Engineer",
    image: "https://avatar.iran.liara.run/public/boy?username=Ash",
    text: "This is a great product! I highly recommend it to anyone looking for a solution. The team behind it is incredibly supportive and responsive. It has significantly improved my workflow and productivity.",
    rating: 5,
    backgroundColor: "rgba(48,53,60,0.4)",
    textColor: "#ffffff",
  },
};

export const LongTestimonial: Story = {
  ...Template,
  args: {
    ...Default.args,
    text: "This is an exceptionally long testimonial that demonstrates how the modal handles a large amount of text. It goes into great detail about the product, the user's experience, and the impact it has had on their work. The text is intentionally verbose to showcase the modal's ability to present extensive content in a readable format. It might discuss various features, compare it to other solutions, and provide specific examples of how it has been beneficial. The goal is to test the layout and scrolling behavior of the modal with a substantial amount of content.",
  },
};

export const CustomColors: Story = {
  ...Template,
  args: {
    ...Default.args,
    backgroundColor: "#f0f0f0",
    textColor: "#333333",
  },
};

export const ShortName: Story = {
  ...Template,
  args: {
    ...Default.args,
    name: "Al",
  },
};

export const LongTitle: Story = {
  ...Template,
  args: {
    ...Default.args,
    title: "Senior Software Engineer and Project Manager for AI Initiatives",
  },
};