@fpkit/acss 0.5.9 → 0.5.12

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/card.ts

@@ -0,0 +1,2 @@
+export { Card, Title, Content, Footer, type CardProps } from "./cards/card";
+export { default } from "./cards/card";

package/src/components/cards/README.md

@@ -0,0 +1,80 @@
+
+# Card Component
+
+The Card component is a versatile and reusable React component for creating card-like UI elements. It's part of the FPKit React component library.
+
+## Usage
+
+```tsx
+import Card from 'libs/react/fpkit/src/components/cards/card';
+
+<Card>
+  <Card.Title>Card Title</Card.Title>
+  <Card.Content>
+    This is the content of the card.
+  </Card.Content>
+</Card>
+```
+
+## Components
+
+### Card
+
+The main container component for the card.
+
+#### Props
+
+- `elm?: 'div' | 'aside' | 'section' | 'article'` - HTML element to render as (default: 'div')
+- `title?: React.ReactNode` - Card title
+- `footer?: React.ReactNode` - Card footer
+- `styles?: React.CSSProperties` - Inline styles
+- `classes?: string` - Additional CSS classes
+- `id?: string` - Unique ID for the card
+
+All other props are passed through to the underlying UI component.
+
+### Card.Title
+
+A sub-component for rendering the card's title.
+
+#### Props
+
+- `as?: React.ElementType` - HTML element to render as (default: 'h3')
+- `className?: string` - Additional CSS classes
+- `styles?: React.CSSProperties` - Inline styles
+
+### Card.Content
+
+A sub-component for rendering the card's main content.
+
+#### Props
+
+- `className?: string` - Additional CSS classes
+- `styles?: React.CSSProperties` - Inline styles
+
+## Styling
+
+The component uses CSS classes for styling:
+
+- `.card-title` for the title
+- `.card-content` for the content
+
+You can override these classes or provide additional styling through the `className` and `styles` props.
+
+## Accessibility
+
+The Card component is designed with accessibility in mind:
+
+- It uses semantic HTML elements (`div`, `aside`, `section`, or `article`) for the main container.
+- The Title component defaults to using an `h3` element, which can be changed if needed.
+- The Content component uses an `article` element for semantic structure.
+
+## TypeScript
+
+This component is written in TypeScript and provides type definitions for all props and sub-components.
+
+## Contributing
+
+When contributing to this component, please follow the established code style and conventions. Ensure all changes are well-tested and documented.
+
+This README provides an overview of the Card component, its usage, available props, styling information, and accessibility considerations. It also mentions that the component is written in TypeScript and provides guidance for contributors.

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.scss

