@proulr/sdui-components 0.1.0

package/src/renderer/blocks/SduiNativeAdBlock.tsx

@@ -0,0 +1,201 @@
+import React, { useEffect, useState } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import {
+  DEFAULT_NATIVE_AD_ASPECT_RATIO,
+  DEFAULT_NATIVE_AD_PLACEMENT,
+  getNativeAdCatalog,
+} from '../ads/native-ad-catalog';
+import { colors, m3Colors, m3Shape, spacing } from '../theme/proulr-theme';
+import type { SduiBlockRenderProps } from './SduiPrimitiveBlocks';
+
+type NativeAdModule = typeof import('react-native-google-mobile-ads');
+type LoadedNativeAd = Awaited<ReturnType<NativeAdModule['NativeAd']['createForAdRequest']>>;
+
+function resolveBlockWidth(props: Record<string, unknown>): number | undefined {
+  if (typeof props.width === 'number' && props.width > 0) return props.width;
+  return undefined;
+}
+
+function resolvePlacement(props: Record<string, unknown>): string {
+  return typeof props.placement === 'string' && props.placement.length > 0
+    ? props.placement
+    : DEFAULT_NATIVE_AD_PLACEMENT;
+}
+
+function resolveAspectRatio(placement: string, props: Record<string, unknown>): number {
+  if (typeof props.aspect_ratio === 'number' && props.aspect_ratio > 0) {
+    return props.aspect_ratio;
+  }
+
+  const catalog = getNativeAdCatalog();
+  const placementConfig = catalog?.getPlacementConfig?.(placement);
+  return placementConfig?.aspectRatio ?? DEFAULT_NATIVE_AD_ASPECT_RATIO;
+}
+
+export function SduiNativeAdBlock({ block }: SduiBlockRenderProps) {
+  const catalog = getNativeAdCatalog();
+  const placement = resolvePlacement(block.props);
+  const width = resolveBlockWidth(block.props);
+  const aspectRatio = resolveAspectRatio(placement, block.props);
+
+  const [adsModule, setAdsModule] = useState<NativeAdModule | null>(null);
+  const [nativeAd, setNativeAd] = useState<LoadedNativeAd | null>(null);
+  const [failed, setFailed] = useState(false);
+
+  useEffect(() => {
+    if (!catalog?.isEnabled()) return;
+
+    let cancelled = false;
+
+    void (async () => {
+      try {
+        const mod = await import('react-native-google-mobile-ads');
+        if (cancelled) return;
+
+        setAdsModule(mod);
+        const adUnitId = catalog.resolveAdUnitId(placement, mod.TestIds.NATIVE);
+        const ad = await mod.NativeAd.createForAdRequest(adUnitId, {
+          aspectRatio: mod.NativeMediaAspectRatio.PORTRAIT,
+          adChoicesPlacement: mod.NativeAdChoicesPlacement.TOP_RIGHT,
+          startVideoMuted: true,
+        });
+
+        if (cancelled) {
+          ad.destroy();
+          return;
+        }
+
+        setNativeAd(ad);
+      } catch {
+        if (!cancelled) setFailed(true);
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [catalog, placement]);
+
+  useEffect(() => {
+    if (!nativeAd) return;
+    return () => {
+      nativeAd.destroy();
+    };
+  }, [nativeAd]);
+
+  if (!catalog?.isEnabled()) {
+    return null;
+  }
+
+  const cardStyle = [
+    styles.card,
+    { aspectRatio },
+    width != null ? { width } : styles.flexCard,
+  ];
+
+  if (failed) {
+    return <View style={[styles.placeholder, cardStyle]} />;
+  }
+
+  if (!adsModule || !nativeAd) {
+    return <View style={[styles.placeholder, styles.loading, cardStyle]} />;
+  }
+
+  const { NativeAdView, NativeAsset, NativeAssetType, NativeMediaView } = adsModule;
+
+  return (
+    <NativeAdView nativeAd={nativeAd} style={cardStyle}>
+      <NativeMediaView resizeMode="cover" style={styles.media} />
+      <LinearGradient colors={['transparent', 'rgba(0,0,0,0.85)']} style={styles.shade} />
+      <View style={styles.adBadge}>
+        <Text style={styles.adBadgeText}>Anúncio</Text>
+      </View>
+      {nativeAd.headline ? (
+        <NativeAsset assetType={NativeAssetType.HEADLINE}>
+          <Text style={styles.headline} numberOfLines={2}>
+            {nativeAd.headline}
+          </Text>
+        </NativeAsset>
+      ) : null}
+      {nativeAd.callToAction ? (
+        <NativeAsset assetType={NativeAssetType.CALL_TO_ACTION}>
+          <Text style={styles.cta} numberOfLines={1}>
+            {nativeAd.callToAction}
+          </Text>
+        </NativeAsset>
+      ) : null}
+    </NativeAdView>
+  );
+}
+
+const styles = StyleSheet.create({
+  flexCard: {
+    flex: 1,
+  },
+  card: {
+    borderRadius: m3Shape.cornerMedium,
+    overflow: 'hidden',
+    backgroundColor: m3Colors.surfaceContainerHigh,
+    borderWidth: 1,
+    borderColor: m3Colors.outline,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.22,
+    shadowRadius: 2,
+    elevation: 1,
+  },
+  placeholder: {
+    borderRadius: m3Shape.cornerMedium,
+    backgroundColor: m3Colors.surfaceContainerHigh,
+    borderWidth: 1,
+    borderColor: m3Colors.outlineVariant,
+  },
+  loading: {
+    opacity: 0.55,
+  },
+  media: {
+    ...StyleSheet.absoluteFill,
+  },
+  shade: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    height: 88,
+  },
+  adBadge: {
+    position: 'absolute',
+    top: spacing.sm,
+    left: spacing.sm,
+    backgroundColor: m3Colors.surfaceContainerHighest,
+    paddingHorizontal: spacing.sm,
+    paddingVertical: 3,
+    borderRadius: m3Shape.cornerSmall,
+  },
+  adBadgeText: {
+    color: colors.onSurfaceVariant,
+    fontSize: 10,
+    fontWeight: '700',
+    letterSpacing: 0.4,
+    textTransform: 'uppercase',
+  },
+  headline: {
+    position: 'absolute',
+    left: spacing.sm,
+    right: spacing.sm,
+    bottom: spacing.xl + spacing.sm,
+    color: m3Colors.onSurface,
+    fontSize: 12,
+    fontWeight: '700',
+  },
+  cta: {
+    position: 'absolute',
+    left: spacing.sm,
+    right: spacing.sm,
+    bottom: spacing.sm,
+    color: m3Colors.secondary,
+    fontSize: 11,
+    fontWeight: '600',
+  },
+});

package/src/renderer/blocks/SduiNativeAdBlock.web.tsx

@@ -0,0 +1,6 @@
+import type { SduiBlockRenderProps } from './SduiPrimitiveBlocks';
+
+/** Web stub — native ads require a native build. */
+export function SduiNativeAdBlock(_props: SduiBlockRenderProps) {
+  return null;
+}

package/src/renderer/blocks/SduiNativeDomainBlocks.tsx

@@ -0,0 +1,141 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import type { SduiBlock } from '@proulr/sdui-contract';
+import { useSduiHybridRenderer } from '../sdui-hybrid-renderer-context';
+import { SduiLayoutDebugFrame } from '../sdui-layout-debug';
+import type { SduiBlockRenderProps } from './SduiPrimitiveBlocks';
+
+function readStringProp(block: SduiBlock, key: string): string | undefined {
+  const value = block.props[key];
+  return typeof value === 'string' ? value : undefined;
+}
+
+function NativeBlockShell({
+  block,
+  data,
+  onAction,
+  rendererKey,
+  fallbackLabel,
+}: SduiBlockRenderProps & {
+  rendererKey:
+    | 'renderFlashInboxList'
+    | 'renderChatInboxList'
+    | 'renderChatThread'
+    | 'renderSocialPostFeed'
+    | 'renderThoughtFeed'
+    | 'renderVerticalVideoPager'
+    | 'renderProfileView'
+    | 'renderProfileSelf'
+    | 'renderProfileSetup'
+    | 'renderProfileOnboarding'
+    | 'renderAlbumGrid'
+    | 'renderAlbumDetail'
+    | 'renderNewPostComposer'
+    | 'renderPostComments'
+    | 'renderSocialProfile'
+    | 'renderSettingsHome'
+    | 'renderDiscoverBrowseLocation';
+  fallbackLabel: string;
+}) {
+  const hybrid = useSduiHybridRenderer();
+  const renderer = hybrid[rendererKey];
+  if (typeof renderer === 'function') {
+    return (
+      <SduiLayoutDebugFrame layer="native" extra={block.type} style={{ flex: 1, minHeight: 0 }}>
+        {renderer({
+          block,
+          data,
+          onAction,
+          dataRef: readStringProp(block, 'data_ref'),
+          conversationIdRef: readStringProp(block, 'conversation_id_ref'),
+          peerIdRef: readStringProp(block, 'peer_id_ref'),
+          peerNameRef: readStringProp(block, 'peer_name_ref'),
+          handleRef: readStringProp(block, 'handle_ref'),
+          postIdRef: readStringProp(block, 'post_id_ref'),
+          albumIdRef: readStringProp(block, 'album_id_ref'),
+          profileIdRef: readStringProp(block, 'profile_id_ref'),
+        })}
+      </SduiLayoutDebugFrame>
+    );
+  }
+
+  return (
+    <View style={{ padding: 16 }}>
+      <Text>{fallbackLabel}</Text>
+    </View>
+  );
+}
+
+export function SduiFlashInboxListBlock(props: SduiBlockRenderProps) {
+  return <NativeBlockShell {...props} rendererKey="renderFlashInboxList" fallbackLabel="Flashes" />;
+}
+
+export function SduiChatInboxListBlock(props: SduiBlockRenderProps) {
+  return <NativeBlockShell {...props} rendererKey="renderChatInboxList" fallbackLabel="Chat" />;
+}
+
+export function SduiChatThreadBlock(props: SduiBlockRenderProps) {
+  return <NativeBlockShell {...props} rendererKey="renderChatThread" fallbackLabel="Conversa" />;
+}
+
+export function SduiSocialPostFeedBlock(props: SduiBlockRenderProps) {
+  return <NativeBlockShell {...props} rendererKey="renderSocialPostFeed" fallbackLabel="Feed" />;
+}
+
+export function SduiThoughtFeedBlock(props: SduiBlockRenderProps) {
+  return <NativeBlockShell {...props} rendererKey="renderThoughtFeed" fallbackLabel="Vibes" />;
+}
+
+export function SduiVerticalVideoPagerBlock(props: SduiBlockRenderProps) {
+  return <NativeBlockShell {...props} rendererKey="renderVerticalVideoPager" fallbackLabel="Clips" />;
+}
+
+export function SduiProfileViewBlock(props: SduiBlockRenderProps) {
+  return <NativeBlockShell {...props} rendererKey="renderProfileView" fallbackLabel="Perfil" />;
+}
+
+export function SduiProfileSelfBlock(props: SduiBlockRenderProps) {
+  return <NativeBlockShell {...props} rendererKey="renderProfileSelf" fallbackLabel="Meu perfil" />;
+}
+
+export function SduiProfileSetupBlock(props: SduiBlockRenderProps) {
+  return <NativeBlockShell {...props} rendererKey="renderProfileSetup" fallbackLabel="Editar perfil" />;
+}
+
+export function SduiProfileOnboardingBlock(props: SduiBlockRenderProps) {
+  return <NativeBlockShell {...props} rendererKey="renderProfileOnboarding" fallbackLabel="Onboarding" />;
+}
+
+export function SduiAlbumGridBlock(props: SduiBlockRenderProps) {
+  return <NativeBlockShell {...props} rendererKey="renderAlbumGrid" fallbackLabel="Álbuns" />;
+}
+
+export function SduiAlbumDetailBlock(props: SduiBlockRenderProps) {
+  return <NativeBlockShell {...props} rendererKey="renderAlbumDetail" fallbackLabel="Álbum" />;
+}
+
+export function SduiNewPostComposerBlock(props: SduiBlockRenderProps) {
+  return <NativeBlockShell {...props} rendererKey="renderNewPostComposer" fallbackLabel="Nova publicação" />;
+}
+
+export function SduiPostCommentsBlock(props: SduiBlockRenderProps) {
+  return <NativeBlockShell {...props} rendererKey="renderPostComments" fallbackLabel="Comentários" />;
+}
+
+export function SduiSocialProfileBlock(props: SduiBlockRenderProps) {
+  return <NativeBlockShell {...props} rendererKey="renderSocialProfile" fallbackLabel="Perfil social" />;
+}
+
+export function SduiSettingsHomeBlock(props: SduiBlockRenderProps) {
+  return <NativeBlockShell {...props} rendererKey="renderSettingsHome" fallbackLabel="Configurações" />;
+}
+
+export function SduiDiscoverBrowseLocationBlock(props: SduiBlockRenderProps) {
+  return (
+    <NativeBlockShell
+      {...props}
+      rendererKey="renderDiscoverBrowseLocation"
+      fallbackLabel="Caçar"
+    />
+  );
+}

package/src/renderer/blocks/SduiPrimitiveBlocks.tsx

@@ -0,0 +1,158 @@
+import React from 'react';
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
+import type { SduiBlock } from '@proulr/sdui-contract';
+import { AppButton } from '../ui/AppButton';
+import { colors, m3Type, spacing } from '../theme/proulr-theme';
+import {
+  resolveGapProp,
+  resolvePaddingProp,
+  resolveTextStyleProps,
+  resolveViewStyleProps,
+} from '../theme/resolve-style-props';
+import { SduiLayoutDebugFrame } from '../sdui-layout-debug';
+import { useSduiChromeScroll } from '../sdui-chrome-scroll-context';
+
+export type SduiBlockRenderProps = {
+  block: SduiBlock;
+  data: Record<string, unknown>;
+  onAction: (actionId: string, vars?: Record<string, string>) => void;
+  children?: React.ReactNode;
+};
+
+const textVariants = ['headline', 'title', 'body', 'label'] as const;
+
+export function SduiTextBlock({ block }: SduiBlockRenderProps) {
+  const text = typeof block.props.text === 'string' ? block.props.text : '';
+  const variant =
+    typeof block.props.variant === 'string' &&
+    (textVariants as readonly string[]).includes(block.props.variant)
+      ? block.props.variant
+      : 'body';
+
+  return (
+    <Text
+      style={[
+        { color: colors.onSurface },
+        resolveTextStyleProps(block.props.style as Record<string, unknown>, variant),
+      ]}
+    >
+      {text}
+    </Text>
+  );
+}
+
+export function SduiColumnBlock({ block, children }: SduiBlockRenderProps) {
+  const gap = resolveGapProp(block.props.gap, spacing.sm);
+  const padding = resolvePaddingProp(block.props.padding, 0);
+  const fillHeight = gap === 0 && padding === 0;
+  const childList = React.Children.toArray(children);
+  const singleFillChild = fillHeight && childList.length === 1;
+
+  return (
+    <SduiLayoutDebugFrame
+      layer="column"
+      extra={singleFillChild ? 'fill×1' : `children:${childList.length}`}
+      style={[
+        { gap, padding, ...(fillHeight ? { flex: 1, minHeight: 0, alignSelf: 'stretch' } : null) },
+        resolveViewStyleProps(block.props.style as Record<string, unknown>),
+      ]}
+    >
+      {singleFillChild ? (
+        <View style={{ flex: 1, minHeight: 0, alignSelf: 'stretch' }}>{childList[0]}</View>
+      ) : (
+        children
+      )}
+    </SduiLayoutDebugFrame>
+  );
+}
+
+export function SduiRowBlock({ block, children }: SduiBlockRenderProps) {
+  const gap = resolveGapProp(block.props.gap, spacing.sm);
+  return (
+    <View
+      style={[
+        { flexDirection: 'row', gap },
+        resolveViewStyleProps(block.props.style as Record<string, unknown>),
+      ]}
+    >
+      {children}
+    </View>
+  );
+}
+
+export function SduiScrollBlock({ block, children }: SduiBlockRenderProps) {
+  const chromeScroll = useSduiChromeScroll();
+  const padding = resolvePaddingProp(block.props.padding, spacing.sm);
+  const gap = resolveGapProp(block.props.gap, spacing.md);
+  const blockContentStyle = chromeScroll
+    ? { paddingHorizontal: padding, gap }
+    : { padding, gap };
+
+  return (
+    <SduiLayoutDebugFrame layer="scroll" style={{ flex: 1, minHeight: 0, alignSelf: 'stretch' }}>
+      <ScrollView
+        style={[styles.scroll, resolveViewStyleProps(block.props.style as Record<string, unknown>)]}
+        contentContainerStyle={
+          chromeScroll
+            ? [chromeScroll.contentContainerStyle, blockContentStyle]
+            : blockContentStyle
+        }
+        {...(chromeScroll?.scrollInsetProps ?? {})}
+        showsVerticalScrollIndicator={false}
+      >
+        {children}
+      </ScrollView>
+    </SduiLayoutDebugFrame>
+  );
+}
+
+export function SduiButtonBlock({ block, onAction }: SduiBlockRenderProps) {
+  const label = typeof block.props.label === 'string' ? block.props.label : 'Ação';
+  const actionId = typeof block.props.action_id === 'string' ? block.props.action_id : '';
+  const variant =
+    typeof block.props.variant === 'string'
+      ? (block.props.variant as 'primary' | 'secondary' | 'ghost' | 'outline' | 'danger')
+      : 'primary';
+
+  return (
+    <View style={resolveViewStyleProps(block.props.style as Record<string, unknown>)}>
+      <AppButton
+        label={label}
+        variant={variant}
+        onPress={() => actionId && onAction(actionId)}
+      />
+    </View>
+  );
+}
+
+export function SduiSpacerBlock({ block }: SduiBlockRenderProps) {
+  const height = typeof block.props.height === 'number' ? block.props.height : spacing.md;
+  return <View style={{ height }} />;
+}
+
+export function SduiInfoBannerBlock({ block }: SduiBlockRenderProps) {
+  const message = typeof block.props.message === 'string' ? block.props.message : '';
+  return (
+    <View style={[styles.banner, resolveViewStyleProps(block.props.style as Record<string, unknown>)]}>
+      <Text style={styles.bannerText}>{message}</Text>
+    </View>
+  );
+}
+
+export function SduiUnknownBlock({ block }: SduiBlockRenderProps) {
+  if (!__DEV__) return null;
+  return <Text style={styles.unknown}>Bloco desconhecido: {block.type}</Text>;
+}
+
+const styles = StyleSheet.create({
+  scroll: { flex: 1, minHeight: 0 },
+  banner: {
+    padding: spacing.md,
+    backgroundColor: colors.surface,
+    borderRadius: spacing.sm,
+    borderWidth: 1,
+    borderColor: colors.border,
+  },
+  bannerText: { ...m3Type.body, color: colors.onSurfaceVariant },
+  unknown: { ...m3Type.label, color: colors.onSurfaceVariant, padding: spacing.md },
+});

package/src/renderer/blocks/SduiSocialBlocks.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import type { SduiBlock } from '@proulr/sdui-contract';
+import { resolveDataRefString } from '../lib/resolve-data-ref';
+import { useSduiHybridRenderer } from '../sdui-hybrid-renderer-context';
+import type { SduiBlockRenderProps } from './SduiPrimitiveBlocks';
+
+function readStringProp(block: SduiBlock, key: string): string | undefined {
+  const value = block.props[key];
+  return typeof value === 'string' ? value : undefined;
+}
+
+export function SduiStoryRailBlock({ block }: SduiBlockRenderProps) {
+  const hybrid = useSduiHybridRenderer();
+  const surface = readStringProp(block, 'surface') === 'vibes' ? 'vibes' : 'discover';
+
+  if (hybrid.renderStoryRail) {
+    return <>{hybrid.renderStoryRail({ surface })}</>;
+  }
+
+  return (
+    <View style={styles.placeholder}>
+      <Text style={styles.placeholderText}>StoryRail ({surface})</Text>
+    </View>
+  );
+}
+
+export function SduiProfileCompletionBannerBlock({ block, data, onAction }: SduiBlockRenderProps) {
+  const hybrid = useSduiHybridRenderer();
+  const percentRef = readStringProp(block, 'percent_ref') ?? 'profile_completion_percent';
+  const percent = Number(resolveDataRefString(data, percentRef) || '0');
+  const dismissActionId = readStringProp(block, 'dismiss_action_id');
+  const completeActionId = readStringProp(block, 'complete_action_id');
+
+  if (hybrid.renderProfileCompletionBanner) {
+    return (
+      <>
+        {hybrid.renderProfileCompletionBanner({
+          percent,
+          onDismiss: () => dismissActionId && onAction(dismissActionId),
+          onComplete: () => completeActionId && onAction(completeActionId),
+        })}
+      </>
+    );
+  }
+
+  if (percent <= 0) return null;
+
+  return (
+    <View style={styles.placeholder}>
+      <Text style={styles.placeholderText}>Complete seu perfil ({percent}%)</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  placeholder: {
+    padding: 12,
+  },
+  placeholderText: {
+    color: '#A3A3A3',
+    fontSize: 13,
+  },
+});

package/src/renderer/index.ts

@@ -0,0 +1,45 @@
+export { SduiScreenRenderer } from './SduiScreenRenderer';
+export {
+  resolveSduiBlockComponent,
+  registerSduiBlockComponent,
+  renderBlockTree,
+} from './sdui-component-registry';
+export type { SduiBlockRenderProps } from './blocks/SduiPrimitiveBlocks';
+export {
+  SduiHybridRendererProvider,
+  useSduiHybridRenderer,
+} from './sdui-hybrid-renderer-context';
+export {
+  SduiChromeScrollProvider,
+  useSduiChromeScroll,
+} from './sdui-chrome-scroll-context';
+export type {
+  SduiChromeScrollConfig,
+  SduiChromeScrollInsetProps,
+  SduiChromeScrollInsets,
+} from './sdui-chrome-scroll-context';
+export type {
+  SduiHybridDiscoverMapProps,
+  SduiHybridDiscoverProfileCardProps,
+  SduiHybridProfileCompletionBannerProps,
+  SduiHybridRenderers,
+  SduiHybridStoryRailProps,
+  SduiNativeBlockRenderProps,
+} from './sdui-hybrid-renderer-context';
+export * from './theme/proulr-theme';
+export { resolveViewStyleProps, resolveTextStyleProps } from './theme/resolve-style-props';
+export {
+  formatDistanceLabel,
+  getPresenceStatus,
+  profileAgeFromBirthDate,
+} from './lib/discover-profile-formatters';
+export type { DiscoverNearbyProfileWire } from './lib/discover-profile-formatters';
+export {
+  configureNativeAdCatalog,
+  getNativeAdCatalog,
+  DEFAULT_NATIVE_AD_PLACEMENT,
+  DEFAULT_NATIVE_AD_ASPECT_RATIO,
+} from './ads/native-ad-catalog';
+export type { NativeAdCatalog, NativeAdPlacementConfig } from './ads/native-ad-catalog';
+export * from './ui';
+export { brToISO, isValidDateBR, maskDateBR } from './lib/brazilian-date-input';

package/src/renderer/lib/brazilian-date-input.ts

@@ -0,0 +1,22 @@
+export function maskDateBR(input: string) {
+  const digits = input.replace(/\D/g, '').slice(0, 8);
+  const parts: string[] = [];
+  if (digits.length > 0) parts.push(digits.slice(0, 2));
+  if (digits.length > 2) parts.push(digits.slice(2, 4));
+  if (digits.length > 4) parts.push(digits.slice(4, 8));
+  return parts.join('/');
+}
+
+export function isValidDateBR(value: string) {
+  const m = value.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
+  if (!m) return false;
+  const [, dd, mm, yyyy] = m.map(Number) as unknown as [string, number, number, number];
+  const d = new Date(yyyy, mm - 1, dd);
+  return d.getFullYear() === yyyy && d.getMonth() === mm - 1 && d.getDate() === dd;
+}
+
+export function brToISO(value: string): string | null {
+  if (!isValidDateBR(value)) return null;
+  const [dd, mm, yyyy] = value.split('/');
+  return `${yyyy}-${mm}-${dd}`;
+}