✨ feat(fonts): remove needless fonts

dashpresshq · Mar 2, 2024 · 8bf295d · 8bf295d
1 parent 1ef0433
commit 8bf295d
Show file tree

Hide file tree

Showing 11 changed files with 111 additions and 76 deletions.
diff --git a/src/frontend/_layouts/app/_MainContent.tsx b/src/frontend/_layouts/app/_MainContent.tsx
@@ -13,9 +13,14 @@ import { Breadcrumbs } from "frontend/design-system/components/Breadcrumbs";
 import { Typo } from "frontend/design-system/primitives/Typo";
 import { Spacer } from "frontend/design-system/primitives/Spacer";
 import { useAppConfiguration } from "frontend/hooks/configuration/configuration.store";
+import styled from "styled-components";
 import { GoogleTagManager } from "../scripts/GoogleTagManager";
 import { DEMO_LINKS } from "./constant";
 
+const HeaderLeft = styled.div`
+  text-align: left;
+`;
+
 export interface IMainContentProps {
   children: ReactNode;
   actionItems?: IDropDownMenuItem[];
@@ -68,10 +73,10 @@ export function MainContent({
         <meta name="viewport" content="initial-scale=1.0, width=device-width" />
       </Head>
       <Stack justify="space-between" align="center">
-        <div>
+        <HeaderLeft>
           <Typo.MD>{pageTitle}</Typo.MD>
           <Breadcrumbs items={homedBreadcrumb} onCrumbClick={goToLinkIndex} />
-        </div>
+        </HeaderLeft>
         <div>
           <Stack>
             {actionMenuItems.length > 0 ? (

diff --git a/src/frontend/components/SchemaForm/index.tsx b/src/frontend/components/SchemaForm/index.tsx
@@ -27,6 +27,7 @@ interface IProps<T> {
   onChange?: (data: T) => void;
   resetForm?: true;
   formExtension?: Partial<IFormExtension>;
+  from?: string;
 }
 
 export function SchemaForm<T extends Record<string, unknown>>({
@@ -39,6 +40,7 @@ export function SchemaForm<T extends Record<string, unknown>>({
   action,
   formExtension,
   resetForm,
+  from,
 }: IProps<T>) {
   const evaluateScriptContext = useEvaluateScriptContext();
 
@@ -127,6 +129,7 @@ export function SchemaForm<T extends Record<string, unknown>>({
                           label={bag.label || userFriendlyCase(field)}
                           entityFieldSelections={bag.selections}
                           formProps={formProps}
+                          from={from}
                         />
                       </FormGrid.Item>
                     )}

diff --git a/src/frontend/components/SchemaForm/types.ts b/src/frontend/components/SchemaForm/types.ts
@@ -27,5 +27,6 @@ export interface IRenderFormInputProps {
   label: string;
   placeholder?: string;
   description?: string;
+  from?: string;
   rightActions?: IFormInputRightAction[];
 }
diff --git a/src/frontend/design-system/components/Button/Button.ts b/src/frontend/design-system/components/Button/Button.ts
@@ -22,7 +22,6 @@ export const StyledBaseButton = styled.button<IStyledBaseButton>`
   font-size: 0.9rem;
   line-height: 1.7;
   border-radius: 4px;
-  position: relative;
   cursor: ${(props) => props.cursor || "pointer"};
   -webkit-appearance: button
   -webkit-tap-highlight-color: transparent;
@@ -71,7 +70,8 @@ export const StyledBaseButton = styled.button<IStyledBaseButton>`
 
 
   &:disabled {
-    opacity: 0.65;
+    cursor: not-allowed;
+    opacity: 0.9;
   }
 `;
 

diff --git a/src/frontend/design-system/components/Table/Body.tsx b/src/frontend/design-system/components/Table/Body.tsx
@@ -20,8 +20,14 @@ const BodyTR = styled.tr<{ $hoverColor: string }>`
   padding: 4px;
   border-bottom: 1px solid ${USE_ROOT_COLOR("border-color")};
   page-break-inside: avoid;
+  .show-on-hover {
+    opacity: 0;
+  }
   &:hover {
     background-color: ${(props) => props.$hoverColor};
+    .show-on-hover {
+      opacity: 1;
+    }
   }
 `;
 

diff --git a/src/frontend/design-system/primitives/Typo.tsx b/src/frontend/design-system/primitives/Typo.tsx
@@ -13,7 +13,7 @@ const TEXT_COLORS = {
 export type TextProps = {
   size: "1" | "2" | "3" | "4" | "5" | "6";
   color: keyof typeof TEXT_COLORS;
-  weight: "light" | "regular" | "bold" | "thick";
+  weight: "light" | "regular" | "bold";
   textStyle?: "italic";
   as: "p" | "span";
   id?: string;
@@ -34,7 +34,6 @@ const weights: Record<TextProps["weight"], number> = {
   light: 300,
   regular: 400,
   bold: 500,
-  thick: 600,
 };
 
 // @ts-ignore

diff --git a/src/frontend/lib/selection/index.ts b/src/frontend/lib/selection/index.ts
@@ -55,7 +55,7 @@ export function useStringSelections(key: string) {
       setSelections({ ...selections, ...update });
     },
     isSelected: (item: string) => {
-      return selections[item];
+      return !!selections[item];
     },
     clearAll: () => {
       setSelections({});

diff --git a/src/frontend/views/data/Details/DetailsView.tsx b/src/frontend/views/data/Details/DetailsView.tsx
@@ -22,11 +22,23 @@ import { useEntityViewStateMachine } from "../hooks/useEntityViewStateMachine";
 import { viewSpecialDataTypes } from "../viewSpecialDataTypes";
 import { evalutePresentationScript } from "../evaluatePresentationScript";
 import { PreDataDetails } from "./portal";
+import { PortalColumnRender } from "../Table/portal";
 
 const ContentText = styled(Typo.SM)`
   overflow-wrap: anywhere;
 `;
 
+const DetailItem = styled.div`
+  .show-on-hover {
+    opacity: 0;
+  }
+  &:hover {
+    .show-on-hover {
+      opacity: 1;
+    }
+  }
+`;
+
 export function EntityDetailsView({
   entityId,
   entity,
@@ -91,15 +103,15 @@ export function EntityDetailsView({
       <PreDataDetails entity={entity} entityId={entityId} />
       <div aria-label="Details Section">
         {entityCrudFields.data.map(({ name }) => {
-          const value$1 = dataDetails?.data?.[name];
+          const rawValue = dataDetails?.data?.[name];
 
           const value = evalutePresentationScript(
             entityPresentationScript.data.script,
             {
               field: name,
               from: "details",
               row: dataDetails?.data,
-              value: value$1,
+              value: rawValue,
               ...evaluateScriptContext,
             }
           );
@@ -123,11 +135,20 @@ export function EntityDetailsView({
           );
 
           return (
-            <React.Fragment key={name}>
+            <DetailItem key={name}>
               <Typo.XXS weight="bold">{getEntityFieldLabels(name)}</Typo.XXS>
-              {contentToRender}
+              <PortalColumnRender
+                {...{
+                  column: name,
+                  value: rawValue,
+                  entity,
+                  entityId,
+                }}
+              >
+                {contentToRender}
+              </PortalColumnRender>
               <Spacer />
-            </React.Fragment>
+            </DetailItem>
           );
         })}
       </div>

diff --git a/src/frontend/views/data/Table/useTableColumns.tsx b/src/frontend/views/data/Table/useTableColumns.tsx
@@ -21,6 +21,7 @@ import { ITableColumn } from "frontend/design-system/components/Table/types";
 import { ActionButtons } from "frontend/design-system/components/Button/ActionButtons";
 import { TableFilterType } from "shared/types/data";
 import { useEvaluateScriptContext } from "frontend/hooks/scripts";
+import { ReactNode } from "react";
 import { viewSpecialDataTypes } from "../viewSpecialDataTypes";
 import { PortalColumnRender, usePortalTableColumns } from "./portal";
 import { evalutePresentationScript } from "../evaluatePresentationScript";
@@ -189,37 +190,30 @@ export const useTableColumns = (
             },
           });
 
-          const columnRenderProps = {
-            column: name,
-            value: value$1,
-            entity,
-            entityId: row.original[idField.data] as string,
-          };
+          let cellRender: string | ReactNode = value;
 
-          if (specialDataTypeRender) {
-            return (
-              <PortalColumnRender {...columnRenderProps}>
-                {specialDataTypeRender}
-              </PortalColumnRender>
-            );
-          }
           if (typeof value === "string") {
-            return (
-              <PortalColumnRender {...columnRenderProps}>
-                {ellipsis(value as string, 50)}
-              </PortalColumnRender>
-            );
+            cellRender = ellipsis(value as string, 50);
           }
+
           if (typeof value === "object") {
-            return (
-              <PortalColumnRender {...columnRenderProps}>
-                {JSON.stringify(value)}
-              </PortalColumnRender>
-            );
+            cellRender = JSON.stringify(value);
           }
+
+          if (specialDataTypeRender) {
+            cellRender = specialDataTypeRender;
+          }
+
           return (
-            <PortalColumnRender {...columnRenderProps}>
-              {value as string}
+            <PortalColumnRender
+              {...{
+                column: name,
+                value: value$1,
+                entity,
+                entityId: row.original[idField.data] as string,
+              }}
+            >
+              {cellRender}
             </PortalColumnRender>
           );
         },

diff --git a/src/frontend/views/data/_BaseEntityForm.tsx b/src/frontend/views/data/_BaseEntityForm.tsx
@@ -31,6 +31,23 @@ type IProps = {
   buttonText: (submitting: boolean) => string;
   systemIcon: SystemIconsKeys;
   fieldsToShow?: string[];
+  from?: string;
+};
+
+export const useEntityFormEditableFields = (
+  entity: string,
+  crudAction: "create" | "update"
+): DataStateKeys<string[]> => {
+  const isEntityFieldMutatable = useIsEntityFieldMutatable(crudAction);
+  const entityCrudFields = useEntityCrudFields(entity, crudAction);
+
+  return {
+    error: entityCrudFields.error,
+    isLoading: entityCrudFields.isLoading,
+    data: entityCrudFields.data
+      .filter(isEntityFieldMutatable)
+      .map(({ name }) => name),
+  };
 };
 
 export function BaseEntityForm({
@@ -41,6 +58,7 @@ export function BaseEntityForm({
   systemIcon,
   resetForm,
   buttonText,
+  from,
   onSubmit,
   fieldsToShow,
 }: IProps) {
@@ -52,15 +70,14 @@ export function BaseEntityForm({
     "entity_columns_types",
     entity
   );
-  const entityCrudFields = useEntityCrudFields(entity, crudAction);
+
+  const editableFields = useEntityFormEditableFields(entity, crudAction);
 
   const extendEntityFormConfig = usePortalExtendEntityFormConfig(
     entity,
     crudAction
   );
 
-  const isEntityFieldMutatable = useIsEntityFieldMutatable(crudAction);
-
   const entityFormExtension = useEntityConfiguration(
     "entity_form_extension",
     entity
@@ -69,16 +86,16 @@ export function BaseEntityForm({
 
   const error =
     entityFieldTypesMap.error ||
-    entityCrudFields.error ||
     initialValuesData?.error ||
+    editableFields?.error ||
     entityFormExtension.error ||
     entityToOneReferenceFields.error;
 
   const isLoading =
-    entityCrudFields.isLoading ||
     entityToOneReferenceFields.isLoading ||
     entityFormExtension.isLoading ||
     entityFieldTypesMap.isLoading ||
+    editableFields.isLoading ||
     extendEntityFormConfig === "loading" ||
     initialValuesData?.isLoading;
 
@@ -89,17 +106,13 @@ export function BaseEntityForm({
     entity,
   });
 
-  const fields = entityCrudFields.data
-    .filter(isEntityFieldMutatable)
-    .map(({ name }) => name);
-
   const fieldsInitialValues = useMemo(() => {
     const initialValues = initialValuesData?.data;
     if (!initialValues) {
       return initialValues;
     }
     return Object.fromEntries(
-      fields.map((field) => {
+      editableFields.data.map((field) => {
         let value = initialValues[field];
 
         if (typeof value === "object" && value !== null) {
@@ -109,15 +122,15 @@ export function BaseEntityForm({
         return [field, value];
       })
     );
-  }, [initialValuesData, entityCrudFields.data]);
+  }, [initialValuesData, editableFields.data]);
 
   const formSchemaConfig = {
     entityToOneReferenceFields: entityToOneReferenceFields.data,
     getEntityFieldLabels,
     entityFieldTypes,
     entityFieldSelections,
     entityValidationsMap,
-    fields,
+    fields: editableFields.data,
   };
 
   const formConfig = buildAppliedSchemaFormConfig(formSchemaConfig, {
@@ -147,6 +160,7 @@ export function BaseEntityForm({
         resetForm={resetForm}
         onSubmit={onSubmit}
         action={crudAction}
+        from={from}
         systemIcon={systemIcon}
         initialValues={fieldsInitialValues}
         fields={