feat: Added new Typewriter component

packages/ui/src/components/Typewriter/Typewriter.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Typewriter } from './Typewriter';
+
+const meta = {
+  component: Typewriter,
+} satisfies Meta<typeof Typewriter>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    words: [ 'Hello, World!', 'This is the do-ob Typewriter component.' ]
+  }
+};

packages/ui/src/components/Typewriter/Typewriter.tsx

@@ -0,0 +1,51 @@
+import { useTypewriter } from '@do-ob/ui/hooks';
+
+export interface TypewriterProps extends React.HTMLAttributes<HTMLParagraphElement> {
+  /**
+   * The words to type
+   */
+  words: string | string[];
+
+  /**
+   * Number of times to loop through the words.
+   */
+  loop?: number;
+
+  /**
+   * The speed of the typing
+   */
+  typeSpeed?: number;
+
+  /**
+   * The speed of the backspacing
+   */
+  deleteSpeed?: number;
+
+  /**
+   * The deltay between typing the next word.
+   */
+  wordDelay?: number;
+}
+
+
+export function Typewriter({
+  words: wordsProp,
+  loop = 0,
+  typeSpeed = 80,
+  deleteSpeed = 50,
+  wordDelay = 1500,
+  ...props
+}: TypewriterProps) {
+
+  const words = Array.isArray(wordsProp) ? wordsProp : [ wordsProp ];
+
+  const [ text ] = useTypewriter({
+    words,
+    loop,
+    typeSpeed,
+    deleteSpeed,
+    wordDelay
+  });
+
+  return <p {...props}>{text}</p>;
+}

packages/ui/src/components/TypewriterInput/TypewriterInput.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { TypewriterInput } from './TypewriterInput';
+
+const meta = {
+  component: TypewriterInput,
+} satisfies Meta<typeof TypewriterInput>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    words: [ 'Hello, World!', 'This is the do-ob Typewriter Input component.' ]
+  }
+};

packages/ui/src/components/TypewriterInput/TypewriterInput.tsx

@@ -0,0 +1,57 @@
+import { useTypewriter } from '@do-ob/ui/hooks';
+import { Input, InputProps } from '@nextui-org/react';
+
+export interface TypewriterInputProps extends InputProps {
+  /**
+   * The words to type
+   */
+  words: string | string[];
+
+  /**
+   * Number of times to loop through the words.
+   */
+  loop?: number;
+
+  /**
+   * The speed of the typing
+   */
+  typeSpeed?: number;
+
+  /**
+   * The speed of the backspacing
+   */
+  deleteSpeed?: number;
+
+  /**
+   * The deltay between typing the next word.
+   */
+  wordDelay?: number;
+}
+
+
+export function TypewriterInput({
+  words: wordsProp,
+  loop = 0,
+  typeSpeed = 80,
+  deleteSpeed = 50,
+  wordDelay = 1500,
+  ...props
+}: TypewriterInputProps) {
+
+  const words = Array.isArray(wordsProp) ? wordsProp : [ wordsProp ];
+
+  const [ text ] = useTypewriter({
+    words,
+    loop,
+    typeSpeed,
+    deleteSpeed,
+    wordDelay
+  });
+
+  return (
+    <Input
+      {...props}
+      placeholder={text}
+    />
+  );
+}