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

WIP Tech/overhaul ui #4086

Merged
merged 421 commits into from
Jan 8, 2019
Merged

WIP Tech/overhaul ui #4086

merged 421 commits into from
Jan 8, 2019

Conversation

ndelangen
Copy link
Member

@ndelangen ndelangen commented Aug 27, 2018 •
edited
Loading

Refactor state-management en UI

Not ready for review yet

Fixes: #3837 #3854 #3652 #3702 #3921 #2313 #3999 #1708 #3702 #3921

Partially:
#4139

REFACTOR the state-management & core

  • REMOVE redux in preview, expand storyStore with it's function
  • REMOVE MANTRA in manager, use context for global state management
  • OPTIMIZE the way stories are stored in state
  • CLEANUP all addon names
  • IMPROVE Graceful setStories, if partially fails show what was still succesfull
  • Log all errors to console when loading or running stories
  • Log important errors to notifications
  • FIX linting
  • CLEANUP storyStore api
  • CLEANUP containers / components from unused state
  • Add unit testing to Context components
  • FIX existing unit tests
  • CLEANUP setOptions everywhere to global addParameters
  • INVESTIGATE if addon-storysource can use router directly over state method
  • router into a separate package
  • FIX when reloading page selected story should stay (this happens when there's a mismatch between hierarchySeparators)
  • CLEANUP unify SET_CURRENT_STORY & SELECT_STORY
  • FIX addons should clear when story changes and their data no longer applies
  • ADD persistence of selected panel (not via url) upon refresh
  • ADD setting initial selected panel via url
  • single key shortcuts
  • FIX arrow shortcuts (should respond only to ALT + key)
  • configurable shortcuts ( @Jessica-Koch )

HMR

  • HMR should work on component code
  • HMR should work on story code
  • HMR should work on imported markdown
  • FIX HMR - keep state of explorer
  • HMR should not change the url or selected story
  • HMR should work in ejected iframe

New components

  • ADD SyntaxHighlighter component & use it everywhere where's there's code
  • USE SyntaxHighlighter in addon-notes
  • ADD Popout component for displaying menus
  • ADD Preview component
  • Copy button, when clicked copies text to clipboard, and use everywhere (extract from SyntaxHighlighter)

IMPROVE the explorer

  • REMOVE treebeard, replace with a custom treeView component
  • REMOVE toNested (optimize story lookup)
  • ADD search in parameters [Feature] Improved SearchBox for stories #4139
  • ADD support for rootSeperators
  • ADD auto-open of selection
  • ADD auto select on click of group contested as a feature, maybe behind option?
  • ADD empty message when 0 stories loaded
  • ADD empty message when filtering results in 0
  • ADD explorer hover over items
  • ADD support for rootSeparators in explorer
  • ADD highlighting of the search results
  • ADD fuzzy search capability

Improve preview

  • ADD zoom function on preview component
  • ADD grid function on preview component
  • ADD eject iframe function to preview
  • ADD UI to toggle panels/fullscreen
  • ADD accessibility features (to demo new extensibility)
  • actually extract accessibility into an addon

Update Notification

  • IMRPROVE styling (icon, padding)
  • ADD fetching of data for version notification
  • ADD storage of version info in localStorage
  • ADD api for adding and removing notifications

Design

  • ADD tools/hotkeys button in nav
  • ADD UI to go fullscreen and toggle panels
  • CHANGE styles of main (preview+panel)
  • CHANGE styles of notifications
  • ADD tabs to the preview toolbar & allow addons to render there
  • CHANGE styles of explorer
  • CHANGE toolbar
  • ADD shortcut for toggle toolbar
  • ADD shortcut for zoom
  • ADD shortcut for toggle grid
  • ADD tools to TabsBar
  • ADD panel toggle to Panel Tabs
  • CHANGE icons
  • IMPROVE theming
  • ADD theming to addon-notes

Maybe, probably for another PR:

  • ADD ability to send postMessage to multiple iframes/ejected windows ( this would implement a follow-the-leader functionality)

TODO:

BUGS

  • Treeview does not reflect changes to storystore over HMR
  • Treeview does render stories in same order as they are defined
  • Treeview doesn't show highlight state as you control it via keyboard
  • Custom shortcuts aren't reflected in menu
  • [.] No close button on about or shortcuts page
  • Styling on update page seems incomplete
  • Actions addon seems extremely slow
  • Jest addon seems to be broken
  • Links addon seems to be broken

@ndelangen ndelangen self-assigned this Aug 27, 2018
@tmeasday
Copy link
Member

tmeasday commented Aug 28, 2018 •
edited
Loading

@ndelangen -- is this reviewable? What would you like us to look at? The PR seems too big to look at in totality

@igor-dv
Copy link
Member

igor-dv commented Aug 28, 2018 •
edited
Loading

@tmeasday, it's only a WIP. There will be more in the end :trollface:

@alexandrebodin
Copy link
Contributor

Yes just a start haha

@igor-dv
Copy link
Member

igor-dv commented Aug 28, 2018

I've checked a bit what's going on here (😱). Can you at least separate the emotion upgrade out of the other changes?
Like: master -> emotion-upgrade -> other-changes

@Hypnosphi
Copy link
Member

Can you please avoid zebra-table style? It brings a lot more confusion than value

@libetl
Copy link
Member

libetl commented Jan 2, 2019

INVESTIGATE if addon-storysource can use router directly over state method What can I do to help ?

Tom Coleman and others added 18 commits January 3, 2019 15:57
Add versions module and use it to set the versions notification
1580b5e
Get version for about page from store
6c127f9
@Jessica-Koch
#3984 add more test
7faeba6 
s
@Jessica-Koch
Merge branch 'tech/overhaul-ui' of github.com:storybooks/storybook in…
075e3ab 
…to tech/overhaul-ui
Add API for getting latest/current version
2f7f5f4
Only highlight the menu button if there's a version update
a6173bf
Merge remote-tracking branch 'origin/tech/overhaul-ui' into tech/over…
66c5c90 
…haul-ui-new-storyId
Final couple that I missed
20d14ab
Merge pull request #5072 from storybooks/tech/overhaul-ui-new-storyId
85182cd 
Tech/overhaul ui new story
@ndelangen
FIX grid
d73653d
@ndelangen
Merge tech/overhaul-ui
93a193b
@ndelangen
Merge branch '5.0.0' into tech/overhaul-ui
a00419b 
# Conflicts:
#	addons/a11y/package.json
#	addons/actions/package.json
#	addons/backgrounds/package.json
#	addons/cssresources/package.json
#	addons/events/package.json
#	addons/google-analytics/package.json
#	addons/info/package.json
#	addons/jest/package.json
#	addons/knobs/package.json
#	addons/links/package.json
#	addons/notes/package.json
#	addons/storyshots/storyshots-core/package.json
#	addons/viewport/package.json
#	app/react/package.json
#	examples/cra-kitchen-sink/package.json
#	examples/official-storybook/package.json
#	examples/preact-kitchen-sink/package.json
#	lib/addons/package.json
#	lib/channel-websocket/package.json
#	lib/components/package.json
#	lib/core/package.json
#	lib/ui/package.json
#	yarn.lock
@ndelangen
UPGRADE dependencies
4022285
@ndelangen
FIX snapshots
d9f3043
@ndelangen
REFACTOR story_store
41cc707 
- CHANGE path to id
- MOVE code regarding to hierarchy into manager
- FIX HMR causing stories to be overridden (logging a warning)
@ndelangen
IMPROVE jest.init so it filters some errors (not failing a test over …
02bf47f 
…for it)
@ndelangen
Merge branch '5.0.0' into tech/overhaul-ui
3540112 
# Conflicts:
#	addons/a11y/README.md
#	addons/a11y/package.json
#	addons/a11y/src/index.js
#	addons/actions/package.json
#	addons/actions/src/lib/decycle.js
#	addons/actions/src/lib/retrocycle.js
#	addons/actions/src/lib/reviver.js
#	addons/backgrounds/package.json
#	addons/cssresources/package.json
#	addons/events/package.json
#	addons/google-analytics/package.json
#	addons/info/package.json
#	addons/jest/package.json
#	addons/knobs/package.json
#	addons/links/package.json
#	addons/notes/package.json
#	addons/ondevice-backgrounds/package.json
#	addons/ondevice-knobs/package.json
#	addons/ondevice-notes/package.json
#	addons/options/package.json
#	addons/storyshots/storyshots-core/package.json
#	addons/storyshots/storyshots-puppeteer/package.json
#	addons/storysource/package.json
#	addons/viewport/package.json
#	app/react-native/package.json
#	app/react/package.json
#	examples/angular-cli/package.json
#	examples/cra-kitchen-sink/package.json
#	examples/mithril-kitchen-sink/package.json
#	examples/official-storybook/package.json
#	examples/preact-kitchen-sink/package.json
#	lib/addons/package.json
#	lib/channel-websocket/package.json
#	lib/components/package.json
#	lib/core/package.json
#	lib/ui/package.json
#	yarn.lock
@ndelangen
FIX story_store tests
63d574b
@tmeasday
Copy link
Member

tmeasday commented Jan 5, 2019

I did a little bit of QA on where we were at and added a list of bugs to the bottom on fhe PR summary above

Tom Coleman and others added 8 commits January 6, 2019 10:36
Use version endpoint to get version info
009bc8d
Handle missing latest version on about pages
cf390de
Fix stories tests
7cacf4b
@ndelangen
Merge branch '5.0.0' into tech/overhaul-ui
2178a07 
# Conflicts:
#	addons/a11y/package.json
#	addons/actions/package.json
#	addons/backgrounds/package.json
#	addons/cssresources/package.json
#	addons/events/package.json
#	addons/google-analytics/package.json
#	addons/info/package.json
#	addons/jest/package.json
#	addons/knobs/package.json
#	addons/knobs/src/components/__tests__/Panel.js
#	addons/links/package.json
#	addons/notes/package.json
#	addons/ondevice-backgrounds/package.json
#	addons/ondevice-knobs/package.json
#	addons/ondevice-notes/package.json
#	addons/options/package.json
#	addons/storyshots/storyshots-core/package.json
#	addons/storyshots/storyshots-puppeteer/package.json
#	addons/storysource/package.json
#	addons/viewport/package.json
#	app/react/package.json
#	examples/angular-cli/package.json
#	examples/cra-kitchen-sink/package.json
#	examples/mithril-kitchen-sink/package.json
#	examples/official-storybook/package.json
#	examples/preact-kitchen-sink/package.json
#	lib/addons/package.json
#	lib/channel-websocket/package.json
#	lib/client-logger/src/index.js
#	lib/components/package.json
#	lib/core-events/index.js
#	lib/core/package.json
#	lib/ui/package.json
#	lib/ui/src/modules/ui/components/stories_panel/stories_tree/__snapshots__/index.stories.storyshot
#	lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_decorators.js
#	lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_decorators_utils.js
#	lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_decorators_utils.test.js
#	yarn.lock
Simplify treeview a little and handle input prop changes
ea04c1f
@ndelangen
Merge pull request #5163 from storybooks/tmeasday/fix-treeview-reacti…
648113b 
…vity

Simplify treeview a little and handle input prop changes
@ndelangen
Merge branch 'tech/overhaul-ui' of github.com:storybooks/storybook in…
b64a083 
…to tech/overhaul-ui
@ndelangen
Merge branch '5.0.0' into tech/overhaul-ui
75d9cf5 
# Conflicts:
#	examples/angular-cli/package.json
#	lib/channel-postmessage/src/index.ts
#	lib/core/package.json
#	package.json
#	yarn.lock
@tmeasday tmeasday merged commit 75d9cf5 into 5.0.0 Jan 8, 2019
@LFDanLu LFDanLu mentioned this pull request Apr 5, 2019
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@tmeasday tmeasday tmeasday left review comments

@alexandrebodin alexandrebodin Awaiting requested review from alexandrebodin

@alterx alterx Awaiting requested review from alterx

@dangreenisrael dangreenisrael Awaiting requested review from dangreenisrael

@danielduan danielduan Awaiting requested review from danielduan

@Hypnosphi Hypnosphi Awaiting requested review from Hypnosphi

@igor-dv igor-dv Awaiting requested review from igor-dv

@jbovenschen jbovenschen Awaiting requested review from jbovenschen

@leonrodenburg leonrodenburg Awaiting requested review from leonrodenburg

@thani-sh thani-sh Awaiting requested review from thani-sh

@renaudtertrais renaudtertrais Awaiting requested review from renaudtertrais

@rhalff rhalff Awaiting requested review from rhalff

@saponifi3d saponifi3d Awaiting requested review from saponifi3d

@shilman shilman Awaiting requested review from shilman

@theinterned theinterned Awaiting requested review from theinterned

@thomasbertet thomasbertet Awaiting requested review from thomasbertet

@usulpro usulpro Awaiting requested review from usulpro

@z4o4z z4o4z Awaiting requested review from z4o4z

@naipath naipath Awaiting requested review from naipath

@stijnkoopal stijnkoopal Awaiting requested review from stijnkoopal

@Gongreg Gongreg Awaiting requested review from Gongreg

@rmevans9 rmevans9 Awaiting requested review from rmevans9

@aaronmcadam aaronmcadam Awaiting requested review from aaronmcadam

@kazupon kazupon Awaiting requested review from kazupon

Assignees

@gabrielcsapo gabrielcsapo

@ndelangen ndelangen

@alexandrebodin alexandrebodin

@igor-dv igor-dv

@Jessica-Koch Jessica-Koch

@chinchiheather chinchiheather

Labels
accessibility core maintenance User-facing maintenance tasks ui
Projects
None yet
Milestone
v5.0.0
Development

Successfully merging this pull request may close these issues.