feat: release more components

.github/ISSUE_TEMPLATE/new-component-ticket.md

@@ -3,25 +3,28 @@ name: New Component Ticket [HACKTOBERFEST]
 about: Create a new animated component task for Hacktoberfest
 title: Component Name
 labels: hacktoberfest
-assignees: ''
-
+assignees: ""
 ---
 
 ### Description
+
 Create the component as shown in the video attached below.
 
 ### Animation Preview
+
 - Screenshot/Video:
 
 [Upload file here]
 
-
 > [!NOTE]  
 > Please refer to the **Animata contributing guidelines** available [here](https://www.animata.design/docs/contributing) for rules on how to contribute to the project. Let us know in the comments if you’re working on this issue, and feel free to ask any questions!
 
 ### Requirements
+
 1. Create a new animated component that matches the provided design.
 2. Add example usage of the component in the documentation or storybook.
+3. **Add credits** for any resources, references, or assets used, as specified in the **Additional Resources** section.
+
 
 <details>
   <summary>
@@ -36,12 +39,14 @@ Create the component as shown in the video attached below.
 
 > [!IMPORTANT]  
 > To ensure more contributors have the opportunity to participate, we kindly request that:
+>
 > - Each contributor submits only **one pull request** related to this issue.
 > - If you're interested in working on this issue, please comment below. We will assign the issue on a **first-come, first-served basis**.
 
 ---
 
 ### Additional Resources
+
 <!-- Add references and credits here -->
 
 ---

.github/workflows/deploy.yml

@@ -43,12 +43,21 @@ jobs:
           NEXT_PUBLIC_POSTHOG_HOST: ${{ vars.NEXT_PUBLIC_POSTHOG_HOST }}
         run: yarn build
       - name: Deploy to Cloudflare Pages
-        uses: cloudflare/pages-action@v1
+        id: deploy
+        uses: cloudflare/wrangler-action@v3
         with:
           apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          projectName: animata
-          directory: out
+          command: pages deploy out --project-name=animata --branch=dev-${{ github.event.pull_request.head.ref }}
           gitHubToken: ${{ secrets.GITHUB_TOKEN }}
-          branch: ${{ github.event.pull_request.head.ref }}
-          wranglerVersion: "3"
+      - name: Comment Deployment URL
+        uses: actions/github-script@v6
+        with:
+          github-token: ${{secrets.GITHUB_TOKEN}}
+          script: |
+            await github.rest.issues.createComment({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body: `🚀 Preview deployed to: ${{ steps.deploy.outputs.deployment-url }}`
+            })

animata/accordion/faq.stories.tsx

@@ -0,0 +1,53 @@
+import Faq from "@/animata/accordion/faq";
+import { Meta, StoryObj } from "@storybook/react";
+
+const faqData = [
+  {
+    id: 1,
+    question: "How late does the internet close?",
+    answer: "The internet doesn't close. It's available 24/7.",
+    icon: "❤️",
+    iconPosition: "right",
+  },
+  {
+    id: 2,
+    question: "Do I need a license to browse this website?",
+    answer: "No, you don't need a license to browse this website.",
+  },
+  {
+    id: 3,
+    question: "What flavour are the cookies?",
+    answer: "Our cookies are digital, not edible. They're used for website functionality.",
+  },
+  {
+    id: 4,
+    question: "Can I get lost here?",
+    answer: "Yes, but we do have a return policy",
+    icon: "⭐",
+    iconPostion: "left",
+  },
+  {
+    id: 5,
+    question: "What if I click the wrong button?",
+    answer: "Don't worry, you can always go back or refresh the page.",
+  },
+];
+
+const meta = {
+  title: "Accordion/Faq",
+  component: Faq,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+} satisfies Meta<typeof Faq>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    data: faqData,
+  },
+};

