Feat: added type declarations

package.json

@@ -4,19 +4,23 @@
   "description": "React UI library to design and render seat layouts",
   "main": "dist/index.js",
   "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "private": false,
   "exports": {
     ".": "./dist/index.js",
-    "./styles": "./dist/index.css"
+    "./styles": "./dist/index.css",
+    "./types": "./dist/types/index.d.ts"
   },
   "scripts": {
-    "build": "bun run ./esbuild.config.js && bun build:css",
+    "build": "bun run ./esbuild.config.js",
     "build:css": "bunx tailwindcss -i src/styles/index.css -o ./dist/index.css --minify",
+    "build:types": "bunx tsc --project ./tsconfig.declaration.json && tsc-alias --project ./tsconfig.declaration.json && cd dist && ls -d */ | grep -v 'types' | xargs rm -rf",
     "bump-version": "bunx --bun automatic-versioning --disable-auto-sync --recursive $(if [ \"$TAG\" != \"latest\" ]; then echo --prerelease; fi) --prerelease-branch=development --prerelease-tag=$TAG --name=@mezh-hq/react-seat-toolkit --ignore-prefixes=ci",
     "format": "bunx prettier --write --cache \"**/*.{js,jsx,ts,tsx,md,css,yml}\"",
     "lint": "bun run --bun eslint . --ext js,jsx,ts,tsx,mdx --ignore-path .gitignore --fix --cache --report-unused-disable-directives",
     "storybook": "NODE_ENV=storybook storybook dev -p 6006",
     "build-storybook": "storybook build",
+    "postbuild": "bun build:css & bun build:types",
     "postinstall": "patch-package",
     "prepare": "lefthook install",
     "release": "bunx github:akalanka47000/bunpublish --tag=${TAG:=latest} --provenance",
@@ -108,6 +112,7 @@
     "storybook-addon-react-router-v6": "1.0.2",
     "tailwindcss": "3.4.1",
     "tailwindcss-animate": "1.0.6",
+    "tsc-alias": "1.8.8",
     "vite": "4.3.9"
   },
   "overrides": {

src/components/controls/select/seats/index.tsx

@@ -1,8 +1,9 @@
 import { useSelector } from "react-redux";
 import { Label, RadioGroup, RadioGroupItem } from "@/components/core";
-import { SeatStatus, dataAttributes, seatStatusColors } from "@/constants";
+import { dataAttributes, seatStatusColors } from "@/constants";
 import { store } from "@/store";
 import { updateSeat } from "@/store/reducers/editor";
+import { SeatStatus } from "@/types/elements";
 import { d3Extended } from "@/utils";
 import { default as ControlInput } from "../../control-input";
 import { default as Categorizer } from "./categorizer";

src/components/index.tsx

@@ -1,6 +1,5 @@
-import { STKMode } from "@/constants";
 import { useEvents, useInteractions } from "@/hooks";
-import type { ISTKProps } from "@/types";
+import { type ISTKProps, STKMode } from "@/types";
 import { default as Controls } from "./controls";
 import { default as Footer } from "./footer";
 import { default as Operations } from "./operations";

src/components/operations/index.jsx

@@ -28,7 +28,9 @@ const Operations = () => {
   };
 
   const onExportJson = () => {
-    console.log(stateToJSON());
+    const json = stateToJSON();
+    console.log(json);
+    navigator.clipboard.writeText(JSON.stringify(json));
   };
 
   return (

src/components/workspace/elements/booth.jsx → src/components/workspace/elements/booth.tsx

@@ -2,7 +2,7 @@ import { forwardRef } from "react";
 
 export const boothSize = 39;
 
-const Booth = forwardRef(({ id, x, y, ...props }, ref) => {
+const Booth: React.FC<any> = forwardRef(({ id, x, y, ...props }, ref: any) => {
   return <rect ref={ref} id={id} x={x} y={y} width={boothSize} height={boothSize} rx={5} ry={5} {...props} />;
 });
 

src/components/workspace/elements/image.jsx → src/components/workspace/elements/image.tsx

@@ -1,7 +1,7 @@
 import { forwardRef } from "react";
 import { twMerge } from "tailwind-merge";
 
-const Image = forwardRef(({ x, y, id, href, width, height, ...props }, ref) => {
+const Image: React.FC<any> = forwardRef(({ x, y, id, href, width, height, ...props }, ref: any) => {
   return (
     <image
       ref={ref}

src/components/workspace/elements/index.tsx

@@ -2,9 +2,10 @@ import { memo, useEffect, useMemo, useRef } from "react";
 import * as d3 from "d3";
 import { isEqual } from "lodash";
 import { twMerge } from "tailwind-merge";
-import { STKMode, dataAttributes } from "@/constants";
+import { dataAttributes } from "@/constants";
 import { store } from "@/store";
 import { clearAndSelectElements, deselectElement, selectElement } from "@/store/reducers/editor";
+import { STKMode } from "@/types";
 import { d3Extended } from "@/utils";
 import { Tool } from "../../toolbar/data";
 import {

src/components/workspace/elements/polyline.jsx → src/components/workspace/elements/polyline.tsx

@@ -2,7 +2,7 @@ import { forwardRef } from "react";
 import { twMerge } from "tailwind-merge";
 import { dataAttributes } from "@/constants";
 
-const Polyline = forwardRef(({ id, points, color, stroke, section, ...props }, ref) => {
+const Polyline: React.FC<any> = forwardRef(({ id, points, color, stroke, section, ...props }, ref: any) => {
   return (
     <polyline
       ref={ref}

src/components/workspace/elements/seat.jsx → src/components/workspace/elements/seat.tsx

@@ -1,14 +1,15 @@
 import { forwardRef, useEffect, useMemo } from "react";
 import { twMerge } from "tailwind-merge";
-import { SeatStatus, dataAttributes, seatStatusColors } from "@/constants";
+import { dataAttributes, seatStatusColors } from "@/constants";
+import { SeatStatus } from "@/types/elements";
 import { d3Extended } from "@/utils";
 
 export const seatSize = 28;
 
 export const seatLabelFontSize = seatSize / 3;
 
-const Seat = forwardRef(
-  ({ x, y, id, label, categories, category, status, onClick, options, element, ...props }, ref) => {
+const Seat: React.FC<any> = forwardRef(
+  ({ x, y, id, label, categories, category, status, onClick, options, element, ...props }, ref: any) => {
     const categoryObject = useMemo(() => categories?.find?.((c) => c.id === category), [categories, category]);
 
     const textX = useMemo(() => {

src/components/workspace/elements/shape.jsx → src/components/workspace/elements/shape.tsx

@@ -11,8 +11,8 @@ export const resizableRectangle = {
   height: 100
 };
 
-const Shape = forwardRef(
-  ({ x, y, id, name, width, height, rx, resizable, className, stroke, color, ...props }, ref) => {
+const Shape: React.FC<any> = forwardRef(
+  ({ x, y, id, name, width, height, rx, resizable, className, stroke, color, ...props }, ref: any) => {
     if (name === "RectangleHorizontal") {
       return (
         <rect

src/components/workspace/elements/text.jsx → src/components/workspace/elements/text.tsx

@@ -2,8 +2,8 @@ import { forwardRef } from "react";
 
 export const textFontSize = 35;
 
-const Text = forwardRef(
-  ({ x, y, id, label, fontSize = textFontSize, fontWeight = 200, letterSpacing = 3, color, ...props }, ref) => {
+const Text: React.FC<any> = forwardRef(
+  ({ x, y, id, label, fontSize = textFontSize, fontWeight = 200, letterSpacing = 3, color, ...props }, ref: any) => {
     return (
       <text
         ref={ref}

src/components/workspace/index.tsx

@@ -1,9 +1,9 @@
 import { useCallback, useLayoutEffect } from "react";
 import { useSelector } from "react-redux";
-import { STKMode, ids } from "@/constants";
+import { ids } from "@/constants";
 import { store } from "@/store";
 import { initializeElements, sync } from "@/store/reducers/editor";
-import type { ISTKProps } from "@/types";
+import { type ISTKProps, STKMode } from "@/types";
 import { Tool, tools } from "../toolbar/data";
 import { default as Crosshairs } from "./crosshairs";
 import { default as Element, ElementType } from "./elements";

src/constants/index.ts

@@ -1,3 +1,5 @@
+import { SeatStatus } from "@/types/elements";
+
 export const ids = {
   controls: "stk-controls",
   crosshairs: "stk-crosshairs",
@@ -26,12 +28,6 @@ export const dataAttributes = {
   section: "data-section"
 };
 
-export enum SeatStatus {
-  Available = "Available",
-  Unavailable = "Unavailable",
-  Reserved = "Reserved"
-}
-
 export const seatStatusColors = {
   [SeatStatus.Available]: {
     background: "#ffffff",
@@ -46,8 +42,3 @@ export const seatStatusColors = {
     label: "#ffffff"
   }
 };
-
-export enum STKMode {
-  Designer = "designer",
-  User = "user"
-}

src/hooks/events/workspace-click.ts

@@ -6,7 +6,7 @@ import { Tool } from "@/components/toolbar/data";
 import { ElementType } from "@/components/workspace/elements";
 import { boothSize } from "@/components/workspace/elements/booth";
 import { resizableRectangle, shapeSize } from "@/components/workspace/elements/shape";
-import { SeatStatus, dataAttributes, ids } from "@/constants";
+import { dataAttributes, ids } from "@/constants";
 import { store } from "@/store";
 import {
   addBooth,
@@ -25,6 +25,7 @@ import {
   setSelectedPolylineId
 } from "@/store/reducers/editor";
 import { selectTool } from "@/store/reducers/toolbar";
+import { SeatStatus } from "@/types/elements";
 import { calculateDistance, getRelativeClickCoordsWithTransform } from "@/utils";
 
 const useWorkspaceClick = () => {

src/store/index.ts

@@ -1,4 +1,4 @@
-import { configureStore } from "@reduxjs/toolkit";
+import { EnhancedStore, configureStore } from "@reduxjs/toolkit";
 import type { StoreEnhancer } from "redux";
 import { default as rootReducer } from "./reducers";
 
@@ -11,7 +11,7 @@ if (storybook) {
   withReduxEnhancer = (await import("@dreamworld/addon-redux")).enhancer;
 }
 
-export function makeStore() {
+function makeStore() {
   return configureStore({
     devTools: storybook,
     reducer: rootReducer,
@@ -32,6 +32,6 @@ export function makeStore() {
   });
 }
 
-export const store = makeStore();
+export const store: EnhancedStore = makeStore();
 
-export default { store };
+export default store;

src/store/reducers/editor/index.ts

@@ -1,4 +1,4 @@
-import { createSlice } from "@reduxjs/toolkit";
+import { Reducer, createSlice } from "@reduxjs/toolkit";
 import { v4 as uuidv4 } from "uuid";
 import type { ISTKData } from "@/types";
 import booths from "./booths";
@@ -253,4 +253,4 @@ export const {
   sync
 } = slice.actions;
 
-export default slice.reducer;
+export default slice.reducer as Reducer<typeof initialState>;

src/store/reducers/index.ts

@@ -1,8 +1,8 @@
-import { combineReducers } from "@reduxjs/toolkit";
+import { Reducer, combineReducers } from "@reduxjs/toolkit";
 import editor from "./editor";
 import toolbar from "./toolbar";
 
 export default combineReducers({
   editor,
   toolbar
-});
+}) as Reducer;

src/store/reducers/toolbar.ts

@@ -1,4 +1,4 @@
-import { createSlice } from "@reduxjs/toolkit";
+import { Reducer, createSlice } from "@reduxjs/toolkit";
 import { Tool } from "@/components/toolbar/data";
 
 const initialState = {
@@ -20,4 +20,4 @@ export const slice = createSlice({
 
 export const { clearTool, selectTool } = slice.actions;
 
-export default slice.reducer;
+export default slice.reducer as Reducer<typeof initialState>;

src/stories/designer.stories.tsx

@@ -1,5 +1,5 @@
-import { STKMode } from "@/constants";
 import SeatToolkit from "@/index";
+import { STKMode } from "@/types";
 
 export default {
   title: "Designer Mode",

src/stories/user.stories.tsx

@@ -1,5 +1,5 @@
-import { STKMode } from "@/constants";
 import SeatToolkit from "@/index";
+import { STKMode } from "@/types";
 
 export default {
   title: "User Mode",

src/types/elements/seat.ts

@@ -1,5 +1,3 @@
-import { SeatStatus } from "@/constants";
-
 export interface ISeatCategory {
   id: string;
   name: string;
@@ -8,6 +6,12 @@ export interface ISeatCategory {
   cost: number;
 }
 
+export enum SeatStatus {
+  Available = "Available",
+  Unavailable = "Unavailable",
+  Reserved = "Reserved"
+}
+
 export interface ISeat {
   id: string;
   x: number;

src/types/index.ts

@@ -1,6 +1,12 @@
-import { STKMode } from "@/constants";
 import { IBooth, IImage, IPolyline, ISeat, ISeatCategory, ISection, IShape, IText } from "./elements";
 
+export * from "./elements";
+
+export enum STKMode {
+  Designer = "designer",
+  User = "user"
+}
+
 export interface IEvents {
   onSeatClick?: (seat: ISeat & { category?: ISeatCategory }) => void;
   onSectionClick?: (section: ISection) => void;

tsconfig.declaration.json

@@ -0,0 +1,12 @@
+{
+    "extends": "./tsconfig.json",
+    "exclude": [
+      "src/stories/**/*.ts",
+    ],
+    "compilerOptions": {
+      "declaration": true,
+      "declarationDir": "./dist",
+      "outDir": "./dist",
+      "emitDeclarationOnly": true
+    }
+  }

tsconfig.json

@@ -7,5 +7,7 @@
     "jsx": "react-jsx",
     "resolveJsonModule": true,
     "esModuleInterop": true,
+    "skipLibCheck": true,
+    "downlevelIteration": true,
   },
 }