@fpkit/acss 0.4.4

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

@@ -0,0 +1,39 @@
+import { StoryObj, Meta } from '@storybook/react'
+import { within, userEvent, screen } from '@storybook/testing-library'
+import { expect } from '@storybook/jest'
+
+import Tag from './tag'
+import './tag.scss'
+
+const meta: Meta<typeof Tag> = {
+  title: 'FP.React Components/Tag',
+  component: Tag,
+  args: {
+    // @ts-ignore
+    children: 'Basic Tag',
+    // styles: Tag.styles,
+  },
+} as Meta
+
+export default meta
+type Story = StoryObj<typeof Tag>
+
+export const TagComponent: Story = {
+  args: {},
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    expect(canvas.queryByText(/basic badge/i)).toBeInTheDocument()
+  },
+}
+
+export const Beta: Story = {
+  args: {
+    'data-tag': 'beta',
+  },
+} as Story
+
+export const Production: Story = {
+  args: {
+    'data-tag': 'production',
+  },
+} as Story

package/src/components/tag/tag.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import UI from '#components/ui'
+
+export type TagProps = {
+  /** HTML element to display the badge as span or p */
+  elm?: 'span' | 'p'
+  /**  Aria role for the component - conditional */
+  role: 'note' | 'status'
+} & React.ComponentProps<typeof UI>
+
+export const Tag = ({
+  elm = 'span',
+  role = 'note',
+  children,
+  styles,
+  ...props
+}: TagProps) => {
+  return (
+    <UI as={elm} role={role} styles={styles} {...props}>
+      {children}
+    </UI>
+  )
+}
+export default Tag
+Tag.displayName = 'Tag'

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

@@ -0,0 +1,67 @@
+import { StoryObj, Meta } from '@storybook/react'
+import { within, userEvent, screen } from '@storybook/testing-library'
+import { expect } from '@storybook/jest'
+
+import Text from './text'
+
+const meta: Meta<typeof Text> = {
+  title: 'FP.REACT Components/Text',
+  component: Text,
+  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.',
+  },
+} as Story
+
+export default meta
+type Story = StoryObj<typeof Text>
+
+export const ParagraphText: Story = {
+  args: {},
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    expect(canvas.getByText(/link/i)).toBeInTheDocument()
+  },
+}
+
+export const span: Story = {
+  args: {
+    as: 'span',
+    children: 'Heading Text',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    expect(canvas.getByText(/heading/i)).toBeInTheDocument()
+  },
+} as Story
+
+export const Blockquote: Story = {
+  args: {
+    as: 'blockquote',
+    children:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.',
+  },
+} as Story
+
+export const Strong: Story = {
+  args: {
+    as: 'strong',
+    children: 'Emphasis Text',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    expect(canvas.getByText(/emphasis/i)).toBeInTheDocument()
+  },
+} as Story
+
+export const Code: Story = {
+  args: {
+    as: 'code',
+    children: 'Code Text',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    expect(canvas.getByText(/code/i)).toBeInTheDocument()
+  },
+} as Story

package/src/components/text/text.tsx

