@fpkit/acss 0.4.4

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

@@ -0,0 +1,114 @@
+import { StoryObj, Meta } from '@storybook/react'
+import { within, userEvent, screen } from '@storybook/testing-library'
+import { expect } from '@storybook/jest'
+
+import Card from './card'
+import './card.scss'
+
+const content =
+  'Enim aliquip excepteur veniam esse culpa. Et exercitation incididunt occaecat incididunt proident consectetur. Voluptate elit reprehenderit nulla reprehenderit excepteur tempor adipisicing officia eiusmod est id aute. Nisi do et nulla fugiat enim id pariatur ex. Culpa aliquip excepteur velit fugiat qui magna deserunt adipisicing dolore quis. Esse proident qui consectetur Lorem id fugiat elit amet proident enim deserunt dolore sit.'
+
+const meta: Meta<typeof Card> = {
+  title: 'FP.REACT Components/Card',
+  component: Card,
+  args: {
+    children: <p>{content}</p>,
+  },
+} as Story
+
+export default meta
+type Story = StoryObj<typeof Card>
+
+export const CardComponent: Story = {
+  args: {},
+}
+
+export const Multiple: Story = {
+  args: {
+    styles: {
+      '--theme': 'warm',
+    },
+  },
+  render: (args) => (
+    <>
+      <Card {...args}>
+        <p>
+          Proident et amet aliqua excepteur sunt qui deserunt commodo tempor
+          esse. Et aliqua nulla ea amet nisi consequat id adipisicing culpa
+          ipsum minim voluptate est Lorem. Amet qui laboris incididunt commodo
+          culpa aliqua veniam.
+        </p>
+      </Card>
+      <Card>
+        <p>
+          Proident et amet aliqua excepteur sunt qui deserunt commodo tempor
+          esse. Et aliqua nulla ea amet nisi consequat id adipisicing culpa
+          ipsum minim voluptate est Lorem. Amet qui laboris incididunt commodo
+          culpa aliqua veniam.
+        </p>
+      </Card>
+      <Card>
+        <p>
+          Proident et amet aliqua excepteur sunt qui deserunt commodo tempor
+          esse. Et aliqua nulla ea amet nisi consequat id adipisicing culpa
+          ipsum minim voluptate est Lorem. Amet qui laboris incididunt commodo
+          culpa aliqua veniam.
+        </p>
+      </Card>
+    </>
+  ),
+} as Story
+
+export const CardWithTitle: Story = {
+  args: {},
+  render: (args) => (
+    <Card {...args}>
+      <Card.Title>Card Title</Card.Title>
+      <Card.Content>
+        <p>
+          This card demonstrates the usage of the CardTitle component. It shows
+          how a title can be added to a card for better organization and visual
+          hierarchy.
+        </p>
+      </Card.Content>
+    </Card>
+  ),
+} as Story
+
+export const FlexibleContent: Story = {
+  args: {
+    styles: {
+      // '--card-bg': '#f0f0f0',
+    },
+    title: <Card.Title>Card Title</Card.Title>,
+  },
+  render: (args) => (
+    <div style={{ display: 'flex', gap: '1rem' }}>
+      <Card {...args}>
+        <Card.Content>
+          <p>
+            This card demonstrates the usage of the CardTitle component. It
+            shows how a title can be added to a card for better organization and
+            visual hierarchy.
+          </p>
+        </Card.Content>
+        <div>Footer Content</div>
+      </Card>
+      <Card {...args}>
+        <Card.Content>
+          <p>
+            This card demonstrates the usage of the CardTitle component. It
+            shows how a title can be added to a card for better organization and
+            visual hierarchy.
+          </p>
+          <p>
+            This card demonstrates the usage of the CardTitle component. It
+            shows how a title can be added to a card for better organization and
+            visual hierarchy.
+          </p>
+        </Card.Content>
+        <div>Footer Content</div>
+      </Card>
+    </div>
+  ),
+} as Story

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

