@fpkit/acss 0.5.4 → 0.5.6

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

@@ -1,31 +1,30 @@
-import { StoryObj, Meta } from '@storybook/react'
-import { within, expect, userEvent } from '@storybook/test'
+import { StoryObj, Meta } from "@storybook/react";
+import { within, expect, userEvent } from "@storybook/test";
 
-
-import Popover from './popover'
-import { getByText } from '@testing-library/react'
+import Popover from "./popover";
 
 const meta: Meta<typeof Popover> = {
-  title: 'FP.React Components/Basic Popover',
+  title: "FP.React Components/Basic Popover",
   component: Popover,
+  tags: ["experimental"],
   args: {
-    children: 'Hi, I am a popover.',
-    popoverTrigger: 'Hover here',
+    children: "Hi, I am a popover.",
+    popoverTrigger: "Hover here",
     styles: Popover.styles,
   },
-} as Meta
+} as Meta;
 
-export default meta
-type Story = StoryObj<typeof Popover>
+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()
+    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/progress/progress.stories.tsx

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

package/src/components/tag/tag.stories.tsx

@@ -1,39 +1,38 @@
-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 Tag from './tag'
-import './tag.scss'
+import Tag from "./tag";
+import "./tag.scss";
 
 const meta: Meta<typeof Tag> = {
-  title: 'FP.React Components/Tag',
+  title: "FP.React Components/Tag",
   component: Tag,
+  tags: ["beta"],
   args: {
-    // @ts-ignore
-    children: 'Basic Tag',
+    children: "Basic Tag",
     // styles: Tag.styles,
   },
-} as Meta
+} as Meta;
 
-export default meta
-type Story = StoryObj<typeof Tag>
+export default meta;
+type Story = StoryObj<typeof Tag>;
 
 export const TagComponent: Story = {
   args: {},
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    expect(canvas.queryByText(/basic tag/i)).toBeInTheDocument()
+    const canvas = within(canvasElement);
+    expect(canvas.queryByText(/basic tag/i)).toBeInTheDocument();
   },
-}
+};
 
 export const Beta: Story = {
   args: {
-    'data-tag': 'beta',
+    "data-tag": "beta",
   },
-} as Story
+} as Story;
 
 export const Production: Story = {
   args: {
-    'data-tag': 'production',
+    "data-tag": "production",
   },
-} as Story
+} as Story;

package/src/components/text/text.stories.tsx

@@ -1,21 +1,20 @@
-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 Text from './text'
+import Text from "./text";
 
 const meta: Meta<typeof Text> = {
-  title: 'FP.REACT Components/Text',
+  title: "FP.REACT Components/Text",
   component: Text,
+  tags: ["version:1.0.0"],
   args: {
-    // @ts-ignore
     children:
-      'Exercitation non voluptate fugiat amet dolor tempor consectetur. Eu esse adipisicing laboris duis et velit in quis et sunt pariatur tempor laborum nisi. Et id amet ullamco culpa irure nulla esse dolore velit esse.',
+      "Exercitation non voluptate fugiat amet dolor tempor consectetur. Eu esse adipisicing laboris duis et velit in quis et sunt pariatur tempor laborum nisi. Et id amet ullamco culpa irure nulla esse dolore velit esse.",
   },
-} as Story
+} as Story;
 
-export default meta
-type Story = StoryObj<typeof Text>
+export default meta;
+type Story = StoryObj<typeof Text>;
 
 export const ParagraphText: Story = {
   args: {},
@@ -23,45 +22,45 @@ export const ParagraphText: Story = {
   //   const canvas = within(canvasElement)
   //   expect(canvas.getByText(/link/i)).toBeInTheDocument()
   // },
-}
+};
 
 export const span: Story = {
   args: {
-    as: 'span',
-    children: 'Heading Text',
+    as: "span",
+    children: "Heading Text",
   },
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    expect(canvas.getByText(/heading/i)).toBeInTheDocument()
+    const canvas = within(canvasElement);
+    expect(canvas.getByText(/heading/i)).toBeInTheDocument();
   },
