@codezee/sixtify-brahma 0.2.3 → 0.2.6

package/.github/workflows/deploy-storybook.yml

@@ -0,0 +1,40 @@
+name: Deploy Storybook to GitHub Pages
+
+# Trigger the workflow on every push to the main branch
+on:
+  push:
+    branches:
+      - main  # Adjust this to match your branch name
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      # Step 1: Check out the repository
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      # Step 2: Set up Node.js (adjust the Node version if needed)
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20  # Use the Node.js version your project requires
+
+      - name: Install PNPM Globally
+        run: npm install -g pnpm
+
+      # Step 3: Install dependencies
+      - name: Install dependencies
+        run: pnpm install  # Use `npm install` or `yarn install` if not using pnpm
+
+      # Step 4: Build the Storybook static files
+      - name: Build Storybook
+        run: pnpm run build  # Adjust the path to your Storybook app
+
+      # Step 5: Deploy to GitHub Pages
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: apps/docs/storybook-static  # Adjust to your static output directory

package/.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no -- commitlint --edit

package/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+pnpm lint-staged --concurrent false

package/.husky/pre-push

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+pnpm run build

package/.lintstagedrc

@@ -0,0 +1,5 @@
+{
+  "*.{ts,tsx}": [
+    "pnpm run format"
+  ]
+}

package/.prettierignore

@@ -0,0 +1,11 @@
+# Editor
+.idea
+.vscode
+
+# Node modules
+node_modules
+
+# Lock files
+pnpm-lock.yaml
+buildspec.yml
+.github/

package/.prettierrc

@@ -0,0 +1,22 @@
+{
+  "arrowParens": "always",
+  "bracketSameLine": false,
+  "bracketSpacing": true,
+  "embeddedLanguageFormatting": "auto",
+  "endOfLine": "lf",
+  "htmlWhitespaceSensitivity": "css",
+  "insertPragma": false,
+  "jsxSingleQuote": false,
+  "parser": "typescript",
+  "printWidth": 80,
+  "proseWrap": "preserve",
+  "quoteProps": "as-needed",
+  "requirePragma": false,
+  "semi": true,
+  "singleAttributePerLine": false,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": false,
+  "vueIndentScriptAndStyle": false
+}

package/.vscode/extensions.json

@@ -0,0 +1,22 @@
+{
+  // See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
+  // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
+
+  // List of extensions which should be recommended for users of this workspace.
+  "recommendations": [
+    "alefragnani.bookmarks",
+    "streetsidesoftware.code-spell-checker",
+    "naumovs.color-highlight",
+    "dbaeumer.vscode-eslint",
+    "eamodio.gitlens",
+    "wix.vscode-import-cost",
+    "unifiedjs.vscode-mdx",
+    "liviuschera.noctis",
+    "esbenp.prettier-vscode",
+    "tyriar.sort-lines",
+    "gruntfuggly.todo-tree",
+    "wayou.vscode-todo-highlight"
+  ],
+  // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
+  "unwantedRecommendations": []
+}

package/.vscode/settings.json

@@ -0,0 +1,17 @@
+{
+  "eslint.workingDirectories": [
+    {
+      "mode": "auto"
+    }
+  ],
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.organizeImports": "explicit",
+    // "source.fixAll.eslint": "explicit"
+  },
+  "eslint.format.enable": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "files.associations": {
+    "*.env.*": "env",
+  }
+}

package/apps/docs/.eslintrc.cjs

@@ -0,0 +1,4 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  extends: ["@repo/eslint-config/storybook.js"],
+};

package/apps/docs/.eslintrc.js

@@ -0,0 +1,9 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ["@repo/eslint-config/next.js"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: true,
+  },
+};

package/apps/docs/.storybook/main.ts

@@ -0,0 +1,23 @@
+import type { StorybookConfig } from "@storybook/nextjs";
+
+import { join, dirname } from "path";
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, "package.json")));
+}
+const config: StorybookConfig = {
+  stories: ["../stories/*.stories.tsx", "../stories/**/*.stories.tsx"],
+  addons: [
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/nextjs"),
+    options: {},
+  },
+};
+export default config;

package/apps/docs/.storybook/preview.tsx

@@ -0,0 +1,27 @@
+import type { Preview } from "@storybook/react";
+import React from "react";
+import { ThemeProvider, createTheme } from "@mui/material";
+import { Theme, appTheme } from "@repo/shared-components";
+import "../public/globals.css";
+
+const createdAppTheme = createTheme(appTheme(Theme.light));
+
+export const decorators = [
+  (Story) => (
+    <ThemeProvider theme={createdAppTheme}>
+      <Story />
+    </ThemeProvider>
+  ),
+];
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package/apps/docs/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

package/apps/docs/next.config.mjs

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;