@@ -0,0 +1,93 @@
+// import FP from '../fp'
+import React from 'react'
+import UI from '#components/ui'
+
+type InheritedProps = React.ComponentProps<typeof UI>
+
+type TextElements =
+  | 'a'
+  | 'b'
+  | 'blockquote'
+  | 'b'
+  | 'blockquote'
+  | 'cite'
+  | 'code'
+  | 'em'
+  | 'i'
+  | 'em'
+  | 'i'
+  | 'kbd'
+  | 'mark'
+  | 'p'
+  | 's'
+  | 'small'
+  | 'span'
+  | 'span'
+  | 'strong'
+  | 'mark'
+  | 'p'
+  | 's'
+  | 'small'
+  | 'span'
+  | 'span'
+  | 'strong'
+  | 'sub'
+  | 'sup'
+  | 'time'
+  | 'time'
+  | 'u'
+
+export type TextProps = {
+  /**
+   * Text element to to use
+   * Text element to to use
+   */
+  elm?: TextElements
+  /** Pass a text element or string */
+  text?: string
+} & InheritedProps
+
+export const Text = ({
+  elm = 'p',
+  id,
+  text,
+  styles,
+  classes,
+  children,
+  ...props
+}: TextProps) => {
+  return (
+    <UI as={elm} id={id} styles={styles} className={classes} {...props}>
+      <UI as={elm} id={id} styles={styles} className={classes} {...props}>
+        {children || text}
+      </UI>
+    </UI>
+  )
+}
+
+type TitleProps = {
+  /**
+   * HTML headings
+   */
+  elm?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+} & InheritedProps
+
+export const Title = ({
+  elm = 'h3',
+  id,
+  children,
+  styles,
+  classes,
+  ...props
+}: TitleProps) => {
+  return (
+    <Text as={elm} id={id} styles={styles} className={classes} {...props}>
+      {children}
+    </Text>
+  )
+}
+
+export default Text
+
+Text.displayName = 'Text'
+Title.displayName = 'Title'

package/src/components/text-to-speech/README.mdx

@@ -0,0 +1,192 @@
+# Text-to-Speech Components
+
+This folder contains components and hooks related to text-to-speech functionality in the FPKit React library.
+
+## Contents
+
+1. `useTextToSpeech.tsx`: A custom React hook that provides text-to-speech functionality.
+2. `TextToSpeech.tsx`: A React component that implements the text-to-speech functionality using the `useTextToSpeech` hook.
+3. `TextToSpeech.stories.tsx`: Storybook stories for the TextToSpeech component.
+4. `useTextToSpeech.mdx`: Documentation for the `useTextToSpeech` hook.
+
+## Usage
+
+### useTextToSpeech Hook
+
+The `useTextToSpeech` hook provides a simple way to add text-to-speech capabilities to your React components.
+
+```tsx
+import { useTextToSpeech } from '@fpkit/react';
+
+function MyComponent() {
+  const { speak, pause, resume, cancel } = useTextToSpeech();
+
+  const handleSpeak = () => {
+    speak('Hello, world!');
+  };
+
+  return (
+    <button onClick={handleSpeak}>
+      Speak
+    </button>
+  );
+}
+```
+
+
+## Example 2
+
+Here's a detailed example of how to use the `useTextToSpeech` hook in a React component:
+
+```tsx
+import React, { useState, useEffect } from 'react';
+import { useTextToSpeech } from '@fpkit/react';
+
+const TextToSpeechExample: React.FC = () => {
+  const [text, setText] = useState('Welcome to the text-to-speech example!');
+  const [rate, setRate] = useState(1);
+  const [pitch, setPitch] = useState(1);
+  const [volume, setVolume] = useState(1);
+
+  const {
+    speak,
+    pause,
+    resume,
+    cancel,
+    isSpeaking,
+    isPaused,
+    error
+  } = useTextToSpeech({ rate, pitch, volume });
+
+  useEffect(() => {
+    if (error) {
+      console.error('Text-to-speech error:', error);
+    }
+  }, [error]);
+
+  const handleSpeak = () => {
+    speak(text);
+  };
+
+  return (
+    <div>
+      <h2>Text-to-Speech Example</h2>
+      <textarea
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        rows={4}
+        cols={50}
+      />
+      <div>
+        <label>
+          Rate:
+          <input
+            type="range"
+            min="0.1"
+            max="10"
+            step="0.1"
+            value={rate}
+            onChange={(e) => setRate(parseFloat(e.target.value))}
+          />
+          {rate}
+        </label>
+      </div>
+      <div>
+        <label>
+          Pitch:
+          <input
+            type="range"
+            min="0"
+            max="2"
+            step="0.1"
+            value={pitch}
+            onChange={(e) => setPitch(parseFloat(e.target.value))}
+          />
+          {pitch}
+        </label>
+      </div>
+      <div>
+        <label>
+          Volume:
+          <input
+            type="range"
+            min="0"
+            max="1"
+            step="0.1"
+            value={volume}
+            onChange={(e) => setVolume(parseFloat(e.target.value))}
+          />
+          {volume}
+        </label>
+      </div>
+      <div>
+        <button onClick={handleSpeak} disabled={isSpeaking && !isPaused}>
+          Speak
+        </button>
+        <button onClick={pause} disabled={!isSpeaking || isPaused}>
+          Pause
+        </button>
+        <button onClick={resume} disabled={!isPaused}>
+          Resume
+        </button>
+        <button onClick={cancel} disabled={!isSpeaking && !isPaused}>
+          Cancel
+        </button>
+      </div>
+      <div>
+        Status: {isSpeaking ? (isPaused ? 'Paused' : 'Speaking') : 'Idle'}
+      </div>
+      {error && <div style={{ color: 'red' }}>Error: {error.message}</div>}
+    </div>
+  );
+};
+
+export default TextToSpeechExample;
+```
+
+This example demonstrates:
+
+1. Using all the functions and state variables returned by the hook.
+2. Allowing users to input custom text.
+3. Providing controls for rate, pitch, and volume.
+4. Displaying the current speaking status.
+5. Handling and displaying errors.
+6. Disabling buttons based on the current state.
+
+
+
+For more detailed information on the `useTextToSpeech` hook, refer to the `useTextToSpeech.mdx` file.
+
+### TextToSpeech Component
+
+The `TextToSpeech` component provides a ready-to-use implementation of text-to-speech functionality.
+
+```tsx
+import { TextToSpeech } from '@fpkit/react';
+
+function MyComponent() {
+  return (
+    <TextToSpeech text="Hello, world!" />
+  );
+}
+```
+
+## Documentation
+
+For comprehensive documentation on the `useTextToSpeech` hook, including API details and usage examples, please refer to the `useTextToSpeech.mdx` file in this folder.
+
+## Storybook
+
+The `TextToSpeech.stories.tsx` file contains Storybook stories that demonstrate the usage and various configurations of the TextToSpeech component. You can run Storybook to interact with these components in isolation and see how they behave with different props.
+
+## Contributing
+
+When contributing to this folder, please ensure that:
+
+1. Any new functionality is properly documented in the respective MDX files.
+2. Storybook stories are updated or added for new features or components.
+3. The README is kept up-to-date with any significant changes.
+
+## Testing
+
+Ensure that all components and hooks in this folder have appropriate unit tests. Run the test suite before submitting any pull requests.

