@fpkit/acss 0.5.4 → 0.5.6

package/src/components/icons/index.ts

@@ -1,29 +1,36 @@
-export * from './types'
-export * from './components/code'
-export * from './components/home'
-export * from './components/add'
-export * from './components/arrow-left'
-export * from './components/chat'
-export * from './components/arrow-down'
-export * from './components/arrow-left'
-export * from './components/arrow-up'
-export * from './components/arrow-right'
-export * from './components/user'
-export * from './components/right'
-export * from './components/left'
-export * from './components/minus'
-export * from './components/remove'
-export * from './components/copy'
-export * from './components/svg'
-export * from './components/up'
-export * from './components/down'
-export * from './components/star'
-export * from './components/user'
-export * from './components/play'
-export * from './components/pause'
-export * from './components/resume'
-export * from './components/stop'
-export * from './components/stop-solid'
-export * from './components/play-solid'
-export * from './components/pause-solid'
-export * from './components/resume-solid'
+export * from "./types";
+export * from "./components/code";
+export * from "./components/home";
+export * from "./components/add";
+export * from "./components/arrow-left";
+export * from "./components/chat";
+export * from "./components/arrow-down";
+export * from "./components/arrow-left";
+export * from "./components/arrow-up";
+export * from "./components/arrow-right";
+export * from "./components/user";
+export * from "./components/right";
+export * from "./components/left";
+export * from "./components/minus";
+export * from "./components/remove";
+export * from "./components/copy";
+export * from "./components/svg";
+export * from "./components/up";
+export * from "./components/down";
+export * from "./components/star";
+export * from "./components/user";
+export * from "./components/play";
+export * from "./components/pause";
+export * from "./components/resume";
+export * from "./components/stop";
+export * from "./components/stop-solid";
+export * from "./components/play-solid";
+export * from "./components/pause-solid";
+export * from "./components/resume-solid";
+export * from "./components/info";
+export * from "./components/alert-solid";
+export * from "./components/info-solid";
+export * from "./components/question-solid";
+export * from "./components/warn-solid";
+export * from "./components/success-solid";
+export * from "./components/alert-square-solid";

package/src/components/icons/types.ts

@@ -2,7 +2,7 @@ import { ComponentProps } from '#/types'
 
 export interface IconProps extends Partial<ComponentProps> {
   fill?: string
-  size?: | 16 | 24 | 32 | 48 | 64 | 96 | 128
+  size?: number
   strokeColor?: string
   strokeWidth?: string
   role?: string

package/src/components/images/figure.stories.tsx

@@ -1,31 +1,31 @@
-import { StoryObj, Meta } from '@storybook/react'
-import { within, expect } from '@storybook/test'
+import { StoryObj, Meta } from "@storybook/react";
+import { within, expect } from "@storybook/test";
 
-
-import Figure from './figure'
+import Figure from "./figure";
 
 const meta: Meta<typeof Figure> = {
-  title: 'FP.REACT Components/Figure',
+  title: "FP.REACT Components/Figure",
   component: Figure,
+  tags: ["version:1.0.0"],
   parameters: {
-    actions: { argTypesRegex: '^on.*' },
+    actions: { argTypesRegex: "^on.*" },
     docs: {
       description: {
-        component: 'Figure description here...',
+        component: "Figure description here...",
       },
     },
   },
   args: {},
-} as Story
+} as Story;
 
-export default meta
-type Story = StoryObj<typeof Figure>
+export default meta;
+type Story = StoryObj<typeof Figure>;
 
 export const FigureComponent: Story = {
   args: {},
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
+    const canvas = within(canvasElement);
     // await expect(canvas.getByRole('img')).toBeInTheDocument()
-    expect(canvas.getByRole('figure')).toBeInTheDocument()
+    expect(canvas.getByRole("figure")).toBeInTheDocument();
   },
-}
+};

package/src/components/images/img.stories.tsx

@@ -1,24 +1,24 @@
-import { StoryObj, Meta } from '@storybook/react'
-import { within, expect } from '@storybook/test'
+import { StoryObj, Meta } from "@storybook/react";
+import { within, expect } from "@storybook/test";
 
-
-import Img from './img'
+import Img from "./img";
 
 const meta: Meta<typeof Img> = {
-  title: 'FP.REACT Components/Img',
+  title: "FP.REACT Components/Img",
   component: Img,
+  tags: ["version:1.0.0"],
   args: {
-    src: '//',
+    src: "//",
   },
-} as Story
+} as Story;
 
