@fpkit/acss 0.4.4

package/src/components/icons/components/svg.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react'
+
+import { IconProps } from '../types'
+
+const defaultStyes = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  width: 'auto',
+}
+
+export const Svg = ({
+  fill,
+  strokeColor,
+  styles,
+  size = 24,
+  role = 'img',
+  alt,
+  children,
+  ...props
+}: Pick<
+  IconProps,
+  'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt' | 'children'
+>) => {
+  return (
+    <svg
+      fill={fill}
+      stroke={strokeColor}
+      height={size}
+      width={size}
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      style={styles}
+      role={role}
+      aria-label={alt}
+      {...props}
+    >
+      {children}
+    </svg>
+  )
+}
+
+export default Svg
+Svg.displayName = 'Svg'
+Svg.styles = defaultStyes

package/src/components/icons/components/up.tsx

@@ -0,0 +1,31 @@
+import { IconProps } from '../types'
+import React from 'react'
+import Svg from './svg'
+
+const defaultStyles = { ...Svg.styles }
+export const Up = ({
+  size = 16,
+  fill = 'currentColor',
+  styles,
+  role = 'img',
+  alt = 'Up arrow icon',
+  ...props
+}: Pick<
+  IconProps,
+  'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'
+>) => {
+  return (
+    <Svg size={size} alt={alt} styles={styles} role={role} {...props}>
+      <g fill={fill}>
+        <path
+          d="M22,18a1,1,0,0,1-.707-.293L12,8.414,2.707,17.707a1,1,0,0,1-1.414-1.414l10-10a1,1,0,0,1,1.414,0l10,10A1,1,0,0,1,22,18Z"
+          fill={fill}
+        />
+      </g>
+    </Svg>
+  )
+}
+
+export default Up
+Up.displayName = 'Up'
+Up.styles = defaultStyles

package/src/components/icons/components/user.tsx

@@ -0,0 +1,46 @@
+import { IconProps } from '../types'
+import React from 'react'
+import Svg from './svg'
+
+const defaultStyles = {
+  ...Svg.styles,
+  fill: 'none',
+  stroke: 'currentColor',
+}
+
+export const User = ({
+  size = 16,
+  fill = 'none',
+  strokeColor = 'currentColor',
+  styles,
+  alt = 'User Icon',
+  role,
+  ...props
+}: Pick<
+  IconProps,
+  'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'
+>) => {
+  return (
+    <Svg size={size} role={role} alt={alt} styles={styles} {...props}>
+      <g
+        fill={fill}
+        stroke={strokeColor}
+        strokeLinecap="square"
+        strokeLinejoin="miter"
+        strokeMiterlimit="10"
+        strokeWidth="2"
+      >
+        <circle cx="12" cy="5.5" fill="none" r="4.5" />
+        <path
+          d="M12,14c-4.971,0-9,4.029-9,9H21c0-4.971-4.029-9-9-9Z"
+          fill="none"
+          stroke={strokeColor}
+        />
+      </g>
+    </Svg>
+  )
+}
+
+export default User
+User.styles = defaultStyles
+User.displayName = 'User'

package/src/components/icons/icon.scss

@@ -0,0 +1,15 @@
+[data-icon] {
+  --icon-display: inline-flex;
+  --icon-direction: row;
+  --icons-placement: center;
+  --icon-width: max-content;
+  --icon-gap: 0.2rem;
+  --icon-height: max-content;
+
+  display: var(--icon-display);
+  flex-direction: var(--icon-direction);
+  gap: var(--icon-gap);
+  place-items: var(--icons-placement);
+  width: var(--icon-width);
+  height: var(--icon-height);
+}

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