package/src/components/text-to-speech/TextInput.tsx

@@ -0,0 +1,19 @@
+import React, { ChangeEvent } from 'react';
+
+interface TextInputProps {
+  value: string;
+  onChange: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+}
+
+const TextInput: React.FC<TextInputProps> = ({ value, onChange }) => {
+  return (
+    <textarea
+      value={value}
+      onChange={onChange}
+      placeholder="Enter text to speak"
+      style={{ width: '100%', height: '100px', marginBottom: '10px' }}
+    />
+  );
+};
+
+export default TextInput;

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

@@ -0,0 +1,145 @@
+import React from 'react'
+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',
+  component: TextToSpeech,
+  tags: ['autodocs'],
+  argTypes: {
+    voice: {
+      control: {
+        type: 'select',
+        options: [
+          'Google US English',
+          'Google UK English Female',
+          'Google UK English Male',
+        ],
+      },
+    },
+  },
+} as Story
+
+export default meta
+
+type Story = StoryObj<typeof TextToSpeech>
+
+export const Default: Story = {
+  args: {
+    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.',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "This story demonstrates the TextToSpeechComponent with predefined text and hidden text input. It's useful for scenarios where you want to display the component with a fixed text, without allowing the user to modify it.",
+      },
+    },
+  },
+} 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.',
+    showTextInput: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "This story demonstrates the TextToSpeechComponent with predefined text and hidden text input. It's useful for scenarios where you want to display the component with a fixed text, without allowing the user to modify it.",
+      },
+    },
+  },
+} 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)
+
+    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

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

