@duro-app/ui 5.14.0 → 5.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "5.14.0",
+  "version": "5.16.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -91,11 +91,13 @@
   },
   "dependencies": {
     "@tanstack/react-virtual": "^3.14.6",
-    "@duro-app/tokens": "^5.14.0"
+    "qrcode": "^1.5.4",
+    "@duro-app/tokens": "^5.16.0"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",
     "@hookform/resolvers": "^5.0.0",
+    "@types/qrcode": "^1.5.6",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^4.0.0",

package/src/components/QrCode/QrCode.meta.ts

@@ -0,0 +1,18 @@
+import type {ComponentMeta} from '../component-meta'
+
+export const meta: ComponentMeta = {
+  description:
+    'A QR code for another device to scan: dark modules on a fixed light square, as wide as its container, announced by its label as one image. The same on web and native.',
+  whenToUse: [
+    'Pairing or sign-in by scanning from a second device',
+    'Handing a URL or a short secret to a phone camera',
+  ],
+  whenNotToUse: [
+    'Decoration or branding: a QR code is a machine-readable payload, not an illustration',
+    'The only way to reach something: also give the text or a link beside it',
+  ],
+  example: `<Stack gap="sm">
+  <QrCode value="https://example.com/pair?key=abc" label="Scan to sign in on this device" />
+  <Text>Scan with a signed-in phone</Text>
+</Stack>`,
+}

package/src/components/QrCode/QrCode.native.tsx

@@ -0,0 +1,31 @@
+import {useMemo} from 'react'
+import {html} from 'react-strict-dom'
+import Svg, {Path} from 'react-native-svg'
+import {useResolvedColors} from '../ThemeProvider/ThemeProvider'
+import {qrGeometry} from './geometry'
+import {styles} from './styles.css'
+import type {QrCodeProps} from './types'
+
+export type {QrCodeProps} from './types'
+
+/**
+ * Native QrCode: the web's path, drawn with react-native-svg (RSD has no `svg`). The colour is the
+ * fixed dark token resolved through the nearest ThemeProvider, as the native Icon resolves its own.
+ */
+export function QrCode({value, label}: QrCodeProps) {
+  const {size, d} = useMemo(() => qrGeometry(value), [value])
+  const dark = useResolvedColors().fixedDark
+  return (
+    <html.div role="img" aria-label={label} style={styles.frame}>
+      <Svg
+        viewBox={`0 0 ${size} ${size}`}
+        width="100%"
+        height="100%"
+        accessibilityElementsHidden
+        importantForAccessibility="no-hide-descendants"
+      >
+        <Path d={d} fill={dark} />
+      </Svg>
+    </html.div>
+  )
+}

package/src/components/QrCode/QrCode.stories.tsx

@@ -0,0 +1,44 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect} from 'storybook/test'
+import {css, html} from 'react-strict-dom'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
+import {QrCode} from './QrCode'
+
+const styles = css.create({
+  column: {width: sizes.dialogSm},
+})
+
+const meta: Meta<typeof QrCode> = {
+  title: 'Components/QrCode',
+  component: QrCode,
+  args: {
+    value: 'https://example.com/pair?key=0123456789abcdef',
+    label: 'Scan to sign in on this device',
+  },
+  decorators: [
+    (Story) => (
+      <html.div style={styles.column}>
+        <Story />
+      </html.div>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof QrCode>
+
+export const Default: Story = {
+  play: async ({canvas}) => {
+    const code = canvas.getByRole('img', {name: 'Scan to sign in on this device'})
+    await expect(code).toBeInTheDocument()
+    const box = code.getBoundingClientRect()
+    await expect(Math.round(box.width)).toBe(Math.round(box.height))
+  },
+}
+
+export const LongValue: Story = {
+  args: {
+    value: 'happier://account?key=AbCdEfGhIjKlMnOpQrStUvWxYz0123456789-_AbCdEfGhIjKlMnOpQrStUvWxYz',
+    label: 'Scan to connect',
+  },
+}

package/src/components/QrCode/QrCode.tsx

@@ -0,0 +1,30 @@
+import {useMemo} from 'react'
+import {html} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {qrGeometry} from './geometry'
+import {styles} from './styles.css'
+import type {QrCodeProps} from './types'
+
+export type {QrCodeProps} from './types'
+
+/**
+ * A QR code for another device to scan: one SVG path of the dark modules, drawn as an image with
+ * a label. Native draws the same path with react-native-svg (QrCode.native.tsx).
+ */
+export function QrCode({value, label}: QrCodeProps) {
+  const {size, d} = useMemo(() => qrGeometry(value), [value])
+  return (
+    <html.div role="img" aria-label={label} style={styles.frame}>
+      <svg
+        viewBox={`0 0 ${size} ${size}`}
+        width="100%"
+        height="100%"
+        fill="currentColor"
+        style={{color: colors.fixedDark, display: 'block'}}
+        aria-hidden="true"
+      >
+        <path d={d} />
+      </svg>
+    </html.div>
+  )
+}

package/src/components/QrCode/geometry.ts

@@ -0,0 +1,34 @@
+import {create} from 'qrcode'
+
+/** Light modules around the code, part of the symbol: scanners need it to find the edges. */
+export const QUIET_ZONE = 2
+
+export interface QrGeometry {
+  /** Side of the square viewBox, in modules, quiet zone included. */
+  readonly size: number
+  /** Every dark module as one SVG path, one horizontal run per subpath. */
+  readonly d: string
+}
+
+/**
+ * The code as one path, drawn identically by the web `<svg>` and by react-native-svg on native.
+ * Error correction M (15 %) matches what Happier's pairing codes used before this component.
+ */
+export function qrGeometry(value: string): QrGeometry {
+  const {modules} = create(value, {errorCorrectionLevel: 'M'})
+  const count = modules.size
+  const runs: string[] = []
+  for (let row = 0; row < count; row++) {
+    let col = 0
+    while (col < count) {
+      if (!modules.get(row, col)) {
+        col++
+        continue
+      }
+      const start = col
+      while (col < count && modules.get(row, col)) col++
+      runs.push(`M${start + QUIET_ZONE} ${row + QUIET_ZONE}h${col - start}v1h-${col - start}z`)
+    }
+  }
+  return {size: count + QUIET_ZONE * 2, d: runs.join('')}
+}

package/src/components/QrCode/styles.css.ts

@@ -0,0 +1,12 @@
+import {css} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+
+export const styles = css.create({
+  // Square, as wide as its container: the caller sizes the column it sits in. Dark modules on the
+  // fixed light, in every theme: an inverted code does not scan on every camera.
+  frame: {
+    width: '100%',
+    aspectRatio: 1,
+    backgroundColor: colors.fixedLight,
+  },
+})

package/src/components/QrCode/types.ts

@@ -0,0 +1,6 @@
+export interface QrCodeProps {
+  /** The text the code carries: a URL, a pairing link. */
+  value: string
+  /** What the code is for, read by assistive tech in place of the image. */
+  label: string
+}

package/src/index.native.ts

@@ -36,6 +36,7 @@ export {Callout, type CalloutVariant} from './components/Callout/Callout'
 export {EmptyState} from './components/EmptyState/EmptyState'
 export {Icon, type IconName} from './components/Icon'
 export {Meter, type MeterProps, type MeterTone} from './components/Meter/Meter'
+export {QrCode, type QrCodeProps} from './components/QrCode/QrCode'
 export {Spinner, type SpinnerSize} from './components/Spinner/Spinner'
 export {
   StatusIcon,

package/src/index.ts

@@ -83,6 +83,7 @@ export {TextLink, type TextLinkVariant} from './components/TextLink/TextLink'
 export type {ListboxAnchorProps, ListboxMaxHeight} from './components/Listbox/Listbox'
 export {Select} from './components/Select/Select'
 export {SideNav} from './components/SideNav/SideNav'
+export {QrCode, type QrCodeProps} from './components/QrCode/QrCode'
 export {Spinner, type SpinnerSize} from './components/Spinner/Spinner'
 export {
   ToastProvider,