QR Scanner

import { IconProps as PhosphorIconProps } from "phosphor-react-native"
import * as React from "react"
import { View } from "react-native"
import { Path } from "react-native-svg"
import Svg from "react-native-svg"
import { Icon } from "@/components/ui/icon"
import { QRScanner, type QRScannerState } from "@/components/ui/qr-scanner"

const MODULES = 21

const MODULE_SIZE = 6

const CODE_SIZE = MODULES * MODULE_SIZE

const FINDERS = [
  [0, 0],
  [0, 14],
  [14, 0],
]

function isDark(row: number, column: number) {
  for (const [top, left] of FINDERS) {
    const i = row - top
    const j = column - left
    if (i >= 0 && i <= 6 && j >= 0 && j <= 6) {
      return (
        i === 0 ||
        i === 6 ||
        j === 0 ||
        j === 6 ||
        (i >= 2 && i <= 4 && j >= 2 && j <= 4)
      )
    }
    const boxTop = top === 0 ? 0 : top - 1
    const boxLeft = left === 0 ? 0 : left - 1
    if (
      row >= boxTop &&
      row <= boxTop + 7 &&
      column >= boxLeft &&
      column <= boxLeft + 7
    ) {
      return false
    }
  }
  return (row * 7 + column * 11 + row * column) % 5 < 2
}

const CODE_PATH = Array.from({ length: MODULES * MODULES }, (_, index) => {
  const row = Math.floor(index / MODULES)
  const column = index % MODULES
  return isDark(row, column)
    ? `M${column * MODULE_SIZE} ${row * MODULE_SIZE}h${MODULE_SIZE}v${MODULE_SIZE}h-${MODULE_SIZE}Z`
    : ""
}).join("")

function QRCode({ color }: PhosphorIconProps) {
  return (
    <Svg width={CODE_SIZE} height={CODE_SIZE}>
      <Path d={CODE_PATH} fill={color} />
    </Svg>
  )
}

function CameraPlaceholder() {
  return (
    <View className="flex-1 items-center justify-center bg-black">
      <View className="mb-12 -rotate-6 rounded-xl bg-white p-2.5">
        <Icon as={QRCode} className="text-black" />
      </View>
    </View>
  )
}

function Scanner({
  state,
  description,
  scanLine,
}: {
  state?: QRScannerState
  description?: string
  scanLine?: boolean
}) {
  const [torch, setTorch] = React.useState(false)
  return (
    <QRScanner
      className="flex-1"
      state={state}
      scanLine={scanLine}
      title="Scan QR code"
      description={description}
      torch={torch}
      onTorchToggle={setTorch}
    >
      <CameraPlaceholder />
    </QRScanner>
  )
}

export function QrScannerExample() {
  return (
    <Scanner description="Point your camera at a code to pay or connect." />
  )
}

import EsuissUI
import SwiftUI

struct QRScannerExample: View {
  var body: some View {
    QRScannerDemo(hint: "Point your camera at a code to pay or connect.")
  }
}

struct QRScannerDemo: View {
  var state: QRScannerState = .idle
  let hint: LocalizedStringKey
  var scanLine = false

  @State private var torch = false

  var body: some View {
    QRScanner(
      state: state,
      title: "Scan QR code",
      hint: hint,
      scanLine: scanLine,
      isTorchOn: torch,
      onTorchToggle: { torch.toggle() }
    ) {
      QRScannerCameraPlaceholder()
    }
    .ignoresSafeArea()
  }
}

enum QRCodeSample {
  static let count = 21
  static let module: CGFloat = 6
  static let padding: CGFloat = 10
  static let side = CGFloat(count) * module + padding * 2

  static func isDark(_ r: Int, _ c: Int) -> Bool {
    for (fr, fc) in [(0, 0), (0, 14), (14, 0)] {
      let i = r - fr
      let j = c - fc
      if (0...6).contains(i) && (0...6).contains(j) {
        return i == 0 || i == 6 || j == 0 || j == 6 || ((2...4).contains(i) && (2...4).contains(j))
      }
    }
    if r <= 7 && c <= 7 { return false }
    if r <= 7 && c >= 13 { return false }
    if r >= 13 && c <= 7 { return false }
    return (r * 7 + c * 11 + r * c) % 5 < 2
  }