@@ -64,6 +64,13 @@ details {
     border-top-right-radius: var(--details-radius);
     transition: var(--summary-transitions);
 
+    @supports (transition-behavior: allow-discrete) {
+      @starting-style {
+        border-bottom: none;
+        transition: var(--summary-transitions);
+      }
+    }
+
     &::-webkit-details-marker {
       display: none;
     }

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/details/details.tsx

@@ -15,25 +15,18 @@ type DetailsProps = {
 } & React.ComponentProps<"details"> &
   Partial<React.ComponentProps<typeof UI>>;
 
-/**
- * A React component that renders a details element with a summary and content.
+/**3
+ * Details component props interface.
  *
- * @param summary - The summary text shown for the details.
- * @param ariaLabel - The aria-label element for accessibility.
- * @param icon - An optional icon to display in the summary.
- * @param styles - Optional styles to apply to the details element.
- * @param classes - Optional CSS classes to apply to the details element.
- * @param name - An optional name for the details element.
- * @param open - Whether the details element should be initially open.
- * @param onPointerDown - A callback function to be called when the summary is clicked.
- * @param onToggle - A callback function to be called when the details element is toggled.
- * @param children - The content to be displayed inside the details element.
- * @param ref - A ref to the details element.
- * @param props - Additional props to be passed to the details element.
- * @example
- * <Details summary="Details" ariaLabel="Details">
- *   <p>Details content</p>
- * </Details>
+ * @param {React.CSSProperties} [styles] - CSS styles object.
+ * @param {string} [classes] - Classnames string.
+ * @param {boolean} [open] - Whether the details is open.
+ * @param {(e: React.PointerEvent<HTMLDetailsElement>) => void} [onToggle] - onToggle callback.
+ * @param {(e: React.PointerEvent<HTMLDetailsElement>) => void} [onPointerDown] - onPointerDown callback.
+ * @param {ReactNode} children - The content inside the details.
+ * @param {string} [ariaLabel] - aria-label for accessibility.
+ * @param {React.Ref<any>} [ref] - Ref object.
+ * @param {Object} props - Other props.
  */
 export const Details = ({
   summary,

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/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";

package/src/components/fp.test.tsx

@@ -1,56 +1,58 @@
-import React from 'react'
-import { render, screen } from '@testing-library/react'
-import FP from '../components/fp'
-import jest from 'jest-mock'
-import { userEvent } from '@storybook/test'
-
-describe('FP component', () => {
-  it('renders a div by default', () => {
-    const { container } = render(<FP />)
-    expect(container.firstChild).toMatchSnapshot()
-  })
-
-  it('renders a span when specified', () => {
-    const { container } = render(<FP as="span">Span</FP>)
-    const span = container.querySelector('span')
-    expect(span).toBeInTheDocument()
-  })
-
-  it('renders children', () => {
-    const { container } = render(<FP>Hello, world!</FP>)
-    expect(container.firstChild).toHaveTextContent('Hello, world!')
-  })
-
-  it('applies styles', () => {
-    const style = { backgroundColor: 'red;' }
-    const { container } = render(<FP styles={style}>Hello, world!</FP>)
-    expect(container.firstChild).toHaveStyle(style)
-  })
-
-  it('does not render styles when renderStyles is false', () => {
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import FP from "../components/fp";
+import jest from "jest-mock";
+import { userEvent } from "storybook/test";
+
+describe("FP component", () => {
+  it("renders a div by default", () => {
+    const { container } = render(<FP />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it("renders a span when specified", () => {
+    const { container } = render(<FP as="span">Span</FP>);
+    const span = container.querySelector("span");
+    expect(span).toBeInTheDocument();
+  });
+
+  it("renders children", () => {
+    const { container } = render(<FP>Hello, world!</FP>);
+    expect(container.firstChild).toHaveTextContent("Hello, world!");
+  });
+
+  it("applies styles", () => {
+    const style = { backgroundColor: "red;" };
+    const { container } = render(<FP styles={style}>Hello, world!</FP>);
+    expect(container.firstChild).toHaveStyle(style);
+  });
+
+  it("does not render styles when renderStyles is false", () => {
     const { container } = render(
-      <FP renderStyles={false} styles={{ backgroundColor: 'red' }}>
+      <FP renderStyles={false} styles={{ backgroundColor: "red" }}>
         Hello, world!
-      </FP>,
-    )
-    expect(container.firstChild).not.toHaveStyle('background-color: red;')
-  })
+      </FP>
+    );
+    expect(container.firstChild).not.toHaveStyle("background-color: red;");
+  });
 
-  it('passes through props', async () => {
-    const handleClick = jest.fn()
+  it("passes through props", async () => {
+    const handleClick = jest.fn();
     const { container } = render(
       <FP as="button" onClick={handleClick}>
         Hello, world!
-      </FP>,
-    )
-
-    await userEvent.click(screen.getByRole('button'))
-    expect(handleClick).toHaveBeenCalled()
-  })
-
-  it('applies ref', () => {
-    const ref = React.createRef<HTMLDivElement>()
-    render(<FP ref={ref}>Hello, world!</FP>)
-    expect(ref.current).toBeTruthy()
-  })
-})
+      </FP>
+    );
+
+    expect(container.firstChild).toBeInTheDocument();
+
+    await userEvent.click(screen.getByRole("button"));
+    expect(handleClick).toHaveBeenCalled();
+  });
+
+  it("applies ref", () => {
+    const ref = React.createRef<HTMLDivElement>();
+    render(<FP ref={ref}>Hello, world!</FP>);
+    expect(ref.current).toBeTruthy();
+  });
+});

package/src/components/heading/heading.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 Heading from "./heading";
 

package/src/components/heading/heading.tsx

@@ -1,27 +1,15 @@
-import React from "react";
-import UI from "#components/ui";
+import React from 'react'
+import UI from '#components/ui'
+import { type } from 'os'
 
 export type TitleProps = {
-  children: React.ReactNode;
-  type: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-  ui?: string;
-} & React.ComponentProps<typeof UI>;
+  children: React.ReactNode
+  type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+  ui?: string
+} & React.ComponentProps<typeof UI>
 
-/**
- * A flexible heading component that renders different heading levels.
- *
- * @component
- * @param {'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'} [props.type='h3'] - The heading level to render
- * @param {string} [props.id] - Optional ID attribute for the heading
- * @param {React.CSSProperties} [props.styles] - Custom styles to apply to the heading
- * @param {string} [props.ui] - Custom UI modifier to be added as a data attribute
- * @param {ReactNode} props.children - The content to be rendered within the heading
- * @param {Object} [props] - Additional props to be spread onto the heading element
- *
- * @returns {JSX.Element} A heading element of the specified type
- */
 const Heading = ({
-  type = "h3",
+  type = 'h3',
   id,
   styles,
   ui,
@@ -32,8 +20,8 @@ const Heading = ({
     <UI as={type} id={id} styles={styles} data-ui={ui} {...props}>
       {children}
     </UI>
-  );
-};
+  )
+}
 
-export default Heading;
-Heading.displayName = "Heading";
+export default Heading
+Heading.displayName = 'Heading'

package/src/components/icons/icon.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react-vite";
 
 import { Button } from "#components/buttons/button";
 import { Icon } from "./icon";

package/src/components/images/figure.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 Figure from "./figure";
 

package/src/components/images/img.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 Img from "./img";
 

package/src/components/layout/footer.stories.tsx

@@ -1,34 +1,25 @@
-import { StoryObj, Meta } from '@storybook/react'
+import { StoryObj, Meta } from "@storybook/react-vite";
 /**
  * Import testing library dependencies
  */
-import { within, userEvent } from '@storybook/test'
+// import { within, userEvent } from "storybook/test";
 
 /**
  * Import jest matchers
  */
 
-
-import { Footer } from './landmarks'
+import { Footer } from "./landmarks";
 
 const meta: Meta<typeof Footer> = {
-  title: 'FP.React Components/Layout/Landmarks',
+  title: "FP.React Components/Layout/Landmarks",
   component: Footer,
   args: {
-    children: 'Main Landmark',
-    // @ts-ignore
-    'data-testid': 'main',
+    children: "Main Landmark",
+    "data-testid": "main",
   },
-} as Meta
-
-const mainChildren = () => (
-  <>
-    <h2>Header Title</h2>
-    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, unde?</p>
-  </>
-)
+} as Meta;
 
-export default meta
-type Story = StoryObj<typeof Footer>
+export default meta;
+type Story = StoryObj<typeof Footer>;
 
-export const BasicFooter: Story = {}
+export const BasicFooter: Story = {};

package/src/components/layout/landmarks.stories.tsx

@@ -1,54 +1,52 @@
-import { StoryObj, Meta } from '@storybook/react'
+import { StoryObj, Meta } from "@storybook/react-vite";
 /**
  * Import testing library dependencies
  */
-import { within, expect } from '@storybook/test'
+import { within, expect } from "storybook/test";
 
 /**
  * Import jest matchers
  */
 
+import { Header } from "./landmarks";
 
-import { Header } from './landmarks'
-
-import Img from '#components/images/img'
+import Img from "#components/images/img";
 
 const meta: Meta<typeof Header> = {
-  title: 'FP.React Components/Layout/Landmarks',
+  title: "FP.React Components/Layout/Landmarks",
   component: Header,
   args: {
-    children: 'Default Header',
-    // @ts-ignore
-    'data-testid': 'banner',
+    children: "Default Header",
+    "data-testid": "banner",
   },
-} as Meta
+} as Meta;
 
 const headerChildren = () => (
   <>
     <h2>Header Title</h2>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, unde?</p>
   </>
-)
+);
 
-export default meta
-type Story = StoryObj<typeof Header>
+export default meta;
+type Story = StoryObj<typeof Header>;
 
-export const LandmarkDefault: Story = {}
+export const LandmarkDefault: Story = {};
 
 export const HeroHeader: Story = {
   args: {
     children: headerChildren(),
     headerBackground: <Img src="https://picsum.photos/2000/1000" alt="" />,
-    styles: { color: 'red' },
-    classNames: 'header-class',
-    'data-styles': 'blue',
+    styles: { color: "red" },
+    classNames: "header-class",
+    "data-styles": "blue",
   },
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    const header = canvas.getByRole('banner')
-    expect(header).toBeInTheDocument()
-    const title = canvas.getByRole('heading')
-    expect(title).toBeInTheDocument()
-    expect(title).toHaveTextContent(/header title/i)
+    const canvas = within(canvasElement);
+    const header = canvas.getByRole("banner");
+    expect(header).toBeInTheDocument();
+    const title = canvas.getByRole("heading");
+    expect(title).toBeInTheDocument();
+    expect(title).toHaveTextContent(/header title/i);
   },
-} as Story
+} as Story;