@campxdev/shared 0.6.13 → 0.6.15

package/.eslintrc.js

@@ -2,22 +2,22 @@ module.exports = {
   env: {
     browser: true,
     es2021: true,
-    jest: true,
+    jest: true
   },
   parser: '@typescript-eslint/parser',
-  extends: ['prettier'],
+  extends: ['prettier', 'plugin:storybook/recommended'],
   overrides: [],
   parserOptions: {
     ecmaVersion: 'latest',
     sourceType: 'module',
     ecmaFeatures: {
-      jsx: true,
-    },
+      jsx: true
+    }
   },
   settings: {
     'import/resolver': {
-      typescript: {},
-    },
+      typescript: {}
+    }
   },
   plugins: ['react', '@typescript-eslint', 'prettier'],
   rules: {
@@ -28,7 +28,7 @@ module.exports = {
     'react/prop-types': ['off'],
     'react/jsx-key': ['warn'],
     'react/no-unescaped-entities': 'off',
-    'spaced-comment': 'off',
+    'spaced-comment': 'off'
   },
-  ignorePatterns: ['**/*.html'],
-}
+  ignorePatterns: ['**/*.html']
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "0.6.13",
+  "version": "0.6.15",
   "main": "./exports.ts",
   "scripts": {
     "start": "react-scripts start",
@@ -9,7 +9,9 @@
     "eject": "react-scripts eject",
     "lint": "eslint ./src/**/*.{js,jsx,ts,tsx,json}",
     "lint:fix": "eslint --fix \"./src/**/*.{js,jsx,ts,tsx,json}\"",
-    "format": "prettier --write \"./src/**/*.{js,jsx,ts,tsx,css,md,json}\" --config ./.prettierrc"
+    "format": "prettier --write \"./src/**/*.{js,jsx,ts,tsx,css,md,json}\" --config ./.prettierrc",
+    "storybook": "start-storybook -p 6006 -s public",
+    "build-storybook": "build-storybook -s public"
   },
   "browserslist": {
     "production": [
@@ -48,6 +50,16 @@
     "yup": "^0.32.11"
   },
   "devDependencies": {
+    "@storybook/addon-actions": "^6.5.14",
+    "@storybook/addon-essentials": "^6.5.14",
+    "@storybook/addon-interactions": "^6.5.14",
+    "@storybook/addon-links": "^6.5.14",
+    "@storybook/builder-webpack5": "^6.5.14",
+    "@storybook/manager-webpack5": "^6.5.14",
+    "@storybook/node-logger": "^6.5.14",
+    "@storybook/preset-create-react-app": "^4.0.0",
+    "@storybook/react": "^6.5.14",
+    "@storybook/testing-library": "^0.0.13",
     "@types/js-cookie": "^3.0.2",
     "@types/node": "^18.11.8",
     "@types/react": "^18.0.25",
@@ -59,9 +71,23 @@
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.31.1",
+    "eslint-plugin-storybook": "^0.6.8",
     "lerna": "^5.5.1",
     "prettier": "^2.5.0",
     "react-scripts": "^5.0.1",
+    "storybook-addon-react-router-v6": "^0.2.1",
     "typescript": "^4.8.4"
+  },
+  "eslintConfig": {
+    "overrides": [
+      {
+        "files": [
+          "**/*.stories.*"
+        ],
+        "rules": {
+          "import/no-anonymous-default-export": "off"
+        }
+      }
+    ]
   }
 }

package/src/components/ActionButton.tsx

