@sap-ux/control-property-editor 0.2.0

package/esbuild.js

@@ -0,0 +1,25 @@
+const { esbuildOptionsBrowser, build } = require('../../esbuildConfig');
+const NodeModulesPolyfills = require('@esbuild-plugins/node-modules-polyfill');
+const alias = require('esbuild-plugin-alias');
+
+// Set esbuild options for this build
+esbuildOptionsBrowser.plugins = esbuildOptionsBrowser.plugins.concat(
+    alias({
+        'react': require.resolve('react'),
+        'react-dom': require.resolve('react-dom')
+    })
+);
+const esbuildOptions = { ...esbuildOptionsBrowser };
+
+esbuildOptions.external = esbuildOptions.external.concat([]);
+esbuildOptions.entryPoints = {
+    app: './src/index.tsx'
+};
+esbuildOptions.format = 'esm';
+esbuildOptions.plugins = esbuildOptions.plugins.concat([NodeModulesPolyfills.NodeModulesPolyfillPlugin()]);
+
+module.exports = {
+    esbuildOptions
+};
+
+build(esbuildOptions, process.argv.slice(2));

package/jest.config.js

@@ -0,0 +1,20 @@
+const config = require('../../jest.base');
+config.testEnvironment = 'jsdom';
+config.collectCoverageFrom = ['src/**/*.{ts,tsx}'];
+config.transform = {
+    '^.+\\.test.tsx?$': 'ts-jest',
+    '.+\\.(css|sass|scss)$': 'jest-scss-transform'
+};
+config.globals = {
+    'ts-jest': {
+        jsx: 'react',
+        diagnostics: {
+            warnOnly: true,
+            exclude: /\.(spec|test)\.ts$/
+        }
+    }
+};
+config.preset = 'ts-jest';
+config.transformIgnorePatterns = ['<rootDir>/node_modules/'];
+config.testMatch = ['**/test/unit/**/*.(test).ts(x)?'];
+module.exports = config;

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@sap-ux/control-property-editor",
+  "displayName": "Control Property Editor",
+  "description": "Control Property Editor",
+  "license": "Apache-2.0",
+  "version": "0.2.0",
+  "main": "dist/app.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/SAP/open-ux-tools.git",
+    "directory": "packages/control-property-editor"
+  },
+  "private": false,
+  "devDependencies": {
+    "@fluentui/react": "8.100.0",
+    "@fluentui/react-hooks": "8.6.14",
+    "@reduxjs/toolkit": "1.6.1",
+    "@testing-library/jest-dom": "5.16.5",
+    "@testing-library/react": "12.1.4",
+    "@testing-library/dom": "9.3.1",
+    "@types/react-dom": "16.8.5",
+    "@types/react-redux": "7.1.1",
+    "@types/redux-logger": "3.0.7",
+    "@types/remote-redux-devtools": "0.5.4",
+    "@types/source-map-support": "0.5.0",
+    "@types/react": "16.14.45",
+    "body-parser": "1.20.1",
+    "eslint-plugin-react": "7.32.2",
+    "http-proxy-middleware": "1.3.1",
+    "i18next": "19.0.2",
+    "npm-run-all": "4.1.5",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
+    "react-i18next": "11.10.0",
+    "react-redux": "7.2.1",
+    "redux": "4.0.4",
+    "redux-logger": "3.0.6",
+    "rimraf": "3.0.0",
+    "source-map-support": "0.5.16",
+    "stream-browserify": "3.0.0",
+    "ts-import-plugin": "1.6.3",
+    "ts-jest": "29.1.1",
+    "postcss-modules": "6.0.0",
+    "copyfiles": "2.4.1",
+    "express": "4.18.2",
+    "ejs": "3.1.7",
+    "@ui5/fs": "3.0.4",
+    "esbuild-plugin-alias": "0.2.1",
+    "@esbuild-plugins/node-modules-polyfill": "0.1.4",
+    "autoprefixer": "10.4.7",
+    "postcss": "8.4.14",
+    "yargs-parser": "21.1.1",
+    "@sap-ux/ui-components": "1.11.14",
+    "@sap-ux-private/control-property-editor-common": "0.1.0"
+  },
+  "scripts": {
+    "clean": "rimraf ./dist ./coverage *.tsbuildinfo",
+    "build": "npm-run-all -l -s clean -p build:compile build:webapp",
+    "build:compile": "tsc  --build ./tsconfig.json --pretty --dry",
+    "build:webapp": "node esbuild.js",
+    "watch": "npm-run-all -p watch:*",
+    "watch:webapp": "node esbuild.js --watch --minify=false",
+    "test": "jest --maxWorkers=1 --ci --forceExit --detectOpenHandles --config='jest.config.js'",
+    "test:debug": "node --inspect-brk node_modules/.bin/jest --runInBand  --config='jest.config.js' --colors",
+    "lint": "eslint . --ext .ts,.tsx",
+    "lint:fix": "eslint . --ext .ts,.tsx --fix"
+  }
+}

