Skip to content

Commit e01e598

Browse files
Lukas742Lukas742
committed
fix context
1 parent 945fc37 commit e01e598

File tree

7 files changed

+37
-62
lines changed

7 files changed

+37
-62
lines changed

‎.storybook/components/ControlsWithNote.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export function ControlsWithNote(props: ComponentProps<typeof Controls> & Contro
2626
</MessageStrip>
2727
)}
2828
<Controls {...rest} />
29-
<DomRefTable />
29+
<DomRefTable of={props.of} />
3030
</div>
3131
);
3232
}

‎.storybook/components/DocsHeader.tsx‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { Description, Subtitle, Title } from '@storybook/addon-docs/blocks';
1+
import type { Controls } from '@storybook/addon-docs/blocks';
2+
import { Description, Subtitle, Title, useOf } from '@storybook/addon-docs/blocks';
23
import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
34
import MessageStripDesign from '@ui5/webcomponents/dist/types/MessageStripDesign.js';
45
import copyIcon from '@ui5/webcomponents-icons/dist/copy.js';
@@ -13,6 +14,7 @@ import {
1314
ThemeProvider,
1415
} from '@ui5/webcomponents-react';
1516
import { clsx } from 'clsx';
17+
import type { ComponentProps } from 'react';
1618
import { useGetSubComponentsOfModule } from '../utils';
1719
import classes from './DocsHeader.module.css';
1820
import { GitHubLogo } from './GitHub-Mark';
@@ -52,16 +54,17 @@ interface InfoTableProps {
5254
mergeSubComponents?: boolean;
5355
isChart?: boolean;
5456
experimental?: boolean;
57+
of: ComponentProps<typeof Controls>['of'];
5558
}
5659

