From 3601c918000306dc1a93ea6956d075bc29cd30d3 Mon Sep 17 00:00:00 2001 From: ryu-man Date: Tue, 7 Apr 2026 18:21:11 -0400 Subject: [PATCH] feat(etiket): add barcode and QR code components MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add comprehensive barcode generation components powered by the 'etiket' library: Components: - EtiketBarcode: 1D barcodes (CODE128, EAN, UPC, etc.) - EtiketQRCode: QR code generation - EtiketDataMatrix: Data Matrix 2D codes - EtiketPDF417: PDF417 barcodes - EtiketAztec: Aztec codes - EtiketIrRenderer: Intermediate representation renderer Features: ✅ Full TypeScript support ✅ Customizable rendering options ✅ SVG-based output ✅ GS1 support for DataMatrix ✅ Error correction controls ✅ Compact variants ✅ Storybook demos All components integrate seamlessly with the svelte-atoms design system. --- src/lib/components/etiket/aztec.svelte | 43 ++++ src/lib/components/etiket/barcode.svelte | 81 +++++++ src/lib/components/etiket/datamatrix.svelte | 38 ++++ .../components/etiket/etiket.stories.svelte | 208 ++++++++++++++++++ src/lib/components/etiket/index.ts | 7 + src/lib/components/etiket/ir-renderer.svelte | 173 +++++++++++++++ src/lib/components/etiket/pdf417.svelte | 43 ++++ src/lib/components/etiket/qr-code.svelte | 61 +++++ src/lib/components/etiket/types.ts | 51 +++++ src/lib/components/index.ts | 1 + 10 files changed, 706 insertions(+) create mode 100644 src/lib/components/etiket/aztec.svelte create mode 100644 src/lib/components/etiket/barcode.svelte create mode 100644 src/lib/components/etiket/datamatrix.svelte create mode 100644 src/lib/components/etiket/etiket.stories.svelte create mode 100644 src/lib/components/etiket/index.ts create mode 100644 src/lib/components/etiket/ir-renderer.svelte create mode 100644 src/lib/components/etiket/pdf417.svelte create mode 100644 src/lib/components/etiket/qr-code.svelte create mode 100644 src/lib/components/etiket/types.ts diff --git a/src/lib/components/etiket/aztec.svelte b/src/lib/components/etiket/aztec.svelte new file mode 100644 index 00000000..5b5c2cd4 --- /dev/null +++ b/src/lib/components/etiket/aztec.svelte @@ -0,0 +1,43 @@ + + + + + diff --git a/src/lib/components/etiket/barcode.svelte b/src/lib/components/etiket/barcode.svelte new file mode 100644 index 00000000..d0f35d3a --- /dev/null +++ b/src/lib/components/etiket/barcode.svelte @@ -0,0 +1,81 @@ + + + + + diff --git a/src/lib/components/etiket/datamatrix.svelte b/src/lib/components/etiket/datamatrix.svelte new file mode 100644 index 00000000..b228f8b9 --- /dev/null +++ b/src/lib/components/etiket/datamatrix.svelte @@ -0,0 +1,38 @@ + + + + + diff --git a/src/lib/components/etiket/etiket.stories.svelte b/src/lib/components/etiket/etiket.stories.svelte new file mode 100644 index 00000000..3918d181 --- /dev/null +++ b/src/lib/components/etiket/etiket.stories.svelte @@ -0,0 +1,208 @@ + + + + + + + + +
+ {#each barcodeTypes as item (item.label)} +
+ {item.label} + +
+ {/each} +
+ + + +
+
+ Custom colors + +
+
+ No text + +
+
+ Text on top + +
+
+ Bearer bars + +
+
+ Rotated 90° + +
+
+ + + + + + + + +
+ {#each dotTypes as dotType (dotType)} +
+ + {dotType} +
+ {/each} +
+ + + +
+
+ + Solid color +
+
+ + Linear gradient +
+
+ + Radial gradient +
+
+ + Circle shape +
+
+ + + +
+ {#each ecLevels as item (item.ecLevel)} +
+ + {item.label} +
+ {/each} +
+ + + + + + + + +
+
+ + Standard +
+
+ + GS1 DataMatrix +
+
+ + Custom colors +
+
+ + + + + + + + +
+
+ Standard + +
+
+ Compact + +
+
+ Custom columns (4) + +
+
+ Custom colors + +
+
+ + + + + + + + +
+
+ + Standard +
+
+ + Compact +
+
+ + EC 50% +
+
+ + Custom colors +
+
+ diff --git a/src/lib/components/etiket/index.ts b/src/lib/components/etiket/index.ts new file mode 100644 index 00000000..b7c4fd28 --- /dev/null +++ b/src/lib/components/etiket/index.ts @@ -0,0 +1,7 @@ +export { default as EtiketBarcode } from './barcode.svelte'; +export { default as EtiketQRCode } from './qr-code.svelte'; +export { default as EtiketDataMatrix } from './datamatrix.svelte'; +export { default as EtiketPDF417 } from './pdf417.svelte'; +export { default as EtiketAztec } from './aztec.svelte'; +export { default as EtiketIrRenderer } from './ir-renderer.svelte'; +export * from './types'; diff --git a/src/lib/components/etiket/ir-renderer.svelte b/src/lib/components/etiket/ir-renderer.svelte new file mode 100644 index 00000000..a1266f05 --- /dev/null +++ b/src/lib/components/etiket/ir-renderer.svelte @@ -0,0 +1,173 @@ + + +{#snippet renderDef(def: DefNode)} + {#if def.type === 'linear-gradient'} + + {#each def.stops as stop, i (i)} + + {/each} + + {:else if def.type === 'radial-gradient'} + + {#each def.stops as stop, i (i)} + + {/each} + + {:else if def.type === 'clip-path'} + + {#each def.children as child, i (i)} + {@render renderNode(child)} + {/each} + + {/if} +{/snippet} + +{#snippet renderNode(node: RenderNode)} + {#if node.type === 'rect'} + {@render rectNode(node)} + {:else if node.type === 'path'} + {@render pathNode(node)} + {:else if node.type === 'circle'} + {@render circleNode(node)} + {:else if node.type === 'text'} + {@render textNode(node)} + {:else if node.type === 'group'} + {@render groupNode(node)} + {:else if node.type === 'image'} + {@render imageNode(node)} + {:else if node.type === 'embedded-svg'} + {@render embeddedSvgNode(node)} + {/if} +{/snippet} + +{#snippet rectNode(node: RectNode)} + +{/snippet} + +{#snippet pathNode(node: PathNode)} + +{/snippet} + +{#snippet circleNode(node: CircleNode)} + +{/snippet} + +{#snippet textNode(node: TextNode)} + {node.content} +{/snippet} + +{#snippet groupNode(node: GroupNode)} + + {#each node.children as child, i (i)} + {@render renderNode(child)} + {/each} + +{/snippet} + +{#snippet imageNode(node: ImageNode)} + +{/snippet} + +{#snippet embeddedSvgNode(node: EmbeddedSVGNode)} + + {@html node.content} + +{/snippet} + + + {#if tree.accessibility?.title} + {tree.accessibility.title} + {/if} + {#if tree.accessibility?.desc} + {tree.accessibility.desc} + {/if} + {#if tree.defs?.length} + + {#each tree.defs as def (def.id)} + {@render renderDef(def)} + {/each} + + {/if} + {#each tree.children as child, i (i)} + {@render renderNode(child)} + {/each} + diff --git a/src/lib/components/etiket/pdf417.svelte b/src/lib/components/etiket/pdf417.svelte new file mode 100644 index 00000000..576e9ba8 --- /dev/null +++ b/src/lib/components/etiket/pdf417.svelte @@ -0,0 +1,43 @@ + + + + + diff --git a/src/lib/components/etiket/qr-code.svelte b/src/lib/components/etiket/qr-code.svelte new file mode 100644 index 00000000..2d9fa57c --- /dev/null +++ b/src/lib/components/etiket/qr-code.svelte @@ -0,0 +1,61 @@ + + + + + diff --git a/src/lib/components/etiket/types.ts b/src/lib/components/etiket/types.ts new file mode 100644 index 00000000..9ff1a1c7 --- /dev/null +++ b/src/lib/components/etiket/types.ts @@ -0,0 +1,51 @@ +import type { BarcodeOptions, BarcodeType } from 'etiket'; +import type { + BarcodeIROptions, + QRCodeIROptions, + MatrixIROptions, + RootNode +} from 'etiket/ir'; +import type { QRCodeOptions } from 'etiket'; + +export type { BarcodeType, RootNode }; + +export interface BarcodeProps extends BarcodeOptions, BarcodeIROptions { + class?: string; + value: string; + type?: BarcodeType; +} + +export interface EtiketQRCodeProps extends QRCodeIROptions, QRCodeOptions { + class?: string; + value: string; +} + +export interface DataMatrixProps extends MatrixIROptions { + class?: string; + value: string; + /** Use GS1 DataMatrix encoding */ + gs1?: boolean; +} + +export interface PDF417Props extends MatrixIROptions { + class?: string; + value: string; + /** Error correction level (0-8) */ + ecLevel?: number; + /** Number of data columns (1-30) */ + columns?: number; + /** Use compact PDF417 variant */ + compact?: boolean; +} + +export interface AztecProps extends MatrixIROptions { + class?: string; + value: string; + /** Error correction percentage (5-95, default 23) */ + ecPercent?: number; + /** Number of layers (1-32, auto if omitted) */ + layers?: number; + /** Use compact Aztec variant */ + compact?: boolean; +} + diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts index 395e4f0b..fb508759 100644 --- a/src/lib/components/index.ts +++ b/src/lib/components/index.ts @@ -41,6 +41,7 @@ export * from './container'; export * from './calendar'; export * from './date-picker'; export * from './qr-code'; +export * from './etiket'; export * from './swatch'; export * from './lazy'; export * from './chip';