glide-design-system/src/stories/datepicker/DatePicker.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 DatePicker from "../../lib/components/date-picker/DatePicker";

export default {
  title: "Components/DatePicker",
  component: DatePicker,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          "The DatePicker component allows users to select a date from a calendar view. It accepts various props to customize its behavior and appearance.",
      },
    },
  },
  argTypes: {
    width: {
      control: "",
      description: "Custom width for the date picker.",
    },
    height: {
      control: "",
      description: "Custom height for the date picker.",
    },
    style: {
      control: "",
      description:
        "Additional CSS styles to apply to the Datepicker component for custom styling.",
    },
    disabled: {
      control: "boolean",
      description: "If true, the date picker is disabled.",
    },
    label: {
      control: "",
      description: "Label for the date picker.",
    },
    className: {
      control: "",
      description:
        "Additional CSS class names to apply to the Datepicker component for custom styling.",
    },
    required: {
      control: "boolean",
      description: "If true, the date picker is marked as required.",
    },

    onChange: {
      coontrol: "",
      description: "Function to be callled when the date picker changes.",
    },
    value: {
      control: "",
      description: "The currently selected date.",
    },
  },
};

const Template = (args) => <DatePicker {...args} />;
export const Default = Template.bind({});
Default.args = {
  label: "Date",
};

Default.parameters = {
  docs: {
    description: {
      story: "This story demonstrates the Date Picker component.",
    },
  },
};

export const CustomWidthAndHeight = Template.bind({});
CustomWidthAndHeight.args = {
  label: "Date",
  width: "600px",
  height: "50px",
};

CustomWidthAndHeight.parameters = {
  docs: {
    description: {
      story:
        "This story demonstrates the Date Picker component with custom height and width.",
    },
  },
};

export const CustomStyles = Template.bind({});
CustomStyles.args = {
  label: "Date",
  style: {
    border: "2px solid #d7d7d7",
  },
};

CustomStyles.parameters = {
  docs: {
    description: {
      story:
        "This story demonstrates the Date Picker component with custom styles.",
    },
  },
};

export const Disabled = Template.bind({});
Disabled.args = {
  label: "Date",
  disabled: true,
};

Disabled.parameters = {
  docs: {
    description: {
      story:
        "This story demonstrates the Date Picker component with disabled property.",
    },
  },
};

export const Required = Template.bind({});
Required.args = {
  label: "Date",
  required: true,
};

Required.parameters = {
  docs: {
    description: {
      story:
        "This story demonstrates the Date Picker component with required property.",
    },
  },
};

export const DefaultValue = Template.bind({});
DefaultValue.args = {
  label: "Date",
  value: "2024-10-22",
};

DefaultValue.parameters = {
  docs: {
    description: {
      story:
        "This story demonstrates the Date Picker component with value property.",
    },
  },
};