-export default meta
-type Story = StoryObj<typeof Img>
+export default meta;
+type Story = StoryObj<typeof Img>;
 
 export const ImgComponent: Story = {
   args: {},
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    await expect(canvas.getByRole('img')).toBeInTheDocument()
+    const canvas = within(canvasElement);
+    await expect(canvas.getByRole("img")).toBeInTheDocument();
   },
-}
+};

package/src/components/link/link.stories.tsx

@@ -1,74 +1,71 @@
-import { StoryObj, Meta } from '@storybook/react'
+import { StoryObj, Meta } from "@storybook/react";
 
-import { within, expect } from '@storybook/test'
+import { within, expect } from "@storybook/test";
 
-
-
-import Link from './link'
-import '../../styles/link/link.css'
+import Link from "./link";
+import "../../styles/link/link.css";
 
 const meta: Meta<typeof Link> = {
-  title: 'FP.React Components/Links',
+  title: "FP.React Components/Links",
+  tags: ["version:1.0.0"],
   component: Link,
   args: {
-    // @ts-ignore
-    href: '/',
-    children: 'Link',
+    href: "/",
+    children: "Link",
   },
-} as Meta
+} as Meta;
 
-export default meta
-type Story = StoryObj<typeof Link>
+export default meta;
+type Story = StoryObj<typeof Link>;
 
 export const LinkComponent: Story = {
   args: {},
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    const link = canvas.getByRole('link')
-    expect(link).toBeInTheDocument()
-    expect(link).toHaveTextContent('Link')
+    const canvas = within(canvasElement);
+    const link = canvas.getByRole("link");
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveTextContent("Link");
   },
-}
+};
 
 export const ExternalLink: Story = {
   args: {
-    // @ts-ignore
-    href: 'https://www.google.com',
-    target: '_blank',
-    rel: 'noopener noreferrer',
+    href: "https://www.google.com",
+    target: "_blank",
+    rel: "noopener noreferrer",
     prefetch: true,
-    children: 'Google',
+    children: "Google",
   },
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    const link = canvas.getByRole('link')
-    expect(link).toBeInTheDocument()
-    expect(link).toHaveTextContent('Google')
-    expect(link).toHaveAttribute('href', 'https://www.google.com')
-    expect(link).toHaveAttribute('target', '_blank')
-    expect(link).toHaveAttribute('rel', 'noopener noreferrer prefetch')
+    const canvas = within(canvasElement);
+    const link = canvas.getByRole("link");
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveTextContent("Google");
+    expect(link).toHaveAttribute("href", "https://www.google.com");
+    expect(link).toHaveAttribute("target", "_blank");
+    expect(link).toHaveAttribute("rel", "noopener noreferrer prefetch");
   },
-}
+} as Story;
 
 export const ButtonLink: Story = {
   args: {
     ...LinkComponent.args,
     children: <b>Button Link</b>,
   },
-} as Story
+} as Story;
 
 export const ButtonPill: Story = {
   args: {
     ...LinkComponent.args,
     children: <i>Button Link</i>,
   },
-} as Story
+} as Story;
 
 export const ButtonRounded: Story = {
   args: {
     ...ButtonLink.args,
     styles: {
-      '--link-radius': 'initial',
+      "--link-radius": "initial",
     },
   },
-} as Story
+} as Story;

package/src/components/link/link.tsx

@@ -1,11 +1,24 @@
-import UI from '../ui'
-import React from 'react'
+import UI from "../ui";
+import React from "react";
 
 export type LinkProps = {
-  /** Applies button styling to the link */
-  btnStyle?: boolean
+  href?: string;
+
+  target?: string;
+
+  rel?: string;
+
+  children: React.ReactNode;
+
+  styles?: React.CSSProperties;
+
+  prefetch?: boolean;
+
+  btnStyle?: string;
+
+  onPointerDown?: (event: React.PointerEvent<HTMLAnchorElement>) => void;
 } & React.ComponentProps<typeof UI> &
