What

When I create a new palette and remove all colors from scale, I see a blank page

In Action

https://user-images.githubusercontent.com/17102399/173680962-4f7fcf31-4840-4fdc-86c3-bba25b766dec.mp4

P. S.

What about to add issue template, to let reporters know what they need to provide? 🤔

This PR fixes the issue #19.

I've updated the code to check if our selected index is greater than our color scale, and if it is, then we just select the last color from the scale, but if we switch back, it will be the same selected color.

@rafaeltab Could you test it and let me know if everything works as expected? 😊

Describe the bug App crashes when a user deletes the selected color using the - button

To Reproduce Steps to reproduce the behavior:

1. Go to https://primer.style/prism/.
2. Create a palette.
3. Select a scale.
4. Select the last color in the scale.
5. Click the - button.

Expected behavior The color that is now the latest after deletion should be selected

Actual behavior The website presents a completely white screen, and the application throws the following error.

VM1050 react_devtools_backend.js:4026 Error: Failed to parse color: ""
    at g (parseToRgba.ts:51:3)
    at B (getLuminance.ts:18:21)
    at _ (getContrast.ts:11:22)
    at Be (scale.tsx:497:31)
    at oi (react-dom.production.min.js:157:137)
    at Fi (react-dom.production.min.js:180:154)
    at $u (react-dom.production.min.js:269:343)
    at Tc (react-dom.production.min.js:250:347)
    at jc (react-dom.production.min.js:250:278)
    at kc (react-dom.production.min.js:250:138)
overrideMethod @ VM1050 react_devtools_backend.js:4026
uu @ react-dom.production.min.js:216
a.componentDidCatch.n.callback @ react-dom.production.min.js:217
da @ react-dom.production.min.js:131
hu @ react-dom.production.min.js:220
Cc @ react-dom.production.min.js:259
t.unstable_runWithPriority @ scheduler.production.min.js:18
Vo @ react-dom.production.min.js:122
_c @ react-dom.production.min.js:252
bc @ react-dom.production.min.js:243
(anonymous) @ react-dom.production.min.js:123
t.unstable_runWithPriority @ scheduler.production.min.js:18
Vo @ react-dom.production.min.js:122
qo @ react-dom.production.min.js:123
Ko @ react-dom.production.min.js:122
Le @ react-dom.production.min.js:292
Xt @ react-dom.production.min.js:73
VM1050 react_devtools_backend.js:4026 Error: Failed to parse color: ""
    at g (parseToRgba.ts:51:3)
    at B (getLuminance.ts:18:21)
    at _ (getContrast.ts:11:22)
    at Be (scale.tsx:497:31)
    at oi (react-dom.production.min.js:157:137)
    at Fi (react-dom.production.min.js:180:154)
    at $u (react-dom.production.min.js:269:343)
    at Tc (react-dom.production.min.js:250:347)
    at jc (react-dom.production.min.js:250:278)
    at kc (react-dom.production.min.js:250:138)
overrideMethod @ VM1050 react_devtools_backend.js:4026
uu @ react-dom.production.min.js:216
n.callback @ react-dom.production.min.js:216
da @ react-dom.production.min.js:131
hu @ react-dom.production.min.js:220
Cc @ react-dom.production.min.js:259
t.unstable_runWithPriority @ scheduler.production.min.js:18
Vo @ react-dom.production.min.js:122
_c @ react-dom.production.min.js:252
bc @ react-dom.production.min.js:243
(anonymous) @ react-dom.production.min.js:123
t.unstable_runWithPriority @ scheduler.production.min.js:18
Vo @ react-dom.production.min.js:122
qo @ react-dom.production.min.js:123
Ko @ react-dom.production.min.js:122
Le @ react-dom.production.min.js:292
Xt @ react-dom.production.min.js:73
parseToRgba.ts:51 Uncaught Error: Failed to parse color: ""
    at g (parseToRgba.ts:51:3)
    at B (getLuminance.ts:18:21)
    at _ (getContrast.ts:11:22)
    at Be (scale.tsx:497:31)
    at oi (react-dom.production.min.js:157:137)
    at Fi (react-dom.production.min.js:180:154)
    at $u (react-dom.production.min.js:269:343)
    at Tc (react-dom.production.min.js:250:347)
    at jc (react-dom.production.min.js:250:278)
    at kc (react-dom.production.min.js:250:138)
