Merge pull request #499 from w3bdesign/develop

Add more Ladle stories

package.json

@@ -16,7 +16,8 @@
     "cypress:open": "cypress open",
     "cypress:headless": "cypress run",
     "e2e": "start-test dev 3000 cypress:headless",
-    "refresh": "pnpm i && rm -rf node_modules && rm pnpm-lock.yaml && pnpm store prune && pnpm i && pnpm format"
+    "refresh": "pnpm i && rm -rf node_modules && rm pnpm-lock.yaml && pnpm store prune && pnpm i && pnpm format",
+    "ladle": "ladle serve"
   },
   "dependencies": {
     "@emailjs/browser": "^4.4.1",

src/stories/components/BounceInScroll.stories.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+import { Meta, Story } from "@ladle/react";
+import BounceInScroll from "../../components/Animations/BounceInScroll.component";
+import { IAnimateBounceProps } from "../../components/Animations/types/Animations.types";
+
+export default {
+  title: "Animations/BounceInScroll",
+  component: BounceInScroll,
+} as Meta;
+
+const Template: Story<IAnimateBounceProps> = (args) => (
+  <div className="min-h-[150vh] bg-gray-800 p-8">
+    <div className="text-white mb-[100vh]">
+      ⬇️ Scroll down to see the animation
+    </div>
+    <BounceInScroll {...args} />
+  </div>
+);
+
+const Card = () => (
+  <div className="bg-gray-700 p-6 rounded-lg shadow-lg">
+    <h2 className="text-2xl text-white mb-4">Animated Card</h2>
+    <p className="text-gray-300">
+      This card demonstrates the BounceInScroll animation component.
+    </p>
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  children: <Card />,
+  viewAmount: 0.2,
+};
+
+export const InstantAnimation = Template.bind({});
+InstantAnimation.args = {
+  children: <Card />,
+  instant: true,
+};
+
+export const FullViewTrigger = Template.bind({});
+FullViewTrigger.args = {
+  children: <Card />,
+  viewAmount: "all",
+};
+
+export const PartialViewTrigger = Template.bind({});
+PartialViewTrigger.args = {
+  children: <Card />,
+  viewAmount: "some",
+};
+
+export const CustomViewAmount = Template.bind({});
+CustomViewAmount.args = {
+  children: <Card />,
+  viewAmount: 0.5,
+};
+
+export const WithCustomClass = Template.bind({});
+WithCustomClass.args = {
+  children: <Card />,
+  cssClass: "max-w-md mx-auto",
+};
+
+export const LargeContent = Template.bind({});
+LargeContent.args = {
+  children: (
+    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+      <Card />
+      <Card />
+      <Card />
+    </div>
+  ),
+  viewAmount: 0.2,
+};
+
+export const TextContent = Template.bind({});
+TextContent.args = {
+  children: (
+    <div className="text-white text-center">
+      <h1 className="text-4xl font-bold mb-4">Welcome</h1>
+      <p className="text-xl">This is a simple text animation example.</p>
+    </div>
+  ),
+  viewAmount: 0.2,
+};

src/stories/components/GenericForm.stories.tsx

@@ -0,0 +1,149 @@
+import React from "react";
+import { Meta } from "@ladle/react";
+import { z } from "zod";
+import GenericForm from "../../components/UI/GenericForm.component";
+
+export default {
+  title: "GenericForm",
+  component: GenericForm,
+} as Meta;
+
+// Example schemas
+const contactSchema = z.object({
+  name: z.string().min(2, "Name must be at least 2 characters"),
+  email: z.string().email("Invalid email address"),
+  message: z.string().min(10, "Message must be at least 10 characters"),
+});
+
+const subscribeSchema = z.object({
+  email: z.string().email("Invalid email address"),
+  preferences: z.string().min(1, "Please select your preferences"),
+});
+
+const feedbackSchema = z.object({
+  title: z.string().min(3, "Title must be at least 3 characters"),
+  rating: z.string().regex(/^[1-5]$/, "Rating must be between 1 and 5"),
+  feedback: z.string().min(20, "Feedback must be at least 20 characters"),
+});
+
+type FormData = z.infer<typeof contactSchema> | 
+                z.infer<typeof subscribeSchema> | 
+                z.infer<typeof feedbackSchema> |
+                { email: string };
+
+// Example async submit handlers
+const mockSubmit = async (data: FormData) => {
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+  console.log("Form submitted:", data);
+};
+
+// Contact Form Story
+export const ContactForm = () => (
+  <div className="max-w-md mx-auto p-6 bg-gray-800 rounded-lg">
+    <h2 className="text-2xl text-white mb-6">Contact Us</h2>
+    <GenericForm
+      formSchema={contactSchema}
+      onSubmit={mockSubmit}
+      submitButtonText="Send Message"
+      fields={[
+        {
+          name: "name",
+          label: "Your Name",
+          type: "input",
+        },
+        {
+          name: "email",
+          label: "Email Address",
+          type: "input",
+          inputPattern: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+          title: "Please enter a valid email address",
+        },
+        {
+          name: "message",
+          label: "Your Message",
+          type: "textarea",
+        },
+      ]}
+    />
+  </div>
+);
+
+// Subscribe Form Story
+export const SubscribeForm = () => (
+  <div className="max-w-md mx-auto p-6 bg-gray-800 rounded-lg">
+    <h2 className="text-2xl text-white mb-6">Subscribe to Newsletter</h2>
+    <GenericForm
+      formSchema={subscribeSchema}
+      onSubmit={mockSubmit}
+      submitButtonText="Subscribe"
+      fields={[
+        {
+          name: "email",
+          label: "Email Address",
+          type: "input",
+          inputPattern: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+          title: "Please enter a valid email address",
+        },
+        {
+          name: "preferences",
+          label: "Newsletter Preferences",
+          type: "textarea",
+        },
+      ]}
+    />
+  </div>
+);
+
+// Feedback Form Story
+export const FeedbackForm = () => (
+  <div className="max-w-md mx-auto p-6 bg-gray-800 rounded-lg">
+    <h2 className="text-2xl text-white mb-6">Provide Feedback</h2>
+    <GenericForm
+      formSchema={feedbackSchema}
+      onSubmit={mockSubmit}
+      submitButtonText="Submit Feedback"
+      fields={[
+        {
+          name: "title",
+          label: "Feedback Title",
+          type: "input",
+        },
+        {
+          name: "rating",
+          label: "Rating (1-5)",
+          type: "input",
+          inputPattern: /^[1-5]$/,
+          title: "Please enter a number between 1 and 5",
+        },
+        {
+          name: "feedback",
+          label: "Detailed Feedback",
+          type: "textarea",
+        },
+      ]}
+    />
+  </div>
+);
+
+// Simple Form Story
+export const SimpleForm = () => (
+  <div className="max-w-md mx-auto p-6 bg-gray-800 rounded-lg">
+    <h2 className="text-2xl text-white mb-6">Quick Contact</h2>
+    <GenericForm
+      formSchema={z.object({
+        email: z.string().email("Invalid email address"),
+      })}
+      onSubmit={mockSubmit}
+      submitButtonText="Contact"
+      fields={[
+        {
+          name: "email",
+          label: "Email Address",
+          type: "input",
+          inputPattern: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+          title: "Please enter a valid email address",
+        },
+      ]}
+    />
+  </div>
+);

src/stories/components/InputField.stories.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { Meta, Story } from "@ladle/react";
+import InputField, { InputProps } from "../../components/UI/InputField.component";
+import { useForm, FieldValues } from "react-hook-form";
+
+export default {
+  title: "InputField",
+  component: InputField,
+} as Meta;
+
+// Wrapper component to provide form context
+const InputFieldWrapper = <T extends FieldValues>(props: Omit<InputProps<T>, "register">) => {
+  const { register } = useForm<T>();
+  return <InputField {...props} register={register} />;
+};
+
+const Template: Story<Omit<InputProps<any>, "register">> = (args) => (
+  <InputFieldWrapper {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  name: "defaultInput",
+  label: "Default Input",
+  htmlFor: "defaultInput",
+};
+
+export const Required = Template.bind({});
+Required.args = {
+  name: "requiredInput",
+  label: "Required Input",
+  htmlFor: "requiredInput",
+  isRequired: true,
+};
+
+export const WithPattern = Template.bind({});
+WithPattern.args = {
+  name: "emailInput",
+  label: "Email Input",
+  htmlFor: "emailInput",
+  inputPattern: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+  title: "Please enter a valid email address",
+};
+
+export const TextArea = Template.bind({});
+TextArea.args = {
+  name: "textArea",
+  label: "Text Area",
+  htmlFor: "textArea",
+  type: "textarea",
+};
+
+export const WithError = Template.bind({});
+WithError.args = {
+  name: "errorInput",
+  label: "Input with Error",
+  htmlFor: "errorInput",
+  error: "This field has an error",
+};