@fpkit/acss 0.5.4 → 0.5.5

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

@@ -1,75 +1,74 @@
-import { StoryObj, Meta } from '@storybook/react'
-import { within, expect } from '@storybook/test'
+import { StoryObj, Meta } from "@storybook/react";
+import { within, expect } from "@storybook/test";
 
-
-import Heading from './heading'
+import Heading from "./heading";
 
 const meta: Meta<typeof Heading> = {
-  title: 'FP.REACT Components/Heading',
+  title: "FP.REACT Components/Heading",
   component: Heading,
+  tags: ["version:1.0.0"],
   parameters: {
-    actions: { argTypesRegex: '^on.*' },
+    actions: { argTypesRegex: "^on.*" },
     docs: {
       description: {
-        component: 'Heading description here...',
+        component: "Heading description here...",
       },
     },
   },
   args: {
-    // @ts-ignore
-    children: 'Default title',
+    children: "Default title",
   },
-} as Story
+} as Story;
 
-export default meta
-type Story = StoryObj<typeof Heading>
+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()
+    const canvas = within(canvasElement);
+    expect(canvas.getByText(/default title/i)).toBeInTheDocument();
   },
-}
+};
 
 export const HeadingOne: Story = {
   args: {
-    type: 'h1',
-    children: 'Heading One',
+    type: "h1",
+    children: "Heading One",
   },
-} as Story
+} as Story;
 
 export const HeadingTwo: Story = {
   args: {
-    type: 'h2',
-    children: 'Heading Two',
+    type: "h2",
+    children: "Heading Two",
   },
-} as Story
+} as Story;
 
 export const HeadingThree: Story = {
   args: {
-    type: 'h3',
-    children: 'Heading Three',
+    type: "h3",
+    children: "Heading Three",
   },
-} as Story
+} as Story;
 
 export const HeadingFour: Story = {
   args: {
-    type: 'h4',
-    children: 'Heading Four',
+    type: "h4",
+    children: "Heading Four",
   },
-} as Story
+} as Story;
 
 export const HeadingFive: Story = {
   args: {
-    type: 'h5',
-    children: 'Heading Five',
+    type: "h5",
+    children: "Heading Five",
   },
-} as Story
+} as Story;
 
 export const HeadingSix: Story = {
   args: {
-    type: 'h6',
-    children: 'Heading Six',
+    type: "h6",
+    children: "Heading Six",
   },
-} as Story
+} as Story;