g @ parseToRgba.ts:51
B @ getLuminance.ts:18
_ @ getContrast.ts:11
Be @ scale.tsx:497
oi @ react-dom.production.min.js:157
Fi @ react-dom.production.min.js:180
$u @ react-dom.production.min.js:269
Tc @ react-dom.production.min.js:250
jc @ react-dom.production.min.js:250
kc @ react-dom.production.min.js:250
bc @ react-dom.production.min.js:243
(anonymous) @ react-dom.production.min.js:123
t.unstable_runWithPriority @ scheduler.production.min.js:18
Vo @ react-dom.production.min.js:122
qo @ react-dom.production.min.js:123
Ko @ react-dom.production.min.js:122
Le @ react-dom.production.min.js:292
Xt @ react-dom.production.min.js:73

This error is very similar to #10, but not completely since in #10 all the colors have to be deleted. Pull request #15 does fix issue #10, but not this one.

Environment

• OS: Windows 10 21H1 Build 19043.1766
• Browser: Chrome 102.0.5005.115

Adds a string above each scale step to indicate which index in the scale.colors array the color is. I opted to wrap the existing scale ZStack in order to separate it from that container (so the points don't interfere with it.

)

ref: https://github.com/primer/prism/discussions/32

Describe the bug App crashes when an empty scale is opened

To Reproduce

1. Create a new palette
2. Import the following JSON

{
  "lightgrey": [],
  "dimgrey": [],
  "olivedrab": "#6b8e23"
}

3. select either the lightgrey or dimgrey scales

Expected behavior An empty scale should be displayed, it should allow adding a color using the + button. Optionally, the pane on the right could continue to function but without displaying any color settings, just the scale settings.

P.S. Sorry for not making this issue earlier

Describe the bug When I select a scale and delete a color the page goes blank

To Reproduce Steps to reproduce the behavior:

1. Go to prism
2. Create a new palette or go to an existing palette
3. Select an existing scale or add a new sacle
4. On the right panel select delete color for the scale (screenshot below)

Expected behavior Not exactly sure but the page probably shouldn't go blank

Screenshots

Environment Chrome Version 102.0.5005.115 (Official Build) (x86_64) Mac OS Catalina - Version 10.15.7

Additional context Posted a video here: https://twitter.com/DamiDina/status/1539291589847171073

This allows you to apply a bezier easing function any shared curves, as discussed in #16. The endpoints of the existing curve are preserved, and the inner values are fit to the chosen curve.

I find myself getting a bit lost in our palettes (we have 20+ steps) highlighting the index value atop each color would be helpful imo. I've got this running locally can get a PR up if interested.

I think it would be nice to insert cards mid-palette. I've had two extent colors that I knew I wanted to use and then fill in the gaps between. Perhaps the '+' could add a new card to the right of whichever card is selected. For example where the arrow is below:

Hey there, I was playing around with the codebase. Added the delete button on the card. Let me know what are your views on this. I'd be happy to do a PR.

Hey! I'm interested in drafting some PRs and don't want to nuke the format. Is there a code format that is preferred here that can be added? I assume @github/prettier-config

Bumps express from 4.17.1 to 4.18.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps decode-uri-component from 0.2.0 to 0.2.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Describe the bug App crashes when applying linked curves and invalid values

To Reproduce Steps to reproduce the behavior:

1. Create a curve
2. Apply it to your color
3. Adjust curve via input spinner to push curve toward a non-existant value (out of bounds)

Expected behavior The app doesn't crash, causing me not to reach my color palette anymore. I shouldn't be able to use the spinner to create a non-existant color

Screenshots (Video) https://user-images.githubusercontent.com/20825047/192326341-56e3fa9b-a3f4-4d92-8de3-706a3e43708c.mp4

Additional context It seems like there might be a few things at work. App crashes when an invalid hex value is created but it also seems like the linked curves are messing with the input values.

It would also be nice if I could reach my palettes again. If I attempt to open the color palette that caused the app to crash, it crashes again

Describe the bug When adding a color to a scale by clicking the "+" button, the current selected color remains selected, instead of the newly created one. This can be annoying as you start editing the color, only later realizing you were editing one you already made earlier.

To Reproduce Steps to reproduce the behavior:

1. Click any scale
2. Click the "+" button
3. Notice the color selection remains the same

Expected behavior Auto-select the latest created color (=latest index).

Screenshots N/A

Environment All