  static let modules: Path = {
    var path = Path()
    for r in 0..<count {
      for c in 0..<count where isDark(r, c) {
        path.addRect(CGRect(x: padding + CGFloat(c) * module, y: padding + CGFloat(r) * module, width: module, height: module))
      }
    }
    return path
  }()
}

struct QRScannerCameraPlaceholder: View {
  var body: some View {
    GeometryReader { proxy in
      Canvas { context, _ in
        let card = CGRect(origin: .zero, size: CGSize(width: QRCodeSample.side, height: QRCodeSample.side))
        context.fill(Path(roundedRect: card, cornerRadius: Radius.xl, style: .continuous), with: .color(Palette.white))
        context.fill(QRCodeSample.modules, with: .color(Palette.black))
      }
      .frame(width: QRCodeSample.side, height: QRCodeSample.side)
      .rotationEffect(.degrees(-6))
      .position(x: proxy.size.width / 2, y: proxy.size.height / 2 - 24)
    }
    .background(Palette.black)
    .accessibilityHidden(true)
  }
}

let count = 21

let module: CGFloat = 6

let padding: CGFloat = 10

let side = CGFloat(count) * module + padding * 2

func isDark(_ r: Int, _ c: Int) -> Bool {
  for (fr, fc) in [(0, 0), (0, 14), (14, 0)] {
    let i = r - fr
    let j = c - fc
    if (0...6).contains(i) && (0...6).contains(j) {
      return i == 0 || i == 6 || j == 0 || j == 6 || ((2...4).contains(i) && (2...4).contains(j))
    }
  }
  if r <= 7 && c <= 7 { return false }
  if r <= 7 && c >= 13 { return false }
  if r >= 13 && c <= 7 { return false }
  return (r * 7 + c * 11 + r * c) % 5 < 2
}

let modules: Path = {
  var path = Path()
  for r in 0..<count {
    for c in 0..<count where isDark(r, c) {
      path.addRect(CGRect(x: padding + CGFloat(c) * module, y: padding + CGFloat(r) * module, width: module, height: module))
    }
  }
  return path
}

import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import com.esuiss.ui.components.QrScanner
import com.esuiss.ui.components.QrScannerState

@Composable
fun QRScannerExample() {
    QrScannerDemo(hint = "Point your camera at a code to pay or connect.")
}

@Composable
fun QrScannerDemo(
    state: QrScannerState = QrScannerState.Idle,
    hint: String? = null,
    scanLine: Boolean = false,
) {
    var torch by rememberSaveable { mutableStateOf(false) }
    QrScanner(
        modifier = Modifier.fillMaxSize(),
        state = state,
        title = "Scan QR code",
        hint = hint,
        scanLine = scanLine,
        torch = torch,
        onTorchToggle = { torch = it },
    ) {
        QrScannerCameraPlaceholder()
    }
}

import { IconProps as PhosphorIconProps } from "phosphor-react-native"
import * as React from "react"
import { View } from "react-native"
import { Path } from "react-native-svg"
import Svg from "react-native-svg"
import { Icon } from "@/components/ui/icon"
import { QRScanner, type QRScannerState } from "@/components/ui/qr-scanner"

const MODULES = 21

const MODULE_SIZE = 6

const CODE_SIZE = MODULES * MODULE_SIZE

const FINDERS = [
  [0, 0],
  [0, 14],
  [14, 0],
]

function isDark(row: number, column: number) {
  for (const [top, left] of FINDERS) {
    const i = row - top
    const j = column - left
    if (i >= 0 && i <= 6 && j >= 0 && j <= 6) {
      return (
        i === 0 ||
        i === 6 ||
        j === 0 ||
        j === 6 ||
        (i >= 2 && i <= 4 && j >= 2 && j <= 4)
      )
    }
    const boxTop = top === 0 ? 0 : top - 1
    const boxLeft = left === 0 ? 0 : left - 1
    if (
      row >= boxTop &&
      row <= boxTop + 7 &&
      column >= boxLeft &&
      column <= boxLeft + 7
    ) {
      return false
    }
  }
  return (row * 7 + column * 11 + row * column) % 5 < 2
}