package/src/components/heading/heading.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import UI from '#components/ui'
-
+import { type } from 'os'
 
 export type TitleProps = {
   children: React.ReactNode

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

@@ -6,7 +6,6 @@ const defaultStyes = {
   display: 'inline-flex',
   alignItems: 'center',
   width: 'auto',
-  fontSize: 'inherit',
 }
 
 export const Svg = ({

package/src/components/icons/icon.scss

@@ -5,13 +5,11 @@
   --icon-width: max-content;
   --icon-gap: 0.2rem;
   --icon-height: max-content;
-  --icon-fs: inherit;
 
   display: var(--icon-display);
   flex-direction: var(--icon-direction);
   gap: var(--icon-gap);
- align-items: var(--icons-placement);
+  place-items: var(--icons-placement);
   width: var(--icon-width);
   height: var(--icon-height);
-  font-size: var(--icon-fs);
 }

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

@@ -1,96 +1,63 @@
-import * as React from 'react'
+import * as React from "react";
 
-import type { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from "@storybook/react";
 
-import { Button } from '#components/buttons/button'
-import { Icon } from './icon'
-import Heading  from '#components/heading/heading'
-// import './icon.scss'
- 
+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',
+  title: "FP.React Components/Icons",
+  tags: ["rc"],
   args: {
     // styles: Icon.styles,
   },
   decorators: [
     (Story) => (
-      <section style={{ minWidth: '60vw', textAlign: 'center' }}>
+      <section style={{ minWidth: "60vw", textAlign: "center" }}>
         <Story />
       </section>
     ),
   ],
-} as Meta
+} as Meta;
 
-export default meta
-type Story = StoryObj<typeof Icon>
+export default meta;
+type Story = StoryObj<typeof Icon>;
 
 export const IconSet = {
   args: {},
-  render: (...args: any) => {
+  render: () => {
     return (
       <Icon>
         <Icon.Code styles={Icon.Code.styles} />
-        Code Icon{' '}
+        Code Icon{" "}
       </Icon>
-    )
+    );
   },
-}
-
-
-export const IconSizes = {
-  args: {},
-  render: (...args: any) => {
-    return (
-      <Icon>
-        <Icon.ArrowUp size={16} />
-        <Icon.ArrowUp size={24} />
-        <Icon.ArrowUp size={32} />
-        <Icon.ArrowUp size={48} />
-        <Icon.ArrowUp size={64} />
-        <Icon.ArrowUp size={96} />
-        <Icon.ArrowUp size={128} />
-      </Icon>
-    )
-  },
-}
-
-export const HeadingIcon = {
-  args: {},
-  render: (...args: any) => {
-    return (
-      <Heading type="h1">
-        <Icon>
-          <Icon.Code size={32} /> Code Icon
-        </Icon>
-      </Heading>
-    )
-  },
-}
+};
 
 export const IconButton = {
   args: {},
-  render: (...args: any) => {
+  render: () => {
     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
+} as Story;
 
 export const Home: Story = {
   args: {
@@ -101,142 +68,142 @@ export const Home: Story = {
       </>
     ),
   },
-} as Story
+} as Story;
 
 export const Add: Story = {
   args: {
     children: <Icon.Add />,
   },
-} as Story
+} as Story;
 
 export const ArrowDown: Story = {
   args: {
     children: <Icon.ArrowDown />,
   },
-} as Story
+} as Story;
 
 export const ArrowLeft: Story = {
   args: {
     children: <Icon.ArrowLeft />,
   },
-} as Story
+} as Story;
 
 export const ArrowRight: Story = {
   args: {
     children: <Icon.ArrowRight />,
   },
-} as Story
+} as Story;
 
 export const ArrowUp: Story = {
   args: {
     children: <Icon.ArrowUp />,
   },
-} as Story
+} as Story;
 
 export const Chat: Story = {
   args: {
     children: <Icon.Chat />,
   },
-} as Story
+} as Story;
 
 export const User: Story = {
   args: {
     children: <Icon.User />,
   },
-} as Story
+} as Story;
 
 export const Left: Story = {
   args: {
     children: <Icon.Left />,
   },
-} as Story
+} as Story;
 
 export const Right: Story = {
   args: {
     children: <Icon.Right />,
   },
-} as Story
+} as Story;
 
 export const Up: Story = {
   args: {
     children: <Icon.Up />,
   },
-} as Story
+} as Story;
 
 export const Down: Story = {
   args: {
     children: <Icon.Down />,
   },
-} as Story
+} as Story;
 
 export const Minus: Story = {
   args: {
     children: <Icon.Minus />,
   },
-} as Story
+} as Story;
 
 export const Remove: Story = {
   args: {
     children: <Icon.Remove />,
   },
-} as Story
+} as Story;
 
 export const Star: Story = {
   args: {
     children: <Icon.Star />,
   },
-} as Story
+} as Story;
 
 export const Copy: Story = {
   args: {
     children: <Icon.Copy />,
   },
-} as Story
+} as Story;
 
 export const Play: Story = {
   args: {
     children: <Icon.Play />,
   },
-} as Story
+} as Story;
 
 export const Pause: Story = {
   args: {
     children: <Icon.Pause />,
   },
-} as Story
+} as Story;
 
 export const Resume: Story = {
   args: {
     children: <Icon.Resume />,
   },
-} as Story
+} as Story;
 
 export const Stop: Story = {
   args: {
     children: <Icon.Stop />,
   },
-} as Story
+} as Story;
 
 export const PlaySolid: Story = {
   args: {
     children: <Icon.PlaySolid />,
   },
-} as Story
+} as Story;
 
 export const PauseSolid: Story = {
   args: {
     children: <Icon.PauseSolid />,
   },
-} as Story
+} as Story;
 
 export const ResumeSolid: Story = {
   args: {
     children: <Icon.ResumeSolid />,
   },
-} as Story
+} as Story;
 
 export const StopSolid: Story = {
   args: {
     children: <Icon.StopSolid />,
   },
-} as Story
+} as Story;

package/src/components/icons/icon.tsx

