@codezee/sixtify-brahma 0.0.0

package/.github/workflows/check-build.yml

@@ -0,0 +1,41 @@
+name: Check Build Status on PR
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      # Checkout repository
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      # Set up Node.js
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+
+      - name: Install PNPM Globally
+        run: npm install -g pnpm
+
+      # Install dependencies
+      - name: Install dependencies
+        run: pnpm install
+        
+      - name: Check lint
+        run: pnpm run lint
+
+      - name: Check format
+        run: pnpm run check:format
+
+      - name: Check types
+        run: pnpm run check:types
+
+      # Build the project
+      - name: Build package
+        run: pnpm run build

package/.github/workflows/deploy-on-npm.yml

@@ -0,0 +1,43 @@
+name: Publish to NPM registry 
+
+on:
+  push:
+    branches:
+      - feat/optimization
+
+
+jobs:
+  publish-npm:
+    runs-on: ubuntu-latest
+
+    steps:
+      # Checkout repository
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      # Set up Node.js
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          registry-url: 'https://registry.npmjs.org/'
+
+      - name: Install PNPM Globally
+        run: npm install -g pnpm
+
+      # Install dependencies
+      - name: Install dependencies
+        run: pnpm install
+
+      # Build the package
+      - name: Build package
+        run: pnpm run build 
+
+      # Set npm authentication token
+      - name: Authenticate with npm
+        run: npm config set //registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}
+        
+      - name: Publish to NPM registry
+        run: npm publish --access public
+
+    

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,6 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+pnpm run check:format
+pnpm run check:types
+pnpm run lint

package/.lintstagedrc

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

package/.prettierignore

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

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,90 @@
+# @codezee/sixtify-brahama
+
+A React package that simplifies form creation and table management!  
+This package leverages react-hook-form and AG Grid to provide a comprehensive set of input fields and components for building dynamic and powerful forms.  
+It also includes a complete Storybook for all components to help you explore and integrate them easily.
+
+## Features
+- Integrates seamlessly with react-hook-form for form handling.
+- Includes AG Grid for powerful table management.
+- A wide variety of input components to suit all your needs.
+- Fully documented with Storybook.
+
+
+This package 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
+
+### 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)
+
+
+
+
+## Installation
+
+Install the package using pnpm:
+
+```sh
+pnpm install @codezee/sixtify-brahama
+```
+
+## Usage
+
+Import the package in your React component:
+
+```jsx
+import { TextField } from '@codezee/sixtify-brahama';
+import { useForm } from 'react-hook-form';
+
+function MyComponent() {
+    const { control } = useForm({
+        defaultValues: {
+            name: 'John Doe',
+        },
+    });
+
+  return (
+    <TextField name="name" label="Name" control={control} />
+  );
+}
+```
+
+
+## Documentation
+
+For detailed usage and examples, check out the full documentation:  
+[See Documentation](https://hardikranpariya.github.io/sixtify-brahma/)

package/apps/docs/.eslintrc.cjs

@@ -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 { dirname, join } 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"],
+  addons: [
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/nextjs"),
+    options: {},
+  },
+};
+export default config;

package/apps/docs/.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/addons';
+import { theme } from './theme';
+
+addons.setConfig({
+  theme,
+});

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/.storybook/theme.ts

@@ -0,0 +1,8 @@
+import { create } from "@storybook/theming";
+import { version } from "../../../package.json";
+
+export const theme = create({
+  base: "light",
+  brandTitle: `Brahma ${version}`,
+  brandUrl: "https://github.com/hardikranpariya/sixtify-brahma.git",
+});

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,43 @@
+{
+  "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/**/*.{ts,tsx}'",
+    "check:types": "tsc --noEmit",
+    "check:format": "prettier --check \"./stories/**/*.{ts,tsx,js}\"",
+    "format": "prettier --write \"./stories/**/*.{ts,tsx}\""
+  },
+  "dependencies": {
+    "@repo/shared-components": "workspace:*",
+    "@storybook/addons": "^7.6.17",
+    "@storybook/theming": "^8.6.12",
+    "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/nextjs": "^8.3.4",
+    "@storybook/react": "^8.2.6",
+    "@storybook/test": "^8.3.4",
+    "@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,26 @@
+@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';
+@import 'react-phone-input-2/lib/style.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/Actions/Actions.stories.tsx

@@ -0,0 +1,49 @@
+import { Stack } from "@mui/material";
+import {
+  AddAction,
+  CalendarAction,
+  ConfigureAction,
+  DeleteAction,
+  DownloadAction,
+  EditAction,
+  ExportAction,
+  FilterAction,
+  HistoryAction,
+  ImportAction,
+  ViewAction,
+} from "@repo/shared-components";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Stack> = {
+  title: "shared-component/ActionBox",
+  component: Stack,
+  tags: ["autodocs"],
+  render: () => {
+    return (
+      <Stack
+        justifyContent="center"
+        alignItems="center"
+        flexDirection="row"
+        sx={{ width: "100%", height: "50px", gap: "10px" }}
+      >
+        <AddAction />
+        <CalendarAction />
+        <ConfigureAction />
+        <DownloadAction />
+        <HistoryAction />
+        <DeleteAction />
+        <EditAction />
+        <FilterAction />
+        <ExportAction />
+        <ImportAction />
+        <ViewAction />
+      </Stack>
+    );
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Stack>;
+
+export const ActionsIcons: Story = {};

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

@@ -0,0 +1,70 @@
+import { AgGrid } from "@repo/shared-components";
+import type { Meta, StoryObj } from "@storybook/react";
+import type { 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: [],
+    // eslint-disable-next-line quotes
+    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 type { 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" },
+    ],
+  },
+};