@fpkit/acss 0.4.4

package/src/components/nav/nav.tsx

@@ -0,0 +1,76 @@
+import UI from '../ui'
+import List from '../list/list'
+import React from 'react'
+
+export type NavListProps = React.ComponentProps<typeof List> & {
+  isBlock?: boolean
+}
+export type NavItemProps = React.ComponentProps<typeof List.ListItem>
+
+export type NavProps = React.ComponentProps<typeof UI>
+
+/**
+ * Renders a NavList component.
+ * @param {Object} props - The props for the component.
+ * @param {ReactNode} props.children - The child elements.
+ * @param {Object} props - Additional props to spread to the List component.
+ * @returns {JSX.Element} The rendered NavList component.
+ */
+export const NavList = ({ isBlock, children, ...props }: NavListProps) => {
+  return (
+    <List type="ul" {...props} data-list={`unstyled ${isBlock ? 'block' : ''}`}>
+      {children}
+    </List>
+  )
+}
+
+/**
+ * Renders a NavItem component.
+ * @param {Object} props - The props for the component.
+ * @param {string} [props.id] - The id for the component.
+ * @param {Object} [props.styles] - The styles for the component.
+ * @param {string} [props.classes] - The classes for the component.
+ * @param {ReactNode} props.children - The child elements.
+ * @param {boolean} [props.inline=true] - Whether the item should display inline.
+ * @param {Object} props - Additional props to spread to the ListItem component.
+ * @returns {JSX.Element} The rendered NavItem component.
+ */
+export const NavItem = ({
+  id,
+  styles,
+  classes,
+  children,
+  ...props
+}: NavItemProps) => {
+  return (
+    <List.ListItem
+      type="li"
+      id={id}
+      classes={classes}
+      styles={styles}
+      {...props}
+    >
+      {children}
+    </List.ListItem>
+  )
+}
+
+/**
+ * Renders a Nav component.
+ * @param {Object} props - The props for the component.
+ * @param {ReactNode} props.children - The child elements.
+ * @param {Object} props - Additional props to spread to the UI component.
+ * @returns {JSX.Element} The rendered Nav component.
+ */
+export const Nav = ({ children, ...props }: NavProps) => {
+  return (
+    <UI as="nav" {...props}>
+      {children}
+    </UI>
+  )
+}
+
+export default Nav
+Nav.displayName = 'Nav'
+Nav.List = NavList
+Nav.Item = NavItem

package/src/components/popover/node_modules/.vitest/results.json

@@ -0,0 +1 @@
+{"version":"0.33.0","results":[[":popover.test.tsx",{"duration":0,"failed":true}]]}

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

@@ -0,0 +1,31 @@
+import { StoryObj, Meta } from '@storybook/react'
+import { within, userEvent, screen } from '@storybook/testing-library'
+import { expect } from '@storybook/jest'
+
+import Popover from './popover'
+import { getByText } from '@testing-library/react'
+
+const meta: Meta<typeof Popover> = {
+  title: 'FP.React Components/Basic Popover',
+  component: Popover,
+  args: {
+    children: 'Hi, I am a popover.',
+    popoverTrigger: 'Hover here',
+    styles: Popover.styles,
+  },
+} as Meta
+
+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()
+  },
+}

package/src/components/popover/popover.test.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import Popover from './popover'
+import userEvent from '@testing-library/user-event'
+
+describe('Popover', () => {
+  it('renders the popover content when the trigger element is hovered', async () => {
+    render(
+      <Popover popoverTrigger={<button>Hover here</button>}>
+        Popover content
+      </Popover>,
+    )
+
+    const triggerElement = screen.getByRole('button', {
+      name: /hover here/i,
+    })
+    userEvent.hover(triggerElement)
+    expect(await screen.findByText('Popover content')).toBeInTheDocument()
+  })
+
+  it('hides the popover content when the trigger element is no longer hovered', () => {
+    render(
+      <Popover popoverTrigger={<button>Hover here</button>}>
+        Popover content
+      </Popover>,
+    )
+
+    const triggerElement = screen.getByRole('button', {
+      name: /hover here/i,
+    })
+    fireEvent.pointerEnter(triggerElement)
+
+    const popoverContent = screen.getByText('Popover content')
+    expect(popoverContent).toBeInTheDocument()
+
+    fireEvent.pointerLeave(triggerElement)
+    expect(popoverContent).not.toBeInTheDocument()
+  })
+})