-  React.ComponentProps<'a'>
+  React.ComponentProps<"a">;
 
 export const Link = ({
   href,
@@ -18,14 +31,14 @@ export const Link = ({
   onPointerDown,
   ...props
 }: LinkProps) => {
-  let relValue = rel
+  let relValue = rel;
 
-  if (target === '_blank')
-    relValue = `noopener noreferrer ${prefetch ? 'prefetch' : ''}`
+  if (target === "_blank")
+    relValue = `noopener noreferrer ${prefetch ? "prefetch" : ""}`;
 
   const handleOnpointerDown = (e: React.PointerEvent<HTMLAnchorElement>) => {
-    if (onPointerDown) onPointerDown?.(e)
-  }
+    if (onPointerDown) onPointerDown?.(e);
+  };
 
   return (
     <UI
@@ -41,8 +54,8 @@ export const Link = ({
     >
       {children}
     </UI>
-  )
-}
+  );
+};
 
-export default Link
-Link.displayName = 'Link'
+export default Link;
+Link.displayName = "Link";

package/src/components/list/list.stories.tsx

@@ -1,16 +1,16 @@
-import React from 'react'
+import React from "react";
 
-import { StoryObj, Meta } from '@storybook/react'
+import { StoryObj, Meta } from "@storybook/react";
 
-import { within, userEvent } from '@storybook/test'
+// import { within, userEvent } from "@storybook/test";
 
-
-import List from './list'
+import List from "./list";
 
 const meta: Meta<typeof List> = {
-  title: 'FP.React Components/List',
+  title: "FP.React Components/List",
+  tags: ["version:1.0.0"],
   component: List,
-} as Meta
+} as Meta;
 
 const listElm = (
   <>
@@ -18,10 +18,10 @@ const listElm = (
     <List.ListItem>About</List.ListItem>
     <List.ListItem>Contact</List.ListItem>
   </>
-)
+);
 
-export default meta
-type Story = StoryObj<typeof List>
+export default meta;
+type Story = StoryObj<typeof List>;
 
 export const DefaultList: Story = {
   args: {
@@ -33,25 +33,25 @@ export const DefaultList: Story = {
       control: false,
     },
   },
-} as Story
+} as Story;
 
 export const UnstyledList: Story = {
   args: {
     ...DefaultList.args,
-    role: 'list',
+    role: "list",
   },
   parameters: {
     docs: {
       description: {
-        story: 'Another description `on the story`, with some markdown',
+        story: "Another description `on the story`, with some markdown",
       },
     },
   },
-} as Story
+} as Story;
 
 export const InlineList: Story = {
   args: {
     ...UnstyledList.args,
-    'data-list': 'inline',
+    "data-list": "inline",
   },
-} as Story
+} as Story;

package/src/components/modal/dialog.tsx

@@ -1,24 +1,24 @@
-import UI from '../ui'
-import React from 'react'
+import UI from "../ui";
+import React from "react";
 
 export type DialogProps = {
   /**
    * React ref for dialog element
    */
-  modalRef: React.RefObject<HTMLDialogElement>
+  modalRef: React.RefObject<HTMLDialogElement>;
   /**
    * Handle close modal event
    */
-  closeModal?: (e: React.SyntheticEvent<HTMLDialogElement>) => void
+  closeModal?: (e: React.SyntheticEvent<HTMLDialogElement>) => void;
   /**
    * open modal on mount
    */
-  openOnMount?: boolean
-} & React.ComponentProps<typeof UI>
+  openOnMount?: boolean;
+} & React.ComponentProps<typeof UI>;
 /**
  * Dialog component
  */
