From a016e69ee35f4501db1a0fbeee3dd9c1a8315269 Mon Sep 17 00:00:00 2001
From: jrakibi <j.errakibi@gmail.com>
Date: Sun, 26 Oct 2025 19:33:24 +0100
Subject: [PATCH 1/3] add PropTypes validation and  fix linter errors

---
 package.json                             |  2 ++
 src/components/search/Search.stories.tsx |  1 -
 src/components/search/Search.tsx         | 13 +++++++++++++
 yarn.lock                                |  9 +++++++++
 4 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index eb4a90f..8f027c4 100644
--- a/package.json
+++ b/package.json
@@ -72,6 +72,7 @@
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
     "@types/eslint": "^9",
+    "@types/prop-types": "^15",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^8.4.0",
@@ -84,6 +85,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "postcss": "^8.4.38",
     "prettier": "^3.3.3",
+    "prop-types": "^15.8.1",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
     "semantic-release": "^24.0.0",
diff --git a/src/components/search/Search.stories.tsx b/src/components/search/Search.stories.tsx
index c08e89e..7d4195f 100644
--- a/src/components/search/Search.stories.tsx
+++ b/src/components/search/Search.stories.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { Search } from "./Search";
 
diff --git a/src/components/search/Search.tsx b/src/components/search/Search.tsx
index fb24922..7607dd1 100644
--- a/src/components/search/Search.tsx
+++ b/src/components/search/Search.tsx
@@ -1,4 +1,5 @@
 import React, { forwardRef, useState } from "react";
+import PropTypes from "prop-types";
 import { cn } from "../../utils/cn";
 import searchIcon from "../../assets/search-icon.svg";
 
@@ -108,3 +109,15 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
 
 Search.displayName = "Search";
 
+Search.propTypes = {
+  containerClassName: PropTypes.string,
+  inputClassName: PropTypes.string,
+  iconClassName: PropTypes.string,
+  showIcon: PropTypes.bool,
+  size: PropTypes.oneOf(["small", "default", "large"]),
+  placeholder: PropTypes.string,
+  className: PropTypes.string,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+};
+
diff --git a/yarn.lock b/yarn.lock
index e136169..412f4c3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1485,6 +1485,7 @@ __metadata:
     "@testing-library/jest-dom": "npm:^6.4.6"
     "@testing-library/react": "npm:^16.0.0"
     "@types/eslint": "npm:^9"
+    "@types/prop-types": "npm:^15"
     "@types/react": "npm:^18.3.3"
     "@types/react-dom": "npm:^18.3.0"
     "@typescript-eslint/eslint-plugin": "npm:^8.4.0"
@@ -1498,6 +1499,7 @@ __metadata:
     jest-environment-jsdom: "npm:^29.7.0"
     postcss: "npm:^8.4.38"
     prettier: "npm:^3.3.3"
+    prop-types: "npm:^15.8.1"
     react: "npm:^17.0.0 || ^18.0.0"
     react-dom: "npm:^17.0.0 || ^18.0.0"
     semantic-release: "npm:^24.0.0"
@@ -4072,6 +4074,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/prop-types@npm:^15":
+  version: 15.7.15
+  resolution: "@types/prop-types@npm:15.7.15"
+  checksum: 10c0/b59aad1ad19bf1733cf524fd4e618196c6c7690f48ee70a327eb450a42aab8e8a063fbe59ca0a5701aebe2d92d582292c0fb845ea57474f6a15f6994b0e260b2
+  languageName: node
+  linkType: hard
+
 "@types/qs@npm:*":
   version: 6.9.15
   resolution: "@types/qs@npm:6.9.15"

From 3ed2cdd1f1d36d5d17e7ee4da6efe1956a7e12f2 Mon Sep 17 00:00:00 2001
From: jrakibi <j.errakibi@gmail.com>
Date: Sun, 26 Oct 2025 19:39:38 +0100
Subject: [PATCH 2/3] run formatter

---
 src/components/search/Search.stories.tsx |  4 +--
 src/components/search/Search.tsx         |  1 -
 src/components/search/index.tsx          |  1 -
 src/stories/Configure.mdx                | 33 ++++++++++++++----------
 src/styles/tailwind.css                  |  2 +-
 src/types/images.d.ts                    | 13 +++++-----
 6 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/src/components/search/Search.stories.tsx b/src/components/search/Search.stories.tsx
index 7d4195f..583e27c 100644
--- a/src/components/search/Search.stories.tsx
+++ b/src/components/search/Search.stories.tsx
@@ -123,9 +123,9 @@ export const AllStates: Story = {
   parameters: {
     docs: {
       description: {
-        story: "This story shows the search component in its default state. You can interact with it to see hover and focus states.",
+        story:
+          "This story shows the search component in its default state. You can interact with it to see hover and focus states.",
       },
     },
   },
 };
