From 98e544bd45a570d28bb5af719be7170c67595432 Mon Sep 17 00:00:00 2001 From: Ivan Kiral Date: Tue, 3 Oct 2023 15:29:49 +0200 Subject: [PATCH 1/2] Use generator multichoice in callout and visual container --- components/shared/richText/Callout.tsx | 22 ++++++++----------- .../visualContainer/VisualContainer.tsx | 16 +++++--------- lib/constants/colors.ts | 4 ++-- lib/types/perCollection.ts | 6 +++++ 4 files changed, 22 insertions(+), 26 deletions(-) diff --git a/components/shared/richText/Callout.tsx b/components/shared/richText/Callout.tsx index 5db9a13c..af940f77 100644 --- a/components/shared/richText/Callout.tsx +++ b/components/shared/richText/Callout.tsx @@ -9,8 +9,9 @@ import { calloutTypeColor, mainColorBorderClass, } from "../../../lib/constants/colors"; +import { isCalloutType } from "../../../lib/types/perCollection"; import { siteCodename } from "../../../lib/utils/env"; -import { Component_Callout } from "../../../models"; +import { Component_Callout, contentTypes } from "../../../models"; import { RichTextElement } from "./RichTextElement"; type Props = Readonly<{ @@ -32,12 +33,14 @@ export const CalloutComponent: FC = (props) => ( ); const renderTypeIcon = (callout: Component_Callout) => { + const { warning, info, lightbulb } = contentTypes.callout.elements.type.options; + switch (callout.elements.type.value[0]?.codename) { - case OptionCodename.Warning: + case warning.codename: return ; - case OptionCodename.Info: + case info.codename: return ; - case OptionCodename.Lightbulb: + case lightbulb.codename: return ; default: throwUnknownType(callout); @@ -45,20 +48,13 @@ const renderTypeIcon = (callout: Component_Callout) => { }; const createIconColor = (callout: Component_Callout) => { - const calloutType = callout.elements.type.value[0]?.codename as CalloutType; + const calloutType = callout.elements.type.value[0]?.codename; - if (calloutType) return calloutTypeColor[calloutType]; + if (isCalloutType(calloutType)) return calloutTypeColor[calloutType]; throwUnknownType(callout); }; -enum OptionCodename { - Warning = "warning", - Info = "info", - Lightbulb = "lightbulb", -} - -type CalloutType = "warning" | "info" | "lightbulb" | undefined; const throwUnknownType = (callout: Component_Callout) => { throw new Error( diff --git a/components/shared/visualContainer/VisualContainer.tsx b/components/shared/visualContainer/VisualContainer.tsx index 28384de3..25d5a882 100644 --- a/components/shared/visualContainer/VisualContainer.tsx +++ b/components/shared/visualContainer/VisualContainer.tsx @@ -1,7 +1,7 @@ import { FC } from "react"; import { sanitizeAnchor } from "../../../lib/anchors"; -import { Block_VisualContainer } from "../../../models"; +import { Block_VisualContainer, contentTypes } from "../../../models"; import { BuildError } from "../ui/BuildError"; import { CarouselComponent } from "./Carousel"; import { GridComponent } from "./Grid"; @@ -13,8 +13,9 @@ type Props = Readonly<{ }>; const VisualRepresentation: FC = (props) => { + const { grid, hero_unit, stack } = contentTypes.visual_container.elements.visual_representation.options; switch (props.item.elements.visualRepresentation.value[0]?.codename) { - case visualRepresentation.grid: + case grid.codename: return ( = (props) => { codename={props.item.system.codename} /> ); - case visualRepresentation.stack: + case stack.codename: return ( = (props) => { codename={props.item.system.codename} /> ); - case visualRepresentation.hero_unit: + case hero_unit.codename: if (props.item.elements.items.linkedItems.length === 1) { const fact = props.item.elements.items.linkedItems[0]; return !fact ? ( @@ -67,10 +68,3 @@ export const VisualContainer: FC = (props) => ( ); - -// https://kontent-ai.atlassian.net/browse/DEVREL-955 -const visualRepresentation = { - grid: "grid", - stack: "stack", - hero_unit: "hero_unit", -} as const; diff --git a/lib/constants/colors.ts b/lib/constants/colors.ts index 27a4a20c..d6f2bc35 100644 --- a/lib/constants/colors.ts +++ b/lib/constants/colors.ts @@ -1,4 +1,4 @@ -import { PerCollection } from "../types/perCollection"; +import { CalloutType, PerCollection } from "../types/perCollection"; export const mainColorHoverClass: PerCollection = { ficto_healthtech: "hover:bg-emerald-500", @@ -54,7 +54,7 @@ export const mainColorAfterBgClass: PerCollection = { ficto_surgical: "after:bg-rose-900", } -export const calloutTypeColor = { +export const calloutTypeColor: Readonly> = { warning: "text-orange-400", info: "text-blue-400", lightbulb: "text-green-400", diff --git a/lib/types/perCollection.ts b/lib/types/perCollection.ts index acf3cb89..94fc9f81 100644 --- a/lib/types/perCollection.ts +++ b/lib/types/perCollection.ts @@ -1,3 +1,5 @@ +import { contentTypes } from "../../models"; + export type PerCollection = Readonly<{ ficto_healthtech: T; ficto_imaging: T; @@ -15,3 +17,7 @@ const emptyCodenames: PerCollection = { ficto_healthtech: null, }; +export type CalloutType = keyof typeof contentTypes.callout.elements.type.options; + +export const isCalloutType = (codename: string | undefined): codename is CalloutType => + !!codename && Object.keys(contentTypes.callout.elements.type.options).includes(codename); \ No newline at end of file From 4f753765a85260363a8d99d279ca21bae6b46fc8 Mon Sep 17 00:00:00 2001 From: Jiri Lojda Date: Tue, 3 Oct 2023 16:52:53 +0200 Subject: [PATCH 2/2] DEVREL-955 Move calloutType into a separate file --- components/shared/richText/Callout.tsx | 2 +- lib/constants/colors.ts | 5 +++-- lib/types/calloutType.ts | 6 ++++++ lib/types/perCollection.ts | 7 ------- 4 files changed, 10 insertions(+), 10 deletions(-) create mode 100644 lib/types/calloutType.ts diff --git a/components/shared/richText/Callout.tsx b/components/shared/richText/Callout.tsx index af940f77..1fd47dfd 100644 --- a/components/shared/richText/Callout.tsx +++ b/components/shared/richText/Callout.tsx @@ -9,7 +9,7 @@ import { calloutTypeColor, mainColorBorderClass, } from "../../../lib/constants/colors"; -import { isCalloutType } from "../../../lib/types/perCollection"; +import { isCalloutType } from "../../../lib/types/calloutType"; import { siteCodename } from "../../../lib/utils/env"; import { Component_Callout, contentTypes } from "../../../models"; import { RichTextElement } from "./RichTextElement"; diff --git a/lib/constants/colors.ts b/lib/constants/colors.ts index d6f2bc35..e0ea0716 100644 --- a/lib/constants/colors.ts +++ b/lib/constants/colors.ts @@ -1,4 +1,5 @@ -import { CalloutType, PerCollection } from "../types/perCollection"; +import { CalloutType } from "../types/calloutType"; +import { PerCollection } from "../types/perCollection"; export const mainColorHoverClass: PerCollection = { ficto_healthtech: "hover:bg-emerald-500", @@ -64,4 +65,4 @@ export const mainColorAnchor: PerCollection = { ficto_healthtech: "border-emerald-800", ficto_imaging: "border-indigo-800", ficto_surgical: "border-rose-800", -} \ No newline at end of file +} diff --git a/lib/types/calloutType.ts b/lib/types/calloutType.ts new file mode 100644 index 00000000..a3ef1148 --- /dev/null +++ b/lib/types/calloutType.ts @@ -0,0 +1,6 @@ +import { contentTypes } from "../../models/project/contentTypes"; + +export type CalloutType = keyof typeof contentTypes.callout.elements.type.options; + +export const isCalloutType = (codename: string | undefined): codename is CalloutType => + !!codename && Object.keys(contentTypes.callout.elements.type.options).includes(codename); diff --git a/lib/types/perCollection.ts b/lib/types/perCollection.ts index 94fc9f81..14e2fb2a 100644 --- a/lib/types/perCollection.ts +++ b/lib/types/perCollection.ts @@ -1,5 +1,3 @@ -import { contentTypes } from "../../models"; - export type PerCollection = Readonly<{ ficto_healthtech: T; ficto_imaging: T; @@ -16,8 +14,3 @@ const emptyCodenames: PerCollection = { ficto_surgical: null, ficto_healthtech: null, }; - -export type CalloutType = keyof typeof contentTypes.callout.elements.type.options; - -export const isCalloutType = (codename: string | undefined): codename is CalloutType => - !!codename && Object.keys(contentTypes.callout.elements.type.options).includes(codename); \ No newline at end of file