JS Declaration File Fix (#768)

* switch to index.ts so tsc can generate index.d.ts * typo * 5.6.2 * 5.6.3-0 * example of fixing the index.js generation issue * Convert index.js -> index.ts * 5.6.3-1 * snackbar context retrun typed correctly * uninstall unwanted dependencies * 5.6.3-2 * OS agnostic clean --------- Co-authored-by: Matthew Corner <[email protected]> Co-authored-by: Manjesh M Pillai <[email protected]>
IPG-Automotive-UK · Nov 20, 2023 · 22fd53d · 22fd53d
1 parent a96caab
commit 22fd53d
Show file tree

Hide file tree

Showing 104 changed files with 823 additions and 572 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ipguk/react-ui",
-  "version": "5.6.1",
+  "version": "5.6.3-2",
   "description": "React UI component library for IPG web applications",
   "author": "IPG-Automotive-UK",
   "license": "MIT",
@@ -11,7 +11,7 @@
   },
   "scripts": {
     "build": "npm run clean && tsc && npm run copy-files",
-    "clean": "rm -rf dist",
+    "clean": "rimraf dist",
     "copy-files": "copyfiles -e '**/*.test.**' -e '**/*.spec.**' -e '**/*.stories.**' -u 1 src/**/*.html src/**/*.css src/**/*.ts src/**/*.tsx dist/",
     "postinstall": "npx playwright install --with-deps",
     "prepublishOnly": "npm run build",
@@ -93,6 +93,7 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.47.0",
     "react-text-mask": "^5.5.0",
+    "rimraf": "^5.0.5",
     "storybook": "^7.5.2",
     "storybook-dark-mode": "^3.0.1",
     "ts-jest": "^29.1.1",

diff --git a/src/Canvas/index.js b/src/Canvas/index.js
diff --git a/src/Canvas/index.d.ts → src/Canvas/index.ts b/src/Canvas/index.d.ts → src/Canvas/index.ts
@@ -1,5 +1,7 @@
 import { SxProps, Theme } from "@mui/material/styles";
 
+import Canvas from "./Canvas";
+
 export type CanvasProps = {
   backgroundColor?: string;
   backgroundImage?: string;
@@ -31,6 +33,4 @@ export type CanvasProps = {
   width?: number;
 };
 
-declare const Canvas: React.FC<CanvasProps>;
-
-export default Canvas;
+export default Canvas as React.FC<CanvasProps>;
diff --git a/src/CanvasItem/CanvasItem.jsx b/src/CanvasItem/CanvasItem.jsx
@@ -2,7 +2,6 @@ import * as React from "react";
 
 import { centerToTL, degToRadian, getNewStyle, tLToCenter } from "./utils";
 
-import PropTypes from "prop-types";
 import Rect from "./Rect";
 
 /**
@@ -145,115 +144,3 @@ export default function CanvasItem({
     </Rect>
   );
 }
-
-CanvasItem.propTypes = {
-  /**
-   * Aspect ratio of the item. If set, the item will be resized to keep the aspect ratio when resizing. If not set, the item will be resized freely.
-   */
-  aspectRatio: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
-
-  /**
-   * The height of the item.
-   */
-  height: PropTypes.number.isRequired,
-
-  /**
-   * The left position of the item.
-   */
-  left: PropTypes.number.isRequired,
-
-  /**
-   * The minimum height of the item.
-   */
-  minHeight: PropTypes.number,
-  /**
-   * The minimum width of the item.
-   */
-  minWidth: PropTypes.number,
-  /**
-   * Callback function when the item is clicked.
-   *
-   * **Signature**
-   *
-   * ```
-   * function(event: ReactMouseEvent<HTMLDivElement>) => void
-   * ```
-   * event: The event source of the callback.
-   */
-  onClick: PropTypes.func,
-  /**
-   * Callback function when the item is dragged.
-   *
-   * **Signature**
-   *
-   * ```
-   * function(top: number, left: number) => void
-   * ```
-   *
-   * top: The new top position of the item.
-   *
-   * left: The new left position of the item.
-   */
-  onDrag: PropTypes.func,
-  /**
-   * Callback function when the item is resized.
-   *
-   * **Signature**
-   * ```
-   * function({top: number, left: number, width: number, height: number, rotateAngle: number}, isShiftKey: boolean, type: string) => void
-   * ```
-   *
-   * top: The new top position of the item.
-   *
-   * left: The new left position of the item.
-   *
-   * width: The new width of the item.
-   *
-   * height: The new height of the item.
-   *
-   * rotateAngle: The new rotate angle of the item.
-   *
-   * isShiftKey: Whether the shift key is pressed.
-   *
-   * type: The type of the resize handle.
-   */
-  onResize: PropTypes.func,
-  /**
-   * Callback function when the item is rotated.
-   *
-   * **Signature**
-   *
-   * ```
-   * function(rotateAngle: number) => void
-   * ```
-   *
-   * rotateAngle: The new rotate angle of the item.
-   */
-  onRotate: PropTypes.func,
-  /**
-   * The allowable resize directions of the item. Array of 'n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw'.
-   */
-  resizeDirection: PropTypes.arrayOf(
-    PropTypes.oneOf(["n", "ne", "e", "se", "s", "sw", "w", "nw"])
-  ),
-  /**
-   * The rotation angle of the item.
-   */
-  rotateAngle: PropTypes.number,
-  /**
-   * Defines whether the item is selected. When the item is selected, the resize and rotate handles will be shown.
-   */
-  selected: PropTypes.bool,
-  /**
-   * The top position of the item.
-   */
-  top: PropTypes.number.isRequired,
-  /**
-   * The width of the item.
-   */
-  width: PropTypes.number.isRequired,
-  /**
-   * Z-index of the rectangle
-   */
-  zIndex: PropTypes.number
-};
diff --git a/src/CanvasItem/index.d.ts b/src/CanvasItem/index.d.ts
diff --git a/src/CanvasItem/index.js b/src/CanvasItem/index.js
diff --git a/src/CanvasItem/index.ts b/src/CanvasItem/index.ts
@@ -0,0 +1,126 @@
+import CanvasItem from "./CanvasItem";
+
+export type CanvasItemProps = {
+  /**
+   * Aspect ratio of the item. If set, the item will be resized to keep the aspect ratio when resizing. If not set, the item will be resized freely.
+   */
+  aspectRatio?: number | boolean;
+  /**
+   * The height of the item.
+   */
+  height: number;
+  /**
+   * The left position of the item.
+   */
+  left: number;
+  /**
+   * The minimum height of the item.
+   */
+  minHeight?: number;
+  /**
+   * The minimum width of the item.
+   */
+  minWidth?: number;
+  /**
+   * Callback function when the item is clicked.
+   *
+   * **Signature**
+   *
+   * ```
+   * function(event: ReactMouseEvent<HTMLDivElement>) => void
+   * ```
+   * event: The event source of the callback.
+   */
+  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+  /**
+   * Callback function when the item is dragged.
+   *
+   * **Signature**
+   *
+   * ```
+   * function(top: number, left: number) => void
+   * ```
+   *
+   * top: The new top position of the item.
+   *
+   * left: The new left position of the item.
+   */
+  onDrag?: (top: number, left: number) => void;
+  /**
+   * Callback function when the item is resized.
+   *
+   * **Signature**
+   * ```
+   * function({top: number, left: number, width: number, height: number, rotateAngle: number}, isShiftKey: boolean, type: string) => void
+   * ```
+   *
+   * top: The new top position of the item.
+   *
+   * left: The new left position of the item.
+   *
+   * width: The new width of the item.
+   *
+   * height: The new height of the item.
+   *
+   * rotateAngle: The new rotate angle of the item.
+   *
+   * isShiftKey: Whether the shift key is pressed.
+   *
+   * type: The type of the resize handle.
+   */
+  onResize?: ({
+    top,
+    left,
+    width,
+    height,
+    rotateAngle,
+    isShiftKey,
+    type
+  }: {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+    rotateAngle: number;
+    isShiftKey: boolean;
+    type: string;
+  }) => void;
+  /**
+   * Callback function when the item is rotated.
+   *
+   * **Signature**
+   *
+   * ```
+   * function(rotateAngle: number) => void
+   * ```
+   *
+   * rotateAngle: The new rotate angle of the item.
+   */
+  onRotate?: (rotateAngle: number) => void;
+  /**
+   * The allowable resize directions of the item. Array of 'n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw'.
+   */
+  resizeDirection?: "n" | "ne" | "e" | "se" | "s" | "sw" | "w" | "nw"[];
+  /**
+   * The rotation angle of the item.
+   */
+  rotateAngle?: number;
+  /**
+   * Defines whether the item is selected. When the item is selected, the resize and rotate handles will be shown.
+   */
+  selected?: boolean;
+  /**
+   * The top position of the item.
+   */
+  top: number;
+  /**
+   * The width of the item.
+   */
+  width: number;
+  /**
+   * Z-index of the rectangle
+   */
+  zIndex?: number;
+};
+
+export default CanvasItem as React.FC<CanvasItemProps>;
diff --git a/src/Card/TableCard/index.js b/src/Card/TableCard/index.js
diff --git a/src/Card/TableCard/index.d.ts → src/Card/TableCard/index.ts b/src/Card/TableCard/index.d.ts → src/Card/TableCard/index.ts
@@ -1,9 +1,9 @@
+import TableCard from "./TableCard";
+
 export type TableCardProps = {
   action?: React.ReactNode;
   tableContent?: [string, string | React.ReactNode][];
   title?: string;
 };
 
-declare const TableCard: React.FC<TableCardProps>;
-
-export default TableCard;
+export default TableCard as React.FC<TableCardProps>;
diff --git a/src/Card/index.d.ts b/src/Card/index.d.ts
diff --git a/src/Checkbox/index.js b/src/Checkbox/index.js
diff --git a/src/Checkbox/index.d.ts → src/Checkbox/index.ts b/src/Checkbox/index.d.ts → src/Checkbox/index.ts
@@ -1,3 +1,5 @@
+import Checkbox from "./Checkbox";
+
 export type CheckboxProps = {
   checked?: boolean;
   disabled?: boolean;
@@ -7,6 +9,4 @@ export type CheckboxProps = {
   style?: React.CSSProperties;
 };
 
-declare const Checkbox: React.FC<CheckboxProps>;
-
-export default Checkbox;
+export default Checkbox as React.FC<CheckboxProps>;
diff --git a/src/Color/index.js b/src/Color/index.js
diff --git a/src/Color/index.d.ts → src/Color/index.ts b/src/Color/index.d.ts → src/Color/index.ts
@@ -1,3 +1,5 @@
+import Color from "./Color";
+
 export type ColorProps = {
   onChange?: (color: string) => void;
   showControls?: boolean;
@@ -6,6 +8,4 @@ export type ColorProps = {
   value?: string;
 };
 
-declare const Color: React.FC<ColorProps>;
-
-export default Color;
+export default Color as React.FC<ColorProps>;
diff --git a/src/Copyright/index.d.ts b/src/Copyright/index.d.ts
diff --git a/src/Copyright/index.js b/src/Copyright/index.js
diff --git a/src/Copyright/index.ts b/src/Copyright/index.ts
@@ -0,0 +1,5 @@
+import Copyright from "./Copyright";
+
+export type CopyrightProps = {};
+
+export default Copyright as React.FC<CopyrightProps>;
diff --git a/src/DialogTitle/index.js b/src/DialogTitle/index.js