@@ -0,0 +1,30 @@
+import { render, screen } from '@testing-library/react'
+import { Card } from './card'
+
+describe('Card', () => {
+  it('renders children', () => {
+    render(<Card>Hello World</Card>)
+    expect(screen.getByText('Hello World')).toBeInTheDocument()
+  })
+
+  it('renders with custom styles', () => {
+    const style = { backgroundColor: '#000;' }
+    render(
+      <Card data-testid="card" styles={style}>
+        Hello World
+      </Card>,
+    )
+    const card = screen.getByTestId('card')
+    expect(card).toHaveStyle(style)
+  })
+
+  it('renders with custom element', () => {
+    render(
+      <Card data-testid="card" elm="section">
+        Hello World
+      </Card>,
+    )
+    const card = screen.getByTestId('card')
+    expect(card.tagName.toLowerCase()).toBe('section')
+  })
+})

package/src/components/cards/card.tsx

@@ -0,0 +1,135 @@
+import React from 'react'
+import UI from '#components/ui'
+
+/*
+ * CardProps interface
+ *
+ * Extends ComponentProps. Defines props for the Card component.
+ *
+ * @property {('div' | 'aside' | 'section' | 'article')} [elm='div'] - HTML element to render as
+ */
+export type CardProps = {
+  elm?: 'div' | 'aside' | 'section' | 'article'
+  title?: React.ReactNode
+  footer?: React.ReactNode
+} & React.ComponentProps<typeof UI>
+
+/*
+ * Title component
+ *
+ * Renders a title for the Card component using the UI component.
+ *
+ * @param {Object} props - Component props
+ * @param {ReactNode} props.children - Title content
+ * @param {string} [props.className] - Additional CSS classes
+ * @param {Object} [props.styles] - Inline styles
+ *
+ * @returns {ReactElement} Title component
+ */
+export const Title = ({
+  children,
+  className,
+  styles,
+  as = 'h3',
+  ...props
+}: React.PropsWithChildren<{
+  className?: string
+  styles?: React.CSSProperties
+  as?: React.ElementType
+}>) => {
+  return (
+    <UI
+      as={as}
+      className={`card-title ${className || ''}`}
+      styles={styles}
+      {...props}
+    >
+      {children}
+    </UI>
+  )
+}
+
+Title.displayName = 'Title'
+
+/*
+ * CardContent component
+ *
+ * Renders the content of the Card component using the UI component with an article element.
+ *
+ * @param {Object} props - Component props
+ * @param {ReactNode} props.children - Content
+ * @param {string} [props.className] - Additional CSS classes
+ * @param {Object} [props.styles] - Inline styles
+ *
+ * @returns {ReactElement} CardContent component
+ */
+export const Content = ({
+  children,
+  className,
+  styles,
+  ...props
+}: React.PropsWithChildren<{
+  className?: string
+  styles?: React.CSSProperties
+}>) => {
+  return (
+    <UI
+      as="article"
+      className={`card-content ${className || ''}`}
+      styles={styles}
+      {...props}
+    >
+      {children}
+    </UI>
+  )
+}
+
+Content.displayName = 'Content'
+
+/*
+ * Card component
+ *
+ * Renders a card container.
+ *
+ * @param {CardProps} props - Component props
+ * @param {('div' | 'aside' | 'section' | 'article')} [props.elm='div'] - Element to render as
+ * @param {Object} [props.styles] - CSS styles to apply
+ * @param {ReactNode} props.children - Card content
+ * @param {boolean} [props.renderStyles=true] - Whether to render default styles
+ * @param {string} [props.dataStyle] - data-card attribute value
+ * @param {string} [props.id] - Unique ID
+ *
+ * @returns {ReactElement} Card component
+ */
+export const Card = ({
+  elm = 'div',
+  styles,
+  children,
+  classes,
+  id,
+  footer,
+  title,
+  ...props
+}: CardProps) => {
+  return (
+    <UI
+      as={elm}
+      id={id}
+      styles={styles}
+      className={classes}
+      data-card
+      {...props}
+    >
+      <UI as="div" data-card-content>
+        {title && title}
+        {children}
+        {footer && footer}
+      </UI>
+    </UI>
+  )
+}
+
+export default Card
+Card.displayName = 'Card'
+Card.Title = Title
+Card.Content = Content

