@ankhorage/zora 2.5.5 → 2.6.1

package/src/patterns/auth/oauthProviders.ts

@@ -0,0 +1,79 @@
+import type { OAuthProviderIconSpec } from './types';
+
+export const DEFAULT_OAUTH_PROVIDER_ICONS = {
+  apple: { provider: 'FontAwesome', name: 'apple' },
+  azure: { provider: 'FontAwesome5', name: 'microsoft' },
+  bitbucket: { provider: 'FontAwesome', name: 'bitbucket' },
+  discord: { provider: 'FontAwesome5', name: 'discord' },
+  facebook: { provider: 'FontAwesome', name: 'facebook' },
+  figma: { provider: 'FontAwesome5', name: 'figma' },
+  github: { provider: 'FontAwesome', name: 'github' },
+  gitlab: { provider: 'FontAwesome5', name: 'gitlab' },
+  google: { provider: 'FontAwesome', name: 'google' },
+  linkedin: { provider: 'FontAwesome', name: 'linkedin' },
+  microsoft: { provider: 'FontAwesome5', name: 'microsoft' },
+  slack: { provider: 'FontAwesome5', name: 'slack' },
+  spotify: { provider: 'FontAwesome', name: 'spotify' },
+  twitch: { provider: 'FontAwesome5', name: 'twitch' },
+  twitter: { provider: 'FontAwesome', name: 'twitter' },
+  x: { provider: 'FontAwesome6', name: 'x-twitter' },
+  zoom: { provider: 'FontAwesome5', name: 'video' },
+} as const satisfies Record<string, OAuthProviderIconSpec>;
+
+const DEFAULT_OAUTH_PROVIDER_LABELS = {
+  apple: 'Apple',
+  azure: 'Microsoft',
+  bitbucket: 'Bitbucket',
+  discord: 'Discord',
+  facebook: 'Facebook',
+  figma: 'Figma',
+  github: 'GitHub',
+  gitlab: 'GitLab',
+  google: 'Google',
+  kakao: 'Kakao',
+  keycloak: 'Keycloak',
+  linkedin: 'LinkedIn',
+  microsoft: 'Microsoft',
+  notion: 'Notion',
+  slack: 'Slack',
+  spotify: 'Spotify',
+  twitch: 'Twitch',
+  twitter: 'Twitter',
+  workos: 'WorkOS',
+  x: 'X',
+  zoom: 'Zoom',
+} as const satisfies Record<string, string>;
+
+const oauthProviderLabels: Partial<Record<string, string>> = DEFAULT_OAUTH_PROVIDER_LABELS;
+
+export function resolveOAuthProviderIcon(providerId: string): OAuthProviderIconSpec | undefined {
+  const normalizedProviderId = normalizeOAuthProviderId(providerId);
+
+  return DEFAULT_OAUTH_PROVIDER_ICONS[
+    normalizedProviderId as keyof typeof DEFAULT_OAUTH_PROVIDER_ICONS
+  ];
+}
+
+export function resolveOAuthProviderLabel(providerId: string): string {
+  const normalizedProviderId = normalizeOAuthProviderId(providerId);
+  const knownLabel = oauthProviderLabels[normalizedProviderId];
+
+  return knownLabel ?? titleCaseProviderId(normalizedProviderId);
+}
+
+function normalizeOAuthProviderId(providerId: string): string {
+  return providerId.trim().toLowerCase();
+}
+
+function titleCaseProviderId(providerId: string): string {
+  const words = providerId
+    .split(/[-_\s]+/u)
+    .map((word) => word.trim())
+    .filter((word) => word.length > 0);
+
+  if (words.length === 0) {
+    return 'Provider';
+  }
+
+  return words.map((word) => `${word.charAt(0).toUpperCase()}${word.slice(1)}`).join(' ');
+}

package/src/patterns/auth/types.ts

@@ -1,5 +1,6 @@
 import type React from 'react';
 
+import type { ButtonProps } from '../../components/button';
 import type { FormFieldConfig, FormValues } from '../../components/form';
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
@@ -65,3 +66,45 @@ export interface OtpFormProps extends AuthFormBaseProps {
   onSubmit: (values: OtpFormValues) => void | Promise<void>;
   onResend?: () => void | Promise<void>;
 }
+
+export interface OAuthProviderIconSpec {
+  name: string;
+  provider?: string;
+  size?: number | string;
+  color?: string;
+}
+
+export interface OAuthProviderItem {
+  id: string;
+  label?: React.ReactNode;
+  icon?: OAuthProviderIconSpec;
+  disabled?: boolean;
+  loading?: boolean;
+}
+
+export interface OAuthProviderButtonProps extends ZoraBaseProps {
+  providerId: string;
+  label?: React.ReactNode;
+  icon?: OAuthProviderIconSpec;
+  disabled?: boolean;
+  loading?: boolean;
+  fullWidth?: boolean;
+  size?: ButtonProps['size'];
+  variant?: ButtonProps['variant'];
+  color?: ButtonProps['color'];
+  onPress?: (providerId: string) => void | Promise<void>;
+}
+
+export type OAuthProviderListLayout = 'stack' | 'inline';
+
+export interface OAuthProviderListProps extends ZoraBaseProps {
+  providers: readonly OAuthProviderItem[];
+  disabled?: boolean;
+  loading?: boolean;
+  fullWidth?: boolean;
+  layout?: OAuthProviderListLayout;
+  size?: ButtonProps['size'];
+  variant?: ButtonProps['variant'];
+  color?: ButtonProps['color'];
+  onProviderPress?: (providerId: string) => void | Promise<void>;
+}