@codezee/sixtify-brahma 0.2.3 → 0.2.6

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

@@ -1,18 +1,13 @@
 {
   "name": "@codezee/sixtify-brahma",
-  "version": "0.2.3",
+  "version": "0.2.6",
   "scripts": {
     "lint": "turbo lint",
     "format": "prettier --write \"**/*.{ts,tsx}\"",
     "prepare": "husky install",
     "build": "turbo build"
   },
-  "main": "packages/shared-components/dist/index.js",
-  "types": "packages/shared-components/dist/index.d.ts",
-  "files": [
-    "packages/shared-components/dist",
-    "apps/docs/storybook-static"
-  ],
+  "main": "index.ts",
   "devDependencies": {
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",

package/packages/eslint-config/README.md

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

package/packages/eslint-config/library.js

@@ -0,0 +1,88 @@
+const { resolve } = require("node:path");
+
+const project = resolve(process.cwd(), "tsconfig.json");
+
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  extends: [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "prettier",
+    "turbo",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:sonarjs/recommended-legacy",
+    "plugin:import/recommended",
+  ],
+  plugins: ["sonarjs", "import"],
+
+  globals: {
+    React: true,
+    JSX: true,
+  },
+  env: {
+    node: true,
+  },
+  settings: {
+    react: {
+      version: "detect",
+    },
+    "import/resolver": {
+      typescript: {
+        project,
+      },
+    },
+  },
+  ignorePatterns: [".*.js", "node_modules/", "dist/"],
+  overrides: [
+    {
+      files: ["*.js?(x)", "*.ts?(x)"],
+    },
+  ],
+  rules: {
+    "@typescript-eslint/consistent-type-definitions": ["error", "type"],
+    "react/jsx-curly-brace-presence": [
+      "error",
+      { props: "never", children: "never" },
+    ],
+    "object-shorthand": ["error", "always"],
+    "import/no-duplicates": ["error"],
+    curly: "error",
+    quotes: ["error", "double"],
+    "import/no-default-export": "off",
+    "sonarjs/todo-tag": "off",
+    "no-template-curly-in-string": "error",
+    "@typescript-eslint/consistent-type-imports": "error",
+    "no-use-before-define": "error",
+    "no-console": "error",
+    "no-empty-function": "error",
+    "no-lone-blocks": "error",
+    "no-lonely-if": "error",
+    "no-else-return": "error",
+    "padding-line-between-statements": [
+      "error",
+      { blankLine: "always", prev: ["case", "default"], next: "*" },
+      { blankLine: "always", prev: "directive", next: "*" },
+      { blankLine: "any", prev: "directive", next: "directive" },
+      {
+        blankLine: "always",
+        prev: ["var", "let", "const"],
+        next: "*",
+      },
+      {
+        blankLine: "always",
+        prev: "*",
+        next: ["var", "let", "const"],
+      },
+      {
+        blankLine: "always",
+        prev: "*",
+        next: "return",
+      },
+      {
+        blankLine: "always",
+        prev: "*",
+        next: "if",
+      },
+    ],
+  },
+};

package/packages/eslint-config/next.js

@@ -0,0 +1,85 @@
+const { resolve } = require("node:path");
+
+const project = resolve(process.cwd(), "tsconfig.json");
+
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  extends: [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:sonarjs/recommended-legacy",
+    "prettier",
+    require.resolve("@vercel/style-guide/eslint/next"),
+    "plugin:@typescript-eslint/recommended",
+    "turbo",
+    "plugin:import/recommended",
+  ],
+  plugins: ["sonarjs", "import"],
+  globals: {
+    React: true,
+    JSX: true,
+  },
+  env: {
+    node: true,
+    browser: true,
+  },
+  settings: {
+    react: {
+      version: "detect",
+    },
+
+    "import/resolver": {
+      typescript: {
+        project,
+      },
+    },
+  },
+  ignorePatterns: [".*.js", "node_modules/"],
+  overrides: [{ files: ["*.js?(x)", "*.ts?(x)"] }],
+  rules: {
+    "@typescript-eslint/consistent-type-definitions": ["error", "type"],
+    "react/jsx-curly-brace-presence": [
+      "error",
+      { props: "never", children: "never" },
+    ],
+    "object-shorthand": ["error", "always"],
+    curly: "error",
+    quotes: ["error", "double"],
+    "import/no-duplicates": ["error"],
+    "@typescript-eslint/consistent-type-imports": "error",
+    "no-template-curly-in-string": "error",
+    "no-use-before-define": "error",
+    "no-console": "error",
+    "no-empty-function": "error",
+    "no-lone-blocks": "error",
+    "no-lonely-if": "error",
+    "sonarjs/todo-tag": "off",
+    "no-else-return": "error",
+    "padding-line-between-statements": [
+      "error",
+      { blankLine: "always", prev: ["case", "default"], next: "*" },
+      { blankLine: "always", prev: "directive", next: "*" },
+      { blankLine: "any", prev: "directive", next: "directive" },
+      {
+        blankLine: "always",
+        prev: ["var", "let", "const"],
+        next: "*",
+      },
+      {
+        blankLine: "always",
+        prev: "*",
+        next: ["var", "let", "const"],
+      },
+      {
+        blankLine: "always",
+        prev: "*",
+        next: "return",
+      },
+      {
+        blankLine: "always",
+        prev: "*",
+        next: "if",
+      },
+    ],
+  },
+};

package/packages/eslint-config/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@repo/eslint-config",
+  "version": "0.0.0",
+  "private": true,
+  "files": [
+    "library.js",
+    "next.js",
+    "react-internal.js"
+  ],
+  "devDependencies": {
+    "@vercel/style-guide": "^5.2.0",
+    "eslint-config-turbo": "^2.0.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-only-warn": "^1.1.0",
+    "@typescript-eslint/parser": "^7.1.0",
+    "@typescript-eslint/eslint-plugin": "^7.1.0",
+    "typescript": "^5.3.3"
+  }
+}