fix: knit picks

Author: mario99logic

package-lock.json

@@ -1,7 +1,7 @@
 export { Accordion } from "@components/molecules/accordion";
 export { ActiveDeploymentWarning } from "@components/molecules/activeDeploymentWarning";
 export { ActiveIndicator } from "@components/molecules/activeIndicator";
-export { AkTimezoneSelect } from "@components/molecules/timezone";
+export { TimezoneSelect } from "@components/molecules/timezone";
 export { ConnectionTableStatus } from "@components/molecules/connectionTableStatus";
 export { CopyButton } from "@components/molecules/copyButton";
 export type { CopyButtonRef } from "@components/molecules/copyButton";

src/components/molecules/index.ts

@@ -1,22 +1,14 @@
-import React, { forwardRef, useCallback, useId, useMemo, useState } from "react";
+import React, { forwardRef, useId, useMemo } from "react";
 
-import { SingleValue } from "react-select";
-import TimezoneSelect from "react-timezone-select";
+import ReactTimezoneSelect, { useTimezoneSelect } from "react-timezone-select";
 
-import { getSelectDarkStyles, getSelectLightStyles } from "@constants";
-import { SelectOption, SelectProps } from "@interfaces/components";
+import { defaultTimezone, getSelectDarkStyles, getSelectLightStyles } from "@constants";
+import { ITimezoneOption, TimezoneSelectProps } from "@interfaces/components";
 import { cn } from "@utilities";
 
 import { Hint } from "@components/atoms";
 