const CODE_PATH = Array.from({ length: MODULES * MODULES }, (_, index) => {
  const row = Math.floor(index / MODULES)
  const column = index % MODULES
  return isDark(row, column)
    ? `M${column * MODULE_SIZE} ${row * MODULE_SIZE}h${MODULE_SIZE}v${MODULE_SIZE}h-${MODULE_SIZE}Z`
    : ""
}).join("")

function QRCode({ color }: PhosphorIconProps) {
  return (
    <Svg width={CODE_SIZE} height={CODE_SIZE}>
      <Path d={CODE_PATH} fill={color} />
    </Svg>
  )
}

function CameraPlaceholder() {
  return (
    <View className="flex-1 items-center justify-center bg-black">
      <View className="mb-12 -rotate-6 rounded-xl bg-white p-2.5">
        <Icon as={QRCode} className="text-black" />
      </View>
    </View>
  )
}

function Scanner({
  state,
  description,
  scanLine,
}: {
  state?: QRScannerState
  description?: string
  scanLine?: boolean
}) {
  const [torch, setTorch] = React.useState(false)
  return (
    <QRScanner
      className="flex-1"
      state={state}
      scanLine={scanLine}
      title="Scan QR code"
      description={description}
      torch={torch}
      onTorchToggle={setTorch}
    >
      <CameraPlaceholder />
    </QRScanner>
  )
}

export function QrScannerSuccessExample() {
  return (
    <Scanner state="success" description="Code recognised" />
  )
}

import EsuissUI
import SwiftUI

struct QRScannerSuccessExample: View {
  var body: some View {
    QRScannerDemo(state: .success, hint: "Code recognised")
  }
}

struct QRScannerDemo: View {
  var state: QRScannerState = .idle
  let hint: LocalizedStringKey
  var scanLine = false

  @State private var torch = false

  var body: some View {
    QRScanner(
      state: state,
      title: "Scan QR code",
      hint: hint,
      scanLine: scanLine,
      isTorchOn: torch,
      onTorchToggle: { torch.toggle() }
    ) {
      QRScannerCameraPlaceholder()
    }
    .ignoresSafeArea()
  }
}

enum QRCodeSample {
  static let count = 21
  static let module: CGFloat = 6
  static let padding: CGFloat = 10
  static let side = CGFloat(count) * module + padding * 2

  static func isDark(_ r: Int, _ c: Int) -> Bool {
    for (fr, fc) in [(0, 0), (0, 14), (14, 0)] {
      let i = r - fr
      let j = c - fc
      if (0...6).contains(i) && (0...6).contains(j) {
        return i == 0 || i == 6 || j == 0 || j == 6 || ((2...4).contains(i) && (2...4).contains(j))
      }
    }
    if r <= 7 && c <= 7 { return false }
    if r <= 7 && c >= 13 { return false }
    if r >= 13 && c <= 7 { return false }
    return (r * 7 + c * 11 + r * c) % 5 < 2
  }

  static let modules: Path = {
    var path = Path()
    for r in 0..<count {
      for c in 0..<count where isDark(r, c) {
        path.addRect(CGRect(x: padding + CGFloat(c) * module, y: padding + CGFloat(r) * module, width: module, height: module))
      }
    }
    return path
  }()
}

struct QRScannerCameraPlaceholder: View {
  var body: some View {
    GeometryReader { proxy in
      Canvas { context, _ in
        let card = CGRect(origin: .zero, size: CGSize(width: QRCodeSample.side, height: QRCodeSample.side))
        context.fill(Path(roundedRect: card, cornerRadius: Radius.xl, style: .continuous), with: .color(Palette.white))
        context.fill(QRCodeSample.modules, with: .color(Palette.black))
      }
      .frame(width: QRCodeSample.side, height: QRCodeSample.side)
      .rotationEffect(.degrees(-6))
      .position(x: proxy.size.width / 2, y: proxy.size.height / 2 - 24)
    }
    .background(Palette.black)
    .accessibilityHidden(true)
  }
}