package/apps/docs/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "docs",
+  "version": "0.0.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "storybook dev",
+    "build": "storybook build",
+    "start": "serve storybook-static",
+    "deploy-storybook": "gh-pages -d storybook-static",
+    "clean": "rm -rf .turbo && rm -rf node_modules",
+    "lint": "eslint ./stories/*.stories.tsx --max-warnings 0"
+  },
+  "dependencies": {
+    "@repo/shared-components": "workspace:*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@repo/eslint-config": "workspace:*",
+    "@repo/typescript-config": "workspace:*",
+    "@storybook/addon-actions": "^8.2.6",
+    "@storybook/addon-essentials": "^8.2.6",
+    "@storybook/addon-links": "^8.2.6",
+    "@storybook/test": "^8.3.4",
+    "@storybook/nextjs": "^8.3.4",
+    "@storybook/react": "^8.2.6",
+    "@types/node": "^20",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "15.0.0-rc.0",
+    "postcss": "^8",
+    "serve": "^14.2.1",
+    "storybook": "^8.2.6",
+    "typescript": "^5.3.3"
+  }
+}

package/apps/docs/public/globals.css

@@ -0,0 +1,25 @@
+@import "ag-grid-community/styles/ag-grid.css";
+@import "ag-grid-community/styles/ag-theme-quartz.css";
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+@import 'react-date-range/dist/styles.css';
+@import 'react-date-range/dist/theme/default.css';
+
+body {
+  font-family: 'Poppins', sans-serif;
+  margin: 0;
+  height:100%;
+}
+
+.ag-theme-quartz {
+  --ag-font-family: 'Poppins', sans-serif;
+}
+.ag-row .ag-cell {
+  display: flex;
+  align-items: center;
+}
+.ag-header-cell-text {
+  font-weight: 600;
+}
+.rdrDefinedRangesWrapper{
+  width:0px !important;
+}

package/apps/docs/stories/AgGrid/AgGrid.stories.tsx

