@fpkit/acss 0.4.4

package/src/components/fp.test.tsx

@@ -0,0 +1,56 @@
+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/testing-library'
+
+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' }}>
+        Hello, world!
+      </FP>,
+    )
+    expect(container.firstChild).not.toHaveStyle('background-color: red;')
+  })
+
+  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()
+  })
+})

package/src/components/fp.tsx

@@ -0,0 +1,78 @@
+import React from 'react'
+import { ComponentProps } from '../types'
+
+type PolymorphicRef<C extends React.ElementType> =
+  React.ComponentPropsWithRef<C>['ref']
+
+type AsProp<C extends React.ElementType> = {
+  as?: C
+}
+
+type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P)
+
+type PolymorphicComponentProp<
+  C extends React.ElementType,
+  Props = {},
+> = React.PropsWithChildren<Props & AsProp<C>> &
+  Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>
+
+type PolymorphicComponentPropWithRef<
+  C extends React.ElementType,
+  Props = {},
+> = PolymorphicComponentProp<C, Props> & {
+  ref?: PolymorphicRef<C>
+}
+
+type FPProps<C extends React.ElementType> = PolymorphicComponentPropWithRef<
+  C,
+  {
+    renderStyles?: boolean
+    styles?: React.CSSProperties
+    classes?: string
+  }
+>
+
+/*
+ * FPComponent type definition
+ *
+ * Defines the component function signature for the FP component.
+ *
+ * @typeParam C - The HTML element type to render
+ * @param props - The component props
+ * @returns React component
+ */
+type FPComponent = <C extends React.ElementType = 'span'>(
+  props: FPProps<C>,
+) => React.ReactElement | any
+
+/**
+ * FP component is a polymorphic component that renders an HTML element with optional styles.
+ * @param {Object} props - Component props
+ * @param {React.ElementType} props.as - The HTML element to render. Defaults to 'div'.
+ * @param {boolean} props.renderStyles - Whether to render styles or not. Defaults to true.
+ * @param {Object} props.styles - The styles to apply to the component.
+ * @param {Object} props.defaultStyles - The default styles to apply to the component.
+ * @param {React.ReactNode} props.children - The children to render inside the component.
+ * @returns {React.ReactElement} - A React component that renders an HTML element with optional styles.
+ */
+const FP: FPComponent = React.forwardRef(
+  <C extends React.ElementType>(
+    { as, styles, classes, children, defaultStyles, ...props }: FPProps<C>,
+    ref?: PolymorphicRef<C>,
+  ) => {
+    const Component = as || 'div'
+
+    const styleObj = { ...defaultStyles, ...styles } as React.CSSProperties
+
+    return (
+      <Component ref={ref} style={styleObj} className={classes} {...props}>
+        {children}
+      </Component>
+    )
+  },
+)
+export interface BoxProps extends ComponentProps {
+  renderStyles: true
+}
+
+export default FP

package/src/components/heading/heading.stories.tsx

@@ -0,0 +1,75 @@
+import { StoryObj, Meta } from '@storybook/react'
+import { within, userEvent, screen } from '@storybook/testing-library'
+import { expect } from '@storybook/jest'
+
+import Heading from './heading'
+
+const meta: Meta<typeof Heading> = {
+  title: 'FP.REACT Components/Heading',
+  component: Heading,
+  parameters: {
+    actions: { argTypesRegex: '^on.*' },
+    docs: {
+      description: {
+        component: 'Heading description here...',
+      },
+    },
+  },
+  args: {
+    // @ts-ignore
+    children: 'Default title',
+  },
+} as Story
+
+export default meta
+type Story = StoryObj<typeof Heading>
+
+export const HeadingComponent: Story = {
+  args: {},
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    expect(canvas.getByText(/default title/i)).toBeInTheDocument()
+  },
+}
+
+export const HeadingOne: Story = {
+  args: {
+    type: 'h1',
+    children: 'Heading One',
+  },
+} as Story
+
+export const HeadingTwo: Story = {
+  args: {
+    type: 'h2',
+    children: 'Heading Two',
+  },
+} as Story
+
+export const HeadingThree: Story = {
+  args: {
+    type: 'h3',
+    children: 'Heading Three',
+  },
+} as Story
+
+export const HeadingFour: Story = {
+  args: {
+    type: 'h4',
+    children: 'Heading Four',
+  },
+} as Story
+
+export const HeadingFive: Story = {
+  args: {
+    type: 'h5',
+    children: 'Heading Five',
+  },
+} as Story
+
+export const HeadingSix: Story = {
+  args: {
+    type: 'h6',
+    children: 'Heading Six',
+  },
+} as Story

