Skip to content

Commit 6959a48

Browse files
authored
mgt-react - changed dependency from mgt to mgt-components (#839)
* mgt-react - changed dependency from mgt to mgt-components * Exported mgt-components and mgt-element types
1 parent 6594bcb commit 6959a48

File tree

3 files changed

+39
-29
lines changed

3 files changed

+39
-29
lines changed

packages/mgt-react/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
"generate": "wca analyze ../mgt-components/src --format json --outFile temp/web-components.json && node ./scripts/generate.js"
3232
},
3333
"dependencies": {
34-
"@microsoft/mgt": "*",
34+
"@microsoft/mgt-components": "*",
3535
"@microsoft/mgt-element": "*",
3636
"@microsoft/microsoft-graph-types": "^1.27.0",
3737
"@microsoft/microsoft-graph-types-beta": "github:microsoftgraph/msgraph-typescript-typings#beta",

packages/mgt-react/scripts/generate.js

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ var fs = require('fs-extra');
33
let wc = JSON.parse(fs.readFileSync(`${__dirname}/../temp/web-components.json`));
44

55
const primitives = new Set(['string', 'boolean', 'number', 'any']);
6-
const mgtImports = new Set();
6+
const mgtComponentImports = new Set();
7+
const mgtElementImports = new Set();
78

89
const tags = new Set([
910
'mgt-person',
@@ -55,22 +56,27 @@ for (const tag of wc.tags) {
5556

5657
if (
5758
type.startsWith('MicrosoftGraph.') ||
58-
type.startsWith('MicrosoftGraphBeta.') ||
59-
type.startsWith('MgtElement.')
59+
type.startsWith('MicrosoftGraphBeta.')
6060
) {
6161
continue;
6262
}
6363

64-
if (!primitives.has(type) && !mgtImports.has(type)) {
65-
mgtImports.add(type);
64+
if (type.startsWith('MgtElement.') && !mgtElementImports.has(type)) {
65+
mgtElementImports.add(type.split('.')[1]);
66+
} else if (!primitives.has(type) && !mgtComponentImports.has(type)) {
67+
mgtComponentImports.add(type);
6668
}
6769
}
6870
}
6971

7072
let propsType = '';
7173

7274
for (const prop in props) {
73-
propsType += `\t${prop}?: ${props[prop]};\n`;
75+
let type = props[prop];
76+
if (type.startsWith('MgtElement.')) {
77+
type = type.split('.')[1];
78+
}
79+
propsType += `\t${prop}?: ${type};\n`;
7480
}
7581

7682
if (tag.events) {
@@ -86,12 +92,14 @@ for (const wrapper of wrappers) {
8692
output += `\nexport const ${wrapper.className} = wrapMgt<${wrapper.propsType}>('${wrapper.tag}');\n`;
8793
}
8894

89-
output = `import { ${Array.from(mgtImports).join(',')} } from '@microsoft/mgt';
90-
import * as MgtElement from '@microsoft/mgt-element';
95+
output = `import { ${Array.from(mgtComponentImports).join(',')} } from '@microsoft/mgt-components';
96+
import { ${Array.from(mgtElementImports).join(',')} } from '@microsoft/mgt-element';
9197
import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
9298
import * as MicrosoftGraphBeta from '@microsoft/microsoft-graph-types-beta';
9399
import {wrapMgt} from '../Mgt';
94100
${output}
101+
export { ${Array.from(mgtComponentImports).join(',')} } from '@microsoft/mgt-components';
102+
export { ${Array.from(mgtElementImports).join(',')} } from '@microsoft/mgt-element';
95103
`;
96104

97105
if (!fs.existsSync(`${__dirname}/../src/generated`)) {

packages/mgt-react/src/generated/react.ts

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { ResponseType,IDynamicPerson,PersonType,GroupType,PersonCardInteraction,MgtPersonConfig,PersonViewType,AvatarSize,TasksStringResource,TasksSource,TaskFilter,SelectedChannel } from '@microsoft/mgt';
2-
import * as MgtElement from '@microsoft/mgt-element';
1+
import { ResponseType,IDynamicPerson,PersonType,GroupType,PersonCardInteraction,MgtPersonConfig,PersonViewType,AvatarSize,TasksStringResource,TasksSource,TaskFilter,SelectedChannel } from '@microsoft/mgt-components';
2+
import { TemplateContext,ComponentMediaQuery } from '@microsoft/mgt-element';
33
import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
44
import * as MicrosoftGraphBeta from '@microsoft/microsoft-graph-types-beta';
55
import {wrapMgt} from '../Mgt';
@@ -13,8 +13,8 @@ export type AgendaProps = {
1313
showMax?: number;
1414
groupByDay?: boolean;
1515
preferredTimezone?: string;
16-
templateContext?: MgtElement.TemplateContext;
17-
mediaQuery?: MgtElement.ComponentMediaQuery;
16+
templateContext?: TemplateContext;
17+
mediaQuery?: ComponentMediaQuery;
1818
eventClick?: (e: Event) => void;
1919
}
2020

@@ -27,15 +27,15 @@ export type GetProps = {
2727
pollingRate?: number;
2828
cacheEnabled?: boolean;
2929
cacheInvalidationPeriod?: number;
30-
templateContext?: MgtElement.TemplateContext;
31-
mediaQuery?: MgtElement.ComponentMediaQuery;
30+
templateContext?: TemplateContext;
31+
mediaQuery?: ComponentMediaQuery;
3232
dataChange?: (e: Event) => void;
3333
}
3434

3535
export type LoginProps = {
3636
userDetails?: IDynamicPerson;
37-
templateContext?: MgtElement.TemplateContext;
38-
mediaQuery?: MgtElement.ComponentMediaQuery;
37+
templateContext?: TemplateContext;
38+
mediaQuery?: ComponentMediaQuery;
3939
loginInitiated?: (e: Event) => void;
4040
loginCompleted?: (e: Event) => void;
4141
loginFailed?: (e: Event) => void;
@@ -54,8 +54,8 @@ export type PeoplePickerProps = {
5454
selectionMode?: string;
5555
showMax?: number;
5656
selectedPeople?: IDynamicPerson[];
57-
templateContext?: MgtElement.TemplateContext;
58-
mediaQuery?: MgtElement.ComponentMediaQuery;
57+
templateContext?: TemplateContext;
58+
mediaQuery?: ComponentMediaQuery;
5959
selectionChanged?: (e: Event) => void;
6060
}
6161

@@ -67,8 +67,8 @@ export type PeopleProps = {
6767
showPresence?: boolean;
6868
personCardInteraction?: PersonCardInteraction;
6969
showMax?: number;
70-
templateContext?: MgtElement.TemplateContext;
71-
mediaQuery?: MgtElement.ComponentMediaQuery;
70+
templateContext?: TemplateContext;
71+
mediaQuery?: ComponentMediaQuery;
7272
}
7373

7474
export type PersonCardProps = {
@@ -81,8 +81,8 @@ export type PersonCardProps = {
8181
inheritDetails?: boolean;
8282
showPresence?: boolean;
8383
personPresence?: MicrosoftGraphBeta.Presence;
84-
templateContext?: MgtElement.TemplateContext;
85-
mediaQuery?: MgtElement.ComponentMediaQuery;
84+
templateContext?: TemplateContext;
85+
mediaQuery?: ComponentMediaQuery;
8686
}
8787

8888
export type PersonProps = {
@@ -100,8 +100,8 @@ export type PersonProps = {
100100
line3Property?: string;
101101
view?: PersonViewType;
102102
avatarSize?: AvatarSize;
103-
templateContext?: MgtElement.TemplateContext;
104-
mediaQuery?: MgtElement.ComponentMediaQuery;
103+
templateContext?: TemplateContext;
104+
mediaQuery?: ComponentMediaQuery;
105105
}
106106

107107
export type TasksProps = {
@@ -117,8 +117,8 @@ export type TasksProps = {
117117
hideOptions?: boolean;
118118
groupId?: string;
119119
taskFilter?: TaskFilter;
120-
templateContext?: MgtElement.TemplateContext;
121-
mediaQuery?: MgtElement.ComponentMediaQuery;
120+
templateContext?: TemplateContext;
121+
mediaQuery?: ComponentMediaQuery;
122122
taskAdded?: (e: Event) => void;
123123
taskChanged?: (e: Event) => void;
124124
taskClick?: (e: Event) => void;
@@ -127,8 +127,8 @@ export type TasksProps = {
127127

128128
export type TeamsChannelPickerProps = {
129129
selectedItem?: SelectedChannel;
130-
templateContext?: MgtElement.TemplateContext;
131-
mediaQuery?: MgtElement.ComponentMediaQuery;
130+
templateContext?: TemplateContext;
131+
mediaQuery?: ComponentMediaQuery;
132132
selectionChanged?: (e: Event) => void;
133133
}
134134

@@ -150,3 +150,5 @@ export const Tasks = wrapMgt<TasksProps>('mgt-tasks');
150150

151151
export const TeamsChannelPicker = wrapMgt<TeamsChannelPickerProps>('mgt-teams-channel-picker');
152152

153+
export { ResponseType,IDynamicPerson,PersonType,GroupType,PersonCardInteraction,MgtPersonConfig,PersonViewType,AvatarSize,TasksStringResource,TasksSource,TaskFilter,SelectedChannel } from '@microsoft/mgt-components';
154+
export { TemplateContext,ComponentMediaQuery } from '@microsoft/mgt-element';

0 commit comments

Comments
 (0)