@fpkit/acss 0.5.3 → 0.5.5

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;

package/src/components/popover/popover.stories.tsx

@@ -1,31 +1,30 @@
-import { StoryObj, Meta } from '@storybook/react'
-import { within, expect, userEvent } from '@storybook/test'
+import { StoryObj, Meta } from "@storybook/react";
+import { within, expect, userEvent } from "@storybook/test";
 
-
-import Popover from './popover'
-import { getByText } from '@testing-library/react'
+import Popover from "./popover";
 
 const meta: Meta<typeof Popover> = {
-  title: 'FP.React Components/Basic Popover',
+  title: "FP.React Components/Basic Popover",
   component: Popover,
+  tags: ["experimental"],
   args: {
-    children: 'Hi, I am a popover.',
-    popoverTrigger: 'Hover here',
+    children: "Hi, I am a popover.",
+    popoverTrigger: "Hover here",
     styles: Popover.styles,
   },
-} as Meta
+} as Meta;
 
-export default meta
-type Story = StoryObj<typeof Popover>
+export default meta;
+type Story = StoryObj<typeof Popover>;
 
 export const PopoverComponent: Story = {
   args: {},
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    expect(await canvas.queryByText('Hover here')).toBeInTheDocument()
-    userEvent.hover(canvas.getByText('Hover here'))
-    expect(await canvas.findByText('Hi, I am a popover.')).toBeInTheDocument()
-    await userEvent.unhover(canvas.getByText('Hover here'))
-    expect(canvas.queryByText('Hi, I am a popover.')).not.toBeInTheDocument()
+    const canvas = within(canvasElement);
+    expect(await canvas.queryByText("Hover here")).toBeInTheDocument();
+    userEvent.hover(canvas.getByText("Hover here"));
+    expect(await canvas.findByText("Hi, I am a popover.")).toBeInTheDocument();
+    await userEvent.unhover(canvas.getByText("Hover here"));
+    expect(canvas.queryByText("Hi, I am a popover.")).not.toBeInTheDocument();
   },
-}
+};

package/src/components/progress/progress.stories.tsx

@@ -1,51 +1,45 @@
-import { StoryObj, Meta } from '@storybook/react'
-import { within, userEvent, screen } from '@storybook/test'
+import { StoryObj, Meta } from "@storybook/react";
 
+import "../../styles/progress/progress.css";
 
-import '../../styles/progress/progress.css'
-
-import Progress from './progress'
+import Progress from "./progress";
 
 const meta: Meta<typeof Progress> = {
-  title: 'FP.React Components/Progress',
+  title: "FP.React Components/Progress",
   component: Progress,
-  args: {},
+  tags: ["experimental"],
   decorators: [
     (Story) => (
-      <div style={{ minWidth: '500px', height: '100%' }}>
+      <div style={{ minWidth: "500px", height: "100%" }}>
         <Story />
       </div>
     ),
   ],
-} as Meta
+} as Meta;
 
-export default meta
-type Story = StoryObj<typeof Progress>
+export default meta;
+type Story = StoryObj<typeof Progress>;
 
 export const ProgressComponent: Story = {
-  name: 'Progress Bar',
+  name: "Progress Bar",
   args: {
     isBusy: true,
   },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    //expect(canvas).toBeInTheDocument()
-  },
-} as Story
+} as Story;
 
 export const ProgressIndicator: Story = {
   args: {
     value: 3,
     max: 10,
   },
-} as Story
+} as Story;
 
 export const RedProgress: Story = {
   args: {
     ...ProgressIndicator.args,
     styles: {
-      '--progress-color': 'red',
+      "--progress-color": "red",
     },
     value: 7,
   },
-} as Story
+} as Story;

package/src/components/tag/tag.stories.tsx

@@ -1,39 +1,38 @@
-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 Tag from './tag'
-import './tag.scss'
+import Tag from "./tag";
+import "./tag.scss";
 
 const meta: Meta<typeof Tag> = {
-  title: 'FP.React Components/Tag',
+  title: "FP.React Components/Tag",
   component: Tag,
+  tags: ["beta"],
   args: {
-    // @ts-ignore
-    children: 'Basic Tag',
+    children: "Basic Tag",
     // styles: Tag.styles,
   },
-} as Meta
+} as Meta;
 
-export default meta
-type Story = StoryObj<typeof Tag>
+export default meta;
+type Story = StoryObj<typeof Tag>;
 
 export const TagComponent: Story = {
   args: {},
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    expect(canvas.queryByText(/basic tag/i)).toBeInTheDocument()
+    const canvas = within(canvasElement);
+    expect(canvas.queryByText(/basic tag/i)).toBeInTheDocument();
   },
-}
+};
 
 export const Beta: Story = {
   args: {
-    'data-tag': 'beta',
+    "data-tag": "beta",
   },
-} as Story
+} as Story;
 
 export const Production: Story = {
   args: {
-    'data-tag': 'production',
+    "data-tag": "production",
   },
-} as Story
+} as Story;

package/src/components/text/text.stories.tsx

@@ -1,21 +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 Text from './text'
+import Text from "./text";
 
 const meta: Meta<typeof Text> = {
-  title: 'FP.REACT Components/Text',
+  title: "FP.REACT Components/Text",
   component: Text,
+  tags: ["version:1.0.0"],
   args: {
-    // @ts-ignore
     children:
-      'Exercitation non voluptate fugiat amet dolor tempor consectetur. Eu esse adipisicing laboris duis et velit in quis et sunt pariatur tempor laborum nisi. Et id amet ullamco culpa irure nulla esse dolore velit esse.',
+      "Exercitation non voluptate fugiat amet dolor tempor consectetur. Eu esse adipisicing laboris duis et velit in quis et sunt pariatur tempor laborum nisi. Et id amet ullamco culpa irure nulla esse dolore velit esse.",
   },
-} as Story
+} as Story;
 
-export default meta
-type Story = StoryObj<typeof Text>
+export default meta;
+type Story = StoryObj<typeof Text>;
 
 export const ParagraphText: Story = {
   args: {},
@@ -23,45 +22,45 @@ export const ParagraphText: Story = {
   //   const canvas = within(canvasElement)
   //   expect(canvas.getByText(/link/i)).toBeInTheDocument()
   // },
-}
+};
 
 export const span: Story = {
   args: {
-    as: 'span',
-    children: 'Heading Text',
+    as: "span",
+    children: "Heading Text",
   },
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    expect(canvas.getByText(/heading/i)).toBeInTheDocument()
+    const canvas = within(canvasElement);
+    expect(canvas.getByText(/heading/i)).toBeInTheDocument();
   },
-} as Story
+} as Story;
 
 export const Blockquote: Story = {
   args: {
-    as: 'blockquote',
+    as: "blockquote",
     children:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.',
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.",
   },
-} as Story
+} as Story;
 
 export const Strong: Story = {
   args: {
-    as: 'strong',
-    children: 'Emphasis Text',
+    as: "strong",
+    children: "Emphasis Text",
   },
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    expect(canvas.getByText(/emphasis/i)).toBeInTheDocument()
+    const canvas = within(canvasElement);
+    expect(canvas.getByText(/emphasis/i)).toBeInTheDocument();
   },
-} as Story
+} as Story;
 
 export const Code: Story = {
   args: {
-    as: 'code',
-    children: 'Code Text',
+    as: "code",
+    children: "Code Text",
   },
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    expect(canvas.getByText(/code/i)).toBeInTheDocument()
+    const canvas = within(canvasElement);
+    expect(canvas.getByText(/code/i)).toBeInTheDocument();
   },
-} as Story
+} as Story;