bsign-customization-full 0.0.1

package/src/hooks/use-resize-constraints.ts

@@ -0,0 +1,62 @@
+import { useCallback } from "react"
+
+export interface ResizeConstraints {
+  minWidth?: number
+  maxWidth?: number
+  minAspectRatio?: number
+  maxAspectRatio?: number
+  sensitivity?: number
+}
+
+export function useResizeConstraints(constraints: ResizeConstraints = {}) {
+  const { minWidth = 10, maxWidth = 200, minAspectRatio = 0.1, maxAspectRatio = 10, sensitivity = 0.5 } = constraints
+
+  const constrainWidth = useCallback(
+    (width: number): number => {
+      return Math.max(minWidth, Math.min(maxWidth, width))
+    },
+    [minWidth, maxWidth],
+  )
+
+  const constrainAspectRatio = useCallback(
+    (ratio: number): number => {
+      return Math.max(minAspectRatio, Math.min(maxAspectRatio, ratio))
+    },
+    [minAspectRatio, maxAspectRatio],
+  )
+
+  const calculateWidthChange = useCallback(
+    (deltaX: number, deltaY?: number): number => {
+      let change = deltaX * sensitivity
+
+      // Add vertical influence for corner resizing
+      if (deltaY !== undefined) {
+        change += deltaY * sensitivity * 0.5
+      }
+
+      return change
+    },
+    [sensitivity],
+  )
+
+  const calculateAspectRatioChange = useCallback((deltaX?: number, deltaY?: number): number => {
+    const ratioSensitivity = 0.01
+
+    if (deltaX !== undefined) {
+      return deltaX * ratioSensitivity
+    }
+
+    if (deltaY !== undefined) {
+      return -deltaY * ratioSensitivity // Negative because moving down decreases ratio
+    }
+
+    return 0
+  }, [])
+
+  return {
+    constrainWidth,
+    constrainAspectRatio,
+    calculateWidthChange,
+    calculateAspectRatioChange,
+  }
+}

package/src/index.css

