From b99f5a801417304512f53d8aa5a3e5e497b81d2e Mon Sep 17 00:00:00 2001
From: Kai Spencer <51139521+KaiSpencer@users.noreply.github.com>
Date: Sun, 31 Dec 2023 12:48:16 +0000
Subject: [PATCH] Replace Rome with Biome (#31)

---
 .changeset/config.json                        |  18 +-
 .vscode/settings.json                         |  20 +-
 apps/cypress-testing/cypress.config.ts        |  36 +-
 .../cypress/component/CardBehaviour.cy.tsx    | 128 +++---
 .../cypress/component/ComponentName.cy.tsx    |  43 +-
 .../cypress/component/CustomCard.cy.tsx       | 394 +++++++++---------
 .../cypress/fixtures/data.json                | 262 ++++++------
 .../cypress/support/component.ts              |  10 +-
 apps/cypress-testing/src/App.tsx              |   6 +-
 apps/cypress-testing/src/main.tsx             |  16 +-
 apps/cypress-testing/tsconfig.node.json       |  14 +-
 apps/cypress-testing/vite.config.ts           |  10 +-
 apps/docs/babel.config.js                     |   2 +-
 apps/docs/docusaurus.config.js                | 222 +++++-----
 apps/docs/sidebars.js                         |   8 +-
 .../src/components/HomepageFeatures/index.tsx | 110 ++---
 apps/docs/src/pages/index.tsx                 |  70 ++--
 biome.json                                    |  19 +
 package.json                                  |  35 +-
 packages/react-trello-ts/.babelrc             |  47 ++-
 packages/react-trello-ts/.prettierrc          |  11 -
 .../react-trello-ts/.storybook/preview.js     |   2 +-
 packages/react-trello-ts/bower.json           |  29 +-
 packages/react-trello-ts/package.json         |   3 +-
 .../src/components/AddCardLink.tsx            |  23 +-
 .../react-trello-ts/src/components/Card.tsx   |  25 +-
 .../src/components/Card/Tag.tsx               |   2 +-
 .../src/components/Lane/LaneHeader.tsx        |  10 +-
 .../components/Lane/LaneHeader/LaneMenu.tsx   |  12 +-
 .../src/components/NewCardForm.tsx            |   4 +-
 .../src/components/NewLaneForm.tsx            |  10 +-
 .../src/components/NewLaneSection.tsx         |   2 +-
 .../react-trello-ts/src/components/index.ts   |  16 +-
 .../react-trello-ts/src/controllers/Board.tsx |  10 +-
 .../src/controllers/BoardContainer.tsx        |  10 +-
 .../react-trello-ts/src/controllers/Lane.tsx  |  16 +-
 .../react-trello-ts/src/dnd/Container.tsx     |  11 +-
 .../react-trello-ts/src/dnd/Draggable.tsx     |  37 +-
 .../src/helpers/createTranslate.ts            |  20 +-
 .../src/helpers/deprecationWarnings.ts        |  10 +-
 packages/react-trello-ts/src/index.tsx        |   8 +-
 .../src/locales/en/translation.json           |  28 +-
 .../src/locales/ru/translation.json           |  28 +-
 packages/react-trello-ts/src/store/store.ts   |   3 +-
 .../react-trello-ts/src/store/useBoard.ts     |   2 +-
 packages/react-trello-ts/src/styles/Base.ts   |   4 +-
 .../src/widgets/DeleteButton.tsx              |   4 +-
 .../src/widgets/EditableLabel.tsx             |   2 +-
 .../src/widgets/InlineInput.tsx               | 176 ++++----
 .../src/widgets/NewLaneTitleEditor.tsx        |   2 +-
 .../stories/AsyncLoad.story.tsx               |   2 +-
 .../react-trello-ts/stories/Base.story.tsx    |   6 +-
 .../stories/CollapsibleLanes.story.tsx        |   2 +-
 .../stories/CustomAddCardLink.story.tsx       |  28 +-
 .../stories/CustomCard.story.tsx              |  10 +-
 .../stories/CustomCardWithDrag.story.tsx      |   4 +-
 .../stories/CustomLaneFooter.story.tsx        |   4 +-
 .../stories/CustomLaneHeader.story.tsx        |  10 +-
 .../stories/CustomNewCardForm.story.tsx       |   8 +-
 .../stories/CustomNewLaneForm.story.tsx       |   2 +-
 .../stories/CustomNewLaneSection.story.tsx    |   2 +-
 .../stories/Deprecations.story.tsx            |   4 +-
 .../stories/DragDrop.story.tsx                |   2 +-
 .../stories/EditableBoard.story.tsx           |   2 +-
 .../react-trello-ts/stories/I18n.story.tsx    |   4 +-
 .../stories/Interactions.story.tsx            |   2 +-
 .../stories/MultipleBoards.story.tsx          |   2 +-
 .../stories/Pagination.story.tsx              |  10 +-
 .../stories/PaginationAndEvents.story.tsx     |  12 +-
 .../stories/Realtime.story.tsx                |  36 +-
 .../stories/RestrictedLanes.story.tsx         |   2 +-
 .../react-trello-ts/stories/Sort.story.tsx    |   2 +-
 .../react-trello-ts/stories/Styling.story.tsx |   6 +-
 .../react-trello-ts/stories/Tags.story.tsx    |   2 +-
 .../react-trello-ts/stories/data/base.json    | 262 ++++++------
 .../stories/data/board_with_custom_width.json | 339 ++++++++-------
 .../stories/data/collapsible.json             | 262 ++++++------
 .../stories/data/data-sort.json               |  99 +++--
 .../stories/data/drag-drop.json               | 110 ++---
 .../stories/data/other-board.json             | 108 ++---
 packages/react-trello-ts/stories/index.ts     |  32 +-
 .../__snapshots__/Storyshots.test.ts.snap     |   4 +
 pnpm-lock.yaml                                | 149 ++++---
 rome.json                                     |   8 -
 turbo.json                                    |  52 +--
 85 files changed, 1834 insertions(+), 1745 deletions(-)
 create mode 100644 biome.json
 delete mode 100644 packages/react-trello-ts/.prettierrc
 delete mode 100644 rome.json

diff --git a/.changeset/config.json b/.changeset/config.json
index 5c7be33..a4216f0 100644
--- a/.changeset/config.json
+++ b/.changeset/config.json
@@ -1,11 +1,11 @@
 {
-  "$schema": "https://unpkg.com/@changesets/config@2.3.0/schema.json",
-  "changelog": "@changesets/cli/changelog",
-  "commit": false,
-  "fixed": [],
-  "linked": [],
-  "access": "public",
-  "baseBranch": "main",
-  "updateInternalDependencies": "patch",
-  "ignore": ["cypress-testing"]
+	"$schema": "https://unpkg.com/@changesets/config@2.3.0/schema.json",
+	"changelog": "@changesets/cli/changelog",
+	"commit": false,
+	"fixed": [],
+	"linked": [],
+	"access": "public",
+	"baseBranch": "main",
+	"updateInternalDependencies": "patch",
+	"ignore": ["cypress-testing"]
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 55712c1..afa1c1d 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,19 @@
 {
-    "typescript.tsdk": "node_modules/typescript/lib"
-}
\ No newline at end of file
+	"typescript.tsdk": "node_modules/typescript/lib",
+	"editor.defaultFormatter": "biomejs.biome",
+
+	"editor.formatOnSave": true,
+	"prettier.enable": false,
+	"[typescriptreact]": {
+		"editor.defaultFormatter": "biomejs.biome"
+	},
+	"[typescript]": {
+		"editor.defaultFormatter": "biomejs.biome"
+	},
+	"[javascript]": {
+		"editor.defaultFormatter": "biomejs.biome"
+	},
+	"[json]": {
+		"editor.defaultFormatter": "biomejs.biome"
+	}
+}
diff --git a/apps/cypress-testing/cypress.config.ts b/apps/cypress-testing/cypress.config.ts
index 918b6bf..592a647 100644
--- a/apps/cypress-testing/cypress.config.ts
+++ b/apps/cypress-testing/cypress.config.ts
@@ -1,21 +1,21 @@
 import { defineConfig } from "cypress";
 export default defineConfig({
-  video: false,
-  component: {
-    viewportWidth: 1000,
-    viewportHeight: 500,
-    devServer: {
-      framework: "react",
-      bundler: "vite",
-      viteConfig: {
-        server: { fs: { strict: false } },
-				resolve:{
-    alias:{
-      '@' : "../../node_modules/react-trello-ts/src"
-    },
-  },
-      },
-    },
-  },
-  experimentalSourceRewriting: true,
+	video: false,
+	component: {
+		viewportWidth: 1000,
+		viewportHeight: 500,
+		devServer: {
+			framework: "react",
+			bundler: "vite",
+			viteConfig: {
+				server: { fs: { strict: false } },
+				resolve: {
+					alias: {
+						"@": "../../node_modules/react-trello-ts/src",
+					},
+				},
+			},
+		},
+	},
+	experimentalSourceRewriting: true,
 });
diff --git a/apps/cypress-testing/cypress/component/CardBehaviour.cy.tsx b/apps/cypress-testing/cypress/component/CardBehaviour.cy.tsx
index b12e776..16437e8 100644
--- a/apps/cypress-testing/cypress/component/CardBehaviour.cy.tsx
+++ b/apps/cypress-testing/cypress/component/CardBehaviour.cy.tsx
@@ -57,72 +57,72 @@ describe("Testing card behaviour", () => {
 	});
 
 	it("Can drag a card between lanes", () => {
-    cy.fixture("data.json").then((data) => {
-      cy.mount(<Board data={data} />);
-      cy.findCardByTitle("Buy milk").move({
-        deltaX: 300,
-        deltaY: 50,
-        force: true,
-      });
-      cy.get(".horizontal > :nth-child(1)")
-        .findByText("Buy milk")
-        .should("not.exist");
-      cy.get(".horizontal > :nth-child(2)")
-        .findByText("Buy milk")
-        .should("exist");
-    });
-  });
+		cy.fixture("data.json").then((data) => {
+			cy.mount(<Board data={data} />);
+			cy.findCardByTitle("Buy milk").move({
+				deltaX: 300,
+				deltaY: 50,
+				force: true,
+			});
+			cy.get(".horizontal > :nth-child(1)")
+				.findByText("Buy milk")
+				.should("not.exist");
+			cy.get(".horizontal > :nth-child(2)")
+				.findByText("Buy milk")
+				.should("exist");
+		});
+	});
 
-  it("Can drag a card between multiple lanes", () => {
-    cy.fixture("data.json").then((data) => {
-      cy.mount(<Board data={data} />);
-      cy.findCardByTitle("Buy milk").move({
-        deltaX: 300,
-        deltaY: 50,
-        force: true,
-      });
-      cy.get(".horizontal > :nth-child(1)")
-        .findByText("Buy milk")
-        .should("not.exist");
-      cy.get(".horizontal > :nth-child(2)")
-        .findByText("Buy milk")
-        .should("exist");
+	it("Can drag a card between multiple lanes", () => {
+		cy.fixture("data.json").then((data) => {
+			cy.mount(<Board data={data} />);
+			cy.findCardByTitle("Buy milk").move({
+				deltaX: 300,
+				deltaY: 50,
+				force: true,
+			});
+			cy.get(".horizontal > :nth-child(1)")
+				.findByText("Buy milk")
+				.should("not.exist");
+			cy.get(".horizontal > :nth-child(2)")
+				.findByText("Buy milk")
+				.should("exist");
 
-      cy.findCardByTitle("Buy milk").move({
-        deltaX: -300,
-        deltaY: -50,
-        force: true,
-      });
-      cy.get(".horizontal > :nth-child(1)")
-        .findByText("Buy milk")
-        .should("exist");
-      cy.get(".horizontal > :nth-child(2)")
-        .findByText("Buy milk")
-        .should("not.exist");
+			cy.findCardByTitle("Buy milk").move({
+				deltaX: -300,
+				deltaY: -50,
+				force: true,
+			});
+			cy.get(".horizontal > :nth-child(1)")
+				.findByText("Buy milk")
+				.should("exist");
+			cy.get(".horizontal > :nth-child(2)")
+				.findByText("Buy milk")
+				.should("not.exist");
 
-      cy.findCardByTitle("Buy milk").move({
-        deltaX: 550,
-        deltaY: -100,
-        force: true,
-      });
-      cy.get(".horizontal > :nth-child(1)")
-        .findByText("Buy milk")
-        .should("not.exist");
-      cy.get(".horizontal > :nth-child(3)")
-        .findByText("Buy milk")
-        .should("exist");
+			cy.findCardByTitle("Buy milk").move({
+				deltaX: 550,
+				deltaY: -100,
+				force: true,
+			});
+			cy.get(".horizontal > :nth-child(1)")
+				.findByText("Buy milk")
+				.should("not.exist");
+			cy.get(".horizontal > :nth-child(3)")
+				.findByText("Buy milk")
+				.should("exist");
 
-       cy.findCardByTitle("Buy milk").move({
-        deltaX: -550,
-        deltaY: 100,
-        force: true,
-      });
-      cy.get(".horizontal > :nth-child(1)")
-        .findByText("Buy milk")
-        .should("exist");
-      cy.get(".horizontal > :nth-child(3)")
-        .findByText("Buy milk")
-        .should("not.exist");
-    });
-  })
+			cy.findCardByTitle("Buy milk").move({
+				deltaX: -550,
+				deltaY: 100,
+				force: true,
+			});
+			cy.get(".horizontal > :nth-child(1)")
+				.findByText("Buy milk")
+				.should("exist");
+			cy.get(".horizontal > :nth-child(3)")
+				.findByText("Buy milk")
+				.should("not.exist");
+		});
+	});
 });
diff --git a/apps/cypress-testing/cypress/component/ComponentName.cy.tsx b/apps/cypress-testing/cypress/component/ComponentName.cy.tsx
index 9e3a5fb..d5f037b 100644
--- a/apps/cypress-testing/cypress/component/ComponentName.cy.tsx
+++ b/apps/cypress-testing/cypress/component/ComponentName.cy.tsx
@@ -1,29 +1,26 @@
 import Board from "react-trello-ts";
 
 describe("ComponentName.cy.ts", () => {
-  it("renders cards", () => {
-    cy.fixture("data.json").then((data) => {
-      cy.mount(<Board data={data} />);
-      cy.get(".horizontal")
-        .findAllByText("Planned Tasks")
-        .should("exist")
-        .should("have.length", 1);
-      cy.findCardByTitle("Buy milk");
-      cy.findCardByTitle("Dispose Garbage");
-      cy.findCardByTitle("Write Blog");
-      cy.findCardByTitle("Pay Rent");
-      cy.findCardByTitle("Clean House");
-      cy.findCardByTitle("Practice Meditation");
-      cy.findCardByTitle("Maintain Daily Journal");
-      cy.findCardByTitle("Morning Jog");
-      cy.findCardByTitle("Go Trekking");
-      cy.findCardByTitle("Go Jogging");
-      cy.findCardByTitle("Go Cycling");
-    });
-  });
-
-
-
+	it("renders cards", () => {
+		cy.fixture("data.json").then((data) => {
+			cy.mount(<Board data={data} />);
+			cy.get(".horizontal")
+				.findAllByText("Planned Tasks")
+				.should("exist")
+				.should("have.length", 1);
+			cy.findCardByTitle("Buy milk");
+			cy.findCardByTitle("Dispose Garbage");
+			cy.findCardByTitle("Write Blog");
+			cy.findCardByTitle("Pay Rent");
+			cy.findCardByTitle("Clean House");
+			cy.findCardByTitle("Practice Meditation");
+			cy.findCardByTitle("Maintain Daily Journal");
+			cy.findCardByTitle("Morning Jog");
+			cy.findCardByTitle("Go Trekking");
+			cy.findCardByTitle("Go Jogging");
+			cy.findCardByTitle("Go Cycling");
+		});
+	});
 });
 
 export {};