-
diff --git a/src/components/search/Search.tsx b/src/components/search/Search.tsx
index 7607dd1..27c117a 100644
--- a/src/components/search/Search.tsx
+++ b/src/components/search/Search.tsx
@@ -120,4 +120,3 @@ Search.propTypes = {
   onFocus: PropTypes.func,
   onBlur: PropTypes.func,
 };
-
diff --git a/src/components/search/index.tsx b/src/components/search/index.tsx
index 1f72604..35e06d6 100644
--- a/src/components/search/index.tsx
+++ b/src/components/search/index.tsx
@@ -1,3 +1,2 @@
 export { Search } from "./Search";
 export type { SearchProps } from "./Search";
-
diff --git a/src/stories/Configure.mdx b/src/stories/Configure.mdx
index 5157090..717600a 100644
--- a/src/stories/Configure.mdx
+++ b/src/stories/Configure.mdx
@@ -15,21 +15,23 @@ import Accessibility from "./assets/accessibility.png";
 import Theming from "./assets/theming.png";
 import AddonLibrary from "./assets/addon-library.png";
 
-export const RightArrow = () => <svg 
-    viewBox="0 0 14 14" 
-    width="8px" 
-    height="14px" 
-    style={{ 
-      marginLeft: '4px',
-      display: 'inline-block',
-      shapeRendering: 'inherit',
-      verticalAlign: 'middle',
-      fill: 'currentColor',
-      'path fill': 'currentColor'
+export const RightArrow = () => (
+  <svg
+    viewBox="0 0 14 14"
+    width="8px"
+    height="14px"
+    style={{
+      marginLeft: "4px",
+      display: "inline-block",
+      shapeRendering: "inherit",
+      verticalAlign: "middle",
+      fill: "currentColor",
+      "path fill": "currentColor",
     }}
->
-  <path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
-</svg>
+  >
+    <path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
+  </svg>
+);
 
 <Meta title="Configure your project" />
 
@@ -38,6 +40,7 @@ export const RightArrow = () => <svg
     # Configure your project
 
     Because Storybook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community.
+
   </div>
   <div className="sb-section">
     <div className="sb-section-item">
@@ -84,6 +87,7 @@ export const RightArrow = () => <svg
     # Do more with Storybook
 
     Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs.
+
   </div>
 
   <div className="sb-section">
@@ -203,6 +207,7 @@ export const RightArrow = () => <svg
           target="_blank"
         >Discover tutorials<RightArrow /></a>
     </div>
+
 </div>
 
 <style>
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 2be0c50..171b5b3 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap");
 
 @tailwind base;
 @tailwind components;
diff --git a/src/types/images.d.ts b/src/types/images.d.ts
index 895a1f4..2f277a2 100644
--- a/src/types/images.d.ts
+++ b/src/types/images.d.ts
@@ -1,30 +1,29 @@
-declare module '*.png' {
+declare module "*.png" {
   const value: string;
   export default value;
 }
 
-declare module '*.jpg' {
+declare module "*.jpg" {
   const value: string;
   export default value;
 }
 
-declare module '*.jpeg' {
+declare module "*.jpeg" {
   const value: string;
   export default value;
 }
 
-declare module '*.svg' {
+declare module "*.svg" {
   const value: string;
   export default value;
 }
 
-declare module '*.gif' {
+declare module "*.gif" {
   const value: string;
   export default value;
 }
 
-declare module '*.webp' {
+declare module "*.webp" {
   const value: string;
   export default value;
 }
-

From 69aa81074878b539b78db04f3590e84130c207b4 Mon Sep 17 00:00:00 2001
From: jrakibi <j.errakibi@gmail.com>
Date: Sun, 26 Oct 2025 19:43:09 +0100
Subject: [PATCH 3/3] fix typo

---
 src/components/select/useSelectNavigate.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/select/useSelectNavigate.tsx b/src/components/select/useSelectNavigate.tsx
index 844ab1b..f33cab2 100644
--- a/src/components/select/useSelectNavigate.tsx
+++ b/src/components/select/useSelectNavigate.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import { isInViewport } from "../../utils/navigation";
 
-type ChekboxNavigateProps = {
+type CheckboxNavigateProps = {
   checkboxContainer: React.MutableRefObject<HTMLDivElement> | null;
   searchEl: React.MutableRefObject<HTMLInputElement> | null;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -12,7 +12,7 @@ const useCheckboxNavigate = ({
   checkboxContainer,
   searchEl,
   options,
-}: ChekboxNavigateProps) => {
+}: CheckboxNavigateProps) => {
   const checkboxNavIndex = useRef<number>(null);
 
   const [currentNavigateCheckbox, setcurrentNavigateCheckbox] = useState("");