package/src/App.scss

@@ -0,0 +1,57 @@
+*:not([data-icon-name='CheckMark']):not(.sapUiIcon) {
+    font-family: var(--vscode-font-family) !important;
+}
+html {
+    overflow: hidden;
+}
+.app {
+    display: flex;
+    height: 100%;
+    background-color: var(--vscode-editor-background);
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+    justify-content: space-between;
+}
+
+.app-preview {
+    height: 100%;
+    border-width: 0;
+}
+
+.app-content {
+    flex-grow: 1;
+    display: flex;
+    overflow-x: auto;
+    overflow-y: hidden;
+    background-color: inherit;
+    padding: 19px;
+}
+
+.app-canvas {
+    flex-shrink: 1;
+    margin: 0 auto;
+}
+
+.app-panel {
+    height: 100%;
+    width: 300px;
+    background: var(--vscode-sideBar-background);
+    color: var(--vscode-foreground);
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+}
+
+.app-panel-scroller {
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.app-panel-left {
+    border-right: 1px solid var(--vscode-contrastBorder);
+}
+
+.app-panel-right {
+    border-left: 1px solid var(--vscode-contrastBorder);
+}

package/src/App.tsx

@@ -0,0 +1,136 @@
+import type { ReactElement } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { UIDialog, UILink, UIToggle } from '@sap-ux/ui-components';
+
+import { PropertiesPanel, LeftPanel } from './panels';
+import { useLocalStorage } from './use-local-storage';
+import type { RootState } from './store';
+import { useAppDispatch } from './store';
+import { changePreviewScale } from './slice';
+import { useWindowSize } from './use-window-size';
+import { DEFAULT_DEVICE_WIDTH, DEVICE_WIDTH_MAP } from './devices';
+
+import './App.scss';
+import './Workarounds.scss';
+
+export interface AppProps {
+    previewUrl: string;
+}
+
+/**
+ * React element for App.
+ *
+ * @param appProps - AppProps
+ * @returns ReactElement
+ */
+export default function App(appProps: AppProps): ReactElement {
+    const { previewUrl } = appProps;
+    useEffect(() => {
+        const sheet = window.document.styleSheets[0];
+        sheet.insertRule(
+            '@font-face {font-family: "SAP-icons"; src: url("/resources/sap/ui/core/themes/base/fonts/SAP-icons.woff2") format("woff2"),' +
+                'local("SAP-icons"); font-weight: normal; font-style: normal}',
+            sheet.cssRules.length
+        );
+    }, []);
+    const { t } = useTranslation();
+    const dispatch = useAppDispatch();
+    const [hideWarningDialog, setHideWarningDialog] = useLocalStorage('hide-warning-dialog', false);
+    const [isWarningDialogVisible, setWarningDialogVisibility] = useState(() => hideWarningDialog !== true);
+
+    const [isInitialized, setIsInitialized] = useState(false);
+
+    const previewWidth = useSelector<RootState, string>(
+        (state) => `${DEVICE_WIDTH_MAP.get(state.deviceType) ?? DEFAULT_DEVICE_WIDTH}px`
+    );
+    const previewScale = useSelector<RootState, number>((state) => state.scale);
+    const fitPreview = useSelector<RootState, boolean>((state) => state.fitPreview ?? false);
+    const windowSize = useWindowSize();
+
+    const containerRef = useCallback(
+        (node) => {
+            if (node === null) {
+                return;
+            }
+            setTimeout(() => {
+                if (isInitialized && !fitPreview) {
+                    return;
+                }
+                const paddingWidth = 40;
+                const width = node.clientWidth;
+                const availableWidth = width - paddingWidth;
+                const requiredWidth = parseInt(previewWidth, 10);
+                if (availableWidth < requiredWidth) {
+                    const scale = availableWidth / requiredWidth;
+                    dispatch(changePreviewScale(scale));
+                    const startPosition = (node.scrollWidth - width) / 2;
+                    if (typeof node.scrollTo === 'function') {
+                        node.scrollTo(startPosition, 0);
+                    }
+                } else if (previewScale < 1 && availableWidth >= requiredWidth) {
+                    dispatch(changePreviewScale(1));
+                }
+                if (!isInitialized) {
+                    setIsInitialized(true);
+                }
+            }, 0);
+        },
+        [windowSize, fitPreview]
+    );
+
+    function closeWarningDialog(): void {
+        setWarningDialogVisibility(false);
+    }
+
+    return (
+        <div className="app">
+            <section className="app-panel app-panel-left">
+                <LeftPanel />
+            </section>
+            <section ref={containerRef} className="app-content">
+                <div className="app-canvas">
+                    <iframe
+                        className="app-preview"
+                        id="preview"
+                        style={{
+                            width: previewWidth,
+                            transform: `scale(${previewScale})`
+                        }}
+                        src={previewUrl}
+                        title={t('APPLICATION_PREVIEW_TITLE')}
+                    />
+                </div>
+            </section>
+            <section className="app-panel app-panel-right">
+                <PropertiesPanel />
+            </section>
+
+            <UIDialog
+                hidden={!isWarningDialogVisible}
+                closeButtonAriaLabel={t('CLOSE')}
+                dialogContentProps={{
+                    title: t('TOOL_DISCLAIMER_TITLE'),
+                    subText: t('TOOL_DISCLAIMER_TEXT')
+                }}
+                acceptButtonText={t('OK')}
+                onAccept={closeWarningDialog}>
+                <UILink href="https://ui5.sap.com/#/topic/03265b0408e2432c9571d6b3feb6b1fd">
+                    {t('FE_DOCUMENTATION_LINK_TEXT')}
+                </UILink>
+                <UIToggle
+                    className="space space-toggle"
+                    label={t('DONT_SHOW_WARNING_ON_START')}
+                    inlineLabel
+                    inlineLabelLeft
+                    labelFlexGrow
+                    checked={hideWarningDialog}
+                    onChange={(_event, checked = false): void => {
+                        setHideWarningDialog(checked);
+                    }}
+                />
+            </UIDialog>
+        </div>
+    );
+}

package/src/Workarounds.scss

@@ -0,0 +1,79 @@
+// UITextField
+.ms-TextField {
+    .ms-TextField-field {
+        font-family: var(--vscode-font-family);
+    }
+
+    .ms-Label {
+        margin-top: 0;
+        margin-bottom: 4px;
+        padding: 0;
+        font-weight: normal;
+        height: 18px;
+    }
+}
+
+// UIDialog
+.ms-Dialog {
+    .ms-Dialog-title {
+        color: var(--vscode-foreground);
+    }
+
+    .ms-Dialog-subText {
+        color: var(--vscode-foreground);
+    }
+}
+
+// UIList
+
+.ms-GroupHeader.app-panel-selected-bg {
+    .ms-GroupHeader-title {
+        color: var(--vscode-list-activeSelectionForeground);
+    }
+
+    .ms-GroupHeader-expand svg path {
+        fill: var(--vscode-list-activeSelectionForeground);
+    }
+}
+
+.uiList-group-entry:hover {
+    outline: 1px dashed var(--vscode-contrastActiveBorder);
+}
+
+// UIIconButton
+.ms-Button.ms-Button--icon.is-checked {
+    background-color: var(--vscode-button-hoverBackground);
+    outline: 1px solid var(--vscode-contrastActiveBorder);
+    svg {
+        path,
+        rect {
+            fill: var(--vscode-button-foreground);
+        }
+    }
+}
+
+// Tree
+.app-panel-selected-bg {
+    .ms-GroupHeader-expand:hover {
+        color: var(--vscode-list-activeSelectionForeground);
+        background-color: var(--vscode-list-activeSelectionBackground);
+    }
+}
+
+.app-panel-hc-selected-bg {
+    outline: 1px solid var(--vscode-contrastActiveBorder);
+}
+
+.ms-GroupHeader.ms-GroupHeader--compact {
+    &:hover {
+        outline: 1px dashed var(--vscode-contrastActiveBorder);
+    }
+    .ms-GroupHeader-title {
+        height: 18px;
+        padding: 5px 0;
+        font-family: var(--vscode-font-family);
+    }
+    > div {
+        height: 28px;
+    }
+}

package/src/actions.ts

@@ -0,0 +1,3 @@
+import type { changeProperty } from './slice';
+
+export type Action = ReturnType<typeof changeProperty>;

package/src/components/AppLogo.module.scss

@@ -0,0 +1,8 @@
+.flexEditorText {
+    margin: 10px 15px;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 16px;
+    line-height: 16px;
+    color: var(--vscode-foreground);
+}

package/src/components/AppLogo.tsx

@@ -0,0 +1,75 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { Text } from '@fluentui/react';
+import { useTranslation } from 'react-i18next';
+
+import styles from './AppLogo.module.scss';
+
+/**
+ * React element for app logo.
+ *
+ * @returns ReactElement
+ */
+export function AppLogo(): ReactElement {
+    const { t } = useTranslation();
+    return (
+        <>
+            <AppIcon />
+            <Text className={styles.flexEditorText}>{t('APP_TITLE')}</Text>
+        </>
+    );
+}
+
+/**
+ * React element for app icon.
+ *
+ * @returns ReactElement
+ */
+function AppIcon(): ReactElement {
+    return (
+        <span data-testid="Control-Property-Editor-Icon">
+            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                    d="M18.1988 19.7416L18.3835 22.6424L15.1241 24.2613L12.3644 21.4256L9.68087 24.6741L6.37801 23.5551L6.53012 19.4591L2.47759 19.9806L1.07605 16.7755L4.05297 13.8095L1 11.3106L2.32549 7.89908L4.80263 7.83389L6.37801 7.8013"
+                    stroke="var(--vscode-icon-foreground)"
+                    strokeWidth="1.5"
+                    strokeMiterlimit="10"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                />
+                <path
+                    d="M14.092 17.5578C13.2228 18.0249 12.1798 18.2205 11.0825 18.0141C9.22461 17.6555 7.76875 16.0802 7.54059 14.2114C7.44281 13.4726 7.54059 12.7556 7.76874 12.1146"
+                    stroke="var(--vscode-icon-foreground)"
+                    strokeWidth="1.5"
+                    strokeMiterlimit="10"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                />
+                <path
+                    d="M12.5708 5.28068C12.473 5.57402 12.2557 6.32369 12.2014 7.27978C12.1253 8.63786 12.4404 9.75692 12.6794 10.4197C12.3643 10.2458 11.8754 10.0285 11.2344 9.94162C10.7455 9.87643 10.3326 9.89816 10.0284 9.94162C9.53951 8.89861 8.88763 7.13854 8.82245 4.86782C8.77899 3.27072 9.03974 1.94523 9.30049 1C12.9728 1.30421 15.7432 3.85741 16.0583 6.79087C16.3517 9.49617 14.4503 11.5279 14.1244 11.8647"
+                    stroke="var(--vscode-icon-foreground)"
+                    strokeWidth="1.5"
+                    strokeMiterlimit="10"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                />
+                <path
+                    d="M13.9724 2.95565C14.4287 2.46674 15.1132 1.89091 16.0584 1.48892C17.1666 1.02174 18.1553 0.989147 18.7203 1.01088C18.905 1.48892 19.0897 2.05388 19.1983 2.70576C19.5025 4.44411 19.22 5.91084 18.9593 6.81261C19.7633 6.64964 20.8389 6.5084 22.0992 6.57359C23.2617 6.62791 24.2504 6.83434 25.0001 7.05163C24.9892 7.50795 24.8914 9.93077 22.9792 11.7778C22.9358 11.8212 22.8814 11.8647 22.8271 11.919C22.3599 12.3319 21.0127 13.4618 18.9593 13.5813C18.3074 13.6139 17.2861 13.5813 16.0584 13.1033C15.5478 13.1033 15.3848 13.2336 15.3305 13.3423C15.2001 13.603 15.5587 13.9181 15.8085 14.5483C15.9389 14.8633 16.0476 15.2653 16.0476 15.7542C16.9167 16.1888 18.4269 16.8081 20.3934 16.9602C22.2839 17.1123 23.8158 16.7646 24.7393 16.4822C24.8154 16.1345 24.9023 15.5152 24.7393 14.7873C24.6198 14.2549 24.4242 13.8529 24.2613 13.5813"
+                    stroke="var(--vscode-icon-foreground)"
+                    strokeWidth="1.5"
+                    strokeMiterlimit="10"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                />
+                <path
+                    d="M18.7205 9.91989C18.8182 9.93076 19.4701 9.97421 20.1655 10.1806C21.5235 10.5718 22.5448 11.3975 22.9685 11.7669"
+                    stroke="var(--vscode-icon-foreground)"
+                    strokeWidth="1.5"
+                    strokeMiterlimit="10"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                />
+            </svg>
+        </span>
+    );
+}

package/src/components/ChangeIndicator.tsx

@@ -0,0 +1,80 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface ChangeIndicatorProps {
+    saved: number;
+    pending: number;
+    id?: string;
+}
+
+/**
+ * React element for change indicator.
+ *
+ * @param props - ChangeIndicatorProps
+ * @returns ReactElement
+ */
+export function ChangeIndicator(props: ChangeIndicatorProps): ReactElement {
+    const { saved, pending, id } = props;
+    const rest = { id };
+    const color = 'var(--vscode-terminal-ansiGreen)';
+
+    if (saved > 0 && pending === 0) {
+        return (
+            <svg
+                role="img"
+                width="8"
+                height="8"
+                viewBox="0 0 8 8"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                {...rest}>
+                <ChangeIndicatorTooltip {...props} />
+                <circle cx="4" cy="4" r="4" fill={color} />
+            </svg>
+        );
+    }
+
+    if (pending > 0 && saved === 0) {
+        return (
+            <svg
+                role="img"
+                width="8"
+                height="8"
+                viewBox="0 0 8 8"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                {...rest}>
+                <ChangeIndicatorTooltip {...props} />
+                <circle cx="4" cy="4" r="3.5" stroke={color} />
+            </svg>
+        );
+    }
+
+    return (
+        <svg role="img" width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
+            <ChangeIndicatorTooltip {...props} />
+            <circle cx="4" cy="4" r="3.5" stroke={color} />
+            <path d="M4 8a4 4 0 1 0 0-8v8Z" fill={color} />
+        </svg>
+    );
+}
+
+/**
+ * React element for change indicator tooltip.
+ *
+ * @param changeIndicatorProps - ChangeIndicatorProps
+ * @returns ReactElement
+ */
+function ChangeIndicatorTooltip(changeIndicatorProps: ChangeIndicatorProps): ReactElement {
+    const { saved, pending } = changeIndicatorProps;
+    const { t } = useTranslation();
+    if (saved > 0 && pending === 0) {
+        return <title>{t('SAVED_CHANGES')}</title>;
+    }
+
+    if (pending > 0 && saved === 0) {
+        return <title>{t('UNSAVED_CHANGES')}</title>;
+    }
+    return <title>{t('SAVED_AND_UNSAVED_CHANGES')}</title>;
+}

package/src/components/Separator.tsx

@@ -0,0 +1,32 @@
+import type { CSSProperties, DetailedHTMLProps, HTMLAttributes, ReactElement } from 'react';
+import React from 'react';
+
+interface SeparatorProps {
+    direction?: 'horizontal' | 'vertical';
+}
+
+/**
+ * React element for seperator.
+ *
+ * @param separatorProps SeparatorProps & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+ * @returns ReactElement
+ */
+export function Separator(
+    separatorProps: SeparatorProps & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+): ReactElement {
+    const { direction, style, ...rest } = separatorProps;
+    const isVertical = direction === 'vertical';
+    const borderProp = isVertical ? 'borderLeft' : 'borderBottom';
+    const inlineStyles: CSSProperties = {
+        ...{
+            [borderProp]: '1px solid var(--vscode-contrastBorder, var(--vscode-editorIndentGuide-background))'
+        },
+        ...style
+    };
+
+    if (isVertical) {
+        inlineStyles.height = '100%';
+    }
+
+    return <div style={inlineStyles} {...rest} />;
+}

package/src/components/ThemeSelectorCallout.scss

@@ -0,0 +1,48 @@
+#theme-light {
+    border-radius: 50%;
+    width: 14px;
+    height: 14px;
+    background: #ffffff;
+}
+
+#theme-dark {
+    border-radius: 50%;
+    width: 14px;
+    height: 14px;
+    background-color: #3c3c3c;
+}
+
+#theme-high-contrast {
+    border-radius: 50%;
+    width: 14px;
+    height: 14px;
+    background: #f38518;
+}
+
+.theme-child {
+    display: flex;
+    float: left;
+    width: 20px;
+    height: 20px;
+    margin: 10px 0 10px 10px;
+    border-radius: 1px;
+}
+
+.selected {
+    border-radius: 1px;
+    background-color: var(--vscode-progressBar-background);
+}
+
+div#theme-light {
+    margin-left: 3px;
+    margin-bottom: 3px;
+    margin-top: 3px;
+}
+div#theme-dark {
+    margin-left: 3px;
+    margin-top: 3px;
+}
+div#theme-high-contrast {
+    margin-left: 3px;
+    margin-top: 3px;
+}