diff --git a/apps/cypress-testing/cypress/component/CustomCard.cy.tsx b/apps/cypress-testing/cypress/component/CustomCard.cy.tsx
index 7eef0bf..aa905a3 100644
--- a/apps/cypress-testing/cypress/component/CustomCard.cy.tsx
+++ b/apps/cypress-testing/cypress/component/CustomCard.cy.tsx
@@ -7,211 +7,211 @@ import { MovableCardWrapper } from "react-trello-ts/src/styles/Base";
 import { BoardData } from "react-trello-ts/src/types/Board";
 
 const CustomCard = ({
-  onClick,
-  className,
-  name,
-  cardStyle,
-  body,
-  dueOn,
-  cardColor,
-  subTitle,
-  tagStyle,
-  escalationText,
-  tags,
-  showDeleteButton,
-  onDelete,
-  id,
-  index,
-  t,
+	onClick,
+	className,
+	name,
+	cardStyle,
+	body,
+	dueOn,
+	cardColor,
+	subTitle,
+	tagStyle,
+	escalationText,
+	tags,
+	showDeleteButton,
+	onDelete,
+	id,
+	index,
+	t,
 }: CardProps) => {
-  const clickDelete = (e: { stopPropagation: () => void }) => {
-    onDelete && onDelete();
-    e.stopPropagation();
-  };
+	const clickDelete = (e: { stopPropagation: () => void }) => {
+		onDelete && onDelete();
+		e.stopPropagation();
+	};
 
-  return (
-    <MovableCardWrapper
-      onClick={onClick}
-      style={cardStyle}
-      className={className}
-    >
-      <header
-        style={{
-          borderBottom: "1px solid #eee",
-          paddingBottom: 6,
-          marginBottom: 10,
-          display: "flex",
-          flexDirection: "row",
-          justifyContent: "space-between",
-          color: cardColor,
-        }}
-      >
-        <div style={{ fontSize: 14, fontWeight: "bold" }}>{name}</div>
-        <div style={{ fontSize: 11 }}>{dueOn}</div>
-        {showDeleteButton && <DeleteButton onClick={clickDelete} />}
-      </header>
-      <div style={{ fontSize: 12, color: "#BD3B36" }}>
-        <div style={{ color: "#4C4C4C", fontWeight: "bold" }}>{subTitle}</div>
-        <div style={{ padding: "5px 0px" }}>
-          <i>{body}</i>
-        </div>
-        <div
-          style={{
-            marginTop: 10,
-            textAlign: "center",
-            color: cardColor,
-            fontSize: 15,
-            fontWeight: "bold",
-          }}
-        >
-          {escalationText}
-        </div>
-        {tags && (
-          <div
-            style={{
-              borderTop: "1px solid #eee",
-              paddingTop: 6,
-              display: "flex",
-              justifyContent: "flex-end",
-              flexDirection: "row",
-              flexWrap: "wrap",
-            }}
-          >
-            {tags.map((tag) => (
-              <Tag key={tag.title} {...tag} tagStyle={tagStyle} />
-            ))}
-          </div>
-        )}
-      </div>
-    </MovableCardWrapper>
-  );
+	return (
+		<MovableCardWrapper
+			onClick={onClick}
+			style={cardStyle}
+			className={className}
+		>
+			<header
+				style={{
+					borderBottom: "1px solid #eee",
+					paddingBottom: 6,
+					marginBottom: 10,
+					display: "flex",
+					flexDirection: "row",
+					justifyContent: "space-between",
+					color: cardColor,
+				}}
+			>
+				<div style={{ fontSize: 14, fontWeight: "bold" }}>{name}</div>
+				<div style={{ fontSize: 11 }}>{dueOn}</div>
+				{showDeleteButton && <DeleteButton onClick={clickDelete} />}
+			</header>
+			<div style={{ fontSize: 12, color: "#BD3B36" }}>
+				<div style={{ color: "#4C4C4C", fontWeight: "bold" }}>{subTitle}</div>
+				<div style={{ padding: "5px 0px" }}>
+					<i>{body}</i>
+				</div>
+				<div
+					style={{
+						marginTop: 10,
+						textAlign: "center",
+						color: cardColor,
+						fontSize: 15,
+						fontWeight: "bold",
+					}}
+				>
+					{escalationText}
+				</div>
+				{tags && (
+					<div
+						style={{
+							borderTop: "1px solid #eee",
+							paddingTop: 6,
+							display: "flex",
+							justifyContent: "flex-end",
+							flexDirection: "row",
+							flexWrap: "wrap",
+						}}
+					>
+						{tags.map((tag) => (
+							<Tag key={tag.title} {...tag} tagStyle={tagStyle} />
+						))}
+					</div>
+				)}
+			</div>
+		</MovableCardWrapper>
+	);
 };
 
 const data: BoardData = {
-  lanes: [
-    {
-      id: "lane1",
-      title: "Planned Tasks",
-      label: "12/12",
-      style: { backgroundColor: "cyan", padding: 20 },
-      titleStyle: { fontSize: 20, marginBottom: 15 },
-      labelStyle: { color: "#009688", fontWeight: "bold" },
-      cards: [
-        {
-          id: "Card1",
-          name: "John Smith",
-          dueOn: "due in a day",
-          subTitle: "SMS received at 12:13pm today",
-          body: "Thanks. Please schedule me for an estimate on Monday.",
-          escalationText: "Escalated to OPS-ESCALATIONS!",
-          cardColor: "#BD3B36",
-          cardStyle: {
-            borderRadius: 6,
-            boxShadow: "0 0 6px 1px #BD3B36",
-            marginBottom: 15,
-          },
-          metadata: { id: "Card1" },
-        },
-        {
-          id: "Card2",
-          name: "Card Weathers",
-          dueOn: "due now",
-          subTitle: "Email received at 1:14pm",
-          body: "Is the estimate free, and can someone call me soon?",
-          escalationText: "Escalated to Admin",
-          cardColor: "#E08521",
-          cardStyle: {
-            borderRadius: 6,
-            boxShadow: "0 0 6px 1px #E08521",
-            marginBottom: 15,
-          },
-          metadata: { id: "Card1" },
-        },
-      ],
-    },
-    {
-      id: "lane2",
-      title: "Long Lane name this is i suppose ha!",
-      cards: [
-        {
-          id: "Card3",
-          name: "Michael Caine",
-          dueOn: "due in a day",
-          subTitle: "Email received at 4:23pm today",
-          body:
-            "You are welcome. Interested in doing business with you" + " again",
-          escalationText: "Escalated to OPS-ESCALATIONS!",
-          cardColor: "#BD3B36",
-          cardStyle: {
-            borderRadius: 6,
-            boxShadow: "0 0 6px 1px #BD3B36",
-            marginBottom: 15,
-          },
-          metadata: { id: "Card1" },
-          tags: [
-            { title: "Critical", color: "white", bgcolor: "red" },
-            { title: "2d ETA", color: "white", bgcolor: "#0079BF" },
-          ],
-        },
-      ],
-    },
-  ],
+	lanes: [
+		{
+			id: "lane1",
+			title: "Planned Tasks",
+			label: "12/12",
+			style: { backgroundColor: "cyan", padding: 20 },
+			titleStyle: { fontSize: 20, marginBottom: 15 },
+			labelStyle: { color: "#009688", fontWeight: "bold" },
+			cards: [
+				{
+					id: "Card1",
+					name: "John Smith",
+					dueOn: "due in a day",
+					subTitle: "SMS received at 12:13pm today",
+					body: "Thanks. Please schedule me for an estimate on Monday.",
+					escalationText: "Escalated to OPS-ESCALATIONS!",
+					cardColor: "#BD3B36",
+					cardStyle: {
+						borderRadius: 6,
+						boxShadow: "0 0 6px 1px #BD3B36",
+						marginBottom: 15,
+					},
+					metadata: { id: "Card1" },
+				},
+				{
+					id: "Card2",
+					name: "Card Weathers",
+					dueOn: "due now",
+					subTitle: "Email received at 1:14pm",
+					body: "Is the estimate free, and can someone call me soon?",
+					escalationText: "Escalated to Admin",
+					cardColor: "#E08521",
+					cardStyle: {
+						borderRadius: 6,
+						boxShadow: "0 0 6px 1px #E08521",
+						marginBottom: 15,
+					},
+					metadata: { id: "Card1" },
+				},
+			],
+		},
+		{
+			id: "lane2",
+			title: "Long Lane name this is i suppose ha!",
+			cards: [
+				{
+					id: "Card3",
+					name: "Michael Caine",
+					dueOn: "due in a day",
+					subTitle: "Email received at 4:23pm today",
+					body:
+						"You are welcome. Interested in doing business with you" + " again",
+					escalationText: "Escalated to OPS-ESCALATIONS!",
+					cardColor: "#BD3B36",
+					cardStyle: {
+						borderRadius: 6,
+						boxShadow: "0 0 6px 1px #BD3B36",
+						marginBottom: 15,
+					},
+					metadata: { id: "Card1" },
+					tags: [
+						{ title: "Critical", color: "white", bgcolor: "red" },
+						{ title: "2d ETA", color: "white", bgcolor: "#0079BF" },
+					],
+				},
+			],
+		},
+	],
 };
 
 describe("CustomCard.cy.ts", () => {
-  it("Renders custom card content correctly", () => {
-    mount(
-      <Board
-        tagStyle={{ fontSize: "80%" }}
-        data={data}
-        draggable
-        components={{ Card: CustomCard }}
-        onCardClick={(cardId: any, metadata: { id: any }) =>
-          alert(
-            `Card with id:${cardId} clicked. Has metadata.id: ${metadata.id}`,
-          )
-        }
-      />,
-    );
-    cy.findCardByTitle("John Smith");
-    cy.get(".react-trello-card")
-      .should("have.length", 3)
-      .first()
-      .then((card) => {
-        cy.wrap(card).contains("John Smith");
-        cy.wrap(card).contains("due in a day");
-        cy.wrap(card).contains("SMS received at 12:13pm today");
-        cy.wrap(card).contains(
-          "Thanks. Please schedule me for an estimate on Monday.",
-        );
-        cy.wrap(card).contains("Escalated to OPS-ESCALATIONS!");
-      });
+	it("Renders custom card content correctly", () => {
+		mount(
+			<Board
+				tagStyle={{ fontSize: "80%" }}
+				data={data}
+				draggable
+				components={{ Card: CustomCard }}
+				onCardClick={(cardId: any, metadata: { id: any }) =>
+					alert(
+						`Card with id:${cardId} clicked. Has metadata.id: ${metadata.id}`,
+					)
+				}
+			/>,
+		);
+		cy.findCardByTitle("John Smith");
+		cy.get(".react-trello-card")
+			.should("have.length", 3)
+			.first()
+			.then((card) => {
+				cy.wrap(card).contains("John Smith");
+				cy.wrap(card).contains("due in a day");
+				cy.wrap(card).contains("SMS received at 12:13pm today");
+				cy.wrap(card).contains(
+					"Thanks. Please schedule me for an estimate on Monday.",
+				);
+				cy.wrap(card).contains("Escalated to OPS-ESCALATIONS!");
+			});
 
-    cy.findCardByTitle("Card Weathers");
-    cy.get(".react-trello-card")
-      .should("have.length", 3)
-      .eq(1)
-      .then((card) => {
-        cy.wrap(card).contains("Card Weathers");
-        cy.wrap(card).contains("due now");
-        cy.wrap(card).contains("Email received at 1:14pm");
-        cy.wrap(card).contains(
-          "Is the estimate free, and can someone call me soon?",
-        );
-        cy.wrap(card).contains("Escalated to Admin");
-      });
+		cy.findCardByTitle("Card Weathers");
+		cy.get(".react-trello-card")
+			.should("have.length", 3)
+			.eq(1)
+			.then((card) => {
+				cy.wrap(card).contains("Card Weathers");
+				cy.wrap(card).contains("due now");
+				cy.wrap(card).contains("Email received at 1:14pm");
+				cy.wrap(card).contains(
+					"Is the estimate free, and can someone call me soon?",
+				);
+				cy.wrap(card).contains("Escalated to Admin");
+			});
 
-    cy.findCardByTitle("Michael Caine");
-    cy.get(".react-trello-card")
-      .should("have.length", 3)
-      .last()
-      .then((card) => {
-        cy.wrap(card).contains("Michael Caine");
-        cy.wrap(card).contains("due in a day");
-        cy.wrap(card).contains("Email received at 4:23pm today");
-        cy.wrap(card).contains("Escalated to OPS-ESCALATIONS!");
-        cy.wrap(card).contains("Critical");
-        cy.wrap(card).contains("2d ETA");
-      });
-  });
+		cy.findCardByTitle("Michael Caine");
+		cy.get(".react-trello-card")
+			.should("have.length", 3)
+			.last()
+			.then((card) => {
+				cy.wrap(card).contains("Michael Caine");
+				cy.wrap(card).contains("due in a day");
+				cy.wrap(card).contains("Email received at 4:23pm today");
+				cy.wrap(card).contains("Escalated to OPS-ESCALATIONS!");
+				cy.wrap(card).contains("Critical");
+				cy.wrap(card).contains("2d ETA");
+			});
+	});
 });
diff --git a/apps/cypress-testing/cypress/fixtures/data.json b/apps/cypress-testing/cypress/fixtures/data.json
index cd63a0d..8c45d7c 100644
--- a/apps/cypress-testing/cypress/fixtures/data.json
+++ b/apps/cypress-testing/cypress/fixtures/data.json
@@ -1,133 +1,133 @@
 {
-  "lanes": [
-    {
-      "id": "PLANNED",
-      "title": "Planned Tasks",
-      "label": "20/70",
-      "style": { "width": 280 },
-      "cards": [
-        {
-          "id": "Milk",
-          "title": "Buy milk",
-          "label": "15 mins",
-          "description": "2 Gallons of milk at the Deli store"
-        },
-        {
-          "id": "Plan2",
-          "title": "Dispose Garbage",
-          "label": "10 mins",
-          "description": "Sort out recyclable and waste as needed"
-        },
-        {
-          "id": "Plan3",
-          "title": "Write Blog",
-          "label": "30 mins",
-          "description": "Can AI make memes?"
-        },
-        {
-          "id": "Plan4",
-          "title": "Pay Rent",
-          "label": "5 mins",
-          "description": "Transfer to bank account"
-        }
-      ]
-    },
-    {
-      "id": "WIP",
-      "title": "Work In Progress",
-      "label": "10/20",
-      "style": { "width": 280 },
-      "cards": [
-        {
-          "id": "Wip1",
-          "title": "Clean House",
-          "label": "30 mins",
-          "description": "Soap wash and polish floor. Polish windows and doors. Scrap all broken glasses"
-        }
-      ]
-    },
-    {
-      "id": "BLOCKED",
-      "title": "Blocked",
-      "label": "0/0",
-      "style": { "width": 280 },
-      "cards": []
-    },
-    {
-      "id": "COMPLETED",
-      "title": "Completed",
-      "style": { "width": 280 },
-      "label": "2/5",
-      "cards": [
-        {
-          "id": "Completed1",
-          "title": "Practice Meditation",
-          "label": "15 mins",
-          "description": "Use Headspace app"
-        },
-        {
-          "id": "Completed2",
-          "title": "Maintain Daily Journal",
-          "label": "15 mins",
-          "description": "Use Spreadsheet for now"
-        }
-      ]
-    },
-    {
-      "id": "REPEAT",
-      "title": "Repeat",
-      "style": { "width": 280 },
-      "label": "1/1",
-      "cards": [
-        {
-          "id": "Repeat1",
-          "title": "Morning Jog",
-          "label": "30 mins",
-          "description": "Track using fitbit"
-        }
-      ]
-    },
-    {
-      "id": "ARCHIVED",
-      "title": "Archived",
-      "style": { "width": 280 },
-      "label": "1/1",
-      "cards": [
-        {
-          "id": "Archived1",
-          "title": "Go Trekking",
-          "label": "300 mins",
-          "description": "Completed 10km on cycle"
-        }
-      ]
-    },
-    {
-      "id": "ARCHIVED2",
-      "title": "Archived2",
-      "style": { "width": 280 },
-      "label": "1/1",
-      "cards": [
-        {
-          "id": "Archived2",
-          "title": "Go Jogging",
-          "label": "300 mins",
-          "description": "Completed 10km on cycle"
-        }
-      ]
-    },
-    {
-      "id": "ARCHIVED3",
-      "title": "Archived3",
-      "style": { "width": 280 },
-      "label": "1/1",
-      "cards": [
-        {
-          "id": "Archived3",
-          "title": "Go Cycling",
-          "label": "300 mins",
-          "description": "Completed 10km on cycle"
-        }
-      ]
-    }
-  ]
+	"lanes": [
+		{
+			"id": "PLANNED",
+			"title": "Planned Tasks",
+			"label": "20/70",
+			"style": { "width": 280 },
+			"cards": [
+				{
+					"id": "Milk",
+					"title": "Buy milk",
+					"label": "15 mins",
+					"description": "2 Gallons of milk at the Deli store"
+				},
+				{
+					"id": "Plan2",
+					"title": "Dispose Garbage",
+					"label": "10 mins",
+					"description": "Sort out recyclable and waste as needed"
+				},
+				{
+					"id": "Plan3",
+					"title": "Write Blog",
+					"label": "30 mins",
+					"description": "Can AI make memes?"
+				},
+				{
+					"id": "Plan4",
+					"title": "Pay Rent",
+					"label": "5 mins",
+					"description": "Transfer to bank account"
+				}
+			]
+		},
+		{
+			"id": "WIP",
+			"title": "Work In Progress",
+			"label": "10/20",
+			"style": { "width": 280 },
+			"cards": [
+				{
+					"id": "Wip1",
+					"title": "Clean House",
+					"label": "30 mins",
+					"description": "Soap wash and polish floor. Polish windows and doors. Scrap all broken glasses"
+				}
+			]
+		},
+		{
+			"id": "BLOCKED",
+			"title": "Blocked",
+			"label": "0/0",
+			"style": { "width": 280 },
+			"cards": []
+		},
+		{
+			"id": "COMPLETED",
+			"title": "Completed",
+			"style": { "width": 280 },
+			"label": "2/5",
+			"cards": [
+				{
+					"id": "Completed1",
+					"title": "Practice Meditation",
+					"label": "15 mins",
+					"description": "Use Headspace app"
+				},
+				{
+					"id": "Completed2",
+					"title": "Maintain Daily Journal",
+					"label": "15 mins",
+					"description": "Use Spreadsheet for now"
+				}
+			]
+		},
+		{
+			"id": "REPEAT",
+			"title": "Repeat",
+			"style": { "width": 280 },
+			"label": "1/1",
+			"cards": [
+				{
+					"id": "Repeat1",
+					"title": "Morning Jog",
+					"label": "30 mins",
+					"description": "Track using fitbit"
+				}
+			]
+		},
+		{
+			"id": "ARCHIVED",
+			"title": "Archived",
+			"style": { "width": 280 },
+			"label": "1/1",
+			"cards": [
+				{
+					"id": "Archived1",
+					"title": "Go Trekking",
+					"label": "300 mins",
+					"description": "Completed 10km on cycle"
+				}
+			]
+		},
+		{
+			"id": "ARCHIVED2",
+			"title": "Archived2",
+			"style": { "width": 280 },
+			"label": "1/1",
+			"cards": [
+				{
+					"id": "Archived2",
+					"title": "Go Jogging",
+					"label": "300 mins",
+					"description": "Completed 10km on cycle"
+				}
+			]
+		},
+		{
+			"id": "ARCHIVED3",
+			"title": "Archived3",
+			"style": { "width": 280 },
+			"label": "1/1",
+			"cards": [
+				{
+					"id": "Archived3",
+					"title": "Go Cycling",
+					"label": "300 mins",
+					"description": "Completed 10km on cycle"
+				}
+			]
+		}
+	]
 }
diff --git a/apps/cypress-testing/cypress/support/component.ts b/apps/cypress-testing/cypress/support/component.ts
index 8e6f864..9d5e418 100644
--- a/apps/cypress-testing/cypress/support/component.ts
+++ b/apps/cypress-testing/cypress/support/component.ts
@@ -26,11 +26,11 @@ import { mount } from "cypress/react";
 // Alternatively, can be defined in cypress/support/component.d.ts
 // with a <reference path="./component" /> at the top of your spec.
 declare global {
-  namespace Cypress {
-    interface Chainable {
-      mount: typeof mount;
-    }
-  }
+	namespace Cypress {
+		interface Chainable {
+			mount: typeof mount;
+		}
+	}
 }
 
 Cypress.Commands.add("mount", mount);
diff --git a/apps/cypress-testing/src/App.tsx b/apps/cypress-testing/src/App.tsx
index 54debe9..8e16ef3 100644
--- a/apps/cypress-testing/src/App.tsx
+++ b/apps/cypress-testing/src/App.tsx
@@ -1,11 +1,9 @@
 import { useState } from "react";
 import Board from "react-trello-ts";
 
-import data from "../cypress/fixtures/data.json"
+import data from "../cypress/fixtures/data.json";
 function App() {
-  return (
-    <Board data={data}/>
-  );
+	return <Board data={data} />;
 }
 
 export default App;
diff --git a/apps/cypress-testing/src/main.tsx b/apps/cypress-testing/src/main.tsx
index 94bb743..a19f9dd 100644
--- a/apps/cypress-testing/src/main.tsx
+++ b/apps/cypress-testing/src/main.tsx
@@ -1,10 +1,10 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import App from './App'
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
 
 ReactDOM.render(
-  <React.StrictMode>
-      <App />
-  </React.StrictMode>,
-  document.getElementById('root')
-)
+	<React.StrictMode>
+		<App />
+	</React.StrictMode>,
+	document.getElementById("root"),
+);
diff --git a/apps/cypress-testing/tsconfig.node.json b/apps/cypress-testing/tsconfig.node.json
index 9d31e2a..d3bf4b8 100644
--- a/apps/cypress-testing/tsconfig.node.json
+++ b/apps/cypress-testing/tsconfig.node.json
@@ -1,9 +1,9 @@
 {
-  "compilerOptions": {
-    "composite": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["vite.config.ts"]
+	"compilerOptions": {
+		"composite": true,
+		"module": "ESNext",
+		"moduleResolution": "Node",
+		"allowSyntheticDefaultImports": true
+	},
+	"include": ["vite.config.ts"]
 }
diff --git a/apps/cypress-testing/vite.config.ts b/apps/cypress-testing/vite.config.ts
index fa52eab..41e2a76 100644
--- a/apps/cypress-testing/vite.config.ts
+++ b/apps/cypress-testing/vite.config.ts
@@ -3,10 +3,10 @@ import react from "@vitejs/plugin-react";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
-	resolve:{
+	plugins: [react()],
+	resolve: {
 		alias: {
-			"@": "../../node_modules/react-trello-ts/src"
-		}
-	}
+			"@": "../../node_modules/react-trello-ts/src",
+		},
+	},
 });
diff --git a/apps/docs/babel.config.js b/apps/docs/babel.config.js
index e00595d..f8c7bb9 100644
--- a/apps/docs/babel.config.js
+++ b/apps/docs/babel.config.js
@@ -1,3 +1,3 @@
 module.exports = {
-  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+	presets: [require.resolve("@docusaurus/core/lib/babel/preset")],
 };
diff --git a/apps/docs/docusaurus.config.js b/apps/docs/docusaurus.config.js
index 393932b..2c07971 100644
--- a/apps/docs/docusaurus.config.js
+++ b/apps/docs/docusaurus.config.js
@@ -6,121 +6,121 @@ const darkCodeTheme = require("prism-react-renderer/themes/dracula");
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
-  title: "react-trello-ts",
-  tagline: "Typescript first - Trello like kanban board",
-  url: "https://your-docusaurus-test-site.com",
-  baseUrl: "/",
-  onBrokenLinks: "throw",
-  onBrokenMarkdownLinks: "warn",
-  favicon: "img/favicon.ico",
+	title: "react-trello-ts",
+	tagline: "Typescript first - Trello like kanban board",
+	url: "https://your-docusaurus-test-site.com",
+	baseUrl: "/",
+	onBrokenLinks: "throw",
+	onBrokenMarkdownLinks: "warn",
+	favicon: "img/favicon.ico",
 
