feat(react): add svg logo for `<DevMode/>` #535

manudeli · 2024-01-01T16:49:18Z

fix #503

Overview

I add svg logo for <DevMode/>

PR Checklist

I did below actions if need

I read the Contributing Guide
I added documents and tests.

changeset-bot · 2024-01-01T16:49:22Z

🦋 Changeset detected

Latest commit: dfb52ad

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@suspensive/react	Minor
@suspensive/react-query	Minor
@suspensive/visualization	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2024-01-01T16:49:25Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
docs-v1	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 4, 2024 10:11am
docs-v2	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 4, 2024 10:11am
visualization	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 4, 2024 10:11am

codesandbox-ci · 2024-01-01T16:53:49Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

codecov · 2024-01-01T17:11:35Z

Codecov Report

Merging #535 (dfb52ad) into main (59bd5f0) will decrease coverage by 0.04%.
The diff coverage is 100.00%.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #535      +/-   ##
==========================================
- Coverage   84.36%   84.33%   -0.04%     
==========================================
  Files          29       29              
  Lines         467      466       -1     
  Branches      109      108       -1     
==========================================
- Hits          394      393       -1     
  Misses         63       63              
  Partials       10       10

Components	Coverage Δ
@suspensive/react	`100.00% <100.00%> (ø)`
@suspensive/react-query	`0.00% <ø> (ø)`
@suspensive/react-await	`100.00% <ø> (ø)`
@suspensive/react-image	`24.00% <ø> (ø)`

minsoo-web

I'm so happy to see our logo in there!!! However, our logo is a white base.... I feel like we need a background color. I've attached a video of me testing it on a white screen.

2024-01-03.12.07.45.mov

minsoo-web · 2024-01-02T14:56:01Z

packages/react/src/DevMode.tsx

+            <stop stopColor="#FF0000" />
+            <stop offset="1" stopColor="#FF0000" stopOpacity="0" />


Can anyone tell me why these red colors are being used in the SVG?
This line wasn't the only one that I saw #FF0000 in, so I was a little puzzled.

It is for gradient layer-blur. You can see it in our figma

I just use that red color to differ other color definitely

Thanks for the confirmation!!!

minsoo-web · 2024-01-02T15:06:30Z

packages/react/src/DevMode.tsx

+        onMouseEnter={() => setIsHover(true)}
+        onMouseLeave={() => setIsHover(false)}


I'm wondering if we need to call useState to control hover state.

Since we can't control the hover state from inline CSS, I guess it's true that we can only give the hover effect by controlling the state via useState at this point.

But in essence, I don't see how adding a hover state to this UI can provide any value to the user.

Personally, I think a hover effect is meant to encourage clicks, but since DevMode is something that the user will do on their own when they need to

Personally, I think the hover effect is used to encourage clicking, but 'DevMode' assumes that the user will press it when they need to.

To summarize, do we need to use useState to control the hover state? is my opinion.

because of process.env.NODE_ENV !== 'production', I found there is no svg or no useState code in built bundle. you can check it in websites/visualization with DevMode.

Then isn't it better to support better UX in development mode?

Got it! Thanks for the confirmation!

minsoo-web

How can we improve SVGs not showing up on a screen with a white background?
How about a black background color?

… background body

manudeli · 2024-01-04T03:54:10Z

How can we improve SVGs not showing up on a screen with a white background? How about a black background color?

I added backgroundColor: black for <DevMode/> in 5f03a08
Thanks for your eagle eyes 👀🦅

minsoo-web

LGTM!! Lets Go !!

fix #503 # Overview I add svg logo for `<DevMode/>`  ![chrome-capture-2024-0-2](https://github.com/suspensive/react/assets/61593290/a31b50b4-7430-43f7-9ec3-c98371c2b8b2) ## PR Checklist - [x] I did below actions if need 1. I read the [Contributing Guide](https://github.com/suspensive/react/blob/main/CONTRIBUTING.md) 2. I added documents and tests. --------- Co-authored-by: Minsoo Kim <[email protected]>

