add PropTypes validation and fix linter errors (#43)

* add PropTypes validation and  fix linter errors

* run formatter

* fix typo

Author: jrakibi

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",

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";
 
@@ -124,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.",
       },
     },
   },
 };
-

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,14 @@ 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,
+};

src/components/search/index.tsx

@@ -1,3 +1,2 @@
 export { Search } from "./Search";
 export type { SearchProps } from "./Search";
-

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("");

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>

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;

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;
 }
-

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"