Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Custom Storybook theme for Recharts brand #4016

Merged
merged 4 commits into from Dec 16, 2023
Merged

Custom Storybook theme for Recharts brand #4016

merged 4 commits into from Dec 16, 2023

Conversation

csdiehl
Copy link
Contributor

@csdiehl csdiehl commented Dec 11, 2023

Description

Creates a custom Storybook theme using the colors, fonts, and logo from Recharts.org. Links to Recharts.org if user clicks on the logo.

Note: I grabbed a screenshot of the logo from the website. Might want to replace with a better image if one is available.

Related Issue

Closes #3446.

Motivation and Context

Customizes Storybook to better line up with the website branding.

How Has This Been Tested?

This only affects the Storybook theme, not the function of any chart components. All tests are passing.

Types of changes

  • [ X] Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

  • [X ] My code follows the code style of this project.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have added tests to cover my changes.
  • I have added a storybook story or extended an existing story to show my changes
  • [ X] All new and existing tests passed.

@csdiehl csdiehl changed the title Custom Storbyook theme for Recharts brand Custom Storybook theme for Recharts brand Dec 11, 2023
ckifer
ckifer reviewed Dec 11, 2023
View reviewed changes
Copy link
Member

@ckifer ckifer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should be able to use TS instead of JS everywhere.

Also not sure why but the build is failing

storybook/RechartsTheme.js Outdated Show resolved Hide resolved
storybook/RechartsTheme.js Outdated
@@ -0,0 +1,38 @@
import { create } from '@storybook/theming/create';
import logo from './recharts_logo.png';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The 'logo' isn't really a logo, its just an H1 with some styling

See here https://github.com/recharts/recharts.org/blob/master/src/layouts/Frame.js#L63-L67

Not sure if that works in storybook's case though

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah I saw that - but Storybook requires an image. If you have one hosted somewhere I can link to that instead

storybook/manager.js Outdated Show resolved Hide resolved
ckifer
ckifer previously requested changes Dec 11, 2023
View reviewed changes
Copy link
Member

@ckifer ckifer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be why the build is failing

package-lock.json Outdated Show resolved Hide resolved
@csdiehl
Copy link
Contributor Author

csdiehl commented Dec 11, 2023

@ckifer Everything should be ok now, except the brand image. Has to be a link to a hosted image, doesn't allow it to be an html element. When you have that, we can swap it in

@ckifer
Copy link
Member

ckifer commented Dec 11, 2023

Yeah things look good besides the brand image, it doesn't seem to load for me at all there.

Maybe we just keep it the default for now? Recharts doesn't really have an official logo, but @wesoudshoorn worked on one for us and its in the contributor slack (invite link) we can probably swap to that sooner or later (Wes if you have any input let us know)