package/src/components/cards/flex-card.tsx

@@ -0,0 +1,15 @@
+import Card from './card'
+
+const FlexCard = () => {
+  return (
+    <Card>
+      <Card.Title />
+      <Card.Content>
+        <div>Flexible Content</div>
+      </Card.Content>
+      <div style={{ padding: '1rem' }}>Footer</div>
+    </Card>
+  )
+}
+
+export default FlexCard

package/src/components/details/details.scss

@@ -0,0 +1,75 @@
+details {
+  --details-w: 100%;
+  --details-h: fit-content;
+  --details-border: 1px solid #dfdfdf;
+  --details-display: flex;
+  --details-justify: flex-start;
+  --details-direction: columns;
+  --details-gap: 5rem;
+  --details-px: 1.5rem;
+  --details-py: 1.5rem;
+  --details-radius: 0.5rem;
+  --summary-cursor: pointer;
+  --summary-transitions: all 0.75s linear;
+  --summary-display: flex;
+  --summary-justify: flex-start;
+  --summary-align: center;
+  --summary-gap: 0.5rem;
+  --max-h-closed: 6.25rem;
+  --max-h-open: 50rem;
+
+  display: var(--details-display);
+  flex-direction: var(--details-direction);
+  justify-content: var(--details-justify);
+  gap: var(--details-gap);
+  width: var(--details-w);
+  border: var(--details-border);
+  transition: var(--summary-transitions);
+  max-height: var(--max-h-closed);
+  overflow: clip;
+  border-radius: var(--details-radius);
+
+  &::marker {
+    content: none;
+  }
+
+  summary {
+    display: var(--summary-display);
+    justify-content: var(--summary-justify);
+    align-items: var(--summary-align);
+    padding-inline: var(--summary-px, var(--details-px));
+    padding-block: var(--summary-py, var(--details-py));
+    gap: var(--summary-gap);
+    list-style: none;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    /* This ensures no bullet points are shown */
+
+    &:hover {
+      cursor: var(--summary-cursor);
+    }
+    > section {
+      width: var(--details-w);
+    }
+  }
+
+  > section {
+    padding-inline: var(--details-px);
+    padding-block: var(--details-py);
+    border: 1px transparent solid;
+  }
+
+  &[open] {
+    max-height: var(--max-h-open);
+    transition: var(--summary-transitions);
+    > summary {
+      border-bottom: var(--details-border);
+    }
+    > section {
+      max-height: var(--max-h-open);
+    }
+  }
+}

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

