Skip to content

Commit

Permalink
FIX the themeing flash & persist the theme into localstorage to preve…
Browse files Browse the repository at this point in the history 
…nt flashing upon reloading
  • Loading branch information
@ndelangen
ndelangen committed Feb 27, 2019
1 parent 1cfc04c commit 362a339
Show file tree
Hide file tree
Showing 4 changed files with 282 additions and 9 deletions.
2 changes: 1 addition & 1 deletion examples/official-storybook/config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ addParameters({
options: {
hierarchySeparator: /\/|\./,
hierarchyRootSeparator: '|',
// theme: themes.dark,
theme: themes.dark,
},
viewports: {
...INITIAL_VIEWPORTS,
Expand Down
262 changes: 261 additions & 1 deletion examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2638,7 +2638,267 @@ exports[`Storyshots Core|Parameters passed to story 1`] = `
Parameters are {
"options": {
"hierarchyRootSeparator": "|",
"hierarchySeparator": {}
"hierarchySeparator": {},
"theme": {
"base": "dark",
"color": {
"primary": "#FF4785",
"secondary": "#1EA7FD",
"tertiary": "#FAFBFC",
"ancillary": "#22a699",
"orange": "#FC521F",
"gold": "#FFAE00",
"green": "#66BF3C",
"seafoam": "#37D5D3",
"purple": "#6F2CAC",
"ultraviolet": "#2A0481",
"lightest": "#FFFFFF",
"lighter": "#F8F8F8",
"light": "#F3F3F3",
"mediumlight": "#EEEEEE",
"medium": "#DDDDDD",
"mediumdark": "#999999",
"dark": "#666666",
"darker": "#444444",
"darkest": "#333333",
"border": "rgba(0,0,0,.1)",
"positive": "#66BF3C",
"negative": "#FF4400",
"warning": "#E69D00",
"defaultText": "#FFFFFF",
"inverseText": "#333333"
},
"background": {
"app": "#2f2f2f",
"content": "#333",
"hoverable": "rgba(250,250,252,.1)",
"positive": "#E1FFD4",
"negative": "#FEDED2",
"warning": "#FFF5CF"
},
"typography": {
"fonts": {
"base": "\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
"mono": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace"
},
"weight": {
"regular": 400,
"bold": 700,
"black": 900
},
"size": {
"s1": 12,
"s2": 14,
"s3": 16,
"m1": 20,
"m2": 24,
"m3": 28,
"l1": 32,
"l2": 40,
"l3": 48,
"code": 90
}
},
"animation": {
"rotate360": {
"name": "animation-u07e3c",
"styles": "@keyframes animation-u07e3c{\\n\\tfrom {\\n\\t\\ttransform: rotate(0deg);\\n\\t}\\n\\tto {\\n\\t\\ttransform: rotate(360deg);\\n\\t}\\n}",
"anim": 1
},
"glow": {
"name": "animation-r0iffl",
"styles": "@keyframes animation-r0iffl{\\n 0%, 100% { opacity: 1; }\\n 50% { opacity: .4; }\\n}",
"anim": 1
},
"float": {
"name": "animation-6tolu8",
"styles": "@keyframes animation-6tolu8{\\n 0% { transform: translateY(1px); }\\n 25% { transform: translateY(0px); }\\n 50% { transform: translateY(-3px); }\\n 100% { transform: translateY(1px); }\\n}",
"anim": 1
},
"jiggle": {
"name": "animation-ynpq7w",
"styles": "@keyframes animation-ynpq7w{\\n 0%, 100% { transform:translate3d(0,0,0); }\\n 12.5%, 62.5% { transform:translate3d(-4px,0,0); }\\n 37.5%, 87.5% { transform: translate3d(4px,0,0); }\\n}",
"anim": 1
},
"inlineGlow": {
"name": "zv3h0s",
"styles": "\\n animation: animation-r0iffl 1.5s ease-in-out infinite;\\n background: rgba(0,0,0,.1);\\n color: transparent;\\n cursor: progress;\\n",
"next": {
"name": "animation-r0iffl",
"styles": "@keyframes animation-r0iffl{\\n 0%, 100% { opacity: 1; }\\n 50% { opacity: .4; }\\n}"
}
},
"hoverable": {
"name": "wpaw6f",
"styles": "\\n transition: all 150ms ease-out;\\n transform: translate3d(0, 0, 0);\\n\\n &:hover {\\n transform: translate3d(0, -2px, 0);\\n }\\n\\n &:active {\\n transform: translate3d(0, 0, 0);\\n }\\n"
}
},
"easing": {
"rubber": "cubic-bezier(0.175, 0.885, 0.335, 1.05)"
},
"input": {
"border": "rgba(0,0,0,.3)",
"background": "#3f3f3f",
"color": "#FFFFFF",
"borderRadius": 4
},
"layoutMargin": 10,
"appBorderColor": "rgba(255,255,255,.1)",
"appBorderRadius": 4,
"barTextColor": "#999999",
"barSelectedColor": "#1EA7FD",
"barBg": "#333333",
"brand": {},
"code": {
"token": {
"fontFamily": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
"WebkitFontSmoothing": "antialiased",
"&.comment": {
"color": "#7C7C7C",
"fontStyle": "italic"
},
"&.prolog": {
"color": "#7C7C7C",
"fontStyle": "italic"
},
"&.doctype": {
"color": "#7C7C7C",
"fontStyle": "italic"
},
"&.cdata": {
"color": "#7C7C7C",
"fontStyle": "italic"
},
"&.string": {
"color": "#92C379"
},
"&.punctuation": {
"color": "#EDEDED"
},
"&.operator": {
"color": "#EDEDED"
},
"&.url": {
"color": "#C6C5FE"
},
"&.symbol": {
"color": "#C6C5FE"
},
"&.number": {
"color": "#C6C5FE"
},
"&.boolean": {
"color": "#C6C5FE"
},
"&.variable": {
"color": "#C6C5FE"
},
"&.constant": {
"color": "#C6C5FE"
},
"&.inserted": {
"color": "#C6C5FE"
},
"&.atrule": {
"color": "#B474DD"
},
"&.keyword": {
"color": "#B474DD"
},
"&.attr-value": {
"color": "#B474DD"
},
"&.function": {
"color": "#EDEDED"
},
"&.deleted": {
"color": "#9a050f"
},
"&.important": {
"fontWeight": "bold"
},
"&.bold": {
"fontWeight": "bold"
},
"&.italic": {
"fontStyle": "italic"
},
"&.class-name": {
"color": "#FFFFB6"
},
"&.tag": {
"color": "#A8FF60"
},
"&.selector": {
"color": "#A8FF60"
},
"&.attr-name": {
"color": "#96CBFE"
},
"&.property": {
"color": "#96CBFE"
},
"&.regex": {
"color": "#96CBFE"
},
"&.entity": {
"color": "#96CBFE"
},
"&.directive.tag .tag": {
"background": "#ffff00",
"color": "#EDEDED"
}
},
"language-json .token.boolean": {
"color": "#B474DD"
},
"language-json .token.number": {
"color": "#B474DD"
},
"language-json .token.property": {
"color": "#FFFFB6"
},
"namespace": {
"opacity": 0.7
}
},
"addonActionsTheme": {
"BASE_FONT_FAMILY": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
"BASE_FONT_SIZE": 13,
"BASE_LINE_HEIGHT": "18px",
"BASE_BACKGROUND_COLOR": "transparent",
"BASE_COLOR": "#FFFFFF",
"OBJECT_NAME_COLOR": "rgb(227, 110, 236)",
"OBJECT_VALUE_NULL_COLOR": "rgb(127, 127, 127)",
"OBJECT_VALUE_UNDEFINED_COLOR": "rgb(127, 127, 127)",
"OBJECT_VALUE_REGEXP_COLOR": "rgb(233, 63, 59)",
"OBJECT_VALUE_STRING_COLOR": "rgb(233, 63, 59)",
"OBJECT_VALUE_SYMBOL_COLOR": "rgb(233, 63, 59)",
"OBJECT_VALUE_NUMBER_COLOR": "hsl(252, 100%, 75%)",
"OBJECT_VALUE_BOOLEAN_COLOR": "hsl(252, 100%, 75%)",
"OBJECT_VALUE_FUNCTION_KEYWORD_COLOR": "rgb(242, 85, 217)",
"HTML_TAG_COLOR": "rgb(93, 176, 215)",
"HTML_TAGNAME_COLOR": "rgb(93, 176, 215)",
"HTML_TAGNAME_TEXT_TRANSFORM": "lowercase",
"HTML_ATTRIBUTE_NAME_COLOR": "rgb(155, 187, 220)",
"HTML_ATTRIBUTE_VALUE_COLOR": "rgb(242, 151, 102)",
"HTML_COMMENT_COLOR": "rgb(137, 137, 137)",
"HTML_DOCTYPE_COLOR": "rgb(192, 192, 192)",
"ARROW_COLOR": "rgba(255,255,255,0.3)",
"ARROW_MARGIN_RIGHT": 4,
"ARROW_FONT_SIZE": 8,
"TREENODE_FONT_FAMILY": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
"TREENODE_FONT_SIZE": 13,
"TREENODE_LINE_HEIGHT": "18px",
"TREENODE_PADDING_LEFT": 12,
"TABLE_BORDER_COLOR": "rgb(85, 85, 85)",
"TABLE_TH_BACKGROUND_COLOR": "rgb(44, 44, 44)",
"TABLE_TH_HOVER_COLOR": "rgb(48, 48, 48)",
"TABLE_SORT_ICON_COLOR": "black",
"TABLE_DATA_BACKGROUND_IMAGE": "linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 50%, rgba(51, 139, 255, 0.0980392) 50%, rgba(51, 139, 255, 0.0980392))",
"TABLE_DATA_BACKGROUND_SIZE": "128px 32px"
}
}
},
"a11y": {
"configure": {},
Expand Down
14 changes: 12 additions & 2 deletions lib/ui/src/core/context.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,9 @@ export class Provider extends Component {
api.on(SET_STORIES, data => {
api.setStories(data.stories);

const options = api.getParameters(storyId, 'options');
const options = storyId
? api.getParameters(storyId, 'options')
: api.getParameters(Object.keys(data.stories)[0], 'options');

api.setOptions(options);
});
Expand All @@ -101,7 +103,15 @@ export class Provider extends Component {
api.selectStory(kind, story, rest);
});

this.state = state;
// TODO: cleanup into the module
// TODO: animation isn't serializing succesfully, should use telejson
const {
theme: { animation, ...rest },
// eslint-disable-next-line react/destructuring-assignment
} = this.state.ui;
this.state = Object.assign({}, state, {
ui: { ...state.ui, theme: { ...state.ui.theme, ...rest } },
});
this.api = api;
}

Expand Down
13 changes: 8 additions & 5 deletions lib/ui/src/core/init-provider-api.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,11 +74,14 @@ export default ({ provider, api, store }) => {
...checkDeprecatedThemeOptions(options),
};

store.setState({
layout: updatedLayout,
ui: updatedUi,
selectedPanel: options.panel || options.selectedPanel || selectedPanel,
});
store.setState(
{
layout: updatedLayout,
ui: updatedUi,
selectedPanel: options.panel || options.selectedPanel || selectedPanel,
},
{ persistence: 'permanent' }
);
}
},
};
Expand Down

1 comment on commit 362a339

@vercel
Copy link

@vercel vercel bot commented on 362a339 Feb 27, 2019

Choose a reason for hiding this comment

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

You are pushing commits at a very fast pace (accross the whole organization).
Due to that, we cannot deploy the commit 362a339.

You can try again later or upgrade your plan.

Please sign in to comment.