feat: add Object Edit Settings section with Object preview (#4216)

* feat: add Object Edit Settings section with Object preview Closes #3834 * fix: fix preview card stories * test: improve getFieldDefaultPreviewValue tests * test: add getFieldPreviewValueFromRecord tests * test: add useFieldPreview tests * refactor: rename and move components * fix: restore RecordStoreDecorator
2024-02-29 11:23:56 -03:00
parent 6ad3880696
commit a892d0f653
43 changed files with 1665 additions and 937 deletions
@@ -0,0 +1,48 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { SettingsDataModelIsCustomTag } from '@/settings/data-model/objects/SettingsDataModelIsCustomTag';
+import { useIcons } from '@/ui/display/icon/hooks/useIcons';
+
+export type SettingsDataModelObjectSummaryProps = {
+  className?: string;
+  objectMetadataItem: Pick<
+    ObjectMetadataItem,
+    'icon' | 'isCustom' | 'labelPlural'
+  >;
+};
+
+const StyledObjectSummary = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+  justify-content: space-between;
+`;
+
+const StyledObjectName = styled.div`
+  align-items: center;
+  display: flex;
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
+
+export const SettingsDataModelObjectSummary = ({
+  className,
+  objectMetadataItem,
+}: SettingsDataModelObjectSummaryProps) => {
+  const theme = useTheme();
+
+  const { getIcon } = useIcons();
+  const ObjectIcon = getIcon(objectMetadataItem.icon);
+
+  return (
+    <StyledObjectSummary className={className}>
+      <StyledObjectName>
+        <ObjectIcon size={theme.icon.size.sm} stroke={theme.icon.stroke.md} />
+        {objectMetadataItem.labelPlural}
+      </StyledObjectName>
+      <SettingsDataModelIsCustomTag isCustom={objectMetadataItem.isCustom} />
+    </StyledObjectSummary>
+  );
+};