glide-design-system/src/stories/time-picker/TimePicker.stories.js

Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.

import React from "react";
// import { storiesOf } from "@storybook/react";
import { TimePicker } from "../../lib";

export default {
  title: "Components/TimePicker",
  component: TimePicker,
  tags: ["autodocs"],
  argTypes: {
    onChange: {
      action: "changed",
      description:
        "Function called when the time picker value changes.eg (onChange=(e)=>consoloe.log(e))",
    },
    value: {
      control: "text",
      description:
        "Current value of the time picker field.eg(2022-04-17T05:30)",
    },
    label: {
      control: "text",
      description: "Label displayed above the time picker.",
    },
    required: {
      control: "boolean",
      description: "Indicates if the time picker field is required.",
    },
    style: {
      control: "object",
      description:
        "Additional CSS styles to apply to the time picker component for custom styling.",
    },
    width: {
      control: "text",
      description: "Custom width of the time picker component.",
    },
    height: {
      control: "text",
      description: "Custom height of the time picker component.",
    },
    id: {
      control: "",
      description: "The unique identifier for the time picker component.",
    },
  },
  parameters: {
    docs: {
      description: {
        component:
          "The time picker component is used to display and manage time input fields. It accepts various props for customization, including onChange, required, label, value,states.",
      },
    },
  },
};

const Template = (args) => {
  return <TimePicker {...args} />;
};
export const Default = Template.bind({});
Default.args = {
  onChange: function (event) {
    return event;
  },
  required: false,
  label: "Time Picker",
  value: "2022-04-17T05:30",
};
Default.parameters = {
  docs: {
    description: {
      story:
        "This story demonstrates the Time Picker component with default configuration.",
    },
  },
};

export const Required = Template.bind({});
Required.args = {
  required: true,
  label: "Time Picker",
  value: "2022-04-17T05:30",
};

Required.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use time picker with required property.",
    },
  },
};

export const Style = Template.bind({});
Style.args = {
  style: { width: "250px" },
  label: "Time picker",
  value: "2022-04-17T05:30",
};

Style.parameters = {
  docs: {
    description: {
      story: "This example shows how to use time picker with custom style.",
    },
  },
};

export const Label = Template.bind({});
Label.args = {
  label: "Custom Label",
  value: "2022-04-17T05:30",
};
Label.parameters = {
  docs: {
    description: {
      story: "This example shows how to use time picker with custom label.",
    },
  },
};

export const Width = Template.bind({});
Width.args = {
  label: "Number",
  width: "200px",
  value: "2022-04-17T05:30",
};
Width.parameters = {
  docs: {
    description: {
      story: "This example shows how to use time picker with custom width.",
    },
  },
};

export const Height = Template.bind({});
Height.args = {
  label: "Time picker",
  height: "50px",
  value: "2022-04-17T05:30",
};
Height.parameters = {
  docs: {
    description: {
      story: "This example shows how to use time picker with custom height.",
    },
  },
};