@codezee/sixtify-brahma 0.2.1 → 0.2.3

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

@@ -1,170 +0,0 @@
-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

@@ -1,72 +0,0 @@
-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

@@ -1,111 +0,0 @@
-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

@@ -1,82 +0,0 @@
-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

@@ -1,82 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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,
-  },
-};

package/apps/docs/stories/PadBox/PadBox.stories.tsx

@@ -1,49 +0,0 @@
-import { Stack, Typography } from "@mui/material";
-import { PadBox } from "@repo/shared-components";
-import { Meta, StoryObj } from "@storybook/react";
-
-const meta: Meta<typeof PadBox> = {
-  title: "shared-component/PadBox",
-  component: PadBox,
-  tags: ["autodocs"],
-  render: (args) => {
-    return (
-      <PadBox {...args}>
-        <Stack
-          justifyContent="center"
-          alignItems={"center"}
-          sx={{ width: "100%", height: "50px", backgroundColor: "lightblue" }}
-        >
-          <Typography variant="caption">Content inside PadBox</Typography>
-        </Stack>
-      </PadBox>
-    );
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof PadBox>;
-
-export const DefaultPadBox: Story = {
-  args: {
-    padding: { padding: "20px" },
-  },
-};
-
-export const NoPaddingPadBox: Story = {
-  args: {
-    padding: { padding: "0px" },
-  },
-};
-
-export const CustomPaddingPadBox: Story = {
-  args: {
-    padding: {
-      paddingTop: "50px",
-      paddingBottom: "30px",
-      paddingLeft: "10px",
-      paddingRight: "10px",
-    },
-  },
-};