animata/accordion/faq.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import React, { useState } from "react";
+import { motion } from "framer-motion";
+
+import * as Accordion from "@radix-ui/react-accordion";
+
+interface FAQItem {
+  id: number;
+  question: string;
+  answer: string;
+  icon?: string;
+  iconPosition?: string;
+}
+
+interface FaqSectionProps {
+  data: FAQItem[];
+}
+
+export default function FaqSection({ data }: FaqSectionProps) {
+  const [openItem, setOpenItem] = useState<string | null>(null);
+
+  return (
+    <div
+      className="mx-auto max-w-md rounded-lg bg-white p-4"
+      style={{ maxWidth: "700px", minWidth: "700px" }}
+    >
+      <div className="mb-4 text-sm text-gray-500">Every day, 9:01 AM</div>
+
+      <Accordion.Root
+        type="single"
+        collapsible
+        value={openItem || ""}
+        onValueChange={(value) => setOpenItem(value)}
+      >
+        {data.map((item) => (
+          <Accordion.Item value={item.id.toString()} key={item.id} className="mb-2">
+            <Accordion.Header>
+              <Accordion.Trigger
+                className="flex w-full items-center justify-start gap-x-4"
+                style={{ width: "100%" }}
+              >
+                <div
+                  className="relative flex items-center space-x-2 rounded-xl bg-gray-100 p-2 hover:bg-[#E0F7FA]"
+                  style={{
+                    backgroundColor: openItem === item.id.toString() ? "#E0F7FA" : "",
+                  }}
+                >
+                  {item.icon && (
+                    <span
+                      className={`absolute bottom-6 ${
+                        item.iconPosition === "right" ? "right-0" : "left-0"
+                      }`}
+                      style={{
+                        transform: item.iconPosition === "right" ? "rotate(7deg)" : "rotate(-4deg)",
+                      }}
+                    >
+                      {item.icon}
+                    </span>
+                  )}
+                  <span className="font-medium text-gray-700">{item.question}</span>
+                </div>
+
+                <span className="cursor-pointer text-lg font-bold text-gray-400">
+                  {openItem === item.id.toString() ? (
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      fill="#7CB9E8"
+                      className="size-6"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm3 10.5a.75.75 0 0 0 0-1.5H9a.75.75 0 0 0 0 1.5h6Z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                  ) : (
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      fill="currentColor"
+                      className="size-6"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25ZM12.75 9a.75.75 0 0 0-1.5 0v2.25H9a.75.75 0 0 0 0 1.5h2.25V15a.75.75 0 0 0 1.5 0v-2.25H15a.75.75 0 0 0 0-1.5h-2.25V9Z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                  )}
+                </span>
+              </Accordion.Trigger>
+            </Accordion.Header>
+            <Accordion.Content asChild forceMount style={{ display: "block" }}>
+              <motion.div
+                initial="collapsed"
+                animate={openItem === item.id.toString() ? "open" : "collapsed"}
+                variants={{
+                  open: { opacity: 1, height: "auto" },
+                  collapsed: { opacity: 0, height: 0 },
+                }}
+                transition={{ duration: 0.4 }}
+                style={{ width: "100%", overflow: "hidden" }}
+              >
+                <div
+                  className="ml-7 mt-1 rounded-lg p-3 text-white md:ml-16"
+                  style={{
+                    borderRadius: "12px",
+                    textAlign: "left",
+                    width: "100%",
+                  }}
+                >
+                  <div className="relative max-w-xs rounded-2xl bg-blue-500 px-4 py-2 text-white">
+                    {item.answer}
+                    <div className="absolute bottom-0 right-0 h-0 w-0 border-l-[10px] border-t-[10px] border-l-transparent border-t-blue-500"></div>
+                  </div>
+                </div>
+              </motion.div>
+            </Accordion.Content>
+          </Accordion.Item>
+        ))}
+      </Accordion.Root>
+    </div>
+  );
+}

animata/button/animated-follow-button.stories.tsx

@@ -0,0 +1,72 @@
+import AnimatedFollowButton from "@/animata/button/animated-follow-button";
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof AnimatedFollowButton> = {
+  title: "Button/Animated Follow Button",
+  component: AnimatedFollowButton,
+  parameters: { layout: "centered" },
+  argTypes: {
+    initialText: { control: "text" },
+    changeText: { control: "text" },
+    className: { control: "text" },
+    changeTextClassName: { control: "text" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    initialText: "Follow",
+    changeText: "Following!",
+    className: "h-16 bg-green-100 text-green-700 flex rounded-full items-center justify-center",
+    changeTextClassName: "h-16 bg-green-700 text-green-100 rounded-full text-white flex items-center justify-center",
+  },
+  render: (args) => (
+    <div className="flex h-40 items-center justify-center">
+      <AnimatedFollowButton {...args} />
+    </div>
+  ),
+};
+
+export const DifferentAnimations: Story = {
+  args: {},
+  render: () => {
+    const buttons = [
+      {
+        initialText: "Default",
+        changeText: "Up To Down",
+        animationType: "up-to-down" as const,
+        color: "blue",
+      },
+      {
+        initialText: "Click Me",
+        changeText: "Down To Up",
+        animationType: "down-to-up" as const,
+        color: "zinc",
+      },
+      {
+        initialText: "Click Me",
+        changeText: "Zoom In",
+        animationType: "zoom-in" as const,
+        color: "red",
+      },
+    ];
+
+    return (
+      <div className="grid grid-cols-3 gap-6 h-60 w-full items-center justify-center">
+        {buttons.map(({ initialText, changeText, animationType, color }, idx) => (
+          <AnimatedFollowButton
+            key={idx}
+            className={`h-16 flex items-center justify-center rounded-xl bg-${color}-100 text-${color}-600`}
+            changeTextClassName={`h-16 bg-${color}-600 text-${color}-100 rounded-xl text-white flex items-center justify-center`}
+            initialText={<span className="inline-flex items-center">{initialText}</span>}
+            changeText={<span className="inline-flex items-center">{changeText}</span>}
+            animationType={animationType}
+          />
+        ))}
+      </div>
+    );
+  },
+};