♻️ refactor(css-grid): cenralize grid styles

dashpresshq · Dec 7, 2023 · 0eecd44 · 0eecd44
1 parent 688c095
commit 0eecd44
Show file tree

Hide file tree

Showing 20 changed files with 159 additions and 108 deletions.
diff --git a/src/__tests__/_/api-handlers/dashboard.ts b/src/__tests__/_/api-handlers/dashboard.ts
@@ -14,7 +14,7 @@ let DASHBOARD_WIDGETS: IWidgetConfig[] = [
       { name: "Jane", age: 5 },
     ]),
     title: "Foo Table",
-    size: "2",
+    span: "2",
     height: "2",
   },
   {
@@ -51,8 +51,8 @@ export const dashboardApiHandlers = [
       if (
         req.params.dashboardId === "test-dashboard-id" &&
         [
-          `{"icon":"Download","title":"New Summary Card","_type":"summary-card","entity":"entity-1","color":"green","script":"return 1","size":"3","height":"4","id":"new_id_1"}`,
-          `{"icon":"ShoppingCart","title":"New Table","_type":"table","entity":"entity-1","size":"2","height":"3","script":"return 1","id":"new_id_2"}`,
+          `{"icon":"Download","title":"New Summary Card","_type":"summary-card","entity":"entity-1","color":"green","script":"return 1","span":"3","height":"4","id":"new_id_1"}`,
+          `{"icon":"ShoppingCart","title":"New Table","_type":"table","entity":"entity-1","span":"2","height":"3","script":"return 1","id":"new_id_2"}`,
         ].includes(JSON.stringify(requestBody))
       ) {
         DASHBOARD_WIDGETS.push(requestBody);
@@ -68,8 +68,8 @@ export const dashboardApiHandlers = [
       if (
         req.params.dashboardId === "test-dashboard-id" &&
         [
-          `{"_type":"table","entity":"entity-2","id":"table_id_1","queryId":"foo","script":"[{\\"name\\":\\"John\\",\\"age\\":6},{\\"name\\":\\"Jane\\",\\"age\\":5}]return 1","title":"Foo TableUpdated","size":"1","height":"2"}`,
-          `{"_type":"summary-card","entity":"entity-2","color":"red","icon":"<p>Some SVG Here</p><p>Custom Icon</p>","queryId":"bar","script":"[{\\"count\\":10},{\\"count\\":5}]return 1","title":"Bar CardUpdated","id":"summary_card_id_1","size":"3","height":"4"}`,
+          `{"_type":"table","entity":"entity-2","id":"table_id_1","queryId":"foo","script":"[{\\"name\\":\\"John\\",\\"age\\":6},{\\"name\\":\\"Jane\\",\\"age\\":5}]return 1","title":"Foo TableUpdated","span":"1","height":"2"}`,
+          `{"_type":"summary-card","entity":"entity-2","color":"red","icon":"<p>Some SVG Here</p><p>Custom Icon</p>","queryId":"bar","script":"[{\\"count\\":10},{\\"count\\":5}]return 1","title":"Bar CardUpdated","id":"summary_card_id_1","span":"3","height":"4"}`,
         ].includes(JSON.stringify(requestBody))
       ) {
         const index = DASHBOARD_WIDGETS.findIndex(

diff --git a/src/__tests__/_/forCodeCoverage.spec.ts b/src/__tests__/_/forCodeCoverage.spec.ts
@@ -33,7 +33,6 @@ import { FOR_CODE_COV as $33 } from "frontend/views/Dashboard/Widget/_components
 import { FOR_CODE_COV as $34 } from "shared/types/config";
 import { FOR_CODE_COV as $35 } from "shared/types/roles";
 import { FOR_CODE_COV as $37 } from "frontend/views/Dashboard/Widget/_manage/types";
-import { FOR_CODE_COV as $38 } from "shared/types/dashboard/types";
 import { FOR_CODE_COV as $39 } from "shared/types/dashboard/base";
 import { FOR_CODE_COV as $40 } from "frontend/lib/data/useMutate/types";
 import { FOR_CODE_COV as $41 } from "frontend/design-system/components/Form/_types";
@@ -79,7 +78,6 @@ noop(
   $34,
   $35,
   $37,
-  $38,
   $39,
   $40,
   $41,

diff --git a/src/backend/configuration/configuration.service.ts b/src/backend/configuration/configuration.service.ts
@@ -72,7 +72,7 @@ export class ConfigurationApiService implements IApplicationService {
 
   async upsert<T extends AppConfigurationKeys>(
     key: T,
-    value: AppConfigurationValueType<T>,
+    value: unknown,
     entity?: string
   ): Promise<void> {
     this.checkConfigKeyEntityRequirement(key, entity);

diff --git a/src/frontend/components/SchemaForm/index.tsx b/src/frontend/components/SchemaForm/index.tsx
@@ -9,6 +9,12 @@ import { resetFormValues } from "frontend/lib/form/utils";
 import { FormButton } from "frontend/design-system/components/Button/FormButton";
 import { userFriendlyCase } from "shared/lib/strings/friendly-case";
 import { ButtonIconTypes } from "frontend/design-system/components/Button/constants";
+import styled from "styled-components";
+import {
+  GridSpanSizes,
+  gridItem,
+  gridRoot,
+} from "frontend/design-system/constants/grid";
 import { RenderFormInput } from "./_RenderFormInput";
 import { IFormExtension } from "./types";
 import { runFormBeforeSubmit, runFormFieldState } from "./form-run";
@@ -26,6 +32,17 @@ interface IProps<T> {
   formExtension?: Partial<IFormExtension>;
 }
 
+export const GridRoot = styled.div`
+  ${gridRoot}
+  grid-auto-rows: auto;
+`;
+
+export const GridItem = styled.div<{
+  $span: GridSpanSizes;
+}>`
+  ${gridItem}
+`;
+
 // TODO: dependent options for schema forms
 
 export function SchemaForm<T extends Record<string, unknown>>({
@@ -85,29 +102,34 @@ export function SchemaForm<T extends Record<string, unknown>>({
               });
             }}
           >
-            {Object.entries(fields)
-              .filter(([field]) => {
-                return !fieldState[field]?.hidden;
-              })
-              .map(([field, bag]: [string, ISchemaFormConfig]) => (
-                <Field key={field} name={field} validateFields={[]}>
-                  {(renderProps) => (
-                    <RenderFormInput
-                      type={bag.type}
-                      disabled={fieldState[field]?.disabled}
-                      required={bag.validations.some(
-                        (validation) => validation.validationType === "required"
-                      )}
-                      placeholder={bag.placeholder}
-                      description={bag.description}
-                      apiSelections={bag.apiSelections}
-                      label={bag.label || userFriendlyCase(field)}
-                      entityFieldSelections={bag.selections}
-                      renderProps={renderProps}
-                    />
-                  )}
-                </Field>
-              ))}
+            <GridRoot>
+              {Object.entries(fields)
+                .filter(([field]) => {
+                  return !fieldState[field]?.hidden;
+                })
+                .map(([field, bag]: [string, ISchemaFormConfig]) => (
+                  <Field key={field} name={field} validateFields={[]}>
+                    {(renderProps) => (
+                      <GridItem $span={bag.span || "4"}>
+                        <RenderFormInput
+                          type={bag.type}
+                          disabled={fieldState[field]?.disabled}
+                          required={bag.validations.some(
+                            (validation) =>
+                              validation.validationType === "required"
+                          )}
+                          placeholder={bag.placeholder}
+                          description={bag.description}
+                          apiSelections={bag.apiSelections}
+                          label={bag.label || userFriendlyCase(field)}
+                          entityFieldSelections={bag.selections}
+                          renderProps={renderProps}
+                        />
+                      </GridItem>
+                    )}
+                  </Field>
+                ))}
+            </GridRoot>
             {buttonText && (
               <FormButton
                 text={buttonText}

diff --git a/src/frontend/design-system/components/Section/SectionDivider/index.tsx b/src/frontend/design-system/components/Section/SectionDivider/index.tsx
@@ -38,7 +38,7 @@ ContentLayout.Left = function SectionLeft({ children }: IProps) {
 };
 
 ContentLayout.Right = function SectionRight({ children }: IProps) {
-  return <div>{children}</div>;
+  return <div style={{ overflow: "scroll" }}>{children}</div>;
 };
 
 ContentLayout.Center = function SectionCenter({ children }: IProps) {

diff --git a/src/frontend/design-system/constants/grid.ts b/src/frontend/design-system/constants/grid.ts
@@ -0,0 +1,59 @@
+import { css } from "styled-components";
+import { BREAKPOINTS } from "./breakpoints";
+
+export type GridSpanSizes = "1" | "2" | "3" | "4";
+
+export type GridHeightSizes = "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8";
+
+export const gridHeightToPx = (unit: GridHeightSizes) => +unit * 100;
+
+export const GRID_SPAN_CONFIG: Record<
+  GridSpanSizes,
+  { lg: number; sm: number; xl: number }
+> = {
+  "1": {
+    sm: 1,
+    lg: 1,
+    xl: 1,
+  },
+  "2": {
+    sm: 1,
+    lg: 2,
+    xl: 2,
+  },
+  "3": {
+    sm: 1,
+    lg: 2,
+    xl: 3,
+  },
+  "4": {
+    sm: 1,
+    lg: 2,
+    xl: 4,
+  },
+};
+
+export const gridRoot = css`
+  display: grid;
+  column-gap: 16px;
+  grid-template-columns: repeat(4, 1fr);
+  @media (max-width: ${BREAKPOINTS.lg}) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  @media (max-width: ${BREAKPOINTS.sm}) {
+    grid-template-columns: 1fr;
+  }
+`;
+
+export const gridItem = css<{
+  $span: GridSpanSizes;
+}>`
+  grid-column-start: span ${(props) => GRID_SPAN_CONFIG[props.$span].xl};
+
+  @media (max-width: ${BREAKPOINTS.lg}) {
+    grid-column-start: span ${(props) => GRID_SPAN_CONFIG[props.$span].lg};
+  }
+  @media (max-width: ${BREAKPOINTS.sm}) {
+    grid-column-start: span ${(props) => GRID_SPAN_CONFIG[props.$span].sm};
+  }
+`;
diff --git a/src/frontend/views/Dashboard/List/_BaseDashboard.tsx b/src/frontend/views/Dashboard/List/_BaseDashboard.tsx
@@ -5,15 +5,14 @@ import React from "react";
 import { useUserHasPermission } from "frontend/hooks/auth/user.store";
 import styled from "styled-components";
 import { useRouter } from "next/router";
-
 import { AppLayout } from "frontend/_layouts/app";
 import { useDashboardWidgets } from "../dashboard.store";
-import { gridRoot } from "../styles";
+import { dashboardGridRoot } from "../styles";
 import { DashboardSkeleton } from "../Skeleton";
 import { DashboardWidget } from "../Widget";
 
 const Root = styled.div`
-  ${gridRoot};
+  ${dashboardGridRoot};
 `;
 
 interface IProps {

diff --git a/src/frontend/views/Dashboard/Manage/_BaseManageDashboard.tsx b/src/frontend/views/Dashboard/Manage/_BaseManageDashboard.tsx
@@ -13,14 +13,14 @@ import {
   useDashboardWidgets,
   useDeleteDashboardWidgetMutation,
 } from "../dashboard.store";
-import { gridRoot } from "../styles";
+import { dashboardGridRoot } from "../styles";
 import { DashboardSkeleton } from "../Skeleton";
 import { DashboardWidget } from "../Widget";
 import { DASHBOARD_WIDGETS_CRUD_CONFIG } from "../constants";
 
 const Root = styled.div`
   .list {
-    ${gridRoot};
+    ${dashboardGridRoot};
   }
 `;
 

diff --git a/src/frontend/views/Dashboard/Skeleton.tsx b/src/frontend/views/Dashboard/Skeleton.tsx
@@ -2,10 +2,10 @@ import styled from "styled-components";
 import { BaseSkeleton } from "frontend/design-system/components/Skeleton/Base";
 import { TableSkeleton } from "frontend/design-system/components/Skeleton/Table";
 import { Card } from "frontend/design-system/components/Card";
-import { gridRoot, WidgetRoot } from "./styles";
+import { dashboardGridRoot, WidgetRoot } from "./styles";
 
 const Root = styled.div`
-  ${gridRoot};
+  ${dashboardGridRoot};
 `;
 
 export function DashboardSkeleton() {
@@ -22,7 +22,7 @@ export function DashboardSkeleton() {
         <BaseSkeleton height="100px" />
       </Root>
       <Root>
-        <WidgetRoot $size="4" $height="3" hasSetting={false}>
+        <WidgetRoot $span="4" $height="3" hasSetting={false}>
           <TableSkeleton />
         </WidgetRoot>
       </Root>

diff --git a/src/frontend/views/Dashboard/Widget/_components/WidgetFrame/index.tsx b/src/frontend/views/Dashboard/Widget/_components/WidgetFrame/index.tsx
@@ -46,7 +46,7 @@ export const WidgetFrame = forwardRef<HTMLDivElement, IProps>(
 
     const {
       height: configHeight,
-      size: configSize,
+      span: configSpan,
       LoadingComponent,
       requiredInterface,
       schema,
@@ -79,7 +79,7 @@ export const WidgetFrame = forwardRef<HTMLDivElement, IProps>(
       <WidgetRoot
         ref={ref}
         aria-label={`${config.title} Widget`}
-        $size={config.size || configSize}
+        $span={config.span || configSpan}
         $height={height}
         hasSetting={!!setting}
       >

diff --git a/src/frontend/views/Dashboard/Widget/_manage/Form.tsx b/src/frontend/views/Dashboard/Widget/_manage/Form.tsx
@@ -33,7 +33,7 @@ import { DashboardWidgetPresentation } from "../Presentation";
 import { WIDGET_CONFIG } from "../constants";
 import { PortalFormFields, PortalFormSchema } from "./portal";
 import { WidgetFormField } from "./types";
-import { DASHBOARD_WIDGET_HEIGHTS, DASHBOARD_WIDGET_SIZES } from "./constants";
+import { DASHBOARD_WIDGET_HEIGHTS, DASHBOARD_WIDGET_SPANS } from "./constants";
 
 const DOCS_TITLE = "Widget Script";
 
@@ -207,11 +207,11 @@ export function DashboardWidgetForm({
                   )}
                 </GridSpan>
                 <GridSpan $span={1}>
-                  <Field name="size" validateFields={[]}>
+                  <Field name="span" validateFields={[]}>
                     {({ input, meta }) => (
                       <FormSelect
                         label="Width"
-                        selectData={DASHBOARD_WIDGET_SIZES}
+                        selectData={DASHBOARD_WIDGET_SPANS}
                         meta={meta}
                         input={input}
                       />

diff --git a/src/frontend/views/Dashboard/Widget/_manage/constants.ts b/src/frontend/views/Dashboard/Widget/_manage/constants.ts
@@ -4,7 +4,7 @@ const mapToUnitOptions = (values: number[]) =>
     value: `${value}`,
   }));
 
-export const DASHBOARD_WIDGET_SIZES = mapToUnitOptions([1, 2, 3, 4]);
+export const DASHBOARD_WIDGET_SPANS = mapToUnitOptions([1, 2, 3, 4]);
 
 export const DASHBOARD_WIDGET_HEIGHTS = mapToUnitOptions([
   1, 2, 3, 4, 5, 6, 7, 8,

diff --git a/src/frontend/views/Dashboard/Widget/constants.tsx b/src/frontend/views/Dashboard/Widget/constants.tsx
@@ -12,7 +12,7 @@ const BASE_WIDGET_CONFIG: Partial<
 > = {
   table: {
     height: "3",
-    size: "4",
+    span: "4",
     label: "Table",
     exampleValidData: [
       { age: 30, name: "John Doe", country: "Egypt" },
@@ -27,7 +27,7 @@ const BASE_WIDGET_CONFIG: Partial<
   },
   "summary-card": {
     height: "1",
-    size: "1",
+    span: "1",
     label: "Summary Card",
     exampleValidData: [{ count: 30 }],
     requiredInterface: `[{count: number} | number] | number`,

diff --git a/src/frontend/views/Dashboard/Widget/types.ts b/src/frontend/views/Dashboard/Widget/types.ts
@@ -1,10 +1,13 @@
+import {
+  GridSpanSizes,
+  GridHeightSizes,
+} from "frontend/design-system/constants/grid";
 import { ReactElement } from "react";
-import { WidgetHeightUnits, WidgetSizes } from "shared/types/dashboard/types";
 import { z } from "zod";
 
 export interface IWidgetConfigBag {
-  size: WidgetSizes;
-  height: WidgetHeightUnits;
+  span: GridSpanSizes;
+  height: GridHeightSizes;
   label: string;
   schema: z.ZodTypeAny;
   requiredInterface: string;