ReviewOS
Reload

also looking at this

stacks/ts-qr-codes

chore(deps): update dependency react-dom to 19.2.7

#2138
Closed chris wants to merge buddy-bot/update-major-update-react-dom into main
222 files +16350 -1825

Review threads live on the whole diff, not on one commit, so none are shown here - a thread's line means something in the branch's final form, and painting it into an intermediate step would put it on code it is not about.

docs/.vitepress/config.tsmodified+6-6
@@ -77,12 +77,12 @@ const sidebar = [
7777 text: 'EAN / UPC',
7878 link: '/api/barcode/EAN',
7979 items: [
80 { text: 'EAN-13', link: '/api/barcode/EAN/EAN13' },
81 { text: 'EAN-8', link: '/api/barcode/EAN/EAN8' },
82 { text: 'EAN-5', link: '/api/barcode/EAN/EAN5' },
83 { text: 'EAN-2', link: '/api/barcode/EAN/EAN2' },
84 { text: 'UPC-A', link: '/api/barcode/EAN/UPCA' },
85 { text: 'UPC-E', link: '/api/barcode/EAN/UPCE' },
80 { text: 'EAN-13', link: '/api/barcode/EAN/EAN-13' },
81 { text: 'EAN-8', link: '/api/barcode/EAN/EAN-8' },
82 { text: 'EAN-5', link: '/api/barcode/EAN/EAN-5' },
83 { text: 'EAN-2', link: '/api/barcode/EAN/EAN-2' },
84 { text: 'UPC-A', link: '/api/barcode/EAN/UPC-A' },
85 { text: 'UPC-E', link: '/api/barcode/EAN/UPC-E' },
8686 ]
8787 },
8888 {
docs/api/barcode/EAN/index.md docs/api/barcode/EAN/EAN-13.mdcopied+0-0

No changes to show.

docs/api/barcode/EAN/EAN-2.mdadded+153-0
@@ -0,0 +1,153 @@
1# EAN-2
2
3EAN-2 is a supplemental two-digit barcode typically used for periodical publications to indicate issue numbers. It's the smallest of the EAN supplemental barcodes and must be used in conjunction with EAN-13, EAN-8, or UPC barcodes.
4
5## Basic Usage
6
7```ts
8import { barcode } from '@stacksjs/qrx'
9
10barcode('#barcode', '53', { format: 'EAN2' })
11```
12
13[!NOTE] Image needed: Basic EAN-2 barcode example
14
15## Structure
16
17An EAN-2 barcode consists of:
18
19- Exactly 2 digits
20- No check digit
21- Must be used as a supplement
22- Values from 00-99
23
24## Usage with Main Barcode
25
26```ts
27import { barcode } from '@stacksjs/qrx'
28
29barcode('#barcode')
30 .EAN13('9771234567003')
31 .blank(20)
32 .EAN2('53', {
33 height: 85,
34 textPosition: 'top',
35 fontSize: 16
36 })
37 .render()
38```
39
40[!NOTE] Image needed: EAN-13 with EAN-2 add-on example
41
42## Customization Options
43
44```ts
45import { barcode } from '@stacksjs/qrx'
46
47barcode('#barcode', '53', {
48 format: 'EAN2',
49 width: 2,
50 height: 85,
51 displayValue: true,
52 font: 'OCRB',
53 fontSize: 16,
54 textMargin: 0,
55 textPosition: 'top'
56})
57```
58
59## Common Applications
60
611. Magazine Issues
62 - ```ts
63 // Issue 12 of a magazine
64 barcode('#barcode', '12', { format: 'EAN2' })
65 ```
662. Newspaper Editions
67 - ```ts
68 // Sunday edition (01)
69 barcode('#barcode', '01', { format: 'EAN2' })
70 ```
713. Version Indicators
72 - ```ts
73 // Version 2.0
74 barcode('#barcode', '20', { format: 'EAN2' })
75 ```
76
77[!NOTE] Image needed: Real-world application examples
78
79## Positioning Guidelines
80
811. Standard Placement
82 - Right-aligned with main barcode
83 - Specific gap width (9-12 modules)
84 - Baseline alignment with main barcode
852. Height Considerations
86 - ```ts
87 // Typically taller than main barcode
88 barcode('#barcode', '53', {
89 format: 'EAN2',
90 height: 85 // Compared to standard 70
91 })
92 ```
93
94[!NOTE] Image needed: Positioning and alignment diagram
95
96## Error Handling
97
98```ts
99import { barcode } from '@stacksjs/qrx'
100
101barcode('#barcode', '53', {
102 format: 'EAN2',
103 valid: (valid) => {
104 if (!valid) {
105 console.error('Invalid EAN-2')
106 // Handle invalid input
107 }
108 }
109})
110```
111
112## Best Practices
113
1141. Usage Guidelines
115 - Always use with main barcode
116 - Maintain standard spacing
117 - Use consistent height ratio
118 - Validate 2-digit input
119 - Consider scanner compatibility
1202. Common Patterns
121 - 00-09: Daily publications
122 - 10-99: Weekly/monthly publications
123
124## Technical Notes
125
126- No check digit mechanism
127- Must be exactly 2 digits
128- Cannot be used standalone
129- Scanner must support add-ons
130- Standard right-alignment required
131- Smaller than EAN-5 supplement
132
133## Migration Considerations
134
135If you need more capacity, consider using EAN-5 instead:
136
137```ts
138// EAN-2 version
139barcode('#barcode')
140 .EAN13('9771234567003')
141 .blank(20)
142 .EAN2('53')
143 .render()
144
145// EAN-5 equivalent
146barcode('#barcode')
147 .EAN13('9771234567003')
148 .blank(20)
149 .EAN5('00053')
150 .render()
151```
152
153[!NOTE] Image needed: Comparison between EAN-2 and EAN-5 supplements
docs/api/barcode/EAN/EAN5.md docs/api/barcode/EAN/EAN-5.mdrenamed+0-0

Renamed from docs/api/barcode/EAN/EAN5.md. The contents are unchanged.

docs/api/barcode/EAN/EAN8.md docs/api/barcode/EAN/EAN-8.mdrenamed+0-0

Renamed from docs/api/barcode/EAN/EAN8.md. The contents are unchanged.

docs/api/barcode/EAN/EAN13.mddeleted+0-146
@@ -1,146 +0,0 @@
1# EAN & UPC Barcodes
2
3EAN (European Article Number) and UPC (Universal Product Code) are standardized barcodes used worldwide for retail products. These barcode systems are managed by GS1 and are crucial for product identification in retail environments.
4
5## Supported Formats
6
7qrx supports the following EAN/UPC formats:
8- EAN-13 (GTIN-13)
9- EAN-8
10- EAN-5 (Add-on)
11- EAN-2 (Add-on)
12- UPC-A
13- UPC-E
14
15## Basic Usage
16
17```ts
18import { barcode } from '@stacksjs/qrx'
19
20// EAN-13 example
21barcode('#barcode', '5901234123457', { format: 'EAN13' })
22
23// UPC example
24barcode('#barcode', '123456789999', { format: 'UPC' })
25
26// EAN-8 example
27barcode('#barcode', '96385074', { format: 'EAN8' })
28
29// Add-on examples
30barcode('#barcode', '54495', { format: 'EAN5' })
31barcode('#barcode', '53', { format: 'EAN2' })
32```
33
34## Common Options
35
36All EAN/UPC formats support these basic options:
37
38```ts
39import { barcode } from '@stacksjs/qrx'
40
41barcode('#barcode', '5901234123457', {
42 format: 'EAN13',
43 width: 2, // Bar width
44 height: 100, // Barcode height
45 displayValue: true, // Show text below barcode
46 fontSize: 20, // Text size
47 font: 'monospace', // Text font
48 textAlign: 'center', // Text alignment
49 textPosition: 'bottom', // Text position
50 background: '#ffffff', // Background color
51 lineColor: '#000000', // Bar color
52 flat: false, // Remove guard bars if true
53})
54```
55
56## Add-on Barcodes
57
58EAN-5 and EAN-2 are supplemental barcodes typically used with EAN-13 or UPC-A. They can be combined using the advanced syntax:
59
60```ts
61import { barcode } from '@stacksjs/qrx'
62
63barcode('#barcode')
64 .EAN13('1234567890128')
65 .blank(20) // Creates space between barcodes
66 .EAN5('12345', {
67 height: 85,
68 textPosition: 'top',
69 fontSize: 16
70 })
71 .render()
72```
73
74[!NOTE] Image needed: Example of combined EAN-13 and EAN-5 barcodes
75
76## Flat Option
77
78EAN-13, EAN-8, and UPC formats support a `flat` option to remove guard bars:
79
80```ts
81import { barcode } from '@stacksjs/qrx'
82
83barcode('#barcode', '1234567890128', {
84 format: 'EAN13',
85 flat: true
86})
87```
88
89[!NOTE] Image needed: Comparison of EAN-13 with and without guard bars
90
91## Check Digits
92
93EAN-13, UPC, and EAN-8 include a check digit for validation. If not provided, it's automatically calculated:
94
95```ts
96barcode('#barcode', '590123412345', { format: 'EAN13' })
97// Automatically adds check digit: '5901234123457'
98```
99
100
101## OCR-B Font Support
102
103Standard EAN/UPC barcodes typically use OCR-B font. You can specify this using @font-face:
104
105```ts
106barcode('#barcode', '123456789012', {
107 format: 'EAN13',
108 font: 'OCRB',
109 fontSize: 18,
110 textMargin: 0
111})
112```
113
114[!NOTE] Remember to load the OCR-B font via @font-face before generating the barcode.
115
116## Common Use Cases
117
1181. Retail Products
119 - Product identification
120 - Inventory management
121 - Point of sale scanning
1222. ISBN Books
123 - EAN-13 format with "978" or "979" prefix
124 - Optional EAN-5 add-on for price
1253. Magazines & Periodicals
126 - ISSN numbers in EAN-13 format
127 - EAN-2 add-on for issue numbers
128
129## Detailed Format Documentation
130
131For detailed information about specific formats, see:
132
133- EAN-13 - 13-digit format, most common worldwide
134- EAN-8 - 8-digit format for smaller packages
135- EAN-5 - 5-digit supplemental barcode
136- EAN-2 - 2-digit supplemental barcode
137- UPC-A - 12-digit format, common in North America
138- UPC-E - Compressed 8-digit format
139
140## Technical Notes
141
142- All formats include automatic check digit calculation
143- Guard patterns are automatically added _(unless `flat: true`)_
144- Text alignment and positioning can be customized
145- Support for supplemental EAN-2/EAN-5 add-ons
146- Automatic font sizing based on barcode dimensions
docs/api/barcode/EAN/index.mdmodified+93-83
@@ -1,137 +1,147 @@
1# EAN-13
1# EAN & UPC Barcodes
22
3EAN-13 _(European Article Number)_ is the most widely used retail barcode format globally. It consists of 13 digits and is also known as GTIN-13 (Global Trade Item Number).
3EAN (European Article Number) and UPC (Universal Product Code) are standardized barcodes used worldwide for retail products. These barcode systems are managed by GS1 and are crucial for product identification in retail environments.
4
5## Supported Formats
6
7qrx supports the following EAN/UPC formats:
8
9- [EAN-13](/api/barcode/EAN/EAN-13) _(GTIN-13)_
10- [EAN-8](/api/barcode/EAN/EAN-8)
11- [EAN-5](/api/barcode/EAN/EAN-5) _(Add-on)_
12- [EAN-2](/api/barcode/EAN/EAN-2) _(Add-on)_
13- [UPC-A](/api/barcode/EAN/UPC-A)
14- [UPC-E](/api/barcode/EAN/UPC-E)
415
516## Basic Usage
617
718```ts
819import { barcode } from '@stacksjs/qrx'
920
21// EAN-13 example
1022barcode('#barcode', '5901234123457', { format: 'EAN13' })
11```
12
13[!NOTE] Image needed: Basic EAN-13 barcode example
1423
15## Structure
24// UPC example
25barcode('#barcode', '123456789999', { format: 'UPC' })
1626
17An EAN-13 barcode consists of:
18
19- First 2-3 digits: Country/GS1 prefix
20- Next 4-5 digits: Manufacturer code
21- Next 5 digits: Product code
22- Last digit: Check digit (automatically calculated)
23
24## Auto Check Digit
25
26The check digit is automatically calculated if omitted:
27
28```ts
29import { barcode } from '@stacksjs/qrx'
27// EAN-8 example
28barcode('#barcode', '96385074', { format: 'EAN8' })
3029
31// These generate the same barcode
32barcode('#barcode', '590123412345', { format: 'EAN13' }) // Auto-calculates check digit
33barcode('#barcode', '5901234123457', { format: 'EAN13' }) // Manual check digit
30// Add-on examples
31barcode('#barcode', '54495', { format: 'EAN5' })
32barcode('#barcode', '53', { format: 'EAN2' })
3433```
3534
36## Advanced Options
35## Common Options
36
37All EAN/UPC formats support these basic options:
3738
3839```ts
3940import { barcode } from '@stacksjs/qrx'
4041
4142barcode('#barcode', '5901234123457', {
4243 format: 'EAN13',
43 width: 2,
44 height: 100,
45 displayValue: true,
46 font: 'OCRB',
47 fontSize: 18,
48 textMargin: 0,
49 flat: false,
50 lastChar: '>'
44 width: 2, // Bar width
45 height: 100, // Barcode height
46 displayValue: true, // Show text below barcode
47 fontSize: 20, // Text size
48 font: 'monospace', // Text font
49 textAlign: 'center', // Text alignment
50 textPosition: 'bottom', // Text position
51 background: '#ffffff', // Background color
52 lineColor: '#000000', // Bar color
53 flat: false, // Remove guard bars if true
5154})
5255```
5356
54## Flat Mode
57## Add-on Barcodes
5558
56Remove guard bars for special applications:
59EAN-5 and EAN-2 are supplemental barcodes typically used with EAN-13 or UPC-A. They can be combined using the advanced syntax:
5760
5861```ts
5962import { barcode } from '@stacksjs/qrx'
6063
61barcode('#barcode', '5901234123457', {
62 format: 'EAN13',
63 flat: true
64})
64barcode('#barcode')
65 .EAN13('1234567890128')
66 .blank(20) // Creates space between barcodes
67 .EAN5('12345', {
68 height: 85,
69 textPosition: 'top',
70 fontSize: 16
71 })
72 .render()
6573```
6674
67[!NOTE] Image needed: EAN-13 barcode in flat mode
75[!NOTE] Image needed: Example of combined EAN-13 and EAN-5 barcodes
6876
69## Last Character
77## Flat Option
7078
71Add a character after the barcode (commonly '>')
79EAN-13, EAN-8, and UPC formats support a `flat` option to remove guard bars:
7280
7381```ts
7482import { barcode } from '@stacksjs/qrx'
7583
76barcode('#barcode', '5901234123457', {
84barcode('#barcode', '1234567890128', {
7785 format: 'EAN13',
78 lastChar: '>'
86 flat: true
7987})
8088```
8189
82[!NOTE] Image needed: EAN-13 barcode with last character
90[!NOTE] Image needed: Comparison of EAN-13 with and without guard bars
8391
84## Add-on Support
92## Check Digits
8593
86Combine with EAN-2 or EAN-5 supplemental barcodes:
87
88import { barcode } from '@stacksjs/qrx'
94[EAN-13](/api/barcode/EAN/EAN-13), [UPC](/api/barcode/EAN/UPC), and [EAN-8](/api/barcode/EAN/EAN-8) include a check digit for validation. If not provided, it's automatically calculated:
8995
9096```ts
91barcode('#barcode')
92 .EAN13('9781234567897')
93 .blank(20)
94 .EAN5('12345', { height: 85, textPosition: 'top' })
95 .render()
97barcode('#barcode', '590123412345', { format: 'EAN13' })
98// Automatically adds check digit: '5901234123457'
9699```
97100
98[!NOTE] Image needed: EAN-13 barcode with EAN-5 add-on
99
100## Common Applications
101
1021. Retail Products
103 - Standard retail products
104 - Point of sale scanning
105 - Inventory management
1062. Books (ISBN)
107 - Prefix: 978 or 979
108 - Used with EAN-5 for price
1093. Periodicals (ISSN)
110 - Prefix: 977
111 - Used with EAN-2 for issue numbers
112101
113[!NOTE] Image needed: Real-world application examples
102## OCR-B Font Support
114103
115## Error Handling
104Standard EAN/UPC barcodes typically use OCR-B font. You can specify this using @font-face:
116105
117106```ts
118import { barcode } from '@stacksjs/qrx'
119
120barcode('#barcode', '5901234123457', {
107barcode('#barcode', '123456789012', {
121108 format: 'EAN13',
122 valid: (valid) => {
123 if (!valid) {
124 console.error('Invalid EAN-13')
125 // Handle invalid input
126 }
127 }
109 font: 'OCRB',
110 fontSize: 18,
111 textMargin: 0
128112})
129113```
130114
131## Best Practices
115[!NOTE] Remember to load the OCR-B font via @font-face before generating the barcode.
116
117## Common Use Cases
132118
1331. Always validate input length (12-13 digits)
1342. Use OCR-B font for standard compliance
1353. Ensure adequate quiet zones
1364. Test scanner compatibility
1375. Consider add-on requirements
1191. Retail Products
120 - Product identification
121 - Inventory management
122 - Point of sale scanning
1232. ISBN Books
124 - EAN-13 format with "978" or "979" prefix
125 - Optional EAN-5 add-on for price
1263. Magazines & Periodicals
127 - ISSN numbers in EAN-13 format
128 - EAN-2 add-on for issue numbers
129
130## Detailed Format Documentation
131
132For detailed information about specific formats, see:
133
134- [EAN-13](/api/barcode/EAN/EAN-13) - 13-digit format, most common worldwide
135- [EAN-8](/api/barcode/EAN/EAN-8) - 8-digit format for smaller packages
136- [EAN-5](/api/barcode/EAN/EAN-5) - 5-digit supplemental barcode
137- [EAN-2](/api/barcode/EAN/EAN-2) - 2-digit supplemental barcode
138- [UPC-A](/api/barcode/EAN/UPC-A) - 12-digit format, common in North America
139- [UPC-E](/api/barcode/EAN/UPC-E) - Compressed 8-digit format
140
141## Technical Notes
142
143- All formats include automatic check digit calculation
144- Guard patterns are automatically added _(unless `flat: true`)_
145- Text alignment and positioning can be customized
146- Support for supplemental EAN-2/EAN-5 add-ons
147- Automatic font sizing based on barcode dimensions