@@ -0,0 +1,238 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@font-face {
+  font-family: 'Bebasneue';
+  src:
+    url('https://cdn.jsdelivr.net/npm/bsign-customization@latest/src/fonts/BEBASNEUE-REGULAR.TTF') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'GOTHICB';
+  src:
+    url('./fonts/GOTHICB.TTF') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Braille';
+  src:
+    url('https://cdn.jsdelivr.net/npm/bsign-customization@latest/src/fonts/Braille-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --font-bebasneue: 'Bebasneue';
+  --font-gothicb: 'GOTHICB';
+  --font-braille: 'Braille';
+}
+
+:root,
+:host {
+  --radius: 8px;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: #D6D6D6;
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark,
+:host(.dark) {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: #D6D6D6;
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body,
+  :host {
+    @apply bg-background text-foreground;
+  }
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
+}
+
+.quantity-discount {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-top: 5px;
+}
+
+.qty-discount--info, .qty-discount--item-hm {
+  font-size: 12px;
+  color: #8F8F8F;
+}
+
+.qty-discount--item-qty {
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.qty-discount--item-price {
+  font-weight: 700;
+  font-size: 16px;
+}
+
+.qty-discount--item {
+  text-align: center;
+  padding: 13px 25px;
+  border: 1px solid #E6E6E6;
+  border-radius: 8px;
+  cursor: pointer;
+  position: relative;
+}
+
+.qty-discount--item-badge {
+  position: absolute;
+  text-wrap: nowrap;
+  top: -10px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 10px;
+  margin: 0;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+
+.qty-discount--item-active {
+  border-color: #107E12;
+}
+
+.qty-discount--item p {
+  margin: 0;
+}
+
+.qty-discount--list {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+}
+
+@media (max-width: 768px) {
+  .qty-discount--list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 12px;
+  }
+
+  .qty-discount--item {
+    padding: 12px 10px;
+  }
+
+  .qty-discount--item-price {
+    font-size: 14px;
+  }
+}

package/src/index.tsx

@@ -0,0 +1,141 @@
+import { createRoot, type Root } from "react-dom/client"
+import SignCustomizer, { type SignCustomizerProps } from "./AppDemo2"
+import resizableStyles from "react-resizable/css/styles.css?inline"
+import widgetStyles from "./index.css?inline"
+import { WidgetPortalContainerContext } from "./lib/widget-context"
+
+export type WidgetTarget = string | HTMLElement
+
+export interface MountConstructorWidgetProps extends SignCustomizerProps {
+  widgetCss?: string | string[]
+}
+
+const BASE_WIDGET_CSS = `${resizableStyles}\n${widgetStyles}`
+const rootsByHost = new WeakMap<HTMLElement, Root>()
+
+function resolveTarget(target: WidgetTarget): HTMLElement {
+  if (typeof target !== "string") {
+    return target
+  }
+
+  const element = document.querySelector(target)
+  if (!element) {
+    throw new Error(`mountConstructorWidget: target not found for selector "${target}"`)
+  }
+
+  if (!(element instanceof HTMLElement)) {
+    throw new Error(
+      `mountConstructorWidget: target "${target}" is not an HTMLElement`
+    )
+  }
+
+  return element
+}
+
+function ensureShadowRoot(host: HTMLElement): ShadowRoot {
+  return host.shadowRoot ?? host.attachShadow({ mode: "open" })
+}
+
+function ensureMountNode(shadowRoot: ShadowRoot): HTMLElement {
+  const existingNode = shadowRoot.querySelector<HTMLElement>("[data-bsign-widget-root]")
+  if (existingNode) {
+    return existingNode
+  }
+
+  const node = document.createElement("div")
+  node.setAttribute("data-bsign-widget-root", "")
+  shadowRoot.append(node)
+
+  return node
+}
+
+function ensurePortalNode(shadowRoot: ShadowRoot): HTMLElement {
+  const existingNode = shadowRoot.querySelector<HTMLElement>(
+    "[data-bsign-widget-portal-root]"
+  )
+  if (existingNode) {
+    return existingNode
+  }
+
+  const node = document.createElement("div")
+  node.setAttribute("data-bsign-widget-portal-root", "")
+  shadowRoot.append(node)
+
+  return node
+}
+
+function ensureBaseStyles(shadowRoot: ShadowRoot) {
+  const existingStyles = shadowRoot.querySelector<HTMLStyleElement>(
+    "style[data-bsign-widget-base-style]"
+  )
+  if (existingStyles) {
+    return
+  }
+
+  const styleTag = document.createElement("style")
+  styleTag.setAttribute("data-bsign-widget-base-style", "")
+  styleTag.textContent = BASE_WIDGET_CSS
+  shadowRoot.prepend(styleTag)
+}
+
+function normalizeWidgetCss(widgetCss?: string | string[]): string {
+  if (!widgetCss) {
+    return ""
+  }
+
+  const chunks = Array.isArray(widgetCss) ? widgetCss : [widgetCss]
+
+  return chunks
+    .filter((chunk): chunk is string => typeof chunk === "string")
+    .map(chunk => chunk.trim())
+    .filter(Boolean)
+    .join("\n")
+}
+
+function syncCustomStyles(shadowRoot: ShadowRoot, widgetCss?: string | string[]) {
+  const normalizedCss = normalizeWidgetCss(widgetCss)
+  const styleTag = shadowRoot.querySelector<HTMLStyleElement>(
+    "style[data-bsign-widget-custom-style]"
+  )
+
+  if (!normalizedCss) {
+    styleTag?.remove()
+    return
+  }
+
+  if (styleTag) {
+    styleTag.textContent = normalizedCss
+    return
+  }
+
+  const nextStyleTag = document.createElement("style")
+  nextStyleTag.setAttribute("data-bsign-widget-custom-style", "")
+  nextStyleTag.textContent = normalizedCss
+  shadowRoot.append(nextStyleTag)
+}
+
+export function mountConstructorWidget(
+  target: WidgetTarget,
+  props: MountConstructorWidgetProps = {}
+) {
+  const { widgetCss, ...widgetProps } = props
+  const host = resolveTarget(target)
+  const shadowRoot = ensureShadowRoot(host)
+  const mountNode = ensureMountNode(shadowRoot)
+  const portalNode = ensurePortalNode(shadowRoot)
+
+  ensureBaseStyles(shadowRoot)
+  syncCustomStyles(shadowRoot, widgetCss)
+
+  let root = rootsByHost.get(host)
+  if (!root) {
+    root = createRoot(mountNode)
+    rootsByHost.set(host, root)
+  }
+
+  root.render(
+    <WidgetPortalContainerContext.Provider value={portalNode}>
+      <SignCustomizer {...widgetProps} />
+    </WidgetPortalContainerContext.Provider>
+  )
+}