let count = 21

let module: CGFloat = 6

let padding: CGFloat = 10

let side = CGFloat(count) * module + padding * 2

func isDark(_ r: Int, _ c: Int) -> Bool {
  for (fr, fc) in [(0, 0), (0, 14), (14, 0)] {
    let i = r - fr
    let j = c - fc
    if (0...6).contains(i) && (0...6).contains(j) {
      return i == 0 || i == 6 || j == 0 || j == 6 || ((2...4).contains(i) && (2...4).contains(j))
    }
  }
  if r <= 7 && c <= 7 { return false }
  if r <= 7 && c >= 13 { return false }
  if r >= 13 && c <= 7 { return false }
  return (r * 7 + c * 11 + r * c) % 5 < 2
}

let modules: Path = {
  var path = Path()
  for r in 0..<count {
    for c in 0..<count where isDark(r, c) {
      path.addRect(CGRect(x: padding + CGFloat(c) * module, y: padding + CGFloat(r) * module, width: module, height: module))
    }
  }
  return path
}

import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import com.esuiss.ui.components.QrScanner
import com.esuiss.ui.components.QrScannerState

@Composable
fun QRScannerSuccessExample() {
    QrScannerDemo(state = QrScannerState.Success, hint = "Code recognised")
}

@Composable
fun QrScannerDemo(
    state: QrScannerState = QrScannerState.Idle,
    hint: String? = null,
    scanLine: Boolean = false,
) {
    var torch by rememberSaveable { mutableStateOf(false) }
    QrScanner(
        modifier = Modifier.fillMaxSize(),
        state = state,
        title = "Scan QR code",
        hint = hint,
        scanLine = scanLine,
        torch = torch,
        onTorchToggle = { torch = it },
    ) {
        QrScannerCameraPlaceholder()
    }
}

import { IconProps as PhosphorIconProps } from "phosphor-react-native"
import * as React from "react"
import { View } from "react-native"
import { Path } from "react-native-svg"
import Svg from "react-native-svg"
import { Icon } from "@/components/ui/icon"
import { QRScanner, type QRScannerState } from "@/components/ui/qr-scanner"

const MODULES = 21

const MODULE_SIZE = 6

const CODE_SIZE = MODULES * MODULE_SIZE

const FINDERS = [
  [0, 0],
  [0, 14],
  [14, 0],
]

function isDark(row: number, column: number) {
  for (const [top, left] of FINDERS) {
    const i = row - top
    const j = column - left
    if (i >= 0 && i <= 6 && j >= 0 && j <= 6) {
      return (
        i === 0 ||
        i === 6 ||
        j === 0 ||
        j === 6 ||
        (i >= 2 && i <= 4 && j >= 2 && j <= 4)
      )
    }
    const boxTop = top === 0 ? 0 : top - 1
    const boxLeft = left === 0 ? 0 : left - 1
    if (
      row >= boxTop &&
      row <= boxTop + 7 &&
      column >= boxLeft &&
      column <= boxLeft + 7
    ) {
      return false
    }
  }
  return (row * 7 + column * 11 + row * column) % 5 < 2
}

const CODE_PATH = Array.from({ length: MODULES * MODULES }, (_, index) => {
  const row = Math.floor(index / MODULES)
  const column = index % MODULES
  return isDark(row, column)
    ? `M${column * MODULE_SIZE} ${row * MODULE_SIZE}h${MODULE_SIZE}v${MODULE_SIZE}h-${MODULE_SIZE}Z`
    : ""
}).join("")

function QRCode({ color }: PhosphorIconProps) {
  return (
    <Svg width={CODE_SIZE} height={CODE_SIZE}>
      <Path d={CODE_PATH} fill={color} />
    </Svg>
  )
}

