@fpkit/acss 0.5.8 → 0.5.10

package/src/components/breadcrumbs/README.mdx

@@ -0,0 +1,91 @@
+import { Meta } from "@storybook/addon-docs/blocks";
+
+<Meta title="FP.REACT Components/Breadcrumb/Readme" />
+
+# Breadcrumb Component
+
+## Summary
+
+The `Breadcrumb` component is used to display a breadcrumb navigation for the
+current page. It supports custom routes, starting routes, and truncation of long
+breadcrumb names.
+
+## Features
+
+- Customizable routes and starting route
+- Truncation of long breadcrumb names
+- Customizable spacer between breadcrumb items
+- Accessible with ARIA labels
+
+## Props
+
+```ts
+type customRoute = {
+  path?: string;
+  name: string;
+  url?: string;
+};
+
+type BreadcrumbProps = {
+  routes?: customRoute[];
+  startRoute?: React.ReactNode;
+  startRouteUrl?: string;
+  spacer?: React.ReactNode;
+  currentRoute?: string;
+  ariaLabelPrefix?: string;
+  truncateLength?: number;
+  linkProps?: React.ComponentProps<typeof Link>;
+} & React.ComponentProps<typeof UI>;
+```
+
+## Technical Details
+
+The `Breadcrumb` component uses the `UI` and `Link` components for rendering the
+breadcrumb items and links. It also uses the `Truncate` utility to truncate long
+breadcrumb names.
+
+## Usage Example
+
+### Basic Usage
+
+```tsx
+import Breadcrumb from './breadcrumb'
+
+const routes = [
+  { path: '/home', name: 'Home' },
+  { path: '/about', name: 'About' },
+  { path: '/contact', name: 'Contact' },
+]
+
+<Breadcrumb routes={routes} currentRoute="/about" />
+```
+
+### Advanced Usage
+
+```tsx
+import Breadcrumb from './breadcrumb'
+
+const routes = [
+  { path: '/home', name: 'Home' },
+  { path: '/about', name: 'About Us', url: '/about-us' },
+  { path: '/contact', name: 'Contact Us', url: '/contact-us' },
+]
+
+<Breadcrumb
+  routes={routes}
+  currentRoute="/contact"
+  startRoute="Dashboard"
+  startRouteUrl="/dashboard"
+  spacer={<span className="mx-2">/</span>}
+  ariaLabelPrefix="You are here:"
+  truncateLength={10}
+  linkProps={{ className: 'text-blue-500 hover:underline' }}
+/>
+```
+
+### Additional Notes
+
+- Ensure to provide meaningful names for the routes to enhance accessibility.
+- Customize the `spacer` prop to match your design requirements.
+- Use the `truncateLength` prop to control the maximum length of breadcrumb
+  names.

package/src/components/breadcrumbs/breadcrumb.stories.tsx

@@ -1,5 +1,5 @@
-import type { StoryObj, Meta } from "@storybook/react";
-import { within, fn, expect } from "@storybook/test";
+import type { StoryObj, Meta } from "@storybook/react-vite";
+import { within, fn, expect } from "storybook/test";
 
 import Breadcrumb from "./breadcrumb";
 

package/src/components/breadcrumbs/breadcrumb.tsx

@@ -1,38 +1,38 @@
 // Code: Breadcrumb component
-import React from 'react'
-import UI from '#components/ui'
-import { Truncate } from '#libs/content'
-import Link from '#components/link/link'
+import React from "react";
+import UI from "#components/ui";
+import { Truncate } from "#libs/content";
+import Link from "#components/link/link";
 
 // TYPES
 
 type customRoute = {
   /** The path or id for routing */
-  path?: string
+  path?: string;
   /** The display name */
-  name: string
+  name: string;
   /** The url if linking out */
-  url?: string
-}
+  url?: string;
+};
 
 type BreadcrumbProps = {
   /** Array of custom route objects */
-  routes?: customRoute[]
+  routes?: customRoute[];
   /** Starting route node */
-  startRoute?: React.ReactNode
+  startRoute?: React.ReactNode;
   /* Starting route url */
-  startRouteUrl?: string
+  startRouteUrl?: string;
   /** Spacer node between routes */
-  spacer?: React.ReactNode
+  spacer?: React.ReactNode;
   /** String representing current route */
-  currentRoute?: string
+  currentRoute?: string;
   /** Prefix breadcrumb aria-label - "prefix breadcrumb" */
-  ariaLabelPrefix?: string
+  ariaLabelPrefix?: string;
   /** Truncate breadcrumb text after this length */
-  truncateLength?: number
+  truncateLength?: number;
   /** Link props for breadcrumb links */
-  linkProps?: React.ComponentProps<typeof Link>
-} & React.ComponentProps<typeof UI>
+  linkProps?: React.ComponentProps<typeof Link>;
+} & React.ComponentProps<typeof UI>;
 
 // Components
 
