@cleartrip/ct-design-field 4.0.0 → 5.0.0

package/src/constants.ts

@@ -0,0 +1,10 @@
+export enum FieldVariant {
+  SM = 'sm',
+  MD = 'md',
+}
+
+export enum FieldType {
+  TEXT = 'text',
+  NUMBER = 'number',
+  PHONE = 'phone',
+}

package/src/index.ts

@@ -0,0 +1,8 @@
+export { default as InputField } from './InputField';
+export { default as FieldIcon } from './FieldIcon';
+export { default as FieldAction } from './FieldAction';
+export { default as TextArea } from './TextAreaInput';
+export type * from './FieldIcon/type';
+export type * from './type';
+export * from './constants';
+export type * from './FieldAction/type';

package/src/style.ts

@@ -0,0 +1,353 @@
+import { Theme } from '@cleartrip/ct-design-theme';
+import { FieldType, FieldVariant } from './constants';
+import { TypographyVariant, TypographyVariantType } from '@cleartrip/ct-design-typography';
+interface IFieldContainerStylesParams {
+  variant: `${FieldVariant}`;
+  theme: Theme;
+  hasError: boolean;
+  focus: boolean;
+  value: string;
+  disabled?: boolean;
+  isPrefixComponent?: boolean;
+  type?: `${FieldType}`;
+  disabledPlaceHolder?: boolean;
+  customSpacingTop?: number;
+  isLabeledPlaceholder?: boolean;
+}
+
+export const getFieldContainerBorderStyle = ({
+  theme,
+  hasError,
+  focus,
+  disabled,
+}: Omit<IFieldContainerStylesParams, 'variant' | 'value'>) => {
+  if (hasError) {
+    return { borderStyle: 'solid', borderColor: theme.color.border.warning, borderWidth: theme.border.width.md };
+  }
+
+  if (focus && !disabled) {
+    return { borderStyle: 'solid', borderColor: theme.color.border.primary, borderWidth: theme.border.width.md };
+  }
+
+  return { borderStyle: 'solid', borderColor: theme.color.border.disabledDark, borderWidth: theme.border.width.sm };
+};
+
+export const getFieldSpacingAndHeight = ({
+  isLabeledPlaceholder,
+  theme,
+  variant,
+  focus,
+  value,
+  disabledPlaceHolder,
+  customSpacingTop = 4,
+}: Omit<IFieldContainerStylesParams, 'hasError'>) => {
+  const isFieldNotEmpty = focus || value.length > 0;
+  const valueWithPlaceholder = isFieldNotEmpty && !disabledPlaceHolder;
+  /**
+   * By default Prefix component will be absolute position so its width needs to manage by padding in the field.
+   * For custom prefix case: user can send the css from props
+   */
+  const commonStyles = {
+    paddingRight: theme.spacing[4],
+    paddingLeft: theme.spacing[4],
+  };
+
+  switch (variant) {
+    case FieldVariant.SM: {
+      return {
+        ...commonStyles,
+        height: theme.size[10],
+      };
+    }
+    case FieldVariant.MD: {
+      return {
+        ...commonStyles,
+        height: theme.size[14],
+        paddingTop:
+          (isLabeledPlaceholder && focus) || (isLabeledPlaceholder && value.length > 0)
+            ? 24
+            : valueWithPlaceholder
+              ? theme.spacing[customSpacingTop as keyof typeof theme.spacing]
+              : theme.spacing[4],
+        paddingBottom: valueWithPlaceholder ? theme.spacing[2] : theme.spacing[4],
+      };
+    }
+    default: {
+      return {
+        ...commonStyles,
+        height: theme.size[14],
+        paddingTop: valueWithPlaceholder ? theme.spacing[6] : theme.spacing[4],
+        paddingBottom: valueWithPlaceholder ? theme.spacing[2] : theme.spacing[4],
+      };
+    }
+  }
+};
+
+export const getFieldContainerStyles = ({
+  hasError,
+  theme,
+  focus,
+  disabled,
+  variant,
+  value,
+  customSpacingTop,
+}: IFieldContainerStylesParams) => {
+  const fieldContainerBorderStyle = getFieldContainerBorderStyle({
+    theme,
+    hasError,
+    focus,
+    disabled,
+  });
+
+  const { height } = getFieldSpacingAndHeight({
+    theme,
+    variant,
+    focus,
+    value,
+    customSpacingTop,
+  });
+
+  return {
+    ...fieldContainerBorderStyle,
+
+    backgroundColor: disabled ? theme.color.background.disabled : theme.color.background.neutral,
+    // cursor: disabled ? 'not-allowed' : 'auto',
+    height,
+  };
+};
+
+export const getFieldPlaceholderStyles = ({
+  isFocused,
+  variant,
+  fieldType,
+}: {
+  theme: Theme;
+  isFocused: boolean;
+  disabled: boolean;
+  variant: `${FieldVariant}`;
+  fieldType: `${FieldType}`;
+  isPrefixComponent?: boolean;
+  shiftPlaceholder?: boolean;
+}) => {
+  if (variant === FieldVariant.SM) {
+    return { top: 8 };
+  }
+
+  if (fieldType === FieldType.PHONE) {
+    return {};
+  }
+  if (isFocused) {
+    return { transform: [{ translateY: -12 }] };
+  }
+
+  return {};
+};
+
+export const getFieldStyles = ({
+  isLabeledPlaceholder,
+  disabled,
+  theme,
+  variant,
+  focus,
+  value,
+  type,
+  isPrefixComponent = false,
+  disabledPlaceHolder,
+}: {
+  isLabeledPlaceholder: boolean;
+  disabled: boolean;
+  theme: Theme;
+  variant: `${FieldVariant}`;
+  type: `${FieldType}`;
+  value: string;
+  focus: boolean;
+  isPrefixComponent?: boolean;
+  disabledPlaceHolder?: boolean;
+}) => {
+  const fieldSpacingAndHeight = getFieldSpacingAndHeight({
+    isLabeledPlaceholder,
+    theme,
+    variant,
+    focus,
+    value,
+    type,
+    isPrefixComponent,
+    disabledPlaceHolder,
+    customSpacingTop: 2,
+  });
+
+  return {
+    ...fieldSpacingAndHeight,
+    backgroundColor: 'transparent',
+    color: disabled ? theme.color.text.disabled : theme.color.text.primary,
+  };
+};
+
+export const getTypographyVariant = (theme: Theme, variant: TypographyVariantType) => {
+  switch (variant) {
+    case TypographyVariant.HD1: {
+      return {
+        fontSize: theme.typography.size[48],
+        fontWeight: theme.typography.weight.semibold,
+        lineHeight: theme.typography.lineHeight[56],
+      };
+    }
+    case TypographyVariant.HD2: {
+      return {
+        fontSize: theme.typography.size[40],
+        fontWeight: theme.typography.weight.semibold,
+        lineHeight: theme.typography.lineHeight[48],
+      };
+    }
+    case TypographyVariant.HD3: {
+      return {
+        fontSize: theme.typography.size[32],
+        fontWeight: theme.typography.weight.semibold,
+        lineHeight: theme.typography.lineHeight[40],
+      };
+    }
+    case TypographyVariant.HM1: {
+      return {
+        fontSize: theme.typography.size[24],
+        fontWeight: theme.typography.weight.semibold,
+        lineHeight: theme.typography.lineHeight[32],
+      };
+    }
+    case TypographyVariant.HM2: {
+      return {
+        fontSize: theme.typography.size[20],
+        fontWeight: theme.typography.weight.semibold,
+        lineHeight: theme.typography.lineHeight[28],
+      };
+    }
+    case TypographyVariant.HM3: {
+      return {
+        fontSize: theme.typography.size[16],
+        fontWeight: theme.typography.weight.semibold,
+        lineHeight: theme.typography.lineHeight[24],
+      };
+    }
+    case TypographyVariant.HM4: {
+      return {
+        fontSize: theme.typography.size[14],
+        fontWeight: theme.typography.weight.semibold,
+        lineHeight: theme.typography.lineHeight[20],
+      };
+    }
+    case TypographyVariant.B1: {
+      return {
+        fontSize: theme.typography.size[16],
+        fontWeight: theme.typography.weight.medium,
+        lineHeight: theme.typography.lineHeight[24],
+      };
+    }
+    case TypographyVariant.B2: {
+      return {
+        fontSize: theme.typography.size[14],
+        fontWeight: theme.typography.weight.medium,
+        lineHeight: theme.typography.lineHeight[20],
+      };
+    }
+    case TypographyVariant.B3: {
+      return {
+        fontSize: theme.typography.size[12],
+        fontWeight: theme.typography.weight.medium,
+        lineHeight: theme.typography.lineHeight[16],
+      };
+    }
+    case TypographyVariant.B3CAPS: {
+      return {
+        fontSize: theme.typography.size[12],
+        fontWeight: theme.typography.weight.semibold,
+        lineHeight: theme.typography.lineHeight[16],
+        letterSpacing: theme.typography.letterSpacing.point4,
+      };
+    }
+    case TypographyVariant.B4: {
+      return {
+        fontSize: theme.typography.size[10],
+        fontWeight: theme.typography.weight.medium,
+        lineHeight: theme.typography.lineHeight[14],
+      };
+    }
+    case TypographyVariant.B4CAPS: {
+      return {
+        fontSize: theme.typography.size[10],
+        fontWeight: theme.typography.weight.semibold,
+        lineHeight: theme.typography.lineHeight[12],
+        letterSpacing: theme.typography.letterSpacing.point4,
+      };
+    }
+    case TypographyVariant.P1: {
+      return {
+        fontSize: theme.typography.size[16],
+        fontWeight: theme.typography.weight.normal,
+        lineHeight: theme.typography.lineHeight[22],
+      };
+    }
+    case TypographyVariant.P2: {
+      return {
+        fontSize: theme.typography.size[14],
+        fontWeight: theme.typography.weight.normal,
+        lineHeight: theme.typography.lineHeight[20],
+      };
+    }
+    case TypographyVariant.P3: {
+      return {
+        fontSize: theme.typography.size[12],
+        fontWeight: theme.typography.weight.normal,
+        lineHeight: theme.typography.lineHeight[16],
+      };
+    }
+    case TypographyVariant.P4: {
+      return {
+        fontSize: theme.typography.size[12],
+        fontWeight: theme.typography.weight.normal,
+        lineHeight: theme.typography.lineHeight[16],
+      };
+    }
+    case TypographyVariant.L1: {
+      return {
+        fontSize: theme.typography.size[16],
+        fontWeight: theme.typography.weight.semibold,
+        lineHeight: theme.typography.lineHeight[24],
+      };
+    }
+    case TypographyVariant.L2: {
+      return {
+        fontSize: theme.typography.size[14],
+        fontWeight: theme.typography.weight.semibold,
+        lineHeight: theme.typography.lineHeight[20],
+      };
+    }
+    case TypographyVariant.L3: {
+      return {
+        fontSize: theme.typography.size[12],
+        fontWeight: theme.typography.weight.semibold,
+        lineHeight: theme.typography.lineHeight[16],
+      };
+    }
+    case TypographyVariant.OVERLINE: {
+      return {
+        fontSize: theme.typography.size[12],
+        fontWeight: theme.typography.weight.semibold,
+        lineHeight: theme.typography.lineHeight[16],
+      };
+    }
+    case TypographyVariant.TAG: {
+      return {
+        fontSize: theme.typography.size[10],
+        fontWeight: theme.typography.weight.semibold,
+        lineHeight: theme.typography.lineHeight[12],
+        letterSpacing: theme.typography.letterSpacing.point5,
+      };
+    }
+    default: {
+      return {
+        fontSize: theme.typography.size[20],
+        fontWeight: theme.typography.weight.semibold,
+        lineHeight: theme.typography.lineHeight[28],
+      };
+    }
+  }
+};

