🐛 fix(container): use container queries for grids

dashpresshq · Feb 24, 2024 · 64b3ec1 · 64b3ec1
1 parent 82c9929
commit 64b3ec1
Show file tree

Hide file tree

Showing 19 changed files with 357 additions and 381 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -32,20 +32,8 @@
   ],
   "bin": "./bin/dashpress",
   "dependencies": {
-    "@dashpress/bacteria": "^0.0.11",
+    "@dashpress/bacteria": "^0.0.12",
     "@tanstack/react-table": "^8.7.9",
-    "@types/cryptr": "^4.0.1",
-    "@types/formidable": "^3.4.5",
-    "@types/jsonwebtoken": "^8.5.8",
-    "@types/lodash": "^4.14.182",
-    "@types/microseconds": "^0.2.0",
-    "@types/nodemailer": "^6.4.6",
-    "@types/prismjs": "^1.26.0",
-    "@types/qs": "^6.9.7",
-    "@types/ramda": "0.27.40",
-    "@types/react": "^18.0.11",
-    "@types/react-datepicker": "^4.4.1",
-    "@types/styled-components": "^5.1.25",
     "axios": "^1.2.1",
     "bcrypt": "^5.0.1",
     "change-case": "^4.1.2",
@@ -68,7 +56,6 @@
     "next": "12.3.1",
     "nodemailer": "^6.8.0",
     "path": "^0.12.7",
-    "polished": "^4.2.2",
     "prismjs": "^1.28.0",
     "qs": "^6.11.0",
     "ramda": "0.27.1",
@@ -92,7 +79,7 @@
     "react-tooltip": "^5.7.4",
     "react-use": "^17.4.0",
     "redis": "^4.4.0",
-    "styled-components": "^5.3.6",
+    "styled-components": "^6.1.8",
     "terminal-link": "^3.0.0",
     "tiny-skeleton-loader-react": "^1.2.1",
     "winston": "^3.8.2",
@@ -117,8 +104,18 @@
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^14.2.1",
     "@types/node": "^18.0.0",
-    "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.4",
+    "@types/cryptr": "^4.0.1",
+    "@types/formidable": "^3.4.5",
+    "@types/jsonwebtoken": "^8.5.8",
+    "@types/lodash": "^4.14.182",
+    "@types/microseconds": "^0.2.0",
+    "@types/nodemailer": "^6.4.6",
+    "@types/prismjs": "^1.26.0",
+    "@types/qs": "^6.9.7",
+    "@types/ramda": "0.27.40",
+    "@types/react": "^18.0.11",
+    "@types/react-datepicker": "^4.4.1",
     "@typescript-eslint/eslint-plugin": "^5.31.0",
     "@typescript-eslint/parser": "^5.31.0",
     "babel-loader": "^8.2.5",

diff --git a/src/backend/lib/config-persistence/DatabaseConfigDataPersistenceAdaptor.ts b/src/backend/lib/config-persistence/DatabaseConfigDataPersistenceAdaptor.ts
@@ -71,6 +71,7 @@ export class DatabaseConfigDataPersistenceAdaptor<
     const query = (await this.getDbInstance())
       .select(["value", "key"])
       .where("domain", "=", this._configDomain)
+      .orderBy("created_at", "desc")
       .from(CONFIG_TABLE_NAME);
 
     const items = await query;
@@ -157,11 +158,8 @@ export class DatabaseConfigDataPersistenceAdaptor<
   }
 
   async _removeItem(key: string): Promise<void> {
-    await (
-      await this.getDbInstance()
-    )(CONFIG_TABLE_NAME)
+    await (await this.getDbInstance())(CONFIG_TABLE_NAME)
       .where("domain", "=", this._configDomain)
-
       .where({ key })
       .del();
   }
@@ -174,6 +172,8 @@ export class DatabaseConfigDataPersistenceAdaptor<
         key: value[keyField],
         domain: this._configDomain,
         value: JSON.stringify(value),
+        created_at: new Date(),
+        updated_at: new Date(),
       }))
     );
   }

