[Feature] 4px grid for uui

.github/workflows/qa.yml

@@ -3,7 +3,7 @@ name: qa
 # Controls when the action will run.
 on:
     push:
-        branches: [ themes/eduverse-theme ]
+        branches: [ feature/4px-grid-for-uui ]
     # Allows you to run this workflow manually from the Actions tab
     workflow_dispatch:
 

app/src/common/AppHeader.tsx

@@ -82,16 +82,22 @@ export function AppHeader() {
             <Dropdown
                 renderBody={ (props) => (
                     <DropdownMenuBody { ...props } rawProps={ { style: { width: '180px', padding: '6px 0', marginTop: '3px' } } }>
-                        { Object.values(themesById).map(({ id, name }) => (
-                            <DropdownMenuButton
-                                key={ id }
-                                caption={ name }
-                                icon={ theme === id && DoneIcon }
-                                isActive={ theme === id }
-                                iconPosition="right"
-                                onClick={ () => toggleTheme(id) }
-                            />
-                        )) }
+                        { Object.values(themesById).map(({ id, name, devOnly }) => {
+                            if (window.location.host.includes('uui.epam.com') && devOnly) {
+                                return null;
+                            }
+
+                            return (
+                                <DropdownMenuButton
+                                    key={ id }
+                                    caption={ name }
+                                    icon={ theme === id && DoneIcon }
+                                    isActive={ theme === id }
+                                    iconPosition="right"
+                                    onClick={ () => toggleTheme(id) }
+                                />
+                            );
+                        }) }
                     </DropdownMenuBody>
                 ) }
                 renderTarget={ (props) => (

app/src/common/appFooterDemo/AppFooterDemo.module.scss

@@ -10,5 +10,9 @@
         overflow-x: auto;
         width: 100%;
         margin: 0 auto;
+
+        &:global(.uui-flex-row) {
+            --uui-size: 36px;
+        }
     }
 }

app/src/common/appFooterDemo/AppFooterDemo.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import css from './AppFooterDemo.module.scss';
-import { FlexRow } from '@epam/promo';
+import { FlexRow } from '@epam/uui';
 import { DemoItem } from '../../demo/structure';
 import { DemoToolbar } from './demoToolbar/DemoToolbar';
 

app/src/common/appFooterDemo/demoToolbar/DemoToolbar.module.scss

@@ -3,11 +3,23 @@
 .container {
     display: flex;
 
+    &:global(.uui-flex-row)[class*='uui-size-'] {
+        --uui-size: 36px;
+    }
+
+    &[class*='uui-size-'] {
+        --uui-size: 36px;
+    }
+
     .item {
         padding-left: 18px;
         padding-right: 18px;
         color: var(--uui-neutral-0) !important;
 
+        &:global(.uui-button-box) {
+            --uui-size: 36px;
+        }
+
         &:hover {
             background-color: var(--uui-neutral-90);
         }
@@ -28,7 +40,7 @@
             content: '';
             position: absolute;
             height: 100%;
-            border-right: thin solid var(--icon-color);
+            border-right: thin solid var(--uui-icon);
         }
     }
 }

app/src/common/appFooterDemo/demoToolbar/DemoToolbar.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {
     LinkButton, FlexRow, FlexCell,
-} from '@epam/promo';
+} from '@epam/uui';
 import { DemoItem } from '../../../demo/structure';
 import { ReactComponent as BackIcon } from '@epam/assets/icons/common/navigation-back-18.svg';
 import { ReactComponent as ExternalLinkIcon } from '@epam/assets/icons/common/action-external_link-18.svg';

app/src/common/docs/DocExample.tsx

@@ -1,17 +1,26 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import cx from 'classnames';
+import { TDocConfig } from '@epam/uui-docs';
+import { LinkButton, FlexSpacer } from '@epam/uui';
 import { Switch, FlexRow } from '@epam/promo';
 import { EditableDocContent } from './EditableDocContent';
 import { svc } from '../../services';
-import type { FilesRecord } from '../../data/codesandbox/getCodesandboxConfig';
-import css from './DocExample.module.scss';
 import { CodesandboxLink } from './CodesandboxLink';
 import { Code } from './Code';
-import cx from 'classnames';
 import { docExampleLoader } from './docExampleLoader';
 import { ThemeId } from '../../data';
-import { LinkButton, FlexSpacer } from '@epam/uui';
+import { generateNewRawString, getSkin, useCode, useExampleProps, usePropEditorTypeOverride } from './utils';
+
 import { ReactComponent as PreviewIcon } from '@epam/assets/icons/common/media-fullscreen-12.svg';
