Skip to content

Commit

Permalink
Merge pull request #2352 from epam/feat/allow_any_context_in_preview
Browse files Browse the repository at this point in the history
Allow any context in "preview"
  • Loading branch information
siarheiyelin authored Jun 13, 2024
2 parents bbfdb1f + b2a7bb2 commit 281f271
Show file tree
Hide file tree
Showing 10 changed files with 18 additions and 149 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
DemoContext,
TDocsGenExportedType,
PropDocPropsUnknown,
PropDoc, isDocContextVisibleInPE,
PropDoc,
} from '@epam/uui-docs';
import { DemoCode } from './DemoCode';
import { DemoErrorBoundary } from './DemoErrorBoundary';
Expand Down Expand Up @@ -115,8 +115,7 @@ export function ComponentEditorView<TProps = PropDocPropsUnknown>(props: ICompon

const ContextSwitcher = React.memo((props: IHaveContexts & IHavePreviewRef) => {
const { contexts, selectedCtxName, onChangeSelectedCtx, previewRef } = props;
const availableCtxNames = contexts?.map((i) => i.name) || [];
const visibleCtxNames = availableCtxNames.filter(isDocContextVisibleInPE);
const visibleCtxNames = contexts?.map((i) => i.name) || [];
return (
<FlexRow
key="head"
Expand Down
6 changes: 1 addition & 5 deletions app/src/docs/_types/previewIds.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
/**
*
* Preview IDs are used for screenshot tests
*
* These files MUST be kept in sync:
* app/src/docs/_types/previewIds.ts --> uui-e2e-tests/framework/data/previewIds.ts
* This file is referenced by "uui-e2e-tests" module
*/

/**
Expand Down
2 changes: 1 addition & 1 deletion app/src/docs/pickerInput/PickerInput.doc.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export class PickerInputDoc extends BaseDocsBlock {

static override config: TDocConfig = {
name: 'PickerInput',
contexts: [TDocContext.Default, TDocContext.Resizable, TDocContext.Table, TDocContext.Form, TDocContext.OpenedPickerBody],
contexts: [TDocContext.Default, TDocContext.Resizable, TDocContext.Table, TDocContext.Form],
bySkin: {
[TSkin.UUI]: { type: '@epam/uui:PickerInputProps', component: uui.PickerInput },
[TSkin.Electric]: { type: '@epam/uui:PickerInputProps', component: electric.PickerInput },
Expand Down
8 changes: 1 addition & 7 deletions app/src/preview/previewContent/renderCase/renderCase.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -73,13 +73,7 @@ export class RenderCase extends React.PureComponent<ISingleRenderCaseView, ISing
return null;
}

let SelectedDemoContext;
if (context === TDocContext.Default) {
// Assumption: all components support Default context, so we never report error when Default context is selected.
SelectedDemoContext = uuiDocContextsMap[TDocContext.Default];
} else {
SelectedDemoContext = docs.contexts.find(({ name }) => name === context).context;
}
const SelectedDemoContext = uuiDocContextsMap[context];
const inputValues = this.getInputValues();
const { propsForTooltip, propsForDataAttr } = formatPropsForNativeTooltip(inputValues);
const DemoComponent = docs.component;
Expand Down
8 changes: 1 addition & 7 deletions uui-docs/src/DocBuilder.ts
Original file line number Diff line number Diff line change
Expand Up @@ -142,13 +142,7 @@ export class DocBuilder<TProps> implements IComponentDocs<TProps> {
}

static convertPreviewPropsItemToRenderCases = (ppi: TComponentPreview<unknown>, docs: DocBuilder<PropDocPropsUnknown>): TPreviewPropsItemRenderCases => {
let ctxToSet = ppi.context || TDocContext.Default;
// Assumption: all components support Default context, so we never report error when Default context is selected.
const ctxToSetSupported = ctxToSet === TDocContext.Default || !!docs.contexts.find((ctx) => ctx.name === ctxToSet);
if (!ctxToSetSupported) {
ctxToSet = undefined;
console.error(`The context="${ctxToSet}" is not supported by the component`);
}
const ctxToSet = ppi.context || TDocContext.Default;
const matrixConfig = TestMatrixUtils.normalizePreviewPropsMatrix<unknown>({ matrix: ppi.matrix, docs: docs as unknown as IComponentDocs<unknown> });
const result: TPreviewPropsItemRenderCases = {
id: ppi.id,
Expand Down
5 changes: 0 additions & 5 deletions uui-docs/src/peContexts/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,3 @@ export const uuiDocContextsMap: Record<TDocContext, React.ComponentType<DemoComp
[TDocContext.VerticalTabButton]: VerticalTabButtonContext,
[TDocContext.OpenedPickerBody]: OpenedPickerBodyContext,
};

export const isDocContextVisibleInPE = (ctxName: string) => {
const previewSpecificCtx = [TDocContext.OpenedPickerBody];
return !previewSpecificCtx.includes(ctxName as TDocContext);
};
2 changes: 1 addition & 1 deletion uui-e2e-tests/e2e.Dockerfile
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# The version of the base image must be in sync with the version of "@playwright/test" NPM package
FROM mcr.microsoft.com/playwright:v1.44.1-jammy

WORKDIR /app
WORKDIR /e2e

COPY package.json ./
RUN yarn
Expand Down
118 changes: 1 addition & 117 deletions uui-e2e-tests/framework/data/previewIds.ts
Original file line number Diff line number Diff line change
@@ -1,117 +1 @@
/**
*
* Preview IDs are used for screenshot tests
*
* These files MUST be kept in sync:
* app/src/docs/_types/previewIds.ts --> uui-e2e-tests/framework/data/previewIds.ts
*/

/**
* Common reusable names. Use it for consistency (if possible).
*/
const UTILS = {
SizeVariants: { 'Size Variants': 'Size Variants' as const },
ColorVariants: { 'Color Variants': 'Color Variants' as const },
AllVariants: { 'All Variants': 'All Variants' as const },
PseudoStateHover: { 'Pseudo State Hover': 'Pseudo State Hover' as const },
PseudoStateActive: { 'Pseudo State Active': 'Pseudo State Active' as const },
};

export enum TPickerInputPreview {
// FORM
'Form SingleSelect'= 'Form SingleSelect',
'Form SingleSelect States'= 'Form SingleSelect States',
'Form MultiSelect'= 'Form MultiSelect',
'Form MultiSelect States'= 'Form MultiSelect States',
'Form MultiSelect Multiline'= 'Form MultiSelect Multiline',
'Form MultiSelect Multiline States'= 'Form MultiSelect Multiline States',
// FORM OPENED
'Form Opened SingleSelect' = 'Form Opened SingleSelect',
'Form Opened MultiSelect' = 'Form Opened MultiSelect',
'Form Opened SingleSelect Tree' = 'Form Opened SingleSelect Tree',
'Form Opened MultiSelect Tree' = 'Form Opened MultiSelect Tree',
// INLINE
'Inline SingleSelect'= 'Inline SingleSelect',
'Inline SingleSelect States'= 'Inline SingleSelect States',
'Inline MultiSelect'= 'Inline MultiSelect',
'Inline MultiSelect States'= 'Inline MultiSelect States',
'Inline MultiSelect Multiline'= 'Inline MultiSelect Multiline',
'Inline MultiSelect Multiline States'= 'Inline MultiSelect Multiline States',
// CELL
'Cell SingleSelect'= 'Cell SingleSelect',
'Cell SingleSelect States'= 'Cell SingleSelect States',
'Cell MultiSelect'= 'Cell MultiSelect',
'Cell MultiSelect States'= 'Cell MultiSelect States',
'Cell MultiSelect Multiline'= 'Cell MultiSelect Multiline',
'Cell MultiSelect Multiline States'= 'Cell MultiSelect Multiline States'
}

export const TBadgePreview = { ...UTILS.SizeVariants, ...UTILS.ColorVariants };
export const TCheckboxPreview = { ...UTILS.SizeVariants, ...UTILS.ColorVariants };
export const TCountIndicatorPreview = { ...UTILS.SizeVariants, ...UTILS.ColorVariants };
export const TIconButtonPreview = { ...UTILS.SizeVariants, ...UTILS.ColorVariants };
export const TLinkButtonPreview = { ...UTILS.SizeVariants, ...UTILS.ColorVariants };
export const TMainMenuPreview = { ...UTILS.AllVariants };
export const TMultiSwitchPreview = { ...UTILS.SizeVariants, ...UTILS.ColorVariants };
export const TNotificationCardPreview = { ...UTILS.SizeVariants, ...UTILS.ColorVariants };
export const TNumericInputPreview = { ...UTILS.SizeVariants, ...UTILS.ColorVariants };
export const TPaginatorPreview = { ...UTILS.SizeVariants, ...UTILS.ColorVariants };
export const TRadioGroupPreview = { ...UTILS.SizeVariants, ...UTILS.ColorVariants };
export const TRadioInputPreview = { ...UTILS.SizeVariants, ...UTILS.ColorVariants };
export const TSwitchPreview = { ...UTILS.SizeVariants, ...UTILS.ColorVariants };
export const TTagPreview = { ...UTILS.SizeVariants, ...UTILS.ColorVariants };
export const TTextAreaPreview = { ...UTILS.SizeVariants, ...UTILS.ColorVariants };
export const TTextPreview = { ...UTILS.SizeVariants, ...UTILS.ColorVariants };
export const TTooltipPreview = { ...UTILS.ColorVariants };
export const TAlertPreview = {
...UTILS.ColorVariants,
'Layout with icon': 'Layout with icon' as const,
'Layout without icon': 'Layout without icon' as const,
};
export const TButtonPreview = {
'One-line caption': 'One-line caption' as const,
'Two-line caption': 'Two-line caption' as const,
'No caption': 'No caption' as const,
...UTILS.ColorVariants,
...UTILS.PseudoStateHover,
...UTILS.PseudoStateActive,
};
export const TTabButtonPreview = {
...UTILS.SizeVariants,
...UTILS.ColorVariants,
'Dropdown Size Variants': 'Dropdown Size Variants' as const,
'Dropdown Color Variants': 'Dropdown Color Variants' as const,
};
export const TVerticalTabButtonPreview = { ...TTabButtonPreview };
export const TLabeledInputPreview = {
'Color Variants Label Top': 'Color Variants Label Top' as const,
'Color Variants Label Left': 'Color Variants Label Left' as const,
...UTILS.SizeVariants,
};
export const TRangeDatePickerPreview = {
...UTILS.SizeVariants,
...UTILS.ColorVariants,
Opened: 'Opened' as const,
'Opened With Presets': 'Opened With Presets' as const,
};
export const TTextInputPreview = {
'Form Size Variants': 'Form Size Variants' as const,
'Inline Size Variants': 'Inline Size Variants' as const,
...UTILS.ColorVariants,
};
export const TDatePickerPreview = {
...UTILS.SizeVariants,
...UTILS.ColorVariants,
'Form Opened': 'Form Opened' as const,
};
export const TDropdownContainerPreview = {
...UTILS.SizeVariants,
};
export const TAvatarStackPreview = {
'Smaller size': 'Smaller size',
'Bigger size': 'Bigger size',
};
export const TAccordionPreview = {
'All Variants Expanded': 'All Variants Expanded',
'All Variants Collapsed': 'All Variants Collapsed',
};
export * from '../../../app/src/docs/_types/previewIds';
4 changes: 2 additions & 2 deletions uui-e2e-tests/scripts/cmd/cmdRunPwDocker.ts
Original file line number Diff line number Diff line change
Expand Up @@ -91,8 +91,8 @@ function getVolumesMapArgs() {
'./.env',
'./tsconfig.json',
].reduce<string[]>((acc, from) => {
const to = `/app/${from.replace('./', '')}`;
const to = `/e2e/${from.replace('./', '')}`;
acc.push('-v', `${from}:${to}`);
return acc;
}, []);
}, []).concat(['-v', '../app/src/docs/_types/previewIds.ts:/app/src/docs/_types/previewIds.ts']);
}
9 changes: 8 additions & 1 deletion uui-e2e-tests/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,20 @@
"strict": true,
"preserveConstEnums": true,
"noEmit": true,
"rootDir": ".",
"rootDir": "../.",
"baseUrl": ".",
"isolatedModules": true,
"allowSyntheticDefaultImports": true
},
"exclude": [
"node_modules",
".reports"
],
"include": [
"framework",
"scripts",
"tests",
"playwright.config.ts",
"../app/src/docs/_types/previewIds.ts"
]
}

0 comments on commit 281f271

Please sign in to comment.