@@ -0,0 +1,208 @@
+import * as React from 'react'
+
+import { Meta, StoryObj } from '@storybook/react'
+
+import { Button } from '#components/buttons/button'
+import { Icon } from './icon'
+import './icon.scss'
+
+const meta: Meta<typeof Icon> = {
+  component: Icon,
+  title: 'FP.React Components/Icons',
+  args: {
+    // styles: Icon.styles,
+  },
+  decorators: [
+    (Story) => (
+      <section style={{ minWidth: '60vw', textAlign: 'center' }}>
+        <Story />
+      </section>
+    ),
+  ],
+} as Meta
+
+export default meta
+type Story = StoryObj<typeof Icon>
+
+export const IconSet = {
+  args: {},
+  render: (...args: any) => {
+    return (
+      <Icon>
+        <Icon.Code styles={Icon.Code.styles} />
+        Code Icon{' '}
+      </Icon>
+    )
+  },
+}
+
+export const IconButton = {
+  args: {},
+  render: (...args: any) => {
+    return (
+      <>
+        <Button type="button">
+          <Icon>
+            <Icon.Code />
+          </Icon>
+          Click Me
+        </Button>
+      </>
+    )
+  },
+}
+
+export const Code: Story = {
+  args: {
+    children: <Icon.Code role="img" aria-label="code icon" />,
+  },
+} as Story
+
+export const Home: Story = {
+  args: {
+    styles: Icon.styles,
+    children: (
+      <>
+        <Icon.Home size={16} />
+      </>
+    ),
+  },
+} as Story
+
+export const Add: Story = {
+  args: {
+    children: <Icon.Add />,
+  },
+} as Story
+
+export const ArrowDown: Story = {
+  args: {
+    children: <Icon.ArrowDown />,
+  },
+} as Story
+
+export const ArrowLeft: Story = {
+  args: {
+    children: <Icon.ArrowLeft />,
+  },
+} as Story
+
+export const ArrowRight: Story = {
+  args: {
+    children: <Icon.ArrowRight />,
+  },
+} as Story
+
+export const ArrowUp: Story = {
+  args: {
+    children: <Icon.ArrowUp />,
+  },
+} as Story
+
+export const Chat: Story = {
+  args: {
+    children: <Icon.Chat />,
+  },
+} as Story
+
+export const User: Story = {
+  args: {
+    children: <Icon.User />,
+  },
+} as Story
+
+export const Left: Story = {
+  args: {
+    children: <Icon.Left />,
+  },
+} as Story
+
+export const Right: Story = {
+  args: {
+    children: <Icon.Right />,
+  },
+} as Story
+
+export const Up: Story = {
+  args: {
+    children: <Icon.Up />,
+  },
+} as Story
+
+export const Down: Story = {
+  args: {
+    children: <Icon.Down />,
+  },
+} as Story
+
+export const Minus: Story = {
+  args: {
+    children: <Icon.Minus />,
+  },
+} as Story
+
+export const Remove: Story = {
+  args: {
+    children: <Icon.Remove />,
+  },
+} as Story
+
+export const Star: Story = {
+  args: {
+    children: <Icon.Star />,
+  },
+} as Story
+
+export const Copy: Story = {
+  args: {
+    children: <Icon.Copy />,
+  },
+} as Story
+
+export const Play: Story = {
+  args: {
+    children: <Icon.Play />,
+  },
+} as Story
+
+export const Pause: Story = {
+  args: {
+    children: <Icon.Pause />,
+  },
+} as Story
+
+export const Resume: Story = {
+  args: {
+    children: <Icon.Resume />,
+  },
+} as Story
+
+export const Stop: Story = {
+  args: {
+    children: <Icon.Stop />,
+  },
+} as Story
+
+export const PlaySolid: Story = {
+  args: {
+    children: <Icon.PlaySolid />,
+  },
+} as Story
+
+export const PauseSolid: Story = {
+  args: {
+    children: <Icon.PauseSolid />,
+  },
+} as Story
+
+export const ResumeSolid: Story = {
+  args: {
+    children: <Icon.ResumeSolid />,
+  },
+} as Story
+
+export const StopSolid: Story = {
+  args: {
+    children: <Icon.StopSolid />,
+  },
+} as Story

package/src/components/icons/icon.tsx

