@etsoo/materialui 1.0.1

package/.eslintignore

@@ -0,0 +1,3 @@
+.github
+node_modules
+lib/

package/.eslintrc.json

@@ -0,0 +1,38 @@
+{
+    "env": {
+        "browser": true,
+        "node": true,
+        "es6": true,
+        "jest": true
+    },
+    "extends": ["plugin:react/recommended", "airbnb-base", "prettier"],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": 6,
+        "sourceType": "module"
+    },
+    "plugins": ["@typescript-eslint"],
+    "rules": {
+        "class-methods-use-this": "off",
+        "import/extensions": ["error", "never"],
+        "import/prefer-default-export": "off",
+        "@typescript-eslint/no-unused-vars": ["error"]
+    },
+    "settings": {
+        "import/resolver": {
+            "node": {
+                "paths": ["src"],
+                "extensions": [".ts", ".tsx"]
+            }
+        },
+        "react": {
+            "createClass": "createReactClass",
+            "pragma": "React",
+            "version": "detect",
+            "flowVersion": "0.53"
+        }
+    }
+}

package/.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

package/.github/workflows/main.yml

@@ -0,0 +1,48 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
+# https://docs.github.com/en/actions/language-and-framework-guides/publishing-nodejs-packages
+
+# Description
+name: Node.js Package
+
+# Event to trigger the action
+on: [push]
+  # release:
+  #  types: [created]
+
+jobs:
+  # Publish to NPM
+  publish-npm:
+    # Condition: previous build is successful
+    # needs: Any previous jobs
+
+    # Operation system
+    runs-on: ubuntu-latest
+
+    steps:
+      # https://github.com/actions/checkout, This action checks-out your repository under $GITHUB_WORKSPACE
+      # so your workflow can access it.
+      - uses: actions/checkout@v2
+        
+      # Set up your GitHub Actions workflow with a specific version of node.js
+      # Setup .npmrc file to publish to npm
+      - uses: actions/setup-node@v1
+        with:
+          node-version: '18.x'
+          registry-url: 'https://registry.npmjs.org'
+
+      # Named after Continuous Integration, installs dependencies directly from package-lock.json
+      # ci vs install
+      - run: npm install
+
+      # Make sure pass the test without any exception
+      - run: npm test
+
+      # Build the package
+      - run: npm run build
+
+      # Publish to npm
+      # For scoped package, make it public for free service
+      - run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.ETSOONpmToken }}

package/.prettierignore

@@ -0,0 +1,5 @@
+.github
+node_modules
+lib/
+package-lock.json
+README.md

package/.prettierrc

@@ -0,0 +1,6 @@
+{
+    "trailingComma": "none",
+    "tabWidth": 4,
+    "semi": true,
+    "singleQuote": true
+}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 ETSOO
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,16 @@
+# AppReact
+**TypeScript Material-UI Implementation**
+
+## Installing
+
+Using npm:
+
+```bash
+$ npm install @etsoo/materialui
+```
+
+Using yarn:
+
+```bash
+$ yarn add @etsoo/materialui
+```

