@itwin/reports-config-widget-react 0.0.1

package/src/widget/components/utils.tsx

@@ -0,0 +1,159 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import { SvgChevronLeft } from "@itwin/itwinui-icons-react";
+import {
+  IconButton,
+  ProgressRadial,
+  Text,
+  toaster,
+} from "@itwin/itwinui-react";
+import "./utils.scss";
+import React from "react";
+import { ReportsConfigWidget } from "../../ReportsConfigWidget";
+
+export interface WidgetHeaderProps {
+  title: string;
+  disabled?: boolean;
+  returnFn?: () => Promise<void>;
+}
+
+export const WidgetHeader = ({
+  title,
+  disabled = false,
+  returnFn,
+}: WidgetHeaderProps) => {
+  return (
+    <div className="rcw-widget-header-container">
+      {returnFn && (
+        <IconButton
+          onClick={returnFn}
+          disabled={disabled}
+          styleType="borderless"
+        >
+          <SvgChevronLeft />
+        </IconButton>
+      )}
+      <Text className="title" variant="title">
+        {title}
+      </Text>
+    </div>
+  );
+};
+
+export const handleError = (errorStatus: number) => {
+  let errorMessage = `${ReportsConfigWidget.localization.getLocalizedString(
+    "ReportsConfigWidget:ErrorMessages.Error"
+  )} `;
+  switch (errorStatus) {
+    case 401:
+      errorMessage += ReportsConfigWidget.localization.getLocalizedString(
+        "ReportsConfigWidget:ErrorMessages.401"
+      );
+      break;
+    case 403:
+      errorMessage += ReportsConfigWidget.localization.getLocalizedString(
+        "ReportsConfigWidget:ErrorMessages.403"
+      );
+      break;
+    case 404:
+      errorMessage += ReportsConfigWidget.localization.getLocalizedString(
+        "ReportsConfigWidget:ErrorMessages.404"
+      );
+      break;
+    case 409:
+      errorMessage += ReportsConfigWidget.localization.getLocalizedString(
+        "ReportsConfigWidget:ErrorMessages.409"
+      );
+      break;
+    case 422:
+      errorMessage += ReportsConfigWidget.localization.getLocalizedString(
+        "ReportsConfigWidget:ErrorMessages.422"
+      );
+      break;
+    case 429:
+      errorMessage += ReportsConfigWidget.localization.getLocalizedString(
+        "ReportsConfigWidget:ErrorMessages.429"
+      );
+      break;
+    case 500:
+      errorMessage += ReportsConfigWidget.localization.getLocalizedString(
+        "ReportsConfigWidget:ErrorMessages.500"
+      );
+      break;
+    case 502:
+      errorMessage += ReportsConfigWidget.localization.getLocalizedString(
+        "ReportsConfigWidget:ErrorMessages.502"
+      );
+      break;
+    case 503:
+      errorMessage += ReportsConfigWidget.localization.getLocalizedString(
+        "ReportsConfigWidget:ErrorMessages.503"
+      );
+      break;
+    default:
+      errorMessage += ReportsConfigWidget.localization.getLocalizedString(
+        "ReportsConfigWidget:ErrorMessages.SomethingWentWrong"
+      );
+  }
+  toaster.negative(errorMessage);
+};
+
+export const LoadingOverlay = () => (
+  <div className="rcw-center-overlay">
+    <Text>
+      {ReportsConfigWidget.localization.getLocalizedString(
+        "ReportsConfigWidget:Loading"
+      )}
+    </Text>
+    <ProgressRadial indeterminate />
+    <Text>
+      {ReportsConfigWidget.localization.getLocalizedString(
+        "ReportsConfigWidget:PleaseWait"
+      )}
+    </Text>
+  </div>
+);
+interface EmptyMessageProps {
+  children?: React.ReactNode;
+}
+export const EmptyMessage = ({ children }: EmptyMessageProps) => {
+  return <div className="rcw-center-overlay">{children}</div>;
+};
+
+export const handleInputChange = <T,>(
+  e: React.ChangeEvent<HTMLInputElement>,
+  values: T,
+  setValues: React.Dispatch<React.SetStateAction<T>>
+) => {
+  const { name, value } = e.target;
+
+  setValues({
+    ...values,
+    [name]: value,
+  });
+};
+
+export const LoadingSpinner = () => {
+  return (
+    <div
+      className="rcw-loading-spinner"
+      data-testid="rcw-action-loading-spinner"
+    >
+      <ProgressRadial size="small" indeterminate />
+    </div>
+  );
+};
+
+export const SkeletonBlock = () => (
+  <div className="rcw-skeleton-block iui-skeleton" />
+);
+
+export const generateUrl = (baseUrl: string, newBaseUrl: string) => {
+  return baseUrl.replace("https://api.bentley.com", newBaseUrl);
+};
+
+export type CreateTypeFromInterface<Interface> = {
+  [Property in keyof Interface]: Interface[Property];
+};