-} as Story
+} as Story;
 
 export const Blockquote: Story = {
   args: {
-    as: 'blockquote',
+    as: "blockquote",
     children:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.',
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.",
   },
-} as Story
+} as Story;
 
 export const Strong: Story = {
   args: {
-    as: 'strong',
-    children: 'Emphasis Text',
+    as: "strong",
+    children: "Emphasis Text",
   },
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    expect(canvas.getByText(/emphasis/i)).toBeInTheDocument()
+    const canvas = within(canvasElement);
+    expect(canvas.getByText(/emphasis/i)).toBeInTheDocument();
   },
-} as Story
+} as Story;
 
 export const Code: Story = {
   args: {
-    as: 'code',
-    children: 'Code Text',
+    as: "code",
+    children: "Code Text",
   },
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    expect(canvas.getByText(/code/i)).toBeInTheDocument()
+    const canvas = within(canvasElement);
+    expect(canvas.getByText(/code/i)).toBeInTheDocument();
   },
-} as Story
+} as Story;

package/src/components/text-to-speech/TextToSpeech.stories.tsx

@@ -1,35 +1,34 @@
-import React from 'react'
-import { Meta, StoryObj } from '@storybook/react'
-import TextToSpeech from './TextToSpeech'
-import './text-to-speech.scss'
+import { Meta, StoryObj } from "@storybook/react";
+import TextToSpeech from "./TextToSpeech";
+import "./text-to-speech.scss";
 
 const meta: Meta<typeof TextToSpeech> = {
-  title: 'FP.REACT Components/TextToSpeech',
+  title: "FP.REACT Components/TextToSpeech",
   component: TextToSpeech,
-  tags: ['autodocs'],
+  tags: ["experimental"],
   argTypes: {
     voice: {
       control: {
-        type: 'select',
+        type: "select",
         options: [
-          'Google US English',
-          'Google UK English Female',
-          'Google UK English Male',
+          "Google US English",
+          "Google UK English Female",
+          "Google UK English Male",
         ],
       },
     },
   },
-} as Story
+} as Story;
 
-export default meta
+export default meta;
 
-type Story = StoryObj<typeof TextToSpeech>
+type Story = StoryObj<typeof TextToSpeech>;
 
 export const Default: Story = {
   args: {
-    label: 'Read post',
+    label: "Read post",
     initialText:
-      'Hello, how are you? I am a Text to Speech (TTS) assistant! Update this text and click the [speak] button to hear the change.',
+      "Hello, how are you? I am a Text to Speech (TTS) assistant! Update this text and click the [speak] button to hear the change.",
   },
   parameters: {
     docs: {
@@ -39,13 +38,13 @@ export const Default: Story = {
       },
     },
   },
-} as Story
+} as Story;
 
 export const WithText: Story = {
   args: {
     // Add props to simulate text input
     initialText:
-      'This is a test of the text to speech component. Here the test is passed as a prop and the text input is hidden.',
+      "This is a test of the text to speech component. Here the test is passed as a prop and the text input is hidden.",
     showTextInput: false,
   },
   parameters: {
@@ -56,90 +55,90 @@ export const WithText: Story = {
       },
     },
   },
-} as Story
+} as Story;
 
