@himakarinv/nativex 1.0.0

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,336 @@
+import { useEffect, useRef, useState } from 'react';
+import {
+  Platform,
+  Pressable,
+  StyleSheet,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+
+import { borders, button as buttonTokens, colors, radius, shadows, spacing, typography } from '../../theme';
+import { Icon, IconName } from '../Icon';
+import { Label } from '../Label';
+
+export const CheckboxSize = {
+  Small: 'sm',
+  Medium: 'md',
+  Large: 'lg',
+} as const;
+
+export type CheckboxSize = (typeof CheckboxSize)[keyof typeof CheckboxSize];
+
+export const CheckboxShape = {
+  Square: 'square',
+  Circle: 'circle',
+} as const;
+
+export type CheckboxShape = (typeof CheckboxShape)[keyof typeof CheckboxShape];
+
+export const CheckboxState = {
+  Default: 'default',
+  Hover: 'hover',
+  Focused: 'focused',
+  Disabled: 'disabled',
+} as const;
+
+export type CheckboxState = (typeof CheckboxState)[keyof typeof CheckboxState];
+
+export type CheckboxProps = {
+  checked?: boolean;
+  indeterminate?: boolean;
+  disabled?: boolean;
+  state?: CheckboxState;
+  size?: CheckboxSize;
+  shape?: CheckboxShape;
+  filled?: boolean;
+  label?: string;
+  supportingText?: string;
+  required?: boolean;
+  inputId?: string;
+  accessibilityLabel?: string;
+  onCheckedChange?: (checked: boolean) => void;
+  onIndeterminateChange?: (indeterminate: boolean) => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+const isNative = Platform.OS !== 'web';
+
+const BOX_SIZE = {
+  [CheckboxSize.Small]: spacing.base,
+  [CheckboxSize.Medium]: spacing.lg,
+  [CheckboxSize.Large]: spacing.xl,
+} as const;
+
+const ICON_SIZE = {
+  [CheckboxSize.Small]: spacing.md,
+  [CheckboxSize.Medium]: spacing.base,
+  [CheckboxSize.Large]: spacing.lg,
+} as const;
+
+function containsNode(host: unknown, target: EventTarget | null) {
+  if (!host || !target || typeof host !== 'object') {
+    return false;
+  }
+  const node = host as { contains?: (other: EventTarget) => boolean };
+  return typeof node.contains === 'function' ? node.contains(target) : false;
+}
+
+function hitSlopFor(boxSize: number) {
+  const extra = Math.max(spacing.none, (buttonTokens.minTouch - boxSize) / 2);
+  if (extra === spacing.none) {
+    return undefined;
+  }
+  return { top: extra, bottom: extra, left: extra, right: extra };
+}
+
+function webRing(): ViewStyle {
+  return {
+    boxShadow: `0 0 0 ${borders.width.thick}px ${colors.checkbox.shadowRing}, 0 ${shadows.boxLight.offsetY}px ${shadows.boxLight.radius}px ${colors.checkbox.shadowElevation}`,
+  } as ViewStyle;
+}
+
+function nativeRingStyle(isCircle: boolean): ViewStyle {
+  return {
+    position: 'absolute',
+    top: -borders.width.thick,
+    right: -borders.width.thick,
+    bottom: -borders.width.thick,
+    left: -borders.width.thick,
+    borderRadius: isCircle ? radius.full : radius.sm + borders.width.thick,
+    borderWidth: borders.width.thick,
+    borderColor: colors.checkbox.shadowRing,
+    zIndex: 0,
+  };
+}
+
+export function Checkbox({
+  checked = false,
+  indeterminate = false,
+  disabled = false,
+  state = CheckboxState.Default,
+  size = CheckboxSize.Medium,
+  shape = CheckboxShape.Square,
+  filled = false,
+  label = '',
+  supportingText = '',
+  required = false,
+  inputId,
+  accessibilityLabel,
+  onCheckedChange,
+  onIndeterminateChange,
+  style,
+}: CheckboxProps) {
+  const hostRef = useRef<View>(null);
+  const [internalChecked, setInternalChecked] = useState(checked);
+  const [internalIndeterminate, setInternalIndeterminate] = useState(indeterminate);
+  const [focused, setFocused] = useState(false);
+  const [hovered, setHovered] = useState(false);
+
+  useEffect(() => {
+    setInternalChecked(checked);
+  }, [checked]);
+
+  useEffect(() => {
+    setInternalIndeterminate(indeterminate);
+  }, [indeterminate]);
+
+  const isDisabled = disabled || state === CheckboxState.Disabled;
+  const isChecked = internalChecked;
+  const isIndeterminate = internalIndeterminate;
+  const isOn = isChecked || isIndeterminate;
+  const isCircle = shape === CheckboxShape.Circle;
+  const isFilledCircle = isCircle && filled;
+  const hasText = Boolean(label) || Boolean(supportingText?.trim());
+  const hasSupporting = Boolean(supportingText?.trim());
+  const showHover = !isDisabled && (state === CheckboxState.Hover || hovered);
+  const showFocus = !isDisabled && (state === CheckboxState.Focused || (!isNative && focused));
+  const showRing = !isDisabled && (showHover || showFocus);
+  const boxSize = BOX_SIZE[size];
+  const iconSize = ICON_SIZE[size];
+
+  let backgroundColor: string = colors.checkbox.bgDefault;
+  let borderColor: string = colors.checkbox.borderDefault;
+
+  if (isDisabled) {
+    backgroundColor = colors.checkbox.disabledBg;
+    borderColor = colors.checkbox.disabledBorder;
+  } else if (isFilledCircle) {
+    backgroundColor = colors.checkbox.bgDefault;
+    borderColor = colors.checkbox.borderActive;
+  } else if (isOn || showHover) {
+    backgroundColor = colors.checkbox.bgActive;
+    borderColor = colors.checkbox.borderActive;
+  } else if (showFocus) {
+    backgroundColor = colors.checkbox.bgDefault;
+    borderColor = colors.checkbox.borderActive;
+  }
+
+  const iconName = isIndeterminate && !isCircle
+    ? IconName.CheckboxMinus
+    : isChecked && isCircle
+      ? IconName.RadioDot
+      : isChecked && !isCircle
+        ? IconName.Checkmark
+        : '';
+
+  const toggle = () => {
+    if (isDisabled) {
+      return;
+    }
+
+    if (isIndeterminate) {
+      setInternalIndeterminate(false);
+      setInternalChecked(true);
+      onIndeterminateChange?.(false);
+      onCheckedChange?.(true);
+      return;
+    }
+
+    const next = !isChecked;
+    setInternalChecked(next);
+    onCheckedChange?.(next);
+  };
+
+  useEffect(() => {
+    if (Platform.OS !== 'web' || !focused) {
+      return;
+    }
+
+    const doc = globalThis.document as Document | undefined;
+    if (!doc) {
+      return;
+    }
+
+    const onPointerDown = (event: Event) => {
+      if (!containsNode(hostRef.current, event.target)) {
+        setFocused(false);
+      }
+    };
+
+    doc.addEventListener('mousedown', onPointerDown);
+    doc.addEventListener('touchstart', onPointerDown);
+    return () => {
+      doc.removeEventListener('mousedown', onPointerDown);
+      doc.removeEventListener('touchstart', onPointerDown);
+    };
+  }, [focused]);
+
+  return (
+    <Pressable
+      ref={hostRef}
+      accessibilityRole="checkbox"
+      accessibilityState={{ checked: isIndeterminate ? 'mixed' : isChecked, disabled: isDisabled }}
+      accessibilityLabel={accessibilityLabel || label || supportingText || undefined}
+      disabled={isDisabled}
+      nativeID={inputId}
+      hitSlop={hasText ? undefined : hitSlopFor(boxSize)}
+      onHoverIn={() => setHovered(true)}
+      onHoverOut={() => setHovered(false)}
+      onFocus={() => setFocused(true)}
+      onBlur={() => setFocused(false)}
+      onPress={() => {
+        toggle();
+        setFocused(false);
+      }}
+      style={[
+        styles.wrapper,
+        styles.pressableReset,
+        hasText && styles.wrapperWithLabel,
+        hasSupporting && styles.wrapperWithSupporting,
+        isDisabled && styles.wrapperDisabled,
+        style,
+      ]}>
+      <View style={styles.boxHost}>
+        {showRing && isNative ? <View pointerEvents="none" style={nativeRingStyle(isCircle)} /> : null}
+        <View
+          style={[
+            styles.box,
+            {
+              width: boxSize,
+              height: boxSize,
+              borderRadius: isCircle ? radius.full : radius.sm,
+              backgroundColor,
+              borderColor,
+            },
+            showRing && !isNative && webRing(),
+          ]}>
+          {iconName ? (
+            <Icon
+              name={iconName}
+              size={iconSize}
+              color={isDisabled ? colors.checkbox.disabledIcon : colors.checkbox.icon}
+              decorative
+            />
+          ) : null}
+        </View>
+      </View>
+
+      {hasText ? (
+        <Label
+          embedded
+          text={label}
+          supportingText={supportingText}
+          required={required}
+          htmlFor={inputId}
+          style={styles.text}
+          labelStyle={[styles.label, isDisabled && styles.labelDisabled]}
+          supportingStyle={[styles.description, isDisabled && styles.descriptionDisabled]}
+        />
+      ) : null}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignSelf: 'flex-start',
+    maxWidth: '100%',
+  },
+  pressableReset: {
+    outlineWidth: 0,
+    outlineStyle: 'solid',
+    outlineColor: colors.transparent,
+    outlineOffset: 0,
+  },
+  wrapperWithLabel: {
+    gap: spacing.md,
+  },
+  wrapperWithSupporting: {
+    alignItems: 'flex-start',
+  },
+  wrapperDisabled: {
+    opacity: 1,
+  },
+  boxHost: {
+    position: 'relative',
+    overflow: 'visible',
+    flexShrink: 0,
+  },
+  box: {
+    borderWidth: borders.width.thin,
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'visible',
+  },
+  text: {
+    flexShrink: 1,
+    minWidth: spacing.none,
+  },
+  label: {
+    color: colors.checkbox.label,
+    fontWeight: typography.fontWeight.medium,
+  },
+  labelDisabled: {
+    color: colors.checkbox.labelDisabled,
+  },
+  description: {
+    color: colors.checkbox.description,
+    fontWeight: typography.fontWeight.normal,
+  },
+  descriptionDisabled: {
+    color: colors.checkbox.descriptionDisabled,
+  },
+});

package/src/components/Checkbox/index.ts

@@ -0,0 +1,2 @@
+export { Checkbox, CheckboxSize, CheckboxShape, CheckboxState } from './Checkbox';
+export type { CheckboxProps } from './Checkbox';

package/src/components/CreatePassword/CreatePassword.tsx

@@ -0,0 +1,161 @@
+import { useState } from 'react';
+import { Text, View, type StyleProp, type ViewStyle } from 'react-native';
+
+import { Button, ButtonSize, ButtonVariant, IconPosition } from '../Button';
+import { IconName } from '../Icon';
+import { InputField, InputState } from '../InputField';
+import { LoginShell } from '../LoginShell/LoginShell';
+import { RoleCard } from '../LoginShell/RoleCard';
+import {
+  DEFAULT_BACK_AND_SELECT_ROLE,
+  DEFAULT_ROLE_DESCRIPTION,
+  DEFAULT_ROLE_TITLE,
+} from '../LoginShell/login-copy';
+import { loginPageStyles as styles } from '../LoginShell/loginPageStyles';
+
+export type CreatePasswordProps = {
+  brandingAsideAriaLabel?: string;
+  logoSrc?: string;
+  logoAlt?: string;
+  quoteText?: string;
+  quoteAttribution?: string;
+  backButtonLabel?: string;
+  roleTitle?: string;
+  roleDescription?: string;
+  pageTitle?: string;
+  newPasswordLabel?: string;
+  newPasswordPlaceholder?: string;
+  newPasswordHint?: string;
+  confirmPasswordLabel?: string;
+  confirmPasswordPlaceholder?: string;
+  confirmPasswordHint?: string;
+  submitButtonLabel?: string;
+  signUpPromptText?: string;
+  signUpButtonLabel?: string;
+  minLengthPasswordError?: string;
+  passwordMismatchError?: string;
+  onBack?: () => void;
+  onSignUp?: () => void;
+  onSubmit?: (value: { newPassword: string; confirmPassword: string }) => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+export function CreatePassword({
+  brandingAsideAriaLabel,
+  logoSrc,
+  logoAlt,
+  quoteText,
+  quoteAttribution,
+  backButtonLabel = DEFAULT_BACK_AND_SELECT_ROLE,
+  roleTitle = DEFAULT_ROLE_TITLE,
+  roleDescription = DEFAULT_ROLE_DESCRIPTION,
+  pageTitle = 'Create a new Password',
+  newPasswordLabel = 'Enter your New Password',
+  newPasswordPlaceholder = 'Enter your new password',
+  newPasswordHint = '',
+  confirmPasswordLabel = 'Confirm Password',
+  confirmPasswordPlaceholder = 'Johnson7845',
+  confirmPasswordHint = '',
+  submitButtonLabel = 'Submit',
+  signUpPromptText = "Don't you have an account?",
+  signUpButtonLabel = 'Sign up',
+  minLengthPasswordError = 'Use at least 8 characters.',
+  passwordMismatchError = 'Passwords do not match.',
+  onBack,
+  onSignUp,
+  onSubmit,
+  style,
+}: CreatePasswordProps) {
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [submitted, setSubmitted] = useState(false);
+
+  const newPasswordError =
+    submitted && newPassword.length < 8 ? minLengthPasswordError : '';
+  const confirmError =
+    submitted && confirmPassword && confirmPassword !== newPassword
+      ? passwordMismatchError
+      : submitted && !confirmPassword.trim()
+        ? passwordMismatchError
+        : '';
+
+  function submit() {
+    setSubmitted(true);
+    if (newPassword.length < 8 || !confirmPassword.trim() || confirmPassword !== newPassword) {
+      return;
+    }
+    onSubmit?.({ newPassword, confirmPassword });
+  }
+
+  return (
+    <LoginShell
+      brandingAsideAriaLabel={brandingAsideAriaLabel}
+      logoSrc={logoSrc}
+      logoAlt={logoAlt}
+      quoteText={quoteText}
+      quoteAttribution={quoteAttribution}
+      style={style}>
+      <View style={styles.form}>
+        <View style={styles.backWrap}>
+          <Button
+            variant={ButtonVariant.LinkGray}
+            size={ButtonSize.Small}
+            iconPosition={IconPosition.Before}
+            iconName={IconName.ChevronLeft}
+            iconDecorative
+            label={backButtonLabel}
+            onPress={onBack}
+          />
+        </View>
+        <RoleCard title={roleTitle} description={roleDescription} />
+        <Text accessibilityRole="header" style={[styles.pageTitle, styles.pageTitleVerify]}>
+          {pageTitle}
+        </Text>
+        <View style={styles.fields}>
+          <InputField
+            fullWidth
+            fieldType="password"
+            label={newPasswordLabel}
+            placeholder={newPasswordPlaceholder}
+            hint={newPasswordError ? '' : newPasswordHint}
+            value={newPassword}
+            error={newPasswordError}
+            state={newPasswordError ? InputState.Error : InputState.Default}
+            onValueChange={setNewPassword}
+            autoComplete="password"
+          />
+          <InputField
+            fullWidth
+            fieldType="password"
+            label={confirmPasswordLabel}
+            placeholder={confirmPasswordPlaceholder}
+            hint={confirmError ? '' : confirmPasswordHint}
+            value={confirmPassword}
+            error={confirmError}
+            state={confirmError ? InputState.Error : InputState.Default}
+            onValueChange={setConfirmPassword}
+            autoComplete="password"
+          />
+          <View style={styles.submit}>
+            <Button
+              fullWidth
+              variant={ButtonVariant.Primary}
+              size={ButtonSize.Large}
+              label={submitButtonLabel}
+              onPress={submit}
+            />
+          </View>
+          <View style={[styles.inlineRow, styles.inlineCentered]}>
+            <Text style={styles.inlinePrefix}>{signUpPromptText}</Text>
+            <Button
+              variant={ButtonVariant.LinkPrimary}
+              size={ButtonSize.Small}
+              label={signUpButtonLabel}
+              onPress={onSignUp}
+            />
+          </View>
+        </View>
+      </View>
+    </LoginShell>
+  );
+}

package/src/components/CreatePassword/index.ts

@@ -0,0 +1,2 @@
+export { CreatePassword } from './CreatePassword';
+export type { CreatePasswordProps } from './CreatePassword';