@@ -48,17 +48,6 @@ const defaultStyles = {
 
 export type IconProps = React.ComponentProps<typeof UI>
 
-/**
- * A component for rendering icons with consistent styling and behavior.
- *
- * @param {object} props - The component props
- * @param {string} [props.id] - Optional unique identifier for the icon
- * @param {string} [props.classes] - CSS classes to apply to the icon
- * @param {React.ReactNode} [props.children] - Child elements to render inside the icon
- * @param {object} [props.styles] - Custom styles to apply to the icon
- * @param {...any} [props.props] - Additional props to spread to the underlying UI component
- * @returns {JSX.Element} The rendered icon component
- */
 export const Icon = ({
   id,
   classes,

package/src/components/icons/types.ts

@@ -2,7 +2,7 @@ import { ComponentProps } from '#/types'
 
 export interface IconProps extends Partial<ComponentProps> {
   fill?: string
-  size?: | 16 | 24 | 32 | 48 | 64 | 96 | 128
+  size?: number
   strokeColor?: string
   strokeWidth?: string
   role?: string

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

@@ -1,31 +1,31 @@
-import { StoryObj, Meta } from '@storybook/react'
-import { within, expect } from '@storybook/test'
+import { StoryObj, Meta } from "@storybook/react";
+import { within, expect } from "@storybook/test";
 
-
-import Figure from './figure'
+import Figure from "./figure";
 
 const meta: Meta<typeof Figure> = {
-  title: 'FP.REACT Components/Figure',
+  title: "FP.REACT Components/Figure",
   component: Figure,
+  tags: ["version:1.0.0"],
   parameters: {
-    actions: { argTypesRegex: '^on.*' },
+    actions: { argTypesRegex: "^on.*" },
     docs: {
       description: {
-        component: 'Figure description here...',
+        component: "Figure description here...",
       },
     },
   },
   args: {},
-} as Story
+} as Story;
 
-export default meta
-type Story = StoryObj<typeof Figure>
+export default meta;
+type Story = StoryObj<typeof Figure>;
 
 export const FigureComponent: Story = {
   args: {},
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
+    const canvas = within(canvasElement);
     // await expect(canvas.getByRole('img')).toBeInTheDocument()
-    expect(canvas.getByRole('figure')).toBeInTheDocument()
+    expect(canvas.getByRole("figure")).toBeInTheDocument();
   },
-}
+};

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

@@ -1,24 +1,24 @@
-import { StoryObj, Meta } from '@storybook/react'
-import { within, expect } from '@storybook/test'
+import { StoryObj, Meta } from "@storybook/react";
+import { within, expect } from "@storybook/test";
 
-
-import Img from './img'
+import Img from "./img";
 
 const meta: Meta<typeof Img> = {
-  title: 'FP.REACT Components/Img',
+  title: "FP.REACT Components/Img",
   component: Img,
+  tags: ["version:1.0.0"],
   args: {
-    src: '//',
+    src: "//",
   },
-} as Story
+} as Story;
 
-export default meta
-type Story = StoryObj<typeof Img>
+export default meta;
+type Story = StoryObj<typeof Img>;
 
 export const ImgComponent: Story = {
   args: {},
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    await expect(canvas.getByRole('img')).toBeInTheDocument()
+    const canvas = within(canvasElement);
+    await expect(canvas.getByRole("img")).toBeInTheDocument();
   },
-}
+};

package/src/components/link/link.stories.tsx

@@ -1,74 +1,71 @@
-import { StoryObj, Meta } from '@storybook/react'
+import { StoryObj, Meta } from "@storybook/react";
 
-import { within, expect } from '@storybook/test'
+import { within, expect } from "@storybook/test";
 
-
-
-import Link from './link'
-import '../../styles/link/link.css'
+import Link from "./link";
+import "../../styles/link/link.css";
 
 const meta: Meta<typeof Link> = {
-  title: 'FP.React Components/Links',
+  title: "FP.React Components/Links",
+  tags: ["version:1.0.0"],
   component: Link,
   args: {
-    // @ts-ignore
-    href: '/',
-    children: 'Link',
+    href: "/",
+    children: "Link",
   },
-} as Meta
+} as Meta;
 
-export default meta
-type Story = StoryObj<typeof Link>
+export default meta;
+type Story = StoryObj<typeof Link>;
 
 export const LinkComponent: Story = {
   args: {},
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    const link = canvas.getByRole('link')
-    expect(link).toBeInTheDocument()
-    expect(link).toHaveTextContent('Link')
+    const canvas = within(canvasElement);
+    const link = canvas.getByRole("link");
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveTextContent("Link");
   },
-}
+};
 
 export const ExternalLink: Story = {
   args: {
-    // @ts-ignore
-    href: 'https://www.google.com',
-    target: '_blank',
-    rel: 'noopener noreferrer',
+    href: "https://www.google.com",
+    target: "_blank",
+    rel: "noopener noreferrer",
     prefetch: true,
-    children: 'Google',
+    children: "Google",
   },
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    const link = canvas.getByRole('link')
-    expect(link).toBeInTheDocument()
-    expect(link).toHaveTextContent('Google')
-    expect(link).toHaveAttribute('href', 'https://www.google.com')
-    expect(link).toHaveAttribute('target', '_blank')
-    expect(link).toHaveAttribute('rel', 'noopener noreferrer prefetch')
+    const canvas = within(canvasElement);
+    const link = canvas.getByRole("link");
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveTextContent("Google");
+    expect(link).toHaveAttribute("href", "https://www.google.com");
+    expect(link).toHaveAttribute("target", "_blank");
+    expect(link).toHaveAttribute("rel", "noopener noreferrer prefetch");
   },
-}
+} as Story;
 
 export const ButtonLink: Story = {
   args: {
     ...LinkComponent.args,
     children: <b>Button Link</b>,
   },
-} as Story
+} as Story;
 
 export const ButtonPill: Story = {
   args: {
     ...LinkComponent.args,
     children: <i>Button Link</i>,
   },
-} as Story
+} as Story;
 
 export const ButtonRounded: Story = {
   args: {
     ...ButtonLink.args,
     styles: {
-      '--link-radius': 'initial',
+      "--link-radius": "initial",
     },
   },
-} as Story
+} as Story;