sevago-library 1.1.2 → 1.1.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # sevago-library
 
+## 1.1.4
+
+### Patch Changes
+
+- feat: add tablet media query constant and update components for improved responsiveness
+
+## 1.1.3
+
+### Patch Changes
+
+- feat: create how to use and change readme
+
 ## 1.1.2
 
 ### Patch Changes

package/README.md

@@ -27,94 +27,13 @@ Install required peer dependencies:
 npm install react react-dom @emotion/react @emotion/styled @mui/material @mui/system @reduxjs/toolkit react-redux react-router-dom redux-persist
 ```
 
----
-
-## Usage
-
-Import components, constants, utilities, and types directly from the package:
-
-```tsx
-import { AppGrid, MODE, timeUtils } from 'sevago-library';
-import type { AppInfo } from 'sevago-library';
-
-const theme = MODE.light;
-const dateText = timeUtils.getDateTime(new Date());
-
-function AppList({ apps }: { apps: AppInfo[] }) {
-  return (
-    <AppGrid
-      apps={apps}
-      columns={5}
-      rows={3}
-      onClickApp={(app) => window.open(app.path.production)}
-    />
-  );
-}
-```
-
-For applications that use the bundled provider/app shell:
-
-```tsx
-import React from 'react';
-import { Provider } from 'react-redux';
-import { PersistGate } from 'redux-persist/integration/react';
-import { BrowserRouter } from 'react-router-dom';
-import App from 'sevago-library';
-
-function RootApp() {
-  return (
-    <Provider store={store}>
-      <PersistGate loading={null} persistor={persistor}>
-        <BrowserRouter>
-          <App />
-        </BrowserRouter>
-      </PersistGate>
-    </Provider>
-  );
-}
-
-export default RootApp;
-```
-
----
-
 ## Documentation
 
 Useful project references:
 
 - [Repository](https://github.com/core-sevago/sevago-library)
 - [npm package](https://www.npmjs.com/package/sevago-library)
-- [Material Symbols](https://fonts.google.com/icons)
-
----
-
-## Components
-
-Common exports include:
-
-- `AppGrid`
-- `AppsSidebar`
-- `SystemMonitorScreen`
-- `SystemMonitorSidebarPart`
-- `DefaultLayout`
-- `LoadingComponent`
-- `LogoComponent`
-- `MotionBox`
-- `NoteComponent`
-- `PriceComponent`
-- `ReviewComponent`
-
-The library also exports shared elements, styles, constants, enums, interfaces, and utility functions.
-
----
-
-## TypeScript
-
-The package ships with generated TypeScript declarations from `dist`.
-
-```tsx
-import type { AppInfo, AppGridProps, Environment } from 'sevago-library';
-```
+- [Core-sevago/sevago-library](https://core-sevago.github.io/sevago-library)
 
 ---
 
@@ -126,26 +45,6 @@ For issues and usage questions, use the project repository:
 
 ---
 
-## Contributing
-
-Create a changeset for every public change:
-
-```bash
-npm run changeset
-```
-
-Choose `patch`, `minor`, or `major`, then commit the generated file in `.changeset/`.
-
-To publish a new version from a clean `master` branch:
-
-```bash
-bash deploy.sh
-```
-
-The deploy script applies Changesets, builds the library, commits release artifacts, publishes to npm, and pushes the release commit with tags.
-
----
-
 ## Changelog
 
 The [changelog](https://github.com/core-sevago/sevago-library/blob/master/CHANGELOG.md) is generated by Changesets and updated for every release.
@@ -158,18 +57,8 @@ Future changes should be tracked through GitHub issues and released with Changes
 
 ---
 
-## License
-
-This project is licensed under the [MIT license](https://opensource.org/licenses/MIT).
-
----
-
 ## Security
 
 Do not publish credentials, tokens, private URLs, or environment files. Report security issues through the project maintainers.
 
 ---
-
-## Keywords
-
-`sso` `authentication` `react` `typescript` `sevago`

package/dist/index.cjs.js

@@ -1393,10 +1393,12 @@ const OPACITY = {
   0: "00"
 };
 const PAGE_TAKE_DEFAULT = { page: 1, take: 10 };
+const TABLET_MEDIA = "@media (min-width: 768px) and (max-width: 1366px)";
 const other_const = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   OPACITY,
-  PAGE_TAKE_DEFAULT
+  PAGE_TAKE_DEFAULT,
+  TABLET_MEDIA
 }, Symbol.toStringTag, { value: "Module" }));
 const ANIMATION_TIME = 300;
 const SCALE_VALUE = "scale(1.05)";
@@ -39650,7 +39652,7 @@ const getFocusedListItemIndex = (listElement) => {
   return children.indexOf(getActiveElement(listElement));
 };
 const DEFAULT_DESKTOP_MODE_MEDIA_QUERY = "@media (pointer: fine)";
-function mergeSx(...sxProps) {
+function mergeSx$1(...sxProps) {
   return sxProps.reduce((acc, sxProp) => {
     if (Array.isArray(sxProp)) {
       acc.push(...sxProp);
@@ -67767,7 +67769,7 @@ const MobileDateTimePicker = /* @__PURE__ */ React__namespace.forwardRef(functio
         hidden: false
       }, (_c = defaultizedProps.slotProps) == null ? void 0 : _c.tabs),
       layout: _extends({}, (_d = defaultizedProps.slotProps) == null ? void 0 : _d.layout, {
-        sx: mergeSx([{
+        sx: mergeSx$1([{
           [`& .${multiSectionDigitalClockClasses.root}`]: {
             width: DIALOG_WIDTH
           },
@@ -74153,6 +74155,34 @@ const ButtonUploadFileElement = ({
     /* @__PURE__ */ jsxRuntime.jsx("input", { type: "file", accept, hidden: true, multiple, ref: fileInputRef, onChange: change })
   ] });
 };
+const mergeSx = (...items) => {
+  return items.flatMap((item) => {
+    if (!item) return [];
+    return Array.isArray(item) ? item : [item];
+  });
+};
+const buttonRootSx = {
+  minWidth: 100,
+  textTransform: "none",
+  borderRadius: BORDER_RADIUS_ELEMENT_SMALL,
+  width: "fit-content",
+  [TABLET_MEDIA]: {
+    minWidth: 120,
+    minHeight: 44,
+    px: 2.5,
+    py: 1,
+    "& .MuiButton-startIcon .material-symbols-rounded, & .MuiButton-endIcon .material-symbols-rounded": {
+      fontSize: 22
+    }
+  }
+};
+const buttonContentSx = {
+  ...TYPOGRAPHY.textSm.regular,
+  whiteSpace: "nowrap",
+  [TABLET_MEDIA]: {
+    ...TYPOGRAPHY.textMd.medium
+  }
+};
 const ButtonElement = ({
   content,
   loading = false,
@@ -74161,7 +74191,6 @@ const ButtonElement = ({
   variant = "contained",
   sx,
   disabled = false,
-  permission,
   ...rest
 }) => {
   const { palette } = material.useTheme();
@@ -74172,13 +74201,7 @@ const ButtonElement = ({
       variant,
       startIcon: !loading && startIcon ? typeof startIcon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(IconElement, { icon: startIcon, sx: { cursor: "pointer" } }) : startIcon : void 0,
       endIcon: !loading && endIcon ? typeof endIcon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(IconElement, { icon: endIcon, sx: { cursor: "pointer" } }) : endIcon : void 0,
-      sx: {
-        minWidth: 100,
-        textTransform: "none",
-        borderRadius: BORDER_RADIUS_ELEMENT_SMALL,
-        width: "fit-content",
-        ...sx
-      },
+      sx: mergeSx(buttonRootSx, sx),
       disabled,
       children: loading ? /* @__PURE__ */ jsxRuntime.jsx(
         LoadingComponent,
@@ -74187,7 +74210,7 @@ const ButtonElement = ({
           size: "small",
           sx: { minHeight: "24.5px" }
         }
-      ) : /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { ...TYPOGRAPHY.textSm.regular, whiteSpace: "nowrap" }, children: content })
+      ) : /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: buttonContentSx, children: content })
     }
   );
 };
@@ -74292,6 +74315,31 @@ const getButtonColor = (button, position) => {
     ...buttonProps
   };
 };
+const dialogTitleTextSx = {
+  fontSize: "16px",
+  [TABLET_MEDIA]: {
+    fontSize: "18px",
+    lineHeight: "26px"
+  }
+};
+const dialogTitleIconSx = {
+  [TABLET_MEDIA]: {
+    fontSize: 22
+  }
+};
+const dialogCloseButtonSx = {
+  [TABLET_MEDIA]: {
+    width: 44,
+    height: 44,
+    padding: 1.25
+  }
+};
+const dialogCloseIconSx = {
+  fontSize: 20,
+  [TABLET_MEDIA]: {
+    fontSize: 24
+  }
+};
 const DialogElement = ({
   iconLabel = "",
   label,
@@ -74361,10 +74409,11 @@ const DialogElement = ({
                     icon: iconLabel,
                     content: label.toLowerCase(),
                     size: "medium",
-                    sxText: { fontSize: "16px", ...sxTitle }
+                    sxIcon: dialogTitleIconSx,
+                    sxText: { ...dialogTitleTextSx, ...sxTitle }
                   }
                 ),
-                closeButton && /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { onClick: () => onClose == null ? void 0 : onClose({}, "escapeKeyDown"), children: /* @__PURE__ */ jsxRuntime.jsx(IconElement, { icon: "close", sx: { fontSize: 20 } }) })
+                closeButton && /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { onClick: () => onClose == null ? void 0 : onClose({}, "escapeKeyDown"), sx: dialogCloseButtonSx, children: /* @__PURE__ */ jsxRuntime.jsx(IconElement, { icon: "close", sx: dialogCloseIconSx }) })
               ] }),
               nodeLabel
             ]
@@ -74412,15 +74461,7 @@ const DialogElement = ({
                 /* @__PURE__ */ jsxRuntime.jsxs(StackRow, { sx: { flex: 1, justifyContent: "flex-end" }, children: [
                   styledButtonLeft && /* @__PURE__ */ jsxRuntime.jsx(ButtonElement, { ...styledButtonLeft, fullWidth }),
                   styledButtonCenter && /* @__PURE__ */ jsxRuntime.jsx(ButtonElement, { ...styledButtonCenter, fullWidth }),
-                  styledButtonRight && /* @__PURE__ */ jsxRuntime.jsx(
-                    ButtonElement,
-                    {
-                      ...styledButtonRight,
-                      fullWidth,
-                      loading: styledButtonRight.loading,
-                      sx: { bgcolor: styledButtonRight.color }
-                    }
-                  )
+                  styledButtonRight && /* @__PURE__ */ jsxRuntime.jsx(ButtonElement, { ...styledButtonRight, fullWidth, loading: styledButtonRight.loading })
                 ] })
               ] }) })
             }
@@ -77496,7 +77537,6 @@ const AppsSidebar = ({
   onClickApp
 }) => {
   if (!isOpen) return null;
-  const theme = useTheme();
   const appsGroupObj = Object.keys(APP_OBJ).reduce(
     (r2, key) => {
       if (blacklist.includes(key)) return r2;
@@ -77534,7 +77574,7 @@ const AppsSidebar = ({
           left: position === "left" ? 0 : "auto",
           right: position === "right" ? 0 : "auto",
           height: "100%",
-          backgroundColor: theme.palette.common.white,
+          backgroundColor: BACKGROUND[50],
           zIndex: 100,
           padding: PADDING_GAP_LAYOUT,
           overflowY: "auto"
@@ -77554,8 +77594,8 @@ const AppsSidebar = ({
                 iconRadius: 5.5,
                 titleVariant: "body1",
                 captionVariant: "caption",
-                titleColor: theme.palette.grey[800],
-                captionColor: theme.palette.grey[600],
+                titleColor: GRAY[500],
+                captionColor: GRAY[500],
                 onClickApp,
                 showPagination: false
               }