package/src/components/heading/heading.tsx

@@ -0,0 +1,27 @@
+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>
+
+const Heading = ({
+  type = 'h3',
+  id,
+  styles,
+  ui = 'display',
+  children,
+  ...props
+}: TitleProps) => {
+  return (
+    <UI as={type} id={id} styles={styles} data-ui={ui} {...props}>
+      {children}
+    </UI>
+  )
+}
+
+export default Heading
+Heading.displayName = 'Heading'

package/src/components/icons/components/add.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react'
+
+import { IconProps } from '../types'
+import Svg from './svg'
+
+const defaultStyles = {
+  ...Svg.styles,
+  fill: 'currentColor',
+}
+
+/**
+ * Add Icon component
+ * @param {string} fill - Icon fill color (default: 'currentColor')
+ * @param {string} size - Icon size (default: '24')
+ * @param {IconProps} props - Other icon properties
+ * @returns {JSX.Element} - Rendered component
+ */
+export const Add = ({
+  fill = 'currentColor',
+  size = 24,
+  role = 'img',
+  alt = 'Add icon',
+  ...props
+}: Pick<
+  IconProps,
+  'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'
+>): JSX.Element => {
+  return (
+    <Svg size={size} role={role} alt={alt} {...props}>
+      <g fill={fill}>
+        <path
+          d="M17,11h-4V7c0-.553-.447-1-1-1s-1,.447-1,1v4H7c-.553,0-1,.447-1,1s.447,1,1,1h4v4c0,.553,.447,1,1,1s1-.447,1-1v-4h4c.553,0,1-.447,1-1s-.447-1-1-1Z"
+          fill={fill}
+        />
+      </g>
+    </Svg>
+  )
+}
+
+export default Add
+Add.styles = defaultStyles
+Add.displayName = 'Add'

package/src/components/icons/components/arrow-down.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react'
+
+import { IconProps } from '../types'
+import Svg from './svg'
+
+const defaultStyles = { ...Svg.styles }
+
+/**
+ * ArrowDown icon component
+ * @param fill - Icon fill color
+ * @param strokeColor - Icon stroke color
+ * @param styles - Icon styles
+ * @param size - Icon size
+ */
+export const ArrowDown = ({
+  fill = 'currentColor',
+  styles,
+  size = 16,
+  role = 'img',
+  alt = 'Down icon',
+  ...props
+}: Pick<IconProps, 'fill' | 'styles' | 'size' | 'role' | 'alt'>) => {
+  return (
+    <Svg size={size} role={role} styles={styles} alt={alt} {...props}>
+      <g fill={fill} strokeMiterlimit="10">
+        <line
+          fill="none"
+          stroke={fill}
+          strokeLinecap="butt"
+          strokeLinejoin="miter"
+          strokeWidth="2"
+          x1="12"
+          x2="12"
+          y1="2"
+          y2="22"
+        />
+        <polyline
+          fill="none"
+          points="19,15 12,22 5,15 "
+          stroke={fill}
+          strokeLinecap="square"
+          strokeLinejoin="miter"
+          strokeWidth="2"
+        />
+      </g>
+    </Svg>
+  )
+}
+
+export default ArrowDown
+ArrowDown.styles = defaultStyles
+ArrowDown.displayName = 'ArrowDown'

