push-protocol · rohitmalhotra1420 · Dec 9, 2024 · Dec 9, 2024 · Dec 9, 2024 · rohitmalhotra1420
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/shared-components/.gitignore b/packages/shared-components/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/packages/shared-components/README.md b/packages/shared-components/README.md
@@ -0,0 +1,21 @@
+# Shared Components Library
+
+A reusable design components built to streamline the development process across projects in the monorepo. This library provides a consistent look and feel and promotes code reusability.
+
+## Getting Started
+
+### Installation
+
+Inside the repository where you want to use the shared-components library (e.g., email), add the package as a dependency:
+
+1. Navigate to the consuming repository (e.g., email):
+
+```bash
+cd examples/email
+```
+
+2. Add shared-components as a dependency:
+
+```bash
+npm install ../../packages/shared-components
+```
diff --git a/packages/shared-components/eslint.config.js b/packages/shared-components/eslint.config.js
@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)
diff --git a/packages/shared-components/index.html b/packages/shared-components/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/packages/shared-components/package.json b/packages/shared-components/package.json
@@ -0,0 +1,59 @@
+{
+  "name": "shared-components",
+  "version": "0.1.0",
+  "main": "dist/shared-components.cjs.js",
+  "module": "dist/shared-components.es.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/shared-components.es.js",
+      "require": "./dist/shared-components.cjs.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --build && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.13.0",
+    "@radix-ui/react-dialog": "^1.1.1",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-switch": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.1",
+    "@reach/combobox": "^0.18.0",
+    "@reach/tabs": "^0.18.0",
+    "@table-library/react-table-library": "^4.1.7",
+    "@types/styled-components": "^5.1.34",
+    "rc-pagination": "^4.2.0",
+    "react-router-dom": "^6.26.2",
+    "react-slider": "^2.0.6",
+    "sonner": "^1.5.0",
+    "styled-components": "^5.3.8",
+    "usehooks-ts": "3.1.0",
+    "vite-plugin-dts": "^4.3.0"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.15.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.15.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.14",
+    "globals": "^15.12.0",
+    "postcss": "^8.4.47",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tailwindcss": "^3.4.11",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.15.0",
+    "vite": "^6.0.1"
+  }
+}
diff --git a/packages/shared-components/public/vite.svg b/packages/shared-components/public/vite.svg
diff --git a/packages/shared-components/src/blocks/Blocks.colors.ts b/packages/shared-components/src/blocks/Blocks.colors.ts
@@ -0,0 +1,118 @@
+import { BlocksColorData, BlocksColors, GlobalColors } from './Blocks.types';
+
+// TODO This file needs to be removed after all the blcoks components uses the new design theme
+
+const brandColors = {
+  /* New brand colors */
+
+  'GRAY-100': '#F5F6F8',
+  'GRAY-200': '#EAEBF2',
+  'GRAY-300': '#C4CBD5',
+  'GRAY-400': '#B0B3B9',
+  'GRAY-500': '#8C93A0',
+  'GRAY-600': '#757D8D',
+  'GRAY-700': '#484D58',
+  'GRAY-800': '#313338',
+  'GRAY-900': '#202124',
+  'GRAY-1000': '#17181B',
+
+  'PINK-100': '#FCEBFF',
+  'PINK-200': '#FBE8FF',
+  'PINK-300': '#F3AEFF',
+  'PINK-400': '#CF59E2',
+  'PINK-500': '#D548EC',
+  'PINK-600': '#C742DD',
+  'PINK-700': '#AA30BE',
+  'PINK-800': '#7B0090',
+  'PINK-900': '#570066',
+  'PINK-1000': '#35003F',
+
+  'RED-100': '#FFECEC',
+  'RED-200': '#FFD9D9',
+  'RED-300': '#FFB1B1',
+  'RED-400': '#FF8585',
+  'RED-500': '#FF4E4E',
+  'RED-600': '#F11F1F',
+  'RED-700': '#D43B3B',
+  'RED-800': '#A40A0A',
+  'RED-900': '#670000',
+  'RED-1000': '#400000',
+
+  'GREEN-100': '#D8F7F0',
+  'GREEN-200': '#AFEFE1',
+  'GREEN-300': '#51DCBD',
+  'GREEN-400': '#00C296',
+  'GREEN-500': '#00A47F',
+  'GREEN-600': '#008769',
+  'GREEN-700': '#006B53',
+  'GREEN-800': '#A40A0A',
+  'GREEN-900': '#00382B',
+  'GREEN-1000': '#002019',
+};
+
+export const blocksColorsLegacy = {
+  /* Legacy colors used through out the app */
+  PRIMARY: 'rgba(27.0, 150.0, 227.0, 1.0)',
+  PRIMARY_PINK: '#CF1C84',
+  PLACEHOLDER_DARK_GRAY: '#D9D9D9',
+
+  LINKS: 'rgba(20.0, 126.0, 251.0, 1.0)',
+
+  GRADIENT_PRIMARY: 'rgba(226.0, 8.0, 128.0, 1.0)',
+  GRADIENT_SECONDARY: 'rgba(53.0, 197.0, 243.0, 1.0)',
+  GRADIENT_THIRD: 'rgba(103.0, 76.0, 159.0, 1.0)',
+
+  TRANSPARENT: 'transparent',
+
+  WHITE: 'rgba(255.0, 255.0, 255.0, 1.0)',
+  DARK_WHITE: 'rgba(255.0, 255.0, 255.0, 0.75)',
+  MID_WHITE: 'rgba(255.0, 255.0, 255.0, 0.5)',
+  LIGHT_WHITE: 'rgba(255.0, 255.0, 255.0, 0.25)',
+
+  SLIGHTER_GRAY: 'rgba(250.0, 250.0, 250.0, 1)',
+  SLIGHT_GRAY: 'rgba(231.0, 231.0, 231.0, 1)',
+  LIGHT_GRAY: 'rgba(225.0, 225.0, 225.0, 1)',
+  MID_GRAY: 'rgba(200.0, 200.0, 200.0, 1)',
+  DARK_GRAY: 'rgba(160.0, 160.0, 160.0, 1)',
+  DARKER_GRAY: 'rgba(100.0, 100.0, 100.0, 1)',
+
+  LIGHT_BLACK_TRANS: 'rgba(0.0, 0.0, 0.0, 0.1)',
+  SEMI_MID_BLACK_TRANS: 'rgba(0.0, 0.0, 0.0, 0.25)',
+  MID_BLACK_TRANS: 'rgba(0.0, 0.0, 0.0, 0.5)',
+  DARK_BLACK_TRANS: 'rgba(0.0, 0.0, 0.0, 0.75)',
+  BLACK: 'rgba(0.0, 0.0, 0.0, 1.0)',
+
+  CONFIRM_GREEN: 'rgba(50.0, 205.0, 50.0, 1.0)',
+
+  CONFIRM: 'rgba(34.0, 139.0, 34.0, 1.0)',
+  WARNING: 'rgba(255.0, 153.0, 0.0, 1.0)',
+
+  SUBLIME_RED: 'rgba(237.0, 59.0, 72.0, 1.0)',
+  BADGE_RED: 'rgba(208.0, 44.0, 30.0, 1.0)',
+  LIGHT_MAROON: 'rgba(159.0, 0.0, 0.0, 1.0)',
+  LIGHTER_MAROON: 'rgba(129.0, 0.0, 0.0, 1.0)',
+
+  ...brandColors,
+};
+
+const createBlocksColors = () => {
+  const globalColors: GlobalColors = blocksColorsLegacy;
+
+  const appColors = Object.keys(globalColors).reduce(
+    (acc: Partial<BlocksColorData>, key) => {
+      const newKey = key
+        .toLowerCase()
+        .replace(/_([a-z])/g, (_, letter) =>
+          letter.toUpperCase()
+        ) as BlocksColors;
+      acc[newKey as keyof BlocksColorData] =
+        globalColors[key as keyof GlobalColors];
+      return acc;
+    },
+    {}
+  );
+
+  return appColors as BlocksColorData;
+};
+
+export const blocksColors = createBlocksColors();
diff --git a/packages/shared-components/src/blocks/Blocks.constants.ts b/packages/shared-components/src/blocks/Blocks.constants.ts
@@ -0,0 +1,3 @@
+export const radiusRegex = /\bradius-[a-z]+\b/g;
+
+export const spacingRegex = /\bspacing-[a-z]+\b/g;
diff --git a/packages/shared-components/src/blocks/Blocks.hooks.ts b/packages/shared-components/src/blocks/Blocks.hooks.ts
@@ -0,0 +1,20 @@
+import { themeDark, themeLight } from '../config/Themization';
+import { useTheme } from 'styled-components';
+import { ThemeMode } from './Blocks.types';
+import { Theme } from './theme/Theme.types';
+
+// TODO: Remove this when we remove dependency from this hook
+
+type ThemeData = {
+  blocksTheme: {
+    light: Theme;
+    dark: Theme;
+  };
+  scheme: 'dark' | 'light';
+};
+
+export const useBlocksTheme = () => {
+  const { scheme } = useTheme() as ThemeData;
+
+  return { mode: scheme as ThemeMode };
+};
diff --git a/packages/shared-components/src/blocks/Blocks.types.ts b/packages/shared-components/src/blocks/Blocks.types.ts
@@ -0,0 +1,79 @@
+import { HTMLAttributes } from 'react';
+import { BoxResponsiveCSSProperties, BoxResponsiveCSSPropertiesData, BoxResponsivePropValues } from './box';
+import { blocksColorsLegacy } from './Blocks.colors';
+import { StrokeColors, ThemeBorderRadius, ThemeBorderSize, ThemeSpacing } from './theme/Theme.types';
+import {
+  SkeletonResponsiveCSSProperties,
+  SkeletonResponsiveCSSPropertiesData,
+  SkeletonResponsivePropValues,
+} from './skeleton';
+import {
+  SeparatorResponsiveCSSProperties,
+  SeparatorResponsiveCSSPropertiesData,
+  SeparatorResponsivePropValues,
+} from './separator';
+
+export type DeviceSize = '320px' | '375px' | '425px' | '768px' | '1024px' | '1440px' | '2560px' | '3440px';
+
+export type DeviceSizeName =
+  | 'mobileS'
+  | 'mobileM'
+  | 'mobileL'
+  | 'tablet'
+  | 'laptop'
+  | 'laptopL'
+  | 'desktop'
+  | 'ultrawide';
+
+export type Breakpoint = 'initial' | 'ms' | 'mm' | 'ml' | 'tb' | 'lp' | 'll' | 'dp' | 'uw';
+
+export type ResponsiveProp<T> = T | { [key in Breakpoint]?: T };
+
+export type BlocksRadiusType =
+  | ThemeBorderRadius
+  | `${ThemeBorderRadius} ${ThemeBorderRadius}`
+  | `${ThemeBorderRadius} ${ThemeBorderRadius} ${ThemeBorderRadius} ${ThemeBorderRadius}`;
+
+export type BlocksSpaceType =
+  | ThemeSpacing
+  | `${ThemeSpacing} ${ThemeSpacing}`
+  | `${ThemeSpacing} ${ThemeSpacing} ${ThemeSpacing} ${ThemeSpacing}`;
+
+export type BlocksGapType = ThemeSpacing | `${ThemeSpacing} ${ThemeSpacing}`;
+
+export type PixelValue = `${number}px`;
+
+export type ValueOf<T> = T[keyof T];
+
+export type CSSPropName =
+  | BoxResponsiveCSSProperties
+  | SeparatorResponsiveCSSProperties
+  | SkeletonResponsiveCSSProperties;
+
+export type CSSPropValueType = BoxResponsivePropValues | SeparatorResponsivePropValues | SkeletonResponsivePropValues;
+
+export type ResponsiveCSSPropertyData =
+  | BoxResponsiveCSSPropertiesData
+  | SeparatorResponsiveCSSPropertiesData
+  | SkeletonResponsiveCSSPropertiesData;
+
+export type TransformedHTMLAttributes<T> = Omit<HTMLAttributes<T>, 'style' | 'color'>;
+
+/* This needs to be removed when the color dependency from Globals.js is removed. */
+export type GlobalColors = Record<keyof typeof blocksColorsLegacy, string>;
+
+type CamelCase<S extends string> = S extends `${infer P1}_${infer P2}${infer P3}`
+  ? `${Lowercase<P1>}${Capitalize<Lowercase<P2>>}${CamelCase<P3>}`
+  : Lowercase<S>;
+
+export type BlocksColorData = {
+  [K in keyof typeof blocksColorsLegacy as CamelCase<K extends string ? K : never>]: (typeof blocksColorsLegacy)[K];
+};
+
+export type BlocksColors = keyof BlocksColorData;
+
+export type ThemeMode = 'light' | 'dark';
+
+export type BorderValue = `${ThemeBorderSize} ${string} ${StrokeColors}` | 'none';
+
+export type ModeProp = { mode: ThemeMode };
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		export const radiusRegex = /\bradius-[a-z]+\b/g;

		export const spacingRegex = /\bspacing-[a-z]+\b/g;