commonscomputer/cal.diy
4
0
Fork 0
Code Issues Pull Requests Actions 2.0k Packages Projects Releases Wiki Activity

chore: Fix types of app-store to prevent type drilling (#19732)

Browse Source
This commit is contained in:
Alex van Andel
2025-03-05 12:06:01 -03:00
committed by GitHub
parent 4cdb8f3bae
commit 96a5abe6c3
2 changed files with 142 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app-store/hitpay/components/KeyInput.tsx
+129 -128
View File
@@ -40,143 +40,144 @@ const Addon = ({ children, className, error }: AddonProps) => (
</div>
);
export const KeyField = forwardRef<HTMLInputElement, InputFieldProps & { defaultValue: string }>(
function KeyField(props, ref) {
const id = useId();
const [isPasswordVisible, setIsPasswordVisible] = useState(false);
const [currentValue, setCurrentValue] = useState<string>("");
const toggleIsPasswordVisible = useCallback(
() => setIsPasswordVisible(!isPasswordVisible),
[isPasswordVisible, setIsPasswordVisible]
);
export const KeyField: React.FC<InputFieldProps & { defaultValue: string }> = forwardRef<
HTMLInputElement,
InputFieldProps & { defaultValue: string }
>(function KeyField(props, ref) {
const id = useId();
const [isPasswordVisible, setIsPasswordVisible] = useState(false);
const [currentValue, setCurrentValue] = useState<string>("");
const toggleIsPasswordVisible = useCallback(
() => setIsPasswordVisible(!isPasswordVisible),
[isPasswordVisible, setIsPasswordVisible]
);
const { t: _t, isLocaleReady, i18n } = useLocale();
const t = props.t || _t;
const name = props.name || "";
const {
label = t(name),
labelProps,
labelClassName,
LockedIcon,
placeholder = isLocaleReady && i18n.exists(`${name}_placeholder`) ? t(`${name}_placeholder`) : "",
className,
addOnLeading,
addOnClassname,
inputIsFullWidth,
labelSrOnly,
noLabel,
containerClassName,
readOnly,
showAsteriskIndicator,
defaultValue,
...passThrough
} = props;
const { t: _t, isLocaleReady, i18n } = useLocale();
const t = props.t || _t;
const name = props.name || "";
const {
label = t(name),
labelProps,
labelClassName,
LockedIcon,
placeholder = isLocaleReady && i18n.exists(`${name}_placeholder`) ? t(`${name}_placeholder`) : "",
className,
addOnLeading,
addOnClassname,
inputIsFullWidth,
labelSrOnly,
noLabel,
containerClassName,
readOnly,
showAsteriskIndicator,
defaultValue,
...passThrough
} = props;
useEffect(() => {
if (currentValue.trim().length === 0) {
setIsPasswordVisible(true);
}
}, [currentValue]);
useEffect(() => {
if (currentValue.trim().length === 0) {
setIsPasswordVisible(true);
}
}, [currentValue]);
useEffect(() => {
setCurrentValue(defaultValue);
if (defaultValue.length > 0) {
setIsPasswordVisible(false);
}
}, [defaultValue]);
useEffect(() => {
setCurrentValue(defaultValue);
if (defaultValue.length > 0) {
setIsPasswordVisible(false);
}
}, [defaultValue]);
const getHiddenKey = (): string => {
let hiddenKey = currentValue;
const length = currentValue.length;
if (length > 6) {
const start = currentValue.slice(0, 3);
const end = currentValue.slice(length - 3);
hiddenKey = `${start}${"*".repeat(length - 6)}${end}`;
}
const getHiddenKey = (): string => {
let hiddenKey = currentValue;
const length = currentValue.length;
if (length > 6) {
const start = currentValue.slice(0, 3);
const end = currentValue.slice(length - 3);
hiddenKey = `${start}${"*".repeat(length - 6)}${end}`;
}
return hiddenKey;
};
return hiddenKey;
};
const onInput = (event: FormEvent<HTMLInputElement>) => {
const target = event.target as HTMLInputElement;
const fullValue = target.value;
setCurrentValue(fullValue);
target.value = fullValue;
};
const onInput = (event: FormEvent<HTMLInputElement>) => {
const target = event.target as HTMLInputElement;
const fullValue = target.value;
setCurrentValue(fullValue);
target.value = fullValue;
};
return (
<div className={classNames(containerClassName)}>
{!!label && !noLabel && (
<Skeleton
as={Label}
htmlFor={id}
loadingClassName="w-16"
{...labelProps}
className={classNames(labelClassName, labelSrOnly && "sr-only", props.error && "text-error")}>
{label}
{showAsteriskIndicator && !readOnly && passThrough.required ? (
<span className="text-default ml-1 font-medium">*</span>
) : null}
{LockedIcon}
</Skeleton>
)}
return (
<div className={classNames(containerClassName)}>
{!!label && !noLabel && (
<Skeleton
as={Label}
htmlFor={id}
loadingClassName="w-16"
{...labelProps}
className={classNames(labelClassName, labelSrOnly && "sr-only", props.error && "text-error")}>
{label}
{showAsteriskIndicator && !readOnly && passThrough.required ? (
<span className="text-default ml-1 font-medium">*</span>
) : null}
{LockedIcon}
</Skeleton>
)}
<div
dir="ltr"
className="focus-within:ring-brand-default group relative mb-1 flex items-center rounded-md transition focus-within:outline-none focus-within:ring-2">
{addOnLeading && (
<Addon className={classNames("ltr:rounded-l-md rtl:rounded-r-md", addOnClassname)}>
{addOnLeading}
</Addon>
)}
<Input
id={id}
type="text"
placeholder={placeholder}
isFullWidth={inputIsFullWidth}
className={classNames(
className,
"disabled:bg-subtle disabled:hover:border-subtle mb-0 rounded-r-none border-r-0 disabled:cursor-not-allowed",
addOnLeading && "rounded-l-none border-l-0",
isPasswordVisible && "inline-block",
!isPasswordVisible && "hidden",
"!my-0 !ring-0"
)}
{...passThrough}
ref={ref}
onInput={onInput}
/>
<Input
type="text"
isFullWidth={inputIsFullWidth}
className={classNames(
className,
"disabled:bg-subtle disabled:hover:border-subtle mb-0 rounded-r-none border-r-0 disabled:cursor-not-allowed",
addOnLeading && "rounded-l-none border-l-0",
!isPasswordVisible && "inline-block",
isPasswordVisible && "hidden",
"!my-0 !ring-0"
)}
disabled
value={getHiddenKey()}
/>
<Addon className={classNames("ltr:rounded-r-md rtl:rounded-l-md", addOnClassname)}>
<button
className="text-emphasis h-9"
tabIndex={-1}
type="button"
onClick={() => toggleIsPasswordVisible()}>
{isPasswordVisible ? (
<Icon name="eye-off" className="h-4 w-4 stroke-[2.5px]" />
) : (
<Icon name="eye" className="h-4 w-4 stroke-[2.5px]" />
)}
</button>
<div
dir="ltr"
className="focus-within:ring-brand-default group relative mb-1 flex items-center rounded-md transition focus-within:outline-none focus-within:ring-2">
{addOnLeading && (
<Addon className={classNames("ltr:rounded-l-md rtl:rounded-r-md", addOnClassname)}>
{addOnLeading}
</Addon>
</div>
)}
<Input
id={id}
type="text"
placeholder={placeholder}
isFullWidth={inputIsFullWidth}
className={classNames(
className,
"disabled:bg-subtle disabled:hover:border-subtle mb-0 rounded-r-none border-r-0 disabled:cursor-not-allowed",
addOnLeading && "rounded-l-none border-l-0",
isPasswordVisible && "inline-block",
!isPasswordVisible && "hidden",
"!my-0 !ring-0"
)}
{...passThrough}
ref={ref}
onInput={onInput}
/>
<Input
type="text"
isFullWidth={inputIsFullWidth}
className={classNames(
className,
"disabled:bg-subtle disabled:hover:border-subtle mb-0 rounded-r-none border-r-0 disabled:cursor-not-allowed",
addOnLeading && "rounded-l-none border-l-0",
!isPasswordVisible && "inline-block",
isPasswordVisible && "hidden",
"!my-0 !ring-0"
)}
disabled
value={getHiddenKey()}
/>
<Addon className={classNames("ltr:rounded-r-md rtl:rounded-l-md", addOnClassname)}>
<button
className="text-emphasis h-9"
tabIndex={-1}
type="button"
onClick={() => toggleIsPasswordVisible()}>
{isPasswordVisible ? (
<Icon name="eye-off" className="h-4 w-4 stroke-[2.5px]" />
) : (
<Icon name="eye" className="h-4 w-4 stroke-[2.5px]" />
)}
</button>
</Addon>
</div>
);
}
);
</div>
);
});
export default KeyField;
packages/app-store/routing-forms/pages/layout-handler/[...appPages].tsx
+13 -9
View File
@@ -1,23 +1,27 @@
"use client";
import type { GetServerSidePropsContext } from "next";
import React from "react";
import type { GetServerSidePropsContext, GetServerSideProps } from "next";
import type { ReactElement, ReactNode, ComponentType } from "react";
import { FormProvider, useForm } from "react-hook-form";
import { useParamsWithFallback } from "@calcom/lib/hooks/useParamsWithFallback";
import type { AppPrisma, AppSsrInit, AppUser } from "@calcom/types/AppGetServerSideProps";
import type { AppProps } from "@lib/app-providers";
import RoutingFormsRoutingConfig from "../app-routing.config";
const DEFAULT_ROUTE = "forms";
type GetServerSidePropsRestArgs = [AppPrisma, AppUser, AppSsrInit];
type Component = {
default: React.ComponentType & Pick<AppProps["Component"], "getLayout">;
getServerSideProps?: (context: GetServerSidePropsContext, ...rest: GetServerSidePropsRestArgs) => void;
type ComponentWithLayout = ComponentType & {
getLayout?: (page: ReactElement) => ReactNode;
};
type Component = {
default: ComponentWithLayout;
getServerSideProps?: (
context: GetServerSidePropsContext,
...rest: Parameters<GetServerSideProps>
) => ReturnType<GetServerSideProps>;
};
const getComponent = (route: string): Component => {
return (RoutingFormsRoutingConfig as unknown as Record<string, Component>)[route];
};