Add Comment (#16)

* Added: Comment/Explanation Accordion Component

* Added: Comment/Explanation Alert Component

* added: explantion of utility functions

* Added: Comment/Explanation Avatar Component

* added: KeepThemes Explanation

* added: Comment/Explanation Badge Component

* added: explanation of helpers

* module-not-found path fix: carousel.mdx

* added: doc for useCopy hook | remove duplicate attribute from accordion.mdx

* update

* update

* added: breadcrumb, button, card, progress, upload

* added: explantion popover-floating-searchbar-spinner-slider-pagination

* added: explanation | remove unnecessary | update

* Added Comment to explain the component

app/docs/components/accordion/accordion.mdx

@@ -17,7 +17,7 @@ The Accordion Component in the Keep React allows you to create collapsible secti
 
 The Default Accordion Component allows you to craft collapsible content sections. Users can reveal and hide the content by simply clicking on the disclosure button.
 
-<CodePreview github="Accordion" code={DefaultAccordionCode} github="Accordion">
+<CodePreview github="Accordion" code={DefaultAccordionCode}>
   <DefaultAccordion />
 </CodePreview>
 

app/docs/components/carousel/carousel.mdx

@@ -4,9 +4,9 @@ import {
   CarouselWithCustomControlIcon,
   CarouselWithCustomControlIconCode,
 } from './variant/CarouselWithCustomControlIcon'
+import { CarouselWithTextControl, CarouselWithTextControlCode } from './variant/CarouselWithTextControl'
 import { CarouselWithIndicator, CarouselWithIndicatorCode } from './variant/CarouselWithIndicator'
 import { MultipleCarousel, MultipleCarouselCode } from './variant/MultipleCarousel'
-import { CarouselWithTextControl, CarouselWithTextControlCode } from './variant/CarouselWithTextControl'
 
 import { carouselDataApi } from './carouselApi'
 
@@ -74,4 +74,4 @@ Explore the available props for the carousel component
 
 ## Reference
 
-To learn more about the Carousel, please see the documentation of [Carousel](https://norserium.github.io/react-indiana-drag-scroll)
+To learn more about the Carousel, please see the documentation of [Carousel](https://norserium.github.io/react-indiana-drag-scroll)

hooks/useCopy.tsx

@@ -1,5 +1,23 @@
 import { useState } from 'react'
 
+/**
+ * A custom hook to copy text to clipboard and set a flag for 3 seconds.
+ * @returns An object containing a boolean flag indicating if the text has been copied and a function to copy text to clipboard.
+ * 
+ * @example
+ * ```tsx
+ * import useCopy from './hooks/useCopy'
+ * 
+ *  const { copy, copyToClipboard } = useCopy()
+ * 
+ * <button onClick={() => copyToClipboard('Hello World')}>
+ * Copy to clipboard
+ * </button>
+ * {copy && <p>Text copied to clipboard</p>}
+ * 
+ * ```
+ * 
+ */
 const useCopy = () => {
   const [copy, setCopy] = useState<Boolean>(false)
   if (copy) {

src/Keep/KeepTheme.ts

@@ -38,6 +38,7 @@ export interface KeepCheckboxShape {
   circle: string
   round: string
 }
+
 export interface KeepShapes {
   square: string
   round: string

src/Keep/ThemeContext.tsx

@@ -6,18 +6,31 @@ import type { KeepTheme } from './KeepTheme'
 import { theme as defaultTheme } from '../theme/theme'
 import { windowExists } from '../helpers/window-exists'
 
+/**
+ * Represents the mode of the theme.
+ * It can be 'light', 'dark', or undefined.
+ */
 export type Mode = string | undefined | 'light' | 'dark'
 
+/**
+ * Props for the ThemeContext component.
+ */
 interface ThemeContextProps {
   theme: KeepTheme
   mode?: Mode
   toggleMode?: () => void | null
 }
 
+/**
+ * Context for managing the theme in the application.
+ */
 export const ThemeContext = createContext<ThemeContextProps>({
   theme: defaultTheme,
 })
 
+/**
+ * Props for the ThemeProvider component.
+ */
 interface ThemeProviderProps {
   children: ReactNode
   value: ThemeContextProps
@@ -31,15 +44,30 @@ export function useTheme(): ThemeContextProps {
   return useContext(ThemeContext)
 }
 
+/**
+ * Custom hook that provides theme mode state and functions for toggling the theme mode.
+ * @param usePreferences - Flag indicating whether to use user preferences for theme mode.
+ * @returns A tuple containing the current theme mode, a function to set the theme mode, and a function to toggle the theme mode.
+ */
 export const useThemeMode = (
   usePreferences: boolean,
 ): [Mode, React.Dispatch<React.SetStateAction<Mode>> | undefined, (() => void) | undefined] => {
   if (!usePreferences) return [undefined, undefined, undefined]
 
   const [mode, setMode] = useState<Mode>(undefined)
 
+  /**
+   * Saves the theme preference to the local storage.
+   *
+   * @param m - The theme preference to be saved.
+   */
   const savePreference = (m: string) => localStorage.setItem('theme', m)
 
+  /**
+   * Toggles the mode between 'dark' and 'light'.
+   * If the current mode is 'dark', it will be changed to 'light', and vice versa.
+   * Saves the preference and updates the mode state accordingly.
+   */
   const toggleMode = () => {
     if (!mode) {
       return

src/components/Accordion/Accordion.stories.tsx

@@ -94,6 +94,7 @@ export const DefaultAccordion: Story = {
     ),
   },
 }
+
 export const AccordionWithCollapseAll: Story = {
   args: {
     children: removeFragment(
@@ -163,19 +164,22 @@ export const AccordionWithCollapseAll: Story = {
     collapseAll: true,
   },
 }
+
 export const AccordionWithLeftSideIcon: Story = {
   args: {
     iconPosition: 'left',
     ...AccordionWithCollapseAll.args,
   },
 }
+
 export const OpenAccordion: Story = {
   args: {
     ...AccordionWithCollapseAll.args,
     alwaysOpen: true,
     collapseAll: false,
   },
 }
+
 export const DisabledAccordion: Story = {
   args: {
     ...AccordionWithCollapseAll.args,

src/components/Accordion/Accordion.tsx

@@ -1,5 +1,5 @@
-import type { ComponentProps, FC, PropsWithChildren, ReactElement, ReactNode } from 'react'
 import { Children, cloneElement, useMemo, useState } from 'react'
+import type { ComponentProps, FC, PropsWithChildren, ReactElement, ReactNode } from 'react'
 import { DeepPartial } from '../../helpers/deep-partial'
 import { mergeDeep } from '../../helpers/mergeDeep'
 import { KeepBoolean } from '../../Keep/KeepTheme'
@@ -23,16 +23,88 @@ export interface keepAccordionRootTheme {
   flush: KeepBoolean
 }
 
+/**
+ * Props for the Accordion component.
+ *
+ * @interface AccordionProps
+ * @extends {PropsWithChildren<ComponentProps<'div'>>}
+ */
 export interface AccordionProps extends PropsWithChildren<ComponentProps<'div'>> {
+  /**
+   * Determines whether the accordion should always be open.
+   *
+   * @type {boolean}
+   * @default false
+   */
   alwaysOpen?: boolean
+
+  /**
+   * Determines whether to show the open/close icon for each accordion panel.
+   *
+   * @type {boolean}
+   * @default true
+   */
   showIcon?: boolean
+
+  /**
+   * The icon to display when the accordion panel is open.
+   *
+   * @type {ReactNode}
+   * @default <ChevronUpIcon />
+   */
   openIcon?: ReactNode
+
+  /**
+   * The icon to display when the accordion panel is closed.
+   *
+   * @type {ReactNode}
+   * @default <ChevronDownIcon />
+   */
   closeIcon?: ReactNode
+
+  /**
+   * The accordion panels to display.
+   *
+   * @type {(ReactElement<AccordionPanelProps> | ReactElement<AccordionPanelProps>[])}
+   * @default []
+   */
   children: ReactElement<AccordionPanelProps> | ReactElement<AccordionPanelProps>[]
+  /**
+   * Determines whether the accordion should be flush.
+   *
+   * @type {boolean}
+   * @default false
+   */
   flush?: boolean
+  /**
+   * Determines whether the accordion should be collapsed by default.
+   *
+   * @type {boolean}
+   * @default false
+   */
   collapseAll?: boolean
+  /**
+   * Additional CSS class name(s) to apply.
+   *
+   * @type {string}
+   * @default ''
+   */
+
   theme?: DeepPartial<keepAccordionTheme>
+  /**
+   * The position of the icon relative to the panel title.
+   *
+   * @type {string}
+   * @default 'right'
+   */
+
   iconPosition?: string
+  /**
+   * Determines whether the accordion is disabled.
+   *
+   * @type {boolean}
+   * @default false
+   */
   disabled?: boolean
 }
 

src/components/Accordion/AccordionContent.tsx

@@ -10,7 +10,19 @@ export interface keepAccordionComponentTheme {
   base: string
 }
 
+/**
+ * Props for the AccordionContent component.
+ *
+ * @interface AccordionContentProps
+ * @extends {PropsWithChildren<ComponentProps<'div'>>}
+ */
+
 export interface AccordionContentProps extends PropsWithChildren<ComponentProps<'div'>> {
+  /**
+   * Optional theme configuration for the AccordionContent component.
+   * @type {DeepPartial<keepAccordionComponentTheme>}
+   * @default {}
+   */
   theme?: DeepPartial<keepAccordionComponentTheme>
 }
 

src/components/Accordion/AccordionPanel.tsx

@@ -3,8 +3,23 @@ import { useState } from 'react'
 import type { AccordionProps } from './Accordion'
 import { AccordionPanelContext } from './AccordionPanelContext'
 
+/**
+ * Props for the AccordionPanel component.
+ * @interface AccordionPanelProps
+ * @extends {PropsWithChildren<AccordionProps>}
+ */
 export interface AccordionPanelProps extends PropsWithChildren<AccordionProps> {
+  /**
+   * isOpen - Determines whether the accordion panel should always be open.
+   * @type {boolean}
+   * @default false
+   */
   isOpen?: boolean
+  /**
+   * setOpen - A function to set the open state of the AccordionPanel.
+   * @type {() => void}
+   * @default undefined
+   */
   setOpen?: () => void
 }
 

src/components/Accordion/AccordionPanelContext.tsx

@@ -1,6 +1,13 @@
 import { createContext, useContext } from 'react'
 import type { AccordionPanelProps } from './AccordionPanel'
 
+/**
+ * Context type for the AccordionPanel component.
+ * This type is used to exclude the 'children' prop from the AccordionPanelProps type.
+ * @interface AccordionPanelContext
+ * @extends {Omit<AccordionPanelProps, 'children'>}
+ */
+
 type AccordionPanelContext = Omit<AccordionPanelProps, 'children'>
 
 export const AccordionPanelContext = createContext<AccordionPanelContext | undefined>(undefined)

src/components/Accordion/AccordionTitle.tsx

@@ -23,10 +23,38 @@ export interface keepAccordionTitleTheme {
   }
 }
 
+/**
+ * Props for the AccordionTitle component.
+ * @interface AccordionTitleProps
+ * @extends {ComponentProps<'button'>}
+ */
+
 export interface AccordionTitleProps extends ComponentProps<'button'> {
+  /**
+   * The icon to display when the accordion panel is closed.
+   * @type {ReactNode}
+   * @default "<PlusCircle />"
+   */
   arrowIcon?: FC<ComponentProps<'svg'>>
+
+  /**
+   * The heading level to use for the AccordionTitle.
+   * @type {KeepHeadingLevel}
+   * @default 'h1'
+   */
   as?: KeepHeadingLevel
+
+  /**
+   * The theme for the AccordionTitle component.
+   * @type {DeepPartial<keepAccordionTitleTheme>}
+   * @default {}
+   */
   theme?: DeepPartial<keepAccordionTitleTheme>
+
+  /**
+   * className to apply to the AccordionTitle.
+   * @type {string}
+   */
   className?: string
 }
 
@@ -47,6 +75,10 @@ export const AccordionTitle: FC<AccordionTitleProps> = ({
     closeIcon: CloseIcon,
     openIcon: OpenIcon,
   } = useAccordionContext()
+  /**
+   * Handles the click event for the AccordionTitle.
+   * If the Accordion is not disabled, it toggles the open/closed state of the Accordion item.
+   */
   const onClick = () => typeof setOpen !== 'undefined' && setOpen()
 
   const oldTheme = useTheme().theme.accordion.title