ReviewOS
Reload

also looking at this

stacks/ts-qr-codes

chore(deps): update dependency react to 19.2.7

#2137
Closed chris wants to merge buddy-bot/update-major-update-react 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/api/barcode/EAN.mddeleted+0-93
@@ -1,93 +0,0 @@
1# EAN
2
3EAN comes in a variety of forms, most commonly used is EAN-13 (GTIN-13) that is used on world wide to marking the identity of products.
4
5`qrx` supports the formats EAN-13, EAN-8 and UPC as well as the barcode addons EAN-5 and EAN-2.
6
7## Supported modes
8
9```ts
10import { barcode } from '@stacksjs/qrx'
11
12barcode('#barcode', '5901234123457', { format: 'EAN13' })
13barcode('#barcode', '123456789999', { format: 'UPC' })
14barcode('#barcode', '96385074', { format: 'EAN8' })
15barcode('#barcode', '54495', { format: 'EAN5' })
16barcode('#barcode', '53', { format: 'EAN2' })
17```
18
19## Addon EAN-5 / EAN-2
20
21EAN-5 and EAN-2 is addon barcodes an is always used combined with EAN-13 or EAN-8.
22The advanced barcode syntax can be used to add these addons to the barcodes.
23
24```ts
25import { barcode } from '@stacksjs/qrx'
26
27barcode('#barcode')
28 .EAN13('1234567890128')
29 .blank(20) // An blank creates a space between the barcodes
30 .EAN5('12345', { height: 85, textPosition: 'top', fontSize: 16 })
31 .render()
32```
33
34![EAN-13 + EAN-5](http://i.imgur.com/6GKSc9e.png)
35
36## `flat` options for EAN-13, EAN-8 and UPC
37
38EAN-13, EAN-8 and UPC barcodes is most often used with "guard bars". If you don't want these and instead a flat rendering you can specify the `flat` option and skip the guard bars.
39
40```ts
41import { barcode } from '@stacksjs/qrx'
42
43barcode('#barcode', '1234567890128', {
44 format: 'ean13',
45 flat: true
46})
47```
48
49![flat EAN-13](http://i.imgur.com/UGu1sbo.png)
50
51## `lastChar` options for EAN-13
52
53EAN-13 is sometimes printed with with a character after the barcode, most common is the `>` character. This is supported in barcode with the `lastChar` option.
54
55```ts
56import { barcode } from '@stacksjs/qrx'
57
58barcode('#barcode', '1234567890128', {
59 format: 'ean13',
60 lastChar: '>'
61})
62```
63
64![lastChar example](http://i.imgur.com/XgQEbmI.png)
65
66## OCR-B font
67
68When creating an EAN or UPC barcode it is standard to use the [OCR-B](https://en.wikipedia.org/wiki/OCR-B) font. Most variants of this font is not free. There are free versions but none that (we have found) that have the correct license to be able to include in the barcode repository.
69
70When using a custom font with barcode you can specify the font with [@font-face](https://developer.mozilla.org/en/docs/Web/CSS/@font-face) and then do the barcode call. Note that the font has to be loaded before the generation can be made correctly.
71
72```ts
73barcode('#canvasBarcode', '123456789012', {
74 format: 'EAN13',
75 font: 'OCRB',
76 fontSize: 18,
77 textMargin: 0
78})
79```
80
81![Barcode with OCR-B font](http://i.imgur.com/g0cWEQc.png)
82
83## Check digits
84
85EAN-13, UPC and EAN-8 all have the last digit being a check digit to verify the content that is encoded. This digit is considered a part of the number and barcode will verify it before generating the barcode.
86
87If the last digit of these barcodes are not specified it will automatically be calculated and added.
88
89```ts
90barcode('#barcode', '96385074', { format: 'EAN8' })
91// These two are generating identical barcodes
92barcode('#barcode', '9638507', { format: 'EAN8' })
93```
docs/api/barcode/EAN/EAN13.mdadded+146-0
@@ -0,0 +1,146 @@
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/EAN8.mdadded+131-0
@@ -0,0 +1,131 @@
1# EAN-8
2
3EAN-8 is a shortened version of EAN-13, designed for use on smaller packages where an EAN-13 barcode would be too large. It consists of 8 digits and maintains compatibility with retail scanning systems.
4
5## Basic Usage
6
7```ts
8import { barcode } from '@stacksjs/qrx'
9
10barcode('#barcode', '96385074', { format: 'EAN8' })
11```
12
13[!NOTE] Image needed: Basic EAN-8 barcode example
14
15## Structure
16
17An EAN-8 barcode consists of:
18
19- First 2-3 digits: Country/region code
20- Next 4-5 digits: Product code
21- Last digit: Check digit (automatically calculated)
22
23## Auto Check Digit
24
25The check digit is automatically calculated if omitted:
26
27```ts
28import { barcode } from '@stacksjs/qrx'
29
30// These generate the same barcode
31barcode('#barcode', '9638507', { format: 'EAN8' }) // Auto-calculates check digit
32barcode('#barcode', '96385074', { format: 'EAN8' }) // Manual check digit
33```
34
35## Advanced Options
36
37You can customize the appearance of EAN-8 barcodes with these options:
38
39```ts
40import { barcode } from '@stacksjs/qrx'
41
42barcode('#barcode', '96385074', {
43 format: 'EAN8',
44 width: 2,
45 height: 100,
46 displayValue: true,
47 font: 'OCRB',
48 fontSize: 18,
49 textMargin: 0,
50 flat: false
51})
52```
53
54## Flat Mode
55
56Remove guard bars for special applications:
57
58```ts
59import { barcode } from '@stacksjs/qrx'
60
61barcode('#barcode', '96385074', {
62 format: 'EAN8',
63 flat: true
64})
65```
66
67[!NOTE] Image needed: EAN-8 flat mode example
68
69## Add-on Support
70
71Can be combined with EAN-2 or EAN-5 supplemental barcodes:
72
73```ts
74import { barcode } from '@stacksjs/qrx'
75
76barcode('#barcode')
77 .EAN8('96385074')
78 .blank(20)
79 .EAN2('12', { height: 85, textPosition: 'top' })
80 .render()
81```
82
83[!NOTE] Image needed: EAN-8 with add-on example
84
85## Common Applications
86
871. Small Products
88 - Confectionery
89 - Cosmetics
90 - Small electronics
912. Space-Limited Packaging
92 - Travel-size products
93 - Small containers
94 - Limited label space
95
96[!NOTE] Image needed: Real-world application examples
97
98## Error Handling
99
100```ts
101import { barcode } from '@stacksjs/qrx'
102
103barcode('#barcode', '96385074', {
104 format: 'EAN8',
105 valid: (valid) => {
106 if (!valid) {
107 console.error('Invalid EAN-8')
108 // Handle invalid input
109 }
110 }
111})
112```
113
114## Best Practices
115
1161. Use only when EAN-13 is too large
1172. Validate input length (7-8 digits)
1183. Use OCR-B font for standard compliance
1194. Ensure adequate quiet zones
1205. Test scanner compatibility
121
122## Size Comparison
123
124[!NOTE] Image needed: Size comparison between EAN-8 and EAN-13
125
126## Technical Notes
127
128- Smaller data capacity than EAN-13
129- Compatible with all EAN/UPC scanners
130- Requires registration with GS1
131- Less commonly used than EAN-13
docs/api/barcode/EAN/index.mdadded+137-0
@@ -0,0 +1,137 @@
1# EAN-13
2
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).
4
5## Basic Usage
6
7```ts
8import { barcode } from '@stacksjs/qrx'
9
10barcode('#barcode', '5901234123457', { format: 'EAN13' })
11```
12
13[!NOTE] Image needed: Basic EAN-13 barcode example
14
15## Structure
16
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'
30
31// These generate the same barcode
32barcode('#barcode', '590123412345', { format: 'EAN13' }) // Auto-calculates check digit
33barcode('#barcode', '5901234123457', { format: 'EAN13' }) // Manual check digit
34```
35
36## Advanced Options
37
38```ts
39import { barcode } from '@stacksjs/qrx'
40
41barcode('#barcode', '5901234123457', {
42 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: '>'
51})
52```
53
54## Flat Mode
55
56Remove guard bars for special applications:
57
58```ts
59import { barcode } from '@stacksjs/qrx'
60
61barcode('#barcode', '5901234123457', {
62 format: 'EAN13',
63 flat: true
64})
65```
66
67[!NOTE] Image needed: EAN-13 barcode in flat mode
68
69## Last Character
70
71Add a character after the barcode (commonly '>')
72
73```ts
74import { barcode } from '@stacksjs/qrx'
75
76barcode('#barcode', '5901234123457', {
77 format: 'EAN13',
78 lastChar: '>'
79})
80```
81
82[!NOTE] Image needed: EAN-13 barcode with last character
83
84## Add-on Support
85
86Combine with EAN-2 or EAN-5 supplemental barcodes:
87
88import { barcode } from '@stacksjs/qrx'
89
90```ts
91barcode('#barcode')
92 .EAN13('9781234567897')
93 .blank(20)
94 .EAN5('12345', { height: 85, textPosition: 'top' })
95 .render()
96```
97
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
112
113[!NOTE] Image needed: Real-world application examples
114
115## Error Handling
116
117```ts
118import { barcode } from '@stacksjs/qrx'
119
120barcode('#barcode', '5901234123457', {
121 format: 'EAN13',
122 valid: (valid) => {
123 if (!valid) {
124 console.error('Invalid EAN-13')
125 // Handle invalid input
126 }
127 }
128})
129```
130
131## Best Practices
132
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