-export const FullFeature: Story = {
-  args: {
-    initialText:
-      'Welcome to the full-featured Text-to-Speech component. You can modify this text, choose a voice, adjust pitch and rate, and then click the speak button to hear it.',
-    showTextInput: true,
-    pitch: 1,
-    rate: 1,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "This story showcases all features of the TextToSpeechComponent, including text input, voice selection, pitch and rate adjustment. It provides a comprehensive demonstration of the component's capabilities.",
-      },
-    },
-  },
-  render: (args) => {
-    const [selectedVoice, setSelectedVoice] = React.useState<
-      SpeechSynthesisVoice | undefined
-    >(undefined)
-    const [pitch, setPitch] = React.useState(1)
-    const [rate, setRate] = React.useState(1)
+// export const FullFeature: Story = {
+//   args: {
+//     initialText:
+//       "Welcome to the full-featured Text-to-Speech component. You can modify this text, choose a voice, adjust pitch and rate, and then click the speak button to hear it.",
+//     showTextInput: true,
+//     pitch: 1,
+//     rate: 1,
+//   },
+//   parameters: {
+//     docs: {
+//       description: {
+//         story:
+//           "This story showcases all features of the TextToSpeechComponent, including text input, voice selection, pitch and rate adjustment. It provides a comprehensive demonstration of the component's capabilities.",
+//       },
+//     },
+//   },
+//   render: (args) => {
+//     const [selectedVoice, setSelectedVoice] = React.useState<
+//       SpeechSynthesisVoice | undefined
+//     >(undefined);
+//     const [pitch, setPitch] = React.useState(1);
+//     const [rate, setRate] = React.useState(1);
 
-    React.useEffect(() => {
-      const voices = window.speechSynthesis.getVoices()
-      setSelectedVoice(
-        voices.find((voice) => voice.name === 'Google US English') || voices[0],
-      )
-    }, [])
+//     React.useEffect(() => {
+//       const voices = window.speechSynthesis.getVoices();
+//       setSelectedVoice(
+//         voices.find((voice) => voice.name === "Google US English") || voices[0]
+//       );
+//     }, []);
 
-    return (
-      <div>
-        <TextToSpeech
-          {...args}
-          voice={selectedVoice}
-          pitch={pitch}
-          rate={rate}
-        />
-        <div style={{ marginTop: '20px' }}>
-          <label htmlFor="voice-select">Select Voice: </label>
-          <select
-            id="voice-select"
-            onChange={(e) =>
-              setSelectedVoice(
-                window.speechSynthesis
-                  .getVoices()
-                  .find((v) => v.name === e.target.value),
-              )
-            }
-          >
-            {window.speechSynthesis.getVoices().map((voice) => (
-              <option key={voice.name} value={voice.name}>
-                {voice.name} ({voice.lang})
-              </option>
-            ))}
-          </select>
-        </div>
-        <div style={{ marginTop: '10px' }}>
-          <label htmlFor="pitch-range">Pitch: {pitch}</label>
-          <input
-            id="pitch-range"
-            type="range"
-            min="0.5"
-            max="2"
-            step="0.1"
-            value={pitch}
-            onChange={(e) => setPitch(parseFloat(e.target.value))}
-          />
-        </div>
-        <div style={{ marginTop: '10px' }}>
-          <label htmlFor="rate-range">Rate: {rate}</label>
-          <input
-            id="rate-range"
-            type="range"
-            min="0.5"
-            max="2"
-            step="0.1"
-            value={rate}
-            onChange={(e) => setRate(parseFloat(e.target.value))}
-          />
-        </div>
-      </div>
-    )
-  },
-} as Story
+//     return (
+//       <div>
+//         <TextToSpeech
+//           {...args}
+//           voice={selectedVoice}
+//           pitch={pitch}
+//           rate={rate}
+//         />
+//         <div style={{ marginTop: "20px" }}>
+//           <label htmlFor="voice-select">Select Voice: </label>
+//           <select
+//             id="voice-select"
+//             onChange={(e) =>
+//               setSelectedVoice(
+//                 window.speechSynthesis
+//                   .getVoices()
+//                   .find((v) => v.name === e.target.value)
+//               )
+//             }
+//           >
+//             {window.speechSynthesis.getVoices().map((voice) => (
+//               <option key={voice.name} value={voice.name}>
+//                 {voice.name} ({voice.lang})
+//               </option>
+//             ))}
+//           </select>
+//         </div>
+//         <div style={{ marginTop: "10px" }}>
+//           <label htmlFor="pitch-range">Pitch: {pitch}</label>
+//           <input
+//             id="pitch-range"
+//             type="range"
+//             min="0.5"
+//             max="2"
+//             step="0.1"
+//             value={pitch}
+//             onChange={(e) => setPitch(parseFloat(e.target.value))}
+//           />
+//         </div>
+//         <div style={{ marginTop: "10px" }}>
+//           <label htmlFor="rate-range">Rate: {rate}</label>
+//           <input
+//             id="rate-range"
+//             type="range"
+//             min="0.5"
+//             max="2"
+//             step="0.1"
+//             value={rate}
+//             onChange={(e) => setRate(parseFloat(e.target.value))}
+//           />
+//         </div>
+//       </div>
+//     );
+//   },
+// } as Story;

