Skip to content

Commit 38a13e1

Browse files
gavinbarrongavinbarron
authored
feat: preview component support (#2356)
move search-box and search-component to preview folder and preview code barrel added preview bunding code to make storybook work
1 parent 4747189 commit 38a13e1

File tree

24 files changed

+369
-168
lines changed

24 files changed

+369
-168
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ dist/
22
www/
33
lib/
44
assets/mgt.storybook.js
5+
assets/mgt.preview.storybook.js
56

67
*~
78
*.sw[mnpcod]

‎.storybook/addons/codeEditorAddon/codeAddon.js‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { EditorElement } from './editor';
55
import { CLIENTID, SETPROVIDER_EVENT, AUTH_PAGE } from '../../env';
66

77
const mgtScriptName = './mgt.storybook.js';
8+
const mgtPreviewScriptName = './mgt.preview.storybook.js';
89

910
// function is used for dragging and moving
1011
const setupEditorResize = (first, separator, last, dragComplete) => {
@@ -185,21 +186,27 @@ export const withCodeEditor = makeDecorator({
185186
</header>
186187
`;
187188

189+
const resolveScript = () => {
190+
const usingPreview =
191+
editor.files.js.indexOf(`import '@microsoft/mgt-components/dist/es6/components/preview'`) > -1;
192+
return usingPreview ? mgtPreviewScriptName : mgtScriptName;
193+
};
194+
188195
let providerInitCode = `
189-
import {Providers, MockProvider} from "${mgtScriptName}";
196+
import {Providers, MockProvider} from "${resolveScript()}";
190197
Providers.globalProvider = new MockProvider(true);
191198
`;
192199

193200
const channel = addons.getChannel();
194201
channel.on(SETPROVIDER_EVENT, params => {
195202
if (params.state === ProviderState.SignedIn && params.name === 'MgtMockProvider') {
196203
providerInitCode = `
197-
import { Providers, MockProvider } from "${mgtScriptName}";
204+
import { Providers, MockProvider } from "${resolveScript()}";
198205
Providers.globalProvider = new MockProvider(true);
199206
`;
200207
} else if (params.state === ProviderState.SignedIn && params.name === 'MgtMsal2Provider') {
201208
providerInitCode = `
202-
import { Providers, Msal2Provider, LoginType } from "${mgtScriptName}";
209+
import { Providers, Msal2Provider, LoginType } from "${resolveScript()}";
203210
Providers.globalProvider = new Msal2Provider({
204211
clientId: "${CLIENTID}",
205212
loginType: LoginType.Popup,
@@ -219,15 +226,17 @@ export const withCodeEditor = makeDecorator({
219226
let doc = storyElement.contentDocument;
220227

221228
let { html, css, js } = editor.files;
229+
// strip the preview import, we include it in the resolved script
230+
js = js.replace(/import '@microsoft\/mgt-components\/dist\/es6\/components\/preview'/gm, ``);
222231
js = js.replace(
223232
/import \{([^\}]+)\}\s+from\s+['"]@microsoft\/mgt['"];/gm,
224-
`import {$1} from '${mgtScriptName}';`
233+
`import {$1} from '${resolveScript()}';`
225234
);
226235

227236
const docContent = `
228237
<html>
229238
<head>
230-
<script type="module" src="${mgtScriptName}"></script>
239+
<script type="module" src="${resolveScript()}"></script>
231240
<script type="module">
232241
${providerInitCode}
233242
</script>

‎.storybook/rollup.config.js‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,4 +40,22 @@ const es6Bundle = {
4040
]
4141
};
4242

43-
export default [es6Bundle];
43+
const es6PreviewBundle = {
44+
input: ['./packages/mgt/dist/es6/preview-bundle.js'],
45+
output: {
46+
dir: 'assets',
47+
entryFileNames: 'mgt.preview.storybook.js',
48+
format: 'esm'
49+
},
50+
plugins: [
51+
babel({
52+
extensions,
53+
...getBabelConfig(false)
54+
}),
55+
resolve({ module: true, jsnext: true, extensions }),
56+
postcss(),
57+
terser({ keep_classnames: true, keep_fnames: true })
58+
]
59+
};
60+
61+
export default [es6Bundle, es6PreviewBundle];

‎packages/mgt-components/src/components/components.ts‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,6 @@ import './mgt-file-list/mgt-file-list';
1111
import './mgt-picker/mgt-picker';
1212
import './mgt-taxonomy-picker/mgt-taxonomy-picker';
1313
import './mgt-get/mgt-get';
14-
import './mgt-search-box/mgt-search-box';
15-
import './mgt-search-results/mgt-search-results';
1614
import './mgt-login/mgt-login';
1715
import './mgt-people-picker/mgt-people-picker';
1816
import './mgt-people/mgt-people';
@@ -34,8 +32,6 @@ export * from './mgt-file-list/mgt-file-list';
3432
export * from './mgt-picker/mgt-picker';
3533
export * from './mgt-taxonomy-picker/mgt-taxonomy-picker';
3634
export * from './mgt-get/mgt-get';
37-
export * from './mgt-search-box/mgt-search-box';
38-
export * from './mgt-search-results/mgt-search-results';
3935
export * from './mgt-login/mgt-login';
4036
export * from './mgt-people-picker/mgt-people-picker';
4137
export * from './mgt-people/mgt-people';

‎packages/mgt-components/src/components/mgt-search-box/mgt-search-box.scss‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎packages/mgt-components/src/components/preview/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from './mgt-search-box/mgt-search-box';
2+
export * from './mgt-search-results/mgt-search-results';

‎packages/mgt-components/src/components/preview/mgt-search-box/mgt-search-box.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@import '../../../styles/shared-styles';
2+
3+
:host fluent-search {
4+
width: 100%;
5+
}

‎packages/mgt-components/src/components/mgt-search-box/mgt-search-box.ts‎ renamed to ‎packages/mgt-components/src/components/preview/mgt-search-box/mgt-search-box.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@ import { CSSResult, html, TemplateResult } from 'lit';
99
import { property } from 'lit/decorators.js';
1010
import { customElement, MgtBaseComponent } from '@microsoft/mgt-element';
1111
import { fluentSearch } from '@fluentui/web-components';
12-
import { registerFluentComponents } from '../../utils/FluentComponents';
12+
import { registerFluentComponents } from '../../../utils/FluentComponents';
1313
import { strings } from './strings';
1414
import { styles } from './mgt-search-box-css';
15-
import { debounce } from '../../utils/Utils';
15+
import { debounce } from '../../../utils/Utils';
1616

1717
registerFluentComponents(fluentSearch);
1818

‎packages/mgt-components/src/components/mgt-search-box/strings.ts‎ renamed to ‎packages/mgt-components/src/components/preview/mgt-search-box/strings.ts‎

File renamed without changes.

‎packages/mgt-components/src/components/mgt-search-results/mgt-search-results.scss‎ renamed to ‎packages/mgt-components/src/components/preview/mgt-search-results/mgt-search-results.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import '../../styles/shared-styles';
1+
@import '../../../styles/shared-styles';
22

33
$answer-border-radius: var(--answer-border-radius, 4px);
44
$answer-box-shadow: var(

0 commit comments

Comments
 (0)