-  // GitHub pages deployment config.
-  // If you aren't using GitHub pages, you don't need these.
-  organizationName: "KaiSpencer", // Usually your GitHub org/user name.
-  projectName: "react-trello-ts", // Usually your repo name.
+	// GitHub pages deployment config.
+	// If you aren't using GitHub pages, you don't need these.
+	organizationName: "KaiSpencer", // Usually your GitHub org/user name.
+	projectName: "react-trello-ts", // Usually your repo name.
 
-  // Even if you don't use internalization, you can use this field to set useful
-  // metadata like html lang. For example, if your site is Chinese, you may want
-  // to replace "en" with "zh-Hans".
-  i18n: {
-    defaultLocale: "en",
-    locales: ["en"],
-  },
+	// Even if you don't use internalization, you can use this field to set useful
+	// metadata like html lang. For example, if your site is Chinese, you may want
+	// to replace "en" with "zh-Hans".
+	i18n: {
+		defaultLocale: "en",
+		locales: ["en"],
+	},
 
-  presets: [
-    [
-      "classic",
-      /** @type {import('@docusaurus/preset-classic').Options} */
-      ({
-        docs: {
-          sidebarPath: require.resolve("./sidebars.js"),
-        },
-        blog: {
-          showReadingTime: true,
-          // Please change this to your repo.
-          // Remove this to remove the "edit this page" links.
-        },
-        theme: {
-          customCss: require.resolve("./src/css/custom.css"),
-        },
-      }),
-    ],
-  ],
+	presets: [
+		[
+			"classic",
+			/** @type {import('@docusaurus/preset-classic').Options} */
+			({
+				docs: {
+					sidebarPath: require.resolve("./sidebars.js"),
+				},
+				blog: {
+					showReadingTime: true,
+					// Please change this to your repo.
+					// Remove this to remove the "edit this page" links.
+				},
+				theme: {
+					customCss: require.resolve("./src/css/custom.css"),
+				},
+			}),
+		],
+	],
 
-  themeConfig:
-    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
-    ({
-      navbar: {
-        title: "React Trello TS",
-        logo: {
-          alt: "My Site Logo",
-          src: "img/logo.svg",
-        },
-        items: [
-          {
-            type: "doc",
-            docId: "getting-started",
-            position: "left",
-            label: "Getting Started",
-          },
-          // { to: "/blog", label: "Blog", position: "left" },
-          {
-            href: "https://github.com/KaiSpencer/react-trello-ts",
-            label: "GitHub",
-            position: "right",
-          },
-        ],
-      },
-      footer: {
-        style: "dark",
-        links: [
-          {
-            title: "Docs",
-            items: [
-              {
-                label: "Getting Started",
-                to: "/docs/getting-started",
-              },
-            ],
-          },
-          {
-            title: "Community",
-            items: [
-              {
-                label: "Stack Overflow",
-                href: "https://stackoverflow.com/questions/tagged/docusaurus",
-              },
-              {
-                label: "Discord",
-                href: "https://discordapp.com/invite/docusaurus",
-              },
-              {
-                label: "Twitter",
-                href: "https://twitter.com/docusaurus",
-              },
-            ],
-          },
-          // {
-          //   title: "More",
-          //   items: [
-          //     {
-          //       label: "Blog",
-          //       to: "/blog",
-          //     },
-          //     {
-          //       label: "GitHub",
-          //       href: "https://github.com/facebook/docusaurus",
-          //     },
-          //   ],
-          // },
-        ],
-        copyright: `Copyright © ${new Date().getFullYear()} React Trello TS. Built with Docusaurus.`,
-      },
-      prism: {
-        theme: lightCodeTheme,
-        darkTheme: darkCodeTheme,
-      },
-    }),
+	themeConfig:
+		/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
+		({
+			navbar: {
+				title: "React Trello TS",
+				logo: {
+					alt: "My Site Logo",
+					src: "img/logo.svg",
+				},
+				items: [
+					{
+						type: "doc",
+						docId: "getting-started",
+						position: "left",
+						label: "Getting Started",
+					},
+					// { to: "/blog", label: "Blog", position: "left" },
+					{
+						href: "https://github.com/KaiSpencer/react-trello-ts",
+						label: "GitHub",
+						position: "right",
+					},
+				],
+			},
+			footer: {
+				style: "dark",
+				links: [
+					{
+						title: "Docs",
+						items: [
+							{
+								label: "Getting Started",
+								to: "/docs/getting-started",
+							},
+						],
+					},
+					{
+						title: "Community",
+						items: [
+							{
+								label: "Stack Overflow",
+								href: "https://stackoverflow.com/questions/tagged/docusaurus",
+							},
+							{
+								label: "Discord",
+								href: "https://discordapp.com/invite/docusaurus",
+							},
+							{
+								label: "Twitter",
+								href: "https://twitter.com/docusaurus",
+							},
+						],
+					},
+					// {
+					//   title: "More",
+					//   items: [
+					//     {
+					//       label: "Blog",
+					//       to: "/blog",
+					//     },
+					//     {
+					//       label: "GitHub",
+					//       href: "https://github.com/facebook/docusaurus",
+					//     },
+					//   ],
+					// },
+				],
+				copyright: `Copyright © ${new Date().getFullYear()} React Trello TS. Built with Docusaurus.`,
+			},
+			prism: {
+				theme: lightCodeTheme,
+				darkTheme: darkCodeTheme,
+			},
+		}),
 };
 
 module.exports = config;
diff --git a/apps/docs/sidebars.js b/apps/docs/sidebars.js
index 9ab54c2..329bc00 100644
--- a/apps/docs/sidebars.js
+++ b/apps/docs/sidebars.js
@@ -13,11 +13,11 @@
 
 /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
 const sidebars = {
-  // By default, Docusaurus generates a sidebar from the docs folder structure
-  tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
+	// By default, Docusaurus generates a sidebar from the docs folder structure
+	tutorialSidebar: [{ type: "autogenerated", dirName: "." }],
 
-  // But you can create a sidebar manually
-  /*
+	// But you can create a sidebar manually
+	/*
   tutorialSidebar: [
     'intro',
     'hello',
diff --git a/apps/docs/src/components/HomepageFeatures/index.tsx b/apps/docs/src/components/HomepageFeatures/index.tsx
index e417c90..cf93131 100644
--- a/apps/docs/src/components/HomepageFeatures/index.tsx
+++ b/apps/docs/src/components/HomepageFeatures/index.tsx
@@ -3,68 +3,68 @@ import clsx from "clsx";
 import styles from "./styles.module.css";
 
 type FeatureItem = {
-  title: string;
-  Svg: React.ComponentType<React.ComponentProps<"svg">>;
-  description: JSX.Element;
+	title: string;
+	Svg: React.ComponentType<React.ComponentProps<"svg">>;
+	description: JSX.Element;
 };
 
 const FeatureList: FeatureItem[] = [
-  {
-    title: "Storybook Examples",
-    Svg: require("@site/static/img/undraw_docusaurus_mountain.svg").default,
-    description: (
-      <>
-        Docusaurus was designed from the ground up to be easily installed and
-        used to get your website up and running quickly.
-      </>
-    ),
-  },
-  // {
-  //   title: "Focus on What Matters",
-  //   Svg: require("@site/static/img/undraw_docusaurus_tree.svg").default,
-  //   description: (
-  //     <>
-  //       Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
-  //       ahead and move your docs into the <code>docs</code> directory.
-  //     </>
-  //   ),
-  // },
-  // {
-  //   title: "Powered by React",
-  //   Svg: require("@site/static/img/undraw_docusaurus_react.svg").default,
-  //   description: (
-  //     <>
-  //       Extend or customize your website layout by reusing React. Docusaurus can
-  //       be extended while reusing the same header and footer.
-  //     </>
-  //   ),
-  // },
+	{
+		title: "Storybook Examples",
+		Svg: require("@site/static/img/undraw_docusaurus_mountain.svg").default,
+		description: (
+			<>
+				Docusaurus was designed from the ground up to be easily installed and
+				used to get your website up and running quickly.
+			</>
+		),
+	},
+	// {
+	//   title: "Focus on What Matters",
+	//   Svg: require("@site/static/img/undraw_docusaurus_tree.svg").default,
+	//   description: (
+	//     <>
+	//       Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
+	//       ahead and move your docs into the <code>docs</code> directory.
+	//     </>
+	//   ),
+	// },
+	// {
+	//   title: "Powered by React",
+	//   Svg: require("@site/static/img/undraw_docusaurus_react.svg").default,
+	//   description: (
+	//     <>
+	//       Extend or customize your website layout by reusing React. Docusaurus can
+	//       be extended while reusing the same header and footer.
+	//     </>
+	//   ),
+	// },
 ];
 
 function Feature({ title, Svg, description }: FeatureItem) {
-  return (
-    <div className={clsx("col col--4")}>
-      <div className="text--center">
-        <Svg className={styles.featureSvg} role="img" />
-      </div>
-      <div className="text--center padding-horiz--md">
-        <h3>{title}</h3>
-        <p>{description}</p>
-      </div>
-    </div>
-  );
+	return (
+		<div className={clsx("col col--4")}>
+			<div className="text--center">
+				<Svg className={styles.featureSvg} role="img" />
+			</div>
+			<div className="text--center padding-horiz--md">
+				<h3>{title}</h3>
+				<p>{description}</p>
+			</div>
+		</div>
+	);
 }
 
 export default function HomepageFeatures(): JSX.Element {
-  return (
-    <section className={styles.features}>
-      <div className="container">
-        <div className="row">
-          {FeatureList.map((props, idx) => (
-            <Feature key={idx} {...props} />
-          ))}
-        </div>
-      </div>
-    </section>
-  );
+	return (
+		<section className={styles.features}>
+			<div className="container">
+				<div className="row">
+					{FeatureList.map((props, idx) => (
+						<Feature key={idx} {...props} />
+					))}
+				</div>
+			</div>
+		</section>
+	);
 }
diff --git a/apps/docs/src/pages/index.tsx b/apps/docs/src/pages/index.tsx
index 84baaed..fd00195 100644
--- a/apps/docs/src/pages/index.tsx
+++ b/apps/docs/src/pages/index.tsx
@@ -7,42 +7,42 @@ import Layout from "@theme/Layout";
 import styles from "./index.module.css";
 
 function HomepageHeader() {
-  const { siteConfig } = useDocusaurusContext();
-  return (
-    <header className={clsx("hero hero--primary", styles.heroBanner)}>
-      <div className="container">
-        <h1 className="hero__title">{siteConfig.title}</h1>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <div className={styles.buttons}>
-          <Link
-            className="button button--secondary button--lg"
-            to="/docs/getting-started"
-          >
-            Get Started - 5min ⏱️
-          </Link>
-        </div>
-        <div className={styles.buttons} style={{ marginTop: 10 }}>
-          <Link
-            className="button button--secondary button--lg"
-            to="https://kaispencer.github.io/react-trello-ts/"
-          >
-            Storybook Examples
-          </Link>
-        </div>
-      </div>
-    </header>
-  );
+	const { siteConfig } = useDocusaurusContext();
+	return (
+		<header className={clsx("hero hero--primary", styles.heroBanner)}>
+			<div className="container">
+				<h1 className="hero__title">{siteConfig.title}</h1>
+				<p className="hero__subtitle">{siteConfig.tagline}</p>
+				<div className={styles.buttons}>
+					<Link
+						className="button button--secondary button--lg"
+						to="/docs/getting-started"
+					>
+						Get Started - 5min ⏱️
+					</Link>
+				</div>
+				<div className={styles.buttons} style={{ marginTop: 10 }}>
+					<Link
+						className="button button--secondary button--lg"
+						to="https://kaispencer.github.io/react-trello-ts/"
+					>
+						Storybook Examples
+					</Link>
+				</div>
+			</div>
+		</header>
+	);
 }
 
 export default function Home(): JSX.Element {
-  const { siteConfig } = useDocusaurusContext();
-  return (
-    <Layout
-      title={`Hello from ${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />"
-    >
-      <HomepageHeader />
-      <main>{/* <HomepageFeatures /> */}</main>
-    </Layout>
-  );
+	const { siteConfig } = useDocusaurusContext();
+	return (
+		<Layout
+			title={`Hello from ${siteConfig.title}`}
+			description="Description will go into a meta tag in <head />"
+		>
+			<HomepageHeader />
+			<main>{/* <HomepageFeatures /> */}</main>
+		</Layout>
+	);
 }
diff --git a/biome.json b/biome.json
new file mode 100644
index 0000000..e63a298
--- /dev/null
+++ b/biome.json
@@ -0,0 +1,19 @@
+{
+	"$schema": "https://biomejs.dev/schemas/1.0.0/schema.json",
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": true,
+			"suspicious": {
+				"noExplicitAny": "off"
+			},
+			"a11y": { "useButtonType": "off" }
+		},
+
+		"ignore": ["coverage", "node_modules", "*.story.tsx"]
+	},
+	"formatter": {
+		"enabled": true,
+		"formatWithErrors": true
+	}
+}
diff --git a/package.json b/package.json
index 253b145..84e4930 100644
--- a/package.json
+++ b/package.json
@@ -1,19 +1,20 @@
 {
-  "name": "react-trello-ts-root",
-  "scripts": {
-    "build": "turbo run build",
-    "test:unit": "turbo run test:unit",
-    "test:integration": "turbo run test:integration",
-    "lint": "turbo run lint",
-    "dev": "turbo run dev",
-	"release": "turbo run build --filter=react-trello-ts && changeset publish"
-  },
-  "devDependencies": {
-    "rome": "^10.0.1",
-    "turbo": "^1.6.3",
-    "typescript": "^4.9.3"
-  },
-  "dependencies": {
-    "@changesets/cli": "^2.26.0"
-  }
+	"name": "react-trello-ts-root",
+	"scripts": {
+		"build": "turbo run build",
+		"test:unit": "turbo run test:unit",
+		"test:integration": "turbo run test:integration",
+		"lint": "turbo run lint",
+		"format": "biome format .",
+		"dev": "turbo run dev",
+		"release": "turbo run build --filter=react-trello-ts && changeset publish"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "^1.4.1",
+		"turbo": "^1.6.3",
+		"typescript": "^4.9.3"
+	},
+	"dependencies": {
+		"@changesets/cli": "^2.26.0"
+	}
 }
diff --git a/packages/react-trello-ts/.babelrc b/packages/react-trello-ts/.babelrc
index 5cfedf9..15a1757 100644
--- a/packages/react-trello-ts/.babelrc
+++ b/packages/react-trello-ts/.babelrc
@@ -1,24 +1,27 @@
 {
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "targets": {
-          "esmodules": true
-        }
-      }
-    ],
-    "@babel/preset-react",
-    "@babel/preset-typescript"
-  ],
-  "plugins": [
-    "@babel/plugin-transform-template-literals",
-    "@babel/plugin-proposal-class-properties",
-    "@babel/plugin-transform-async-to-generator",
-    "@babel/plugin-transform-runtime",
-    ["module-resolver", {
-      "alias": { "rt": "./src/", "@": "./src/" }
-    }],
-    "require-context-hook"
-  ]
+	"presets": [
+		[
+			"@babel/preset-env",
+			{
+				"targets": {
+					"esmodules": true
+				}
+			}
+		],
+		"@babel/preset-react",
+		"@babel/preset-typescript"
+	],
+	"plugins": [
+		"@babel/plugin-transform-template-literals",
+		"@babel/plugin-proposal-class-properties",
+		"@babel/plugin-transform-async-to-generator",
+		"@babel/plugin-transform-runtime",
+		[
+			"module-resolver",
+			{
+				"alias": { "rt": "./src/", "@": "./src/" }
+			}
+		],
+		"require-context-hook"
+	]
 }
diff --git a/packages/react-trello-ts/.prettierrc b/packages/react-trello-ts/.prettierrc
deleted file mode 100644
index 8a057a0..0000000
--- a/packages/react-trello-ts/.prettierrc
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "printWidth": 120,
-  "singleQuote": true,
-  "trailingComma": "none",
-  "bracketSpacing": false,
-  "jsxBracketSameLine": true,
-  "arrowParens": "avoid",
-  "semi": false,
-  "tabWidth": 2,
-  "useTabs": false
-}
diff --git a/packages/react-trello-ts/.storybook/preview.js b/packages/react-trello-ts/.storybook/preview.js
index 3973a1e..f85b3c5 100644
--- a/packages/react-trello-ts/.storybook/preview.js
+++ b/packages/react-trello-ts/.storybook/preview.js
@@ -1,6 +1,6 @@
-import { addDecorator, configure } from "@storybook/react";
 import { withInfo } from "@storybook/addon-info";
 import { withOptions } from "@storybook/addon-options";
