@campxdev/react-blueprint 1.5.7 → 1.5.9

package/export.ts

@@ -2,3 +2,4 @@ export * from './src/components/export';
 export * from './src/hooks/export';
 export * from './src/redux/export';
 export * from './src/themes/export';
+export * from './src/utils/export';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "1.5.7",
+  "version": "1.5.9",
   "main": "./export.ts",
   "private": false,
   "dependencies": {

package/src/components/Layout/PageHeader/PageHeader.tsx

@@ -1,4 +1,4 @@
-import { Box, Divider, InputAdornment, Stack, useTheme } from '@mui/material';
+import { Box, Divider, Stack, useTheme } from '@mui/material';
 import { GridColDef } from '@mui/x-data-grid';
 import { motion } from 'framer-motion';
 import { ReactNode, useState } from 'react';
@@ -6,14 +6,9 @@ import {
   DensitySelector,
   Icons,
   TableColumnsSelector,
-  TextField,
   Typography,
 } from '../../export';
-import {
-  ColumnsAnchor,
-  FiltersAnchor,
-  SearchAnchor,
-} from './components/Anchors';
+import { ColumnsAnchor } from './components/Anchors';
 
 interface PageHeaderProps {
   uniqueId: string;
@@ -91,15 +86,15 @@ export const PageHeader = ({
         justifyContent="space-between"
       >
         {columns ? <ViewTab title="Default View" /> : viewsSlot}
-        <Stack direction="row" alignItems="center" gap={1}>
-          {columns && (
+        <Stack direction="row" alignItems="center">
+          {/* {columns && (
             <FiltersAnchor
               handleClick={() => {
                 setExpanded(!expanded);
               }}
               showDot={false}
             />
-          )}
+          )} */}
           {columns && (
             <ColumnsAnchor
               handleClick={() => {
@@ -108,7 +103,7 @@ export const PageHeader = ({
               showDot={false}
             />
           )}
-          <motion.div
+          {/* <motion.div
             variants={motionTextFieldVariants}
             animate={expandedSearch ? 'expanded' : 'collapsed'}
             transition={{ duration: 0.3 }}
@@ -135,7 +130,7 @@ export const PageHeader = ({
                 autoFocus
               />
             )}
-          </motion.div>
+          </motion.div> */}
           {columns && <DensitySelector uniqueId={uniqueId} />}
           {actions?.map((action, index) => action)}
         </Stack>

package/src/components/Layout/export.ts

@@ -1,4 +1,5 @@
 export * from './AppHeader/AppHeader';
 export * from './PageContent/PageContent';
 export * from './PageHeader/components/DensitySelector/DensitySelector';
+export * from './PageHeader/PageHeader';
 export * from './TabsLayout/TabsLayout';

package/src/components/Navigation/Breadcrumbs/Breadcrumbs.tsx

@@ -6,26 +6,14 @@ import {
 } from '@mui/material';
 import _ from 'lodash';
 import { Link } from 'react-router-dom';
+
+import { getBreadcrumbsCharacter } from '../../../utils/export';
 import { Typography } from '../../export';
 
 export type BreadcrumbsProps = {
   pathTrimCount: number;
 } & MuiBreadcrumbsProps;
 
-const getBreadcrumbsCharacter = () => {
-  const unicodeChar = String.fromCharCode(0x21e5);
-  const testElement = document.createElement('span');
-  testElement.innerHTML = unicodeChar;
-  document.body.appendChild(testElement);
-  const isRendered = testElement.offsetWidth > 0;
-  document.body.removeChild(testElement);
-
-  const fallbackChar = '~~';
-  const s = isRendered ? unicodeChar : fallbackChar;
-
-  return s;
-};
-
 export const Breadcrumbs = ({ pathTrimCount, ...rest }: BreadcrumbsProps) => {
   const specialCharacter = getBreadcrumbsCharacter();
   const currentPathArray = window.location.pathname.split('/');

package/src/hooks/export.ts

@@ -1 +1,3 @@
 export * from './usePageHeader';
+export * from './useParams';
+export * from './useUrlParams';

package/src/hooks/usePageHeader.ts

@@ -1,10 +1,8 @@
+import { GridColumnVisibilityModel, GridDensity } from '@mui/x-data-grid';
 import { useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { v4 } from 'uuid';
-import {
-  PageHeaderState,
-  resetStateForUniqueId,
-} from '../redux/slices/pageHeaderSlice';
+import { resetStateForUniqueId } from '../redux/slices/pageHeaderSlice';
 import { RootState } from '../redux/store';
 
 export const usePageHeader = () => {
@@ -12,7 +10,11 @@ export const usePageHeader = () => {
   const dispatch = useDispatch();
   const filterState = useSelector(
     (state: RootState) =>
-      state.pageHeaderSlice[uuidRef.current] || ({} as PageHeaderState),
+      state.pageHeaderSlice[uuidRef.current] ||
+      ({} as {
+        density: GridDensity;
+        columnVisibilityModel: GridColumnVisibilityModel;
+      }),
   );
 
   const resetState = () => {

package/src/hooks/useParams.ts

@@ -0,0 +1,20 @@
+import { useParams as useReactRouterParams } from 'react-router-dom';
+import { getBreadcrumbsCharacter } from '../utils/breadcrumbs';
+
+export const useParams = (): {
+  [x: string]: { id: string | number; slug: string };
+} => {
+  const params = useReactRouterParams();
+
+  const processedParams = Object.fromEntries(
+    Object.entries(params).map(([key, value]) => {
+      if (value) {
+        const [slug, id] = value.split(getBreadcrumbsCharacter());
+        return [key, { slug, id }];
+      }
+      return [];
+    }),
+  );
+
+  return processedParams;
+};

package/src/hooks/useUrlParams.ts

@@ -0,0 +1,3 @@
+export const useUrlParams = (): { [x: string]: string } => {
+  return Object.fromEntries(new URLSearchParams(window.location.search));
+};

package/src/utils/breadcrumbs.ts

@@ -0,0 +1,23 @@
+import _ from 'lodash';
+
+export const getBreadcrumbsCharacter = () => {
+  const unicodeChar = String.fromCharCode(0x21e5);
+  const testElement = document.createElement('span');
+  testElement.innerHTML = unicodeChar;
+  document.body.appendChild(testElement);
+  const isRendered = testElement.offsetWidth > 0;
+  document.body.removeChild(testElement);
+
+  const fallbackChar = '~~';
+  const s = isRendered ? unicodeChar : fallbackChar;
+
+  return s;
+};
+
+type CreateUrlSlug = {
+  name: string;
+  id: string | number;
+};
+export const createBreadcrumbIdSlug = ({ name, id }: CreateUrlSlug): string => {
+  return `${_.kebabCase(name)}${getBreadcrumbsCharacter()}${id}`;
+};

package/src/utils/constants.ts

@@ -1,6 +1,2 @@
-import Cookies from 'js-cookie';
-
 export const isDevelopment: boolean = process.env.NODE_ENV === 'development';
-export const urlTenantKey = window.location.pathname.split('/')[1];
-export const institutionKey = window.location.pathname.split('/')[2];
-export const sessionKey = Cookies.get('campx_session_key');
+export const isLocal = window.location.hostname === 'localhost';

package/src/utils/export.ts

@@ -0,0 +1,2 @@
+export * from './breadcrumbs';
+export * from './constants';

package/src/utils/logout.ts

@@ -1,19 +0,0 @@
-import axios from 'axios';
-import Cookies from 'js-cookie';
-
-export default function logout() {
-  axios({
-    method: 'POST',
-    baseURL: process.env.REACT_APP_API_HOST,
-    url: '/auth-server/auth/logout',
-  })
-    .then((res) => {
-      Cookies.remove('campx_tenant');
-      Cookies.remove('campx_session_key');
-      Cookies.remove('campx_institution');
-      window.location.href = '/';
-    })
-    .catch((err) => {
-      // toast("Unable To Logout.");
-    });
-}