function CameraPlaceholder() {
  return (
    <View className="flex-1 items-center justify-center bg-black">
      <View className="mb-12 -rotate-6 rounded-xl bg-white p-2.5">
        <Icon as={QRCode} className="text-black" />
      </View>
    </View>
  )
}

function Scanner({
  state,
  description,
  scanLine,
}: {
  state?: QRScannerState
  description?: string
  scanLine?: boolean
}) {
  const [torch, setTorch] = React.useState(false)
  return (
    <QRScanner
      className="flex-1"
      state={state}
      scanLine={scanLine}
      title="Scan QR code"
      description={description}
      torch={torch}
      onTorchToggle={setTorch}
    >
      <CameraPlaceholder />
    </QRScanner>
  )
}

export function QrScannerErrorStateExample() {
  return (
    <Scanner state="error" description="This code is not supported." />
  )
}

import EsuissUI
import SwiftUI

struct QRScannerErrorStateExample: View {
  var body: some View {
    QRScannerDemo(state: .error, hint: "This code is not supported.")
  }
}

struct QRScannerDemo: View {
  var state: QRScannerState = .idle
  let hint: LocalizedStringKey
  var scanLine = false

  @State private var torch = false

  var body: some View {
    QRScanner(
      state: state,
      title: "Scan QR code",
      hint: hint,
      scanLine: scanLine,
      isTorchOn: torch,
      onTorchToggle: { torch.toggle() }
    ) {
      QRScannerCameraPlaceholder()
    }
    .ignoresSafeArea()
  }
}

enum QRCodeSample {
  static let count = 21
  static let module: CGFloat = 6
  static let padding: CGFloat = 10
  static let side = CGFloat(count) * module + padding * 2

  static func isDark(_ r: Int, _ c: Int) -> Bool {
    for (fr, fc) in [(0, 0), (0, 14), (14, 0)] {
      let i = r - fr
      let j = c - fc
      if (0...6).contains(i) && (0...6).contains(j) {
        return i == 0 || i == 6 || j == 0 || j == 6 || ((2...4).contains(i) && (2...4).contains(j))
      }
    }
    if r <= 7 && c <= 7 { return false }
    if r <= 7 && c >= 13 { return false }
    if r >= 13 && c <= 7 { return false }
    return (r * 7 + c * 11 + r * c) % 5 < 2
  }

  static let modules: Path = {
    var path = Path()
    for r in 0..<count {
      for c in 0..<count where isDark(r, c) {
        path.addRect(CGRect(x: padding + CGFloat(c) * module, y: padding + CGFloat(r) * module, width: module, height: module))
      }
    }
    return path
  }()
}

struct QRScannerCameraPlaceholder: View {
  var body: some View {
    GeometryReader { proxy in
      Canvas { context, _ in
        let card = CGRect(origin: .zero, size: CGSize(width: QRCodeSample.side, height: QRCodeSample.side))
        context.fill(Path(roundedRect: card, cornerRadius: Radius.xl, style: .continuous), with: .color(Palette.white))
        context.fill(QRCodeSample.modules, with: .color(Palette.black))
      }
      .frame(width: QRCodeSample.side, height: QRCodeSample.side)
      .rotationEffect(.degrees(-6))
      .position(x: proxy.size.width / 2, y: proxy.size.height / 2 - 24)
    }
    .background(Palette.black)
    .accessibilityHidden(true)
  }
}

let count = 21

let module: CGFloat = 6

let padding: CGFloat = 10

let side = CGFloat(count) * module + padding * 2

func isDark(_ r: Int, _ c: Int) -> Bool {
  for (fr, fc) in [(0, 0), (0, 14), (14, 0)] {
    let i = r - fr
    let j = c - fc
    if (0...6).contains(i) && (0...6).contains(j) {
      return i == 0 || i == 6 || j == 0 || j == 6 || ((2...4).contains(i) && (2...4).contains(j))
    }
  }
  if r <= 7 && c <= 7 { return false }
  if r <= 7 && c >= 13 { return false }
  if r >= 13 && c <= 7 { return false }
  return (r * 7 + c * 11 + r * c) % 5 < 2
}