@@ -0,0 +1,122 @@
+import { StoryObj, Meta } from '@storybook/react'
+import { within, userEvent, screen } from '@storybook/testing-library'
+import { expect } from '@storybook/jest'
+
+import Details from './details'
+import Icons from '../icons/icon'
+import '../../styles/details/details.css'
+
+const content = (
+  <>
+    <p>
+      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium
+      accusamus molestiae, qui omnis illum iste asperiores fugit doloribus
+      voluptatem numquam voluptatibus nisi blanditiis quidem sint optio. Dicta
+      officia commodi numquam?
+    </p>
+    <p>
+      Impedit, libero ea. Repellendus doloribus possimus magni ullam natus
+      voluptates, magnam ad iure quas eum adipisci! Repellat vel placeat commodi
+      voluptatem optio odit, voluptatum id, magnam architecto at est ipsa.
+    </p>
+    <p>
+      Vitae, laudantium libero, dolorem enim architecto consectetur qui vero
+      error possimus beatae iusto, labore praesentium. Assumenda recusandae
+      labore aliquam omnis, aliquid in impedit possimus! Rerum consequuntur non
+      hic est placeat!
+    </p>
+  </>
+)
+
+const icon = <Icons.Add />
+
+const meta: Meta<typeof Details> = {
+  title: 'FP.REACT Components/Details',
+  component: Details,
+  args: {
+    // @ts-ignore
+    children: content,
+    icon: icon,
+    summary: <>Summary Section</>,
+  },
+  actions: { argTypesRegex: '^on.*' },
+  decorators: [
+    (Story) => (
+      <div className="container" style={{ minWidth: '50vw' }}>
+        <Story />
+      </div>
+    ),
+  ],
+} as Story
+
+export default meta
+type Story = StoryObj<typeof Details>
+
+export const DetailsDropdown: Story = {
+  args: {},
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    expect(canvas.getByRole('group')).toBeInTheDocument()
+  },
+} as Story
+
+export const DetailsOpen: Story = {
+  args: {
+    open: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    expect(canvas.getByRole('group')).toBeInTheDocument()
+  },
+} as Story
+
+export const CustomDropdown: Story = {
+  render: () => (
+    <>
+      <Details
+        summary="Summary Section"
+        icon={icon}
+        ariaLabel="Details Section"
+      >
+        {content}
+      </Details>
+      <p>
+        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum quasi
+        maiores placeat voluptate voluptatem, tenetur consectetur earum modi,
+        quam pariatur, quas porro iste quo ipsum rem rerum fuga incidunt?
+        Suscipit!
+      </p>
+    </>
+  ),
+} as Story
+
+export const DetailsAccordion: Story = {
+  render: () => (
+    <>
+    <Details
+        summary="Summary Section"
+        icon={icon}
+        ariaLabel="Details Section"
+        name="accordion-details"
+      >
+        {content}
+      </Details>
+    <Details
+        summary="Summary Section"
+        icon={icon}
+        ariaLabel="Details Section"
+        name="accordion-details"
+      >
+        {content}
+      </Details>
+    <Details
+        summary="Summary Section"
+        icon={icon}
+        ariaLabel="Details Section"
+        name="accordion-details"
+      >
+        {content}
+      </Details>
+    </>
+  )
+} as Story

package/src/components/details/details.tsx