@@ -53,11 +53,17 @@ const Items = ({
   ...props
 }: React.ComponentProps<typeof UI>) => {
   return (
-    <li data-list="unstyled inline" {...props}>
+    <li
+      id={id}
+      style={styles}
+      className={classes}
+      data-list="unstyled inline"
+      {...props}
+    >
       {children}
     </li>
-  )
-}
+  );
+};
 
 /**
  * List component.
@@ -70,8 +76,8 @@ const List = ({ children, ...props }: React.ComponentProps<typeof UI>) => {
     <UI as="ol" data-list="unstyled inline" {...props}>
       {children}
     </UI>
-  )
-}
+  );
+};
 
 /**
  * Nav component.
@@ -93,8 +99,8 @@ const Nav = ({
     <UI as="nav" id={id} styles={styles} className={classes} {...props}>
       <List>{children}</List>
     </UI>
-  )
-}
+  );
+};
 
 /**
  * Navigation component for breadcrumbs.
@@ -110,7 +116,7 @@ const Nav = ({
  * @param props.children - Child components.
  */
 export const Breadcrumb = ({
-  startRoute = 'Home',
+  startRoute = "Home",
   startRouteUrl = "/",
   currentRoute,
   spacer = <>&#47;</>,
@@ -123,13 +129,13 @@ export const Breadcrumb = ({
   linkProps,
   ...props
 }: BreadcrumbProps): React.JSX.Element => {
-  const [currentPath, setCurrentPath] = React.useState('')
+  const [currentPath, setCurrentPath] = React.useState("");
   React.useEffect(() => {
-    const path = currentRoute || window.location.pathname
+    const path = currentRoute || window.location.pathname;
     if (path.length) {
-      setCurrentPath(path)
+      setCurrentPath(path);
     }
-  }, [currentRoute])
+  }, [currentRoute]);
 
   /**
    * Gets the path name for the given path segment.
@@ -138,23 +144,22 @@ export const Breadcrumb = ({
    * @returns The path name object for the given path segment.
    */
   const getPathName = (pathSegment: string): customRoute => {
-    const route = routes?.find((route) => route.path === pathSegment)
+    const route = routes?.find((route) => route.path === pathSegment);
 
     return {
       path: route?.path || pathSegment,
       name: route?.name || pathSegment,
       url: route?.url || pathSegment,
-    }
-  }
+    };
+  };
 
   /** Array of path segments from current path */
-  const segments = currentPath.split('/').filter((segment) => segment)
+  const segments = currentPath.split("/").filter((segment) => segment);
   /** Index of last item in segments array */
-  const lastSegment = segments.length - 1
+  const lastSegment = segments.length - 1;
 
   /** Unique id for breadcrumb */
