Skip to content

Commit

Permalink
[regression] Fix Storybooks after elastic#161914
Browse files Browse the repository at this point in the history
  • Loading branch information
@clintandrewhall
clintandrewhall committed Jul 30, 2023
1 parent 97176a5 commit 52a383e
Show file tree
Hide file tree
Showing 3 changed files with 61 additions and 49 deletions.
6 changes: 3 additions & 3 deletions packages/kbn-storybook/src/lib/decorators.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import 'core_styles';
import { BehaviorSubject } from 'rxjs';
import { CoreTheme } from '@kbn/core-theme-browser';
import { I18nStart } from '@kbn/core-i18n-browser';
import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
import { KibanaRootContextProvider } from '@kbn/react-kibana-context-root';

const theme$ = new BehaviorSubject<CoreTheme>({ darkMode: false });

Expand All @@ -34,9 +34,9 @@ const KibanaContextDecorator: DecoratorFn = (storyFn, { globals }) => {
}, [colorMode]);

return (
<KibanaRenderContextProvider {...{ theme: { theme$ }, i18n }}>
<KibanaRootContextProvider {...{ theme: { theme$ }, i18n }}>
{storyFn()}
</KibanaRenderContextProvider>
</KibanaRootContextProvider>
);
};

Expand Down
102 changes: 56 additions & 46 deletions packages/kbn-storybook/templates/index.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,64 +4,74 @@
We use this one instead because we want to add the @kbn/ui-shared-deps-* tags here.
-->
<html lang="en">
<head>
<meta charset="utf-8" />
<title><%= htmlWebpackPlugin.options.title || 'Storybook'%></title>

<% if (htmlWebpackPlugin.files.favicon) { %>
<head>
<meta charset="utf-8" />
<title>
<%= htmlWebpackPlugin.options.title || 'Storybook' %>
</title>

<% if (htmlWebpackPlugin.files.favicon) { %>
<link rel="shortcut icon" href="<%= htmlWebpackPlugin.files.favicon%>" />
<% } %>

<meta name="viewport" content="width=device-width, initial-scale=1" />

<meta name="eui-global" />
<meta name="emotion" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<!-- Added for Kibana shared dependencies -->
<script>
window.__kbnPublicPath__ = { 'kbn-ui-shared-deps-npm': '', 'kbn-ui-shared-deps-src': '' };
</script>
<script src="kbn-ui-shared-deps-npm.dll.js"></script>
<script src="kbn-ui-shared-deps-src.js"></script>
<link href="kbn-ui-shared-deps-src.css" rel="stylesheet" />
<link id="eui-theme-css" href="kbn-ui-shared-deps-npm.v8.light.css" rel="stylesheet" />
<!-- -->
<meta name="eui-global" />
<meta name="eui-utilities" />
<meta name="emotion" />

<% if (typeof headHtmlSnippet !== 'undefined') { %> <%= headHtmlSnippet %> <% } %> <%
htmlWebpackPlugin.files.css.forEach(file => { %>
<link href="<%= file %>" rel="stylesheet" />
<% }); %>
<!-- Added for Kibana shared dependencies -->
<script>
window.__kbnPublicPath__ = { 'kbn-ui-shared-deps-npm': '', 'kbn-ui-shared-deps-src': '' };
</script>
<script src="kbn-ui-shared-deps-npm.dll.js"></script>
<script src="kbn-ui-shared-deps-src.js"></script>
<link href="kbn-ui-shared-deps-src.css" rel="stylesheet" />
<link id="eui-theme-css" href="kbn-ui-shared-deps-npm.v8.light.css" rel="stylesheet" />
<!-- -->

<style>
#root[hidden],
#docs-root[hidden] {
display: none !important;
}
</style>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10,300..700;0,300..700&family=Roboto+Mono:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">
</head>
<body>
<% if (typeof bodyHtmlSnippet !== 'undefined') { %>
<%= bodyHtmlSnippet %>
<% } %>
<% if (typeof headHtmlSnippet !=='undefined' ) { %>
<%= headHtmlSnippet %>
<% } %>
<% htmlWebpackPlugin.files.css.forEach(file=> { %>
<link href="<%= file %>" rel="stylesheet" />
<% }); %>

<div id="root"></div>
<div id="docs-root"></div>
<style>
#root[hidden],
#docs-root[hidden] {
display: none !important;
}
</style>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10,300..700;0,300..700&family=Roboto+Mono:ital,wght@0,400..700;1,400..700&display=swap"
rel="stylesheet">
</head>

<% if (typeof globals !== 'undefined' && Object.keys(globals).length) { %>
<script>
<body>
<% if (typeof bodyHtmlSnippet !=='undefined' ) { %>
<%= bodyHtmlSnippet %>
<% } %>

<div id="root"></div>
<div id="docs-root"></div>

<% if (typeof globals !=='undefined' && Object.keys(globals).length) { %>
<script>
<% for (var varName in globals) { %>
<% if (globals[varName] != undefined) { %>
window['<%=varName%>'] = <%= JSON.stringify(globals[varName]) %>;
window['<%=varName%>'] = <%= JSON.stringify(globals[varName]) %>;
<% } %>
<% } %>
</script>
<% } %>
</script>
<% } %>

<% htmlWebpackPlugin.files.js.forEach(file=> { %>
<script src="<%= file %>"></script>
<% }); %>
</body>

<% htmlWebpackPlugin.files.js.forEach(file => { %>
<script src="<%= file %>"></script>
<% }); %>
</body>
</html>
2 changes: 2 additions & 0 deletions packages/react/kibana_context/styled/README.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,5 @@ Before `emotion` was introduced, some components used `styled-components` to eas

It should _not_ be used in new code.

**NOTE:** plugins cannot use `styled-components` and `emotion` at the same time, their Babel plugins conflict. The EUI team has fielded many questions about this. The best solution is to migrate to `emotion` and not use `styled-components`.

0 comments on commit 52a383e

Please sign in to comment.