wcz-layout 6.7.2 → 8.3.2

package/src/contexts/LayoutContext.tsx

@@ -1,127 +0,0 @@
-import { MsalProvider } from "@azure/msal-react";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import i18next, { TFunction, i18n } from "i18next";
-import LanguageDetector from "i18next-browser-languagedetector";
-import I18NextHttpBackend from "i18next-http-backend";
-import moment from "moment";
-import "moment/locale/cs";
-import { createContext, useContext, useState } from "react";
-import { initReactI18next, useTranslation } from "react-i18next";
-import { Outlet, RouterProvider, createBrowserRouter } from "react-router-dom";
-import { z } from "zod";
-import { zodI18nMap } from "zod-i18n-map";
-import zodCsTranslations from "zod-i18n-map/locales/cs/zod.json";
-import zodEnTranslations from "zod-i18n-map/locales/en/zod.json";
-import { Layout } from "../components/Layout";
-import { ErrorPage } from "../components/layout/ErrorPage";
-import { LayoutSnackbar } from "../components/layout/LayoutSnackbar";
-import { useSnackbar } from "../hooks/UseSnackbar";
-import { LayoutPaletteColorOptions } from "../models/LayoutPaletteColorOptions";
-import { LayoutRoute } from "../models/LayoutRoute";
-import { Snackbar } from "../models/Snackbar";
-import { User } from "../models/User";
-import { pca } from "../utils/Auth";
-import { UserProvider } from "./UserContext";
-
-const queryClient = new QueryClient();
-
-i18next
-    .use(initReactI18next)
-    .use(LanguageDetector)
-    .use(I18NextHttpBackend)
-    .init({ fallbackLng: "en" });
-
-i18next.addResourceBundle("en", "zod", zodEnTranslations);
-i18next.addResourceBundle("cs", "zod", zodCsTranslations);
-
-z.setErrorMap(zodI18nMap);
-
-declare module "moment" {
-    interface Moment {
-        formatDate(): string;
-        formatDateTime(): string;
-    }
-}
-
-declare global {
-    interface Error {
-        innerException?: string;
-        status?: number;
-        traceIdentifier?: string;
-    }
-}
-
-moment.fn.formatDate = function (): string {
-    if (!this.isValid()) return "";
-    return this.format("YYYY-MM-DD");
-};
-
-moment.fn.formatDateTime = function (): string {
-    if (!this.isValid()) return "";
-    return this.format("YYYY-MM-DD HH:mm");
-};
-
-export interface GetRoutesParams {
-    user: User;
-    t: TFunction<"translation", undefined>;
-    i18n: i18n;
-}
-
-interface LayoutContextInterface {
-    user: User;
-    t: TFunction<"translation", undefined>;
-    i18n: i18n;
-    snackbar: (snackbar: Snackbar) => void;
-    notification: (notification: Snackbar) => void;
-}
-
-export const LayoutContext = createContext({} as LayoutContextInterface);
-
-interface LayoutProviderProps {
-    getRoutes: (params: GetRoutesParams) => LayoutRoute[];
-    appVersion: string;
-    colors: LayoutPaletteColorOptions;
-}
-
-export const LayoutProvider: React.FC<LayoutProviderProps> = ({ getRoutes, appVersion, colors }) => {
-    const { t, i18n } = useTranslation();
-    const [user, setUser] = useState<User>({} as User);
-    const { snackbar, setSnackbar, displaySnackbar, notification, notifications, setNotifications } = useSnackbar();
-
-    if (moment.locale() !== i18n.resolvedLanguage) {
-        moment.locale(i18n.resolvedLanguage);
-    }
-
-    const routes: LayoutRoute[] = getRoutes({ user, i18n, t });
-
-    const router = createBrowserRouter([
-        {
-            element:
-                <MsalProvider instance={pca}>
-                    <QueryClientProvider client={queryClient}>
-                        <UserProvider setUser={setUser}>
-                            <LayoutContext.Provider value={{ user, t, i18n, snackbar: displaySnackbar, notification }}>
-                                <Layout
-                                    routes={routes}
-                                    appVersion={appVersion}
-                                    colors={colors}
-                                    user={user}
-                                    notifications={notifications}
-                                    setNotifications={setNotifications}
-                                >
-                                    <Outlet />
-                                    <LayoutSnackbar snackbar={snackbar} setSnackbar={setSnackbar} />
-                                </Layout>
-                            </LayoutContext.Provider>
-                        </UserProvider>
-                    </QueryClientProvider>
-                </MsalProvider>,
-            children: routes,
-            errorElement: <ErrorPage />
-        },
-    ]);
-
-    return <RouterProvider router={router} />;
-};
-
-export const useLayout = () => useContext(LayoutContext);