package/src/type.ts

@@ -0,0 +1,243 @@
+import { ReactElement, ReactNode } from 'react';
+import { Styles } from '@cleartrip/ct-design-types';
+import { TypographyStyleConfigProps, TypographyVariantType } from '@cleartrip/ct-design-typography';
+import { ICardFieldProps } from './variants/Card/type';
+import { IOtpFieldProps } from './variants/OTP/type';
+import { IPhoneField } from './variants/Phone/type';
+
+export interface IFieldPrompt {
+  message?: string | ReactNode;
+  Icon?: ReactNode;
+  hasError: boolean;
+}
+
+import { FieldVariant, FieldType } from './constants';
+
+export interface FieldChangeEvent {
+  target: {
+    value: string;
+    selectionStart: number;
+  };
+  currentTarget: IFieldRef;
+  preventDefault?: () => void;
+}
+
+export interface FieldSelectEvent {
+  target: {
+    value: string;
+    selectionStart: number;
+  };
+  currentTarget: IFieldRef;
+  preventDefault?: () => void;
+}
+
+export interface FieldFocusEvent {
+  target: {
+    value: string;
+  };
+  currentTarget: IFieldRef;
+  preventDefault?: () => void;
+}
+
+export interface FieldBlurEvent {
+  target: {
+    value: string;
+  };
+  currentTarget: IFieldRef;
+  preventDefault?: () => void;
+}
+
+export interface FieldPressInEvent {
+  target: {
+    value: string;
+  };
+  currentTarget: IFieldRef;
+  preventDefault?: () => void;
+}
+
+export interface FieldKeyDownEvent {
+  target: {
+    value: string;
+    key: string;
+  };
+  currentTarget: IFieldRef;
+  preventDefault?: () => void;
+}
+
+export interface IFieldRef {
+  focus: () => void;
+  blur: () => void;
+  setSelection: (start: number, end: number) => void;
+}
+
+export interface IFieldProps {
+  /**
+   * field id
+   */
+  id?: string;
+  /**
+   * field placeholder text
+   */
+  placeholder?: string;
+  /**
+   * placeholder type
+   */
+  placeholderType?: 'default' | 'labeled' | 'floating';
+  /**
+   * field value
+   */
+  value: string;
+  /**
+   * field prefix component
+   * For eg: <FieldIcon />, <PhoneFieldPrefix /> etc.
+   */
+  prefix?: ReactElement<{ focus?: boolean }>;
+  /**
+   * field suffix component
+   * For eg: <FieldIcon />, <FieldAction /> etc.
+   */
+  suffix?: ReactElement<{ focus?: boolean }>;
+  /**
+   * gap between input field and the prefix component
+   */
+  prefixGap?: string;
+  /**
+   * gap between input field and the suffix component
+   */
+  suffixGap?: string;
+  /**
+   * this prop is used to render field with different sizes
+   * For eg: sm: 40px in height, md: 56px in height
+   */
+  variant?: `${FieldVariant}`;
+  /**
+   * Hints at the type of data for virtual keyboard layout.
+   * - `none`: No virtual keyboard (for custom input handling)
+   * - `text`: Standard text keyboard
+   * - `decimal`: Numeric with decimal separator
+   * - `numeric`: Numeric keyboard (0-9)
+   * - `tel`: Telephone keypad
+   * - `search`: Search-optimized keyboard
+   * - `email`: Email-optimized keyboard
+   * - `url`: URL-optimized keyboard
+   */
+  inputMode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+  /**
+   * this prop is used to auto focus the input field
+   */
+  autoFocus?: boolean;
+  /**
+   * Controls automatic capitalization behavior.
+   * - `none`: No auto-capitalization
+   * - `sentences`: Capitalize first letter of sentences
+   * - `words`: Capitalize first letter of each word
+   * - `characters`: Capitalize all characters
+   */
+  autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters' | undefined;
+
+  /**
+   * this props is used to determine the input type
+   * like text, number etc.
+   */
+  type?: `${FieldType}`;
+  /**
+   * this prop is used show error/success message
+   */
+  prompt?: IFieldPrompt;
+  /**
+   * change handler for input field
+   */
+  onChange?: (e: FieldChangeEvent) => void;
+  /**
+   * select handler for input field
+   */
+  onSelect?: (e: FieldSelectEvent) => void;
+  /**
+   * focus handler for input field
+   */
+  onFocus?: (e: FieldFocusEvent) => void;
+  /**
+   * blur handler for input field
+   */
+  onBlur?: (e: FieldBlurEvent) => void;
+  /**
+   * press in handler for input field
+   */
+  onPressIn?: (e: FieldPressInEvent) => void;
+  /**
+   * key down handler for input field
+   */
+  onKeyDown?: (e: FieldKeyDownEvent) => void;
+  /**
+   * this prop is used to disable the input field
+   */
+  disabled?: boolean;
+  /**
+   * this prop is used to make the input field read only
+   */
+  readOnly?: boolean;
+  /**
+   * When false, it will prevent the soft keyboard from showing when the field is focused. The default value is true
+   */
+  showSoftInputOnFocus?: boolean;
+  /**
+   * cursor color
+   */
+  cursorColor?: string;
+  /**
+   * max length of the input field
+   */
+  maxLength?: number;
+  /**
+   * Granular style configuration for all sub-components.
+   * Use this to customize the appearance of specific parts of the input field.
+   */
+  styleConfig?: {
+    /** Styles for the outermost container */
+    root?: Styles[];
+    /** Styles for the container wrapping the input and prefix/suffix */
+    fieldContainer?: Styles[];
+    /** Styles for the input element itself */
+    field?: Styles[];
+    /** Styles for the placeholder */
+    placeholder?: placeholderStyleConfig;
+    /** Styles for the prompt */
+    promptStyles?: promptStyleConfig;
+  };
+  fieldTypographyVariant?: TypographyVariantType;
+
+  /**
+   * The start and end of the text input's selection. Set start and end to
+   * the same value to position the cursor.
+   */
+  selection?: { start: number; end?: number };
+  /**
+   * this prop is used to show the clear button
+   */
+  customSpacingTop?: number;
+}
+
+interface promptStyleConfig {
+  /** Styles for the prompt message container */
+  promptBox?: Styles[];
+
+  /** Styles for the prompt icon container */
+  promptIconContainer?: Styles[];
+
+  /** Typography styles for the prompt message text */
+  promptMessageTypography?: TypographyStyleConfigProps;
+}
+
+interface placeholderStyleConfig {
+  /** Styles for the floating placeholder label container */
+  placeholderLabel?: Styles[];
+
+  /** Typography styles for the placeholder text */
+  placeholderTypography?: TypographyStyleConfigProps;
+}
+
+export type InputFieldProps =
+  | (IPhoneField & { fieldType: 'phone' })
+  | (IOtpFieldProps & { fieldType: 'otp' })
+  | (ICardFieldProps & { fieldType: 'card' })
+  | (IFieldProps & { fieldType?: 'default' });