package/__tests__/ComboBox.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { ComboBox } from '../src';
+import { fireEvent, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+it('Render ComboBox', async () => {
+    // Arrange
+    type T = { id: number; name: string };
+    const options: T[] = [
+        { id: 1, name: 'Name 1' },
+        { id: 2, name: 'Name 2' }
+    ];
+
+    render(
+        <ComboBox<T>
+            name="Test"
+            options={options}
+            labelField="name"
+            label="Test"
+        />
+    );
+
+    // Act, click the list
+    const clicked = fireEvent.click(screen.getByRole('button'));
+    expect(clicked).toBeTruthy();
+
+    // Get list item
+    const item = screen.getByText('Name 1');
+    expect(item.nodeName).toBe('LI');
+});

package/__tests__/MUGlobalTests.tsx

@@ -0,0 +1,58 @@
+import { MUGlobal } from '../src/';
+
+// Theme update function
+const updateFunc = (value: number) => `${value * 8}px`;
+
+// Arrange
+const paddings = { sx: 2, sm: 3, key: 'a' };
+
+test('getMenuItem tests', () => {
+    // Assert
+    expect(
+        MUGlobal.getMenuItem('/user/add', '/user/all').selected
+    ).toBeTruthy();
+    expect(MUGlobal.getMenuItem('/user/add', '/user/*').selected).toBeTruthy();
+    expect(
+        MUGlobal.getMenuItem('/user/add', '/user/edit').selected
+    ).toBeFalsy();
+});
+
+test('half tests', () => {
+    // Act
+    const result = MUGlobal.half(paddings);
+
+    // Assert
+    expect(paddings).toHaveProperty('sx', 2);
+    expect(result).toHaveProperty('sx', 1);
+    expect(result).toHaveProperty('sm', 1.5);
+});
+
+test('increase tests', () => {
+    // Act
+    const result = MUGlobal.increase(paddings, 2);
+
+    // Assert
+    expect(paddings).toHaveProperty('sx', 2);
+    expect(result).toHaveProperty('sx', 4);
+    expect(result).toHaveProperty('sm', 5);
+});
+
+test('adjustWithTheme tests', () => {
+    // Act
+    const result = MUGlobal.adjustWithTheme(160, paddings, updateFunc);
+
+    // Assert
+    expect(paddings).toHaveProperty('sx', 2);
+    expect(result).toHaveProperty('sx', '144px');
+    expect(result).toHaveProperty('sm', '136px');
+});
+
+test('updateWithTheme tests', () => {
+    // Act
+    const result = MUGlobal.updateWithTheme(paddings, updateFunc);
+
+    // Assert
+    expect(paddings).toHaveProperty('sx', 2);
+    expect(result).toHaveProperty('sx', '16px');
+    expect(result).toHaveProperty('sm', '24px');
+});

package/__tests__/NotifierMUTests.tsx

@@ -0,0 +1,217 @@
+import {
+    INotification,
+    NotificationMessageType
+} from '@etsoo/notificationbase';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { NotifierMU } from '../src';
+
+// Without it will popup error:
+// The current testing environment is not configured to support act
+(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
+
+// Root
+const root = document.body;
+const container: HTMLElement = document.createElement('div');
+root.append(container);
+
+// The state provider
+const Provider = NotifierMU.setup();
+const reactRoot = createRoot(container);
+
+act(() => {
+    // Concorrent renderer needs act block
+    reactRoot.render(<Provider />);
+});
+
+// Notifier
+const notifier = NotifierMU.instance;
+
+// Timer mock
+// https://jestjs.io/docs/en/timer-mocks
+jest.useFakeTimers();
+
+test('Alert tests', async () => {
+    // Click
+    const handleClick = jest.fn();
+
+    act(() => {
+        // Add the notification
+        notifier.alert('Alert message', handleClick);
+    });
+
+    // Button
+    const button = root.getElementsByTagName('button');
+
+    expect(button.length).toBe(1);
+    expect(button[0].innerHTML).toContain('OK');
+
+    await act(async () => {
+        button[0].click();
+    });
+
+    expect(handleClick).toBeCalled();
+
+    // Fast forward
+    jest.runOnlyPendingTimers();
+});
+
+test('Confirm tests', async () => {
+    // Click
+    const handleClick = jest.fn();
+
+    act(() => {
+        // Add the notification
+        notifier.confirm('Confirm message', undefined, handleClick);
+    });
+
+    // Button
+    const button = root.getElementsByTagName('button');
+
+    expect(button.length).toBe(2);
+    expect(button[0].innerHTML).toContain('Cancel');
+
+    await act(async () => {
+        button[0].click();
+    });
+
+    expect(handleClick).toBeCalled();
+
+    // Fast forward
+    jest.runOnlyPendingTimers();
+});
+
+test('Confirm tests without cancel button', async () => {
+    // Click
+    const handleClick = jest.fn();
+
+    act(() => {
+        // Add the notification
+        notifier.confirm('Confirm message', undefined, handleClick, {
+            cancelButton: false
+        });
+    });
+
+    // Button
+    const button = root.getElementsByTagName('button');
+
+    expect(button.length).toBe(1);
+    expect(button[0].innerHTML).toContain('OK');
+
+    await act(async () => {
+        button[0].click();
+    });
+
+    expect(handleClick).toBeCalled();
+
+    // Fast forward
+    jest.runOnlyPendingTimers();
+});
+
+test('Prompt tests', async () => {
+    // Click
+    const handleClick = jest.fn((result: boolean) => {
+        expect(result).toBeTruthy();
+    });
+
+    act(() => {
+        // Add the notification
+        notifier.prompt<boolean>('Prompt message', handleClick, undefined, {
+            type: 'switch',
+            required: false
+        });
+    });
+
+    // Button
+    const button = root.getElementsByTagName('button');
+
+    expect(button.length).toBe(2); // Switch will generate a button
+    expect(button[1].innerHTML).toContain('OK');
+
+    await act(async () => {
+        button[1].click();
+    });
+
+    expect(handleClick).toBeCalled();
+
+    jest.runOnlyPendingTimers();
+});
+
+test('Prompt tests with form submit', async () => {
+    // Click
+    const handleClick = jest.fn((result: boolean) => {
+        expect(result).toBeTruthy();
+    });
+
+    act(() => {
+        // Add the notification
+        notifier.prompt<boolean>('Prompt message', handleClick, undefined, {
+            type: 'switch',
+            required: false
+        });
+    });
+
+    await act(async () => {
+        (
+            root
+                .getElementsByTagName('form')[0]
+                .elements.namedItem('okButton') as HTMLButtonElement
+        )?.click();
+    });
+
+    expect(handleClick).toBeCalled();
+
+    jest.runOnlyPendingTimers();
+});
+
+test('Message tests', (done) => {
+    // Callback
+    const callback = jest.fn(() => done());
+
+    let n: INotification<React.ReactNode, any> | undefined;
+    act(() => {
+        // Add the notification
+        n = notifier.message(
+            NotificationMessageType.Danger,
+            'Error Message',
+            undefined,
+            {
+                callback
+            }
+        );
+    });
+
+    expect(n?.timespan).toBe(5);
+
+    expect(root.innerHTML).toContain('Error Message');
+
+    act(() => {
+        // Here is the bug need further study...
+        n?.dismiss();
+
+        // Fast forward
+        jest.runOnlyPendingTimers();
+    });
+
+    expect(root.innerHTML).not.toContain('Error Message');
+    expect(callback).toBeCalled();
+});
+
+test('Loading tests', () => {
+    act(() => {
+        // Add the notification
+        notifier.showLoading('Loading');
+    });
+
+    expect(root.innerHTML).toContain('Loading');
+
+    act(() => {
+        notifier.hideLoading();
+
+        // Fast forward
+        jest.runOnlyPendingTimers();
+    });
+
+    expect(root.innerHTML).not.toContain('Loading');
+});

package/__tests__/SelectEx.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { SelectEx } from '../src';
+import { findByText, fireEvent, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+it('Render SelectEx', async () => {
+    // Arrange
+    type T = { id: number; name: string };
+    const options: T[] = [
+        { id: 1, name: 'Name 1' },
+        { id: 2, name: 'Name 2' }
+    ];
+
+    // Render component
+    const { baseElement } = render(
+        <SelectEx<T> options={options} name="test" search labelField="name" />
+    );
+
+    // Act, click to show the list
+    const button = screen.getByRole('button');
+    fireEvent.mouseDown(button); // Not click
+
+    // Get list item
+    const item = await findByText(baseElement, 'Name 2');
+    expect(item.nodeName).toBe('SPAN');
+});

package/__tests__/tsconfig.json

@@ -0,0 +1,19 @@
+{
+    "compilerOptions": {
+        "target": "ES2019",
+        "module": "ESNext",
+        "allowJs": true,
+        "skipLibCheck": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "strict": true,
+        "forceConsistentCasingInFileNames": true,
+        "moduleResolution": "node",
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": true,
+        "jsx": "react",
+        "declaration": true
+    },
+    "include": [".."]
+}

package/babel.config.json

@@ -0,0 +1,11 @@
+{
+    "presets": [["@babel/env"]],
+    "plugins": [
+        [
+            "@babel/plugin-transform-runtime",
+            {
+                "corejs": 3
+            }
+        ]
+    ]
+}

package/lib/AuditDisplay.d.ts

@@ -0,0 +1,33 @@
+import { Theme } from '@mui/material';
+import React, { CSSProperties } from 'react';
+import { ListMoreDisplayProps } from './ListMoreDisplay';
+import { AuditLineUpdateData } from './ShowDataComparison';
+/**
+ * Audit line data model
+ */
+export interface AuditLine {
+    id: number;
+    creation: Date;
+    user: string;
+    action: string;
+    changes?: AuditLineUpdateData;
+}
+/**
+ * Audit display props
+ */
+export interface AuditDisplayProps extends Omit<ListMoreDisplayProps<AuditLine>, 'children'> {
+    /**
+     * Get list item style callback
+     */
+    getItemStyle?: (index: number, theme: Theme) => CSSProperties;
+    /**
+     * Item/line renderer
+     */
+    itemRenderer?: (data: AuditLine, index: number) => React.ReactNode;
+}
+/**
+ * Audit display
+ * @param props Props
+ * @returns Component
+ */
+export declare function AuditDisplay(props: AuditDisplayProps): JSX.Element;

package/lib/AuditDisplay.js

@@ -0,0 +1,52 @@
+import { Utils } from '@etsoo/shared';
+import { Button, Divider, Typography, useTheme } from '@mui/material';
+import React from 'react';
+import { globalApp } from './app/ReactApp';
+import { ListMoreDisplay } from './ListMoreDisplay';
+import { ShowDataComparison } from './ShowDataComparison';
+// Get label
+const getLabel = (key) => {
+    var _a;
+    return (_a = globalApp.get(Utils.formatInitial(key))) !== null && _a !== void 0 ? _a : key;
+};
+// Format date
+const formatDate = (date) => {
+    if (typeof globalApp === 'undefined')
+        return date.toUTCString();
+    return globalApp.formatDate(date, 'ds');
+};
+/**
+ * Audit display
+ * @param props Props
+ * @returns Component
+ */
+export function AuditDisplay(props) {
+    // Theme
+    const theme = useTheme();
+    // Title
+    var title = getLabel('dataComparison');
+    // Destruct
+    const { getItemStyle = (index, theme) => ({
+        padding: [theme.spacing(1.5), theme.spacing(1)].join(' '),
+        background: index % 2 === 0
+            ? theme.palette.grey[100]
+            : theme.palette.grey[50]
+    }), itemRenderer = (data) => {
+        const changes = data.changes;
+        return (React.createElement(React.Fragment, null,
+            changes != null && (React.createElement(Button, { variant: "outlined", size: "small", onClick: () => ShowDataComparison(changes, title), sx: {
+                    marginLeft: theme.spacing(1),
+                    marginTop: theme.spacing(-0.5),
+                    float: 'right'
+                } }, title)),
+            React.createElement(Typography, null, formatDate(data.creation) +
+                ', [' +
+                getLabel(data.action) +
+                '], ' +
+                data.user)));
+    }, headerTitle = (React.createElement(React.Fragment, null,
+        React.createElement(Typography, null, getLabel('audits')),
+        React.createElement(Divider, null))), ...rest } = props;
+    // Layout
+    return (React.createElement(ListMoreDisplay, { headerTitle: headerTitle, ...rest }, (data, index) => (React.createElement("div", { key: data.id, style: getItemStyle(index, theme) }, itemRenderer(data, index)))));
+}

package/lib/AutocompleteExtendedProps.d.ts

@@ -0,0 +1,64 @@
+import { DataTypes } from '@etsoo/shared';
+import { AutocompleteProps } from '@mui/material';
+import { ChangeEventHandler } from 'react';
+/**
+ * Autocomplete extended props
+ */
+export declare type AutocompleteExtendedProps<T extends object, D extends DataTypes.Keys<T>> = Omit<AutocompleteProps<T, undefined, false, false>, 'renderInput' | 'options'> & {
+    /**
+     * Id field
+     */
+    idField?: D;
+    /**
+     * Id value
+     */
+    idValue?: T[D];
+    /**
+     * Autocomplete for the input
+     */
+    inputAutoComplete?: string;
+    /**
+     * If `true`, the label is displayed in an error state.
+     * @default false
+     */
+    inputError?: boolean;
+    /**
+     * The helper text content.
+     */
+    inputHelperText?: React.ReactNode;
+    /**
+     * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
+     * @default 'none'
+     */
+    inputMargin?: 'dense' | 'normal' | 'none';
+    /**
+     * Input onChange hanlder
+     */
+    inputOnChange?: ChangeEventHandler<HTMLInputElement> | undefined;
+    /**
+     * If `true`, the label will indicate that the `input` is required.
+     * @default false
+     */
+    inputRequired?: boolean;
+    /**
+     * The variant to use.
+     * @default 'outlined'
+     */
+    inputVariant?: 'standard' | 'outlined' | 'filled';
+    /**
+     * Label of the field
+     */
+    label: string;
+    /**
+     * Name of the field
+     */
+    name: string;
+    /**
+     * Is the field read only?
+     */
+    readOnly?: boolean;
+    /**
+     * Is search field?
+     */
+    search?: boolean;
+};

package/lib/AutocompleteExtendedProps.js

@@ -0,0 +1 @@
+export {};

package/lib/BackButton.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { IconButtonProps } from '@mui/material';
+/**
+ * BackButton props
+ */
+export interface BackButtonProps extends IconButtonProps {
+}
+/**
+ * BackButton
+ * @param props Props
+ * @returns Component
+ */
+export declare function BackButton(props: BackButtonProps): JSX.Element;