-export const Dialog = ({
+export const ModalDialog = ({
   id,
   children,
   classes,
@@ -28,9 +28,9 @@ export const Dialog = ({
 }: DialogProps) => {
   const handleCloseModal = (e: React.SyntheticEvent<HTMLDialogElement>) => {
     if (e.currentTarget === e.target) {
-      e.currentTarget.close()
+      e.currentTarget.close();
     }
-  }
+  };
 
   return (
     <UI
@@ -44,7 +44,8 @@ export const Dialog = ({
     >
       {children}
     </UI>
-  )
-}
+  );
+};
 
-Dialog.displayName = 'Dialog'
+export default React.memo(ModalDialog);
+ModalDialog.displayName = "Dialog";

package/src/components/modal/modal.tsx

@@ -1,33 +1,33 @@
-import React from 'react'
-import { ComponentProps } from '../../types'
-import { Button } from '../buttons/button'
-import { Dialog } from './dialog'
+import React from "react";
+import { ComponentProps } from "../../types";
+import { Button } from "../buttons/button";
+import { ModalDialog } from "./dialog";
 
 export interface ModalProps extends ComponentProps {
   /**
    * The child component/content for open button
    */
-  openChild?: React.ReactNode
+  openChild?: React.ReactNode;
   /**
    * The child component/content for close button
    */
-  closeChild?: React.ReactNode
+  closeChild?: React.ReactNode;
   /**
    * The child component/content for modal header
    */
-  modalHeader?: React.ReactNode
+  modalHeader?: React.ReactNode;
   /**
    * The child component/content for modal footer
    */
-  modalFooter?: React.ReactNode
+  modalFooter?: React.ReactNode;
   /**
    * The child component/content for modal body
    */
-  children: React.ReactNode
+  children: React.ReactNode;
   /**
    * Open modal on mount when set to true
    */
-  showOpen?: boolean
+  showOpen?: boolean;
 }
 export const Modal = ({
   openChild,
@@ -38,24 +38,22 @@ export const Modal = ({
   showOpen = false,
   ...props
 }: ModalProps) => {
-  const dialogRef = React.useRef<HTMLDialogElement>(null)
+  const dialogRef = React.useRef<HTMLDialogElement>(null);
   const openModal = (): void => {
     if (dialogRef.current) {
-      if(showOpen)
-      dialogRef.current.show()
-      else
-      dialogRef.current.showModal()
+      if (showOpen) dialogRef.current.show();
+      else dialogRef.current.showModal();
     }
-  }
+  };
   const closeModal = () => {
     if (dialogRef.current) {
-      dialogRef.current.close()
+      dialogRef.current.close();
     }
-  }
+  };
 
   return (
     <>
-      <Dialog modalRef={dialogRef} openOnMount={showOpen} {...props}>
+      <ModalDialog modalRef={dialogRef} openOnMount={showOpen} {...props}>
         <section>
           {modalHeader}
           {children}
@@ -64,22 +62,22 @@ export const Modal = ({
               <Button
                 type="button"
                 pointerDown={() => {
-                  closeModal()
+                  closeModal();
                 }}
               >
-                {closeChild || 'Close'}
-              </Button>{' '}
+                {closeChild || "Close"}
+              </Button>{" "}
             </div>
           )}
         </section>
-      </Dialog>
-      { !showOpen && (
-      <Button type="button" pointerDown={openModal}>
-        {openChild || 'Open Modal'}
-      </Button>
+      </ModalDialog>
+      {!showOpen && (
+        <Button type="button" pointerDown={openModal}>
+          {openChild || "Open Modal"}
+        </Button>
       )}
     </>
-  )
-}
+  );
+};
 
-Modal.displayName = 'Modal'
+Modal.displayName = "Modal";

package/src/components/nav/nav.stories.tsx

@@ -1,19 +1,20 @@
-import { StoryObj, Meta } from '@storybook/react'
-import { within, expect } from '@storybook/test'
+import { StoryObj, Meta } from "@storybook/react";
+import { within, expect } from "@storybook/test";
 
-import React from 'react'
+import React from "react";
 
-import Nav from './nav'
-import Link from '../link/link'
+import Nav from "./nav";
+import Link from "../link/link";
 
 const meta: Meta<typeof Nav> = {
-  title: 'FP.REACT Components/Nav',
+  title: "FP.REACT Components/Nav",
   component: Nav,
+  tags: ["rc"],
   parameters: {
-    actions: { argTypesRegex: '^on.*' },
+    actions: { argTypesRegex: "^on.*" },
     docs: {
       description: {
-        component: 'Nav description here...',
+        component: "Nav description here...",
       },
     },
   },
@@ -28,22 +29,22 @@ const meta: Meta<typeof Nav> = {
         </Nav.Item>
       </Nav.List>
     ),
-    id: 'nav',
-    classes: 'nav',
+    id: "nav",
+    classes: "nav",
   },
-} as Story
+} as Story;
 
-export default meta
-type Story = StoryObj<typeof Nav>
+export default meta;
+type Story = StoryObj<typeof Nav>;
 
 export const NavComponent: Story = {
   args: {},
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    expect(canvas.getAllByRole('link')).toHaveLength(2)
-    expect(canvas.getByText(/link 1/i)).toBeInTheDocument()
+    const canvas = within(canvasElement);
+    expect(canvas.getAllByRole("link")).toHaveLength(2);
+    expect(canvas.getByText(/link 1/i)).toBeInTheDocument();
   },
-}
+};
 
 export const NavSection: Story = {
   args: {
@@ -57,11 +58,11 @@ export const NavSection: Story = {
     ),
   },
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    expect(canvas.getByText('Link 1')).toBeInTheDocument()
-    expect(canvas.getByText('Link 2')).toBeInTheDocument()
+    const canvas = within(canvasElement);
+    expect(canvas.getByText("Link 1")).toBeInTheDocument();
+    expect(canvas.getByText("Link 2")).toBeInTheDocument();
   },
-} as Story
+} as Story;
 
 export const NavBlock: Story = {
   args: {
@@ -75,12 +76,12 @@ export const NavBlock: Story = {
       </>
     ),
   },
-} as Story
+} as Story;
 
 export const MultipleNavs: Story = {
   args: {
     ...NavSection.args,
-    classes: 'navbar',
+    classes: "navbar",
     children: (
       <>
         <Nav.List>
@@ -94,4 +95,4 @@ export const MultipleNavs: Story = {
       </>
     ),
   },
-} as Story
+} as Story;