OpenButton/add_wave_grid.js at main · samay-hash/OpenButton · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
const fs = require('fs');
const path = require('path');

const pageTsxPath = 'frontend/app/dashboard/components/page.tsx';
let pageTsx = fs.readFileSync(pageTsxPath, 'utf8');

const waveGridCode = fs.readFileSync('frontend/components/backgrounds/wave-grid-background.tsx', 'utf8');
const arrWaveGrid = waveGridCode.split('\n').map(l => JSON.stringify(l));

const REPLACEMENT = `'wave-grid': {
    filename: 'WaveGridBackground.tsx',
    deps: 'react · three · clsx · tailwind-merge',
    install: 'npm i three clsx tailwind-merge',
    code: [
      ${arrWaveGrid.join(',\n      ')}
    ].join('\\n')
  },
  'ascii-glitch': {`;

pageTsx = pageTsx.replace(/'ascii-glitch': \{/, REPLACEMENT);

// Add import
pageTsx = pageTsx.replace(
  /import AsciiGlitchRipple from "@\/components\/motion\/ascii-glitch-ripple"/,
  `import AsciiGlitchRipple from "@/components/motion/ascii-glitch-ripple"\nimport WaveGridBackground from "@/components/backgrounds/wave-grid-background"`
);

// Add to ButtonPreview
pageTsx = pageTsx.replace(
  /if \(comp\.style === 'ascii-glitch'\) \{/,
  `if (comp.style === 'wave-grid') {
    return <WaveGridBackground />
  }
  if (comp.style === 'ascii-glitch') {`
);

// Add Background Effects to tabs
pageTsx = pageTsx.replace(
  /\['All', 'Buttons', 'Motion Effects'\]/,
  `['All', 'Background Effects', 'Buttons', 'Motion Effects']`
);

fs.writeFileSync(pageTsxPath, pageTsx);