@@ -0,0 +1,94 @@
+import React, { useState, ChangeEvent, useEffect } from 'react'
+import { useTextToSpeech } from './useTextToSpeech'
+import Textarea from '#components/form/textarea.jsx'
+import TextToSpeechControls from './views/TextToSpeechControls'
+
+/**
+ * Props for the TextToSpeechComponent.
+ * @interface TextToSpeechComponentProps
+ */
+interface TextToSpeechComponentProps {
+  /** Initial text to be spoken. Defaults to an empty string. */
+  initialText?: string
+  /** Whether to show the text input field. Defaults to true. */
+  showTextInput?: boolean
+  /** The voice to be used for speech synthesis. */
+  voice?: SpeechSynthesisVoice | undefined
+  /** The pitch of the voice. Defaults to 1. */
+  pitch?: number
+  /** The rate of speech. Defaults to 1. */
+  rate?: number
+  /** The language to be used for speech synthesis. */
+  language?: string
+  /** Player label */
+  label?: string | React.ReactNode
+  /** Callback function to be called when speech ends. */
+  onEnd?: () => void
+}
+
+/**
+ * A component that converts text to speech using the Web Speech API.
+ * @param {TextToSpeechComponentProps} props - The props for the component.
+ * @returns {JSX.Element} The rendered TextToSpeechComponent.
+ */
+export const TextToSpeech: React.FC<TextToSpeechComponentProps> = ({
+  initialText = '',
+  showTextInput = false,
+  voice,
+  pitch = 1,
+  rate = 1,
+  language,
+  label,
+  onEnd,
+}) => {
+  const {
+    speak,
+    pause,
+    resume,
+    cancel,
+    isSpeaking,
+    isPaused,
+    getAvailableLanguages,
+    availableVoices,
+  } = useTextToSpeech()
+  const [text, setText] = useState<string>(initialText)
+  console.log(getAvailableLanguages())
+
+  useEffect(() => {
+    setText(initialText)
+  }, [initialText])
+
+  const handleSpeak = (): void => {
+    if (text.trim() !== '') {
+      speak(text, { voice, pitch, rate }, handleEnd)
+    }
+  }
+
+  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>): void => {
+    setText(e.target.value)
+  }
+
+  const handleEnd = (): void => {
+    if (onEnd) {
+      onEnd()
+    }
+  }
+
+  return (
+    <>
+      {showTextInput && <Textarea value={text} onChange={handleChange} />}
+      <TextToSpeechControls
+        label={label}
+        isSpeaking={isSpeaking}
+        isPaused={isPaused}
+        onSpeak={handleSpeak}
+        onPause={pause}
+        onResume={resume}
+        onCancel={cancel}
+      />
+    </>
+  )
+}
+
+export default TextToSpeech
+TextToSpeech.displayName = 'TextToSpeechComponent'

package/src/components/text-to-speech/text-to-speech.scss

@@ -0,0 +1,31 @@
+[data-tts] {
+  --tts-gap: 0.5rem;
+  --tts-bg: #fff;
+  --tts-border-width: 0.125rem;
+  --tts-border-style: solid;
+  --tts-border-color: currentColor;
+  --tts-radius: 99rem;
+  --tts-padding: 0.5rem;
+  --tts-min-width: 20.3125rem;
+  --tts-align-items: center;
+  --tts-justify-content: center;
+
+  display: flex;
+  gap: var(--tts-gap);
+  align-items: var(--tts-align-items);
+  justify-content: var(--tts-justify-content);
+  background-color: var(--tts-bg);
+  border: none;
+  outline: var(--tts-border-width) var(--tts-border-style)
+    var(--tts-border-color);
+  border-radius: var(--tts-radius);
+  padding: var(--tts-padding);
+  min-width: var(--tts-min-width);
+  button[data-btn~='tts-btn'],
+  .tts-border {
+    outline: none;
+    &:hover {
+      outline: var(--tts-border-width) var(--tts-border-style);
+    }
+  }
+}