mirror of
https://github.com/maziggy/bambuddy.git
synced 2026-10-03 20:56:18 +02:00
maziggy
86b54026f6
@maugsburger surfaced four bugs against the original #1154 multi-colour swatch work: 1. Editing an existing spool always opened with the Extra Colours field blank, even when the COLOR preview banner above it was rendering correctly from the saved data. ColorSection seeded its local ``extraColorsDraft`` via ``useState(formData.extra_colors)`` at mount time, but SpoolFormModal opens *before* its own useEffect populates ``formData`` from the spool record — so by the time the saved value landed, the input had already locked onto ''. The user then had to retype the value before saving anything else. 2. Dual Color and Gradient produced the same diagonal blend (``linear-gradient(135deg, A, B)``), so the two variants were visually indistinguishable. The whole point of the Dual Color variant is that the spool has two distinct bars on the reel — a smooth blend defeats it. 3. Sparkle was almost invisible on card-sized swatches. The original 4-dot pattern (each ~1px) read fine on the inline 20×20 swatch but disappeared on the 60-pixel inventory card banners — exactly where the user actually identifies a spool. 4. Checkerboard cell density scaled with the swatch — the same 4-cell pattern was either tiny squares on a small swatch or four huge squares on a card-sized banner. The user couldn't tell a translucent filament from a multi-colour one because the indicator changed shape. Fix: - ``ColorSection.tsx``: ref-guarded ``useEffect`` resyncs the draft whenever the parent's ``formData.extra_colors`` changes via an external update. ``commitExtraColors`` updates the ref before calling ``updateField`` so live user typing is round-tripped without the resync useEffect clobbering it. - ``filamentSwatchHelpers.ts: buildColorLayer``: branch on ``effect_type``. ``dual-color`` and ``tri-color`` produce ``linear-gradient(to right, c1 0 X%, c2 X% Y%, ...)`` with CSS double-position stops (hard line, not blend) and equal-width segments. ``gradient`` keeps the original 135° smooth blend. The ``multicolor`` conic-gradient path is untouched. - ``filamentSwatchHelpers.ts: EFFECT_OVERLAYS.sparkle``: bumped from 4 dots to 13 flecks in mixed sizes (1 / 1.5 / 2 px) and varying opacity (0.65 → 1.0) for a depth-of-field "metal flake" feel. - ``filamentSwatchHelpers.ts: buildFilamentBackground``: now returns ``{ backgroundImage, backgroundSize }`` so per-layer sizes can be applied — painted layers stay ``cover``, the checkerboard gets a fixed 12px tile so cell density is constant regardless of element size. Updated the three existing call sites (``InventoryPage`` group banner + spool card, ``ColorSection`` preview) to spread the style object directly. ``FilamentSwatch.tsx`` composes the same per-layer sizing inline so its output stays in lockstep. Tests: 8 new frontend cases pinning the four fixes — Dual/Tri Color hard-split (3 tests + 1 regression guard that Dual ≠ Gradient for the same stops), Sparkle prominence (≥ 10 distinct radial-gradient layers in the rendered background), checkerboard density (last backgroundSize layer is a fixed pixel value, not ``cover``), 4 hydration cases (fills when formData arrives via parent update, resyncs when the spool changes mid-form, doesn't clobber live user typing, clears when the new spool has no extra_colors). Existing buildFilamentBackground tests updated for the new return-object shape. Full frontend suite: 1610 passed; full backend suite: 3598 passed; no regressions.
React + TypeScript + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel (or oxc when used in rolldown-vite) for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
React Compiler
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.
Expanding the ESLint configuration
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Remove tseslint.configs.recommended and replace with this
tseslint.configs.recommendedTypeChecked,
// Alternatively, use this for stricter rules
tseslint.configs.strictTypeChecked,
// Optionally, add this for stylistic rules
tseslint.configs.stylisticTypeChecked,
// Other configs...
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])
You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Enable lint rules for React
reactX.configs['recommended-typescript'],
// Enable lint rules for React DOM
reactDom.configs.recommended,
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])