package/src/components/icons/components/arrow-left.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react'
+
+import { IconProps } from '../types'
+import Svg from './svg'
+
+const defaultStyles = { ...Svg.styles }
+
+export const ArrowLeft = ({
+  strokeColor = 'currentColor',
+  fill = 'currentColor',
+  size = 16,
+  styles,
+  role = 'img',
+  alt = 'Arrow pointing left',
+  ...props
+}: Pick<
+  IconProps,
+  'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'
+>) => {
+  return (
+    <Svg size={size} styles={styles} role={role} {...props} alt={alt}>
+      <g fill={fill} strokeMiterlimit="10">
+        <line
+          fill="none"
+          stroke={strokeColor}
+          strokeLinecap="butt"
+          strokeLinejoin="miter"
+          strokeWidth="2"
+          x1="22"
+          x2="2"
+          y1="12"
+          y2="12"
+        />
+        <polyline
+          fill="none"
+          points="9,19 2,12 9,5 "
+          stroke={strokeColor}
+          strokeLinecap="square"
+          strokeLinejoin="miter"
+          strokeWidth="2"
+        />
+      </g>
+    </Svg>
+  )
+}
+
+export default ArrowLeft
+ArrowLeft.styles = defaultStyles
+ArrowLeft.displayName = 'ArrowLeft'

package/src/components/icons/components/arrow-right.tsx

@@ -0,0 +1,52 @@
+import { IconProps } from '../types'
+import React from 'react'
+import Svg from './svg'
+
+const defaultStyles = {
+  ...Svg.styles,
+  fill: 'currentColor',
+}
+
+/*
+ * ArrowRight icon component.
+ *
+ * Renders a right arrow SVG icon.
+ *
+ * @param {IconProps} props - The component props
+ * @param {string} [props.size="24"] - Icon size
+ * @param {string} [props.fill="currentColor"] - Icon fill color
+ * @param {string} [props.strokeColor="currentColor"] - Stroke color
+ *
+ * @returns {React.ReactElement} - The rendered icon
+ */
+export const ArrowRight = ({
+  size = 16,
+  fill = 'currentColor',
+  strokeColor = 'currentColor',
+  styles,
+  role = 'img',
+  alt = 'Right arrow icon',
+  ...props
+}: Pick<
+  IconProps,
+  'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'
+>) => {
+  return (
+    <Svg size={size} styles={styles} role={role} alt={alt} {...props}>
+      <g
+        fill={fill}
+        stroke={strokeColor}
+        strokeLinecap="square"
+        strokeLinejoin="miter"
+        strokeMiterlimit="10"
+        strokeWidth="2"
+      >
+        <line fill="none" strokeLinecap="butt" x1="2" x2="22" y1="12" y2="12" />
+        <polyline fill="none" points="15,5 22,12 15,19 " stroke={strokeColor} />
+      </g>
+    </Svg>
+  )
+}
+
+export default ArrowRight
+ArrowRight.displayName = 'ArrowRight'

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

@@ -0,0 +1,49 @@
+import * as React from 'react'
+
+import { IconProps } from '../types'
+import Svg from './svg'
+
+const defaultStyles = {
+  ...Svg.styles,
+  fill: 'none',
+  stroke: 'currentColor',
+}
+
+/**
+ * ArrowUp icon component
+ * @param fill - Icon fill color
+ * @param strokeColor - Icon stroke color
+ * @param styles - Icon styles
+ * @param size - Icon size
+ */
+export const ArrowUp = ({
+  strokeColor = 'currentColor',
+  styles,
+  size = 16,
+  role = 'img',
+  alt = 'Up arrow icon',
+  ...props
+}: Pick<
+  IconProps,
+  'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'
+>) => {
+  return (
+    <Svg size={size} styles={styles} role={role} alt={alt} {...props}>
+      <g
+        fill="none"
+        stroke={strokeColor}
+        strokeLinecap="square"
+        strokeLinejoin="miter"
+        strokeMiterlimit="10"
+        strokeWidth="2"
+      >
+        <line fill="none" strokeLinecap="butt" x1="12" x2="12" y1="22" y2="2" />
+        <polyline fill="none" points="5,9 12,2 19,9 " stroke={strokeColor} />
+      </g>
+    </Svg>
+  )
+}
+
+export default ArrowUp
+ArrowUp.displayName = 'ArrowUp'
+ArrowUp.style = defaultStyles

