@proulr/sdui-components 0.1.45 → 0.1.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proulr/sdui-components",
-  "version": "0.1.45",
+  "version": "0.1.46",
   "type": "module",
   "main": "./src/renderer/index.ts",
   "types": "./src/renderer/index.ts",

package/src/renderer/blocks/SduiQrCodeBlock.tsx

@@ -1,18 +1,11 @@
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-import QRCode from 'react-native-qrcode-svg';
-import { gradients, m3Colors, m3Shape, m3Type, spacing } from '../theme/proulr-theme';
 import { resolveViewStyleProps } from '../theme/resolve-style-props';
+import { BrandQrNametag } from '../ui/brand-qr-code';
 import type { SduiBlockRenderProps } from './SduiPrimitiveBlocks';
 
-// `require` (padrão RN para assets estáticos) — import ESM de .png exigiria um
-// ambient d.ts que consumers compilando o source em node_modules não enxergam.
-const brandMarkAsset = require('../assets/proulr-brand-mark.png') as number;
-
 /**
- * Nametag de QR estilo "cartão de convite" (ref. Instagram): cartão claro
- * (inverseSurface) com QR customizado da marca — módulos no gradiente Proulr
- * (roxo → fúcsia) e brand mark no centro (ECC alto para manter a leitura).
+ * Bloco wire do QR de marca — delega para o BrandQrNametag (componente único
+ * de QR do produto, usado também fora do SDUI, ex.: convite de grupo no chat).
  * Wire: `value` = conteúdo do QR, `size` em px, `label` = texto sob o código.
  */
 export function SduiQrCodeBlock({ block }: SduiBlockRenderProps) {
@@ -23,41 +16,11 @@ export function SduiQrCodeBlock({ block }: SduiBlockRenderProps) {
   const label = typeof block.props.label === 'string' ? block.props.label : '';
 
   return (
-    <View
-      style={[styles.card, resolveViewStyleProps(block.props.style as Record<string, unknown>)]}
-    >
-      <QRCode
-        value={value}
-        size={size}
-        backgroundColor={m3Colors.inverseSurface}
-        enableLinearGradient
-        linearGradient={[...gradients.brand]}
-        ecl="H"
-        logo={brandMarkAsset}
-        logoSize={Math.round(size * 0.22)}
-        logoBackgroundColor={m3Colors.inverseSurface}
-        logoMargin={Math.max(3, Math.round(size * 0.02))}
-        logoBorderRadius={m3Shape.cornerMedium}
-      />
-      {label ? <Text style={styles.label}>{label}</Text> : null}
-    </View>
+    <BrandQrNametag
+      value={value}
+      size={size}
+      label={label || undefined}
+      style={resolveViewStyleProps(block.props.style as Record<string, unknown>)}
+    />
   );
 }
-
-const styles = StyleSheet.create({
-  card: {
-    alignSelf: 'center',
-    alignItems: 'center',
-    gap: spacing.lg,
-    backgroundColor: m3Colors.inverseSurface,
-    borderRadius: m3Shape.cornerExtraLarge,
-    paddingVertical: spacing.xl,
-    paddingHorizontal: spacing.xl,
-  },
-  label: {
-    ...m3Type.title,
-    color: m3Colors.inverseOnSurface,
-    letterSpacing: 2,
-    textTransform: 'uppercase',
-  },
-});

package/src/renderer/ui/brand-qr-code.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { StyleSheet, Text, View, type StyleProp, type ViewStyle } from 'react-native';
+import QRCode from 'react-native-qrcode-svg';
+import { gradients, m3Colors, m3Shape, m3Type, spacing } from '../theme/proulr-theme';
+
+// `require` (padrão RN para assets estáticos) — import ESM de .png exigiria um
+// ambient d.ts que consumers compilando o source em node_modules não enxergam.
+const brandMarkAsset = require('../assets/proulr-brand-mark.png') as number;
+
+export type BrandQrCodeProps = {
+  value: string;
+  size?: number;
+};
+
+/**
+ * QR customizado da marca (ref. QR do Instagram): módulos no gradiente Proulr
+ * (roxo → fúcsia) sobre fundo claro e brand mark no centro, com ECC "H" para
+ * manter a leitura mesmo com o logo cobrindo o miolo. Componente único para
+ * todo QR de produto (convidar amigos, convite de grupo, etc.).
+ */
+export function BrandQrCode({ value, size = 200 }: BrandQrCodeProps) {
+  return (
+    <QRCode
+      value={value}
+      size={size}
+      backgroundColor={m3Colors.inverseSurface}
+      enableLinearGradient
+      linearGradient={[...gradients.brand]}
+      ecl="H"
+      logo={brandMarkAsset}
+      logoSize={Math.round(size * 0.22)}
+      logoBackgroundColor={m3Colors.inverseSurface}
+      logoMargin={Math.max(3, Math.round(size * 0.02))}
+      logoBorderRadius={m3Shape.cornerMedium}
+    />
+  );
+}
+
+export type BrandQrNametagProps = BrandQrCodeProps & {
+  label?: string;
+  style?: StyleProp<ViewStyle>;
+};
+
+/**
+ * Nametag: cartão claro (inverseSurface) com o BrandQrCode e rótulo opcional
+ * (ex.: @handle). É o "cartão de convite" padrão exibido em telas e bubbles.
+ */
+export function BrandQrNametag({ value, size = 200, label, style }: BrandQrNametagProps) {
+  const cardPadding = size >= 160 ? spacing.xl : spacing.md;
+  return (
+    <View style={[styles.card, { padding: cardPadding }, style]}>
+      <BrandQrCode value={value} size={size} />
+      {label ? <Text style={styles.label}>{label}</Text> : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    alignSelf: 'center',
+    alignItems: 'center',
+    gap: spacing.lg,
+    backgroundColor: m3Colors.inverseSurface,
+    borderRadius: m3Shape.cornerExtraLarge,
+  },
+  label: {
+    ...m3Type.title,
+    color: m3Colors.inverseOnSurface,
+    letterSpacing: 2,
+    textTransform: 'uppercase',
+  },
+});

package/src/renderer/ui/index.ts

@@ -1,4 +1,10 @@
 export { AppButton } from './AppButton';
+export {
+  BrandQrCode,
+  BrandQrNametag,
+  type BrandQrCodeProps,
+  type BrandQrNametagProps,
+} from './brand-qr-code';
 export { AppChromeIconButton } from './AppChromeIconButton';
 export { AppLoadingSpinner } from './AppLoadingSpinner';
 export { AuthStepShell } from './AuthStepShell';