let modules: Path = {
  var path = Path()
  for r in 0..<count {
    for c in 0..<count where isDark(r, c) {
      path.addRect(CGRect(x: padding + CGFloat(c) * module, y: padding + CGFloat(r) * module, width: module, height: module))
    }
  }
  return path
}

import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import com.esuiss.ui.components.QrScanner
import com.esuiss.ui.components.QrScannerState

@Composable
fun QRScannerErrorStateExample() {
    QrScannerDemo(state = QrScannerState.Error, hint = "This code is not supported.")
}

@Composable
fun QrScannerDemo(
    state: QrScannerState = QrScannerState.Idle,
    hint: String? = null,
    scanLine: Boolean = false,
) {
    var torch by rememberSaveable { mutableStateOf(false) }
    QrScanner(
        modifier = Modifier.fillMaxSize(),
        state = state,
        title = "Scan QR code",
        hint = hint,
        scanLine = scanLine,
        torch = torch,
        onTorchToggle = { torch = it },
    ) {
        QrScannerCameraPlaceholder()
    }
}

import { IconProps as PhosphorIconProps } from "phosphor-react-native"
import * as React from "react"
import { View } from "react-native"
import { Path } from "react-native-svg"
import Svg from "react-native-svg"
import { Icon } from "@/components/ui/icon"
import { QRScanner, type QRScannerState } from "@/components/ui/qr-scanner"

const MODULES = 21

const MODULE_SIZE = 6

const CODE_SIZE = MODULES * MODULE_SIZE

const FINDERS = [
  [0, 0],
  [0, 14],
  [14, 0],
]

function isDark(row: number, column: number) {
  for (const [top, left] of FINDERS) {
    const i = row - top
    const j = column - left
    if (i >= 0 && i <= 6 && j >= 0 && j <= 6) {
      return (
        i === 0 ||
        i === 6 ||
        j === 0 ||
        j === 6 ||
        (i >= 2 && i <= 4 && j >= 2 && j <= 4)
      )
    }
    const boxTop = top === 0 ? 0 : top - 1
    const boxLeft = left === 0 ? 0 : left - 1
    if (
      row >= boxTop &&
      row <= boxTop + 7 &&
      column >= boxLeft &&
      column <= boxLeft + 7
    ) {
      return false
    }
  }
  return (row * 7 + column * 11 + row * column) % 5 < 2
}

const CODE_PATH = Array.from({ length: MODULES * MODULES }, (_, index) => {
  const row = Math.floor(index / MODULES)
  const column = index % MODULES
  return isDark(row, column)
    ? `M${column * MODULE_SIZE} ${row * MODULE_SIZE}h${MODULE_SIZE}v${MODULE_SIZE}h-${MODULE_SIZE}Z`
    : ""
}).join("")

function QRCode({ color }: PhosphorIconProps) {
  return (
    <Svg width={CODE_SIZE} height={CODE_SIZE}>
      <Path d={CODE_PATH} fill={color} />
    </Svg>
  )
}

function CameraPlaceholder() {
  return (
    <View className="flex-1 items-center justify-center bg-black">
      <View className="mb-12 -rotate-6 rounded-xl bg-white p-2.5">
        <Icon as={QRCode} className="text-black" />
      </View>
    </View>
  )
}

function Scanner({
  state,
  description,
  scanLine,
}: {
  state?: QRScannerState
  description?: string
  scanLine?: boolean
}) {
  const [torch, setTorch] = React.useState(false)
  return (
    <QRScanner
      className="flex-1"
      state={state}
      scanLine={scanLine}
      title="Scan QR code"
      description={description}
      torch={torch}
      onTorchToggle={setTorch}
    >
      <CameraPlaceholder />
    </QRScanner>
  )
}

export function QrScannerWithScanLineExample() {
  return (
    <Scanner scanLine description="Hold steady over the code." />
  )
}