-import { getCurrentTheme } from '../../helpers';
+
+import css from './DocExample.module.scss';
+import { useAppThemeContext } from '../../helpers/appTheme';
+
+const EXAMPLES_PATH_PREFIX = './_examples';
+
+const LABELS = {
+    Fullscreen: 'Fullscreen',
+};
 
 interface DocExampleProps {
     path: string;
@@ -20,111 +29,95 @@ interface DocExampleProps {
     width?: number | 'auto';
     cx?: string;
     disableCodesandbox?: boolean;
+    config?: TDocConfig;
 }
 
-interface DocExampleState {
-    showCode: boolean;
-    component?: any;
-    code?: string;
-    raw?: string;
-    stylesheets?: FilesRecord;
-}
+const DocExampleFsBtn: React.FC<{ path: string; theme: ThemeId }> = ({ path, theme }) => {
+    const regex = /^\.\/_examples\/(.*)\/(\w+)\.example\.tsx$/;
+    const examplePath = path.replace(regex, '$1/$2');
+    const href = `/docExample?theme=${encodeURIComponent(theme)}&examplePath=${encodeURIComponent(examplePath)}`;
+    return (
+        <LinkButton
+            target="_blank"
+            icon={ PreviewIcon }
+            iconPosition="right"
+            href={ href }
+            caption={ LABELS.Fullscreen }
+        />
+    );
+};
 
-const EXAMPLES_PATH_PREFIX = './_examples';
+export function DocExample(props: DocExampleProps) {
+    const [showCode, setShowCode] = useState(false);
+    const [component, setComponent] = useState<{ elementType: any }>();
+    const [raw, setRaw] = useState<string>();
+    const { theme } = useAppThemeContext();
+    const skin = getSkin(theme, true);
+    const type = props?.config?.bySkin[skin]?.type;
+    const propsOverride = usePropEditorTypeOverride(theme, type);
+    const exampleProps = useExampleProps(props.config, type, theme, propsOverride);
+    const code = useCode(props.path, raw, exampleProps, props.config);
 
-export class DocExample extends React.Component<DocExampleProps, DocExampleState> {
-    componentDidMount(): void {
-        const { path, onlyCode } = this.props;
+    useEffect(() => {
+        const { path, onlyCode } = props;
 
         if (!onlyCode) {
             const exPathRelative = `.${path.substring(EXAMPLES_PATH_PREFIX.length)}`;
-            docExampleLoader({ path: exPathRelative }).then((component) => {
-                this.setState({ component });
+            docExampleLoader({ path: exPathRelative }).then((elementType) => {
+                setComponent({ elementType });
             });
         }
+    }, []);
 
-        svc.api
-            .getCode({ path })
-            .then((r) => this.setState({ code: r.highlighted, raw: r.raw }));
-    }
+    useEffect(() => {
+        const { path } = props;
 
-    state: DocExampleState = {
-        showCode: false,
-        stylesheets: {},
-    };
-
-    private getDescriptionFileName(): string {
-        // Files are stored here: "public/docs/content"
-        const name = this.props.path
-            .replace(new RegExp(/\.example.tsx|\./g), '')
-            .replace(/\//g, '-')
-            .replace(/^-/, '');
+        svc.api.getCode({ path }).then((r) => {
+            setRaw(r.raw);
+        });
+    }, []);
 
-        // next line removes leading underscore
-        // i.e. "_examples-alert-Basic.json" -> "examples-alert-Basic.json"
+    const getDescriptionFileName = (): string => {
+        const name = props.path.replace(new RegExp(/\.example.tsx|\./g), '').replace(/\//g, '-').replace(/^-/, '');
         return name.substring(1);
-    }
+    };
 
-    private onSwitchValueChange = (val: boolean) => {
-        this.setState({ showCode: val });
+    const renderCode = (): React.ReactNode => {
+        return code && <Code codeAsHtml={ code } />;
     };
 
-    private renderCode(): React.ReactNode {
-        return (
-            <Code codeAsHtml={ this.state.code } />
-        );
-    }
+    const renderPreview = () => {
+        const dirPath = props.path.split('/').slice(0, -1);
+        const codesandboxRaw = (props.config && raw && exampleProps) ? generateNewRawString(raw, exampleProps) : raw;
+
+        if (props.config && (!exampleProps || !codesandboxRaw)) {
+            return null;
+        }
 
-    private renderPreview() {
-        const { raw } = this.state;
-        const { path } = this.props;
-        const dirPath = path.split('/').slice(0, -1);
-        const theme = getCurrentTheme();
         return (
             <>
                 <FlexRow size={ null } vPadding="48" padding="24" borderBottom alignItems="top" columnGap="12">
-                    {this.state.component && React.createElement(this.state.component)}
+                    {component && React.createElement(component.elementType, { propDocs: exampleProps })}
                 </FlexRow>
                 <div className={ css.containerFooterWrapper }>
                     <FlexRow padding="12" vPadding="12" cx={ [css.containerFooter] } columnGap="12">
-                        <Switch value={ this.state.showCode } onValueChange={ this.onSwitchValueChange } label="View code" />
+                        <Switch value={ showCode } onValueChange={ setShowCode } label="View code" />
                         <FlexSpacer />
-                        { !this.props.disableCodesandbox && <CodesandboxLink raw={ raw } dirPath={ dirPath } /> }
-                        <DocExampleFsBtn path={ path } theme={ theme } />
+                        {!props.disableCodesandbox && <CodesandboxLink raw={ codesandboxRaw } dirPath={ dirPath } />}
+                        <DocExampleFsBtn path={ props.path } theme={ theme } />
                     </FlexRow>
                 </div>
-                {this.state.showCode && this.renderCode()}
+                {showCode && renderCode()}
             </>
         );
-    }
-
-    render() {
-        return (
-            <div className={ cx(css.container, this.props.cx) }>
-                <EditableDocContent title={ this.props.title } fileName={ this.getDescriptionFileName() } />
-                <div className={ css.previewContainer } style={ { width: this.props.width } }>
-                    {this.props.onlyCode ? this.renderCode() : this.renderPreview()}
-                </div>
-            </div>
-        );
-    }
-}
+    };
 
-const LABELS = {
-    Fullscreen: 'Fullscreen',
-};
-function DocExampleFsBtn(props: { path: string; theme: ThemeId }) {
-    const regex = /^\.\/_examples\/(.*)\/(\w+)\.example\.tsx$/;
-    const examplePath = props.path.replace(regex, '$1/$2');
-    const href = `/docExample?theme=${encodeURIComponent(props.theme)}&examplePath=${encodeURIComponent(examplePath)}`;
     return (
-        <LinkButton
-            target="_blank"
-            icon={ PreviewIcon }
-            iconPosition="right"
-            href={ href }
-            caption={ LABELS.Fullscreen }
-            size="36"
-        />
+        <div className={ cx(css.container, props.cx) }>
+            <EditableDocContent title={ props.title } fileName={ getDescriptionFileName() } />
+            <div className={ css.previewContainer } style={ { width: props.width } }>
+                {props.onlyCode ? renderCode() : renderPreview()}
+            </div>
+        </div>
     );
 }

app/src/common/docs/DocsSidebar.tsx

@@ -1,12 +1,13 @@
-import { DocItem } from '../../documents/structure';
-import { Sidebar } from '../sidebar';
 import React from 'react';
 import { DataRowProps } from '@epam/uui-core';
 import { TreeListItem } from '@epam/uui-components';
+import { DocItem } from '../../documents/structure';
+import { Sidebar } from '../sidebar';
 import { useQuery } from '../../helpers';
 import { TMode } from './docsConstants';
 import { ThemeId } from '../../data';
 import { svc } from '../../services';
+import { useAppThemeContext } from '../../helpers/appTheme';
 
 type DocsQuery = {
     id: string,
@@ -27,7 +28,7 @@ export function DocsSidebar() {
     const mode = useQuery<DocsQuery['mode']>('mode') || TMode.doc;
     const queryParamId: string = useQuery('id');
     const isSkin = useQuery<DocsQuery['isSkin']>('isSkin');
-    const theme = useQuery<DocsQuery['theme']>('theme');
+    const { theme } = useAppThemeContext();
 
     const onChange = (row: DataRowProps<TreeListItem, string>) => {
         if (row.parentId === 'components') {
@@ -57,6 +58,7 @@ export function DocsSidebar() {
                         mode: (row.parentId && mode),
                         isSkin: (row.parentId && isSkin),
                         category: row.parentId,
+                        theme,
                     },
                 } }
         />

app/src/common/docs/baseDocBlock/BaseDocsBlock.tsx

@@ -79,7 +79,7 @@ export abstract class BaseDocsBlock extends React.Component<any, State> {
         );
     }
 
-    private getConfig = () => {
+    getConfig = () => {
         return (this.constructor as unknown as { config: TDocConfig })?.config;
     };
 

app/src/common/docs/index.ts

@@ -3,3 +3,4 @@ export * from './properyEditor/PropertyEditor';
 export * from './ContentSection';
 export * from './DocExample';
 export * from './EditableDocContent';
+export * from './utils';

app/src/common/docs/properyEditor/PropertyEditor.tsx

@@ -8,7 +8,7 @@ import {
     PropDocUnknown, TDocContext, DocBuilder,
 } from '@epam/uui-docs';
 import { PropertyEditorView } from './view/PropertyEditorView';
-import { getSkin, useDocBuilderGenCtx, usePropEditorTypeOverride } from './utils';
+import { getSkin, useDocBuilderGenCtx, usePropEditorTypeOverride } from '../utils';
 import { PropSamplesCreationContext } from './view/PropSamplesCreationContext';
 import {
     buildExamplesAndFindById,