@@ -0,0 +1,69 @@
+import { AgGrid } from "@repo/shared-components";
+import { Meta, StoryObj } from "@storybook/react";
+import { ColDef } from "ag-grid-community";
+
+const column: ColDef[] = [
+  {
+    headerName: "Id",
+    field: "id",
+    sortable: false,
+    width: 150,
+  },
+  {
+    headerName: "name",
+    field: "name",
+    width: 150,
+  },
+  {
+    headerName: "age",
+    field: "age",
+    width: 150,
+  },
+];
+
+const rowData = [
+  { id: 1, name: "John", age: 25 },
+  { id: 2, name: "Jane", age: 30 },
+  { id: 3, name: "Bob", age: 40 },
+];
+
+const meta: Meta<typeof AgGrid> = {
+  title: "shared-component/AgGrid",
+  component: AgGrid,
+  tags: ["autodocs"],
+  argTypes: {
+    height: { control: "text" },
+    totalRecords: { control: "number" },
+    rowModelType: { control: "select", options: ["clientSide", "infinite"] },
+    ref: { control: false },
+    overlayNoRowsTemplate: { control: false },
+  },
+  args: {
+    rowData,
+    rowModelType: "clientSide",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof AgGrid>;
+
+export const DefaultAgGrid: Story = {
+  args: {
+    rowModelType: "clientSide",
+    totalRecords: 3,
+  },
+  render: (args) => {
+    return <AgGrid {...args} columnDefs={column} height="500px" />;
+  },
+};
+
+export const NoRecordsAgGridWithOverlay: Story = {
+  args: {
+    rowData: [],
+    overlayNoRowsTemplate: '<span class="no-rows">No records to display</span>',
+  },
+  render: (args) => {
+    return <AgGrid {...args} columnDefs={column} height="500px" />;
+  },
+};

package/apps/docs/stories/AppBar/AppBar.stories.tsx

@@ -0,0 +1,39 @@
+import { Stack } from "@mui/material";
+import { AppBar, Button } from "@repo/shared-components";
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof AppBar> = {
+  title: "shared-component/AppBar",
+  tags: ["autodocs"],
+  component: AppBar,
+  argTypes: {
+    drawerOpen: {
+      control: "boolean",
+    },
+  },
+  render: (args) => (
+    <AppBar {...args}>
+      <Stack gap="24px" direction="row" alignItems="center">
+        <Button>Home</Button>
+        <Button>About</Button>
+        <Button>Contact</Button>
+      </Stack>
+    </AppBar>
+  ),
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+  args: {
+    drawerOpen: false,
+  },
+};
+
+export const DrawerOpen: Story = {
+  args: {
+    drawerOpen: true,
+  },
+};

package/apps/docs/stories/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -0,0 +1,37 @@
+import FolderIcon from "@mui/icons-material/Folder";
+import HomeIcon from "@mui/icons-material/Home";
+import { Breadcrumbs } from "@repo/shared-components";
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+
+type StoryProps = React.ComponentProps<typeof Breadcrumbs>;
+
+const meta: Meta<StoryProps> = {
+  title: "shared-component/Breadcrumbs",
+  component: Breadcrumbs,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Breadcrumbs>;
+
+export const TextOnly: Story = {
+  args: {
+    items: [
+      { text: "Home", onClick: fn() },
+      { text: "Products", onClick: fn() },
+      { text: "Categories" },
+    ],
+  },
+};
+
+export const WithIcons: Story = {
+  args: {
+    items: [
+      { icon: <HomeIcon />, text: "Home", onClick: fn() },
+      { icon: <FolderIcon />, text: "Documents", onClick: fn() },
+      { text: "Details" },
+    ],
+  },
+};

package/apps/docs/stories/Button/ButtonGroup.stories.tsx

@@ -0,0 +1,99 @@
+import FavoriteIcon from "@mui/icons-material/Favorite";
+import HomeIcon from "@mui/icons-material/Home";
+import SettingsIcon from "@mui/icons-material/Settings";
+import { ButtonGroup as MuiButtonGroup, Stack } from "@mui/material";
+import { Button, ButtonGroup } from "@repo/shared-components";
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+
+type StoryProps = React.ComponentProps<typeof ButtonGroup>;
+
+const meta: Meta<StoryProps> = {
+  title: "shared-component/Button/ButtonGroup",
+  component: ButtonGroup,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ButtonGroup>;
+
+export const DefaultButtonGroup: Story = {
+  args: {
+    renderButtons: [
+      { icon: <HomeIcon />, value: "home", label: "Home", selected: true },
+      {
+        icon: <FavoriteIcon />,
+        value: "favorites",
+        label: "Favorites",
+        selected: false,
+      },
+      {
+        icon: <SettingsIcon />,
+        value: "settings",
+        label: "Settings",
+        selected: false,
+      },
+    ],
+    onSelect: fn(),
+  },
+};
+
+export const NoSelectedButton: Story = {
+  args: {
+    renderButtons: [
+      { icon: <HomeIcon />, value: "home", label: "Home", selected: false },
+      {
+        icon: <FavoriteIcon />,
+        value: "favorites",
+        label: "Favorites",
+        selected: false,
+      },
+      {
+        icon: <SettingsIcon />,
+        value: "settings",
+        label: "Settings",
+        selected: false,
+      },
+    ],
+    onSelect: fn(),
+  },
+};
+
+export const DisabledButtons: Story = {
+  args: {
+    renderButtons: [
+      { icon: <HomeIcon />, value: "home", label: "Home", selected: false },
+      {
+        icon: <FavoriteIcon />,
+        value: "favorites",
+        label: "Favorites",
+        selected: false,
+      },
+      {
+        icon: <SettingsIcon />,
+        value: "settings",
+        label: "Settings",
+        selected: false,
+      },
+    ],
+    onSelect: fn(),
+  },
+  decorators: [
+    () => (
+      <Stack direction="row" gap="10px">
+        <MuiButtonGroup aria-label="Disabled button group">
+          <Button variant="outlined" disabled>
+            Home
+          </Button>
+          <Button variant="outlined" disabled>
+            Favorites
+          </Button>
+          <Button variant="outlined" disabled>
+            Settings
+          </Button>
+        </MuiButtonGroup>
+      </Stack>
+    ),
+  ],
+};

package/apps/docs/stories/Button/button.stories.tsx

@@ -0,0 +1,99 @@
+import { Stack } from "@mui/material";
+import { Button } from "@repo/shared-components";
+import type { Meta as MetaTypes, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import type { ComponentProps } from "react";
+
+type StoryProps = ComponentProps<typeof Button> & {
+  variant: string;
+  size: "small" | "medium" | "large";
+};
+
+const meta: MetaTypes<StoryProps> = {
+  title: "shared-component/Button/Button",
+  component: Button,
+  tags: ["autodocs"],
+  argTypes: {
+    loading: { control: "boolean" },
+    disabled: { control: "boolean" },
+    children: { control: "text" },
+    variant: {
+      options: ["outlined", "contained"],
+      control: {
+        type: "select",
+      },
+    },
+    size: {
+      options: ["small", "medium", "large"],
+      control: {
+        type: "select",
+      },
+    },
+    sx: { control: "object" },
+    color: {
+      options: ["primary", "secondary"],
+      control: {
+        type: "select",
+      },
+    },
+  },
+  args: {
+    onClick: fn(),
+    children: "Button",
+    size: "medium",
+  },
+  render: (args) => (
+    <Stack direction="row" gap="10px">
+      <Button {...args} size="large">
+        Large
+      </Button>
+      <Button {...args} size="medium">
+        Medium (Default)
+      </Button>
+      <Button {...args} size="small">
+        Small
+      </Button>
+    </Stack>
+  ),
+};
+
+// eslint-disable-next-line import/no-default-export
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    variant: "contained",
+  },
+};
+
+export const Contained: Story = {
+  args: {
+    variant: "contained",
+  },
+};
+
+export const Outlined: Story = {
+  args: {
+    variant: "outlined",
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    loading: true,
+  },
+};
+
+export const Primary: Story = {
+  args: {
+    color: "primary",
+  },
+};
+export const Secondary: Story = {
+  args: {
+    color: "secondary",
+  },
+};

package/apps/docs/stories/Card/AttendanceCard.stories.tsx

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