-  const uuid = React.useId()
-
+  const uuid = React.useId();
 
   return currentPath.length ? (
     <Nav
@@ -165,62 +170,62 @@ export const Breadcrumb = ({
       aria-label={ariaLabelPrefix}
     >
       <Items key={`${startRoute}-${uuid}`}>
-        <Link href={startRouteUrl} {...linkProps}>{startRoute}</Link>
+        <Link href={startRouteUrl} {...linkProps}>
+          {startRoute}
+        </Link>
       </Items>
       <>
-      {segments.length ? (
-        segments.map((segment: any, index: number) => {
-          const currentSegment = getPathName(segment)
-          const { name, url, path } = currentSegment
-          return index === lastSegment ? (
-            <>
-              {typeof segments[lastSegment] === 'string' &&
-                segments[lastSegment].length > 3 &&
-                segments[lastSegment] !== segments[lastSegment - 1] && (
-                  <Items  key={`${path || index}-${uuid}`}>
-                     
-                      <span aria-hidden="true">{spacer}</span>
-                      <a
-                      href="#"
-                        aria-current="page"
-                        aria-label={
-                          name.length > truncateLength ? name : undefined
-                        }
-                      >
-                        {Truncate(decodeURIComponent(name), truncateLength)}
-                      </a>
-                     
-                  </Items>
-                )}
-            </>
-          ) : (
-            <Items key={`${currentSegment?.name}-${uuid}`}>
-              <span aria-hidden="true">{spacer}</span>
-              <span>
-                <Link
-                  href={url}
-                  aria-label={name.length > truncateLength ? name : undefined}
-                 {...linkProps}
-                >
-                  {Truncate(decodeURIComponent(name), truncateLength)}
-                </Link>
-              </span>
-            </Items>
-          );
-        })
-      ) : (
-        null
-      )}
+        {segments.length
+          ? segments.map((segment: string, index: number) => {
+              const currentSegment = getPathName(segment);
+              const { name, url, path } = currentSegment;
+              return index === lastSegment ? (
+                <>
+                  {typeof segments[lastSegment] === "string" &&
+                    segments[lastSegment].length > 3 &&
+                    segments[lastSegment] !== segments[lastSegment - 1] && (
+                      <Items key={`${path || index}-${uuid}`}>
+                        <span aria-hidden="true">{spacer}</span>
+                        <a
+                          href="#"
+                          aria-current="page"
+                          aria-label={
+                            name.length > truncateLength ? name : undefined
+                          }
+                        >
+                          {Truncate(decodeURIComponent(name), truncateLength)}
+                        </a>
+                      </Items>
+                    )}
+                </>
+              ) : (
+                <Items key={`${currentSegment?.name}-${uuid}`}>
+                  <span aria-hidden="true">{spacer}</span>
+                  <span>
+                    <Link
+                      href={url}
+                      aria-label={
+                        name.length > truncateLength ? name : undefined
+                      }
+                      {...linkProps}
+                    >
+                      {Truncate(decodeURIComponent(name), truncateLength)}
+                    </Link>
+                  </span>
+                </Items>
+              );
+            })
+          : null}
       </>
     </Nav>
   ) : (
     <></>
-  )
-}
+  );
+};
 
-export default Breadcrumb
+export default Breadcrumb;
 
-Breadcrumb.displayName = 'BreadCrumb'
-Breadcrumb.Nav = Nav
-Breadcrumb.List = List
-Breadcrumb.Items = Items
+Breadcrumb.displayName = "BreadCrumb";
+Breadcrumb.Nav = Nav;
+Breadcrumb.List = List;
+Breadcrumb.Items = Items;

package/src/components/buttons/README.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs/blocks";
 
 <Meta title="FP.REACT Components/Buttons/Readme" />
 

package/src/components/buttons/button.scss