@@ -0,0 +1,100 @@
+import {
+  Add,
+  ArrowDown,
+  ArrowLeft,
+  ArrowRight,
+  ArrowUp,
+  Chat,
+  Code,
+  Copy,
+  Down,
+  Home,
+  Left,
+  Minus,
+  Remove,
+  Right,
+  Star,
+  Up,
+  User,
+  Play,
+  Pause,
+  Stop,
+  Resume,
+  PlaySolid,
+  PauseSolid,
+  ResumeSolid,
+  StopSolid
+} from './index'
+
+import UI from '#components/ui'
+import React from 'react'
+
+/**
+ * The default styles object for the Icon component.
+ *
+ * @property {string} display - Sets display to 'inline-flex' to make Icon inline.
+ * @property {string} direction - Sets flex direction to 'row'.
+ * @property {string} gap - Sets gap between items to '.2rem'.
+ * @property {string} placeItems - Centers items vertically using 'center'.
+ * @property {string} width - Sets width to 'auto' for automatic sizing.
+ */
+const defaultStyles = {
+  display: 'inline-flex',
+  direction: 'row',
+  gap: '.2rem',
+  placeItems: 'center',
+  width: 'auto',
+}
+
+export type IconProps = React.ComponentProps<typeof UI>
+
+export const Icon = ({
+  id,
+  classes,
+  children,
+  styles,
+  ...props
+}: IconProps) => {
+  return (
+    <UI
+      id={id}
+      as="span"
+      styles={styles}
+      className={classes}
+      data-icon
+      data-style="icons"
+      {...props}
+    >
+      {children}
+    </UI>
+  )
+}
+
+export default Icon
+Icon.displayName = 'Icon'
+Icon.styles = defaultStyles
+Icon.Add = Add
+Icon.ArrowDown = ArrowDown
+Icon.ArrowLeft = ArrowLeft
+Icon.ArrowRight = ArrowRight
+Icon.ArrowUp = ArrowUp
+Icon.Chat = Chat
+Icon.Code = Code
+Icon.Copy = Copy
+Icon.Home = Home
+Icon.Left = Left
+Icon.Minus = Minus
+Icon.Remove = Remove
+Icon.Right = Right
+Icon.Star = Star
+Icon.Up = Up
+Icon.Down = Down
+Icon.User = User
+Icon.Play = Play
+Icon.Pause = Pause
+Icon.Stop = Stop
+Icon.Resume = Resume
+Icon.ResumeSolid = ResumeSolid
+Icon.PlaySolid = PlaySolid
+Icon.PauseSolid = PauseSolid
+Icon.StopSolid = StopSolid

package/src/components/icons/index.ts

@@ -0,0 +1,29 @@
+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'

package/src/components/icons/types.ts

@@ -0,0 +1,12 @@
+import { ComponentProps } from '#/types'
+
+export interface IconProps extends Partial<ComponentProps> {
+  fill?: string
+  size?: number
+  strokeColor?: string
+  strokeWidth?: string
+  role?: string
+  alt?: string
+  width?: number
+  height?: number
+}

package/src/components/images/README.mdx

@@ -0,0 +1,43 @@
+# Images Directory
+
+This directory contains React components and utilities related to rendering images in a web application. The key files and their purposes are as follows:
+
+## img.tsx
+
+The `Img` component is a React component that renders an `<img>` element with additional props and functionality. It provides options to customize the image's source, alt text, dimensions, loading behavior, placeholder, fetch priority, and decoding method. It also supports callbacks for image load and error events.
+
+## img.scss
+
+This file contains CSS styles for the `<img>` element and the `<figure>` element that can contain an image. It sets default styles for image sizing, aspect ratio, object fit, and positioning. It also styles the `<figure>` element to display the image and caption in a flex layout with a background color.
+
+## figure.tsx
+
+The `Figure` component is a React component that renders a `<figure>` element with an image and an optional caption. It uses the `Img` component to render the image and provides props to set the image source, dimensions, and alt text, as well as the caption text.
+
+## img.test.tsx
+
+This file contains unit tests for the `Img` component, ensuring it renders correctly with various props and handles image load and error events as expected.
+
+## img.stories.tsx and figure.stories.tsx
+
+These files contain Storybook stories for the `Img` and `Figure` components, respectively. They provide examples and documentation for how to use the components with different props and configurations.
+
+## Usage
+
+To use the `Img` or `Figure` components in your React application, import them from this directory and pass in the required props. For example:
+
+```jsx
+import Img from './components/images/img';
+import Figure from './components/images/figure';
+
+function MyComponent() {
+return (
+<div>
+<Img src="/path/to/image.jpg" alt="My Image" width={300} height={200} />
+<Figure src="/path/to/image.jpg" alt="My Image" width={300} height={200} caption="This is a caption" />
+</div>
+);
+}
+```
+
+The components provide a consistent and extensible way to render images in your application, with additional features like placeholders, loading behavior, and error handling.

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

