@campxdev/shared 0.1.0

package/src/theme/theme.d.ts

@@ -0,0 +1,75 @@
+import { ThemeOptions as MuiThemeOptions } from '@mui/material/styles'
+
+declare module '@mui/material/styles' {
+  interface Theme {
+    borders: {
+      grayLight: string
+      primary: string
+    }
+    palette: {
+      primary: {
+        dark: string
+        main: string
+        light: string
+        lighter: string
+      }
+      secondary: {
+        main: string
+        light: string
+        dark: string
+        lighter: string
+      }
+      common: {
+        black: string
+        white: string
+        green: string
+        yellow: string
+        blue: string
+      }
+      error: {
+        main: string
+      }
+      text: {
+        primary: string
+        secondary: string
+        disabled: string
+      }
+    }
+  }
+  // allow configuration using `createTheme`
+  interface CustomThemeOptions extends MuiThemeOptions {
+    borders?: {
+      grayLight?: string
+    }
+    palette: {
+      secondary?: {
+        main?: string
+        light?: string
+        dark?: string
+        lighter?: string
+      }
+      primary?: {
+        dark?: string
+        main?: string
+        light?: string
+        lighter?: string
+      }
+      common?: {
+        black?: string
+        white?: string
+        green?: string
+        yellow?: string
+        blue?: string
+      }
+      error?: {
+        main?: string
+      }
+      text?: {
+        primary?: string
+        secondary?: string
+        disabled?: string
+      }
+    }
+  }
+  export function createTheme(options?: CustomThemeOptions): CustomTheme
+}

package/src/utils/alphabet.ts

@@ -0,0 +1,23 @@
+export function alphabet(option) {
+  let letters: any = []
+
+  //set the default value of i & j to print A to Z
+  var i = 65
+  var j = 91
+
+  //if the option is small set the value of i,j to print a to z
+  if (option == 'small') {
+    i = 97
+    j = 123
+  }
+
+  //loop through the values from i to j
+  for (let k = i; k < j; k++) {
+    //convert the char code to string (Alphabets)
+    var str = String.fromCharCode(k)
+    //print the result in console
+    letters.push(str)
+  }
+
+  return letters
+}

package/src/utils/arrayPadEnd.ts

@@ -0,0 +1,3 @@
+export default function arrayPadEnd(array, minLength, fillValue = undefined) {
+  return Object.assign(new Array(minLength).fill(fillValue), array)
+}

package/src/utils/formatCurrency.ts

@@ -0,0 +1,9 @@
+var formatter = new Intl.NumberFormat('en-IN', {
+  style: 'currency',
+  currency: 'INR',
+  currencyDisplay: 'code',
+})
+
+export default function inr(amount: number) {
+  return formatter.format(amount).replace('INR', '').trim()
+}

package/src/utils/getUrlParams.ts

@@ -0,0 +1,5 @@
+export default function getUrlParams() {
+  const urlSearchParams = new URLSearchParams(window.location.search)
+  const params = Object.fromEntries(urlSearchParams.entries())
+  return params
+}

package/src/utils/index.ts

@@ -0,0 +1,6 @@
+export { default as getUrlParams } from './getUrlParams'
+export { default as arrayPadEnd } from './arrayPadEnd'
+export { default as romanize } from './romanize'
+
+export { default as withRouteWrapper } from './withRouteWrapper'
+export { default as withSuspense } from './withSuspense'

package/src/utils/ordinalSuffixOf.ts

@@ -0,0 +1,14 @@
+export default function ordinalSuffixOf(i: number) {
+  var j = i % 10,
+    k = i % 100
+  if (j == 1 && k != 11) {
+    return i + 'st'
+  }
+  if (j == 2 && k != 12) {
+    return i + 'nd'
+  }
+  if (j == 3 && k != 13) {
+    return i + 'rd'
+  }
+  return i + 'th'
+}

package/src/utils/romanize.ts

@@ -0,0 +1,40 @@
+export default function romanize(num) {
+  if (!+num) return false
+  var digits = String(+num).split(''),
+    key = [
+      '',
+      'C',
+      'CC',
+      'CCC',
+      'CD',
+      'D',
+      'DC',
+      'DCC',
+      'DCCC',
+      'CM',
+      '',
+      'X',
+      'XX',
+      'XXX',
+      'XL',
+      'L',
+      'LX',
+      'LXX',
+      'LXXX',
+      'XC',
+      '',
+      'I',
+      'II',
+      'III',
+      'IV',
+      'V',
+      'VI',
+      'VII',
+      'VIII',
+      'IX',
+    ],
+    roman = '',
+    i = 3
+  while (i--) roman = (key[+digits.pop() + i * 10] || '') + roman
+  return Array(+digits.join('') + 1).join('M') + roman
+}

package/src/utils/withRouteWrapper.tsx

@@ -0,0 +1,25 @@
+import { Spinner } from '../components'
+import { Suspense } from 'react'
+import PageWithPermission from '../permissions/PageWithPermission'
+
+const withRouteWrapper = (routes) => {
+  return routes?.map((item, index) => {
+    if (item?.children) {
+      return {
+        ...item,
+        children: withRouteWrapper(item.children),
+      }
+    }
+    return {
+      ...item,
+      element: item?.element ? (
+        <Suspense fallback={<Spinner />} key={index}>
+          <PageWithPermission permissionKey={item?.permissionKey}>
+            {item.element}
+          </PageWithPermission>
+        </Suspense>
+      ) : undefined,
+    }
+  })
+}
+export default withRouteWrapper

package/src/utils/withSuspense.tsx

@@ -0,0 +1,6 @@
+import { Spinner } from '../components'
+import { ReactNode, Suspense } from 'react'
+
+export default function withSuspense(component: ReactNode) {
+  return <Suspense fallback={<Spinner />}>{component}</Suspense>
+}

package/styled-components.tsx

@@ -0,0 +1,60 @@
+import styled from 'styled-components'
+import { styled as muiStyled } from '@mui/material'
+
+export const headerHeight = '64px'
+export const sideNavWidth = '220px'
+
+export const StyledLayoutContainer = styled.div`
+  & > div {
+  }
+`
+
+export const StyledHeaderContainer = styled.header`
+  z-index: 300;
+  width: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  min-height: ${headerHeight};
+  background: #fff;
+  & > div {
+    height: ${headerHeight};
+  }
+`
+
+export const StyledLeftNavContainer = muiStyled('aside')(({ theme }) => ({
+  width: sideNavWidth,
+  background: theme.palette.secondary.main,
+  color: 'white',
+  position: 'fixed',
+  top: headerHeight,
+  left: 0,
+  height: `calc(100vh - ${headerHeight})`,
+  overflowY: 'auto',
+
+  '&::-webkit-scrollbar': {
+    width: '0.5em',
+    height: '0.5em',
+  },
+
+  '&::-webkit-scrollbar-thumb': {
+    backgroundColor: 'rgba(255, 255, 255, 0.3)',
+    borderRadius: '3px',
+
+    '&:hover': {
+      background: 'rgba(255, 255, 255, 0.4)',
+    },
+  },
+
+  zIndex: 100,
+}))
+
+export const StyledMainContentContainer = muiStyled('main')(() => ({
+  width: `calc(100% - ${sideNavWidth})`,
+  // width: '100%',
+  height: `calc(100vh - ${headerHeight})`,
+  position: 'fixed',
+  top: headerHeight,
+  left: sideNavWidth,
+  overflowY: 'auto',
+}))

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "types": ["node"]
+  },
+  "include": ["src"]
+}