I'm going to wait for some other folks to review this before merging but it looks good overall to me. Definitely will look better in the website - it does get rid of any 'dark mode', but thats probably okay cause the site doesn't have one anyways.
(screenshot for others so they don't have to pull changes down)
image

CC @nikolasrieble @PavelVanecek

@csdiehl
Copy link
Contributor Author

csdiehl commented Dec 11, 2023

sounds good! @ckifer I just removed the brand image for now, so it just shows a plain "Recharts" text. I matched fonts and color scheme to the specs in recharts.org so should fit in pretty well.

nikolasrieble
nikolasrieble approved these changes Dec 16, 2023
View reviewed changes
Copy link
Contributor

@nikolasrieble nikolasrieble left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❤️ 🚀 🚢

storybook/RechartsTheme.ts
@@ -0,0 +1,36 @@
import { create } from '@storybook/theming/create';

export default create({
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wonderful, this is great. Thank you!
I am not reviewing each and every value here, simply because this PR is a big step in the right direction and sets up the configuration.

We can independently iterate on the exact values to be used.

@nikolasrieble nikolasrieble dismissed ckifer’s stale review December 16, 2023 20:44

Dismissing outdated review. All comments are addressed.

@nikolasrieble nikolasrieble merged commit e8ea9db into recharts:master Dec 16, 2023
5 checks passed
@csdiehl csdiehl deleted the storybook-theme branch December 21, 2023 16:19
renovate bot added a commit to SAP/ui5-webcomponents-react that referenced this pull request Jan 10, 2024
@renovate
fix(deps): update dependency recharts to v2.10.4 (#5409)
5798cae 
[![Mend
Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com)

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
| [recharts](https://togithub.com/recharts/recharts) | [`2.10.3` ->
`2.10.4`](https://renovatebot.com/diffs/npm/recharts/2.10.3/2.10.4) |
[![age](https://developer.mend.io/api/mc/badges/age/npm/recharts/2.10.4?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/recharts/2.10.4?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/recharts/2.10.3/2.10.4?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/recharts/2.10.3/2.10.4?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|

---

### Release Notes

<details>
<summary>recharts/recharts (recharts)</summary>

###
[`v2.10.4`](https://togithub.com/recharts/recharts/releases/tag/v2.10.4)

[Compare
Source](https://togithub.com/recharts/recharts/compare/v2.10.3...v2.10.4)

#### What's Changed

Fix some older bugs annoying bugs, TS typings, update to the storybook
theme, and more

##### Fix

- `ResponsiveContainer`: fix `ref.current.current` without breaking
users using current implementation by
[@&#8203;HHongSeungWoo](https://togithub.com/HHongSeungWoo) in
[recharts/recharts#4008
- closes
[recharts/recharts#3718
- `Brush`: Allow Brush to be controlled with start and end index via
state by [@&#8203;ckifer](https://togithub.com/ckifer) in
[recharts/recharts#4034
- closes
[recharts/recharts#2404
- `Legend`: TypeScript - Add the dataKey type to legend props by
[@&#8203;HHongSeungWoo](https://togithub.com/HHongSeungWoo) in
[recharts/recharts#4035
- closes
[recharts/recharts#2909
- `Pie`: TypeScript - added `payload` to `PieSectorDataItem` type by
[@&#8203;PavelVanecek](https://togithub.com/PavelVanecek) in
[recharts/recharts#4030
- `Pie`: unique sector keys fix by
[@&#8203;imagineLife](https://togithub.com/imagineLife) in
[recharts/recharts#4009
closes
[recharts/recharts#3273
- `RadialBar`: allow className to be passed to Radial Bar background by
[@&#8203;ckifer](https://togithub.com/ckifer) in
[recharts/recharts#4027
- closes
[recharts/recharts#4011

##### Storybook

- Storybook: Added Legend component story! by
[@&#8203;AnujSharma141](https://togithub.com/AnujSharma141) in
[recharts/recharts#4039
- Storybook: add controlled brush storybook entry by
[@&#8203;ckifer](https://togithub.com/ckifer) in
[recharts/recharts#4032
- Storybook: Custom Storybook theme for Recharts brand by
[@&#8203;csdiehl](https://togithub.com/csdiehl) in
[recharts/recharts#4016

#### New Contributors

- [@&#8203;csdiehl](https://togithub.com/csdiehl) made their first
contribution in
[recharts/recharts#4016
- [@&#8203;AnujSharma141](https://togithub.com/AnujSharma141) made their
first contribution in
[recharts/recharts#4039

**Full Changelog**:
recharts/recharts@v2.10.3...v2.10.4

</details>

---

### Configuration

📅 **Schedule**: Branch creation - At any time (no schedule defined),
Automerge - At any time (no schedule defined).

🚦 **Automerge**: Enabled.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the
rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update
again.

---

- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box

---

This PR has been generated by [Mend
Renovate](https://www.mend.io/free-developer-tools/renovate/). View
repository job log
[here](https://developer.mend.io/github/SAP/ui5-webcomponents-react).

<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy4xMjcuMCIsInVwZGF0ZWRJblZlciI6IjM3LjEyNy4wIiwidGFyZ2V0QnJhbmNoIjoibWFpbiJ9-->

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
renovate bot added a commit to specfy/specfy that referenced this pull request Feb 21, 2024
@renovate
chore(deps): update dependency recharts to v2.12.1 (#405)
b98a322 
[![Mend
Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com)

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
| [recharts](https://togithub.com/recharts/recharts) | [`2.9.3` ->
`2.12.1`](https://renovatebot.com/diffs/npm/recharts/2.9.3/2.12.1) |
[![age](https://developer.mend.io/api/mc/badges/age/npm/recharts/2.12.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/recharts/2.12.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/recharts/2.9.3/2.12.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/recharts/2.9.3/2.12.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|

---

### Release Notes

<details>
<summary>recharts/recharts (recharts)</summary>

###
[`v2.12.1`](https://togithub.com/recharts/recharts/releases/tag/v2.12.1)

[Compare
Source](https://togithub.com/recharts/recharts/compare/v2.12.0...v2.12.1)

#### What's Changed

Unintentional regression broke panoramic/compact Brush in 2.11.0 and
2.12.0, backport the fix to 2.x as we work on 3.x

##### Fix

- fix: compact render should read from context, fixes brush panorama by
[@&#8203;ckifer](https://togithub.com/ckifer) in
[recharts/recharts#4194
fixes
[recharts/recharts#4193

**Full Changelog**:
recharts/recharts@v2.12.0...v2.12.1

###
[`v2.12.0`](https://togithub.com/recharts/recharts/releases/tag/v2.12.0)

[Compare
Source](https://togithub.com/recharts/recharts/compare/36c14c63d271d05b701e1d32ac931de0fd30b360...v2.12.0)

#### What's Changed

Bug fixes and a few small new features.

Releasing 2.12.0 to create a "clean slate" as contributors are
discussing next moves for recharts.

We will try to focus on upgrades, architectural changes, and
long-pending breaking changes so we can release a recharts v3. This will
not be a large major version, or one hard to upgrade to, but rather a
major version bump to prevent us from breaking people with library
upgrades, large refactors, etc. Feature parity should hold. Thanks!

#### Features

- `Bar`: Accept a callback function for `minPointSize` so it can be
determined by data by [@&#8203;ckifer](https://togithub.com/ckifer) in
[recharts/recharts#4099
closes
[recharts/recharts#2819
- `Accessibility`: Enable screen reader support with accessibilityLayer
and default tooltip by
[@&#8203;julianna-langston](https://togithub.com/julianna-langston) in
[recharts/recharts#4077

#### Fix

- `Bar`: `activeBar` should not be true by default, fixes a breaking
change from 2.9.0 by [@&#8203;ckifer](https://togithub.com/ckifer) in
[recharts/recharts#4139
- fixes
[recharts/recharts#4103
and
[recharts/recharts#4101
- `Scatter`: fix non-unique key errors by
[@&#8203;imagineLife](https://togithub.com/imagineLife) in
[recharts/recharts#4087
- fixes
[recharts/recharts#4151
and
[recharts/recharts#4060
- `Pie`: fix non-unique key errors by
[@&#8203;imagineLife](https://togithub.com/imagineLife) in
[recharts/recharts#4106
- `Tooltip`: fix bug that caused throttled tooltip to stay active when
moving mouse quickly by
[@&#8203;HHongSeungWoo](https://togithub.com/HHongSeungWoo) in
[recharts/recharts#4100
fixes
[recharts/recharts#4093

#### Chore

- Cleanup, tests, and refactoring work. Thanks
[@&#8203;PavelVanecek](https://togithub.com/PavelVanecek)
- Upgrade react smooth, remove `translateStyle`, remove prop-types as a
peerDep
- **NOTE**: animations will no longer have browser prefixes on them.
Browsers have good support for this
(https://caniuse.com/?search=transforms)
-   Upgrade dev dependencies
    -   Upgrade TypeScript to 4.9.5 (no definition changes from upgrade)

#### Storybook

-   New storybook stories and doc updates

#### New Contributors

- [@&#8203;TRFielder](https://togithub.com/TRFielder) made their first
contribution in
[recharts/recharts#4088

**Full Changelog**:
recharts/recharts@v2.11...v2.12.0

###
[`v2.11.0`](https://togithub.com/recharts/recharts/compare/v2.10.4...36c14c63d271d05b701e1d32ac931de0fd30b360)

[Compare
Source](https://togithub.com/recharts/recharts/compare/v2.10.4...36c14c63d271d05b701e1d32ac931de0fd30b360)

###
[`v2.10.4`](https://togithub.com/recharts/recharts/releases/tag/v2.10.4)

[Compare
Source](https://togithub.com/recharts/recharts/compare/v2.10.3...v2.10.4)

#### What's Changed

Fix some older bugs annoying bugs, TS typings, update to the storybook
theme, and more

##### Fix

- `ResponsiveContainer`: fix `ref.current.current` without breaking
users using current implementation by
[@&#8203;HHongSeungWoo](https://togithub.com/HHongSeungWoo) in
[recharts/recharts#4008
- closes
[recharts/recharts#3718
- `Brush`: Allow Brush to be controlled with start and end index via
state by [@&#8203;ckifer](https://togithub.com/ckifer) in
[recharts/recharts#4034
- closes
[recharts/recharts#2404
- `Legend`: TypeScript - Add the dataKey type to legend props by
[@&#8203;HHongSeungWoo](https://togithub.com/HHongSeungWoo) in
[recharts/recharts#4035
- closes
[recharts/recharts#2909
- `Pie`: TypeScript - added `payload` to `PieSectorDataItem` type by
[@&#8203;PavelVanecek](https://togithub.com/PavelVanecek) in
[recharts/recharts#4030
- `Pie`: unique sector keys fix by
[@&#8203;imagineLife](https://togithub.com/imagineLife) in
[recharts/recharts#4009
closes
[recharts/recharts#3273
- `RadialBar`: allow className to be passed to Radial Bar background by
[@&#8203;ckifer](https://togithub.com/ckifer) in
[recharts/recharts#4027
- closes
[recharts/recharts#4011

##### Storybook

- Storybook: Added Legend component story! by
[@&#8203;AnujSharma141](https://togithub.com/AnujSharma141) in
[recharts/recharts#4039
- Storybook: add controlled brush storybook entry by
[@&#8203;ckifer](https://togithub.com/ckifer) in
[recharts/recharts#4032
- Storybook: Custom Storybook theme for Recharts brand by
[@&#8203;csdiehl](https://togithub.com/csdiehl) in
[recharts/recharts#4016

#### New Contributors

- [@&#8203;csdiehl](https://togithub.com/csdiehl) made their first
contribution in
[recharts/recharts#4016
- [@&#8203;AnujSharma141](https://togithub.com/AnujSharma141) made their
first contribution in
[recharts/recharts#4039

**Full Changelog**:
recharts/recharts@v2.10.3...v2.10.4

###
[`v2.10.3`](https://togithub.com/recharts/recharts/releases/tag/v2.10.3)

[Compare
Source](https://togithub.com/recharts/recharts/compare/v2.10.2...v2.10.3)

#### What's Changed

- Fix non-unique react `key` bug(s) by
[@&#8203;imagineLife](https://togithub.com/imagineLife) in
[recharts/recharts#4006
- closes
[recharts/recharts#4004

#### New Contributors

- [@&#8203;hkmarques](https://togithub.com/hkmarques) made their first
contribution in
[recharts/recharts#4002

**Full Changelog**:
recharts/recharts@v2.10.2...v2.10.3

###
[`v2.10.2`](https://togithub.com/recharts/recharts/releases/tag/v2.10.2)

[Compare
Source](https://togithub.com/recharts/recharts/compare/v2.10.1...v2.10.2)

#### What's Changed

Patch some bugs from 2.9 / 2.10

##### Fix

- `Tooltip`: Fix tooltip rendering crash when activeItem is undefined by
[@&#8203;tran-simon](https://togithub.com/tran-simon) in
[recharts/recharts#3982
- `Cursor`: should no longer show gray background on hover where there
was none previously
[@&#8203;HHongSeungWoo](https://togithub.com/HHongSeungWoo) in
[recharts/recharts#3992
- `Tooltip`: show tooltip when `data` prop is on individual cartesian
component by [@&#8203;HHongSeungWoo](https://togithub.com/HHongSeungWoo)
in
[recharts/recharts#3988
- `LabelList` - TypeScript: LabelList offset prop issue by
[@&#8203;ckifer](https://togithub.com/ckifer) in
[recharts/recharts#3999

##### Accessibility

- `Brush`: set default aria-label and allow value override by
[@&#8203;enriquetamames-cpi](https://togithub.com/enriquetamames-cpi) in
[recharts/recharts#3950

##### Refactor / Cleanup

- Removing some eslint errors for "no array index key" by
[@&#8203;imagineLife](https://togithub.com/imagineLife)

#### New Contributors

- [@&#8203;tran-simon](https://togithub.com/tran-simon) made their first
contribution in
[recharts/recharts#3982
- [@&#8203;enriquetamames-cpi](https://togithub.com/enriquetamames-cpi)
made their first contribution in
[recharts/recharts#3950

**Full Changelog**:
recharts/recharts@v2.10.1...v2.10.2

###
[`v2.10.1`](https://togithub.com/recharts/recharts/releases/tag/v2.10.1):
Patch: Do not include types from test folder

[Compare
Source](https://togithub.com/recharts/recharts/compare/15328ec11b78968c847b43b646767b7b0c0d9e36...v2.10.1)

Fixes
[recharts/recharts#3978

**Full Changelog**:
recharts/recharts@v2.10...v2.10.1

###
[`v2.10.0`](https://togithub.com/recharts/recharts/compare/v2.9.3...15328ec11b78968c847b43b646767b7b0c0d9e36)

[Compare
Source](https://togithub.com/recharts/recharts/compare/v2.9.3...15328ec11b78968c847b43b646767b7b0c0d9e36)

</details>

---

### Configuration

📅 **Schedule**: Branch creation - "after 4pm every weekday" in timezone
Europe/Paris, Automerge - At any time (no schedule defined).

🚦 **Automerge**: Enabled.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the
rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update
again.

---

- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box

---

This PR has been generated by [Mend
Renovate](https://www.mend.io/free-developer-tools/renovate/). View
repository job log
[here](https://developer.mend.io/github/specfy/specfy).

<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy44MS4zIiwidXBkYXRlZEluVmVyIjoiMzcuMjAwLjAiLCJ0YXJnZXRCcmFuY2giOiJjaG9yZS9yZW5vdmF0ZUJhc2VCcmFuY2gifQ==-->

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@nikolasrieble nikolasrieble nikolasrieble approved these changes

@ckifer ckifer ckifer left review comments

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Storybook: Recharts Style in Storybook.
3 participants
@csdiehl @ckifer @nikolasrieble