Move storybook down to package level. Update to 5.3 #92

xdrdak · 2020-06-10T14:35:32Z

Description

Slowly cleaning things up globally. Moving the storybook down will slim down our top level package and let us understand just what is actually needed vs what isn't.

Each package should have their own storybook instance, or else we end up with this super fat top level package.json and an even more complex webpack config for storybook, not to mention we increase complexity in what goes where in the monorepo.

I've also taken time to cleanup some things (flush useless test, shift files around to be less exposed globally.).

Also took time to port over some stories (namely the one in flame-tokens) into flame. Important to note that those stories are kinda coded ugly, but we'll be moving to MDX anyways in a few, so this is fine.

How to test?

Checkout branch, run yarn && yarn bootstrap && yarn dev
Open Storybook
Or check the deploy preview on Netlify (link available in comments)

Checklist

I have read the CONTRIBUTING guide
I have prepared CHANGELOGs for release
I have tested my changes on supported browsers
I have added tests that prove my fix is effective or that my feature works

xdrdak · 2020-06-10T15:32:09Z

packages/flame/src/Text/Text.tsx


 export const TextContent = styled('div')`
-  ${Text}:not(:last-child),
-  ${TextLink}:not(:last-child) {
+  .fl-text:not(:last-child),


Weird hiccup when using updated emotion.

For some reason, the way the styles get interpreted with injected components doesn't work as previous versions.

By setting classnames, this will stabilize the output.

Then again, TextContent is one of those legacy components that probably should be revised/flushed

Right, TextContent we should remove in v2 I think. Much better to have specs to follow in terms of vertical rhythm per elements instead of a wrapping component's job.

glambert · 2020-06-10T18:17:29Z

packages/flame/src/Core/story.tsx

+  );
+});
+export const transitions = () => <Transitions />;
+transitions.story = { percy: { skip: true } };


Non-blocking: does this file belong in Core or should it be alongside the theme in packages/flame/themes/story.tsx?

Either or. Doesn't matter much now cause I will be re-doing the entire stories to leverage the storybook format, so this entire way of displaying things is subject to change.

glambert · 2020-06-10T18:18:24Z

packages/flame/src/Popover/story.tsx

+          key={placement}
+          example={<PopoverSimple isOpen content={placement} placement={placement} light />}
+          content={placement}
+        />
      ))}
    </div>
  </div>


Nice cleanup 🛀

glambert · 2020-06-10T18:20:16Z

packages/flame/src/Text/Text.tsx


 export const TextContent = styled('div')`