+import { addDecorator, configure } from "@storybook/react";
 
 addDecorator(
 	withOptions({
diff --git a/packages/react-trello-ts/bower.json b/packages/react-trello-ts/bower.json
index 6abc95c..07d97cd 100644
--- a/packages/react-trello-ts/bower.json
+++ b/packages/react-trello-ts/bower.json
@@ -1,23 +1,10 @@
 {
-  "name": "react-trello",
-  "description": "Pluggable components to add a trello like kanban board to your application (browserified)",
-  "main": "dist/index.js",
-  "authors": [
-    "RC",
-    "Prakash"
-  ],
-  "license": "MIT",
-  "keywords": [
-    "react",
-    "trello",
-    "board"
-  ],
-  "homepage": "https://github.com/rcdexta/react-trello",
-  "ignore": [
-    "**/.*",
-    "node_modules",
-    "bower_components",
-    "test",
-    "tests"
-  ]
+	"name": "react-trello",
+	"description": "Pluggable components to add a trello like kanban board to your application (browserified)",
+	"main": "dist/index.js",
+	"authors": ["RC", "Prakash"],
+	"license": "MIT",
+	"keywords": ["react", "trello", "board"],
+	"homepage": "https://github.com/rcdexta/react-trello",
+	"ignore": ["**/.*", "node_modules", "bower_components", "test", "tests"]
 }
diff --git a/packages/react-trello-ts/package.json b/packages/react-trello-ts/package.json
index 479a15d..b960c15 100644
--- a/packages/react-trello-ts/package.json
+++ b/packages/react-trello-ts/package.json
@@ -22,7 +22,7 @@
     "docs": "build-storybook -o docs",
     "deploy-storybook": "pnpm build-storybook && gh-pages -d storybook-build",
     "build-storybook": "build-storybook -o storybook-build",
-    "lint": "pnpm rome check .",
+    "lint": "pnpm biome check .",
     "release": "pnpm build && pnpm changeset publish"
   },
   "repository": {
@@ -88,7 +88,6 @@
     "jest-cli": "^27",
     "jest-styled-components": "^7",
     "preact": ">=10.5.13 <11.0.0",
-    "prettier": "1.14.3",
     "react": "^16",
     "react-dom": "^16",
     "react-i18next": "^10.11.0",
diff --git a/packages/react-trello-ts/src/components/AddCardLink.tsx b/packages/react-trello-ts/src/components/AddCardLink.tsx
index bde9127..284f2e7 100644
--- a/packages/react-trello-ts/src/components/AddCardLink.tsx
+++ b/packages/react-trello-ts/src/components/AddCardLink.tsx
@@ -1,6 +1,6 @@
-import React, {FC, HTMLAttributes, PropsWithChildren} from 'react'
-import {AddCardLink as _AddCardLink} from '../styles/Base'
-import {createTranslate} from '..'
+import React, { FC, HTMLAttributes, PropsWithChildren } from "react";
+import { createTranslate } from "..";
+import { AddCardLink as _AddCardLink } from "../styles/Base";
 
 /**
  * AddCardLink component type
@@ -21,13 +21,14 @@ import {createTranslate} from '..'
  * 	)
  * }
  */
-export type AddCardLinkComponent<TCustomAddCardLinkProps extends {} = {}> = FC<
-  PropsWithChildren<AddCardLinkProps & TCustomAddCardLinkProps>
->
+export type AddCardLinkComponent<TCustomAddCardLinkProps extends {} = object> =
+	FC<PropsWithChildren<AddCardLinkProps & TCustomAddCardLinkProps>>;
 
-interface AddCardLinkProps extends HTMLAttributes<HTMLAnchorElement | HTMLButtonElement> {
-  t: typeof createTranslate
+interface AddCardLinkProps
+	extends HTMLAttributes<HTMLAnchorElement | HTMLButtonElement> {
+	t: typeof createTranslate;
 }
-export const AddCardLink: FC<PropsWithChildren<AddCardLinkProps>> = ({onClick, t}) => (
-  <_AddCardLink onClick={onClick}>{t('Click to add card')}</_AddCardLink>
-)
+export const AddCardLink: FC<PropsWithChildren<AddCardLinkProps>> = ({
+	onClick,
+	t,
+}) => <_AddCardLink onClick={onClick}>{t("Click to add card")}</_AddCardLink>;
diff --git a/packages/react-trello-ts/src/components/Card.tsx b/packages/react-trello-ts/src/components/Card.tsx
index e657af1..3edb8e0 100644
--- a/packages/react-trello-ts/src/components/Card.tsx
+++ b/packages/react-trello-ts/src/components/Card.tsx
@@ -1,11 +1,18 @@
-import React, {CSSProperties, FC, PropsWithChildren,} from "react";
-import {CardHeader, CardRightContent, CardTitle, Detail, Footer, MovableCardWrapper,} from "@/styles/Base";
-import {InlineInput} from "@/widgets";
-import {Tag, TagProps} from "./Card/Tag";
-import {DeleteButton} from "@/widgets";
-import {createTranslate} from "..";
-import {Card as ICard} from "../types/Board";
-import {StyledComponent} from "styled-components";
+import {
+	CardHeader,
+	CardRightContent,
+	CardTitle,
+	Detail,
+	Footer,
+	MovableCardWrapper,
+} from "@/styles/Base";
+import { InlineInput } from "@/widgets";
+import { DeleteButton } from "@/widgets";
+import React, { CSSProperties, FC, PropsWithChildren } from "react";
+import { StyledComponent } from "styled-components";
+import { createTranslate } from "..";
+import { Card as ICard } from "../types/Board";
+import { Tag, TagProps } from "./Card/Tag";
 
 /**
  * Card component type
@@ -26,7 +33,7 @@ import {StyledComponent} from "styled-components";
  * 	)
  * }
  */
-export type CardComponent<TCustomCardProps extends {} = {}> = FC<
+export type CardComponent<TCustomCardProps extends {} = object> = FC<
 	PropsWithChildren<CardProps & TCustomCardProps>
 >;
 
diff --git a/packages/react-trello-ts/src/components/Card/Tag.tsx b/packages/react-trello-ts/src/components/Card/Tag.tsx
index 2a1c253..59bfbaf 100644
--- a/packages/react-trello-ts/src/components/Card/Tag.tsx
+++ b/packages/react-trello-ts/src/components/Card/Tag.tsx
@@ -1,5 +1,5 @@
-import React, { CSSProperties, FC, PropsWithChildren } from "react";
 import { TagSpan } from "@/styles/Base";
+import React, { CSSProperties, FC, PropsWithChildren } from "react";
 
 export interface TagProps {
 	title: string;
diff --git a/packages/react-trello-ts/src/components/Lane/LaneHeader.tsx b/packages/react-trello-ts/src/components/Lane/LaneHeader.tsx
index ce6faf6..d7284f5 100644
--- a/packages/react-trello-ts/src/components/Lane/LaneHeader.tsx
+++ b/packages/react-trello-ts/src/components/Lane/LaneHeader.tsx
@@ -4,16 +4,18 @@ import React, {
 	HTMLAttributes,
 	PropsWithChildren,
 } from "react";
-import { InlineInput } from "../../widgets/InlineInput";
+import createTranslate from "../../helpers/createTranslate";
 import {
-	Title,
 	LaneHeader as _LaneHeader,
 	RightContent,
+	Title,
 } from "../../styles/Base";
+import { InlineInput } from "../../widgets/InlineInput";
 import { LaneMenu } from "./LaneHeader/LaneMenu";
-import createTranslate from "../../helpers/createTranslate";
 
-export type LaneHeaderProps = _LaneHeaderProps & { [key: string]: any };
+export type LaneHeaderProps = _LaneHeaderProps & {
+	[key: string]: any;
+};
 interface _LaneHeaderProps extends HTMLAttributes<HTMLHeadElement> {
 	updateTitle?: (title: string) => void;
 	canAddLanes?: boolean;
diff --git a/packages/react-trello-ts/src/components/Lane/LaneHeader/LaneMenu.tsx b/packages/react-trello-ts/src/components/Lane/LaneHeader/LaneMenu.tsx
index 8c4d1f7..04ebec8 100644
--- a/packages/react-trello-ts/src/components/Lane/LaneHeader/LaneMenu.tsx
+++ b/packages/react-trello-ts/src/components/Lane/LaneHeader/LaneMenu.tsx
@@ -1,20 +1,20 @@
 import React, { FC, PropsWithChildren } from "react";
 import { Popover } from "react-popopo";
 
+import createTranslate from "../../../helpers/createTranslate";
 import {
-	CustomPopoverContent,
 	CustomPopoverContainer,
+	CustomPopoverContent,
 } from "../../../styles/Base";
 import {
-	LaneMenuTitle,
-	LaneMenuHeader,
-	LaneMenuContent,
 	DeleteWrapper,
-	LaneMenuItem,
 	GenDelButton,
+	LaneMenuContent,
+	LaneMenuHeader,
+	LaneMenuItem,
+	LaneMenuTitle,
 	MenuButton,
 } from "../../../styles/Elements";
-import createTranslate from "../../../helpers/createTranslate";
 
 interface LaneMenuProps {
 	t: typeof createTranslate;
diff --git a/packages/react-trello-ts/src/components/NewCardForm.tsx b/packages/react-trello-ts/src/components/NewCardForm.tsx
index 25cceb3..2cec1b2 100644
--- a/packages/react-trello-ts/src/components/NewCardForm.tsx
+++ b/packages/react-trello-ts/src/components/NewCardForm.tsx
@@ -1,4 +1,5 @@
-import React, {Component, FC, PropsWithChildren, useState} from "react";
+import React, { Component, FC, PropsWithChildren, useState } from "react";
+import createTranslate from "../helpers/createTranslate";
 import {
 	CardForm,
 	CardHeader,
@@ -9,7 +10,6 @@ import {
 } from "../styles/Base";
 import { AddButton, CancelButton } from "../styles/Elements";
 import { EditableLabel } from "../widgets/EditableLabel";
-import createTranslate from "../helpers/createTranslate";
 
 export interface FormState {
 	title: string;
diff --git a/packages/react-trello-ts/src/components/NewLaneForm.tsx b/packages/react-trello-ts/src/components/NewLaneForm.tsx
index 54de9e3..112f8ad 100644
--- a/packages/react-trello-ts/src/components/NewLaneForm.tsx
+++ b/packages/react-trello-ts/src/components/NewLaneForm.tsx
@@ -5,15 +5,17 @@ import React, {
 	useRef,
 	useState,
 } from "react";
+import { ThemedStyledFunction } from "styled-components";
+import { v1 } from "uuid";
+import createTranslate from "../helpers/createTranslate";
 import { LaneTitle, NewLaneButtons, Section } from "../styles/Base";
 import { AddButton, CancelButton } from "../styles/Elements";
 import { NewLaneTitleEditor } from "../widgets/NewLaneTitleEditor";
-import { v1 } from "uuid";
-import { ThemedStyledFunction } from "styled-components";
-import createTranslate from "../helpers/createTranslate";
 
 interface NewLaneFormProps
-	extends HTMLAttributes<ThemedStyledFunction<"section", any, {}, never>> {
+	extends HTMLAttributes<
+		ThemedStyledFunction<"section", object, object, never>
+	> {
 	onCancel: () => void;
 	onAdd: ({ id, title }: { id: string; title: string }) => void;
 	t: typeof createTranslate;
diff --git a/packages/react-trello-ts/src/components/NewLaneSection.tsx b/packages/react-trello-ts/src/components/NewLaneSection.tsx
index 9fca823..88f7892 100644
--- a/packages/react-trello-ts/src/components/NewLaneSection.tsx
+++ b/packages/react-trello-ts/src/components/NewLaneSection.tsx
@@ -1,7 +1,7 @@
 import React, { FC, PropsWithChildren } from "react";
+import { createTranslate } from "..";
 import { NewLaneSection as _NewLaneSection } from "../styles/Base";
 import { AddLaneLink } from "../styles/Elements";
-import { createTranslate } from "..";
 
 export const NewLaneSection: FC<
 	PropsWithChildren<{ t: typeof createTranslate; onClick: () => void }>
diff --git a/packages/react-trello-ts/src/components/index.ts b/packages/react-trello-ts/src/components/index.ts
index 6db6896..c80a9cb 100644
--- a/packages/react-trello-ts/src/components/index.ts
+++ b/packages/react-trello-ts/src/components/index.ts
@@ -1,17 +1,17 @@
-import { LaneHeader } from "./Lane/LaneHeader";
-import { LaneFooter } from "./Lane/LaneFooter";
-import { Card } from "./Card";
-import { Loader } from "./Loader";
-import { NewLaneForm } from "./NewLaneForm";
-import { NewCardForm } from "./NewCardForm";
-import { AddCardLink } from "./AddCardLink";
-import { NewLaneSection } from "./NewLaneSection";
 import {
 	BoardWrapper,
 	GlobalStyle,
 	ScrollableLane,
 	Section,
 } from "../styles/Base";
+import { AddCardLink } from "./AddCardLink";
+import { Card } from "./Card";
+import { LaneFooter } from "./Lane/LaneFooter";
+import { LaneHeader } from "./Lane/LaneHeader";
+import { Loader } from "./Loader";
+import { NewCardForm } from "./NewCardForm";
+import { NewLaneForm } from "./NewLaneForm";
+import { NewLaneSection } from "./NewLaneSection";
 
 export {
 	GlobalStyle,
diff --git a/packages/react-trello-ts/src/controllers/Board.tsx b/packages/react-trello-ts/src/controllers/Board.tsx
index 659b605..ac53165 100644
--- a/packages/react-trello-ts/src/controllers/Board.tsx
+++ b/packages/react-trello-ts/src/controllers/Board.tsx
@@ -1,10 +1,10 @@
-import React, { createContext, FC, PropsWithChildren } from "react";
+import classNames from "classnames";
+import React, { FC, PropsWithChildren, createContext } from "react";
 import { v1 } from "uuid";
-import { BoardContainer } from "./BoardContainer";
 import * as DefaultComponets from "../components";
-import { BoardData } from "../types/Board";
 import { store } from "../store/store";
-import classNames from "classnames";
+import { BoardData } from "../types/Board";
+import { BoardContainer } from "./BoardContainer";
 
 export const Board: FC<
 	PropsWithChildren<{
@@ -15,7 +15,7 @@ export const Board: FC<
 		t?: any;
 	}>
 > = ({ data, children, className, components, id, t, ...rest }) => {
-	const allClassNames = classNames('react-trello-board', className || '')
+	const allClassNames = classNames("react-trello-board", className || "");
 
 	return (
 		<BoardContext.Provider value={store}>
diff --git a/packages/react-trello-ts/src/controllers/BoardContainer.tsx b/packages/react-trello-ts/src/controllers/BoardContainer.tsx
index eafa1fc..7313db6 100644
--- a/packages/react-trello-ts/src/controllers/BoardContainer.tsx
+++ b/packages/react-trello-ts/src/controllers/BoardContainer.tsx
@@ -5,17 +5,17 @@ import React, {
 	useEffect,
 	useState,
 } from "react";
+import { PopoverWrapper } from "react-popopo";
 import Container from "../dnd/Container";
 import { Draggable } from "../dnd/Draggable";
 import { Lane } from "./Lane";
-import { PopoverWrapper } from "react-popopo";
 
 import { createTranslate } from "..";
-import { BoardData, Card, Lane as ILane } from "../types/Board";
 import { FormState as NewCardFormState } from "../components/NewCardForm";
-import * as DefaultComponents from "./../components";
-import { EventBusHandle } from "../types/EventBus";
 import { useBoard } from "../store/useBoard";
+import { BoardData, Card, Lane as ILane } from "../types/Board";
+import { EventBusHandle } from "../types/EventBus";
+import * as DefaultComponents from "./../components";
 export interface BoardContainerProps {
 	id?: string;
 	components?: Partial<typeof DefaultComponents>;
@@ -121,6 +121,7 @@ export const BoardContainer: FC<PropsWithChildren<BoardContainerProps>> = ({
 }) => {
 	const [addLaneMode, setAddLaneMode] = useState(false);
 	const board = useBoard();
+	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
 	useEffect(() => {
 		board.initializeLanes(data.lanes);
 		if (eventBusHandle) {
@@ -131,6 +132,7 @@ export const BoardContainer: FC<PropsWithChildren<BoardContainerProps>> = ({
 		};
 	}, []);
 
+	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
 	useEffect(() => {
 		if (JSON.stringify(board.data) !== JSON.stringify(data)) {
 			onDataChange(data);
diff --git a/packages/react-trello-ts/src/controllers/Lane.tsx b/packages/react-trello-ts/src/controllers/Lane.tsx
index 38ea101..546a375 100644
--- a/packages/react-trello-ts/src/controllers/Lane.tsx
+++ b/packages/react-trello-ts/src/controllers/Lane.tsx
@@ -1,12 +1,12 @@
 import React, { CSSProperties, FC, PropsWithChildren, useEffect } from "react";
 import { v1 } from "uuid";
 
+import classNames from "classnames";
+import { components, createTranslate } from "..";
 import Container from "../dnd/Container";
 import { Draggable } from "../dnd/Draggable";
-import classNames from 'classnames'
-import { Card, Lane as ILane } from "../types/Board";
-import { components, createTranslate } from "..";
 import { useBoard } from "../store/useBoard";
+import { Card, Lane as ILane } from "../types/Board";
 
 interface LaneProps {
 	id: string;
@@ -116,6 +116,7 @@ export const Lane: FC<PropsWithChildren<LaneProps>> = ({
 	const [addCardMode, setAddCardMode] = React.useState(false);
 	const [isDraggingOver, setIsDraggingOver] = React.useState(false);
 
+	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
 	useEffect(() => {
 		setCurrentPageState(currentPage);
 	}, [cards]);
@@ -127,9 +128,7 @@ export const Lane: FC<PropsWithChildren<LaneProps>> = ({
 		if (!sortFunction) {
 			return cards;
 		}
-		return cards.concat().sort(function (card1, card2) {
-			return sortFunction(card1, card2);
-		});
+		return cards.concat().sort((card1, card2) => sortFunction(card1, card2));
 	};
 	const addNewCard = (params: {
 		title?: string;
@@ -252,7 +251,8 @@ export const Lane: FC<PropsWithChildren<LaneProps>> = ({
 					/>
 				);
 				return cardDraggable &&
-					(!card.hasOwnProperty("draggable") || card.draggable) ? (
+					(!Object.prototype.hasOwnProperty.call(card, "draggable") ||
+						card.draggable) ? (
 					<Draggable key={card.id}>{cardToRender}</Draggable>
 				) : (
 					<span key={card.id}>{cardToRender}</span>
@@ -298,7 +298,7 @@ export const Lane: FC<PropsWithChildren<LaneProps>> = ({
 		);
 	};
 
-    const allClassNames = classNames('react-trello-lane', className || '')
+	const allClassNames = classNames("react-trello-lane", className || "");
 	const showFooter = collapsibleLanes && cards.length > 0;
 	return (
 		<components.Section
diff --git a/packages/react-trello-ts/src/dnd/Container.tsx b/packages/react-trello-ts/src/dnd/Container.tsx
index b69b7e1..33c377f 100644
--- a/packages/react-trello-ts/src/dnd/Container.tsx
+++ b/packages/react-trello-ts/src/dnd/Container.tsx
@@ -75,13 +75,12 @@ class Container extends Component<ContainerProps> {
 	render() {
 		if (this.props.render) {
 			return this.props.render(this.setRef);
-		} else {
-			return (
-				<div style={this.props.style} ref={this.setRef}>
-					{this.props.children}
-				</div>
-			);
 		}
+		return (
+			<div style={this.props.style} ref={this.setRef}>
+				{this.props.children}
+			</div>
+		);
 	}
 
 	setRef(element) {
diff --git a/packages/react-trello-ts/src/dnd/Draggable.tsx b/packages/react-trello-ts/src/dnd/Draggable.tsx
index fc51ded..9a41fe1 100644
--- a/packages/react-trello-ts/src/dnd/Draggable.tsx
+++ b/packages/react-trello-ts/src/dnd/Draggable.tsx
@@ -1,20 +1,23 @@
-import React, {Component, ReactElement} from 'react'
-import {constants} from 'trello-smooth-dnd'
-const {wrapperClass} = constants
+import React, { Component, ReactElement } from "react";
+import { constants } from "trello-smooth-dnd";
+const { wrapperClass } = constants;
 
-export class Draggable extends Component<{render?: ()=>ReactElement, className?:string}> {
-  render() {
-    if (this.props.render) {
-      return React.cloneElement(this.props.render(), {className: wrapperClass})
-    }
+export class Draggable extends Component<{
+	render?: () => ReactElement;
+	className?: string;
+}> {
+	render() {
+		if (this.props.render) {
+			return React.cloneElement(this.props.render(), {
+				className: wrapperClass,
+			});
+		}
 
-		const clsName = this.props.className ? `${this.props.className} ` : ''
-    return (
-      <div {...this.props} className={`${clsName}${wrapperClass}`}>
-        {this.props.children}
-      </div>
-    )
-  }
+		const clsName = this.props.className ? `${this.props.className} ` : "";
+		return (
+			<div {...this.props} className={`${clsName}${wrapperClass}`}>
+				{this.props.children}
+			</div>
+		);
+	}
 }
-
-
diff --git a/packages/react-trello-ts/src/helpers/createTranslate.ts b/packages/react-trello-ts/src/helpers/createTranslate.ts
index c3e1de7..77c206b 100644
--- a/packages/react-trello-ts/src/helpers/createTranslate.ts
+++ b/packages/react-trello-ts/src/helpers/createTranslate.ts
@@ -1,14 +1,14 @@
 const getValue = (table) => (key) => {
-  const keys = key.includes('.') ? key.split('.') : [key];
-  let value = table;
-  for (const k of keys) {
-    if (value && k in value) {
-      value = value[k];
-    } else {
-      return undefined;
-    }
-  }
-  return value;
+	const keys = key.includes(".") ? key.split(".") : [key];
+	let value = table;
+	for (const k of keys) {
+		if (value && k in value) {
+			value = value[k];
+		} else {
+			return undefined;
+		}
+	}
+	return value;
 };
 
 export default (table) => (key) => getValue(table)(key);
diff --git a/packages/react-trello-ts/src/helpers/deprecationWarnings.ts b/packages/react-trello-ts/src/helpers/deprecationWarnings.ts
index dabeda8..ae1a5ef 100644
--- a/packages/react-trello-ts/src/helpers/deprecationWarnings.ts
+++ b/packages/react-trello-ts/src/helpers/deprecationWarnings.ts
@@ -17,9 +17,11 @@ const warn = (prop: keyof typeof REPLACE_TABLE) => {
 };
 
 export default (props) => {
-	Object.keys(REPLACE_TABLE).forEach((key: keyof typeof REPLACE_TABLE) => {
-		if (props.hasOwnProperty(key)) {
-			warn(key);
+	for (const key in REPLACE_TABLE) {
+		if (Object.prototype.hasOwnProperty.call(REPLACE_TABLE, key)) {
+			warn(key as keyof typeof REPLACE_TABLE);
+		} else {
+			console.warn(`react-trello property '${key}' is removed`);
 		}
-	});
+	}
 };
diff --git a/packages/react-trello-ts/src/index.tsx b/packages/react-trello-ts/src/index.tsx
index d070ee0..d5f6755 100644
--- a/packages/react-trello-ts/src/index.tsx
+++ b/packages/react-trello-ts/src/index.tsx
@@ -1,20 +1,20 @@
 import React from "react";
 
-import { Draggable } from "./dnd/Draggable";
-import Container from "./dnd/Container";
+import * as DefaultComponents from "./components";
 import {
 	BoardContainer,
 	BoardContainerProps,
 } from "./controllers/BoardContainer";
 import { Lane } from "./controllers/Lane";
+import Container from "./dnd/Container";
+import { Draggable } from "./dnd/Draggable";
 import deprecationWarnings from "./helpers/deprecationWarnings";
-import * as DefaultComponents from "./components";
 import locales from "./locales";
 
 export * from "./widgets";
 
-import createTranslate from "./helpers/createTranslate";
 import { Board } from "./controllers/Board";
+import createTranslate from "./helpers/createTranslate";
 
 export { Draggable, Container, BoardContainer, Lane, createTranslate, locales };
 
diff --git a/packages/react-trello-ts/src/locales/en/translation.json b/packages/react-trello-ts/src/locales/en/translation.json
index 69025dc..e1ceefd 100644
--- a/packages/react-trello-ts/src/locales/en/translation.json
+++ b/packages/react-trello-ts/src/locales/en/translation.json
@@ -1,16 +1,16 @@
 {
-  "Add another lane": "+ Add another lane",
-  "Click to add card": "Click to add card",
-  "Delete lane": "Delete lane",
-  "Lane actions": "Lane actions",
-  "button": {
-    "Add lane": "Add lane",
-    "Add card": "Add card",
-    "Cancel": "Cancel"
-  },
-  "placeholder": {
-    "title": "title",
-    "description": "description",
-    "label": "label"
-  }
+	"Add another lane": "+ Add another lane",
+	"Click to add card": "Click to add card",
+	"Delete lane": "Delete lane",
+	"Lane actions": "Lane actions",
+	"button": {
+		"Add lane": "Add lane",
+		"Add card": "Add card",
+		"Cancel": "Cancel"
+	},
+	"placeholder": {
+		"title": "title",
+		"description": "description",
+		"label": "label"
+	}
 }
diff --git a/packages/react-trello-ts/src/locales/ru/translation.json b/packages/react-trello-ts/src/locales/ru/translation.json
index 1f83b00..92d4563 100644
--- a/packages/react-trello-ts/src/locales/ru/translation.json
+++ b/packages/react-trello-ts/src/locales/ru/translation.json
@@ -1,16 +1,16 @@
 {
-  "Add another lane": "＋Добавить колонку",
-  "Click to add card": "＋Добавить карточку",
-  "Delete lane": "Удалить колонку",
-  "Lane actions": "Действия над колонкой",
-  "button": {
-    "Add card": "Добавить карту",
-    "Add lane": "Добавить колонку",
-    "Cancel": "Отменить"
-  },
-  "placeholder": {
-    "title": "Название",
-    "description": "Описание",
-    "label": "Метка"
-  }
+	"Add another lane": "＋Добавить колонку",
+	"Click to add card": "＋Добавить карточку",
+	"Delete lane": "Удалить колонку",
+	"Lane actions": "Действия над колонкой",
+	"button": {
+		"Add card": "Добавить карту",
+		"Add lane": "Добавить колонку",
+		"Cancel": "Отменить"
+	},
+	"placeholder": {
+		"title": "Название",
+		"description": "Описание",
+		"label": "Метка"
+	}
 }
diff --git a/packages/react-trello-ts/src/store/store.ts b/packages/react-trello-ts/src/store/store.ts
index afe35bc..d3e2f9f 100644
--- a/packages/react-trello-ts/src/store/store.ts
+++ b/packages/react-trello-ts/src/store/store.ts
@@ -1,6 +1,6 @@
 import produce from "immer";
-import { BoardData, Card, Lane } from "../types/Board";
 import create from "zustand";
+import { BoardData, Card, Lane } from "../types/Board";
 
 export interface State {
 	data: BoardData;
@@ -123,6 +123,7 @@ export const store = create<State>()((set) => ({
 	updateLane: (lane) =>
 		set(
 			produce<State>((state) => {
+				// biome-ignore lint/style/noParameterAssign: this is as expected with immer
 				lane = { ...lane, ...state.data.lanes.find((l) => l.id === lane.id) };
 			}),
 		),
diff --git a/packages/react-trello-ts/src/store/useBoard.ts b/packages/react-trello-ts/src/store/useBoard.ts
index 84b6e1a..c03043e 100644
--- a/packages/react-trello-ts/src/store/useBoard.ts
+++ b/packages/react-trello-ts/src/store/useBoard.ts
@@ -1,6 +1,6 @@
 import { useContext } from "react";
-import { BoardContext } from "../controllers/Board";
 import { useStore } from "zustand";
+import { BoardContext } from "../controllers/Board";
 
 export const useBoard = () => {
 	const store = useContext(BoardContext);
diff --git a/packages/react-trello-ts/src/styles/Base.ts b/packages/react-trello-ts/src/styles/Base.ts
index 2571de5..19e56a3 100644
--- a/packages/react-trello-ts/src/styles/Base.ts
+++ b/packages/react-trello-ts/src/styles/Base.ts
@@ -117,8 +117,8 @@ export const LaneHeader = styled(Header)`
       padding: 0px;
       line-height: 30px;
     `} ${(props) =>
-	!props.editLaneTitle &&
-	css`
+		!props.editLaneTitle &&
+		css`
       padding: 0px 5px;
     `};
 `;
diff --git a/packages/react-trello-ts/src/widgets/DeleteButton.tsx b/packages/react-trello-ts/src/widgets/DeleteButton.tsx
index 171ea6d..1d2a969 100644
--- a/packages/react-trello-ts/src/widgets/DeleteButton.tsx
+++ b/packages/react-trello-ts/src/widgets/DeleteButton.tsx
@@ -1,8 +1,8 @@
 import React, { FC, HTMLAttributes, PropsWithChildren } from "react";
-import { DeleteWrapper, DelButton } from "../styles/Elements";
 import { StyledComponent, ThemedStyledFunction } from "styled-components";
+import { DelButton, DeleteWrapper } from "../styles/Elements";
 
-interface DeleteButtonProps extends HTMLAttributes<HTMLDivElement> {}
+type DeleteButtonProps = HTMLAttributes<HTMLDivElement>;
 export const DeleteButton: FC<PropsWithChildren<DeleteButtonProps>> = ({
 	...rest
 }) => {
diff --git a/packages/react-trello-ts/src/widgets/EditableLabel.tsx b/packages/react-trello-ts/src/widgets/EditableLabel.tsx
index 1fab173..f2d4200 100644
--- a/packages/react-trello-ts/src/widgets/EditableLabel.tsx
+++ b/packages/react-trello-ts/src/widgets/EditableLabel.tsx
@@ -1,7 +1,7 @@
 import React, {
-	createRef,
 	FC,
 	PropsWithChildren,
+	createRef,
 	useEffect,
 	useState,
 } from "react";
diff --git a/packages/react-trello-ts/src/widgets/InlineInput.tsx b/packages/react-trello-ts/src/widgets/InlineInput.tsx
index ed4d95f..b9f292c 100644
--- a/packages/react-trello-ts/src/widgets/InlineInput.tsx
+++ b/packages/react-trello-ts/src/widgets/InlineInput.tsx
@@ -1,104 +1,102 @@
-import React, {FC, useEffect, useRef, useState} from 'react'
-import {InlineInput as _InlineInput} from '@/styles/Base'
-import autosize from 'autosize'
+import { InlineInput as _InlineInput } from "@/styles/Base";
+import autosize from "autosize";
+import React, { FC, useEffect, useRef, useState } from "react";
 
 interface InlineInputProps {
-  onSave?: (inputValue: string) => void
-  onCancel?: () => void
-  border?: boolean
-  placeholder?: string
-  value?: string
-  autoFocus?: boolean
-  resize?: 'none' | 'vertical' | 'horizontal'
+	onSave?: (inputValue: string) => void;
+	onCancel?: () => void;
+	border?: boolean;
+	placeholder?: string;
+	value?: string;
+	autoFocus?: boolean;
+	resize?: "none" | "vertical" | "horizontal";
 }
 
 export const InlineInput: FC<InlineInputProps> = ({
-  autoFocus = false,
-  border = false,
-  onSave = () => {},
-  onCancel = () => {},
-  placeholder = '',
-  value = '',
-  resize = 'none'
+	autoFocus = false,
+	border = false,
+	onSave = () => {},
+	onCancel = () => {},
+	placeholder = "",
+	value = "",
+	resize = "none",
 }) => {
-  const [inputValue, setInputValue] = useState(value)
-  const inputRef = useRef<HTMLTextAreaElement | null>(null)
+	const [inputValue, setInputValue] = useState(value);
+	const inputRef = useRef<HTMLTextAreaElement | null>(null);
 
-  const onFocus = (e: React.FocusEvent<HTMLTextAreaElement>) => e.target.select()
+	const onFocus = (e: React.FocusEvent<HTMLTextAreaElement>) =>
+		e.target.select();
 
-  const onMouseDown = (e: React.MouseEvent<HTMLTextAreaElement>) => {
-    if (document.activeElement !== e.target) {
-      e.preventDefault()
-      inputRef.current.focus()
-    }
-  }
+	const onMouseDown = (e: React.MouseEvent<HTMLTextAreaElement>) => {
+		if (document.activeElement !== e.target) {
+			e.preventDefault();
+			inputRef.current.focus();
+		}
+	};
 
-  const onBlur = () => {
-    updateValue()
-  }
+	const onBlur = () => {
+		updateValue();
+	};
 
-  const onKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter') {
-      inputRef.current.blur()
-      e.preventDefault()
-    }
-    if (e.key === 'Escape') {
-      setValue(value)
-      inputRef.current.blur()
-      e.preventDefault()
-    }
-    if (e.key === 'Tab') {
-      if (inputValue.length === 0) {
-        onCancel()
-      }
-      inputRef.current.blur()
-      e.preventDefault()
-    }
-  }
+	const onKeyDown = (e: React.KeyboardEvent) => {
+		if (e.key === "Enter") {
+			inputRef.current.blur();
+			e.preventDefault();
+		}
+		if (e.key === "Escape") {
+			setValue(value);
+			inputRef.current.blur();
+			e.preventDefault();
+		}
+		if (e.key === "Tab") {
+			if (inputValue.length === 0) {
+				onCancel();
+			}
+			inputRef.current.blur();
+			e.preventDefault();
+		}
+	};
 
-  const getValue = () => inputRef.current.value || ''
-  const setValue = (newValue: string) => {
-    if (inputRef.current) {
-      inputRef.current.value = newValue
-    }
-  }
+	const getValue = () => inputRef.current.value || "";
+	const setValue = (newValue: string) => {
+		if (inputRef.current) {
+			inputRef.current.value = newValue;
+		}
+	};
 
-  const updateValue = () => {
-    if (getValue() !== value) {
-      onSave(getValue())
-    }
-  }
+	const updateValue = () => {
+		if (getValue() !== value) {
+			onSave(getValue());
+		}
+	};
 
-  const setRef = (ref: HTMLTextAreaElement) => {
-    inputRef.current = ref
-    if (resize !== 'none') {
-      autosize(inputRef.current)
-    }
-  }
+	const setRef = (ref: HTMLTextAreaElement) => {
+		inputRef.current = ref;
+		if (resize !== "none") {
+			autosize(inputRef.current);
+		}
+	};
 
-  useEffect(
-    () => {
-      setInputValue(value)
-    },
-    [value]
-  )
+	useEffect(() => {
+		setInputValue(value);
+	}, [value]);
 
-  return (
-    <_InlineInput
-      ref={setRef}
-      border={border}
-      onMouseDown={onMouseDown}
-      onFocus={onFocus}
-      onBlur={onBlur}
-      onKeyDown={onKeyDown}
-      placeholder={value.length === 0 ? undefined : placeholder}
-      defaultValue={value}
-      autoComplete="off"
-      autoCorrect="off"
-      autoCapitalize="off"
-      spellCheck="false"
-      rows={1}
-      autoFocus={autoFocus}
-    />
-  )
-}
+	return (
+		<_InlineInput
+			ref={setRef}
+			border={border}
+			onMouseDown={onMouseDown}
+			onFocus={onFocus}
+			onBlur={onBlur}
+			onKeyDown={onKeyDown}
+			placeholder={value.length === 0 ? undefined : placeholder}
+			defaultValue={value}
+			autoComplete="off"
+			autoCorrect="off"
+			autoCapitalize="off"
+			spellCheck="false"
+			rows={1}
+			autoFocus={autoFocus}
+		/>
+	);
+};
diff --git a/packages/react-trello-ts/src/widgets/NewLaneTitleEditor.tsx b/packages/react-trello-ts/src/widgets/NewLaneTitleEditor.tsx
index f99086d..1b877ce 100644
--- a/packages/react-trello-ts/src/widgets/NewLaneTitleEditor.tsx
+++ b/packages/react-trello-ts/src/widgets/NewLaneTitleEditor.tsx
@@ -1,3 +1,4 @@
+import autosize from "autosize";
 import React, {
 	HTMLAttributes,
 	PropsWithChildren,
@@ -5,7 +6,6 @@ import React, {
 	useState,
 } from "react";
 import { InlineInput } from "../styles/Base";
-import autosize from "autosize";
 
 interface NewLaneTitleEditorProps extends HTMLAttributes<HTMLTextAreaElement> {
 	onSave?: (inputValue: string) => void;
diff --git a/packages/react-trello-ts/stories/AsyncLoad.story.tsx b/packages/react-trello-ts/stories/AsyncLoad.story.tsx
index d0cf7d5..7aef2e4 100644
--- a/packages/react-trello-ts/stories/AsyncLoad.story.tsx
+++ b/packages/react-trello-ts/stories/AsyncLoad.story.tsx
@@ -1,5 +1,5 @@
-import React, { Component } from "react";
 import { storiesOf } from "@storybook/react";
+import React, { Component } from "react";
 
 import Board from "../src";
 
diff --git a/packages/react-trello-ts/stories/Base.story.tsx b/packages/react-trello-ts/stories/Base.story.tsx
index ccd4dd2..c6cc554 100644
--- a/packages/react-trello-ts/stories/Base.story.tsx
+++ b/packages/react-trello-ts/stories/Base.story.tsx
@@ -13,16 +13,16 @@ import data from "./data/base.json";
 
 import React from "react";
 
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
 // import {Board} from './../src/controllers/Board'
-export default {
+export default ({
 	/* 👇 The title prop is optional.
 	 * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
 	 * to learn how to generate automatic titles
 	 */
 	title: "Basic Functions",
 	component: Board,
-} as ComponentMeta<typeof Board>;
+} as ComponentMeta<typeof Board>);
 
 export const Primary: ComponentStory<typeof Board> = () => (
 	<Board data={data} />
diff --git a/packages/react-trello-ts/stories/CollapsibleLanes.story.tsx b/packages/react-trello-ts/stories/CollapsibleLanes.story.tsx
index 5d727cd..30684b3 100644
--- a/packages/react-trello-ts/stories/CollapsibleLanes.story.tsx
+++ b/packages/react-trello-ts/stories/CollapsibleLanes.story.tsx
@@ -1,5 +1,5 @@
-import React from "react";
 import { storiesOf } from "@storybook/react";
+import React from "react";
 import debug from "./helpers/debug";
 
 import Board from "../src";
diff --git a/packages/react-trello-ts/stories/CustomAddCardLink.story.tsx b/packages/react-trello-ts/stories/CustomAddCardLink.story.tsx
index 1298779..84d62cd 100644
--- a/packages/react-trello-ts/stories/CustomAddCardLink.story.tsx
+++ b/packages/react-trello-ts/stories/CustomAddCardLink.story.tsx
@@ -1,15 +1,21 @@
-import React from 'react'
-import {storiesOf} from '@storybook/react'
+import { storiesOf } from "@storybook/react";
+import React from "react";
 
-import Board from '../src'
-import {AddCardLinkComponent} from 'rt/components/AddCardLink'
+import { AddCardLinkComponent } from "rt/components/AddCardLink";
+import Board from "../src";
 
-const data = require('./data/collapsible.json')
+const data = require("./data/collapsible.json");
 
-const CustomAddCardLink: AddCardLinkComponent = ({onClick, t}) => (
-  <button onClick={onClick}>{t('Click to add card')}</button>
-)
+const CustomAddCardLink: AddCardLinkComponent = ({ onClick, t }) => (
+	<button onClick={onClick}>{t("Click to add card")}</button>
+);
 
-storiesOf('Custom Components', module).add('AddCardLink', () => {
-  return <Board data={data} editable={true} components={{AddCardLink: CustomAddCardLink}} />
-})
+storiesOf("Custom Components", module).add("AddCardLink", () => {
+	return (
+		<Board
+			data={data}
+			editable={true}
+			components={{ AddCardLink: CustomAddCardLink }}
+		/>
+	);
+});
diff --git a/packages/react-trello-ts/stories/CustomCard.story.tsx b/packages/react-trello-ts/stories/CustomCard.story.tsx
index 04518a6..aed1f99 100644
--- a/packages/react-trello-ts/stories/CustomCard.story.tsx
+++ b/packages/react-trello-ts/stories/CustomCard.story.tsx
@@ -1,11 +1,11 @@
-import React, { CSSProperties } from "react";
 import { storiesOf } from "@storybook/react";
-import { MovableCardWrapper } from "rt/styles/Base";
-import { DeleteButton } from "./../src/widgets/DeleteButton";
-import Board from "../src";
+import React, { CSSProperties } from "react";
+import { CardComponent } from "rt/components/Card";
 import { Tag } from "rt/components/Card/Tag";
+import { MovableCardWrapper } from "rt/styles/Base";
 import { BoardData } from "rt/types/Board";
-import { CardComponent } from "rt/components/Card";
+import Board from "../src";
+import { DeleteButton } from "./../src/widgets/DeleteButton";
 
 const CustomCard: CardComponent<{
 	name: string;
diff --git a/packages/react-trello-ts/stories/CustomCardWithDrag.story.tsx b/packages/react-trello-ts/stories/CustomCardWithDrag.story.tsx
index ff49fa3..2dd5791 100644
--- a/packages/react-trello-ts/stories/CustomCardWithDrag.story.tsx
+++ b/packages/react-trello-ts/stories/CustomCardWithDrag.story.tsx
@@ -1,12 +1,12 @@
-import React from "react";
 import { storiesOf } from "@storybook/react";
+import React from "react";
 
 import { MovableCardWrapper } from "rt/styles/Base";
 import debug from "./helpers/debug";
 
-import Board from "../src";
 import produce from "immer";
 import { BoardData, Card } from "rt/types/Board";
+import Board from "../src";
 
 const CustomCard = (props) => {
 	return (
diff --git a/packages/react-trello-ts/stories/CustomLaneFooter.story.tsx b/packages/react-trello-ts/stories/CustomLaneFooter.story.tsx
index a1a12df..2f1496f 100644
--- a/packages/react-trello-ts/stories/CustomLaneFooter.story.tsx
+++ b/packages/react-trello-ts/stories/CustomLaneFooter.story.tsx
@@ -1,8 +1,8 @@
-import React from "react";
 import { storiesOf } from "@storybook/react";
+import React from "react";
 
-import Board from "../src";
 import { LaneFooterComponent } from "rt/components/Lane/LaneFooter";
+import Board from "../src";
 
 import data from "./data/collapsible.json";
 
diff --git a/packages/react-trello-ts/stories/CustomLaneHeader.story.tsx b/packages/react-trello-ts/stories/CustomLaneHeader.story.tsx
index 9057640..fd6171c 100644
--- a/packages/react-trello-ts/stories/CustomLaneHeader.story.tsx
+++ b/packages/react-trello-ts/stories/CustomLaneHeader.story.tsx
@@ -1,8 +1,8 @@
-import React from "react";
 import { storiesOf } from "@storybook/react";
+import React from "react";
 
-import Board from "../src";
 import { LaneHeaderProps } from "rt/components/Lane/LaneHeader";
+import Board from "../src";
 
 const CustomLaneHeader = ({
 	label,
@@ -31,7 +31,11 @@ const CustomLaneHeader = ({
 				<div style={{ fontSize: 14, fontWeight: "bold" }}>{title}</div>
 				{label && (
 					<div style={{ width: "30%", textAlign: "right", fontSize: 13 }}>
-						<button onClick={buttonHandler} style={{ cursor: "pointer" }}>
+						<button
+							onClick={buttonHandler}
+							style={{ cursor: "pointer" }}
+							type="submit"
+						>
 							?
 						</button>
 					</div>
diff --git a/packages/react-trello-ts/stories/CustomNewCardForm.story.tsx b/packages/react-trello-ts/stories/CustomNewCardForm.story.tsx
index 18316d8..ccefe88 100644
--- a/packages/react-trello-ts/stories/CustomNewCardForm.story.tsx
+++ b/packages/react-trello-ts/stories/CustomNewCardForm.story.tsx
@@ -1,8 +1,8 @@
-import React, { Component } from "react";
 import { storiesOf } from "@storybook/react";
+import React, { Component } from "react";
 
+import { NewCardFormProps } from "@/components/NewCardForm";
 import Board from "../src";
-import {NewCardFormProps} from "@/components/NewCardForm";
 
 const data = require("./data/base.json");
 
@@ -14,7 +14,7 @@ class NewCardForm extends Component<NewCardFormProps> {
 			label: "",
 			laneId: this.props.laneId,
 			title: this.titleRef.value,
-			description: this.descRef.value
+			description: this.descRef.value,
 		});
 	setTitleRef = (ref) => (this.titleRef = ref);
 	setDescRef = (ref) => (this.descRef = ref);
@@ -57,7 +57,7 @@ storiesOf("Custom Components", module).add(
 			data={data}
 			editable={true}
 			// @ts-ignore
-			components={{ NewCardForm: NewCardForm}}
+			components={{ NewCardForm: NewCardForm }}
 		/>
 	),
 	{ info: "Pass a custom new card form compoment to add card" },
diff --git a/packages/react-trello-ts/stories/CustomNewLaneForm.story.tsx b/packages/react-trello-ts/stories/CustomNewLaneForm.story.tsx
index 386a9e1..a832a36 100644
--- a/packages/react-trello-ts/stories/CustomNewLaneForm.story.tsx
+++ b/packages/react-trello-ts/stories/CustomNewLaneForm.story.tsx
@@ -1,5 +1,5 @@
-import React, { Component } from "react";
 import { storiesOf } from "@storybook/react";
+import React, { Component } from "react";
 
 import Board from "../src";
 
diff --git a/packages/react-trello-ts/stories/CustomNewLaneSection.story.tsx b/packages/react-trello-ts/stories/CustomNewLaneSection.story.tsx
index 03df5c3..cff1fa2 100644
--- a/packages/react-trello-ts/stories/CustomNewLaneSection.story.tsx
+++ b/packages/react-trello-ts/stories/CustomNewLaneSection.story.tsx
@@ -1,5 +1,5 @@
-import React from "react";
 import { storiesOf } from "@storybook/react";
+import React from "react";
 
 import Board from "../src";
 
diff --git a/packages/react-trello-ts/stories/Deprecations.story.tsx b/packages/react-trello-ts/stories/Deprecations.story.tsx
index e8da123..434cfdd 100644
--- a/packages/react-trello-ts/stories/Deprecations.story.tsx
+++ b/packages/react-trello-ts/stories/Deprecations.story.tsx
@@ -1,12 +1,12 @@
+import { storiesOf } from "@storybook/react";
 // @ts-nocheck
 import React, { Component } from "react";
-import { storiesOf } from "@storybook/react";
 
 import Board from "../src";
 
-import "./board.css";
 import { CardProps } from "rt/components/Card";
 import { Tag } from "rt/components/Card/Tag";
+import "./board.css";
 
 const data = require("./data/base.json");
 
diff --git a/packages/react-trello-ts/stories/DragDrop.story.tsx b/packages/react-trello-ts/stories/DragDrop.story.tsx
index 06e6619..ba672d2 100644
--- a/packages/react-trello-ts/stories/DragDrop.story.tsx
+++ b/packages/react-trello-ts/stories/DragDrop.story.tsx
@@ -1,5 +1,5 @@
-import React from "react";
 import { storiesOf } from "@storybook/react";
+import React from "react";
 import debug from "./helpers/debug";
 
 import Board from "../src";
diff --git a/packages/react-trello-ts/stories/EditableBoard.story.tsx b/packages/react-trello-ts/stories/EditableBoard.story.tsx
index 1cdc064..9d6ddb6 100644
--- a/packages/react-trello-ts/stories/EditableBoard.story.tsx
+++ b/packages/react-trello-ts/stories/EditableBoard.story.tsx
@@ -1,5 +1,5 @@
-import React, { Component } from "react";
 import { storiesOf } from "@storybook/react";
+import React, { Component } from "react";
 import debug from "./helpers/debug";
 
 import Board from "../src";
diff --git a/packages/react-trello-ts/stories/I18n.story.tsx b/packages/react-trello-ts/stories/I18n.story.tsx
index b8e0ffa..7bb0e95 100644
--- a/packages/react-trello-ts/stories/I18n.story.tsx
+++ b/packages/react-trello-ts/stories/I18n.story.tsx
@@ -1,7 +1,7 @@
+import { storiesOf } from "@storybook/react";
 // @ts-ignore
 import React from "react";
-import { storiesOf } from "@storybook/react";
-import { useTranslation, I18nextProvider } from "react-i18next";
+import { I18nextProvider, useTranslation } from "react-i18next";
 
 import Board from "../src";
 import createTranslate from "../src/helpers/createTranslate";
diff --git a/packages/react-trello-ts/stories/Interactions.story.tsx b/packages/react-trello-ts/stories/Interactions.story.tsx
index 775f7f9..c0efd2a 100644
--- a/packages/react-trello-ts/stories/Interactions.story.tsx
+++ b/packages/react-trello-ts/stories/Interactions.story.tsx
@@ -1,5 +1,5 @@
-import React from "react";
 import { storiesOf } from "@storybook/react";
+import React from "react";
 
 import Board from "../src";
 
diff --git a/packages/react-trello-ts/stories/MultipleBoards.story.tsx b/packages/react-trello-ts/stories/MultipleBoards.story.tsx
index da6f5cd..c829fea 100644
--- a/packages/react-trello-ts/stories/MultipleBoards.story.tsx
+++ b/packages/react-trello-ts/stories/MultipleBoards.story.tsx
@@ -1,5 +1,5 @@
-import React from "react";
 import { storiesOf } from "@storybook/react";
+import React from "react";
 
 import Board from "../src";
 
diff --git a/packages/react-trello-ts/stories/Pagination.story.tsx b/packages/react-trello-ts/stories/Pagination.story.tsx
index c51bfa5..8ec2efe 100644
--- a/packages/react-trello-ts/stories/Pagination.story.tsx
+++ b/packages/react-trello-ts/stories/Pagination.story.tsx
@@ -1,5 +1,5 @@
-import React from "react";
 import { storiesOf } from "@storybook/react";
+import React from "react";
 
 import Board from "../src";
 
@@ -9,8 +9,8 @@ storiesOf("Basic Functions", module).add(
 		const PER_PAGE = 15;
 
 		function delayedPromise(durationInMs, resolutionPayload) {
-			return new Promise(function (resolve) {
-				setTimeout(function () {
+			return new Promise((resolve) => {
+				setTimeout(() => {
 					resolve(resolutionPayload);
 				}, durationInMs);
 			});
@@ -18,7 +18,7 @@ storiesOf("Basic Functions", module).add(
 
 		function generateCards(requestedPage = 1) {
 			const cards = [];
-			let fetchedItems = (requestedPage - 1) * PER_PAGE;
+			const fetchedItems = (requestedPage - 1) * PER_PAGE;
 			for (let i = fetchedItems + 1; i <= fetchedItems + PER_PAGE; i++) {
 				cards.push({
 					id: `${i}`,
@@ -34,7 +34,7 @@ storiesOf("Basic Functions", module).add(
 			if (requestedPage > 2) {
 				return delayedPromise(2000, []);
 			}
-			let newCards = generateCards(requestedPage);
+			const newCards = generateCards(requestedPage);
 			return delayedPromise(2000, newCards);
 		}
 
diff --git a/packages/react-trello-ts/stories/PaginationAndEvents.story.tsx b/packages/react-trello-ts/stories/PaginationAndEvents.story.tsx
index f2ef8f6..3fe7941 100644
--- a/packages/react-trello-ts/stories/PaginationAndEvents.story.tsx
+++ b/packages/react-trello-ts/stories/PaginationAndEvents.story.tsx
@@ -1,15 +1,15 @@
-import React, { FC, PropsWithChildren } from "react";
 import { storiesOf } from "@storybook/react";
+import React, { FC, PropsWithChildren } from "react";
 
-import Board from "../src";
 import { BoardData } from "rt/types/Board";
 import { EventBusHandle } from "rt/types/EventBus";
+import Board from "../src";
 
 const PER_PAGE = 15;
 
 function generateCards(requestedPage = 1) {
 	const cards = [];
-	let fetchedItems = (requestedPage - 1) * PER_PAGE;
+	const fetchedItems = (requestedPage - 1) * PER_PAGE;
 	for (let i = fetchedItems + 1; i <= fetchedItems + PER_PAGE; i++) {
 		cards.push({
 			id: `${i}`,
@@ -21,8 +21,8 @@ function generateCards(requestedPage = 1) {
 	return cards;
 }
 const delayedPromise = (durationInMs, resolutionPayload) => {
-	return new Promise(function (resolve) {
-		setTimeout(function () {
+	return new Promise((resolve) => {
+		setTimeout(() => {
 			resolve(resolutionPayload);
 		}, durationInMs);
 	});
@@ -61,7 +61,7 @@ const BoardWrapper: FC<PropsWithChildren<{ data: BoardData }>> = ({
 		});
 	};
 	const paginate = (requestedPage, laneId) => {
-		let newCards = generateCards(requestedPage);
+		const newCards = generateCards(requestedPage);
 		return delayedPromise(2000, newCards);
 	};
 
diff --git a/packages/react-trello-ts/stories/Realtime.story.tsx b/packages/react-trello-ts/stories/Realtime.story.tsx
index b73dcc8..cd4d7f4 100644
--- a/packages/react-trello-ts/stories/Realtime.story.tsx
+++ b/packages/react-trello-ts/stories/Realtime.story.tsx
@@ -1,5 +1,5 @@
-import React, { Component } from "react";
 import { storiesOf } from "@storybook/react";
+import React, { Component } from "react";
 import debug from "./helpers/debug";
 
 import Board from "../src";
@@ -45,31 +45,37 @@ class RealtimeBoard extends Component {
 	};
 
 	modifyLaneTitle = () => {
-		const data = {...this.state.boardData,
+		const data = {
+			...this.state.boardData,
 			lanes: this.state.boardData.lanes.map((lane, index) => {
 				if (index === 1) {
-					return {...lane, title: "New Lane Title"}
+					return { ...lane, title: "New Lane Title" };
 				}
-				return lane
-			})
-		}
+				return lane;
+			}),
+		};
 
 		this.setState({ boardData: data });
 	};
 
 	modifyCardTitle = () => {
-		const data = {...this.state.boardData,
+		const data = {
+			...this.state.boardData,
 			lanes: this.state.boardData.lanes.map((lane, index) => {
 				if (index === 1) {
-					return {...lane, cards: lane.cards.map((card, index) => {
-						if (index === 0) {
-							return {...card, title: "New Card Title"}
-						}
-						return card
-					})}
+					return {
+						...lane,
+						cards: lane.cards.map((card, index) => {
+							if (index === 0) {
+								return { ...card, title: "New Card Title" };
+							}
+							return card;
+						}),
+					};
 				}
-				return lane
-			})}
+				return lane;
+			}),
+		};
 		this.setState({ boardData: data });
 	};
 
diff --git a/packages/react-trello-ts/stories/RestrictedLanes.story.tsx b/packages/react-trello-ts/stories/RestrictedLanes.story.tsx
index 8633595..93e4f80 100644
--- a/packages/react-trello-ts/stories/RestrictedLanes.story.tsx
+++ b/packages/react-trello-ts/stories/RestrictedLanes.story.tsx
@@ -1,5 +1,5 @@
-import React from "react";
 import { storiesOf } from "@storybook/react";
+import React from "react";
 
 import Board from "../src";
 
diff --git a/packages/react-trello-ts/stories/Sort.story.tsx b/packages/react-trello-ts/stories/Sort.story.tsx
index 79bae3f..ab6d2b7 100644
--- a/packages/react-trello-ts/stories/Sort.story.tsx
+++ b/packages/react-trello-ts/stories/Sort.story.tsx
@@ -1,5 +1,5 @@
-import React from "react";
 import { storiesOf } from "@storybook/react";
+import React from "react";
 
 import Board from "../src";
 
diff --git a/packages/react-trello-ts/stories/Styling.story.tsx b/packages/react-trello-ts/stories/Styling.story.tsx
index 2668248..b126069 100644
--- a/packages/react-trello-ts/stories/Styling.story.tsx
+++ b/packages/react-trello-ts/stories/Styling.story.tsx
@@ -1,9 +1,9 @@
-import React from "react";
 import { storiesOf } from "@storybook/react";
+import React from "react";
 
-import "./board.css";
-import Board from "../src";
 import { BoardData } from "rt/types/Board";
+import Board from "../src";
+import "./board.css";
 const data = require("./data/base.json");
 
 storiesOf("Styling", module).add(
diff --git a/packages/react-trello-ts/stories/Tags.story.tsx b/packages/react-trello-ts/stories/Tags.story.tsx
index 4ece553..e76d254 100644
--- a/packages/react-trello-ts/stories/Tags.story.tsx
+++ b/packages/react-trello-ts/stories/Tags.story.tsx
@@ -1,5 +1,5 @@
-import React from "react";
 import { storiesOf } from "@storybook/react";
+import React from "react";
 
 import Board from "../src";
 
diff --git a/packages/react-trello-ts/stories/data/base.json b/packages/react-trello-ts/stories/data/base.json
index 4572358..8c45d7c 100644
--- a/packages/react-trello-ts/stories/data/base.json
+++ b/packages/react-trello-ts/stories/data/base.json
@@ -1,133 +1,133 @@
 {
-  "lanes": [
-    {
-      "id": "PLANNED",
-      "title": "Planned Tasks",
-      "label": "20/70",
-      "style": {"width": 280},
-      "cards": [
-        {
-          "id": "Milk",
-          "title": "Buy milk",
-          "label": "15 mins",
-          "description": "2 Gallons of milk at the Deli store"
-        },
-        {
-          "id": "Plan2",
-          "title": "Dispose Garbage",
-          "label": "10 mins",
-          "description": "Sort out recyclable and waste as needed"
-        },
-        {
-          "id": "Plan3",
-          "title": "Write Blog",
-          "label": "30 mins",
-          "description": "Can AI make memes?"
-        },
-        {
-          "id": "Plan4",
-          "title": "Pay Rent",
-          "label": "5 mins",
-          "description": "Transfer to bank account"
-        }
-      ]
-    },
-    {
-      "id": "WIP",
-      "title": "Work In Progress",
-      "label": "10/20",
-      "style": {"width": 280},
-      "cards": [
-        {
-          "id": "Wip1",
-          "title": "Clean House",
-          "label": "30 mins",
-          "description": "Soap wash and polish floor. Polish windows and doors. Scrap all broken glasses"
-        }
-      ]
-    },
-    {
-      "id": "BLOCKED",
-      "title": "Blocked",
-      "label": "0/0",
-      "style": {"width": 280},
-      "cards": []
-    },
-    {
-      "id": "COMPLETED",
-      "title": "Completed",
-      "style": {"width": 280},
-      "label": "2/5",
-      "cards": [
-        {
-          "id": "Completed1",
-          "title": "Practice Meditation",
-          "label": "15 mins",
-          "description": "Use Headspace app"
-        },
-        {
-          "id": "Completed2",
-          "title": "Maintain Daily Journal",
-          "label": "15 mins",
-          "description": "Use Spreadsheet for now"
-        }
-      ]
-    },
-    {
-      "id": "REPEAT",
-      "title": "Repeat",
-      "style": {"width": 280},
-      "label": "1/1",
-      "cards": [
-        {
-          "id": "Repeat1",
-          "title": "Morning Jog",
-          "label": "30 mins",
-          "description": "Track using fitbit"
-        }
-      ]
-    },
-    {
-      "id": "ARCHIVED",
-      "title": "Archived",
-      "style": {"width": 280},
-      "label": "1/1",
-      "cards": [
-        {
-          "id": "Archived1",
-          "title": "Go Trekking",
-          "label": "300 mins",
-          "description": "Completed 10km on cycle"
-        }
-      ]
-    },
-    {
-      "id": "ARCHIVED2",
-      "title": "Archived2",
-      "style": {"width": 280},
-      "label": "1/1",
-      "cards": [
-        {
-          "id": "Archived2",
-          "title": "Go Jogging",
-          "label": "300 mins",
-          "description": "Completed 10km on cycle"
-        }
-      ]
-    },
-    {
-      "id": "ARCHIVED3",
-      "title": "Archived3",
-      "style": {"width": 280},
-      "label": "1/1",
-      "cards": [
-        {
-          "id": "Archived3",
-          "title": "Go Cycling",
-          "label": "300 mins",
-          "description": "Completed 10km on cycle"
-        }
-      ]
-    }
-  ]
+	"lanes": [
+		{
+			"id": "PLANNED",
+			"title": "Planned Tasks",
+			"label": "20/70",
+			"style": { "width": 280 },
+			"cards": [
+				{
+					"id": "Milk",
+					"title": "Buy milk",
+					"label": "15 mins",
+					"description": "2 Gallons of milk at the Deli store"
+				},
+				{
+					"id": "Plan2",
+					"title": "Dispose Garbage",
+					"label": "10 mins",
+					"description": "Sort out recyclable and waste as needed"
+				},
+				{
+					"id": "Plan3",
+					"title": "Write Blog",
+					"label": "30 mins",
+					"description": "Can AI make memes?"
+				},
+				{
+					"id": "Plan4",
+					"title": "Pay Rent",
+					"label": "5 mins",
+					"description": "Transfer to bank account"
+				}
+			]
+		},
+		{
+			"id": "WIP",
+			"title": "Work In Progress",
+			"label": "10/20",
+			"style": { "width": 280 },
+			"cards": [
+				{
+					"id": "Wip1",
+					"title": "Clean House",
+					"label": "30 mins",
+					"description": "Soap wash and polish floor. Polish windows and doors. Scrap all broken glasses"
+				}
+			]
+		},
+		{
+			"id": "BLOCKED",
+			"title": "Blocked",
+			"label": "0/0",
+			"style": { "width": 280 },
+			"cards": []
+		},
+		{
+			"id": "COMPLETED",
+			"title": "Completed",
+			"style": { "width": 280 },
+			"label": "2/5",
+			"cards": [
+				{
+					"id": "Completed1",
+					"title": "Practice Meditation",
+					"label": "15 mins",
+					"description": "Use Headspace app"
+				},
+				{
+					"id": "Completed2",
+					"title": "Maintain Daily Journal",
+					"label": "15 mins",
+					"description": "Use Spreadsheet for now"
+				}
+			]
+		},
+		{
+			"id": "REPEAT",
+			"title": "Repeat",
+			"style": { "width": 280 },
+			"label": "1/1",
+			"cards": [
+				{
+					"id": "Repeat1",
+					"title": "Morning Jog",
+					"label": "30 mins",
+					"description": "Track using fitbit"
+				}
+			]
+		},
+		{
+			"id": "ARCHIVED",
+			"title": "Archived",
+			"style": { "width": 280 },
+			"label": "1/1",
+			"cards": [
+				{
+					"id": "Archived1",
+					"title": "Go Trekking",
+					"label": "300 mins",
+					"description": "Completed 10km on cycle"
+				}
+			]
+		},
+		{
+			"id": "ARCHIVED2",
+			"title": "Archived2",
+			"style": { "width": 280 },
+			"label": "1/1",
+			"cards": [
+				{
+					"id": "Archived2",
+					"title": "Go Jogging",
+					"label": "300 mins",
+					"description": "Completed 10km on cycle"
+				}
+			]
+		},
+		{
+			"id": "ARCHIVED3",
+			"title": "Archived3",
+			"style": { "width": 280 },
+			"label": "1/1",
+			"cards": [
+				{
+					"id": "Archived3",
+					"title": "Go Cycling",
+					"label": "300 mins",
+					"description": "Completed 10km on cycle"
+				}
+			]
+		}
+	]
 }
diff --git a/packages/react-trello-ts/stories/data/board_with_custom_width.json b/packages/react-trello-ts/stories/data/board_with_custom_width.json
index 7c58b82..76af303 100644
--- a/packages/react-trello-ts/stories/data/board_with_custom_width.json
+++ b/packages/react-trello-ts/stories/data/board_with_custom_width.json
@@ -1,144 +1,199 @@
 {
-  "lanes": [
-    {
-      "id": "PLANNED",
-      "title": "Planned Tasks",
-      "label": "20/70",
-      "style": {"width": 280},
-      "cards": [
-        {
-          "id": "Milk",
-          "title": "Buy milk",
-          "label": "15 mins",
-          "cardStyle": { "width": 270, "maxWidth": 270, "margin": "auto", "marginBottom": 5 },
-          "description": "2 Gallons of milk at the Deli store"
-        },
-        {
-          "id": "Plan2",
-          "title": "Dispose Garbage",
-          "label": "10 mins",
-          "cardStyle": { "width": 270, "maxWidth": 270, "margin": "auto", "marginBottom": 5 },
-          "description": "Sort out recyclable and waste as needed"
-        },
-        {
-          "id": "Plan3",
-          "title": "Write Blog",
-          "label": "30 mins",
-          "cardStyle": { "width": 270, "maxWidth": 270, "margin": "auto", "marginBottom": 5 },
-          "description": "Can AI make memes?"
-        },
-        {
-          "id": "Plan4",
-          "title": "Pay Rent",
-          "label": "5 mins",
-          "cardStyle": { "width": 270, "maxWidth": 270, "margin": "auto", "marginBottom": 5 },
-          "description": "Transfer to bank account"
-        }
-      ]
-    },
-    {
-      "id": "WIP",
-      "title": "Work In Progress",
-      "label": "10/20",
-      "style": {"width": 280},
-      "cards": [
-        {
-          "id": "Wip1",
-          "title": "Clean House",
-          "label": "30 mins",
-          "cardStyle": { "width": 270, "maxWidth": 270, "margin": "auto", "marginBottom": 5 },
-          "description": "Soap wash and polish floor. Polish windows and doors. Scrap all broken glasses"
-        }
-      ]
-    },
-    {
-      "id": "BLOCKED",
-      "title": "Blocked",
-      "label": "0/0",
-      "style": {"width": 280},
-      "cards": []
-    },
-    {
-      "id": "COMPLETED",
-      "title": "Completed",
-      "style": {"width": 280},
-      "label": "2/5",
-      "cards": [
-        {
-          "id": "Completed1",
-          "title": "Practice Meditation",
-          "label": "15 mins",
-          "cardStyle": { "width": 270, "maxWidth": 270, "margin": "auto", "marginBottom": 5 },
-          "description": "Use Headspace app"
-        },
-        {
-          "id": "Completed2",
-          "title": "Maintain Daily Journal",
-          "label": "15 mins",
-          "cardStyle": { "width": 270, "maxWidth": 270, "margin": "auto", "marginBottom": 5 },
-          "description": "Use Spreadsheet for now"
-        }
-      ]
-    },
-    {
-      "id": "REPEAT",
-      "title": "Repeat",
-      "style": {"width": 280},
-      "label": "1/1",
-      "cards": [
-        {
-          "id": "Repeat1",
-          "title": "Morning Jog",
-          "label": "30 mins",
-          "cardStyle": { "width": 270, "maxWidth": 270, "margin": "auto", "marginBottom": 5 },
-          "description": "Track using fitbit"
-        }
-      ]
-    },
-    {
-      "id": "ARCHIVED",
-      "title": "Archived",
-      "style": {"width": 280},
-      "label": "1/1",
-      "cards": [
-        {
-          "id": "Archived1",
-          "title": "Go Trekking",
-          "label": "300 mins",
-          "cardStyle": { "width": 270, "maxWidth": 270, "margin": "auto", "marginBottom": 5 },
-          "description": "Completed 10km on cycle"
-        }
-      ]
-    },
-    {
-      "id": "ARCHIVED2",
-      "title": "Archived2",
-      "style": {"width": 280},
-      "label": "1/1",
-      "cards": [
-        {
-          "id": "Archived1",
-          "title": "Go Trekking",
-          "label": "300 mins",
-          "cardStyle": { "width": 270, "maxWidth": 270, "margin": "auto", "marginBottom": 5 },
-          "description": "Completed 10km on cycle"
-        }
-      ]
-    },
-    {
-      "id": "ARCHIVED3",
-      "title": "Archived3",
-      "style": {"width": 280},
-      "label": "1/1",
-      "cards": [
-        {
-          "id": "Archived1",
-          "title": "Go Trekking",
-          "label": "300 mins",
-          "cardStyle": { "width": 270, "maxWidth": 270, "margin": "auto", "marginBottom": 5 },
-          "description": "Completed 10km on cycle"
-        }
-      ]
-    }
-  ]
+	"lanes": [
+		{
+			"id": "PLANNED",
+			"title": "Planned Tasks",
+			"label": "20/70",
+			"style": { "width": 280 },
+			"cards": [
+				{
+					"id": "Milk",
+					"title": "Buy milk",
+					"label": "15 mins",
+					"cardStyle": {
+						"width": 270,
+						"maxWidth": 270,
+						"margin": "auto",
+						"marginBottom": 5
+					},
+					"description": "2 Gallons of milk at the Deli store"
+				},
+				{
+					"id": "Plan2",
+					"title": "Dispose Garbage",
+					"label": "10 mins",
+					"cardStyle": {
+						"width": 270,
+						"maxWidth": 270,
+						"margin": "auto",
+						"marginBottom": 5
+					},
+					"description": "Sort out recyclable and waste as needed"
+				},
+				{
+					"id": "Plan3",
+					"title": "Write Blog",
+					"label": "30 mins",
+					"cardStyle": {
+						"width": 270,
+						"maxWidth": 270,
+						"margin": "auto",
+						"marginBottom": 5
+					},
+					"description": "Can AI make memes?"
+				},
+				{
+					"id": "Plan4",
+					"title": "Pay Rent",
+					"label": "5 mins",
+					"cardStyle": {
+						"width": 270,
+						"maxWidth": 270,
+						"margin": "auto",
+						"marginBottom": 5
+					},
+					"description": "Transfer to bank account"
+				}
+			]
+		},
+		{
+			"id": "WIP",
+			"title": "Work In Progress",
+			"label": "10/20",
+			"style": { "width": 280 },
+			"cards": [
+				{
+					"id": "Wip1",
+					"title": "Clean House",
+					"label": "30 mins",
+					"cardStyle": {
+						"width": 270,
+						"maxWidth": 270,
+						"margin": "auto",
+						"marginBottom": 5
+					},
+					"description": "Soap wash and polish floor. Polish windows and doors. Scrap all broken glasses"
+				}
+			]
+		},
+		{
+			"id": "BLOCKED",
+			"title": "Blocked",
+			"label": "0/0",
+			"style": { "width": 280 },
+			"cards": []
+		},
+		{
+			"id": "COMPLETED",
+			"title": "Completed",
+			"style": { "width": 280 },
+			"label": "2/5",
+			"cards": [
+				{
+					"id": "Completed1",
+					"title": "Practice Meditation",
+					"label": "15 mins",
+					"cardStyle": {
+						"width": 270,
+						"maxWidth": 270,
+						"margin": "auto",
+						"marginBottom": 5
+					},
+					"description": "Use Headspace app"
+				},
+				{
+					"id": "Completed2",
+					"title": "Maintain Daily Journal",
+					"label": "15 mins",
+					"cardStyle": {
+						"width": 270,
+						"maxWidth": 270,
+						"margin": "auto",
+						"marginBottom": 5
+					},
+					"description": "Use Spreadsheet for now"
+				}
+			]
+		},
+		{
+			"id": "REPEAT",
+			"title": "Repeat",
+			"style": { "width": 280 },
+			"label": "1/1",
+			"cards": [
+				{
+					"id": "Repeat1",
+					"title": "Morning Jog",
+					"label": "30 mins",
+					"cardStyle": {
+						"width": 270,
+						"maxWidth": 270,
+						"margin": "auto",
+						"marginBottom": 5
+					},
+					"description": "Track using fitbit"
+				}
+			]
+		},
+		{
+			"id": "ARCHIVED",
+			"title": "Archived",
+			"style": { "width": 280 },
+			"label": "1/1",
+			"cards": [
+				{
+					"id": "Archived1",
+					"title": "Go Trekking",
+					"label": "300 mins",
+					"cardStyle": {
+						"width": 270,
+						"maxWidth": 270,
+						"margin": "auto",
+						"marginBottom": 5
+					},
+					"description": "Completed 10km on cycle"
+				}
+			]
+		},
+		{
+			"id": "ARCHIVED2",
+			"title": "Archived2",
+			"style": { "width": 280 },
+			"label": "1/1",
+			"cards": [
+				{
+					"id": "Archived1",
+					"title": "Go Trekking",
+					"label": "300 mins",
+					"cardStyle": {
+						"width": 270,
+						"maxWidth": 270,
+						"margin": "auto",
+						"marginBottom": 5
+					},
+					"description": "Completed 10km on cycle"
+				}
+			]
+		},
+		{
+			"id": "ARCHIVED3",
+			"title": "Archived3",
+			"style": { "width": 280 },
+			"label": "1/1",
+			"cards": [
+				{
+					"id": "Archived1",
+					"title": "Go Trekking",
+					"label": "300 mins",
+					"cardStyle": {
+						"width": 270,
+						"maxWidth": 270,
+						"margin": "auto",
+						"marginBottom": 5
+					},
+					"description": "Completed 10km on cycle"
+				}
+			]
+		}
+	]
 }
diff --git a/packages/react-trello-ts/stories/data/collapsible.json b/packages/react-trello-ts/stories/data/collapsible.json
index b5f5d17..e8ad726 100644
--- a/packages/react-trello-ts/stories/data/collapsible.json
+++ b/packages/react-trello-ts/stories/data/collapsible.json
@@ -1,133 +1,133 @@
 {
-  "lanes": [
-    {
-      "id": "PLANNED",
-      "title": "Double Click Here",
-      "label": "20/70",
-      "style": {"width": 280},
-      "cards": [
-        {
-          "id": "Milk",
-          "title": "Buy milk",
-          "label": "15 mins",
-          "description": "2 Gallons of milk at the Deli store"
-        },
-        {
-          "id": "Plan2",
-          "title": "Dispose Garbage",
-          "label": "10 mins",
-          "description": "Sort out recyclable and waste as needed"
-        },
-        {
-          "id": "Plan3",
-          "title": "Write Blog",
-          "label": "30 mins",
-          "description": "Can AI make memes?"
-        },
-        {
-          "id": "Plan4",
-          "title": "Pay Rent",
-          "label": "5 mins",
-          "description": "Transfer to bank account"
-        }
-      ]
-    },
-    {
-      "id": "WIP",
-      "title": "Work In Progress",
-      "label": "10/20",
-      "style": {"width": 280},
-      "cards": [
-        {
-          "id": "Wip1",
-          "title": "Clean House",
-          "label": "30 mins",
-          "description": "Soap wash and polish floor. Polish windows and doors. Scrap all broken glasses"
-        }
-      ]
-    },
-    {
-      "id": "BLOCKED",
-      "title": "Blocked",
-      "label": "0/0",
-      "style": {"width": 280},
-      "cards": []
-    },
-    {
-      "id": "COMPLETED",
-      "title": "Completed",
-      "style": {"width": 280},
-      "label": "2/5",
-      "cards": [
-        {
-          "id": "Completed1",
-          "title": "Practice Meditation",
-          "label": "15 mins",
-          "description": "Use Headspace app"
-        },
-        {
-          "id": "Completed2",
-          "title": "Maintain Daily Journal",
-          "label": "15 mins",
-          "description": "Use Spreadsheet for now"
-        }
-      ]
-    },
-    {
-      "id": "REPEAT",
-      "title": "Repeat",
-      "style": {"width": 280},
-      "label": "1/1",
-      "cards": [
-        {
-          "id": "Repeat1",
-          "title": "Morning Jog",
-          "label": "30 mins",
-          "description": "Track using fitbit"
-        }
-      ]
-    },
-    {
-      "id": "ARCHIVED",
-      "title": "Archived",
-      "style": {"width": 280},
-      "label": "1/1",
-      "cards": [
-        {
-          "id": "Archived1",
-          "title": "Go Trekking",
-          "label": "300 mins",
-          "description": "Completed 10km on cycle"
-        }
-      ]
-    },
-    {
-      "id": "ARCHIVED2",
-      "title": "Archived2",
-      "style": {"width": 280},
-      "label": "1/1",
-      "cards": [
-        {
-          "id": "Archived2",
-          "title": "Go Jogging",
-          "label": "300 mins",
-          "description": "Completed 10km on cycle"
-        }
-      ]
-    },
-    {
-      "id": "ARCHIVED3",
-      "title": "Archived3",
-      "style": {"width": 280},
-      "label": "1/1",
-      "cards": [
-        {
-          "id": "Archived3",
-          "title": "Go Cycling",
-          "label": "300 mins",
-          "description": "Completed 10km on cycle"
-        }
-      ]
-    }
-  ]
+	"lanes": [
+		{
+			"id": "PLANNED",
+			"title": "Double Click Here",
+			"label": "20/70",
+			"style": { "width": 280 },
+			"cards": [
+				{
+					"id": "Milk",
+					"title": "Buy milk",
+					"label": "15 mins",
+					"description": "2 Gallons of milk at the Deli store"
+				},
+				{
+					"id": "Plan2",
+					"title": "Dispose Garbage",
+					"label": "10 mins",
+					"description": "Sort out recyclable and waste as needed"
+				},
+				{
+					"id": "Plan3",
+					"title": "Write Blog",
+					"label": "30 mins",
+					"description": "Can AI make memes?"
+				},
+				{
+					"id": "Plan4",
+					"title": "Pay Rent",
+					"label": "5 mins",
+					"description": "Transfer to bank account"
+				}
+			]
+		},
+		{
+			"id": "WIP",
+			"title": "Work In Progress",
+			"label": "10/20",
+			"style": { "width": 280 },
+			"cards": [
+				{
+					"id": "Wip1",
+					"title": "Clean House",
+					"label": "30 mins",
+					"description": "Soap wash and polish floor. Polish windows and doors. Scrap all broken glasses"
+				}
+			]
+		},
+		{
+			"id": "BLOCKED",
+			"title": "Blocked",
+			"label": "0/0",
+			"style": { "width": 280 },
+			"cards": []
+		},
+		{
+			"id": "COMPLETED",
+			"title": "Completed",
+			"style": { "width": 280 },
+			"label": "2/5",
+			"cards": [
+				{
+					"id": "Completed1",
+					"title": "Practice Meditation",
+					"label": "15 mins",
+					"description": "Use Headspace app"
+				},
+				{
+					"id": "Completed2",
+					"title": "Maintain Daily Journal",
+					"label": "15 mins",
+					"description": "Use Spreadsheet for now"
+				}
+			]
+		},
+		{
+			"id": "REPEAT",
+			"title": "Repeat",
+			"style": { "width": 280 },
+			"label": "1/1",
+			"cards": [
+				{
+					"id": "Repeat1",
+					"title": "Morning Jog",
+					"label": "30 mins",
+					"description": "Track using fitbit"
+				}
+			]
+		},
+		{
+			"id": "ARCHIVED",
+			"title": "Archived",
+			"style": { "width": 280 },
+			"label": "1/1",
+			"cards": [
+				{
+					"id": "Archived1",
+					"title": "Go Trekking",
+					"label": "300 mins",
+					"description": "Completed 10km on cycle"
+				}
+			]
+		},
+		{
+			"id": "ARCHIVED2",
+			"title": "Archived2",
+			"style": { "width": 280 },
+			"label": "1/1",
+			"cards": [
+				{
+					"id": "Archived2",
+					"title": "Go Jogging",
+					"label": "300 mins",
+					"description": "Completed 10km on cycle"
+				}
+			]
+		},
+		{
+			"id": "ARCHIVED3",
+			"title": "Archived3",
+			"style": { "width": 280 },
+			"label": "1/1",
+			"cards": [
+				{
+					"id": "Archived3",
+					"title": "Go Cycling",
+					"label": "300 mins",
+					"description": "Completed 10km on cycle"
+				}
+			]
+		}
+	]
 }
diff --git a/packages/react-trello-ts/stories/data/data-sort.json b/packages/react-trello-ts/stories/data/data-sort.json
index babe22c..a42b96b 100644
--- a/packages/react-trello-ts/stories/data/data-sort.json
+++ b/packages/react-trello-ts/stories/data/data-sort.json
@@ -1,52 +1,51 @@
-
 {
-  "lanes": [
-    {
-      "id": "SORTED_LANE",
-      "title": "Sorted Lane",
-      "label": "20/70",
-      "cards": [
-        {
-          "id": "Card1",
-          "title": "Buy milk",
-          "label": "2017-12-01",
-          "description": "2 Gallons of milk at the Deli store",
-          "metadata": {
-            "completedAt": "2017-12-01T10:00:00Z",
-            "shortCode": "abc"
-          }
-        },
-        {
-          "id": "Card2",
-          "title": "Dispose Garbage",
-          "label": "2017-11-01",
-          "description": "Sort out recyclable and waste as needed",
-          "metadata": {
-            "completedAt": "2017-11-01T10:00:00Z",
-            "shortCode": "aaa"
-          }
-        },
-        {
-          "id": "Card3",
-          "title": "Write Blog",
-          "label": "2017-10-01",
-          "description": "Can AI make memes?",
-          "metadata": {
-            "completedAt": "2017-10-01T10:00:00Z",
-            "shortCode": "fa1"
-          }
-        },
-        {
-          "id": "Card4",
-          "title": "Pay Rent",
-          "label": "2017-09-01",
-          "description": "Transfer to bank account",
-          "metadata": {
-            "completedAt": "2017-09-01T10:00:00Z",
-            "shortCode": "ga2"
-          }
-        }
-      ]
-    }
-  ]
+	"lanes": [
+		{
+			"id": "SORTED_LANE",
+			"title": "Sorted Lane",
+			"label": "20/70",
+			"cards": [
+				{
+					"id": "Card1",
+					"title": "Buy milk",
+					"label": "2017-12-01",
+					"description": "2 Gallons of milk at the Deli store",
+					"metadata": {
+						"completedAt": "2017-12-01T10:00:00Z",
+						"shortCode": "abc"
+					}
+				},
+				{
+					"id": "Card2",
+					"title": "Dispose Garbage",
+					"label": "2017-11-01",
+					"description": "Sort out recyclable and waste as needed",
+					"metadata": {
+						"completedAt": "2017-11-01T10:00:00Z",
+						"shortCode": "aaa"
+					}
+				},
+				{
+					"id": "Card3",
+					"title": "Write Blog",
+					"label": "2017-10-01",
+					"description": "Can AI make memes?",
+					"metadata": {
+						"completedAt": "2017-10-01T10:00:00Z",
+						"shortCode": "fa1"
+					}
+				},
+				{
+					"id": "Card4",
+					"title": "Pay Rent",
+					"label": "2017-09-01",
+					"description": "Transfer to bank account",
+					"metadata": {
+						"completedAt": "2017-09-01T10:00:00Z",
+						"shortCode": "ga2"
+					}
+				}
+			]
+		}
+	]
 }
diff --git a/packages/react-trello-ts/stories/data/drag-drop.json b/packages/react-trello-ts/stories/data/drag-drop.json
index c354099..e197e27 100644
--- a/packages/react-trello-ts/stories/data/drag-drop.json
+++ b/packages/react-trello-ts/stories/data/drag-drop.json
@@ -1,56 +1,56 @@
 {
-  "lanes": [
-    {
-      "id": "PLANNED",
-      "title": "Planned Tasks",
-      "label": "20/70",
-      "cards": [
-        {
-          "id": "Milk",
-          "title": "Buy milk",
-          "label": "15 mins",
-          "description": "2 Gallons of milk at the Deli store"
-        },
-        {
-          "id": "Plan2",
-          "title": "Dispose Garbage",
-          "label": "10 mins",
-          "description": "Sort out recyclable and waste as needed"
-        },
-        {
-          "id": "Plan3",
-          "title": "Write Blog",
-          "label": "30 mins",
-          "description": "Can AI make memes?"
-        },
-        {
-          "id": "Plan4",
-          "title": "Pay Rent",
-          "label": "5 mins",
-          "description": "Transfer to bank account"
-        }
-      ]
-    },
-    {
-      "id": "WIP",
-      "title": "Work In Progress (Not Droppable)",
-      "label": "10/20",
-      "droppable": false,
-      "cards": [
-        {
-          "id": "Wip1",
-          "title": "Clean House",
-          "label": "30 mins",
-          "description": "Soap wash and polish floor. Polish windows and doors. Scrap all broken glasses"
-        }
-      ]
-    },
-    {
-      "id": "COMPLETED",
-      "title": "Completed (Droppable)",
-      "label": "0/0",
-      "style": {"width": 280},
-      "cards": []
-    }
-  ]
-}
\ No newline at end of file
+	"lanes": [
+		{
+			"id": "PLANNED",
+			"title": "Planned Tasks",
+			"label": "20/70",
+			"cards": [
+				{
+					"id": "Milk",
+					"title": "Buy milk",
+					"label": "15 mins",
+					"description": "2 Gallons of milk at the Deli store"
+				},
+				{
+					"id": "Plan2",
+					"title": "Dispose Garbage",
+					"label": "10 mins",
+					"description": "Sort out recyclable and waste as needed"
+				},
+				{
+					"id": "Plan3",
+					"title": "Write Blog",
+					"label": "30 mins",
+					"description": "Can AI make memes?"
+				},
+				{
+					"id": "Plan4",
+					"title": "Pay Rent",
+					"label": "5 mins",
+					"description": "Transfer to bank account"
+				}
+			]
+		},
+		{
+			"id": "WIP",
+			"title": "Work In Progress (Not Droppable)",
+			"label": "10/20",
+			"droppable": false,
+			"cards": [
+				{
+					"id": "Wip1",
+					"title": "Clean House",
+					"label": "30 mins",
+					"description": "Soap wash and polish floor. Polish windows and doors. Scrap all broken glasses"
+				}
+			]
+		},
+		{
+			"id": "COMPLETED",
+			"title": "Completed (Droppable)",
+			"label": "0/0",
+			"style": { "width": 280 },
+			"cards": []
+		}
+	]
+}
diff --git a/packages/react-trello-ts/stories/data/other-board.json b/packages/react-trello-ts/stories/data/other-board.json
index 566c9fe..8cd0bf4 100644
--- a/packages/react-trello-ts/stories/data/other-board.json
+++ b/packages/react-trello-ts/stories/data/other-board.json
@@ -1,55 +1,55 @@
 {
-  "lanes": [
-    {
-      "id": "yesterday",
-      "title": "Yesterday",
-      "label": "20/70",
-      "cards": [
-        {
-          "id": "Wip1",
-          "title": "Clean House",
-          "label": "30 mins",
-          "description": "Soap wash and polish floor. Polish windows and doors. Scrap all broken glasses"
-        }
-      ]
-    },
-    {
-      "id": "today",
-      "title": "Today",
-      "label": "10/20",
-      "droppable": false,
-      "cards": [
-        {
-          "id": "Milk",
-          "title": "Buy milk",
-          "label": "15 mins",
-          "description": "2 Gallons of milk at the Deli store"
-        },
-        {
-          "id": "Plan2",
-          "title": "Dispose Garbage",
-          "label": "10 mins",
-          "description": "Sort out recyclable and waste as needed"
-        },
-        {
-          "id": "Plan3",
-          "title": "Write Blog",
-          "label": "30 mins",
-          "description": "Can AI make memes?"
-        },
-        {
-          "id": "Plan4",
-          "title": "Pay Rent",
-          "label": "5 mins",
-          "description": "Transfer to bank account"
-        }
-      ]
-    },
-    {
-      "id": "tomorrow",
-      "title": "Tomorrow",
-      "label": "0/0",
-      "cards": []
-    }
-  ]
-}
\ No newline at end of file
+	"lanes": [
+		{
+			"id": "yesterday",
+			"title": "Yesterday",
+			"label": "20/70",
+			"cards": [
+				{
+					"id": "Wip1",
+					"title": "Clean House",
+					"label": "30 mins",
+					"description": "Soap wash and polish floor. Polish windows and doors. Scrap all broken glasses"
+				}
+			]
+		},
+		{
+			"id": "today",
+			"title": "Today",
+			"label": "10/20",
+			"droppable": false,
+			"cards": [
+				{
+					"id": "Milk",
+					"title": "Buy milk",
+					"label": "15 mins",
+					"description": "2 Gallons of milk at the Deli store"
+				},
+				{
+					"id": "Plan2",
+					"title": "Dispose Garbage",
+					"label": "10 mins",
+					"description": "Sort out recyclable and waste as needed"
+				},
+				{
+					"id": "Plan3",
+					"title": "Write Blog",
+					"label": "30 mins",
+					"description": "Can AI make memes?"
+				},
+				{
+					"id": "Plan4",
+					"title": "Pay Rent",
+					"label": "5 mins",
+					"description": "Transfer to bank account"
+				}
+			]
+		},
+		{
+			"id": "tomorrow",
+			"title": "Tomorrow",
+			"label": "0/0",
+			"cards": []
+		}
+	]
+}
diff --git a/packages/react-trello-ts/stories/index.ts b/packages/react-trello-ts/stories/index.ts
index 739ebbd..3ab3bf2 100644
--- a/packages/react-trello-ts/stories/index.ts
+++ b/packages/react-trello-ts/stories/index.ts
@@ -1,24 +1,24 @@
+import "./AsyncLoad.story";
 import "./Base.story";
-import "./DragDrop.story";
-import "./Pagination.story";
-import "./Interactions.story";
-import "./Sort.story";
-import "./Realtime.story";
 import "./CollapsibleLanes.story";
-import "./PaginationAndEvents.story";
-import "./Tags.story";
-import "./Styling.story";
-import "./CustomCardWithDrag.story";
+import "./CustomAddCardLink.story";
 import "./CustomCard.story";
-import "./CustomLaneHeader.story";
+import "./CustomCardWithDrag.story";
 import "./CustomLaneFooter.story";
+import "./CustomLaneHeader.story";
 import "./CustomNewCardForm.story";
-import "./CustomNewLaneSection.story";
 import "./CustomNewLaneForm.story";
-import "./CustomAddCardLink.story";
-import "./AsyncLoad.story";
-import "./RestrictedLanes.story";
+import "./CustomNewLaneSection.story";
+import "./Deprecations.story";
+import "./DragDrop.story";
 import "./EditableBoard.story";
-import "./MultipleBoards.story";
 import "./I18n.story";
-import "./Deprecations.story";
+import "./Interactions.story";
+import "./MultipleBoards.story";
+import "./Pagination.story";
+import "./PaginationAndEvents.story";
+import "./Realtime.story";
+import "./RestrictedLanes.story";
+import "./Sort.story";
+import "./Styling.story";
+import "./Tags.story";
diff --git a/packages/react-trello-ts/tests/__snapshots__/Storyshots.test.ts.snap b/packages/react-trello-ts/tests/__snapshots__/Storyshots.test.ts.snap
index 9f34571..cbe9a13 100644
--- a/packages/react-trello-ts/tests/__snapshots__/Storyshots.test.ts.snap
+++ b/packages/react-trello-ts/tests/__snapshots__/Storyshots.test.ts.snap
@@ -18345,6 +18345,7 @@ Object {
                     >
                       <button
                         style="cursor: pointer;"
+                        type="submit"
                       >
                         ?
                       </button>
@@ -18456,6 +18457,7 @@ Object {
                     >
                       <button
                         style="cursor: pointer;"
+                        type="submit"
                       >
                         ?
                       </button>
@@ -18754,6 +18756,7 @@ Object {
                   >
                     <button
                       style="cursor: pointer;"
+                      type="submit"
                     >
                       ?
                     </button>
@@ -18865,6 +18868,7 @@ Object {
                   >
                     <button
                       style="cursor: pointer;"
+                      type="submit"
                     >
                       ?
                     </button>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3640d70..eae45e9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,9 +12,9 @@ importers:
         specifier: ^2.26.0
         version: 2.26.0
     devDependencies:
-      rome:
-        specifier: ^10.0.1
-        version: 10.0.1
+      '@biomejs/biome':
+        specifier: ^1.4.1
+        version: 1.4.1
       turbo:
         specifier: ^1.6.3
         version: 1.8.3
@@ -237,9 +237,6 @@ importers:
       preact:
         specifier: '>=10.5.13 <11.0.0'
         version: 10.13.1
-      prettier:
-        specifier: 1.14.3
-        version: 1.14.3
       react:
         specifier: ^16
         version: 16.14.0
@@ -1835,6 +1832,74 @@ packages:
     resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
     dev: true
 
+  /@biomejs/biome@1.4.1:
+    resolution: {integrity: sha512-JccVAwPbhi37pdxbAGmaOBjUTKEwEjWAhl7rKkVVuXHo4MLASXJ5HR8BTgrImi4/7rTBsGz1tgVD1Kwv1CHGRg==}
+    engines: {node: '>=14.*'}
+    hasBin: true
+    requiresBuild: true
+    optionalDependencies:
+      '@biomejs/cli-darwin-arm64': 1.4.1
+      '@biomejs/cli-darwin-x64': 1.4.1
+      '@biomejs/cli-linux-arm64': 1.4.1
+      '@biomejs/cli-linux-x64': 1.4.1
+      '@biomejs/cli-win32-arm64': 1.4.1
+      '@biomejs/cli-win32-x64': 1.4.1
+    dev: true
+
+  /@biomejs/cli-darwin-arm64@1.4.1:
+    resolution: {integrity: sha512-PZWy2Idndqux38p6AXSDQM2ldRAWi32bvb7bMbTN0ALzpWYMYnxd71ornatumSSJYoNhKmxzDLq+jct7nZJ79w==}
+    engines: {node: '>=14.*'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@biomejs/cli-darwin-x64@1.4.1:
+    resolution: {integrity: sha512-soj3BWhnsM1M2JlzR09cibUzG1owJqetwj/Oo7yg0foijo9lNH9XWXZfJBYDKgW/6Fomn+CC2EcUS+hisQzt9g==}
+    engines: {node: '>=14.*'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@biomejs/cli-linux-arm64@1.4.1:
+    resolution: {integrity: sha512-YIZqfJUg4F+fPsBTXxgD7EU2E5OAYbmYSl/snf4PevwfQCWE/omOFZv+NnIQmjYj9I7ParDgcJvanoA3/kO0JQ==}
+    engines: {node: '>=14.*'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@biomejs/cli-linux-x64@1.4.1:
+    resolution: {integrity: sha512-9YOZw3qBd/KUj63A6Hn2zZgzGb2nbESM0qNmeMXgmqinVKM//uc4OgY5TuKITuGjMSvcVxxd4dX1IzYjV9qvNQ==}
+    engines: {node: '>=14.*'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@biomejs/cli-win32-arm64@1.4.1:
+    resolution: {integrity: sha512-nWQbvkNKxYn/kCQ0yVF8kCaS3VzaGvtFSmItXiMknU4521LDjJ7tNWH12Gol+pIslrCbd4E1LhJa0a3ThRsBVg==}
+    engines: {node: '>=14.*'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@biomejs/cli-win32-x64@1.4.1:
+    resolution: {integrity: sha512-88fR2CQxQ4YLs2BUDuywWYQpUKgU3A3sTezANFc/4LGKQFFLV2yX+F7QAdZVkMHfA+RD9Xg178HomM/6mnTNPA==}
+    engines: {node: '>=14.*'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@changesets/apply-release-plan@6.1.3:
     resolution: {integrity: sha512-ECDNeoc3nfeAe1jqJb5aFQX7CqzQhD2klXRez2JDb/aVpGUbX673HgKrnrgJRuQR/9f2TtLoYIzrGB9qwD77mg==}
     dependencies:
@@ -3713,54 +3778,6 @@ packages:
       react-lifecycles-compat: 3.0.4
     dev: true
 
-  /@rometools/cli-darwin-arm64@10.0.1:
-    resolution: {integrity: sha512-MwQjk3uhZrCu6LgIwJHREAsVt/mUQTGv7p8iosfaF8lCIxMVjyS+akbF/QcBufyW5sFtHYNWUEe/uKPHK4E//A==}
-    cpu: [arm64]
-    os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@rometools/cli-darwin-x64@10.0.1:
-    resolution: {integrity: sha512-n010Wc/z9L8wRkRnR5boMhdWgDVGrTG/i7zL8u/3+F5aSUgLCywf9F/b3ex74tCJJfcwBLlhaAqAVQX6U1bIkA==}
-    cpu: [x64]
-    os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@rometools/cli-linux-arm64@10.0.1:
-    resolution: {integrity: sha512-JljZsnud1KCfe36VNsVh/LrYdAzgbKbcsCTzeCjW9ROkMyNj8pmQ/gIUFxZ+PyhMFgowHIDGihoNf4m+pgpxkA==}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@rometools/cli-linux-x64@10.0.1:
-    resolution: {integrity: sha512-jXIqd9iDyZUexk63CRfAXDA4zNDUHpErUmCejjGab3dhDt1KA40fDqKb+kxZpAhY3tQoWNSNQyo750zX5NawLw==}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@rometools/cli-win32-arm64@10.0.1:
-    resolution: {integrity: sha512-G/toRrKPhhi7SMYMyROq/E2c8/4xRX/67vFhVihuMvDDzhanIb99hEt5MMbM4HbYK1nnZBPyLN6LxVsxm9M9hA==}
-    cpu: [arm64]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@rometools/cli-win32-x64@10.0.1:
-    resolution: {integrity: sha512-y299+VGoBufZntZj0Xz7w9DODU+6E5giXStfBDoa0fspXGNkYyYfD+HC6j9gUv4zpMZJ607XVvVHjpfwM/3ftA==}
-    cpu: [x64]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@semantic-release/commit-analyzer@8.0.1(semantic-release@17.4.7):
     resolution: {integrity: sha512-5bJma/oB7B4MtwUkZC2Bf7O1MHfi4gWe4mA+MIQ3lsEV0b422Bvl1z5HRpplDnMLHH3EXMoRdEng6Ds5wUqA3A==}
     engines: {node: '>=10.18'}
@@ -6114,13 +6131,13 @@ packages:
   /@types/react-syntax-highlighter@11.0.4:
     resolution: {integrity: sha512-9GfTo3a0PHwQeTVoqs0g5bS28KkSY48pp5659wA+Dp4MqceDEa8EHBqrllJvvtyusszyJhViUEap0FDvlk/9Zg==}
     dependencies:
-      '@types/react': 16.14.35
+      '@types/react': 17.0.53
     dev: true
 
   /@types/react-textarea-autosize@4.3.6:
     resolution: {integrity: sha512-cTf8tCem0c8A7CERYbTuF+bRFaqYu7N7HLCa6ZhUhDx8XnUsTpGx5udMWljt87JpciUKuUkImKPEsy6kcKhrcQ==}
     dependencies:
-      '@types/react': 16.14.35
+      '@types/react': 17.0.53
     dev: true
 
   /@types/react@16.14.35:
@@ -15548,12 +15565,6 @@ packages:
     resolution: {integrity: sha512-ravE6m9Atw9Z/jjttRUZ+clIXogdghyZAuWJ3qEzjT+jI/dL1ifAqhZeC5VHzQp1MSt1+jxKkFNemj/iO7tVUA==}
     engines: {node: '>=4'}
 
-  /prettier@1.14.3:
-    resolution: {integrity: sha512-qZDVnCrnpsRJJq5nSsiHCE3BYMED2OtsI+cmzIzF1QIfqm5ALf8tEJcO27zV1gKNKRPdhjO0dNWnrzssDQ1tFg==}
-    engines: {node: '>=4'}
-    hasBin: true
-    dev: true
-
   /prettier@2.3.0:
     resolution: {integrity: sha512-kXtO4s0Lz/DW/IJ9QdWhAf7/NmPWQXkFr/r/WkR3vyI+0v8amTDxiaQSLzs8NBlytfLWX/7uQUMIW677yLKl4w==}
     engines: {node: '>=10.13.0'}
@@ -16774,20 +16785,6 @@ packages:
       fsevents: 2.3.2
     dev: true
 
-  /rome@10.0.1:
-    resolution: {integrity: sha512-RfaDa+cSustBsjX6bj3fWqEhoNxXrK1uNgKHpkCHAqp20QMJXnCRtbokhirNMe0utyGI9GTO/sDoK7hJP7O8Bw==}
-    engines: {node: '>=14.*'}
-    hasBin: true
-    requiresBuild: true
-    optionalDependencies:
-      '@rometools/cli-darwin-arm64': 10.0.1
-      '@rometools/cli-darwin-x64': 10.0.1
-      '@rometools/cli-linux-arm64': 10.0.1
-      '@rometools/cli-linux-x64': 10.0.1
-      '@rometools/cli-win32-arm64': 10.0.1
-      '@rometools/cli-win32-x64': 10.0.1
-    dev: true
-
   /rsvp@4.8.5:
     resolution: {integrity: sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==}
     engines: {node: 6.* || >= 7.*}
diff --git a/rome.json b/rome.json
deleted file mode 100644
index 88bdb1f..0000000
--- a/rome.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "linter": {
-    "enabled": true,
-    "rules": {
-      "recommended": true
-    }
-  }
-}
diff --git a/turbo.json b/turbo.json
index e3188e4..7a32b44 100644
--- a/turbo.json
+++ b/turbo.json
@@ -1,29 +1,29 @@
 {
-  "$schema": "https://turbo.build/schema.json",
-  "pipeline": {
-    "build": {
-      "dependsOn": ["^build"]
-    },
-    "test:unit": {
-      "dependsOn": [],
-      "outputs": [],
-      "inputs": [
-        "../../packages/react-trello-ts/**/*.ts",
-        "../../packages/react-trello-ts/**/*.tsx",
-        "../../apps/cypress-testing/**/*.tsx",
-        "../../apps/cypress-testing/**/*.ts"
-      ]
-    },
-    "lint": {
-      "outputs": []
-    },
-    "deploy": {
-      "dependsOn": ["build", "test", "lint"],
-      "outputs": []
-    },
-    "dev": {},
-	"release": {
-	  "cache": false
+	"$schema": "https://turbo.build/schema.json",
+	"pipeline": {
+		"build": {
+			"dependsOn": ["^build"]
+		},
+		"test:unit": {
+			"dependsOn": [],
+			"outputs": [],
+			"inputs": [
+				"../../packages/react-trello-ts/**/*.ts",
+				"../../packages/react-trello-ts/**/*.tsx",
+				"../../apps/cypress-testing/**/*.tsx",
+				"../../apps/cypress-testing/**/*.ts"
+			]
+		},
+		"lint": {
+			"outputs": []
+		},
+		"deploy": {
+			"dependsOn": ["build", "test", "lint"],
+			"outputs": []
+		},
+		"dev": {},
+		"release": {
+			"cache": false
+		}
 	}
-  }
 }