package/src/components/icons/components/chat.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react'
+
+import { IconProps } from '../types'
+import Svg from './svg'
+
+const defaultStyles = { ...Svg.styles }
+
+/**
+ * @param {string} size - The width and height of the icon in pixels. Defaults to 24.
+ * @param {string} strokeColor - The color of the icon stroke. Defaults to 'currentcolor'.
+ * @param {React.CSSProperties} styles - Additional CSS styles to apply to the icon.
+ * @param {IconProps} props - Additional props to pass to the SVG element.
+ * @returns {JSX.Element} - A chat icon component that displays a speech bubble with lines representing text.
+ */
+export const Chat = ({
+  size = 16,
+  strokeColor = 'currentcolor',
+  styles,
+  role = 'img',
+  alt = 'Chat icon',
+  ...props
+}: Pick<
+  IconProps,
+  'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'
+>): JSX.Element => {
+  return (
+    <Svg size={size} styles={styles} role={role} alt={alt} {...props}>
+      <g fill={strokeColor} strokeMiterlimit="10">
+        <path
+          d="M21,2H3c-1.105,0-2,.895-2,2V15c0,1.105,.895,2,2,2h5l4,5,4-5h5c1.105,0,2-.895,2-2V4c0-1.105-.895-2-2-2Z"
+          fill="none"
+          stroke={strokeColor}
+          strokeLinecap="square"
+          strokeLinejoin="miter"
+          strokeWidth="2"
+        />
+      </g>
+    </Svg>
+  )
+}
+
+export default Chat
+Chat.styles = defaultStyles
+Chat.displayName = 'Chat'

package/src/components/icons/components/code.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react'
+
+import { IconProps } from '../types'
+import Svg from './svg'
+
+const defaultStyles = {
+  ...Svg.styles,
+  fill: 'none',
+  stroke: 'currentColor',
+}
+
+export const Code = ({
+  strokeColor = 'currentColor',
+  fill = 'none',
+  size = 16,
+  styles,
+  role = 'img',
+  alt = 'Code icon',
+  ...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"
+      >
+        <rect
+          height="22"
+          width="18"
+          fill="none"
+          stroke={strokeColor}
+          x="3"
+          y="1"
+        />
+        <polyline fill="none" points="9 9 6 12 9 15" />
+        <polyline fill="none" points="15 15 18 12 15 9" />
+      </g>
+    </Svg>
+  )
+}
+
+export default Code
+Code.styles = defaultStyles

package/src/components/icons/components/copy.tsx

@@ -0,0 +1,51 @@
+import { IconProps } from '../types'
+import React from 'react'
+import Svg from './svg'
+
+const defaultStyles = {
+  ...Svg.styles,
+  stroke: 'currentColor',
+}
+
+/**
+ * Copy icon component
+ * @param {string} size - The width and height of the icon
+ * @param {string} strokeColor - The color of the icon stroke
+ * @param {IconProps} props - The icon component props
+ * @returns {JSX.Element} - A react JSX element representing the copy icon
+ */
+export const Copy = ({
+  size = 16,
+  strokeColor = 'currentColor',
+  styles,
+  role = 'img',
+  alt = 'Copy icon',
+  ...props
+}: Pick<
+  IconProps,
+  'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'
+>): JSX.Element => {
+  return (
+    <Svg size={size} styles={styles} role={role} alt={alt} {...props}>
+      <g
+        fill="none"
+        stroke={strokeColor}
+        strokeLinecap="square"
+        strokeLinejoin="miter"
+        strokeMiterlimit="10"
+        strokeWidth="2"
+      >
+        <polyline
+          fill="none"
+          points="8 19 2 19 2 1 17 1 17 6"
+          stroke={strokeColor}
+        />
+        <rect height="13" width="10" fill="none" x="12" y="10" />
+      </g>
+    </Svg>
+  )
+}
+
+export default Copy
+Copy.displayName = 'Copy'
+Copy.styles = defaultStyles

package/src/components/icons/components/down.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react'
+
+import { IconProps } from '../types'
+import Svg from './svg'
+
+const defaultStyles = { ...Svg.styles }
+
+export const Down = ({
+  size = 16,
+  fill = 'currentColor',
+  styles,
+  role = 'img',
+  alt = 'Down 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="M12,18a1,1,0,0,1-.707-.293l-10-10A1,1,0,0,1,2.707,6.293L12,15.586l9.293-9.293a1,1,0,1,1,1.414,1.414l-10,10A1,1,0,0,1,12,18Z"
+          fill={fill}
+        />
+      </g>
+    </Svg>
+  )
+}
+
+export default Down
+Down.displayName = 'Down'
+Down.styles = defaultStyles