package/src/components/popover/popover.tsx

@@ -0,0 +1,85 @@
+import React from 'react'
+import usePopover from '#hooks/popover/use-popover'
+
+/**
+ * Interface for props accepted by the Popover component
+ *
+ * @property {ReactNode} children - The content to show in the popover
+ * @property {ReactNode} [content] - Optional alternative content for popover
+ */
+export type PopoverProps = {
+  children: React.ReactNode
+  popoverTrigger: React.ReactNode
+  styles?: {}
+}
+
+export const defaultStyles = {
+  display: 'block',
+  position: 'absolute',
+  background: '#000',
+  border: '1px solid #010101',
+  padding: '10px',
+  color: '#fff',
+  transition: 'opacity .5s ease-in-out',
+} as React.CSSProperties
+
+/**
+ * Popover component to display popover content.
+ *
+ * @param props - The props for the component
+ * @param props.children - The content to show in the popover
+ * @param props.popoverTrigger - The element that triggers the popover on hover
+ *
+ * @returns JSX.Element - The rendered JSX element for the Popover
+ * @example - <Popover popoverTrigger={<button>Hover here</button>}>Popover content</Popover>
+ *
+ * The component uses the usePopover hook to handle popover visibility and positioning.
+ *
+ * It renders the triggerElement, and conditionally renders the popover content
+ * positioned absolutely when visible.
+ *
+ * Inline styles handle visuals like background, border, padding, etc.
+ *
+ * Transforms and opacity animate the enter/exit transition of the popover.
+ */
+
+export const Popover = ({
+  children,
+  popoverTrigger,
+  styles,
+  ...props
+}: PopoverProps): JSX.Element => {
+  const hoverRef = React.useRef(null)
+  const popOverRef = React.useRef(null)
+  const { isVisible, popoverPosition, handlePointerEvent, handlePointerLeave } =
+    usePopover(hoverRef, popOverRef)
+  const popoverStyles = {
+    opacity: isVisible ? 1 : 0,
+    top: popoverPosition.top,
+    left: popoverPosition.left,
+    // transform: `translateY(${isVisible ? '0px' : '-50px'})`,
+    zIndex: 999,
+  } as React.CSSProperties
+
+  return (
+    <>
+      <div
+        ref={hoverRef}
+        onPointerEnter={handlePointerEvent}
+        onPointerLeave={handlePointerLeave}
+        {...props}
+      >
+        {popoverTrigger}
+      </div>
+      {isVisible && (
+        <div ref={popOverRef} style={{ ...popoverStyles, ...styles }}>
+          {children}
+        </div>
+      )}
+    </>
+  )
+}
+
+export default Popover
+Popover.displayName = 'Popover'
+Popover.styles = defaultStyles

package/src/components/progress/progress.scss