package/src/components/ui.tsx

@@ -1,38 +1,39 @@
-/* eslint-enable react/display-name */
-import React from 'react'
+ 
+/* eslint-disable */
+import React from "react";
 
 type PolymorphicRef<C extends React.ElementType> =
-  React.ComponentPropsWithRef<C>['ref']
+  React.ComponentPropsWithRef<C>["ref"];
 
 type AsProp<C extends React.ElementType> = {
-  as?: C
-}
+  as?: C;
+};
 
-type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P)
+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>>
+  Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
 
 type PolymorphicComponentPropWithRef<
   C extends React.ElementType,
   Props = {},
 > = PolymorphicComponentProp<C, Props> & {
-  ref?: PolymorphicRef<C>
-}
+  ref?: PolymorphicRef<C>;
+};
 
 type FPProps<C extends React.ElementType> = PolymorphicComponentPropWithRef<
   C,
   {
-    renderStyles?: boolean
-    styles?: React.CSSProperties
-    classes?: string
-    id?: string
-    children?: React.ReactNode
+    renderStyles?: boolean;
+    styles?: React.CSSProperties;
+    classes?: string;
+    id?: string;
+    children?: React.ReactNode;
   }
->
+>;
 
 /*
  * FPComponent type definition
@@ -43,25 +44,27 @@ type FPProps<C extends React.ElementType> = PolymorphicComponentPropWithRef<
  * @param props - The component props
  * @returns React component
  */
-type FPComponent = <C extends React.ElementType = 'span'>(
-  props: FPProps<C>,
-) => React.ReactElement | any
+type FPComponent = <C extends React.ElementType = "span">(
+  props: FPProps<C>
+) => React.ReactElement | (any & { displayName?: String });
 
 const FP: FPComponent = React.forwardRef(
   <C extends React.ElementType>(
     { as, styles, classes, children, defaultStyles, ...props }: FPProps<C>,
-    ref?: PolymorphicRef<C>,
+    ref?: PolymorphicRef<C>
   ) => {
-    const Component = as || 'div'
+    const Component = as ?? "div";
 
-    const styleObj: React.CSSProperties = { ...defaultStyles, ...styles }
+    const styleObj: React.CSSProperties = { ...defaultStyles, ...styles };
 
     return (
       <Component ref={ref} style={styleObj} className={classes} {...props}>
         {children}
       </Component>
-    )
-  },
-)
+    );
+  }
+);
 
-export default FP
+export default FP;
+// @ts-expect-error -- React component displayName
+FP.displayName = "FP";

package/src/decorators/instructions.tsx

@@ -0,0 +1,44 @@
+import { StoryFn } from "@storybook/react";
+import UI from "#components/ui";
+
+/**
+ * A decorator that wraps a Storybook story with instructions and an optional title.
+ * This decorator creates a container that displays instructions above the story component.
+ *
+ * @param {React.ReactNode} [instructions] - Optional instructions to display above the story
+ * @param {string} [title] - Optional title for the instructions section. Defaults to "Story Instructions"
+ * @returns {Function} A decorator function that wraps the story component
+ *
+ * @example
+ * ```tsx
+ * export const MyStory = Template.bind({});
+ * MyStory.decorators = [
+ *   WithInstructions(
+ *     <p>Follow these steps to interact with the component...</p>,
+ *     "Usage Instructions"
+ *   )
+ * ];
+ * ```
+ */
+export const WithInstructions =
+  (instructions?: React.ReactNode, title?: string) => (Story: StoryFn) => {
+    return (
+      <UI
+        style={{
+          paddingBlock: "2rem",
+          display: "flex",
+          flexDirection: "column",
+          gap: "3rem",
+          width: "max(320px, 90%)",
+        }}
+      >
+        <Story />
+        <div style={{ paddingInline: "1rem" }}>
+          <h3>{title || "Story Instructions"}</h3>
+          {instructions}
+        </div>
+      </UI>
+    );
+  };
+
+export default WithInstructions;