@@ -1,7 +1,7 @@
 button {
-  --btn-xs: 0.6rem;
-  --btn-sm: 0.7rem;
-  --btn-md: 0.85rem;
+  --btn-xs: 0.5rem;
+  --btn-sm: 0.625rem;
+  --btn-md: 0.75rem;
   --btn-lg: 1.3125rem;
   --btn-pill: 100rem;
   --btn-height: 2.5rem;

package/src/components/buttons/button.stories.tsx

@@ -1,5 +1,5 @@
-import type { StoryObj, Meta } from "@storybook/react";
-import { within, userEvent, expect, fn } from "@storybook/test";
+import type { StoryObj, Meta } from "@storybook/react-vite";
+import { within, userEvent, expect, fn } from "storybook/test";
 
 import Button from "./button";
 import "./button.scss";

package/src/components/buttons/button.test.tsx

@@ -3,7 +3,7 @@ import { render, screen } from "@testing-library/react";
 import { Button } from "./button";
 // import user from '@testing-library/user-event'
 import jest from "jest-mock";
-import { userEvent } from "@storybook/test";
+import { userEvent } from "storybook/test";
 
 describe("Button", () => {
   it("renders a button element with the correct label", () => {

package/src/components/cards/card.stories.tsx

@@ -1,5 +1,5 @@
-import { StoryObj, Meta } from "@storybook/react";
-// import { within, userEvent, screen } from "@storybook/test";
+import { StoryObj, Meta } from "@storybook/react-vite";
+// import { within, userEvent, screen } from "storybook/test";
 
 import Card from "./card";
 // import './card.scss'

package/src/components/details/README.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs/blocks";
 
 <Meta title="FP.REACT Components/Details/Readme" />
 

package/src/components/details/details.stories.tsx

@@ -1,5 +1,5 @@
-import { StoryObj, Meta } from "@storybook/react";
-import { within, expect, userEvent } from "@storybook/test";
+import { StoryObj, Meta } from "@storybook/react-vite";
+import { within, expect, userEvent } from "storybook/test";
 
 import Details from "./details";
 import Icons from "../icons/icon";

package/src/components/dialog/README.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs/blocks";
 
 <Meta title="FP.REACT Components/Dialog/Readme" />
 

package/src/components/dialog/dialog-modal.stories.tsx

@@ -1,5 +1,5 @@
-import { StoryObj, Meta } from "@storybook/react";
-import { within, expect, userEvent, waitFor } from "@storybook/test";
+import { StoryObj, Meta } from "@storybook/react-vite";
+import { within, expect, userEvent, waitFor } from "storybook/test";
 
 import DialogModal from "./dialog-modal";
 import WithInstructions from "#/decorators/instructions";

package/src/components/dialog/dialog-modal.tsx

@@ -108,4 +108,4 @@ export const DialogModal: React.FC<DialogModalProps> = ({
   );
 };
 export default DialogModal;
-DialogModal.displayName = "Dialog Modal";
+DialogModal.displayName = "DialogModal";

package/src/components/dialog/dialog.stories.tsx

@@ -1,5 +1,5 @@
-import { StoryObj, Meta, StoryFn } from "@storybook/react";
-import { within, expect, userEvent } from "@storybook/test";
+import { StoryObj, Meta, StoryFn } from "@storybook/react-vite";
+import { within, expect, userEvent } from "storybook/test";
 
 import Dialog from "./dialog";
 import React from "react";

package/src/components/dialog/views/README.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs/blocks";
 
 <Meta title="FP.REACT Views/DialogHeader/Readme" />
 

package/src/components/dialog/views/dialog-header.stories.tsx

@@ -1,5 +1,5 @@
-import { StoryObj, Meta } from "@storybook/react";
-import { within, expect } from "@storybook/test";
+import { StoryObj, Meta } from "@storybook/react-vite";
+import { within, expect } from "storybook/test";
 
 import DialogHeader from "./dialog-header";
 

package/src/components/form/form.stories.tsx

@@ -1,5 +1,5 @@
-import { StoryObj, Meta } from "@storybook/react";
-import { within, expect } from "@storybook/test";
+import { StoryObj, Meta } from "@storybook/react-vite";
+import { within, expect } from "storybook/test";
 
 import Form from "./form";
 import "./form.scss";

package/src/components/form/input.stories.tsx

@@ -1,5 +1,5 @@
-import { StoryObj, Meta } from "@storybook/react";
-import { within, userEvent, expect } from "@storybook/test";
+import { StoryObj, Meta } from "@storybook/react-vite";
+import { within, userEvent, expect } from "storybook/test";
 
 import Input from "./inputs";
 import "./form.scss";

package/src/components/form/inputs.tsx

@@ -1,25 +1,20 @@
-import React from 'react'
-import FP from '../fp'
+import React from "react";
+import FP from "../fp";
 
 export type InputProps = {
   /**
    * The type of the input.
    */
-  type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search'
+  type?: "text" | "password" | "email" | "number" | "tel" | "url" | "search";
 
   /**
    * Set the element as disabled
    */
-  isDisabled?: boolean
-} & React.ComponentProps<typeof FP>
+  isDisabled?: boolean;
+} & React.ComponentProps<typeof FP>;
 
-/**
- * Input component that renders an HTML input element.
- * @param {InputProps} props - The input component props.
- * @returns {JSX.Element} - The input component.
- */
 export const Input = ({
-  type = 'text',
+  type = "text",
   name,
   value,
   placeholder,
@@ -38,29 +33,29 @@ export const Input = ({
 }: InputProps): JSX.Element => {
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (onChange && !disabled) {
-      onChange?.(e)
+      onChange?.(e);
     }
-  }
+  };
 
   const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
     if (onBlur && !disabled) {
-      onBlur?.(e)
+      onBlur?.(e);
     }
-  }
+  };
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (onPointerDown && !disabled) {
-      e.preventDefault()
-      onPointerDown?.(e)
+      e.preventDefault();
+      onPointerDown?.(e);
     }
-  }
+  };
 
   return (
     <FP
       as="input"
       id={id}
       type={type}
-      placeholder={placeholder || `${required ? '*' : ''} ${type} input `}
+      placeholder={placeholder || `${required ? "*" : ""} ${type} input `}
       className={classes}
       styles={styles}
       onChange={handleChange}
@@ -77,8 +72,7 @@ export const Input = ({
       readOnly={readonly}
       {...props}
     />
-  )
-}
-
-Input.displayName = 'Input'
-export default Input
+  );
+};
+Input.displayName = "Input";
+export default Input;

package/src/components/form/select.stories.tsx

@@ -1,5 +1,5 @@
-import { StoryObj, Meta } from "@storybook/react";
-import { within, expect } from "@storybook/test";
+import { StoryObj, Meta } from "@storybook/react-vite";
+import { within, expect } from "storybook/test";
 
 import Select from "./select";
 import React from "react";