@codezee/sixtify-brahma 0.1.1

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/README.md

@@ -0,0 +1,81 @@
+# Turborepo starter
+
+This is an official starter Turborepo.
+
+## Using this example
+
+Run the following command:
+
+```sh
+npx create-turbo@latest
+```
+
+## What's inside?
+
+This Turborepo includes the following packages/apps:
+
+### Apps and Packages
+
+- `docs`: a [Next.js](https://nextjs.org/) app
+- `web`: another [Next.js](https://nextjs.org/) app
+- `@repo/ui`: a stub React component library shared by both `web` and `docs` applications
+- `@repo/eslint-config`: `eslint` configurations (includes `eslint-config-next` and `eslint-config-prettier`)
+- `@repo/typescript-config`: `tsconfig.json`s used throughout the monorepo
+
+Each package/app is 100% [TypeScript](https://www.typescriptlang.org/).
+
+### Utilities
+
+This Turborepo has some additional tools already setup for you:
+
+- [TypeScript](https://www.typescriptlang.org/) for static type checking
+- [ESLint](https://eslint.org/) for code linting
+- [Prettier](https://prettier.io) for code formatting
+
+### Build
+
+To build all apps and packages, run the following command:
+
+```
+cd my-turborepo
+pnpm build
+```
+
+### Develop
+
+To develop all apps and packages, run the following command:
+
+```
+cd my-turborepo
+pnpm dev
+```
+
+### Remote Caching
+
+Turborepo can use a technique known as [Remote Caching](https://turbo.build/repo/docs/core-concepts/remote-caching) to share cache artifacts across machines, enabling you to share build caches with your team and CI/CD pipelines.
+
+By default, Turborepo will cache locally. To enable Remote Caching you will need an account with Vercel. If you don't have an account you can [create one](https://vercel.com/signup), then enter the following commands:
+
+```
+cd my-turborepo
+npx turbo login
+```
+
+This will authenticate the Turborepo CLI with your [Vercel account](https://vercel.com/docs/concepts/personal-accounts/overview).
+
+Next, you can link your Turborepo to your Remote Cache by running the following command from the root of your Turborepo:
+
+```
+npx turbo link
+```
+
+## Useful Links
+
+Learn more about the power of Turborepo:
+
+- [Tasks](https://turbo.build/repo/docs/core-concepts/monorepos/running-tasks)
+- [Caching](https://turbo.build/repo/docs/core-concepts/caching)
+- [Remote Caching](https://turbo.build/repo/docs/core-concepts/remote-caching)
+- [Filtering](https://turbo.build/repo/docs/core-concepts/monorepos/filtering)
+- [Configuration Options](https://turbo.build/repo/docs/reference/configuration)
+- [CLI Usage](https://turbo.build/repo/docs/reference/command-line-reference)

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