fix #503 # Overview I add svg logo for `<DevMode/>`  ![chrome-capture-2024-0-2](https://github.com/suspensive/react/assets/61593290/a31b50b4-7430-43f7-9ec3-c98371c2b8b2) ## PR Checklist - [x] I did below actions if need 1. I read the [Contributing Guide](https://github.com/suspensive/react/blob/main/CONTRIBUTING.md) 2. I added documents and tests. ---------

fix #503 # Overview I add svg logo for `<DevMode/>`  ![chrome-capture-2024-0-2](https://github.com/suspensive/react/assets/61593290/a31b50b4-7430-43f7-9ec3-c98371c2b8b2) ## PR Checklist - [x] I did below actions if need 1. I read the [Contributing Guide](https://github.com/suspensive/react/blob/main/CONTRIBUTING.md) 2. I added documents and tests. --------- Co-authored-by: Minsoo Kim <[email protected]>

feat(react): add svg logo for <DevMode/>

cdedb68

manudeli self-assigned this Jan 1, 2024

github-actions bot added the @suspensive/react label Jan 1, 2024

vercel bot temporarily deployed to Preview – visualization January 1, 2024 16:50 Inactive

Create short-sheep-do.md

ba9dbe2

vercel bot temporarily deployed to Preview – docs-v2 January 1, 2024 16:52 Inactive

vercel bot temporarily deployed to Preview – docs-v1 January 1, 2024 16:54 Inactive

chore: update

039ffd3

vercel bot temporarily deployed to Preview – visualization January 1, 2024 17:10 Inactive

manudeli marked this pull request as ready for review January 1, 2024 17:10

manudeli requested review from okinawaa and minsoo-web as code owners January 1, 2024 17:10

vercel bot temporarily deployed to Preview – docs-v2 January 1, 2024 17:11 Inactive

vercel bot temporarily deployed to Preview – docs-v1 January 1, 2024 17:12 Inactive

minsoo-web reviewed Jan 2, 2024

View reviewed changes

Merge branch 'main' into feat/react/DevMode-svg-logo

7d3b27c

vercel bot temporarily deployed to Preview – docs-v2 January 2, 2024 16:22 Inactive

vercel bot temporarily deployed to Preview – docs-v1 January 2, 2024 16:23 Inactive

vercel bot temporarily deployed to Preview – visualization January 2, 2024 16:25 Inactive

manudeli requested a review from minsoo-web January 2, 2024 17:08

Merge branch 'main' into feat/react/DevMode-svg-logo

9b3a934

vercel bot temporarily deployed to Preview – visualization January 3, 2024 09:31 Inactive

vercel bot temporarily deployed to Preview – docs-v1 January 3, 2024 09:32 Inactive

vercel bot temporarily deployed to Preview – docs-v2 January 3, 2024 09:33 Inactive

Merge branch 'main' into feat/react/DevMode-svg-logo

cb7e39b

vercel bot temporarily deployed to Preview – visualization January 4, 2024 03:06 Inactive

vercel bot temporarily deployed to Preview – docs-v1 January 4, 2024 03:07 Inactive

vercel bot temporarily deployed to Preview – docs-v2 January 4, 2024 03:08 Inactive

minsoo-web reviewed Jan 4, 2024

View reviewed changes

chore(react): add backgroundColor for DevMode to differ default white…

5f03a08

… background body

vercel bot temporarily deployed to Preview – docs-v2 January 4, 2024 03:54 Inactive

vercel bot temporarily deployed to Preview – visualization January 4, 2024 03:55 Inactive

manudeli requested a review from minsoo-web January 4, 2024 03:56

vercel bot temporarily deployed to Preview – docs-v1 January 4, 2024 03:56 Inactive

Merge branch 'main' into feat/react/DevMode-svg-logo

0601ccf

