feat: Add new hashtag option for modules and finder patter inner

Author: LGLabGreg

.changeset/dirty-elephants-watch.md .changeset/clean-parrots-study.md.changeset/dirty-elephants-watch.md renamed to .changeset/clean-parrots-study.md

@@ -1,7 +1,7 @@
 {
   "$schema": "https://unpkg.com/@changesets/config@3.0.5/schema.json",
   "changelog": ["@changesets/cli/changelog", { "repo": "LGLabGreg/react-qr-code" }],
-  "commit": true,
+  "commit": false,
   "fixed": [],
   "linked": [],
   "access": "public",

.changeset/config.json

@@ -39,6 +39,7 @@ export const FINDER_PATTERN_INNER_STYLES: FinderPatternInnerStyle[] = [
   'diamond',
   'heart',
   'star',
+  'hashtag',
 ]
 
 export const DATA_MODULES_STYLES: DataModulesStyle[] = [
@@ -52,4 +53,5 @@ export const DATA_MODULES_STYLES: DataModulesStyle[] = [
   'diamond',
   'star',
   'heart',
+  'hashtag',
 ]

apps/playground/src/constants.ts

@@ -34,10 +34,13 @@ describe('DataModules', () => {
       diamond: 'diamond',
       heart: 'heart',
       star: 'star',
+      hashtag: 'hashtag',
     }
 
     Object.entries(stylesToMethods).forEach(([style, method]) => {
-      const utils = style === 'heart' || style === 'star' ? svgUtils : dataModulesUtils
+      const utils = ['heart', 'star', 'hashtag'].includes(style)
+        ? svgUtils
+        : dataModulesUtils
       const spy = vi.spyOn(utils, method as keyof typeof utils)
 
       render(

packages/react-qr-code/src/components/data-modules.test.tsx

@@ -24,7 +24,7 @@ import {
 import { isFinderPatternInnerModule } from '../utils/finder-patterns-inner'
 import { isFinderPatternOuterModule } from '../utils/finder-patterns-outer'
 import { sanitizeDataModulesSettings } from '../utils/settings'
-import { heart, star } from '../utils/svg'
+import { hashtag, heart, star } from '../utils/svg'
 
 export const DataModules = ({
   modules,
@@ -75,6 +75,8 @@ export const DataModules = ({
           )
         } else if (style === 'heart') {
           ops.push(heart(xPos, yPos, size))
+        } else if (style === 'hashtag') {
+          ops.push(hashtag(xPos, yPos, size))
         } else if (style === 'rounded') {
           const { left, right, top, bottom, count } = getModuleNeighbours(x, y, modules)
 

packages/react-qr-code/src/components/data-modules.tsx

@@ -130,4 +130,20 @@ describe('DataModules', () => {
       expect(path.getAttribute('fill')).toBe('#ff0000')
     })
   })
+
+  it('renders correctly with style hashtag', () => {
+    const spy = vi.spyOn(svgUtils, 'hashtag')
+    render(
+      <FinderPatternsInner
+        {...defaultProps}
+        settings={{ style: 'hashtag', color: '#ff0000' }}
+      />,
+    )
+    const paths = screen.getAllByTestId('finder-patterns-inner')
+    expect(paths).toHaveLength(3)
+    paths.forEach((path) => {
+      expect(spy).toHaveBeenCalled()
+      expect(path.getAttribute('fill')).toBe('#ff0000')
+    })
+  })
 })

packages/react-qr-code/src/components/finder-patter-inner.test.tsx

@@ -14,7 +14,7 @@ import {
   finderPatternsInnerLeaf,
 } from '../utils/finder-patterns-inner'
 import { sanitizeFinderPatternInnerSettings } from '../utils/settings'
-import { heart, star } from '../utils/svg'
+import { hashtag, heart, star } from '../utils/svg'
 
 const testProps = {
   'data-testid': 'finder-patterns-inner',
@@ -155,4 +155,11 @@ export const FinderPatternsInner = ({
       return <path key={key(x, y)} fill={fill} d={path} {...testProps} />
     })
   }
+
+  if (style === 'hashtag') {
+    return coordinates.map(({ x, y }) => {
+      const path = hashtag(x - 0.25, y - 0.25, 3.5)
+      return <path key={key(x, y)} fill={fill} d={path} {...testProps} />
+    })
+  }
 }

packages/react-qr-code/src/components/finder-patterns-inner.tsx

@@ -39,6 +39,7 @@ export type DataModulesStyle =
   | 'diamond'
   | 'star'
   | 'heart'
+  | 'hashtag'
 
 export interface DataModulesSettings {
   color?: string
@@ -85,6 +86,7 @@ export type FinderPatternInnerStyle =
   | 'diamond'
   | 'star'
   | 'heart'
+  | 'hashtag'
 
 export interface FinderPatternInnerSettings {
   color?: string

packages/react-qr-code/src/types/lib.ts

@@ -6,7 +6,8 @@ export const dataModuleCanBeRandomSize = (style: DataModulesStyle): boolean =>
   style === 'circle' ||
   style === 'star' ||
   style === 'heart' ||
-  style === 'diamond'
+  style === 'diamond' ||
+  style === 'hashtag'
 
 export const getScaleFactor = (style: string, isRandom: boolean) => {
   if (style === 'square-sm') {

packages/react-qr-code/src/utils/data-modules.ts

@@ -21,21 +21,55 @@ export const calculateGradientVectors = (rotation: number) => {
 }
 
 export const star = (cx: number, cy: number, size: number, spikes: number): string => {
-  const outerRadius = size / 2 // Outer radius of the star
-  const innerRadius = outerRadius / 2 // Inner radius for the star
-  const step = Math.PI / spikes // Angle step for star points
+  const outerRadius = size / 2
+  const innerRadius = outerRadius / 2
+  const step = Math.PI / spikes
   let path = ''
 
   for (let i = 0; i < 2 * spikes; i++) {
-    const angle = i * step - Math.PI / 2 // Start angle at the top
-    const radius = i % 2 === 0 ? outerRadius : innerRadius // Alternate between outer and inner radius
+    const angle = i * step - Math.PI / 2
+    const radius = i % 2 === 0 ? outerRadius : innerRadius
     const px = cx + radius * Math.cos(angle)
     const py = cy + radius * Math.sin(angle)
     path += `${i === 0 ? 'M' : 'L'} ${px},${py} `
   }
   return path + 'Z' // Close the path
 }
 
+export const hashtag = (x: number, y: number, size: number) => {
+  const eigth = size / 8
+  return `M ${x + size} ${y + eigth * 3} 
+   V ${y + eigth}
+   h -${eigth}
+   V ${y}
+   H ${x + eigth * 5}
+   v ${eigth}
+   H ${x + eigth * 3}
+   V ${y}
+   H ${x + eigth}
+   v ${eigth}
+   H ${x}
+   v ${eigth * 2}
+   h ${eigth}
+   v ${eigth * 2}
+   H ${x}
+   v ${eigth * 2}
+   h ${eigth}
+   v ${eigth}
+   h ${eigth * 2}
+   v -${eigth}
+   h ${eigth * 2}
+   v ${eigth}
+   h ${eigth * 2}
+   v -${eigth}
+   h ${eigth}
+   V ${y + eigth * 5}
+   h -${eigth}
+   V ${y + eigth * 3}
+   h ${eigth}
+   Z`
+}
+
 export const heart = (x: number, y: number, size: number) => {
   let move = false
   let i = 0