@@ -0,0 +1,34 @@
+import { StoryObj, Meta } from '@storybook/react'
+import { within, userEvent, screen } from '@storybook/testing-library'
+import { expect } from '@storybook/jest'
+
+import Figure from './figure'
+
+const meta: Meta<typeof Figure> = {
+  title: 'FP.REACT Components/Figure',
+  component: Figure,
+  parameters: {
+    actions: { argTypesRegex: '^on.*' },
+    docs: {
+      description: {
+        component: 'Figure description here...',
+      },
+    },
+  },
+  args: {},
+} as Story
+
+export default meta
+type Story = StoryObj<typeof Figure>
+
+export const FigureComponent: Story = {
+  args: {},
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    expect(
+      canvas.getByText(/caption for the image here.../i),
+    ).toBeInTheDocument()
+    expect(canvas.getByRole('img')).toBeInTheDocument()
+    expect(canvas.getByRole('figure')).toBeInTheDocument()
+  },
+}

package/src/components/images/figure.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import UI from '#components/ui'
+import Img from './img'
+
+export type FigureProps = {
+  /** Children nodes to render inside the figure */
+  children: React.ReactNode
+
+  /** The figure caption */
+  caption?: string
+} & React.ComponentProps<typeof Img>
+
+/**
+ * @description Figure component props.
+ *
+ * @param id - The id of the figure element.
+ * @param src - The image source url.
+ * @param width - The image width.
+ * @param height - The image height.
+ * @param alt - Alternative text for the image.
+ * @param caption - The figure caption text.
+ * @param styles - CSS styles object.
+ * @param props - Other props.
+ */
+const Figure = ({
+  id,
+  src,
+  width,
+  height,
+  alt = '',
+  caption = 'Caption (caption) for the image here...',
+  styles,
+  ...props
+}: FigureProps) => {
+  return (
+    <UI as="figure" id={id} {...props} styles={styles}>
+      <Img src={src} alt={alt} width={width} height={height} />
+      {caption.length ? <UI as="figcaption">{caption}</UI> : <></>}
+    </UI>
+  )
+}
+
+export default Figure
+Figure.displayName = 'Figure'

package/src/components/images/img.scss

@@ -0,0 +1,43 @@
+img[alt] {
+  --img-max-width: 100%;
+  --img-height: auto;
+  --img-object-fit: cover;
+  --img-object-position: center;
+  --img-aspect-ratio: auto 2/3;
+  --img-display: inline-block;
+
+  max-width: var(--img-max-width);
+  max-inline-size: var(--img-max-width);
+  block-size: var(--img-height);
+  object-fit: var(--img-object-fit);
+  object-position: var(--img-object-position);
+  aspect-ratio: var(--img-aspect-ratio);
+  display: var(--img-display);
+  vertical-align: middle;
+  font-style: italic;
+  background-size: cover;
+  background-repeat: no-repeat;
+  shape-margin: var(--spc-3);
+}
+
+figure {
+  &:has(img[alt]) {
+    --fig-display: flex;
+    --fig-p: 0.5rem;
+    --fig-bg: rgba(245, 245, 245, 0.683);
+    --fig-w: fit-content;
+    display: var(--fig-display);
+    position: relative;
+    padding: var(--fig-p);
+    background-color: var(--fig-bg);
+    max-width: var(--fig-w);
+    > figcaption {
+      position: absolute;
+      bottom: var(--fig-bottom, var(--fig-p));
+      left: var(--fig-left, var(--fig-p));
+      right: var(--fig-right, var(--fig-p));
+      padding: var(--caption-p, var(--spc-3));
+      background-color: var(--fig-bg);
+    }
+  }
+}

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

@@ -0,0 +1,24 @@
+import { StoryObj, Meta } from '@storybook/react'
+import { within, userEvent, screen } from '@storybook/testing-library'
+import { expect } from '@storybook/jest'
+
+import Img from './img'
+
+const meta: Meta<typeof Img> = {
+  title: 'FP.REACT Components/Img',
+  component: Img,
+  args: {
+    src: '//',
+  },
+} as Story
+
+export default meta
+type Story = StoryObj<typeof Img>
+
+export const ImgComponent: Story = {
+  args: {},
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    expect(canvas.getByRole('img')).toBeInTheDocument()
+  },
+}