@@ -0,0 +1,77 @@
+import UI from '#components/ui'
+import React from 'react'
+
+type DetailsProps = {
+  /**
+   * The summary text shown for the details.
+   * Required.
+   */
+  summary: React.ReactNode
+
+  /**
+   * The aria-label  element for accessibility.
+   */
+  ariaLabel: string
+} & React.ComponentProps<'details'> &
+  Partial<React.ComponentProps<typeof UI>>
+
+/**3
+ * Details component props interface.
+ *
+ * @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,
+  icon,
+  styles,
+  classes,
+  ariaLabel,
+  name,
+  open,
+  onPointerDown,
+  onToggle,
+  children,
+  ref,
+  ...props
+}: DetailsProps) => {
+  const defaultStyles: React.CSSProperties = { ...styles }
+
+  const onPointerDownCallback = (e: React.PointerEvent<HTMLDetailsElement>) => {
+    if (onPointerDown) onPointerDown?.(e)
+    if (onPointerDown) onPointerDown?.(e)
+  }
+
+  const onToggleCallback = (e: React.PointerEvent<HTMLDetailsElement>) => {
+    if (onToggle) onPointerDown?.(e)
+  }
+  return (
+    <UI
+      as="details"
+      style={defaultStyles}
+      className={classes}
+      onToggle={onToggleCallback}
+      ref={ref}
+      open={open}
+      aria-label={ariaLabel || 'Details dropdown'}
+      name={name}
+      {...props}
+    >
+      <UI as="summary" role="group" onPointerDown={onPointerDownCallback}>
+        {icon}
+        {summary}
+      </UI>
+      <UI as="section">{children}</UI>
+    </UI>
+  )
+}
+
+export default Details
+Details.displayName = 'Details'

package/src/components/form/README.mdx

@@ -0,0 +1,70 @@
+# Form Components
+
+This directory contains a set of React components for building forms in web applications. The components are designed to be reusable, accessible, and customizable.
+
+## Overview
+
+The main components in this directory are:
+
+- `Form`: A wrapper component for creating HTML forms with various input fields.
+- `Input`: A component for rendering input fields of different types (text, email, password, etc.).
+- `Textarea`: A component for rendering a textarea input field.
+- `Select`: A component for rendering a dropdown select input field with options.
+- `Field`: A component for rendering a label and an input field together.
+
+These components are built with accessibility and customization in mind, providing props for setting labels, placeholders, validation, and styling.
+
+## Usage
+
+To use these components in your React application, import them from the respective files:
+
+```jsx
+import { Form, Input, Textarea, Select, Field } from './path/to/form/components';
+```
+
+Then, you can use them in your JSX like any other React component:
+
+```jsx
+
+<Form onSubmit={handleSubmit}>
+  <Field label="Name" labelFor="name">
+    <Input id="name" name="name" required />
+  </Field>
+  <Field label="Email" labelFor="email">
+    <Input id="email" name="email" type="email" required />
+  </Field>
+  <Field label="Message" labelFor="message">
+    <Textarea id="message" name="message" required />
+  </Field>
+  <Select id="option" name="option" required>
+    <Select.Option value="option1">Option 1</Select.Option>
+    <Select.Option value="option2">Option 2</Select.Option>
+  </Select>
+  <button type="submit">Submit</button>
+</Form>
+```
+
+## Key Features
+
+- **Accessibility**: The components are built with accessibility in mind, providing props for setting labels, placeholders, and ARIA attributes.
+- **Validation**: The `Input`, `Textarea`, and `Select` components support validation through the `required` prop.
+- **Styling**: The components can be styled using CSS classes or inline styles passed through props.
+- **Customization**: The components are designed to be flexible and customizable, allowing you to pass additional props or render custom content within them.
+
+## Styling
+
+The components in this directory are styled using a combination of CSS modules and inline styles. The styles can be overridden or extended by importing the corresponding CSS files or by passing custom styles through the `styles` prop.
+
+For example, to override the styles for the `Input` component, you can import the CSS file and define your custom styles:
+
+```jsx
+import './input.css';
+
+// ...
+
+<Input id="name" name="name" required styles={{ color: 'red' }} />
+```
+
+## Contributing
+
+If you find any issues or have suggestions for improvements, please open an issue or submit a pull request on the project's repository.

package/src/components/form/fields.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import UI from '../ui'
+
+export type FieldProps = {
+  /**
+   * The label content
+   */
+  label: React.ReactNode
+  children: React.ReactNode
+} & React.ComponentProps<'label'> &
+  Partial<React.ComponentProps<typeof UI>>
+/**
+ * Field component that renders a label and children wrapped in a div element.
+ * @param labelFor Defines the for attribute of the label element
+ * @param styles Custom styles to be applied to the component
+ * @param label The label content
+ * @param children The children to be rendered inside the component
+ * @param props Additional props to be spread to the component
+ */
+export const Field = ({
+  label,
+  labelFor,
+  id,
+  styles,
+  classes,
+  children,
+  ...props
+}: FieldProps) => {
+  return (
+    <UI
+      as="div"
+      id={id}
+      styles={styles}
+      className={classes}
+      data-style="fields"
+      {...props}
+    >
+      <label htmlFor={labelFor}>{label}</label>
+      {children}
+    </UI>
+  )
+}
+
+export default Field
+Field.displayName = 'Field'