57-
export const InfoTable = ({ since, subComponents, mergeSubComponents }: InfoTableProps) => {
58-
//todo: context is not available anymore like this
59-
// const context = useContext(DocsContext);
60-
return null;
61-
const groups = context.componentStories().at(0).kind.split('/');
62-
const moduleName = groups[groups.length - 1].replace('(experimental)', '').trim();
60+
export const InfoTable = ({ of, since, subComponents, mergeSubComponents }: InfoTableProps) => {
61+
const context = useOf<'meta'>(of);
62+
const { csfFile, preparedMeta } = context;
63+
console.log(context);
64+
const moduleName = csfFile.meta.component.displayName;
6365

64-
const wcSubComponents = useGetSubComponentsOfModule(moduleName.replace('V2', ''));
66+
const wcSubComponents = useGetSubComponentsOfModule(moduleName.replace('V2', ''), preparedMeta.tags);
67+
console.log(moduleName);
6568
const subComps = mergeSubComponents
6669
? [...(subComponents ?? []), ...(wcSubComponents ?? [])]
6770
: (subComponents ?? wcSubComponents);
@@ -85,7 +88,7 @@ export const InfoTable = ({ since, subComponents, mergeSubComponents }: InfoTabl
8588
<Label>Usage</Label>
8689
</th>
8790
<td data-import-cell={supportsClipboardApi}>
88-
<Import />
91+
<Import componentName={moduleName} componentId={preparedMeta.componentId} />
8992
{supportsClipboardApi && (
9093
<Button
9194
design={ButtonDesign.Transparent}
@@ -133,7 +136,7 @@ export const InfoTable = ({ since, subComponents, mergeSubComponents }: InfoTabl
133136
);
134137
};
135138

136-
export const DocsHeader = ({ since, subComponents, mergeSubComponents, isChart, experimental }: InfoTableProps) => {
139+
export const DocsHeader = ({ of, since, subComponents, mergeSubComponents, isChart, experimental }: InfoTableProps) => {
137140
return (
138141
<ThemeProvider>
139142
<FlexBox alignItems={FlexBoxAlignItems.Center} className={classes.titleRow}>
@@ -143,7 +146,7 @@ export const DocsHeader = ({ since, subComponents, mergeSubComponents, isChart,
143146
<Links />
144147
</FlexBox>
145148
<Subtitle />
146-
<InfoTable since={since} subComponents={subComponents} mergeSubComponents={mergeSubComponents} />
149+
<InfoTable of={of} since={since} subComponents={subComponents} mergeSubComponents={mergeSubComponents} />
147150
<TableOfContent />
148151
<Description />
149152
{isChart && (

‎.storybook/components/DomRefTable.tsx‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
import { Heading } from '@storybook/addon-docs/blocks';
1+
import type { Controls } from '@storybook/addon-docs/blocks';
2+
import { Heading, useOf } from '@storybook/addon-docs/blocks';
23
import TagDesign from '@ui5/webcomponents/dist/types/TagDesign.js';
34
import { Tag, Link, MessageStrip, Popover } from '@ui5/webcomponents-react';
45
import type * as CEM from '@ui5/webcomponents-tools/lib/cem/types';
5-
import type { ReactNode } from 'react';
6+
import type { ComponentProps, ReactNode } from 'react';
67
import { Fragment, useRef } from 'react';
78
import { createPortal } from 'react-dom';
8-
import { useGetCem } from '../utils';
9+
import { useGetCem } from '../utils.js';
910
import classes from './DomRefTable.module.css';
1011

1112
export function CodeBlock(props: { children: ReactNode }) {
@@ -47,19 +48,15 @@ function Name(props: CEM.ClassMember) {
4748
);
4849
}
4950

50-
export function DomRefTable() {
51-
return null;
52-
//todo: context is not available anymore like this
53-
// const docsContext = useContext(DocsContext);
54-
const docsContext = {};
55-
const storyTags: string[] = docsContext.attachedCSFFile?.meta?.tags;
51+
export function DomRefTable({ of }: { of: ComponentProps<typeof Controls>['of'] }) {
52+
const { story: storyContext } = useOf<'story'>(of);
53+
const storyTags: string[] = storyContext.tags;
5654
const cemModuleName = storyTags?.find((tag) => tag.startsWith('cem-module:'));
57-
const componentName = docsContext.componentStories().at(0)?.component?.displayName;
55+
const componentName = storyContext.component.displayName;
5856
const popoverRef = useRef(null);
5957

60-
const knownAttributes = new Set(Object.keys(docsContext.primaryStory?.argTypes ?? {}));
61-
const cem = useGetCem();
62-
58+
const knownAttributes = new Set(Object.keys(storyContext.argTypes));
59+
const cem = useGetCem(storyTags);
6360
const moduleName = cemModuleName ? cemModuleName.split(':')[1] : componentName;
6461

6562
const componentMembers =

‎.storybook/components/Import.tsx‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Fragment, useContext } from 'react';
1+
import { Fragment } from 'react';
22

33
interface ImportStatementPropTypes {
44
/**
@@ -119,17 +119,15 @@ interface ImportProps {
119119
* Names of module/component (e.g. "Button")
120120
*/
121121
moduleNames?: ImportStatementPropTypes['moduleNames'];
122+
componentId: string;
123+
componentName: string;
122124
}
123125

124126
export const Import = (props: ImportProps) => {
125-
//todo: context is not available anymore like this
126-
return null;
127-
const context = useContext(DocsContext);
128-
const isChart = context.componentStories().at(0).id.startsWith('charts-');
129-
const isCompat = context.componentStories().at(0).id.startsWith('legacy-');
130-
const groups = context.componentStories().at(0).kind.split('/');
131-
const module = groups[groups.length - 1].replace('(experimental)', '').trim();
132-
const moduleNames = props.moduleNames ?? [module];
127+
const { componentId, componentName } = props;
128+
const isChart = componentId.startsWith('charts-');
129+
const isCompat = componentId.startsWith('legacy-');
130+
const moduleNames = props.moduleNames ?? [componentName];
133131

134132
return (
135133
<ImportStatement

‎.storybook/utils.ts‎

Lines changed: 3 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
// import { DocsContext } from '@storybook/addon-docs/blocks';
21
import { useMemo } from 'react';
32
// @ts-expect-error: storybook can handle this
43
import cemAi from './custom-element-manifests/ai.json';
@@ -22,29 +21,7 @@ export const MAPPED_THEMES = [
2221

2322
export const excludePropsForAbstract = ['className', 'style'];
2423

25-
export function useGetCem() {
26-
return {};
27-
//todo: context is not available anymore like this
28-
// const docsContext = useContext(DocsContext);
29-
30-
// @ts-expect-error: private but existing
31-
const { attachedCSFFiles } = docsContext;
32-
33-
const storyTagsSet = new Set<string>();
34-
35-
if (attachedCSFFiles?.size) {
36-
Array.from(attachedCSFFiles).forEach((cur) => {
37-
// @ts-expect-error: private but existing
38-
const tags: string[] | undefined = cur?.meta?.tags;
39-
if (tags?.length) {
40-
tags.forEach((tag) => {
41-
storyTagsSet.add(tag);
42-
});
43-
}
44-
});
45-
}
46-
47-
const storyTags = storyTagsSet?.size ? Array.from(storyTagsSet) : [];
24+
export function useGetCem(storyTags: string[]) {
4825
const packageAnnotation = storyTags?.find((tag) => tag.startsWith('package:'));
4926
switch (packageAnnotation) {
5027
case 'package:@ui5/webcomponents':
@@ -97,8 +74,8 @@ function findSubComponentsRecursively(moduleName: string, cem: any): string[] {
9774
return Array.from(subComponentsSet);
9875
}
9976

100-
export function useGetSubComponentsOfModule(moduleName: string) {
101-
const cem = useGetCem(); // Assuming useGetCem() is defined elsewhere
77+
export function useGetSubComponentsOfModule(moduleName: string, tags: string[]) {
78+
const cem = useGetCem(tags);
10279
return useMemo(() => {
10380
return findSubComponentsRecursively(moduleName, cem);
10481
}, [cem, moduleName]);

‎packages/main/src/webComponents/DateRangePicker/DateRangePicker.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import * as ComponentStories from './DateRangePicker.stories';
44

55
<Meta of={ComponentStories} />
66

7-
<DocsHeader since="0.10.0" />
7+
<DocsHeader since="0.10.0" of={ComponentStories}/>
88

99
<br />
1010

‎packages/main/src/webComponents/List/List.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import * as ComponentStories from './List.stories';
99

1010
<Meta of={ComponentStories} />
1111

12-
<DocsHeader />
12+
<DocsHeader of={ComponentStories} />
1313

1414
<br />
1515

0 commit comments

Comments
 (0)