@teambit/compositions 0.0.567 → 0.0.571
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/composition.section.tsx +29 -0
- package/compositions.tsx +185 -0
- package/compositions.ui.runtime.tsx +53 -0
- package/package-tar/teambit-compositions-0.0.571.tgz +0 -0
- package/package.json +26 -41
- package/types/asset.d.ts +29 -0
- package/types/style.d.ts +42 -0
- package/ui/composition-preview.tsx +60 -0
- package/ui/compositions-overview/compositions-overview.tsx +21 -0
- package/ui/compositions-overview/index.ts +1 -0
- package/ui/compositions-panel/compositions-panel.tsx +58 -0
- package/ui/compositions-panel/index.ts +0 -0
- package/ui/compositions-panel-node/compositions-panel-node.tsx +22 -0
- package/ui/compositions-panel-node/index.ts +1 -0
- package/ui/index.ts +1 -0
- package/ui/use-compositions.tsx +14 -0
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { Section } from '@teambit/component';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { Compositions } from './compositions';
|
|
4
|
+
import type { CompositionsUI, CompositionsMenuSlot, EmptyStateSlot } from './compositions.ui.runtime';
|
|
5
|
+
|
|
6
|
+
type Options = { menuBarWidgetSlot: CompositionsMenuSlot };
|
|
7
|
+
|
|
8
|
+
export class CompositionsSection implements Section {
|
|
9
|
+
constructor(
|
|
10
|
+
/**
|
|
11
|
+
* simulations ui extension.
|
|
12
|
+
*/
|
|
13
|
+
private compositions: CompositionsUI,
|
|
14
|
+
private options: Options,
|
|
15
|
+
private emptyStateSlot: EmptyStateSlot
|
|
16
|
+
) {}
|
|
17
|
+
|
|
18
|
+
navigationLink = {
|
|
19
|
+
href: '~compositions',
|
|
20
|
+
children: 'Compositions',
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
route = {
|
|
24
|
+
path: '~compositions',
|
|
25
|
+
children: <Compositions menuBarWidgets={this.options.menuBarWidgetSlot} emptyState={this.emptyStateSlot} />,
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
order = 20;
|
|
29
|
+
}
|
package/compositions.tsx
ADDED
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
import React, { useContext, useEffect, useState, useMemo, useRef, ReactNode } from 'react';
|
|
2
|
+
import head from 'lodash.head';
|
|
3
|
+
import queryString from 'query-string';
|
|
4
|
+
import { ThemeContext } from '@teambit/documenter.theme.theme-context';
|
|
5
|
+
import { SplitPane, Pane, Layout } from '@teambit/base-ui.surfaces.split-pane.split-pane';
|
|
6
|
+
import { HoverSplitter } from '@teambit/base-ui.surfaces.split-pane.hover-splitter';
|
|
7
|
+
import { ComponentContext, ComponentModel } from '@teambit/component';
|
|
8
|
+
import { PropTable } from '@teambit/documenter.ui.property-table';
|
|
9
|
+
import { Tab, TabContainer, TabList, TabPanel } from '@teambit/panels';
|
|
10
|
+
import { useDocs } from '@teambit/docs.ui.queries.get-docs';
|
|
11
|
+
import { Collapser } from '@teambit/ui-foundation.ui.buttons.collapser';
|
|
12
|
+
import { EmptyBox } from '@teambit/design.ui.empty-box';
|
|
13
|
+
import { toPreviewUrl } from '@teambit/preview.ui.component-preview';
|
|
14
|
+
import { useIsMobile } from '@teambit/ui-foundation.ui.hooks.use-is-mobile';
|
|
15
|
+
import { CompositionsMenuBar } from '@teambit/compositions.ui.compositions-menu-bar';
|
|
16
|
+
import { CompositionContextProvider } from '@teambit/compositions.ui.hooks.use-composition';
|
|
17
|
+
import { MDXLayout } from '@teambit/mdx.ui.mdx-layout';
|
|
18
|
+
import { Separator } from '@teambit/design.ui.separator';
|
|
19
|
+
import { H1 } from '@teambit/documenter.ui.heading';
|
|
20
|
+
import { AlertCard } from '@teambit/design.ui.alert-card';
|
|
21
|
+
import { NativeLink } from '@teambit/base-ui.routing.native-link';
|
|
22
|
+
import { OptionButton } from '@teambit/design.ui.input.option-button';
|
|
23
|
+
import { StatusMessageCard } from '@teambit/design.ui.surfaces.status-message-card';
|
|
24
|
+
import { EmptyStateSlot } from './compositions.ui.runtime';
|
|
25
|
+
import { Composition } from './composition';
|
|
26
|
+
import styles from './compositions.module.scss';
|
|
27
|
+
import { ComponentComposition } from './ui';
|
|
28
|
+
import { CompositionsPanel } from './ui/compositions-panel/compositions-panel';
|
|
29
|
+
import type { CompositionsMenuSlot } from './compositions.ui.runtime';
|
|
30
|
+
|
|
31
|
+
export type MenuBarWidget = {
|
|
32
|
+
location: 'start' | 'end';
|
|
33
|
+
content: ReactNode;
|
|
34
|
+
};
|
|
35
|
+
export type CompositionsProp = { menuBarWidgets?: CompositionsMenuSlot; emptyState?: EmptyStateSlot };
|
|
36
|
+
|
|
37
|
+
export function Compositions({ menuBarWidgets, emptyState }: CompositionsProp) {
|
|
38
|
+
const component = useContext(ComponentContext);
|
|
39
|
+
const [selected, selectComposition] = useState(head(component.compositions));
|
|
40
|
+
const selectedRef = useRef(selected);
|
|
41
|
+
selectedRef.current = selected;
|
|
42
|
+
|
|
43
|
+
const properties = useDocs(component.id);
|
|
44
|
+
|
|
45
|
+
// reset selected composition when component changes.
|
|
46
|
+
// this does trigger renderer, but perf seems to be ok
|
|
47
|
+
useEffect(() => {
|
|
48
|
+
const prevId = selectedRef.current?.identifier;
|
|
49
|
+
const next = component.compositions.find((c) => c.identifier === prevId) || component.compositions[0];
|
|
50
|
+
|
|
51
|
+
selectComposition(next);
|
|
52
|
+
}, [component]);
|
|
53
|
+
const isMobile = useIsMobile();
|
|
54
|
+
const showSidebar = !isMobile && component.compositions.length > 0;
|
|
55
|
+
const [isSidebarOpen, setSidebarOpenness] = useState(showSidebar);
|
|
56
|
+
|
|
57
|
+
const sidebarOpenness = isSidebarOpen ? Layout.row : Layout.left;
|
|
58
|
+
|
|
59
|
+
const compositionUrl = toPreviewUrl(component, 'compositions');
|
|
60
|
+
const currentCompositionUrl = toPreviewUrl(component, 'compositions', selected?.identifier);
|
|
61
|
+
|
|
62
|
+
const [compositionParams, setCompositionParams] = useState<Record<string, any>>({});
|
|
63
|
+
const queryParams = useMemo(() => queryString.stringify(compositionParams), [compositionParams]);
|
|
64
|
+
|
|
65
|
+
// collapse sidebar when empty, reopen when not
|
|
66
|
+
useEffect(() => setSidebarOpenness(showSidebar), [showSidebar]);
|
|
67
|
+
|
|
68
|
+
return (
|
|
69
|
+
<CompositionContextProvider queryParams={compositionParams} setQueryParams={setCompositionParams}>
|
|
70
|
+
<SplitPane layout={sidebarOpenness} size="85%" className={styles.compositionsPage}>
|
|
71
|
+
<Pane className={styles.left}>
|
|
72
|
+
<CompositionsMenuBar menuBarWidgets={menuBarWidgets} className={styles.menuBar}>
|
|
73
|
+
<NativeLink external href={currentCompositionUrl} className={styles.openInNewTab}>
|
|
74
|
+
<OptionButton icon="open-tab" />
|
|
75
|
+
</NativeLink>
|
|
76
|
+
</CompositionsMenuBar>
|
|
77
|
+
<CompositionContent
|
|
78
|
+
emptyState={emptyState}
|
|
79
|
+
component={component}
|
|
80
|
+
selected={selected}
|
|
81
|
+
queryParams={queryParams}
|
|
82
|
+
/>
|
|
83
|
+
</Pane>
|
|
84
|
+
<HoverSplitter className={styles.splitter}>
|
|
85
|
+
<Collapser
|
|
86
|
+
placement="left"
|
|
87
|
+
isOpen={isSidebarOpen}
|
|
88
|
+
onMouseDown={(e) => e.stopPropagation()} // avoid split-pane drag
|
|
89
|
+
onClick={() => setSidebarOpenness((x) => !x)}
|
|
90
|
+
tooltipContent={`${isSidebarOpen ? 'Hide' : 'Show'} side compositions`}
|
|
91
|
+
className={styles.collapser}
|
|
92
|
+
/>
|
|
93
|
+
</HoverSplitter>
|
|
94
|
+
<Pane className={styles.right}>
|
|
95
|
+
<ThemeContext>
|
|
96
|
+
<TabContainer className={styles.tabsContainer}>
|
|
97
|
+
<TabList className={styles.tabs}>
|
|
98
|
+
<Tab>compositions</Tab>
|
|
99
|
+
<Tab>properties</Tab>
|
|
100
|
+
</TabList>
|
|
101
|
+
<TabPanel className={styles.tabContent}>
|
|
102
|
+
<CompositionsPanel
|
|
103
|
+
onSelectComposition={selectComposition}
|
|
104
|
+
url={compositionUrl}
|
|
105
|
+
compositions={component.compositions}
|
|
106
|
+
active={selected}
|
|
107
|
+
className={styles.compost}
|
|
108
|
+
/>
|
|
109
|
+
</TabPanel>
|
|
110
|
+
<TabPanel className={styles.tabContent}>
|
|
111
|
+
{properties && properties.length > 0 ? <PropTable rows={properties} showListView /> : <div />}
|
|
112
|
+
</TabPanel>
|
|
113
|
+
</TabContainer>
|
|
114
|
+
</ThemeContext>
|
|
115
|
+
</Pane>
|
|
116
|
+
</SplitPane>
|
|
117
|
+
</CompositionContextProvider>
|
|
118
|
+
);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
type CompositionContentProps = {
|
|
122
|
+
component: ComponentModel;
|
|
123
|
+
selected?: Composition;
|
|
124
|
+
queryParams?: string | string[];
|
|
125
|
+
emptyState?: EmptyStateSlot;
|
|
126
|
+
};
|
|
127
|
+
|
|
128
|
+
function CompositionContent({ component, selected, queryParams, emptyState }: CompositionContentProps) {
|
|
129
|
+
const env = component.environment?.id;
|
|
130
|
+
const EmptyStateTemplate = emptyState?.get(env || ''); // || defaultTemplate;
|
|
131
|
+
|
|
132
|
+
if (component.compositions.length === 0 && component.host === 'teambit.workspace/workspace' && EmptyStateTemplate) {
|
|
133
|
+
return (
|
|
134
|
+
<div className={styles.noCompositionsPage}>
|
|
135
|
+
<div>
|
|
136
|
+
<H1 className={styles.title}>Compositions</H1>
|
|
137
|
+
<Separator isPresentational className={styles.separator} />
|
|
138
|
+
<AlertCard
|
|
139
|
+
level="info"
|
|
140
|
+
title="There are no
|
|
141
|
+
compositions for this Component. Learn how to add compositions:"
|
|
142
|
+
>
|
|
143
|
+
<MDXLayout>
|
|
144
|
+
<EmptyStateTemplate />
|
|
145
|
+
</MDXLayout>
|
|
146
|
+
</AlertCard>
|
|
147
|
+
</div>
|
|
148
|
+
</div>
|
|
149
|
+
);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
if (component?.buildStatus === 'pending' && component?.host === 'teambit.scope/scope')
|
|
153
|
+
return (
|
|
154
|
+
<StatusMessageCard className={styles.buildStatusMessage} status="PROCESSING" title="component preview pending">
|
|
155
|
+
this might take some time
|
|
156
|
+
</StatusMessageCard>
|
|
157
|
+
);
|
|
158
|
+
if (component?.buildStatus === 'failed' && component?.host === 'teambit.scope/scope')
|
|
159
|
+
return (
|
|
160
|
+
<StatusMessageCard
|
|
161
|
+
className={styles.buildStatusMessage}
|
|
162
|
+
status="FAILURE"
|
|
163
|
+
title="failed to get component preview "
|
|
164
|
+
></StatusMessageCard>
|
|
165
|
+
);
|
|
166
|
+
|
|
167
|
+
if (component.compositions.length === 0) {
|
|
168
|
+
return (
|
|
169
|
+
<EmptyBox
|
|
170
|
+
title="There are no compositions for this component."
|
|
171
|
+
linkText="Learn how to create compositions"
|
|
172
|
+
link="https://harmony-docs.bit.dev/compositions/overview/"
|
|
173
|
+
/>
|
|
174
|
+
);
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
return (
|
|
178
|
+
<ComponentComposition
|
|
179
|
+
className={styles.compositionsIframe}
|
|
180
|
+
component={component}
|
|
181
|
+
composition={selected}
|
|
182
|
+
queryParams={queryParams}
|
|
183
|
+
/>
|
|
184
|
+
);
|
|
185
|
+
}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
import { ComponentType } from 'react';
|
|
3
|
+
import { Slot, SlotRegistry } from '@teambit/harmony';
|
|
4
|
+
import { ComponentAspect, ComponentUI } from '@teambit/component';
|
|
5
|
+
import { UIRuntime } from '@teambit/ui';
|
|
6
|
+
import { CompositionsSection } from './composition.section';
|
|
7
|
+
import { CompositionsAspect } from './compositions.aspect';
|
|
8
|
+
import { MenuBarWidget } from './compositions';
|
|
9
|
+
|
|
10
|
+
export type CompositionsMenuSlot = SlotRegistry<MenuBarWidget[]>;
|
|
11
|
+
export type EmptyStateSlot = SlotRegistry<ComponentType>;
|
|
12
|
+
|
|
13
|
+
export class CompositionsUI {
|
|
14
|
+
constructor(private menuBarWidgetSlot: CompositionsMenuSlot, private emptyStateSlot: EmptyStateSlot) {}
|
|
15
|
+
|
|
16
|
+
/**
|
|
17
|
+
* register a new tester empty state. this allows to register a different empty state from each environment for example.
|
|
18
|
+
*/
|
|
19
|
+
registerEmptyState(emptyStateComponent: ComponentType) {
|
|
20
|
+
this.emptyStateSlot.register(emptyStateComponent);
|
|
21
|
+
return this;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
registerMenuWidget(...widget: MenuBarWidget[]) {
|
|
25
|
+
this.menuBarWidgetSlot.register(widget);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
static dependencies = [ComponentAspect];
|
|
29
|
+
static runtime = UIRuntime;
|
|
30
|
+
static slots = [Slot.withType<ReactNode>(), Slot.withType<ComponentType>()];
|
|
31
|
+
|
|
32
|
+
static async provider(
|
|
33
|
+
[component]: [ComponentUI],
|
|
34
|
+
config: {},
|
|
35
|
+
[compositionMenuSlot, emptyStateSlot]: [CompositionsMenuSlot, EmptyStateSlot]
|
|
36
|
+
) {
|
|
37
|
+
const compositions = new CompositionsUI(compositionMenuSlot, emptyStateSlot);
|
|
38
|
+
const section = new CompositionsSection(
|
|
39
|
+
compositions,
|
|
40
|
+
{ menuBarWidgetSlot: compositions.menuBarWidgetSlot },
|
|
41
|
+
emptyStateSlot
|
|
42
|
+
);
|
|
43
|
+
|
|
44
|
+
component.registerRoute(section.route);
|
|
45
|
+
component.registerNavigation(section.navigationLink, section.order);
|
|
46
|
+
|
|
47
|
+
return compositions;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
export default CompositionsUI;
|
|
52
|
+
|
|
53
|
+
CompositionsAspect.addRuntime(CompositionsUI);
|
|
Binary file
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@teambit/compositions",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.571",
|
|
4
4
|
"homepage": "https://bit.dev/teambit/compositions/compositions",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"componentId": {
|
|
7
7
|
"scope": "teambit.compositions",
|
|
8
8
|
"name": "compositions",
|
|
9
|
-
"version": "0.0.
|
|
9
|
+
"version": "0.0.571"
|
|
10
10
|
},
|
|
11
11
|
"dependencies": {
|
|
12
12
|
"@teambit/harmony": "0.2.11",
|
|
@@ -23,32 +23,32 @@
|
|
|
23
23
|
"@teambit/documenter.ui.heading": "4.1.1",
|
|
24
24
|
"@teambit/documenter.ui.property-table": "4.1.3",
|
|
25
25
|
"@teambit/evangelist.elements.icon": "1.0.2",
|
|
26
|
-
"@teambit/component": "0.0.
|
|
27
|
-
"@teambit/compositions.model.composition-id": "0.0.
|
|
28
|
-
"@teambit/graphql": "0.0.
|
|
29
|
-
"@teambit/cli": "0.0.
|
|
30
|
-
"@teambit/dev-files": "0.0.
|
|
31
|
-
"@teambit/preview": "0.0.
|
|
32
|
-
"@teambit/schema": "0.0.
|
|
33
|
-
"@teambit/workspace": "0.0.
|
|
34
|
-
"@teambit/ui-foundation.ui.constants.z-indexes": "0.0.
|
|
35
|
-
"@teambit/envs": "0.0.
|
|
36
|
-
"@teambit/compositions.ui.compositions-menu-bar": "0.0.
|
|
37
|
-
"@teambit/compositions.ui.hooks.use-composition": "0.0.
|
|
26
|
+
"@teambit/component": "0.0.571",
|
|
27
|
+
"@teambit/compositions.model.composition-id": "0.0.472",
|
|
28
|
+
"@teambit/graphql": "0.0.571",
|
|
29
|
+
"@teambit/cli": "0.0.395",
|
|
30
|
+
"@teambit/dev-files": "0.0.571",
|
|
31
|
+
"@teambit/preview": "0.0.571",
|
|
32
|
+
"@teambit/schema": "0.0.571",
|
|
33
|
+
"@teambit/workspace": "0.0.571",
|
|
34
|
+
"@teambit/ui-foundation.ui.constants.z-indexes": "0.0.473",
|
|
35
|
+
"@teambit/envs": "0.0.571",
|
|
36
|
+
"@teambit/compositions.ui.compositions-menu-bar": "0.0.149",
|
|
37
|
+
"@teambit/compositions.ui.hooks.use-composition": "0.0.149",
|
|
38
38
|
"@teambit/design.ui.alert-card": "0.0.13",
|
|
39
39
|
"@teambit/design.ui.empty-box": "0.0.352",
|
|
40
40
|
"@teambit/design.ui.input.option-button": "0.0.26",
|
|
41
41
|
"@teambit/design.ui.separator": "0.0.351",
|
|
42
42
|
"@teambit/design.ui.surfaces.status-message-card": "0.0.6",
|
|
43
|
-
"@teambit/docs.ui.queries.get-docs": "0.0.
|
|
44
|
-
"@teambit/mdx.ui.mdx-layout": "0.0.
|
|
45
|
-
"@teambit/panels": "0.0.
|
|
46
|
-
"@teambit/preview.ui.component-preview": "0.0.
|
|
47
|
-
"@teambit/ui-foundation.ui.buttons.collapser": "0.0.
|
|
48
|
-
"@teambit/ui-foundation.ui.hooks.use-is-mobile": "0.0.
|
|
49
|
-
"@teambit/ui": "0.0.
|
|
50
|
-
"@teambit/compositions.model.composition-type": "0.0.
|
|
51
|
-
"@teambit/compositions.ui.composition-card": "0.0.
|
|
43
|
+
"@teambit/docs.ui.queries.get-docs": "0.0.472",
|
|
44
|
+
"@teambit/mdx.ui.mdx-layout": "0.0.479",
|
|
45
|
+
"@teambit/panels": "0.0.395",
|
|
46
|
+
"@teambit/preview.ui.component-preview": "0.0.472",
|
|
47
|
+
"@teambit/ui-foundation.ui.buttons.collapser": "0.0.178",
|
|
48
|
+
"@teambit/ui-foundation.ui.hooks.use-is-mobile": "0.0.165",
|
|
49
|
+
"@teambit/ui": "0.0.571",
|
|
50
|
+
"@teambit/compositions.model.composition-type": "0.0.473",
|
|
51
|
+
"@teambit/compositions.ui.composition-card": "0.0.478"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
54
|
"@types/react": "^17.0.8",
|
|
@@ -59,10 +59,10 @@
|
|
|
59
59
|
"@types/jest": "^26.0.0",
|
|
60
60
|
"@types/react-dom": "^17.0.5",
|
|
61
61
|
"@types/node": "12.20.4",
|
|
62
|
-
"@teambit/compositions.aspect-docs.compositions": "0.0.
|
|
62
|
+
"@teambit/compositions.aspect-docs.compositions": "0.0.117"
|
|
63
63
|
},
|
|
64
64
|
"peerDependencies": {
|
|
65
|
-
"@teambit/legacy": "1.0.
|
|
65
|
+
"@teambit/legacy": "1.0.181",
|
|
66
66
|
"react-dom": "^16.8.0 || ^17.0.0",
|
|
67
67
|
"react": "^16.8.0 || ^17.0.0"
|
|
68
68
|
},
|
|
@@ -90,27 +90,12 @@
|
|
|
90
90
|
"react": "-"
|
|
91
91
|
},
|
|
92
92
|
"peerDependencies": {
|
|
93
|
-
"@teambit/legacy": "1.0.
|
|
93
|
+
"@teambit/legacy": "1.0.181",
|
|
94
94
|
"react-dom": "^16.8.0 || ^17.0.0",
|
|
95
95
|
"react": "^16.8.0 || ^17.0.0"
|
|
96
96
|
}
|
|
97
97
|
}
|
|
98
98
|
},
|
|
99
|
-
"files": [
|
|
100
|
-
"dist",
|
|
101
|
-
"!dist/tsconfig.tsbuildinfo",
|
|
102
|
-
"**/*.md",
|
|
103
|
-
"**/*.mdx",
|
|
104
|
-
"**/*.js",
|
|
105
|
-
"**/*.json",
|
|
106
|
-
"**/*.sass",
|
|
107
|
-
"**/*.scss",
|
|
108
|
-
"**/*.less",
|
|
109
|
-
"**/*.css",
|
|
110
|
-
"**/*.css",
|
|
111
|
-
"**/*.jpeg",
|
|
112
|
-
"**/*.gif"
|
|
113
|
-
],
|
|
114
99
|
"private": false,
|
|
115
100
|
"engines": {
|
|
116
101
|
"node": ">=12.22.0"
|
package/types/asset.d.ts
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
declare module '*.png' {
|
|
2
|
+
const value: any;
|
|
3
|
+
export = value;
|
|
4
|
+
}
|
|
5
|
+
declare module '*.svg' {
|
|
6
|
+
import type { FunctionComponent, SVGProps } from 'react';
|
|
7
|
+
|
|
8
|
+
export const ReactComponent: FunctionComponent<SVGProps<SVGSVGElement> & { title?: string }>;
|
|
9
|
+
const src: string;
|
|
10
|
+
export default src;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
// @TODO Gilad
|
|
14
|
+
declare module '*.jpg' {
|
|
15
|
+
const value: any;
|
|
16
|
+
export = value;
|
|
17
|
+
}
|
|
18
|
+
declare module '*.jpeg' {
|
|
19
|
+
const value: any;
|
|
20
|
+
export = value;
|
|
21
|
+
}
|
|
22
|
+
declare module '*.gif' {
|
|
23
|
+
const value: any;
|
|
24
|
+
export = value;
|
|
25
|
+
}
|
|
26
|
+
declare module '*.bmp' {
|
|
27
|
+
const value: any;
|
|
28
|
+
export = value;
|
|
29
|
+
}
|
package/types/style.d.ts
ADDED
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
declare module '*.module.css' {
|
|
2
|
+
const classes: { readonly [key: string]: string };
|
|
3
|
+
export default classes;
|
|
4
|
+
}
|
|
5
|
+
declare module '*.module.scss' {
|
|
6
|
+
const classes: { readonly [key: string]: string };
|
|
7
|
+
export default classes;
|
|
8
|
+
}
|
|
9
|
+
declare module '*.module.sass' {
|
|
10
|
+
const classes: { readonly [key: string]: string };
|
|
11
|
+
export default classes;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
declare module '*.module.less' {
|
|
15
|
+
const classes: { readonly [key: string]: string };
|
|
16
|
+
export default classes;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
declare module '*.less' {
|
|
20
|
+
const classes: { readonly [key: string]: string };
|
|
21
|
+
export default classes;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
declare module '*.css' {
|
|
25
|
+
const classes: { readonly [key: string]: string };
|
|
26
|
+
export default classes;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
declare module '*.sass' {
|
|
30
|
+
const classes: { readonly [key: string]: string };
|
|
31
|
+
export default classes;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
declare module '*.scss' {
|
|
35
|
+
const classes: { readonly [key: string]: string };
|
|
36
|
+
export default classes;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
declare module '*.mdx' {
|
|
40
|
+
const component: any;
|
|
41
|
+
export default component;
|
|
42
|
+
}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import React, { useMemo } from 'react';
|
|
2
|
+
import { ComponentModel } from '@teambit/component';
|
|
3
|
+
import { ComponentPreview } from '@teambit/preview.ui.component-preview';
|
|
4
|
+
|
|
5
|
+
import { Composition } from '../composition';
|
|
6
|
+
|
|
7
|
+
export type ComponentCompositionProps = {
|
|
8
|
+
/**
|
|
9
|
+
* HTML class
|
|
10
|
+
*/
|
|
11
|
+
className?: string;
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* component to render.
|
|
15
|
+
*/
|
|
16
|
+
component: ComponentModel;
|
|
17
|
+
|
|
18
|
+
/**
|
|
19
|
+
* composition to use for component rendering.
|
|
20
|
+
*/
|
|
21
|
+
composition?: Composition;
|
|
22
|
+
|
|
23
|
+
/**
|
|
24
|
+
* Additional query params to append at the end of the *hash*. Changing this property will not reload the composition.
|
|
25
|
+
*/
|
|
26
|
+
queryParams?: string | string[];
|
|
27
|
+
|
|
28
|
+
/**
|
|
29
|
+
* skip hot reload
|
|
30
|
+
*/
|
|
31
|
+
hotReload?: boolean;
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
export function ComponentComposition({
|
|
35
|
+
component,
|
|
36
|
+
composition,
|
|
37
|
+
hotReload,
|
|
38
|
+
className,
|
|
39
|
+
queryParams = [],
|
|
40
|
+
}: ComponentCompositionProps) {
|
|
41
|
+
const compositionParams = useMemo(() => (composition ? [composition.identifier] : []).concat(queryParams), [
|
|
42
|
+
composition?.identifier,
|
|
43
|
+
queryParams,
|
|
44
|
+
]);
|
|
45
|
+
|
|
46
|
+
return (
|
|
47
|
+
<ComponentPreview
|
|
48
|
+
className={className}
|
|
49
|
+
component={component}
|
|
50
|
+
style={{ width: '100%', height: '100%' }}
|
|
51
|
+
previewName="compositions"
|
|
52
|
+
queryParams={compositionParams}
|
|
53
|
+
hotReload={hotReload}
|
|
54
|
+
/>
|
|
55
|
+
);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
ComponentComposition.defaultProps = {
|
|
59
|
+
skipHotReload: true,
|
|
60
|
+
};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { CompositionCard } from '@teambit/compositions.ui.composition-card';
|
|
3
|
+
import { CompositionsModule } from '@teambit/compositions.model.composition-type';
|
|
4
|
+
|
|
5
|
+
import styles from './compositions-overview.module.scss';
|
|
6
|
+
|
|
7
|
+
export type CompositionsOverviewProps = {
|
|
8
|
+
compositions?: CompositionsModule;
|
|
9
|
+
compositionCardClass?: string;
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
export function CompositionsOverview({ compositions, compositionCardClass }: CompositionsOverviewProps) {
|
|
13
|
+
return (
|
|
14
|
+
<div className={styles.background}>
|
|
15
|
+
{compositions &&
|
|
16
|
+
Object.entries(compositions).map(([key, composition]) => (
|
|
17
|
+
<CompositionCard key={key} Composition={composition} name={key} className={compositionCardClass} />
|
|
18
|
+
))}
|
|
19
|
+
</div>
|
|
20
|
+
);
|
|
21
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './compositions-overview';
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { Icon } from '@teambit/evangelist.elements.icon';
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
import React, { useCallback } from 'react';
|
|
4
|
+
|
|
5
|
+
import { Composition } from '../../composition';
|
|
6
|
+
import styles from './compositions-panel.module.scss';
|
|
7
|
+
|
|
8
|
+
export type CompositionsPanelProps = {
|
|
9
|
+
compositions: Composition[];
|
|
10
|
+
onSelectComposition: (composition: Composition) => void;
|
|
11
|
+
active?: Composition;
|
|
12
|
+
url: string;
|
|
13
|
+
} & React.HTMLAttributes<HTMLUListElement>;
|
|
14
|
+
|
|
15
|
+
export function CompositionsPanel({
|
|
16
|
+
url,
|
|
17
|
+
compositions,
|
|
18
|
+
onSelectComposition: onSelect,
|
|
19
|
+
active,
|
|
20
|
+
className,
|
|
21
|
+
...rest
|
|
22
|
+
}: CompositionsPanelProps) {
|
|
23
|
+
const handleSelect = useCallback(
|
|
24
|
+
(selected: Composition) => {
|
|
25
|
+
onSelect && onSelect(selected);
|
|
26
|
+
},
|
|
27
|
+
[onSelect]
|
|
28
|
+
);
|
|
29
|
+
|
|
30
|
+
return (
|
|
31
|
+
<ul {...rest} className={classNames(className)}>
|
|
32
|
+
{compositions.map((composition) => {
|
|
33
|
+
// TODO - move to composition panel node
|
|
34
|
+
return (
|
|
35
|
+
<li
|
|
36
|
+
key={composition.identifier}
|
|
37
|
+
className={classNames(styles.linkWrapper, composition === active && styles.active)}
|
|
38
|
+
>
|
|
39
|
+
<a className={styles.panelLink} onClick={() => handleSelect(composition)}>
|
|
40
|
+
<span className={styles.box}></span>
|
|
41
|
+
<span className={styles.name}>{composition.displayName}</span>
|
|
42
|
+
</a>
|
|
43
|
+
<div className={styles.right}>
|
|
44
|
+
<a
|
|
45
|
+
className={styles.panelLink}
|
|
46
|
+
target="_blank"
|
|
47
|
+
rel="noopener noreferrer"
|
|
48
|
+
href={`${url}&${composition.identifier}`}
|
|
49
|
+
>
|
|
50
|
+
<Icon className={styles.icon} of="open-tab" />
|
|
51
|
+
</a>
|
|
52
|
+
</div>
|
|
53
|
+
</li>
|
|
54
|
+
);
|
|
55
|
+
})}
|
|
56
|
+
</ul>
|
|
57
|
+
);
|
|
58
|
+
}
|
|
File without changes
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import classNames from 'classnames';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
|
|
4
|
+
import styles from './compositions-panel-node.module.scss';
|
|
5
|
+
|
|
6
|
+
export type CompositionsPanelNodeProps = {
|
|
7
|
+
name: string;
|
|
8
|
+
onClick: (event: React.MouseEvent<HTMLAnchorElement>) => void;
|
|
9
|
+
isActive: boolean;
|
|
10
|
+
} & React.HTMLAttributes<HTMLLIElement>;
|
|
11
|
+
|
|
12
|
+
export function CompositionsPanelNode({ name, onClick, isActive, ...rest }: CompositionsPanelNodeProps) {
|
|
13
|
+
return (
|
|
14
|
+
<li {...rest}>
|
|
15
|
+
<div className={classNames(styles.linkWrapper, { [styles.active]: isActive })}>
|
|
16
|
+
<a className={styles.panelLink} onClick={onClick}>
|
|
17
|
+
{name}
|
|
18
|
+
</a>
|
|
19
|
+
</div>
|
|
20
|
+
</li>
|
|
21
|
+
);
|
|
22
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './compositions-panel-node';
|
package/ui/index.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { ComponentComposition } from './composition-preview';
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
// import gql from 'graphql-tag';
|
|
2
|
+
// import { ComponentModel } from '../../component';
|
|
3
|
+
// import { Composition } from '../composition';
|
|
4
|
+
// import { useDataQuery } from '../../ui';
|
|
5
|
+
|
|
6
|
+
// const GET_COMPOSITIONS = gql`
|
|
7
|
+
// compositions: {
|
|
8
|
+
|
|
9
|
+
// }
|
|
10
|
+
// `;
|
|
11
|
+
|
|
12
|
+
// export function useCompositions(component: ComponentModel): Composition[] | [] {
|
|
13
|
+
// useDataQuery();
|
|
14
|
+
// }
|