-  ${Text}:not(:last-child),
-  ${TextLink}:not(:last-child) {
+  .fl-text:not(:last-child),


Right, TextContent we should remove in v2 I think. Much better to have specs to follow in terms of vertical rhythm per elements instead of a wrapping component's job.

glambert

For tokens stories, should we avoid showing themeGet implementation as we want to move to css instead? Also, could we show those for colors as well?

xdrdak · 2020-06-10T18:28:16Z

Just because we want to move away from themeGet doesn't mean we should not document it. Remember that using themeGet (or even drilling thru the theme prop) is entirely possible regardless of what we say, since at the end of it all, it's just a way of grabbing something from the themefile.

The entire story related in Core.tsx needs a hefty revision, I just created it to have some feature parity before we do a full document rework.

glambert

When changelog is updated LGTM 🎉

* port over previous tokens stories. Adapt for flame * Move dependencies to relevant package * disable css modules as its not really relevant anymore * update popover and tooltip story styling. sort top level sections * skip theme percy snapshots as per old implementation * Remove dead deps. Bubble ExampleBox from popover and tooltip * Move stories/ into flame/.storybook. Cleanup useless test * Fix percy command * Fix weird regression due to injecting components in style tags * Display themeGet and css for colours instead of classnames * Fix spaced group * Colours -> Colors * remove superflous react devDep * leverage top level packages Co-authored-by: Guillaume Lambert <24464151+glambert@users.noreply.github.com>

* Add AlertInCard component. Auto color for Alert icons. (#82) * Add AlertInCard component. Auto color for Alert icons. * Update Alert/readme.md * Update CHANGELOG.md * Remove useless generic in getTheme * tiny fixes to match design specs * Update typing ignores * design feedback. remove useless typing * hush now codecov * Force add DSD specific icons if prop not filled * PR feedback Co-authored-by: maartenafink <maartenafink@gmail.com> * [Security] Bump websocket-extensions from 0.1.3 to 0.1.4 (#89) Bumps [websocket-extensions](https://github.com/faye/websocket-extensions-node) from 0.1.3 to 0.1.4. **This update includes a security fix.** - [Release notes](https://github.com/faye/websocket-extensions-node/releases) - [Changelog](https://github.com/faye/websocket-extensions-node/blob/master/CHANGELOG.md) - [Commits](faye/websocket-extensions-node@0.1.3...0.1.4) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com> * ForwardRef on Remaining Base Components (#75) * Forward ref on remaining base components * adjust changelog Co-authored-by: Guillaume Lambert <24464151+glambert@users.noreply.github.com> * Toaster component (#86) * Add toaster component WIP * Update jest and testing-library. Tests for toaster * Update toaster readme * remove dangling TODO from toaster * Add better responsiveness for Toaster * Restrict Toaster types. Bypass click events for ToasterContainer * Update changelog. Add notice that we are using an external lib * Remove unused typing file * Spread rest on Toaster component to auto-pause timer * Update toaster behaviour to match specs * Supress warnings for logs. Fix toaster example setup * less jarring height transition * fixing text alignment * Set minHeight for container at 60px * Test out Percy with animations Co-authored-by: maartenafink <maartenafink@gmail.com> Co-authored-by: Guillaume Lambert <24464151+glambert@users.noreply.github.com> * Move storybook down to package level. Update to 5.3 (#92) * port over previous tokens stories. Adapt for flame * Move dependencies to relevant package * disable css modules as its not really relevant anymore * update popover and tooltip story styling. sort top level sections * skip theme percy snapshots as per old implementation * Remove dead deps. Bubble ExampleBox from popover and tooltip * Move stories/ into flame/.storybook. Cleanup useless test * Fix percy command * Fix weird regression due to injecting components in style tags * Display themeGet and css for colours instead of classnames * Fix spaced group * Colours -> Colors * remove superflous react devDep * leverage top level packages Co-authored-by: Guillaume Lambert <24464151+glambert@users.noreply.github.com> * cleanup of top level storybook. Fix typing (#98) * Allow next to be published * Fix tests for alert. Move publish config to flame * Flush superfluous version due to merge * Fix typing issue in Dialog/Story * [Security] Bump acorn from 6.4.0 to 6.4.1 (#97) Bumps [acorn](https://github.com/acornjs/acorn) from 6.4.0 to 6.4.1. **This update includes security fixes.** - [Release notes](https://github.com/acornjs/acorn/releases) - [Commits](acornjs/acorn@6.4.0...6.4.1) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com> Co-authored-by: Xavier Drdak <1198051+xdrdak@users.noreply.github.com> * Publish - @lightspeed/flame@2.0.0-rc.0 * adjust publish scripts (#100) * Dummy changes to trigger release * Publish - @lightspeed/flame@2.0.0-rc.1 * Adjust line-height in Alert to be normal. (#101) * Adjust lineheight in Alert to be normal. * Update changelog * Adjust changelog to better sync up with release of RC * Publish - @lightspeed/flame@2.0.0-rc.2 * Fix code generation typing issue in build-themes * Publish - @lightspeed/flame@2.0.0-rc.3 * Fix Alert and AlertInCard typing. Allow empty title (#102) * Fix Alert and AlertInCard typing. Allow empty title * Update changelog * Publish - @lightspeed/flame@2.0.0-rc.4 * Use react popper hooks (#104) * Leverage react-popper usePopper hook * remove old popper dependency * update changelog * fix lint * Publish - @lightspeed/flame@2.0.0-rc.5 * Force Update active poppers. Fix clickOutside handler (#105) * add forceUpdate to Dropdown and Popover * Replace forceUpdate with update. Fix clickOutside hook * Update CHANGELOG.md * Set higher zIndex for ToasterContainer (#107) * set higher zIndex for ToasterContainer * Update CHANGELOG.md * Publish - @lightspeed/flame@2.0.0-rc.6 * Add next/Badge component (#106) * add next/Badge component * fix colors for oldskool theme * Update CHANGELOG.md * Let percy snapshot next * Use variant prop instead of type for badge * Update CHANGELOG.md * Adjust padding based on design feedback * Fix storybook publishing Co-authored-by: Guillaume Lambert <24464151+glambert@users.noreply.github.com> * Publish - @lightspeed/flame@2.0.0-rc.7 * Smoothed out border-radius for next/Badge (#108) * Smoothed out border-radius for next/Badge * Update CHANGELOG.md * Export typing for next/Badge (#110) * export typing for next/Badge * Update CHANGELOG.md * Create (S)CSS-flavored Flame implementation package (#109) * Port sass as is into flame * Apply suggestions from code review Co-authored-by: Guillaume Lambert <24464151+glambert@users.noreply.github.com> * Update css README docs. Remove media queries css as this is out of scope * Remove private flag from flame-css Co-authored-by: Guillaume Lambert <24464151+glambert@users.noreply.github.com> * Publish - @lightspeed/flame-css@0.1.0 - @lightspeed/flame@2.0.0-rc.8 * Move Storybook back to root again (#111) * move everything back to root * strip magic from storybook-components. Adjust root package scripts * Mute typings for withReadme * Fix netlify build path * Fix storybook decorator injection condition * Add chromatic workflow (#112) * Remove percy. Adjust old percy stuff for chromatic (#114) * Adjust chromatic workflow * Use tags as target for publish action. Snapshot label for visual diffing (#115) * Target tags for action. Snapshot on label * Pushes on master will trigger a snapshot * Add "type=text" to input for convenience (#117) * Publish - @lightspeed/flame-css@0.1.1 - @lightspeed/flame@2.0.0-rc.9 * Adjust publishing scripts. Dummy changes to trigger publish * Publish - @lightspeed/flame@2.0.0-rc.10 Co-authored-by: maartenafink <maartenafink@gmail.com> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com> Co-authored-by: Guillaume Lambert <24464151+glambert@users.noreply.github.com>

xdrdak added 7 commits June 8, 2020 16:19

port over previous tokens stories. Adapt for flame

41332d3

Move dependencies to relevant package

279d4d5

disable css modules as its not really relevant anymore

a4d842b

update popover and tooltip story styling. sort top level sections

fbbb6d4

skip theme percy snapshots as per old implementation

37ef3fc

Remove dead deps. Bubble ExampleBox from popover and tooltip

fc45ec3

Move stories/ into flame/.storybook. Cleanup useless test

02a77e4

xdrdak requested a review from a team as a code owner June 10, 2020 14:35

xdrdak added 2 commits June 10, 2020 10:37

Fix percy command

8d056d6

Fix weird regression due to injecting components in style tags

82fded8

xdrdak commented Jun 10, 2020

View reviewed changes

glambert reviewed Jun 10, 2020

View reviewed changes

glambert approved these changes Jun 10, 2020

View reviewed changes

xdrdak and others added 7 commits June 10, 2020 14:35

Display themeGet and css for colours instead of classnames

7c7a728

Fix spaced group

54ec171

Colours -> Colors

984cf1d

Merge branch 'next' into move-storybook-down-to-package-level

35ee78a

remove superflous react devDep

75a9e42

Merge branch 'next' into move-storybook-down-to-package-level

c40a71e

leverage top level packages

b4f5b62

xdrdak merged commit 237ff1d into next Jun 15, 2020

xdrdak deleted the move-storybook-down-to-package-level branch June 15, 2020 13:48

xdrdak mentioned this pull request Jun 17, 2020

Flame v2 #99

Merged

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Move storybook down to package level. Update to 5.3 #92

Move storybook down to package level. Update to 5.3 #92

xdrdak commented Jun 10, 2020

xdrdak Jun 10, 2020 •

edited

Loading

glambert Jun 10, 2020

glambert Jun 10, 2020

xdrdak Jun 10, 2020

glambert Jun 10, 2020

glambert Jun 10, 2020

glambert left a comment

xdrdak commented Jun 10, 2020

glambert left a comment

Move storybook down to package level. Update to 5.3 #92

Move storybook down to package level. Update to 5.3 #92

Conversation

xdrdak commented Jun 10, 2020

Description

How to test?

Checklist

xdrdak Jun 10, 2020 • edited Loading

Choose a reason for hiding this comment

glambert Jun 10, 2020

Choose a reason for hiding this comment

glambert Jun 10, 2020

Choose a reason for hiding this comment

xdrdak Jun 10, 2020

Choose a reason for hiding this comment

glambert Jun 10, 2020

Choose a reason for hiding this comment

glambert Jun 10, 2020

Choose a reason for hiding this comment

glambert left a comment

Choose a reason for hiding this comment

xdrdak commented Jun 10, 2020

glambert left a comment

Choose a reason for hiding this comment

xdrdak Jun 10, 2020 •

edited

Loading