package/src/variants/Card/index.native.tsx

@@ -0,0 +1,46 @@
+import { forwardRef, useEffect, useRef } from 'react';
+
+import { IFieldProps, IFieldRef } from '../../type';
+import { FieldType } from '../../constants';
+import InputField from '../../Field';
+import useMergeRefs from '@cleartrip/ct-design-use-merge-refs';
+
+export interface ICursorRef {
+  cursorPos: number;
+  operation: string;
+}
+
+export enum CURSOR_OPERATION {
+  NONE = 'NONE',
+  ADD = 'ADD',
+  SUBSTRACT = 'SUBSTRACT',
+}
+
+/**
+ * CardField is a wrapper component which is used add a space after a specific character limit
+ * For Eg: 1234 5678 9012 3456
+ *
+ * Use cases
+ *
+ * 1.) Gift Voucher
+ * 2.) Credit/Debit Card
+ */
+const CardField = forwardRef<IFieldRef, IFieldProps>(({ onChange, value, ...rest }, forwardedRef) => {
+  const ref = useRef<IFieldRef | null>(null);
+  const mergedRef = useMergeRefs(forwardedRef, ref);
+
+  return (
+    <InputField
+      ref={mergedRef}
+      onChange={onChange}
+      {...rest}
+      type={FieldType.NUMBER}
+      value={value}
+      inputMode='numeric'
+    />
+  );
+});
+
+CardField.displayName = 'CardField';
+
+export default CardField;