@@ -3,8 +3,9 @@ import React from 'react'
 
 interface ActionButtonProps extends ButtonProps {
   loading?: boolean
-  [key: string]: any
-  variant?: any
+  variant: ButtonProps['variant']
+  // [key: string]: any
+  // variant?: any
 }
 
 export default function ActionButton({

package/src/components/Breadcrumbs.tsx

@@ -7,10 +7,10 @@ import {
   Typography,
 } from '@mui/material'
 import { ReactNode } from 'react'
-import { Link, To, useNavigate } from 'react-router-dom'
+import { Link, useNavigate } from 'react-router-dom'
 
 interface BreadcrumbsProps {
-  links: { to: To | null; name: string | ReactNode }[]
+  links: { to: string; name: string | ReactNode }[]
   icon?: ReactNode
 }
 

package/src/components/Card.tsx

@@ -58,6 +58,7 @@ export default function Card({
             onClick={handleClick}
             endIcon={footer?.endIcon ?? <ChevronRight />}
             {...footer?.buttonProps}
+            sx={{ fontSize: '14px' }}
           >
             {footer?.buttonText ?? 'View'}
           </Button>

package/src/components/Chips.tsx

@@ -74,4 +74,8 @@ const StyledChip = styled(Chip)(({ theme }) => ({
     background: theme.palette.secondary.light,
     color: theme.palette.text.primary,
   },
+  height: '40px',
+  fontSize: '14px',
+  fontWeight: 700,
+  borderRadius: '20px',
 }))

package/src/components/DividerHeading.tsx

@@ -18,6 +18,7 @@ export default function DividerHeading({
 
 const StyledContainer = styled(Box)(({ theme }) => ({
   margin: '20px 0',
+  paddingBottom: '5px',
   borderBottom: theme.borders.grayLight,
   display: 'flex',
   justifyContent: 'space-between',

package/src/components/FloatingContainer.tsx

@@ -16,10 +16,17 @@ export const StyledFooter = styled(Box)<{
   transition: bottom 400ms ease-in-out;
   box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
 `
-function FloatingContainer({ children, show }) {
+
+function FloatingContainer({
+  children,
+  show,
+}: {
+  show?: boolean
+  children: React.ReactNode
+}) {
   return (
     <>
-      <StyledFooter show={show}>{children}</StyledFooter>
+      <StyledFooter show={show ? show : true}>{children}</StyledFooter>
     </>
   )
 }

package/src/components/Layout/Header/AppHeader.tsx

@@ -4,7 +4,15 @@ import { Link } from 'react-router-dom'
 import { isDevelopment } from '../../../constants/isDevelopment'
 import { applications } from './applications'
 import AppsMenu from './AppsMenu'
-import { collegex, commutex, enrollx, examx, hostelx, payx, peoplex,} from './assets'
+import {
+  collegex,
+  commutex,
+  enrollx,
+  examx,
+  hostelx,
+  payx,
+  peoplex,
+} from './assets'
 
 import CogWheelMenu from './CogWheelMenu'
 import FreshDeskHelpButton from './FreshDeskHelpButton'
@@ -35,8 +43,8 @@ const imageMap = {
   payments: payx,
   people: peoplex,
   campx: collegex,
-  commute:commutex,
-  hostel:hostelx
+  commute: commutex,
+  hostel: hostelx,
 }
 
 interface AppHeaderProps {

package/src/components/ModalButtons/DrawerButton.tsx

@@ -48,7 +48,7 @@ export default function DrawerButton({
   const [open, setOpen] = useState(false)
 
   const ButtonEl = (props) => (
-    <Button {...props} {...btnProps}>
+    <Button {...props} {...btnProps} sx={{ fontSize: '14px', fontWeight: 600 }}>
       {btnTxt}
     </Button>
   )

package/src/components/Router.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+function Router() {
+  return <div>Router</div>
+}
+
+export default Router

package/src/components/TableComponent/index.tsx

@@ -103,7 +103,10 @@ export default function Table({
                   }}
                 >
                   <>
-                    <Box>{col.title}</Box>
+                    <Box sx={{ fontWeight: 600, fontSize: '14px' }}>
+                      {' '}
+                      {col.title}
+                    </Box>
                   </>
                   {col.sort && (
                     <IconButton onClick={() => handleSortClick(col.dataIndex)}>
@@ -140,6 +143,8 @@ export default function Table({
                           sx={{
                             color: col.textColor,
                             padding: dense ? '10px' : '15px',
+                            font: 'avenir',
+                            fontSize: '14px',
                           }}
                           key={colIndex}
                         >

package/src/contexts/Providers.tsx

@@ -22,15 +22,15 @@ export default function Providers({ children }: { children: ReactNode }) {
     <BrowserRouter basename={isDevelopment ? 'campx_dev' : urlTenantKey}>
       <QueryClientProvider>
         <MuiThemeProvider>
-          <DialogProvider>
-            <LoginFormProvider>
-              <ConfirmContextProvider>
+          <ConfirmContextProvider>
+            <DialogProvider>
+              <LoginFormProvider>
                 {isInvalid ? <InvalidClientKey /> : children}
-              </ConfirmContextProvider>
-              <CssBaseline />
-            </LoginFormProvider>
-            <ToastContainer />
-          </DialogProvider>
+                <CssBaseline />
+              </LoginFormProvider>
+              <ToastContainer />
+            </DialogProvider>
+          </ConfirmContextProvider>
         </MuiThemeProvider>
       </QueryClientProvider>
     </BrowserRouter>