feat: Set up initial LayoutAnnotator

visualize-admin · Dec 7, 2023 · 8e0e2cd · 8e0e2cd
1 parent 7d545ef
commit 8e0e2cd
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 28 deletions.
diff --git a/app/configurator/components/annotators.tsx b/app/configurator/components/annotators.tsx
@@ -9,10 +9,11 @@ import {
   ControlSectionContent,
   SubsectionTitle,
 } from "@/configurator/components/chart-controls/section";
-import { AnnotatorTabField } from "@/configurator/components/field";
+import { ChartAnnotatorTabField } from "@/configurator/components/field";
 import { getFieldLabel } from "@/configurator/components/field-i18n";
 import {
   isConfiguring,
+  isLayouting,
   useConfiguratorState,
 } from "@/configurator/configurator-state";
 import { useLocale } from "@/locales/use-locale";
@@ -104,7 +105,7 @@ export const ChartAnnotator = () => {
         <Trans id="controls.section.description">Title & Description</Trans>
       </SubsectionTitle>
       <ControlSectionContent px="small" gap="none">
-        <AnnotatorTabField
+        <ChartAnnotatorTabField
           value="title"
           icon="text"
           emptyValueWarning={
@@ -114,7 +115,7 @@ export const ChartAnnotator = () => {
           }
           mainLabel={getFieldLabel("title")}
         />
-        <AnnotatorTabField
+        <ChartAnnotatorTabField
           value="description"
           icon="description"
           emptyValueWarning={
@@ -129,4 +130,36 @@ export const ChartAnnotator = () => {
   );
 };
 
-export const ConfiguratorAnnotator = () => {};
+export const LayoutAnnotator = () => {
+  const locale = useLocale();
+  const [state] = useConfiguratorState(isLayouting);
+  const { title, description } = state.meta;
+  const disabled = !(title[locale] && description[locale]);
+
+  return (
+    <ControlSection
+      role="tablist"
+      aria-labelledby="controls-design"
+      collapse
+      defaultExpanded={false}
+    >
+      <SubsectionTitle
+        titleId="controls-design"
+        disabled={disabled}
+        warnMessage={
+          disabled ? (
+            <Trans id="controls.section.title.warning">
+              Please add a title or description.
+            </Trans>
+          ) : undefined
+        }
+        gutterBottom={false}
+      >
+        <Trans id="controls.section.description">Title & Description</Trans>
+      </SubsectionTitle>
+      <ControlSectionContent px="small" gap="none">
+        123
+      </ControlSectionContent>
+    </ControlSection>
+  );
+};
diff --git a/app/configurator/components/chart-layouter.tsx b/app/configurator/components/chart-layouter.tsx
diff --git a/app/configurator/components/configurator.tsx b/app/configurator/components/configurator.tsx
@@ -31,6 +31,7 @@ import {
   PanelHeaderWrapper,
   PanelLayout,
 } from "@/configurator/components/layout";
+import { LayoutConfigurator } from "@/configurator/components/layout-configurator";
 import { ChartConfiguratorTable } from "@/configurator/table/table-chart-configurator";
 import SvgIcChevronLeft from "@/icons/components/IcChevronLeft";
 import { useLocale } from "@/locales/use-locale";
@@ -281,7 +282,9 @@ const LayoutingStep = () => {
             <PublishChartButton />
           </PanelHeaderWrapper>
         </PanelHeaderLayout>
-        <PanelBodyWrapper type="L">{state.layout.type}</PanelBodyWrapper>
+        <PanelBodyWrapper type="L">
+          <LayoutConfigurator />
+        </PanelBodyWrapper>
         <PanelBodyWrapper type="M">
           <Box
             sx={{

diff --git a/app/configurator/components/field.tsx b/app/configurator/components/field.tsx
@@ -503,18 +503,15 @@ export const TimeInput = ({
   );
 };
 
-export const AnnotatorTabField = ({
+export const ChartAnnotatorTabField = ({
   value,
   emptyValueWarning,
   ...tabProps
 }: {
   value: string;
   emptyValueWarning?: React.ReactNode;
 } & Omit<AnnotatorTabProps, "onClick">) => {
-  const fieldProps = useActiveFieldField({
-    value,
-  });
-
+  const fieldProps = useActiveFieldField({ value });
   const [state] = useConfiguratorState(isConfiguring);
   const locale = useLocale();
   const hasText = useMemo(() => {
@@ -552,12 +549,7 @@ export const MetaInputField = ({
   value?: string;
   disabled?: boolean;
 }) => {
-  const field = useMetaField({
-    metaKey,
-    locale,
-    value,
-  });
-
+  const field = useMetaField({ metaKey, locale, value });
   return <Input label={label} {...field} disabled={disabled} />;
 };
 

diff --git a/app/configurator/components/layout-configurator.tsx b/app/configurator/components/layout-configurator.tsx
@@ -0,0 +1,9 @@
+import { LayoutAnnotator } from "@/configurator/components/annotators";
+
+export const LayoutConfigurator = () => {
+  return (
+    <>
+      <LayoutAnnotator />
+    </>
+  );
+};
diff --git a/app/configurator/table/table-chart-configurator.tsx b/app/configurator/table/table-chart-configurator.tsx
@@ -12,7 +12,7 @@ import {
   SubsectionTitle,
 } from "@/configurator/components/chart-controls/section";
 import { ChartTypeSelector } from "@/configurator/components/chart-type-selector";
-import { AnnotatorTabField } from "@/configurator/components/field";
+import { ChartAnnotatorTabField } from "@/configurator/components/field";
 
 import { useOrderedTableColumns } from "../components/ui-helpers";
 
@@ -95,15 +95,15 @@ export const ChartConfiguratorTable = ({
           role="tablist"
           aria-labelledby="controls-settings"
         >
-          <AnnotatorTabField
-            key={"settings"}
-            value={"table-settings"}
+          <ChartAnnotatorTabField
+            key="settings"
+            value="table-settings"
             icon="settings"
             mainLabel={<Trans id="controls.table.settings">Settings</Trans>}
           />
-          <AnnotatorTabField
-            key={"sorting"}
-            value={"table-sorting"}
+          <ChartAnnotatorTabField
+            key="sorting"
+            value="table-sorting"
             icon="sort"
             mainLabel={<Trans id="controls.table.sorting">Sorting</Trans>}
           />