-const defaultTimezone = { label: "UTC", value: "UTC" };
-
-interface TimezoneSelectProps extends Omit<SelectProps, "options" | "value" | "onChange"> {
-	value?: string;
-	onChange?: (value: SingleValue<SelectOption>) => void;
-}
-
-export const AkTimezoneSelect = forwardRef<HTMLDivElement, TimezoneSelectProps>(
+const TimezoneSelectBase = forwardRef<HTMLDivElement, TimezoneSelectProps>(
 	(
 		{
 			dataTestid,
@@ -33,17 +25,9 @@ export const AkTimezoneSelect = forwardRef<HTMLDivElement, TimezoneSelectProps>(
 		},
 		ref
 	) => {
-		const [selectedOption, setSelectedOption] = useState<any>(null);
+		const { parseTimezone } = useTimezoneSelect({});
 
-		const timezoneValue = value ? { label: value, value } : defaultTimezone;
-
-		const handleChange = useCallback(
-			(selected: any) => {
-				setSelectedOption(selected);
-				onChange?.(selected);
-			},
-			[onChange]
-		);
+		const timezoneValue: ITimezoneOption = value ? parseTimezone(value) : defaultTimezone;
 
 		const selectStyles = useMemo(
 			() =>
@@ -57,8 +41,9 @@ export const AkTimezoneSelect = forwardRef<HTMLDivElement, TimezoneSelectProps>(
 					"pointer-events-none absolute -top-2 left-3 px-1 text-xs opacity-100 transition-all before:bg-gray-950",
 					{
 						"before:bg-white": variant === "light",
-					},
-					{ "text-gray-900": variant === "light" }
+						"text-gray-900": variant === "light",
+						"text-white": variant !== "light",
+					}
 				),
 			[variant]
 		);
@@ -76,14 +61,14 @@ export const AkTimezoneSelect = forwardRef<HTMLDivElement, TimezoneSelectProps>(
 		return (
 			<>
 				<div className="relative" data-testid={dataTestid} ref={ref}>
-					<TimezoneSelect
+					<ReactTimezoneSelect
 						{...rest}
 						id={id}
 						isDisabled={disabled}
-						onChange={handleChange}
+						onChange={onChange}
 						placeholder={isRequired ? `${placeholder} *` : placeholder}
 						styles={selectStyles as any}
-						value={selectedOption || timezoneValue}
+						value={timezoneValue}
 					/>
 
 					<label className={labelClass} htmlFor={id}>
@@ -97,4 +82,6 @@ export const AkTimezoneSelect = forwardRef<HTMLDivElement, TimezoneSelectProps>(
 	}
 );
 
-AkTimezoneSelect.displayName = "AkTimezoneSelect";
+TimezoneSelectBase.displayName = "TimezoneSelect";
+
+export const TimezoneSelect = React.memo(TimezoneSelectBase);

src/components/molecules/timezone.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from "react-i18next";
 import { TriggerForm } from "@src/types/models";
 
 import { ErrorMessage, Input } from "@components/atoms";
-import { AkTimezoneSelect } from "@components/molecules";
+import { TimezoneSelect } from "@components/molecules";
 
 export const SchedulerFields = () => {
 	const { t } = useTranslation("tabs", { keyPrefix: "triggers.form" });
@@ -37,20 +37,23 @@ export const SchedulerFields = () => {
 					value={cronValue}
 				/>
 
-				<ErrorMessage>{errors.cron?.message as string}</ErrorMessage>
+				{errors.cron?.message ? <ErrorMessage>{errors.cron.message}</ErrorMessage> : null}
 			</div>
 
-			<div>
+			<div className="relative">
 				<Controller
 					control={control}
 					name="timezone"
 					render={({ field: { onChange, value } }) => (
-						<AkTimezoneSelect
+						<TimezoneSelect
+							isError={!!errors.timezone}
 							onChange={(selectedOption) => onChange(selectedOption?.value)}
 							value={value}
 						/>
 					)}
 				/>
+
+				{errors.timezone?.message ? <ErrorMessage>{errors.timezone.message}</ErrorMessage> : null}
 			</div>
 		</div>
 	);

src/components/organisms/configuration/triggers/formParts/scheduler.tsx

@@ -120,3 +120,4 @@ export {
 	projectSessionsPathPatterns,
 } from "./pathPatterns.constants";
 export { defaultCodeFixSuggestion, defaultSuggestionAction } from "@constants/monacoEditor.constants";
+export { defaultTimezone } from "@constants/timezone.constants";

src/constants/index.ts

@@ -0,0 +1,3 @@
+import { ITimezoneOption } from "@interfaces/components";
+
+export const defaultTimezone: ITimezoneOption = { label: "UTC", value: "UTC" };

src/constants/timezone.constants.ts

@@ -10,3 +10,4 @@ export type {
 	IntegrationSelectOption,
 } from "@interfaces/components/forms/select.interface";
 export type { TextArea } from "@interfaces/components/forms/textarea.interface";
+export type { ITimezoneOption, TimezoneSelectProps } from "@interfaces/components/forms/timezoneSelect.interface";

src/interfaces/components/forms/index.ts

@@ -0,0 +1,14 @@
+import { SelectProps } from "@interfaces/components";
+
+export interface ITimezoneOption {
+	value: string;
+	label: string;
+	abbrev?: string;
+	altName?: string;
+	offset?: number;
+}
+
+export interface TimezoneSelectProps extends Omit<SelectProps, "options" | "value" | "onChange"> {
+	value?: string;
+	onChange?: (timezone: ITimezoneOption) => void;
+}

src/interfaces/components/forms/timezoneSelect.interface.ts

@@ -14,11 +14,13 @@ export type { DrawerProps } from "@interfaces/components/drawer.interface";
 export type { ErrorMessageProps } from "@interfaces/components/error.interface";
 export type {
 	InputProps,
+	ITimezoneOption,
 	PartialSelectOption,
 	SelectOption,
 	SelectProps,
 	TextArea,
 	SelectIconLabel,
+	TimezoneSelectProps,
 } from "@interfaces/components/forms";
 export type { SecretInputProps } from "@interfaces/components/forms/secretInput.interface";
 export type { FrameProps, SplitFrameProps } from "@interfaces/components/frame.interface";

src/interfaces/components/index.ts

@@ -148,7 +148,8 @@
 				"connectionRequired": "Connection is required",
 				"functionRequired": "Entry function is required",
 				"invalidCron": "Cron expression is required and must be valid for schedule triggers",
-				"nameRequired": "Name is required"
+				"nameRequired": "Name is required",
+				"timezoneRequired": "Timezone is required for scheduled triggers"
 			},
 			"webhookInfo": {
 				"firstLink": "https://docs.autokitteh.com/integrations/http/events/#event-types",