vercel bot temporarily deployed to Preview – docs-v1 January 4, 2024 04:01 Inactive

vercel bot temporarily deployed to Preview – visualization January 4, 2024 04:02 Inactive

vercel bot temporarily deployed to Preview – docs-v2 January 4, 2024 04:03 Inactive

Merge branch 'main' into feat/react/DevMode-svg-logo

dfb52ad

vercel bot temporarily deployed to Preview – docs-v1 January 4, 2024 10:08 Inactive

vercel bot temporarily deployed to Preview – visualization January 4, 2024 10:10 Inactive

vercel bot temporarily deployed to Preview – docs-v2 January 4, 2024 10:11 Inactive

minsoo-web approved these changes Jan 4, 2024

View reviewed changes

minsoo-web merged commit e776d52 into main Jan 4, 2024
18 checks passed

minsoo-web deleted the feat/react/DevMode-svg-logo branch January 4, 2024 12:11

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(react): add svg logo for `<DevMode/>` #535

feat(react): add svg logo for `<DevMode/>` #535

manudeli commented Jan 1, 2024 •

edited

Loading

changeset-bot bot commented Jan 1, 2024 •

edited

Loading

vercel bot commented Jan 1, 2024 •

edited

Loading

codesandbox-ci bot commented Jan 1, 2024 •

edited

Loading

codecov bot commented Jan 1, 2024 •

edited

Loading

minsoo-web left a comment •

edited

Loading

minsoo-web Jan 2, 2024

manudeli Jan 2, 2024

minsoo-web Jan 4, 2024

minsoo-web Jan 2, 2024

manudeli Jan 2, 2024 •

edited

Loading

minsoo-web Jan 4, 2024

minsoo-web left a comment

manudeli commented Jan 4, 2024 •

edited

Loading

minsoo-web left a comment

		<stop stopColor="#FF0000" />
		<stop offset="1" stopColor="#FF0000" stopOpacity="0" />

		onMouseEnter={() => setIsHover(true)}
		onMouseLeave={() => setIsHover(false)}

feat(react): add svg logo for <DevMode/> #535

feat(react): add svg logo for <DevMode/> #535

Conversation

manudeli commented Jan 1, 2024 • edited Loading

Overview

PR Checklist

changeset-bot bot commented Jan 1, 2024 • edited Loading

🦋 Changeset detected

vercel bot commented Jan 1, 2024 • edited Loading

codesandbox-ci bot commented Jan 1, 2024 • edited Loading

codecov bot commented Jan 1, 2024 • edited Loading

Codecov Report

minsoo-web left a comment • edited Loading

Choose a reason for hiding this comment

minsoo-web Jan 2, 2024

Choose a reason for hiding this comment

manudeli Jan 2, 2024

Choose a reason for hiding this comment

minsoo-web Jan 4, 2024

Choose a reason for hiding this comment

minsoo-web Jan 2, 2024

Choose a reason for hiding this comment

manudeli Jan 2, 2024 • edited Loading

Choose a reason for hiding this comment

minsoo-web Jan 4, 2024

Choose a reason for hiding this comment

minsoo-web left a comment

Choose a reason for hiding this comment

manudeli commented Jan 4, 2024 • edited Loading

minsoo-web left a comment

Choose a reason for hiding this comment

feat(react): add svg logo for `<DevMode/>` #535

feat(react): add svg logo for `<DevMode/>` #535

manudeli commented Jan 1, 2024 •

edited

Loading

changeset-bot bot commented Jan 1, 2024 •

edited

Loading

vercel bot commented Jan 1, 2024 •

edited

Loading

codesandbox-ci bot commented Jan 1, 2024 •

edited

Loading

codecov bot commented Jan 1, 2024 •

edited

Loading

minsoo-web left a comment •

edited

Loading

manudeli Jan 2, 2024 •

edited

Loading

manudeli commented Jan 4, 2024 •

edited

Loading