feat: component header in progress

.storybook/preview.ts

@@ -1,10 +1,9 @@
 import type { Preview } from "@storybook/react";
 import "../src/index.css";
+import "./themes.css"
 
 import { withThemeByClassName } from "@storybook/addon-themes";
 
-
-
 const preview: Preview = {
   tags: ['autodocs'],
   parameters: {
@@ -14,12 +13,20 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    backgrounds: {
+      default: 'dark',
+      values: [
+        {
+          name: 'dark',
+          value: '#0f0f0f',
+        },
+      ],
+    },
   },
-
   decorators: [withThemeByClassName({
     themes: {
-      light: 'light',
-      dark: 'dark',
+      light: 'theme-light',
+      dark: 'theme-dark',
     },
     defaultTheme: 'dark',
   })]

.storybook/themes.css

@@ -0,0 +1,3 @@
+.theme-dark {
+    background-color: #0f0f0f;
+}

src/components/Header/Header.tsx

@@ -1,12 +1,12 @@
-import imageHeader from "@/assets/Group 1.png"
+import logoFrontEnd from "@/assets/frontend-day.svg"
 import { Separator } from "@/components/ui/separator"
 import { HeaderProps } from "./types";
 
 
 export const Header = ({ label }: HeaderProps) => {
   return (
     <div className="flex items-center justify-center flex-col gap-5">
-      <img src={imageHeader} />
+      <img src={logoFrontEnd} />
       <p className="text-2xl text-white font-bold">{label}</p>
       <Separator className="w-20 h-1 rounded-2xl bg-[#7c3aed]" />
     </div>

src/components/SpeakerCard/SpeakerCard.stories.tsx

@@ -15,6 +15,8 @@ const meta: Meta<typeof SpeakerCard> = {
     name: { control: "text" },
     role: { control: "text" },
     onChangeMode: { action: "mode changed" },
+    hour: { control: "text" },
+    isSaved: { control: "boolean" },
   },
 } satisfies Meta<typeof SpeakerCard>;
 
@@ -28,5 +30,7 @@ export const Default: Story = {
     imageUrl: "",
     name: "Abraão",
     role: "Developer",
+    hour: "10:00",
+    isSaved: true,
   },
 };

src/components/SpeakerCard/SpeakerCard.test.tsx

@@ -11,6 +11,8 @@ test("renders SpeakerCard", () => {
       role="Developer"
       tags={["Frontend", "Convida", "Comunidade"]}
       label="Typescript morreu?"
+      hour="10:00"
+      isSaved={true}
     />
   );
   const element = getByText(/Typescript morreu?/i);

src/components/SpeakerCard/SpeakerCard.tsx

@@ -3,7 +3,7 @@ import { ProfileCard } from "../ProfileCard";
 import { Badge } from "../ui/badge";
 import { Card } from "../ui/card";
 import { SpeakerCardProps } from "./types";
-import { Togglebutton } from "../Togglebutton";
+import { ToggleButton } from "../ToggleButton";
 
 export const SpeakerCard = ({
   label,
@@ -13,32 +13,39 @@ export const SpeakerCard = ({
   name,
   role,
   hour,
+<<<<<<< HEAD
+=======
+  isSaved,
+>>>>>>> be0c5b7783381cf9f53e4a934126eeefeddc806a
   onChangeMode,
 }: SpeakerCardProps) => {
+  const handleToggleSave = () => {
+    onChangeMode(!isSaved);
+  };
+
   return (
+<<<<<<< HEAD
     <Card className="p-5 max-w-[500px] flex items-start flex-col justify-center bg-transparent border gap-4 border-[#D9B1FF] rounded-lg ">
+=======
+    <Card className="max-w-[500px] p-5 w-full flex items-start flex-col justify-center bg-transparent border gap-4 border-[#D9B1FF] rounded-lg ">
+>>>>>>> be0c5b7783381cf9f53e4a934126eeefeddc806a
       <div className="flex gap-3 justify-between items-start w-full">
         <span className="text-[#A190B2] text-sm">{hour}</span>
         <h1 className="text-[#E6D5F7] mt-0 pt-0 w-full text-wrap whitespace-normal text-base break-words">
           {label}
         </h1>
-        <Togglebutton initialMode={true} onModeChange={onChangeMode} />{" "}
+        <ToggleButton isSaved={isSaved} onToggle={handleToggleSave} />
       </div>
       <div className="flex gap-2 w-full justify-start overflow-x-auto scrollbar-cards [&::-webkit-scrollbar]:hidden">
-        {tags.map((tag: string) => (
+        {tags.map((tag: string, index) => (
           <Badge
+            key={index}
             variant="outline"
             className="bg-white text-[#A855F7] font-thin rounded-lg"
           >
             {tag}
           </Badge>
         ))}
-        <Badge
-          variant="outline"
-          className="bg-white text-[#A855F7] font-thin rounded-lg"
-        >
-          Carreira
-        </Badge>
       </div>
       <div className=" flex-cols p-2  w-full">
         <Separator className="w-full h-[0.3px] mb-4 bg-[#D9B1FF] rounded-xl" />

src/components/SpeakerCard/types.ts

@@ -4,5 +4,9 @@ export interface SpeakerCardProps extends ProfileCardProps {
     label: string
     tags: string[]
     hour: string
+<<<<<<< HEAD
+=======
+    isSaved: boolean
+>>>>>>> be0c5b7783381cf9f53e4a934126eeefeddc806a
     onChangeMode: (mode: boolean) => void
 }

src/components/SpeakerSection/SpeakerSection.stories.tsx

@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { SpeakerSection } from "./SpeakerSection";
+
+export type Story = StoryObj<typeof SpeakerSection>;
+
+const meta: Meta<typeof SpeakerSection> = {
+  title: "Components/SpeakerSection",
+  tags: ["autodocs"],
+  component: SpeakerSection,
+  argTypes: {
+    handleCardModeChange: { action: "handleCardModeChange" },
+    liveTalk: { control: "object" },
+    savedCardIds: { control: undefined },
+    sectionTitle: { control: "text" },
+  },
+} satisfies Meta<typeof SpeakerSection>;
+
+export default meta;
+
+export const FrontEndCE: Story = {
+  args: {
+    liveTalk: {
+      id: 1,
+      hour: "10:00",
+      title: "Como se tornar um desenvolvedor Front-End",
+      tags: ["Javascript", "React", "Carreira"],
+      room: "Test Room",
+      speaker: {
+        image: "test.jpg",
+        title: "Jean Livino",
+        role: "CEO Hackaton",
+        company: "FrontEnd CE",
+        bio: "Test bio",
+        social_link: "https://test.com",
+        id: 1,
+      },
+    },
+    savedCardIds: [],
+    sectionTitle: "Front-End CE",
+  },
+};
+
+export const Comunidade: Story = {
+  args: {
+    liveTalk: {
+      id: 1,
+      hour: "11:00",
+      title: "Como entrar na comunidade!",
+      tags: ["Javascript", "React", "Carreira"],
+      room: "Test Room",
+      speaker: {
+        image: "test.jpg",
+        title: "Andressa Morais",
+        role: "CEO Hackaton",
+        company: "FrontEnd CE",
+        bio: "Test bio",
+        social_link: "https://test.com",
+        id: 1,
+      },
+    },
+    savedCardIds: [],
+    sectionTitle: "Comunidade",
+  },
+};
+
+export const Convida: Story = {
+  args: {
+    liveTalk: {
+      id: 1,
+      hour: "11:00",
+      title: "Fui convidado para um evento, e agora?",
+      tags: ["Javascript", "React", "Carreira"],
+      room: "Test Room",
+      speaker: {
+        image: "test.jpg",
+        title: "Bruno Oliveira",
+        role: "CEO Hackaton",
+        company: "FrontEnd CE",
+        bio: "Test bio",
+        social_link: "https://test.com",
+        id: 1,
+      },
+    },
+    savedCardIds: [],
+    sectionTitle: "Convida",
+  },
+};

src/components/SpeakerSection/SpeakerSection.test.tsx

@@ -0,0 +1,24 @@
+import { render } from '@testing-library/react';
+import { SpeakerSection } from './SpeakerSection';
+
+test('renders SpeakerComponent', () => {
+  const liveTalk = {
+    id: 1,
+    hour: '10:00',
+    title: 'Test Talk',
+    tags: ['tag1', 'tag2'],
+    room: 'Test Room',
+    speaker: {
+      image: 'test.jpg',
+      title: 'Test Speaker',
+      role: 'Test Role',
+      company: 'Test Company',
+      bio: 'Test Bio',
+      social_link: 'https://test.com',
+      id: 1,
+    },
+  };
+  const { getByText } = render(<SpeakerSection handleCardModeChange={() => {}} liveTalk={liveTalk} savedCardIds={[]} sectionTitle="Test Section" />);
+  const element = getByText(/Test Section/i);
+  expect(element).toBeInTheDocument();
+});

src/components/SpeakerSection/SpeakerSection.tsx

@@ -0,0 +1,32 @@
+import { SpeakerCard } from "@/components/SpeakerCard";
+import { Button } from "@/components/ui/button";
+import { SpeakerSectionProps } from "./types";
+
+export const SpeakerSection = ({ sectionTitle, liveTalk, savedCardIds, handleCardModeChange }: SpeakerSectionProps) => {
+
+  return (
+    <section className="w-full">
+      {liveTalk && (
+        <div className="flex flex-col items-center w-full">
+          <Button className="max-w-[500px] w-full mt-8 bg-[#261537] justify-start pl-5 text-base font-semibold hover:bg-[#261537] text-[#E6D5F7]">
+            {sectionTitle}
+          </Button>
+          <div className="flex flex-col items-center gap-6 mt-6 w-full">
+            <SpeakerCard
+              isSaved={savedCardIds.includes(liveTalk.id)}
+              onChangeMode={(mode) => handleCardModeChange(liveTalk.id, mode)}
+              key={liveTalk.id}
+              hour={liveTalk.hour}
+              label={liveTalk.title}
+              tags={liveTalk.tags}
+              imageUrl={liveTalk.speaker.image}
+              imageFallback={liveTalk.speaker.title[0]}
+              name={liveTalk.speaker.title}
+              role={liveTalk.speaker.role}
+            />
+          </div>
+        </div>
+      )}
+    </section>
+  );
+};

src/components/SpeakerSection/index.ts

@@ -0,0 +1,3 @@
+import { SpeakerSection } from "./SpeakerSection"
+
+export { SpeakerSection }

src/components/SpeakerSection/types.ts

@@ -0,0 +1,8 @@
+import { Palestra } from "@/api/types";
+
+export interface SpeakerSectionProps {
+  liveTalk: Palestra | undefined;
+  savedCardIds: number[];
+  sectionTitle: string;
+  handleCardModeChange: (cardId: number, newMode: boolean) => void;
+}

src/components/ToggleButton/ToggleButton.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ToggleButton } from "./ToggleButton";
+import { action } from "@storybook/addon-actions";
+
+export type Story = StoryObj<typeof ToggleButton>;
+
+const meta: Meta<typeof ToggleButton> = {
+  title: "Components/ToggleButton",
+  component: ToggleButton,
+  argTypes: {
+    isSaved: { control: "boolean" },
+    onToggle: { action: "mode changed" },
+  },
+} satisfies Meta<typeof ToggleButton>;
+
+export default meta;
+
+export const PlusButton: Story = {
+  args: {
+    isSaved: true,
+    onToggle: action("mode changed"),
+  },
+};
+
+export const MinusButton: Story = {
+  args: {
+    isSaved: false,
+    onToggle: action("mode changed"),
+  },
+};

src/components/ToggleButton/ToggleButton.test.tsx

@@ -0,0 +1,8 @@
+import { render } from '@testing-library/react';
+import { ToggleButton } from './ToggleButton';
+
+test('renders Togglebutton', () => {
+  const { getByTestId } = render(<ToggleButton isSaved={true} onToggle={() => (true)} />);
+  const element = getByTestId("toggleButton");
+  expect(element).toBeInTheDocument();
+});

src/components/ToggleButton/ToggleButton.tsx

@@ -0,0 +1,14 @@
+import { CircleMinus, CirclePlus } from "lucide-react";
+
+type ToggleButtonProps = {
+  isSaved: boolean;
+  onToggle: (isSaved: boolean) => void;
+};
+
+export const ToggleButton = ({ isSaved, onToggle }: ToggleButtonProps) => {
+  return (
+    <div data-testid="toggleButton" onClick={() => onToggle(!isSaved)}>
+      {isSaved ? ( <CircleMinus color="#ffffff" /> ) : ( <CirclePlus color="#ffffff" /> )}
+    </div>
+  );
+};

src/components/ToggleButton/index.ts

@@ -0,0 +1,3 @@
+import { ToggleButton } from "./ToggleButton"
+
+export { ToggleButton }

src/components/ToggleButton/types.ts

@@ -0,0 +1,4 @@
+export type ToggleButtonProps = {
+  isSaved: boolean;
+  onToggle: (isSaved: boolean) => void;
+};