diff --git a/src/frontend/_layouts/app/LayoutImpl/RenderNavigation.tsx b/src/frontend/_layouts/app/LayoutImpl/RenderNavigation.tsx
@@ -48,7 +48,7 @@ const LeftSideNavMenuList = styled.li<{}>`
 `;
 
 const LeftSideNavMenuListAnchor = styled.a<{
-  hoverColor: string;
+  $hoverColor: string;
   $isActive: boolean;
   $depth: number;
 }>`
@@ -67,7 +67,7 @@ const LeftSideNavMenuListAnchor = styled.a<{
   padding-left: ${(props) => props.$depth * 16}px;
   &:hover {
     color: ${SYSTEM_COLORS.white};
-    background: ${(props) => props.hoverColor};
+    background: ${(props) => props.$hoverColor};
   }
 `;
 
@@ -178,7 +178,7 @@ export function RenderNavigation({
                   as={PlainButton}
                   $isActive={false}
                   $depth={depth}
-                  hoverColor={getBackgroundColor("primary-color", 45)}
+                  $hoverColor={getBackgroundColor("primary-color", 45)}
                   onClick={() => {
                     clearBreadCrumbStack();
                     setIsFullWidth(true);
@@ -188,9 +188,7 @@ export function RenderNavigation({
                   {menuIcon}
                   {isFullWidth && (
                     <Stack justify="space-between" spacing={0} align="center">
-                      <NavLabel ellipsis $isFullWidth={isFullWidth}>
-                        {title}
-                      </NavLabel>
+                      <NavLabel $isFullWidth={isFullWidth}>{title}</NavLabel>
                       <SubMenuArrow
                         $isFullWidth={isFullWidth}
                         size={16}
@@ -224,12 +222,10 @@ export function RenderNavigation({
                       ? "_blank"
                       : undefined
                   }
-                  hoverColor={getBackgroundColor("primary-color", 45)}
+                  $hoverColor={getBackgroundColor("primary-color", 45)}
                 >
                   {icon && menuIcon}
-                  <NavLabel ellipsis $isFullWidth={isFullWidth}>
-                    {title}
-                  </NavLabel>
+                  <NavLabel $isFullWidth={isFullWidth}>{title}</NavLabel>
                 </LeftSideNavMenuListAnchor>
               </Link>
             )}

diff --git a/src/frontend/components/SchemaForm/form-grid.ts b/src/frontend/components/SchemaForm/form-grid.ts
diff --git a/src/frontend/components/SchemaForm/form-grid.tsx b/src/frontend/components/SchemaForm/form-grid.tsx
@@ -0,0 +1,26 @@
+import { gridItem, gridRoot } from "frontend/design-system/constants/grid";
+import { ReactNode } from "react";
+import { GridSpanSizes } from "shared/types/ui";
+import styled from "styled-components";
+
+const Root = styled.div`
+  ${gridRoot}
+  grid-auto-rows: auto;
+`;
+
+const Container = styled.div`
+  container-type: inline-size;
+`;
+
+export const FormGrid = {
+  Root: ({ children }: { children: ReactNode }) => (
+    <Container>
+      <Root>{children}</Root>
+    </Container>
+  ),
+  Item: styled.div<{
+    $span?: GridSpanSizes;
+  }>`
+    ${gridItem}
+  `,
+};
diff --git a/src/frontend/components/SchemaForm/index.tsx b/src/frontend/components/SchemaForm/index.tsx
@@ -15,6 +15,8 @@ import { IFormExtension } from "./types";
 import { runFormBeforeSubmit, runFormFieldState } from "./form-run";
 import { FormGrid } from "./form-grid";
 
+const identity = (value: unknown) => value;
+
 interface IProps<T> {
   fields: IAppliedSchemaFormConfig<T>;
   onSubmit: (data: T) => Promise<void | T>;
@@ -98,7 +100,12 @@ export function SchemaForm<T extends Record<string, unknown>>({
                   return !bag?.formState?.(scriptProps).hidden;
                 })
                 .map(([field, bag]: [string, ISchemaFormConfig<T>]) => (
-                  <Field key={field} name={field} validateFields={[]}>
+                  <Field
+                    key={field}
+                    name={field}
+                    validateFields={[]}
+                    parse={identity}
+                  >
                     {(formProps) => (
                       <FormGrid.Item $span={bag.span}>
                         <RenderFormInput

diff --git a/src/frontend/design-system/components/Dropdown/index.tsx b/src/frontend/design-system/components/Dropdown/index.tsx
@@ -15,7 +15,7 @@ const Root = styled.div`
 type Align = "right" | "left";
 
 const DropdownRoot = styled.div<{
-  zIndex: number;
+  $zIndex: number;
   align: Align;
   offset: number;
   $width: number;
@@ -27,7 +27,7 @@ const DropdownRoot = styled.div<{
       : "auto"};
   left: ${(props) => (props.align === "left" ? "0" : "auto")};
   top: calc(100% + 8px);
-  z-index: ${(props) => props.zIndex};
+  z-index: ${(props) => props.$zIndex};
   background: ${USE_ROOT_COLOR("base-color")};
   border-radius: 2px;
   border: 1px solid ${USE_ROOT_COLOR("border-color")};
@@ -87,7 +87,7 @@ export function Dropdown({
           offset={rootRef.current?.offsetLeft || 0}
           align={align}
           $width={width}
-          zIndex={rootZIndex}
+          $zIndex={rootZIndex}
           onClick={(e) => {
             if (!preserveVisibiltyOnClick) {
               close();

diff --git a/src/frontend/design-system/components/Table/Body.tsx b/src/frontend/design-system/components/Table/Body.tsx
@@ -3,7 +3,6 @@ import { flexRender, Table } from "@tanstack/react-table";
 import styled from "styled-components";
 import { USE_ROOT_COLOR } from "frontend/design-system/theme/root";
 import { useThemeColorShade } from "frontend/design-system/theme/useTheme";
-import { Typo } from "frontend/design-system/primitives/Typo";
 import { EmptyWrapper } from "../EmptyWrapper";
 import { IEmptyWrapperProps } from "../EmptyWrapper/types";
 
@@ -41,9 +40,7 @@ export function TableBody({ table, dataLength, empty, isLoading }: IProps) {
         <BodyTR key={row.id} $hoverColor={colorShade("base-color", 2)}>
           {row.getVisibleCells().map((cell) => (
             <Td key={cell.id}>
-              <Typo.SM as="span">
-                {flexRender(cell.column.columnDef.cell, cell.getContext())}
-              </Typo.SM>
+              {flexRender(cell.column.columnDef.cell, cell.getContext())}
             </Td>
           ))}
         </BodyTR>

diff --git a/src/frontend/design-system/constants/grid.ts b/src/frontend/design-system/constants/grid.ts
@@ -14,7 +14,7 @@ export const gridRoot = css`
   display: grid;
   column-gap: 16px;
   grid-template-columns: repeat(12, 1fr);
-  @media (max-width: ${BREAKPOINTS.lg}) {
+  @container (width < ${BREAKPOINTS.md}) {
     grid-template-columns: 1fr;
   }
 `;
@@ -24,7 +24,7 @@ export const gridItem = css<{
 }>`
   grid-column-start: span ${(props) => props.$span || "12"};
 
-  @media (max-width: ${BREAKPOINTS.lg}) {
+  @container (width < ${BREAKPOINTS.md}) {
     grid-column-start: span 1;
   }
 `;

diff --git a/src/frontend/design-system/theme/useTheme.ts b/src/frontend/design-system/theme/useTheme.ts
@@ -1,5 +1,4 @@
 import { useCallback, useContext, useEffect } from "react";
-import { darken } from "polished";
 import { ColorSchemes } from "shared/types/ui";
 import { DEFAULT_PRIMARY_COLOR } from "./constants";
 import { ThemeContext } from "./Context";
@@ -22,6 +21,30 @@ const getColorModeImplementation = (
   return colorMode;
 };
 
+function darkenHexColor(hexColor$1: string, percentage: number) {
+  const hexColor = hexColor$1.replace(/^#/, "");
+
+  // Convert hexadecimal to RGB
+  let red = parseInt(hexColor.substring(0, 2), 16);
+  let green = parseInt(hexColor.substring(2, 4), 16);
+  let blue = parseInt(hexColor.substring(4, 6), 16);
+
+  // Calculate darken percentage
+  const darkenFactor = 1 - percentage / 100;
+
+  // Darken RGB components
+  red = Math.max(0, Math.floor(red * darkenFactor));
+  green = Math.max(0, Math.floor(green * darkenFactor));
+  blue = Math.max(0, Math.floor(blue * darkenFactor));
+
+  // Convert back to hexadecimal
+  const darkenedHexColor = `#${red.toString(16).padStart(2, "0")}${green
+    .toString(16)
+    .padStart(2, "0")}${blue.toString(16).padStart(2, "0")}`;
+
+  return darkenedHexColor;
+}
+
 export const useTheme = (
   themeColor?: string,
   colorMode?: ColorSchemes | IColorMode
@@ -53,8 +76,7 @@ export const useThemeColorShade = () => {
 
   return useCallback(
     (colorKey: IRootColors, percent: number) => {
-      const color$1 = themeContext.value[colorKey];
-      return darken(`${percent / 100}`, color$1);
+      return darkenHexColor(themeContext.value[colorKey], percent);
     },
     [themeContext.value]
   );

diff --git a/src/frontend/views/Dashboard/List/_BaseDashboard.tsx b/src/frontend/views/Dashboard/List/_BaseDashboard.tsx
@@ -14,6 +14,10 @@ const Root = styled.div`
   ${dashboardGridRoot};
 `;
 
+const Container = styled.div`
+  container-type: inline-size;
+`;
+
 interface IProps {
   dashboardId: string;
   manageLink: string;
@@ -45,11 +49,13 @@ export function BaseDashboard({ dashboardId, manageLink }: IProps) {
         error={widgets.error}
         loader={<DashboardSkeleton />}
       >
-        <Root>
-          {widgets.data.map((config) => (
-            <DashboardWidget config={config} key={config.id} />
-          ))}
-        </Root>
+        <Container>
+          <Root>
+            {widgets.data.map((config) => (
+              <DashboardWidget config={config} key={config.id} />
+            ))}
+          </Root>
+        </Container>
       </ViewStateMachine>
     </AppLayout>
   );

diff --git a/src/frontend/views/Dashboard/Manage/_BaseManageDashboard.tsx b/src/frontend/views/Dashboard/Manage/_BaseManageDashboard.tsx
@@ -18,6 +18,7 @@ import { DashboardWidget } from "../Widget";
 import { DASHBOARD_WIDGETS_CRUD_CONFIG } from "../constants";
 
 const Root = styled.div`
+  container-type: inline-size;
   .list {
     ${dashboardGridRoot};
   }

diff --git a/src/frontend/views/data/Table/portal/index.ts b/src/frontend/views/data/Table/portal/index.ts
@@ -5,4 +5,5 @@ export {
   usePortalTableColumns,
   TableTopComponent,
   usePortalTableTabs,
+  PortalColumnRender,
 } from "./main";
diff --git a/src/frontend/views/data/Table/portal/main.tsx b/src/frontend/views/data/Table/portal/main.tsx
@@ -2,6 +2,7 @@ import { IDropDownMenuItem } from "frontend/design-system/components/DropdownMen
 import { ITableColumn } from "frontend/design-system/components/Table/types";
 import { loadedDataState } from "frontend/lib/data/constants/loadedDataState";
 import { DataStateKeys } from "frontend/lib/data/types";
+import { ReactNode } from "react";
 import { noop } from "shared/lib/noop";
 import { ITableView } from "shared/types/data";
 
@@ -40,3 +41,21 @@ export const usePortalTableTabs = (
   noop(entity);
   return loadedDataState<ITableView[]>([]);
 };
+
+export function PortalColumnRender({
+  children,
+  column,
+  value,
+  entity,
+  entityId,
+}: {
+  children: ReactNode;
+  column: string;
+  value: unknown;
+  entity: string;
+  entityId: string;
+}) {
+  noop(column, value, entity, entityId);
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  return <>{children}</>;
+}