@codezee/sixtify-brahma 0.0.0

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

@@ -0,0 +1,74 @@
+import { SearchField } from "@repo/shared-components";
+import type { Meta, StoryObj } from "@storybook/react";
+import type { FieldValues } from "react-hook-form";
+import { 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,141 @@
+import { TextField } from "@repo/shared-components";
+import type { Meta, StoryObj } from "@storybook/react";
+import type { FieldValues } from "react-hook-form";
+import { 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",
+    },
+    characterType: {
+      options: ["string", "string-number", "string-number-special"],
+      control: { type: "select" },
+    },
+    letterCase: {
+      options: ["uppercase", "lowercase", "mixed"],
+      control: { type: "select" },
+    },
+  },
+  render: (args) => {
+    const { control, setError } = useForm<FieldValues>({
+      defaultValues: {
+        example: "",
+      },
+    });
+
+    return (
+      <TextField
+        {...args}
+        name="example"
+        control={control}
+        setError={setError}
+      />
+    );
+  },
+  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,
+    characterType: "string-number",
+    letterCase: "lowercase",
+  },
+};
+
+export const NumberField: Story = {
+  args: {
+    label: "Number Field",
+    type: "number",
+    isCapitalize: false,
+    isTrimStartDisabled: true,
+    required: false,
+    disabled: false,
+    characterType: "string-number",
+    letterCase: "lowercase",
+  },
+};
+
+export const CapitalizedTextField: Story = {
+  args: {
+    label: "Capitalized Text Field",
+    type: "text",
+    isCapitalize: true,
+    isTrimStartDisabled: false,
+    required: false,
+    disabled: false,
+    characterType: "string-number",
+    letterCase: "uppercase",
+  },
+};
+
+export const LoadingTextField: Story = {
+  args: {
+    label: "Loading State",
+    loading: true,
+    required: false,
+    disabled: true,
+    characterType: "string-number",
+    letterCase: "lowercase",
+  },
+};
+
+export const PasswordField: Story = {
+  args: {
+    label: "Password",
+    type: "password",
+    isCapitalize: false,
+    isTrimStartDisabled: false,
+    required: true,
+    characterType: "string-number-special",
+    letterCase: "mixed",
+  },
+};
+
+export const TextInputValidation: Story = {
+  args: {
+    label: "Text Input Validation",
+    type: "text",
+    isCapitalize: false,
+    isTrimStartDisabled: false,
+    required: true,
+    error: true,
+    helperText: "This field is required",
+    characterType: "string",
+    letterCase: "lowercase",
+  },
+};

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

@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import type { FieldValues } from "react-hook-form";
+import { useForm } 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,84 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import type { FieldValues } from "react-hook-form";
+import { useForm } 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 type { 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 type { 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 type { 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 + 1}
+          >
+            <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

@@ -0,0 +1,49 @@
+import { Stack, Typography } from "@mui/material";
+import { PadBox } from "@repo/shared-components";
+import type { 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",
+    },
+  },
+};

package/apps/docs/stories/Stepper/Stepper.stories.tsx

@@ -0,0 +1,110 @@
+import { Stepper } from "@repo/shared-components";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Stepper> = {
+  title: "shared-component/Stepper/Stepper",
+  component: Stepper,
+  tags: ["autodocs"],
+  argTypes: {
+    activeStep: {
+      description: "Set the active step (zero-based index).",
+      control: { type: "number", min: -1 },
+      defaultValue: 0,
+    },
+    orientation: {
+      description: "The component orientation (layout flow direction).",
+      control: {
+        type: "select",
+        options: ["horizontal", "vertical"],
+      },
+      defaultValue: "horizontal",
+    },
+    alternativeLabel: {
+      description:
+        "If true and orientation is horizontal, step label will be under the icon.",
+      control: { type: "boolean" },
+      defaultValue: false,
+    },
+    stepLabelProps: {
+      description: "Props applied to the StepLabel component.",
+      control: { type: "object" },
+      defaultValue: {},
+    },
+    showActiveStepIcon: {
+      description: "Whether to show custom active step icon styling.",
+      control: { type: "boolean" },
+      defaultValue: false,
+    },
+    stepUrls: {
+      description:
+        "Array of URLs. On clicking a step, the user will be redirected to the corresponding URL.",
+      control: { type: "object" },
+    },
+    errorSteps: {
+      description: "Array of step indexes to highlight as errors (red color).",
+      control: { type: "object" },
+    },
+    onStepClick: {
+      description:
+        "Optional callback function to execute when a step is clicked. Overrides stepUrls if provided.",
+      control: false,
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Stepper>;
+
+export const DefaultStepper: Story = {
+  args: {
+    steps: ["Step 1", "Step 2", "Step 3"],
+  },
+};
+
+export const HorizontalAlternativeLabel: Story = {
+  args: {
+    steps: ["Step 1", "Step 2", "Step 3"],
+    orientation: "horizontal",
+    alternativeLabel: true,
+  },
+};
+
+export const VerticalStepper: Story = {
+  args: {
+    steps: ["Step 1", "Step 2", "Step 3"],
+    orientation: "vertical",
+  },
+};
+
+export const ErrorStep: Story = {
+  args: {
+    steps: ["Step 1", "Step 2 (Error)", "Step 3"],
+    activeStep: 1,
+    errorSteps: [1],
+  },
+};
+
+export const CustomActiveStepIcon: Story = {
+  args: {
+    steps: ["Step 1", "Step 2", "Step 3"],
+    activeStep: 1,
+    showActiveStepIcon: true,
+  },
+};
+
+export const StepWithUrls: Story = {
+  args: {
+    steps: ["Home", "Profile", "Settings"],
+    stepUrls: ["/home", "/profile", "/settings"],
+  },
+};
+
+export const StepWithErrorAndUrls: Story = {
+  args: {
+    steps: ["Step 1", "Step 2 (Error)", "Step 3"],
+    errorSteps: [1],
+    stepUrls: ["/step-1", "/step-2", "/step-3"],
+    activeStep: 0,
+  },
+};

package/apps/docs/stories/Stepper/StepperV2.stories.tsx

@@ -0,0 +1,44 @@
+import { StepperV2 } from "@repo/shared-components";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof StepperV2> = {
+  title: "shared-component/Stepper/StepperV2",
+  component: StepperV2,
+  tags: ["autodocs"],
+  argTypes: {
+    activeStep: {
+      description: "Set the active step (zero-based index).",
+      control: { type: "number", min: -1 },
+      defaultValue: 0,
+    },
+    orientation: {
+      description: "The component orientation (layout flow direction).",
+      control: {
+        type: "select",
+        options: ["horizontal", "vertical"],
+      },
+      defaultValue: "horizontal",
+    },
+    alternativeLabel: {
+      description:
+        "If true and orientation is horizontal, step label will be under the icon.",
+      control: { type: "boolean" },
+      defaultValue: false,
+    },
+    stepLabelProps: {
+      description: "Props applied to the StepLabel component.",
+      control: { type: "object" },
+      defaultValue: {},
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof StepperV2>;
+
+export const CustomizedSteppers: Story = {
+  args: {
+    steps: ["Step 1", "Step 2", "Step 3"],
+  },
+};