package/src/contexts/UserContext.tsx

@@ -1,88 +0,0 @@
-import { EventType, EventMessage, AuthenticationResult } from "@azure/msal-browser";
-import { createContext, Dispatch, SetStateAction, useEffect, useCallback } from "react";
-import { User } from "../models/User";
-import { pca } from "../utils/Auth";
-
-export const USER_DATA_FETCHED_EVENT = "userDataFetched";
-
-export interface UserDataFetchedEvent {
-    user: Partial<User>;
-}
-
-export interface MicrosoftIdTokenPayload {
-    sub: string;
-    name: string;
-    mail: string;
-    department?: string;
-    employeeId?: string;
-    groups?: Array<string>;
-    companyName?: string;
-}
-
-export function decodeJwt<T>(token: string): T {
-    const base64Payload = token.split(".")[1];
-    const base64 = base64Payload.replace(/-/g, "+").replace(/_/g, "/");
-    const padding = base64.length % 4 === 0 ? "" : "=".repeat(4 - (base64.length % 4));
-    const payload = decodeURIComponent(
-        atob(base64 + padding)
-            .split("")
-            .map((c) => "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2))
-            .join("")
-    );
-    return JSON.parse(payload) as T;
-}
-
-export interface UserProviderProps {
-    setUser: Dispatch<SetStateAction<User>>;
-    children?: React.ReactNode;
-}
-
-export const UserProvider = ({ children, setUser }: UserProviderProps) => {
-    const processAccount = useCallback(() => {
-        const account = pca.getActiveAccount();
-        if (account?.idToken) {
-            const idTokenPayload = decodeJwt<MicrosoftIdTokenPayload>(account.idToken);
-            const userData: User = {
-                id: idTokenPayload.sub,
-                name: idTokenPayload.name.split("/")[0],
-                email: idTokenPayload.mail,
-                groups: idTokenPayload.groups ?? [],
-                department: idTokenPayload.department || "",
-                employeeId: idTokenPayload.employeeId || "",
-                companyName: idTokenPayload.companyName,
-            };
-            setUser(userData);
-            window.dispatchEvent(new CustomEvent<UserDataFetchedEvent>(USER_DATA_FETCHED_EVENT, { detail: { user: userData } }));
-        }
-    }, [setUser]);
-
-    useEffect(() => {
-        processAccount();
-
-        const callbackId = pca.addEventCallback((event: EventMessage) => {
-            if (event.eventType === EventType.ACQUIRE_TOKEN_SUCCESS) {
-                const payload = event.payload as AuthenticationResult;
-                if (payload.account) {
-                    pca.setActiveAccount(payload.account);
-                    processAccount();
-                }
-            }
-        });
-
-        return () => {
-            if (callbackId) {
-                pca.removeEventCallback(callbackId);
-            }
-        };
-    }, [processAccount]);
-
-    return (
-        <UserContext.Provider value={null}>
-            {children}
-        </UserContext.Provider>
-    );
-};
-
-export interface UserContextValue { }
-
-export const UserContext = createContext(null);

package/src/hooks/FormHooks.ts

@@ -1,33 +0,0 @@
-import { createFormHook, createFormHookContexts } from "@tanstack/react-form";
-import { FormAutocomplete as Autocomplete } from "../components/form/FormAutocomplete";
-import { FormCheckbox as Checkbox } from "../components/form/FormCheckbox";
-import { FormDatePicker as DatePicker } from "../components/form/FormDatePicker";
-import { FormDateTimePicker as DateTimePicker } from "../components/form/FormDateTimePicker";
-import { FormNumberField as NumberField } from "../components/form/FormNumberField";
-import { FormRadioGroup as RadioGroup } from "../components/form/FormRadioGroup";
-import { FormSlider as Slider } from "../components/form/FormSlider";
-import { FormSubmitButton as SubmitButton } from "../components/form/FormSubmitButton";
-import { FormSwitch as Switch } from "../components/form/FormSwitch";
-import { FormTextField as TextField } from "../components/form/FormTextField";
-
-export const { fieldContext, useFieldContext, formContext, useFormContext } = createFormHookContexts();
-
-export const { useAppForm: useLayoutForm, withForm: withLayoutForm } =
-    createFormHook({
-        fieldComponents: {
-            TextField,
-            NumberField,
-            Autocomplete,
-            Checkbox,
-            Switch,
-            RadioGroup,
-            Slider,
-            DatePicker,
-            DateTimePicker,
-        },
-        formComponents: {
-            SubmitButton,
-        },
-        fieldContext,
-        formContext,
-    });

package/src/hooks/UseSnackbar.tsx

@@ -1,28 +0,0 @@
-import moment from "moment";
-import { useState } from "react";
-import useLocalStorageState from "use-local-storage-state";
-import { Snackbar } from "../models/Snackbar";
-import Notification from "../models/Notification";
-
-export const useSnackbar = () => {
-    const [snackbar, setSnackbar] = useState<Snackbar>({} as Snackbar);
-    const [notifications, setNotifications] = useLocalStorageState<Notification[]>("notifications");
-
-    const displaySnackbar = (newSnackbar: Snackbar) => {
-        setSnackbar(newSnackbar);
-        notification(newSnackbar);
-    };
-
-    const notification = (notification: Snackbar) => {
-        setNotifications(oldNotifications => {
-            let newNotifications: Notification[] = [];
-            if (oldNotifications) {
-                newNotifications = oldNotifications;
-            }
-            newNotifications.unshift({ ...notification, dateTime: moment().format("YYYY-MM-DD HH:mm:ss.SSS"), isRead: false });
-            return newNotifications.slice(0, 10);
-        });
-    };
-
-    return { snackbar, setSnackbar, displaySnackbar, notification, notifications, setNotifications };
-};

package/src/hooks/UseUser.tsx

@@ -1,29 +0,0 @@
-import { queryOptions } from "@tanstack/react-query";
-import axios from "axios";
-import { getAccessToken } from "../utils/Auth";
-
-const QUERY_KEY = "user";
-
-const api = axios.create({
-    baseURL: "https://graph.microsoft.com/v1.0/",
-});
-
-api.interceptors.request.use(async (config) => {
-    config.headers.Authorization = `Bearer ${await getAccessToken(["User.Read"])}`;
-    return config;
-});
-
-export const graphQueries = {
-    sessionUserPhoto: () =>
-        queryOptions({
-            queryKey: [QUERY_KEY, "me", "photo"],
-            queryFn: async () => await api.request<Blob>({
-                method: "GET",
-                url: "/me/photo/$value",
-                responseType: "blob",
-            }).then(response => response.data),
-            staleTime: Infinity,
-            gcTime: Infinity,
-            select: data => URL.createObjectURL(data),
-        }),
-};

package/src/index.ts

@@ -1,27 +0,0 @@
-export { TypographyWithIcon } from './components/layout/TypographyWithIcon';
-export { LayoutDialog } from './components/layout/LayoutDialog';
-
-export { TableContainer } from './components/dataGrid/TableContainer';
-export { GridToolbar, GridToolbarProps } from './components/dataGrid/GridToolbar';
-export { ChipInputCell } from './components/dataGrid/ChipInputCell';
-export { EditableColumnHeader } from './components/dataGrid/EditableColumnHeader';
-
-export { LayoutContext, LayoutProvider, useLayout, GetRoutesParams } from './contexts/LayoutContext';
-
-export { useFieldContext, useFormContext, useLayoutForm, withLayoutForm } from './hooks/FormHooks';
-
-export { User } from './models/User';
-export { Error } from './models/Error';
-export { PeoplesoftEmployee } from './models/PeoplesoftEmployee';
-export { PeoplesoftDepartment } from './models/PeoplesoftDepartment';
-export { LayoutPaletteColorOptions } from './models/LayoutPaletteColorOptions';
-export { LayoutRoute } from './models/LayoutRoute';
-
-export * from './utils/Helpers';
-export * from './utils/Fetches';
-export { getAccessToken, hasRole } from './utils/Auth';
-
-export { default as useLocalStorageState } from 'use-local-storage-state';
-
-export { pca } from "./utils/Auth";
-export { AuthenticationResult, EventMessage, EventType } from "@azure/msal-browser";

package/src/models/Error.tsx

@@ -1,6 +0,0 @@
-export interface Error {
-    innerException?: string;
-    message: string;
-    status: number;
-    traceIdentifier?: string;
-}

package/src/models/KeycloakSettings.ts

@@ -1,8 +0,0 @@
-export default interface KeycloakSettings {
-    url: string;
-    realm: string;
-    clientId: string;
-    idpHint?: string;
-    confidentialClientId?: string;
-    confidentialClientSecret?: string;
-}

package/src/models/LayoutPaletteColorOptions.tsx

@@ -1,7 +0,0 @@
-import { PaletteColorOptions, TypeBackground } from "@mui/material";
-
-export interface LayoutPaletteColorOptions {
-    primary?: PaletteColorOptions;
-    secondary?: PaletteColorOptions;
-    background?: TypeBackground;
-}

package/src/models/LayoutRoute.ts

@@ -1,15 +0,0 @@
-import { ReactNode } from "react";
-import { NonIndexRouteObject } from "react-router-dom";
-
-interface CustomNonIndexRouteObject extends NonIndexRouteObject {
-    title?: string;
-    icon?: ReactNode;
-    pageTitle?: string;
-    showInMenu?: boolean;
-    disabled?: boolean;
-    divider?: boolean;
-    authenticated?: boolean;
-    children?: LayoutRoute[];
-}
-
-export type LayoutRoute = CustomNonIndexRouteObject;

package/src/models/Notification.ts

@@ -1,10 +0,0 @@
-import { AlertColor } from "@mui/material";
-import { ReactNode } from "react";
-
-export default interface Notification {
-    title: string;
-    severity?: AlertColor;
-    description?: string | ReactNode;
-    dateTime: string;
-    isRead?: boolean;
-}

package/src/models/PeoplesoftDepartment.ts

@@ -1,15 +0,0 @@
-import { PeoplesoftEmployee } from "./PeoplesoftEmployee";
-
-export interface PeoplesoftDepartment {
-    departmentId: string;
-    description: string;
-    managerId: string;
-    managerRecordNumber: string;
-    treeLevel: number;
-    upperDepartmentId: string;
-    companyCode: string;
-    location: string;
-    salLocation: string;
-    plantId: string;
-    manager: PeoplesoftEmployee;
-}

package/src/models/PeoplesoftEmployee.ts

@@ -1,35 +0,0 @@
-import { EmployeeCategoryGroup } from "./types/EmployeeCategoryGroup";
-import { EmployeeStatus } from "./types/EmployeeStatus";
-
-export interface PeoplesoftEmployee {
-    badgeId: string;
-    category: string;
-    categoryGroup: EmployeeCategoryGroup;
-    companyCode: string;
-    contactPhone: string;
-    departmentId: string;
-    departmentDescription: string;
-    emailString: string;
-    employeeId: string;
-    extensionNumber: string;
-    firstName: string;
-    gender: string;
-    hiredDate: string;
-    lastName: string;
-    managerId: string;
-    middleName: string;
-    name: string;
-    nameTitleCase: string;
-    nfcSn: string;
-    plantId: string;
-    position: string;
-    previousEmployeeIds?: string;
-    reHiredDate?: string;
-    recordNumber: number;
-    status: EmployeeStatus;
-    supervisorId: string;
-    terminationDate?: string;
-    terminationFutureDate?: string;
-    type: string;
-    upperDepartmentId: string;
-}

package/src/models/Snackbar.ts

@@ -1,16 +0,0 @@
-import { AlertColor } from "@mui/material";
-
-export interface Snackbar {
-    /** The message to be displayed. */
-    title: string;
-    /** The severity level determining its color and icon. This can be 'error', 'warning', 'info', or 'success'. This property is optional. */
-    severity?: AlertColor;
-    /** Additional description to be displayed. This property is optional. */
-    description?: string;
-    /**
-     * The duration in milliseconds before the Snackbar automatically hides.
-     * If not specified, the duration defaults are: 15000ms for 'error', 10000ms for 'warning',
-     * and 5000ms for other severities. This property is optional.
-     */
-    duration?: number
-}

package/src/models/User.ts

@@ -1,13 +0,0 @@
-import * as z from "zod";
-
-export const UserSchema = z.object({
-    id: z.string(),
-    name: z.string(),
-    email: z.string().email(),
-    department: z.string(),
-    employeeId: z.string(),
-    groups: z.array(z.string()),
-    companyName: z.string().optional(),
-});
-
-export type User = z.infer<typeof UserSchema>;

package/src/models/types/EmployeeCategoryGroup.ts

@@ -1 +0,0 @@
-export type EmployeeCategoryGroup = "IDL" | "DL" | "FI"

package/src/models/types/EmployeeStatus.ts

@@ -1 +0,0 @@
-export type EmployeeStatus = "Active" | "Terminated" | "LeaveOfAbsence"

package/src/utils/Auth.ts

@@ -1,58 +0,0 @@
-import type { Configuration, NavigationOptions } from "@azure/msal-browser";
-import { NavigationClient, PublicClientApplication } from "@azure/msal-browser";
-import { NavigateFunction } from "react-router-dom";
-import { User } from "../models/User";
-
-const msalConfig: Configuration = {
-    auth: {
-        clientId: process.env.REACT_APP_MICROSOFT_CLIENT_ID!,
-        authority: `https://login.microsoftonline.com/${process.env.REACT_APP_MICROSOFT_TENANT_ID!}`,
-        redirectUri: window.location.origin + "/",
-        navigateToLoginRequestUrl: false,
-    },
-};
-
-export const pca = new PublicClientApplication(msalConfig);
-
-export class CustomNavigationClient extends NavigationClient {
-    private navigate: NavigateFunction;
-
-    constructor(navigate: NavigateFunction) {
-        super();
-        this.navigate = navigate;
-    }
-
-    async navigateInternal(url: string, options: NavigationOptions) {
-        const relativePath = url.replace(window.location.origin, "");
-        if (options.noHistory) {
-            this.navigate(relativePath, { replace: true });
-        } else {
-            this.navigate(relativePath);
-        }
-
-        return false;
-    }
-}
-
-const getAccount = () => {
-    const account = pca.getActiveAccount();
-    if (!account) throw new Error("No active account. User not signed in.");
-    return account;
-};
-
-export const getAccessToken = async (scopes: string[]): Promise<string> => {
-    const account = getAccount();
-
-    try {
-        const { accessToken } = await pca.acquireTokenSilent({ scopes, account });
-        return accessToken;
-    } catch {
-        const { accessToken } = await pca.acquireTokenPopup({ scopes, account });
-        return accessToken;
-    }
-};
-
-export const hasRole = (user: User, roles: string[]): boolean => {
-    if (!user.groups || user.groups.length === 0) return false;
-    return roles.some(role => user.groups.includes(role));
-};

package/src/utils/Fetches.ts

@@ -1,83 +0,0 @@
-import { getAccessToken } from "./Auth";
-
-export const fetchGet = async (url: string, scopes: string[], signal: AbortSignal | undefined): Promise<any> => {
-    const initReq: RequestInit = await getRequestInit("GET", scopes, null, signal);
-
-    const response: Response = await fetch(url, initReq);
-    if (!response.ok)
-        throw await response.json();
-
-    return response.json();
-};
-
-export const fetchFileGet = async (url: string, scopes: string[], signal: AbortSignal | undefined): Promise<Blob> => {
-    const initReq: RequestInit = await getRequestInit("GET", scopes, null, signal);
-
-    const response: Response = await fetch(url, initReq);
-    if (!response.ok)
-        throw await response.json();
-
-    return response.blob();
-};
-
-export const fetchPost = async (url: string, scopes: string[], data: unknown): Promise<any> => {
-    const initReq: RequestInit = await getRequestInit("POST", scopes, data);
-
-    const response: Response = await fetch(url, initReq);
-    if (!response.ok)
-        throw await response.json();
-
-    try {
-        return response.json();
-    } catch {
-        return response;
-    }
-};
-
-export const fetchPut = async (url: string, scopes: string[], data: unknown): Promise<any> => {
-    const initReq: RequestInit = await getRequestInit("PUT", scopes, data);
-
-    const response: Response = await fetch(url, initReq);
-    if (!response.ok)
-        throw await response.json();
-
-    return response;
-};
-
-export const fetchDelete = async (url: string, scopes: string[]): Promise<any> => {
-    const initReq: RequestInit = await getRequestInit("DELETE", scopes);
-
-    const response: Response = await fetch(url, initReq);
-    if (!response.ok)
-        throw await response.json();
-
-    return response;
-};
-
-const getRequestInit = async (method: string, scopes: string[], data?: unknown, signal?: AbortSignal): Promise<RequestInit> => {
-    const request: RequestInit = {
-        method: method,
-        signal: signal,
-        credentials: "include"
-    };
-
-    if (data) {
-        if (data instanceof FormData)
-            request.body = data;
-        else
-            request.body = JSON.stringify(data);
-    }
-    
-    if (data instanceof FormData)
-        request.headers = {
-            "Authorization": `Bearer ${await getAccessToken(scopes)}`
-        };
-    else {
-        request.headers = {
-            "Content-Type": "application/json",
-            "Authorization": `Bearer ${await getAccessToken(scopes)}`
-        };
-    }
-
-    return request;
-};

package/src/utils/FormUtils.ts

@@ -1,22 +0,0 @@
-import { AnyFieldApi } from "@tanstack/react-form";
-
-export type FormOmittedProps =
-    "name" |
-    "value" |
-    "onChange" |
-    "onBlur" |
-    "error" |
-    "helperText" |
-    "renderInput" |
-    "type" |
-    "aria-label";
-
-export const getFieldStatus = (field: AnyFieldApi) => {
-    const { meta } = field.state;
-
-    const isTouched = meta.isTouched;
-    const hasError = !!meta.errors?.length;
-    const helperText = meta.errors?.[0]?.message;
-
-    return { isTouched, hasError, helperText };
-}

package/src/utils/Helpers.ts

@@ -1,27 +0,0 @@
-import { uuidv7 as newGuid } from "uuidv7";
-
-type Environment = "qas" | "dev" | "prd" | "localhost";
-
-export const environment: Environment = (() => {
-    if (window.location.href.includes("localhost")) return "localhost";
-    else if (window.location.href.includes("dev")) return "dev";
-    else if (window.location.href.includes("qas")) return "qas";
-    else return "prd";
-})();
-
-export { newGuid };
-
-export class Platform {
-    static readonly isAndroid = /android/i.test(navigator.userAgent);
-    static readonly isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
-    static readonly isWindows = /windows/i.test(navigator.userAgent);
-    static readonly isMacOS = /Macintosh|MacIntel|MacPPC|Mac68K/.test(navigator.userAgent);
-}
-
-export const getContrastTextColor = (color: string) => {
-    const r = parseInt(color.substring(1, 3), 16);
-    const g = parseInt(color.substring(3, 5), 16);
-    const b = parseInt(color.substring(5, 7), 16);
-    const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
-    return (yiq >= 128) ? "black" : "white";
-};