@codezee/sixtify-brahma 0.2.3 → 0.2.6

package/apps/docs/stories/FormFields/ListItemButton.stories.tsx

@@ -0,0 +1,59 @@
+import { Stack } from "@mui/material";
+import {
+  DeleteAction,
+  EditAction,
+  ListItemButton,
+} from "@repo/shared-components";
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof ListItemButton> = {
+  title: "shared-component/FormFields/ListItemButton",
+  component: ListItemButton,
+  tags: ["autodocs"],
+  argTypes: {
+    label: { control: "text" },
+    selected: { control: "boolean" },
+    actions: { control: "object" },
+  },
+  args: {
+    label: "List Item",
+    selected: false,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ListItemButton>;
+
+export const DefaultListItemButton: Story = {
+  args: {
+    label: "Default List Item",
+    selected: false,
+  },
+};
+
+export const SelectedListItemButton: Story = {
+  args: {
+    label: "Selected List Item",
+    selected: true,
+  },
+};
+
+export const ListItemButtonWithActions: Story = {
+  args: {
+    label: "List Item with Actions",
+    actions: (
+      <Stack direction="row">
+        <EditAction />
+        <DeleteAction />
+      </Stack>
+    ),
+  },
+};
+
+export const ListItemButtonWithLongLabel: Story = {
+  args: {
+    label:
+      "This is a list item with a very long label that should be truncated or shown in a tooltip",
+  },
+};

package/apps/docs/stories/FormFields/RadioGroupField.stories.tsx

@@ -0,0 +1,170 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { RadioGroupField, TextField } from "@repo/shared-components";
+import { useForm, FieldValues } from "react-hook-form";
+import { Box, Stack, Typography } from "@mui/material";
+
+const meta: Meta<typeof RadioGroupField> = {
+  title: "shared-component/FormFields/RadioGroupField",
+  component: RadioGroupField,
+  tags: ["autodocs"],
+  argTypes: {
+    label: {
+      control: "text",
+    },
+    options: {
+      control: "object",
+    },
+    loading: {
+      control: "boolean",
+    },
+    size: {
+      options: ["small", "medium"],
+      control: { type: "select" },
+    },
+    direction: {
+      options: ["row", "column"],
+      control: { type: "select" },
+    },
+    color: {
+      options: ["primary", "secondary"],
+      control: { type: "select" },
+    },
+  },
+  render: (args) => {
+    const { control } = useForm<FieldValues>({
+      defaultValues: {
+        radioOption: "",
+      },
+    });
+    return <RadioGroupField {...args} control={control} name="radioOption" />;
+  },
+  args: {
+    label: "Choose an option",
+    options: [
+      { values: "option1", label: "Option 1", disabled: false },
+      { values: "option2", label: "Option 2", disabled: false },
+      { values: "option3", label: "Option 3", disabled: false },
+    ],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof RadioGroupField>;
+
+export const DefaultRadioGroupField: Story = {
+  args: {
+    label: "Default Radio Group",
+    size: "small",
+    color: "secondary",
+    loading: false,
+  },
+};
+
+export const DisabledRadioOptions: Story = {
+  args: {
+    label: "Radio Group with Disabled Option",
+    size: "small",
+    color: "primary",
+    options: [
+      { values: "option1", label: "Option 1", disabled: true },
+      { values: "option2", label: "Option 2", disabled: true },
+      { values: "option3", label: "Option 3", disabled: true },
+    ],
+  },
+};
+
+export const LoadingRadioGroupField: Story = {
+  args: {
+    label: "Loading Radio Group",
+    loading: true,
+    size: "small",
+    color: "secondary",
+  },
+};
+
+export const RequiredRadioGroupField: Story = {
+  args: {
+    label: "Required Radio Group",
+    size: "medium",
+    color: "primary",
+    required: true,
+  },
+};
+
+export const RadioGroupFieldColumnDirection: Story = {
+  args: {
+    label: "Required Radio Group",
+    size: "medium",
+    color: "primary",
+    required: true,
+  },
+};
+
+export const RadioGroupFieldWithReactNodeOptions: Story = {
+  args: {
+    size: "medium",
+    color: "primary",
+    label: "",
+    options: [
+      {
+        values: "option1",
+        label: (
+          <Typography variant="body1">Radio Button with TextField</Typography>
+        ),
+        disabled: false,
+      },
+    ],
+  },
+  render: (args) => {
+    const { control } = useForm<FieldValues>({
+      defaultValues: {
+        textFieldValue: "",
+        radioOption: "",
+      },
+    });
+
+    return (
+      <Stack gap="10px" direction="row">
+        <RadioGroupField {...args} control={control} name="radioOption" />
+        <TextField
+          name="textFieldValue"
+          control={control}
+          variant="outlined"
+          placeholder="Enter additional details"
+        />
+      </Stack>
+    );
+  },
+};
+
+export const RadioGroupFieldPropsWithLabelDescription: Story = {
+  args: {
+    size: "medium",
+    color: "primary",
+    label: "",
+    options: [
+      {
+        values: "option1",
+        label: (
+          <Stack gap="5px">
+            <Typography variant="body1">
+              Radio Button with Description
+            </Typography>
+            <Typography variant="body2">Additional details</Typography>
+          </Stack>
+        ),
+        disabled: false,
+      },
+    ],
+  },
+  render: (args) => {
+    const { control } = useForm<FieldValues>({
+      defaultValues: {
+        example: "",
+      },
+    });
+
+    return <RadioGroupField {...args} name="example" control={control} />;
+  },
+};

package/apps/docs/stories/FormFields/SearchField.stories.tsx

@@ -0,0 +1,72 @@
+import { SearchField } from "@repo/shared-components";
+import { Meta, StoryObj } from "@storybook/react";
+import { FieldValues, useForm } from "react-hook-form";
+
+const meta: Meta<typeof SearchField> = {
+  title: "shared-component/FormFields/SearchField",
+  component: SearchField,
+  tags: ["autodocs"],
+  argTypes: {
+    label: {
+      control: "text",
+    },
+    placeholder: {
+      control: "text",
+    },
+    required: {
+      control: "boolean",
+    },
+    loading: {
+      control: "boolean",
+    },
+    disabled: {
+      control: "boolean",
+    },
+  },
+  render: (args) => {
+    const { control } = useForm<FieldValues>({
+      defaultValues: {
+        search: "",
+      },
+    });
+    return <SearchField {...args} name="search" control={control} />;
+  },
+  args: {
+    placeholder: "Search...",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SearchField>;
+
+export const DefaultSearchField: Story = {
+  args: {
+    label: "Default Search",
+    required: false,
+    disabled: false,
+  },
+};
+
+export const DisabledSearchField: Story = {
+  args: {
+    label: "Disabled Search",
+    disabled: true,
+  },
+};
+
+export const LoadingSearchField: Story = {
+  args: {
+    label: "Loading Search",
+    loading: true,
+    disabled: false,
+  },
+};
+
+export const RequiredSearchField: Story = {
+  args: {
+    label: "Required Search",
+    required: true,
+    disabled: false,
+  },
+};

package/apps/docs/stories/FormFields/TextField.stories.tsx

@@ -0,0 +1,111 @@
+import { TextField } from "@repo/shared-components";
+import { Meta, StoryObj } from "@storybook/react";
+import { FieldValues, useForm } from "react-hook-form";
+
+const meta: Meta<typeof TextField> = {
+  title: "shared-component/FormFields/TextField",
+  component: TextField,
+  tags: ["autodocs"],
+  argTypes: {
+    type: {
+      options: ["text", "number", "password"],
+      control: { type: "select" },
+    },
+    label: {
+      control: "text",
+    },
+    placeholder: {
+      control: "text",
+    },
+    loading: {
+      control: "boolean",
+    },
+    required: {
+      control: "boolean",
+    },
+    isCapitalize: {
+      control: "boolean",
+    },
+    isTrimStartDisabled: {
+      control: "boolean",
+    },
+  },
+  render: (args) => {
+    const { control } = useForm<FieldValues>({
+      values: {
+        example: "",
+      },
+    });
+    return <TextField {...args} name="example" control={control} />;
+  },
+  args: {
+    placeholder: "Type here...",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TextField>;
+
+export const DefaultTextField: Story = {
+  args: {
+    label: "Default Label",
+    type: "text",
+    isCapitalize: false,
+    isTrimStartDisabled: false,
+    required: false,
+    disabled: false,
+  },
+};
+
+export const NumberField: Story = {
+  args: {
+    label: "Number Field",
+    type: "number",
+    isCapitalize: false,
+    isTrimStartDisabled: true,
+    required: false,
+    disabled: false,
+  },
+};
+
+export const CapitalizedTextField: Story = {
+  args: {
+    label: "Capitalized Text Field",
+    type: "text",
+    isCapitalize: true,
+    isTrimStartDisabled: false,
+    required: false,
+    disabled: false,
+  },
+};
+
+export const LoadingTextField: Story = {
+  args: {
+    label: "Loading State",
+    loading: true,
+    required: false,
+    disabled: true,
+  },
+};
+
+export const PasswordField: Story = {
+  args: {
+    label: "Password",
+    type: "password",
+    isCapitalize: false,
+    isTrimStartDisabled: false,
+    required: true,
+  },
+};
+export const TextInputValidation: Story = {
+  args: {
+    label: "Text Input Validation",
+    type: "text",
+    isCapitalize: false,
+    isTrimStartDisabled: false,
+    required: true,
+    error: true,
+    helperText: "This filed is required",
+  },
+};

package/apps/docs/stories/FormFields/TimeField.stories.tsx

@@ -0,0 +1,82 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { useForm, FieldValues } from "react-hook-form";
+import { DateTime } from "luxon";
+import { LocalizationProvider } from "@mui/x-date-pickers";
+import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
+import { TimeField } from "@repo/shared-components";
+
+const meta: Meta<typeof TimeField> = {
+  title: "shared-component/FormFields/TimeField",
+  component: TimeField,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <LocalizationProvider dateAdapter={AdapterLuxon}>
+        <Story />
+      </LocalizationProvider>
+    ),
+  ],
+  argTypes: {
+    label: { control: "text" },
+    required: { control: "boolean" },
+    disabled: { control: "boolean" },
+    readOnly: { control: "boolean" },
+    error: { control: "boolean" },
+    helperText: { control: "text" },
+    loading: { control: "boolean" },
+    format: {
+      options: ["HH:mm", "hh:mm a"],
+      control: { type: "select" },
+    },
+  },
+  render: (args) => {
+    const { control } = useForm<FieldValues>({
+      defaultValues: {
+        timeField: DateTime.now().toISOTime(),
+      },
+    });
+    return <TimeField {...args} name="timeField" control={control} />;
+  },
+  args: {
+    label: "Select Time",
+    required: false,
+    disabled: false,
+    readOnly: false,
+    error: false,
+    helperText: "",
+    loading: false,
+    format: "HH:mm",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TimeField>;
+
+export const DefaultTimeField: Story = {
+  args: {
+    label: "Select Time",
+  },
+};
+
+export const RequiredTimeField: Story = {
+  args: {
+    label: "Required Time",
+    required: true,
+    helperText: "This field is required",
+  },
+};
+
+export const DisabledTimeField: Story = {
+  args: {
+    label: "Disabled Time Picker",
+    disabled: true,
+  },
+};
+
+export const ReadOnlyTimeField: Story = {
+  args: {
+    label: "Read-Only Time Picker",
+    readOnly: true,
+  },
+};

package/apps/docs/stories/FormFields/TimePicker.stories.tsx

@@ -0,0 +1,82 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { useForm, FieldValues } from "react-hook-form";
+import { DateTime } from "luxon";
+import { LocalizationProvider } from "@mui/x-date-pickers";
+import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
+import { TimePicker } from "@repo/shared-components";
+
+const meta: Meta<typeof TimePicker> = {
+  title: "shared-component/FormFields/TimePicker",
+  component: TimePicker,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <LocalizationProvider dateAdapter={AdapterLuxon}>
+        <Story />
+      </LocalizationProvider>
+    ),
+  ],
+  argTypes: {
+    label: { control: "text" },
+    required: { control: "boolean" },
+    disabled: { control: "boolean" },
+    readOnly: { control: "boolean" },
+    error: { control: "boolean" },
+    helperText: { control: "text" },
+    loading: { control: "boolean" },
+    format: {
+      options: ["HH:mm", "hh:mm a"],
+      control: { type: "select" },
+    },
+  },
+  render: (args) => {
+    const { control } = useForm<FieldValues>({
+      defaultValues: {
+        timeField: DateTime.now().toISOTime(),
+      },
+    });
+    return <TimePicker {...args} name="timeField" control={control} />;
+  },
+  args: {
+    label: "Select Time",
+    required: false,
+    disabled: false,
+    readOnly: false,
+    error: false,
+    helperText: "",
+    loading: false,
+    format: "HH:mm",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TimePicker>;
+
+export const DefaultTimePicker: Story = {
+  args: {
+    label: "Select Time",
+  },
+};
+
+export const RequiredTimePicker: Story = {
+  args: {
+    label: "Required Time",
+    required: true,
+    helperText: "This field is required",
+  },
+};
+
+export const DisabledTimePicker: Story = {
+  args: {
+    label: "Disabled Time Picker",
+    disabled: true,
+  },
+};
+
+export const ReadOnlyTimePicker: Story = {
+  args: {
+    label: "Read-Only Time Picker",
+    readOnly: true,
+  },
+};

package/apps/docs/stories/Indicator/Indicator.stories.tsx

@@ -0,0 +1,33 @@
+import { Indicator } from "@repo/shared-components";
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Indicator> = {
+  title: "shared-component/Indicator",
+  component: Indicator,
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: [
+        "holiday",
+        "weekly_off",
+        "paid_leave",
+        "absent",
+        "unpaid_leave",
+      ],
+    },
+  },
+  args: {
+    variant: "holiday",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Indicator>;
+
+export const DefaultIndicator: Story = {
+  args: {
+    label: "Holiday",
+  },
+};

package/apps/docs/stories/Indicator/SeverityIndicator.stories.tsx

@@ -0,0 +1,27 @@
+import { SeverityIndicator } from "@repo/shared-components";
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof SeverityIndicator> = {
+  title: "shared-component/Indicator/SeverityIndicator",
+  component: SeverityIndicator,
+  tags: ["autodocs"],
+  argTypes: {
+    isBackground: {
+      options: [true, false],
+      control: {
+        type: "select",
+      },
+    },
+  },
+  args: {
+    label: "Present",
+    color: "hsla(136, 59%, 49%, 1)",
+    isBackground: false,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SeverityIndicator>;
+
+export const DefaultSeverityIndicator: Story = {};

package/apps/docs/stories/Layouts/FormRow.stories.tsx

@@ -0,0 +1,45 @@
+import { Box, Typography } from "@mui/material";
+import { FormRow } from "@repo/shared-components";
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof FormRow> = {
+  title: "shared-component/Layouts/FormRow",
+  component: FormRow,
+  tags: ["autodocs"],
+  argTypes: {
+    maxColumn: {
+      options: [1, 2, 3],
+      control: {
+        type: "select",
+      },
+    },
+  },
+  render: (args) => {
+    const childrenArray = Array.from({ length: args.maxColumn || 1 });
+
+    return (
+      <FormRow {...args}>
+        {childrenArray.map((_, index) => (
+          <Box
+            sx={{ height: "50px", backgroundColor: "lightblue" }}
+            key={index}
+          >
+            <Typography variant="caption">Item {index + 1}</Typography>
+          </Box>
+        ))}
+      </FormRow>
+    );
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof FormRow>;
+
+export const DefaultFormRow: Story = {};
+
+export const FullWidthFormRow: Story = {
+  args: {
+    fullWidth: true,
+  },
+};