@codezee/sixtify-brahma 0.1.1

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,
+  },
+};

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 { 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,75 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Stepper } from "@repo/shared-components";
+
+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: {},
+    },
+  },
+};
+
+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,
+    stepLabelProps: { error: true },
+  },
+};
+
+export const CustomActiveStepIcon: Story = {
+  args: {
+    steps: ["Step 1", "Step 2", "Step 3"],
+    activeStep: 1,
+    showActiveStepIcon: true,
+  },
+};

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

@@ -0,0 +1,44 @@
+import { StepperV2 } from "@repo/shared-components";
+import { 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"],
+  },
+};

package/apps/docs/stories/Timeline/AttendanceStatus.stories.tsx

@@ -0,0 +1,29 @@
+import { AttendanceStatus } from "@repo/shared-components";
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof AttendanceStatus> = {
+  title: "shared-component/Timeline/AttendanceStatus",
+  component: AttendanceStatus,
+  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 AttendanceStatus>;
+
+export const DefaultTimelineStatus: Story = {};

package/apps/docs/stories/Timeline/Timeline.stories.tsx

@@ -0,0 +1,38 @@
+import { Timeline } from "@repo/shared-components";
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Timeline> = {
+  title: "shared-component/Timeline/Timeline",
+  component: Timeline,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Timeline>;
+
+export const DefaultTimeline: Story = {
+  args: {
+    totalDots: 24,
+    highlightedIntervals: [
+      {
+        in_time: "2024-11-18T04:00:04.000Z",
+        out_time: "2024-11-18T07:00:04.000Z",
+        status_type: "present",
+      },
+      {
+        in_time: "2024-11-18T08:00:04.000Z",
+        out_time: "2024-11-18T09:00:04.000Z",
+        status_type: "leave",
+      },
+      {
+        in_time: "2024-11-18T10:00:04.000Z",
+        out_time: "2024-11-18T13:00:04.000Z",
+        status_type: "present",
+      },
+    ],
+    startTimeline: "2024-11-17T22:30:04.000Z",
+    shiftStartTime: "2024-11-18T03:00:04.000Z",
+    shiftEndTime: "2024-11-18T13:00:04.000Z",
+  },
+};

package/apps/docs/stories/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,30 @@
+import { Tooltip } from "@repo/shared-components";
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Tooltip> = {
+  title: "shared-component/Tooltip",
+  component: Tooltip,
+  tags: ["autodocs"],
+  argTypes: {
+    text: {
+      control: "text",
+      description: "Text to be displayed inside the tooltip",
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Tooltip>;
+
+export const DefaultTooltip: Story = {
+  args: {
+    text: "This is a default tooltip",
+  },
+};
+
+export const LongTextTooltip: Story = {
+  args: {
+    text: "This tooltip has a long text that will be truncated if it exceeds the maximum width of 150px.",
+  },
+};

package/apps/docs/stories/UserProfileMenu/UserProfileMenu.stories.tsx

@@ -0,0 +1,112 @@
+import { AccountCircle, Logout, Settings } from "@mui/icons-material";
+import { UserProfileMenu } from "@repo/shared-components";
+import { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+
+const meta: Meta<typeof UserProfileMenu> = {
+  title: "shared-component/UserProfileMenu",
+  component: UserProfileMenu,
+  tags: ["autodocs"],
+  argTypes: {
+    userDetails: { control: "object" },
+    menuItems: {
+      control: {
+        type: "object",
+      },
+    },
+  },
+  args: {
+    userDetails: {
+      name: "John Doe",
+      email: "john.doe@example.com",
+      avatar: "https://i.pravatar.cc/150?img=3",
+    },
+    menuItems: [],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof UserProfileMenu>;
+
+export const DefaultUserProfileMenu: Story = {
+  args: {
+    userDetails: {
+      name: "John Doe",
+      email: "john.doe@example.com",
+      avatar: "https://i.pravatar.cc/150?img=3",
+    },
+    menuItems: [],
+  },
+};
+
+export const UserProfileMenuWithItems: Story = {
+  args: {
+    userDetails: {
+      name: "Jane Smith",
+      email: "jane.smith@example.com",
+      avatar: "https://i.pravatar.cc/150?img=10",
+    },
+    menuItems: [
+      {
+        key: "profile",
+        label: "Profile",
+        icon: <AccountCircle />,
+        onClick: fn(),
+      },
+      {
+        key: "settings",
+        label: "Settings",
+        icon: <Settings />,
+        onClick: fn(),
+      },
+      {
+        key: "logout",
+        label: "Logout",
+        icon: <Logout />,
+        divider: true,
+        onClick: fn(),
+      },
+    ],
+  },
+};
+
+export const UserProfileMenuWithDividers: Story = {
+  args: {
+    userDetails: {
+      name: "Alice Johnson",
+      email: "alice.johnson@example.com",
+      avatar: "https://i.pravatar.cc/150?img=5",
+    },
+    menuItems: [
+      {
+        key: "profile",
+        label: "Profile",
+        icon: <AccountCircle />,
+        onClick: fn(),
+      },
+      {
+        key: "divider1",
+        label: "",
+        divider: true,
+      },
+      {
+        key: "settings",
+        label: "Settings",
+        icon: <Settings />,
+        onClick: fn(),
+      },
+      {
+        key: "divider2",
+        label: "",
+        divider: true,
+      },
+      {
+        key: "logout",
+        label: "Logout",
+        icon: <Logout />,
+        onClick: fn(),
+      },
+    ],
+  },
+};

package/apps/docs/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "@repo/typescript-config/nextjs.json",
+  "compilerOptions": {
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": [
+    "next-auth.ds",
+    "next-env.d.ts",
+    "next.config.js",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": ["node_modules"]
+}

package/commitlint.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  extends: ["@commitlint/config-conventional"],
+  rules: {
+    "body-max-line-length": [2, "always", 300],
+  },
+};

package/index.ts

@@ -0,0 +1 @@
+export * from "./packages/shared-components/src";

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@codezee/sixtify-brahma",
+  "version": "0.1.1",
+  "scripts": {
+    "lint": "turbo lint",
+    "format": "prettier --write \"**/*.{ts,tsx}\"",
+    "prepare": "husky install",
+    "build": "turbo build"
+  },
+  "main": "index.ts",
+  "devDependencies": {
+    "@commitlint/cli": "^19.3.0",
+    "@commitlint/config-conventional": "^19.2.2",
+    "@types/lodash": "^4.17.5",
+    "@types/luxon": "^3.4.2",
+    "@types/node": "^22.10.0",
+    "@types/react-date-range": "^1.4.9",
+    "@types/react-image-gallery": "^1.2.4",
+    "@types/uuid": "^10.0.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "husky": "^8.0.0",
+    "lint-staged": "^15.2.7",
+    "prettier": "^3.2.5",
+    "turbo": "latest",
+    "typescript": "^5.4.5"
+  },
+  "packageManager": "pnpm@8.15.6",
+  "engines": {
+    "node": ">=18"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@hookform/resolvers": "^3.6.0",
+    "@mui/icons-material": "^5.15.20",
+    "@mui/material": "^5.15.20",
+    "@mui/styled-engine-sc": "6.0.0-alpha.18",
+    "@mui/x-charts": "^7.22.3",
+    "@mui/x-data-grid": "^7.6.2",
+    "@mui/x-date-pickers": "^7.8.0",
+    "@tanstack/react-query": "^5.48.0",
+    "@tanstack/react-query-devtools": "^5.48.0",
+    "@types/file-saver": "^2.0.7",
+    "ag-grid-community": "^31.3.2",
+    "ag-grid-react": "^31.3.2",
+    "axios": "^1.7.2",
+    "date-fns": "^4.1.0",
+    "eslint-plugin-sonarjs": "1.0.4-alpha.1",
+    "file-saver": "^2.0.5",
+    "file64": "1.0.1",
+    "gh-pages": "^6.3.0",
+    "i18next": "^23.12.1",
+    "jszip": "^3.10.1",
+    "lodash": "^4.17.21",
+    "luxon": "^3.4.4",
+    "next": "^14.2.5",
+    "next-auth": "^4.24.7",
+    "react-date-range": "^2.0.1",
+    "react-hook-form": "^7.51.5",
+    "react-i18next": "^14.1.2",
+    "react-multi-carousel": "^2.8.5",
+    "react-toastify": "^10.0.5",
+    "react-webcam": "7.2.0",
+    "styled-components": "^6.1.11",
+    "usehooks-ts": "^3.1.0",
+    "uuid": "^10.0.0",
+    "zod": "^3.23.8"
+  }
+}

package/packages/eslint-config/README.md

@@ -0,0 +1,3 @@
+# `@turbo/eslint-config`
+
+Collection of internal eslint configurations.