package/src/widget/context/ReportsApiConfigContext.tsx

@@ -0,0 +1,27 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import type { AccessToken } from "@itwin/core-bentley";
+import * as React from "react";
+import { createContext } from "react";
+
+export interface ReportsApiConfig {
+  getAccessToken: () => Promise<AccessToken>;
+  baseUrl: string;
+}
+
+export const ReportsApiConfigContext = createContext<ReportsApiConfig>({
+  getAccessToken: async () => "",
+  baseUrl: "",
+});
+
+export const useReportsApiConfig = () => {
+  const context = React.useContext(ReportsApiConfigContext);
+  if (!context) {
+    throw new Error(
+      "useApiConfig should be used within a ReportsApiConfigContext provider"
+    );
+  }
+  return context;
+};

package/src/widget/hooks/useValidator.ts

@@ -0,0 +1,70 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import { useState } from "react";
+import SimpleReactValidator from "simple-react-validator";
+import { ReportsConfigWidget } from "../../ReportsConfigWidget";
+
+export const NAME_REQUIREMENTS =
+  "required|NoDuplicateUnderscore|OnlyBeginsWithLetterOrUnderscore|FollowedByLettersUnderscoresSpacesAndDigits|CharLimit";
+
+const useValidator = (): [
+  SimpleReactValidator,
+  React.Dispatch<React.SetStateAction<boolean>>
+] => {
+  const [show, setShow] = useState(false);
+  const customValidator = {
+    NoDuplicateUnderscore: {
+      message: ReportsConfigWidget.localization.getLocalizedString(
+        "ReportsConfigWidget:Validators.NoDuplicateUnderscore"
+      ),
+      rule: (val: string) => {
+        return !val.match(/__+/i);
+      },
+    },
+    OnlyBeginsWithLetterOrUnderscore: {
+      message: ReportsConfigWidget.localization.getLocalizedString(
+        "ReportsConfigWidget:Validators.OnlyBeginsWithLetterOrUnderscore"
+      ),
+      rule: (val: string) => {
+        return !val.match(/^[\W\d]+/i);
+      },
+    },
+    FollowedByLettersUnderscoresSpacesAndDigits: {
+      message: ReportsConfigWidget.localization.getLocalizedString(
+        "ReportsConfigWidget:Validators.FollowedByLettersUnderscoresSpacesAndDigits"
+      ),
+      rule: (val: string) => {
+        return !val.match(/[^a-zA-Z0-9_\s]+/i);
+      },
+    },
+    CharLimit: {
+      message: ReportsConfigWidget.localization.getLocalizedString(
+        "ReportsConfigWidget:Validators.CharLimit"
+      ),
+      rule: (val: string) => {
+        return val.length <= 128;
+      },
+    },
+  };
+
+  const customMessages = {
+    required: ReportsConfigWidget.localization.getLocalizedString(
+      "ReportsConfigWidget:Validators.ThisFieldIsRequired"
+    ),
+  };
+
+  const validator = new SimpleReactValidator({
+    messages: customMessages,
+    validators: customValidator,
+  });
+
+  if (show) {
+    validator.showMessages();
+  }
+
+  return [validator, setShow];
+};
+
+export default useValidator;

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./node_modules/@itwin/build-tools/tsconfig-base.json",
+  "compilerOptions": {
+    "skipLibCheck": true,
+    "jsx": "react",
+    "preserveSymlinks": true,
+    "esModuleInterop": true,
+  },
+  "include": ["./src/**/*.ts*"],
+  "exclude": ["lib", "node_modules"]
+}