@@ -0,0 +1,70 @@
+progress {
+  /* Revert all styles */
+  all: revert;
+  --progress-w: 100%;
+  --progress-h: 1rem;
+  --progress-bg: #cccccc;
+  --progress-color: rgb(71, 71, 245);
+  --progress-accent-color: var(--progress-color);
+
+  /* This code changes the color of the progress bar. */
+  /* The variable names indicate the colors that are used. */
+  /* The colors are used in the progress bar. */
+  &[value] {
+
+    width: var(--progress-w);
+    height: var(--progress-h);
+    background-color: var(--progress-bg);
+    accent-color: var(--progress-accent-color);
+
+
+    &::-webkit-progress-value {
+      /* Color for Chrome, Safari, and newer Opera */
+      background-color: var(--progress-accent-color);
+      accent-color: var(--progress-accent-color);
+
+    }
+
+    &::-moz-progress-bar {
+      /* Color for Firefox */
+      background-color: var(--progress-accent-color);
+      accent-color: var(--progress-accent-color)
+    }
+
+    /* Styling for the remaining part of the& bar */
+    &::-webkit-progress-bar {
+      /* Background for Chrome, Safari, and newer Opera */
+      background-color: var(--progress-background-color);
+      accent-color: var(--progress-accent-color)
+    }
+  }
+
+  /* If the progress element is busy, remove the revert styles */
+  &[aria-busy] {
+    // all: revert;
+    width: var(--progress-w);
+    height: var(--progress-h);
+    // height: calc(var(--progress-h) + var(--progress-h));
+    accent-color: var(--progress-accent-color);
+
+    &::-webkit-progress-value {
+      /* Color for Chrome, Safari, and newer Opera */
+      // background-color: var(--progress-accent-color);
+      accent-color: var(--progress-accent-color)
+    }
+
+    &::-moz-progress-bar {
+      // /* Color for Firefox */
+      // background-color: var(--progress-bg);
+      accent-color: var(--progress-accent-color)
+    }
+
+    /* Styling for the remaining part of the& bar */
+    &::-webkit-progress-bar {
+      /* Background for Chrome, Safari, and newer Opera */
+      // background-color: var(--progress-bg);
+      accent-color: var(--progress-accent-color)
+    }
+  }
+
+}

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

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

package/src/components/progress/progress.tsx

@@ -0,0 +1,82 @@
+import React from 'react'
+
+type ProgressRules =
+  | {
+      /** Indicates progress bar is in busy/loading state */
+      isBusy?: true
+
+      /** No current value when in busy state */
+      value?: never
+
+      /** No max value needed when in busy state */
+      max?: never
+    }
+  | {
+      /** Indicates progress bar is not in busy state */
+      isBusy?: false | undefined
+
+      /** Current value of progress bar */
+      value: number
+
+      /** Max value of progress bar */
+      max: number
+    }
+
+export type ProgressProps = {
+  /**
+   * Optional styles to pass to override default styles
+   * Accepts CSSProperties
+   */
+  styles?: React.CSSProperties
+
+  /**
+   * Optional accessible label for the progress bar
+   */
+  label?: string
+  /**
+   * Color of the scroll bar
+   */
+  color?: string
+} & ProgressRules
+
+/**
+ * Progress bar component
+ * Displays a progress bar with busy and value state
+ *
+ * @param {Object} classes - CSS classes object
+ * @param {ReactNode} [children] - Child elements
+ * @param {boolean} isBusy - Whether progress is in busy state
+ * @param {number} [value] - Current progress value
+ * @param {number} [max] - Max progress value
+ * @param {string} [color] - color of the scroll bar
+ * @param {Object} props - Other props
+ * @returns {JSX.Element} - Rendered progress element
+ */
+const Progress = ({
+  styles,
+  isBusy,
+  value,
+  max,
+  color,
+  label = 'Progress',
+  ...props
+}: ProgressProps): React.JSX.Element => {
+  const defaultStyles = {
+    accentColor: color,
+  } as React.CSSProperties
+
+  const style = { ...defaultStyles, ...styles }
+  return (
+    <progress
+      aria-label={label}
+      style={style}
+      aria-busy={isBusy}
+      value={value}
+      max={max}
+      {...props}
+    ></progress>
+  )
+}
+
+export default Progress
+Progress.displayName = 'Progress'

package/src/components/readme.stories.mdx

@@ -0,0 +1,7 @@
+import { Meta } from "@storybook/addon-docs"
+
+<Meta title="FP.React Components/Readme" />
+
+# FPKIT Button(s)
+
+lorem...