From 73949309d5fadce0786e1e8d3d9d3a25df3ba51c Mon Sep 17 00:00:00 2001 From: Daniela Wellisz Date: Thu, 23 Jan 2025 09:31:43 -0800 Subject: [PATCH 1/9] move StretchLengths file to Experimental --- .../{StretchLengths.test.tsx => Experimental.test.tsx} | 6 +++--- src/projects/{StretchLengths.tsx => Experimental.tsx} | 0 src/wrapper.tsx | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) rename src/projects/{StretchLengths.test.tsx => Experimental.test.tsx} (76%) rename src/projects/{StretchLengths.tsx => Experimental.tsx} (100%) diff --git a/src/projects/StretchLengths.test.tsx b/src/projects/Experimental.test.tsx similarity index 76% rename from src/projects/StretchLengths.test.tsx rename to src/projects/Experimental.test.tsx index 7d9d82b..a0a3363 100644 --- a/src/projects/StretchLengths.test.tsx +++ b/src/projects/Experimental.test.tsx @@ -1,13 +1,13 @@ import { describe, it, expect } from 'vitest' import { render, screen } from '@testing-library/react' import { MemoryRouter } from "react-router-dom"; -import StretchLengths from './StretchLengths' +import Experimental from './Experimental' -describe('StretchLengths', () => { +describe('Experimental', () => { it('renders the StretchLengths component with a swatch in it', () => { render( - + ) expect(screen.getAllByTestId("swatch").length).toEqual(1) diff --git a/src/projects/StretchLengths.tsx b/src/projects/Experimental.tsx similarity index 100% rename from src/projects/StretchLengths.tsx rename to src/projects/Experimental.tsx diff --git a/src/wrapper.tsx b/src/wrapper.tsx index 4358714..5220e67 100644 --- a/src/wrapper.tsx +++ b/src/wrapper.tsx @@ -6,7 +6,7 @@ import Preview from './projects/Preview' import Sunflower from './projects/Sunflower' import Doodle from './projects/Doodle' import LogoOption from './projects/LogoOption' -import StretchLengths from './projects/StretchLengths' +import Experimental from './projects/Experimental' import Parallax from './projects/Parallax' import DoloresParkTote from './projects/DoloresParkTote' import SwimLesson from './projects/SwimLesson' @@ -37,7 +37,7 @@ const router = createBrowserRouter([ }, { path: "/experimental", - element: + element: }, { path: "/parallax", From b08df618a1737b210739d211bca08c1f13573038 Mon Sep 17 00:00:00 2001 From: Daniela Wellisz Date: Thu, 11 Apr 2024 21:40:29 -0700 Subject: [PATCH 2/9] experimental endpoint now shows component named Experimental, add a few existing features to this page --- src/projects/Experimental.test.tsx | 2 +- src/projects/Experimental.tsx | 45 ++++++++++++++++++++++++++---- 2 files changed, 41 insertions(+), 6 deletions(-) diff --git a/src/projects/Experimental.test.tsx b/src/projects/Experimental.test.tsx index a0a3363..e844da1 100644 --- a/src/projects/Experimental.test.tsx +++ b/src/projects/Experimental.test.tsx @@ -4,7 +4,7 @@ import { MemoryRouter } from "react-router-dom"; import Experimental from './Experimental' describe('Experimental', () => { - it('renders the StretchLengths component with a swatch in it', () => { + it('renders the Experimental component with a swatch in it', () => { render( diff --git a/src/projects/Experimental.tsx b/src/projects/Experimental.tsx index f3af62d..0109544 100644 --- a/src/projects/Experimental.tsx +++ b/src/projects/Experimental.tsx @@ -1,13 +1,18 @@ import SwatchWithForm from '../SwatchWithForm'; import { StitchPattern, Color } from '../types' import { useSwatchConfigStateFromURLParams, useEffectToUpdateURLParamsFromSwatchConfig } from '../URLSwatchParams'; +import { useState } from "react"; +import ColorSequenceInfo from '../ColorSequenceInfo' +import DropdownInput from '../inputs/Dropdown'; const red = "#ff001d" as Color; const cream = "#fcf7eb" as Color; const ltblue = "#8dd0f2" as Color; const navy = "#0e0e66" as Color; -function StretchLengths() { +type StaggerType = 'colorStretched' | 'colorSwallowed' + +function Experimental() { const defaultSwatchConfig = { colorSequence: [ {color: navy, length: 3}, @@ -26,24 +31,54 @@ function StretchLengths() { const { swatchConfig, setSwatchConfig, setSearchParams} = useSwatchConfigStateFromURLParams(defaultSwatchConfig); + const [staggerType, setStaggerType] = useState('colorStretched' as StaggerType) + + const setStaggerTypeFromDropdown = (newStaggerType: string) => { + setStaggerType(newStaggerType as StaggerType) + } + useEffectToUpdateURLParamsFromSwatchConfig(swatchConfig, setSearchParams) return (
-

This is an experimental page

+

This is an experimental page. It might change at anytime and URLs can break.

+

Here are the current features:

    -
  • alternating row lengths uses the color stretching technique instead of changing lengths of rows
  • there is a button to double your colors
    • +
  • there's more info about the colors you see
    • +
  • you can change stagger type (not saved on url)

If you don't know what I'm talking about use the main app.

+
{ + e.preventDefault(); + }} + className='wide-first-column' + > +
+ + +
+
); } -export default StretchLengths; +export default Experimental; From 543e1f3c8f6f4baf21d96031ea64d3ff236b4f78 Mon Sep 17 00:00:00 2001 From: Daniela Wellisz Date: Thu, 11 Apr 2024 21:49:17 -0700 Subject: [PATCH 3/9] add information about number of color sequences displayed --- src/projects/Experimental.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/projects/Experimental.tsx b/src/projects/Experimental.tsx index 0109544..1180033 100644 --- a/src/projects/Experimental.tsx +++ b/src/projects/Experimental.tsx @@ -4,6 +4,7 @@ import { useSwatchConfigStateFromURLParams, useEffectToUpdateURLParamsFromSwatch import { useState } from "react"; import ColorSequenceInfo from '../ColorSequenceInfo' import DropdownInput from '../inputs/Dropdown'; +import { totalColorSequenceLength } from '../colorSequenceHelpers' const red = "#ff001d" as Color; const cream = "#fcf7eb" as Color; @@ -39,12 +40,15 @@ function Experimental() { useEffectToUpdateURLParamsFromSwatchConfig(swatchConfig, setSearchParams) + const numStitches = swatchConfig.stitchesPerRow * swatchConfig.numberOfRows + const numColorSequences = numStitches/totalColorSequenceLength(swatchConfig.colorSequence) + return (

This is an experimental page. It might change at anytime and URLs can break.

Here are the current features:

    -
  • there is a button to double your colors
    • +
  • there is a button to double your colors that makes a copy of all the colors
  • there's more info about the colors you see
  • you can change stagger type (not saved on url)
@@ -57,6 +61,9 @@ function Experimental() { >
+

In this swatch:

+ 
Number of stitches/clusters displayed (might be wrong with a stagger type): {numStitches}
+ 
Number of color sequences displayed: {numColorSequences.toFixed(1)}
Date: Fri, 12 Apr 2024 09:36:30 -0700 Subject: [PATCH 4/9] add color sequence length to label --- src/projects/Experimental.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/projects/Experimental.tsx b/src/projects/Experimental.tsx index 1180033..cb74635 100644 --- a/src/projects/Experimental.tsx +++ b/src/projects/Experimental.tsx @@ -63,7 +63,7 @@ function Experimental() {

In this swatch:

Number of stitches/clusters displayed (might be wrong with a stagger type): {numStitches}
- 
Number of color sequences displayed: {numColorSequences.toFixed(1)}
+ 
Number of {swatchConfig.colorSequence.length}-color color sequences displayed: {numColorSequences.toFixed(1)}
Date: Mon, 15 Apr 2024 12:10:52 -0700 Subject: [PATCH 5/9] make default stagger type normal --- src/projects/Experimental.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/projects/Experimental.tsx b/src/projects/Experimental.tsx index cb74635..1cc021a 100644 --- a/src/projects/Experimental.tsx +++ b/src/projects/Experimental.tsx @@ -32,7 +32,7 @@ function Experimental() { const { swatchConfig, setSwatchConfig, setSearchParams} = useSwatchConfigStateFromURLParams(defaultSwatchConfig); - const [staggerType, setStaggerType] = useState('colorStretched' as StaggerType) + const [staggerType, setStaggerType] = useState('normal' as StaggerType) const setStaggerTypeFromDropdown = (newStaggerType: string) => { setStaggerType(newStaggerType as StaggerType) From a35adce581af057cf53545982d6667c9c965c583 Mon Sep 17 00:00:00 2001 From: Daniela Wellisz Date: Thu, 16 Jan 2025 14:02:54 -0800 Subject: [PATCH 6/9] slight wording adjustment --- src/projects/Experimental.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/projects/Experimental.tsx b/src/projects/Experimental.tsx index 1cc021a..78646b5 100644 --- a/src/projects/Experimental.tsx +++ b/src/projects/Experimental.tsx @@ -67,11 +67,11 @@ function Experimental() { Date: Thu, 16 Jan 2025 14:11:30 -0800 Subject: [PATCH 7/9] show tooltip on dropdown input --- src/inputs/Dropdown.tsx | 6 +++++- src/projects/Experimental.tsx | 1 + 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/inputs/Dropdown.tsx b/src/inputs/Dropdown.tsx index 6013bae..4b6d946 100644 --- a/src/inputs/Dropdown.tsx +++ b/src/inputs/Dropdown.tsx @@ -1,5 +1,7 @@ +import ClickableTooltip from '../ClickableTooltip'; + function Dropdown( - { value, name, label, title, setValue, items } + { value, name, label, title, setValue, items, withTooltip } : { value: string, name: string, @@ -7,6 +9,7 @@ function Dropdown( title: string, setValue: (value: string) => void, items: Array<{value: string, label: string}>, + withTooltip?: boolean, } ){ @@ -16,6 +19,7 @@ function Dropdown( + { withTooltip ? : '' }