Fix footer entry point (#19)

* chore: export footer from entry point

* fix: explicit typing for footer subcomponent

Author: Emmanuel-Develops

src/components/footer/Footer.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Meta } from "@storybook/react";
 
-import Footer from "../footer";
+import { Footer } from "../footer";
 
 export default {
   title: "Components/Footer",

src/components/footer/Footer.tsx

@@ -1,15 +1,24 @@
 import React from "react";
+import FooterAbout, { FooterAboutProps } from "./FooterAbout";
+import FooterFeedback, { FooterFeedbackProps } from "./FooterFeedback";
+import { FooterSocials, FooterSocialsProps } from "./FooterSocials";
+import FooterPublic, { FooterPublicProps } from "./FooterPublic";
 import { FooterPartsPrimitiveProps } from "./types";
 
-interface FooterRootProps extends FooterPartsPrimitiveProps<HTMLDivElement> {
+export interface FooterRootProps extends FooterPartsPrimitiveProps<HTMLDivElement> {
   separator?: React.ReactElement;
 }
 
-export const Separator = () => (
+const Separator = () => (
   <div className="h-5 border xl:h-6 xl:border-2 border-custom-stroke hidden xl:block" />
 );
 
-const Footer = ({ children, className, separator, ...rest}: React.PropsWithChildren<FooterRootProps>) => {
+const Footer: React.FC<FooterRootProps> & {
+  About: React.FC<FooterAboutProps>;
+  Feedback: React.FC<FooterFeedbackProps>;
+  Socials: React.FC<FooterSocialsProps>;
+  Public: React.FC<FooterPublicProps>;
+} = ({ children, className, separator, ...rest}) => {
 
   const viewSeparator = separator ?? <Separator />;
 
@@ -28,12 +37,15 @@ const Footer = ({ children, className, separator, ...rest}: React.PropsWithChild
   };
 
   return (
-    <div>
-      <div className={`flex flex-col md:flex-row w-full justify-between sm:items-stretch md:items-center bg-white dark:bg-black gap-[20px] md:gap-[24px] mx-auto max-w-[1920px] p-2 ${className}`}>
-        {renderChildrenWithSeparator()}
-      </div>
+    <div className={`flex flex-col md:flex-row w-full justify-between sm:items-stretch md:items-center bg-white dark:bg-black gap-[20px] md:gap-[24px] mx-auto max-w-[1920px] p-2 ${className}`} {...rest}>
+      {renderChildrenWithSeparator()}
     </div>
   );
 };
 
-export default Footer;
+Footer.About = FooterAbout;
+Footer.Feedback = FooterFeedback;
+Footer.Socials = FooterSocials;
+Footer.Public = FooterPublic;
+
+export { Footer, Separator };

src/components/footer/FooterAbout.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { FooterPartsPrimitiveProps } from "./types"
 
-interface FooterAboutProps extends FooterPartsPrimitiveProps<HTMLDivElement> {
+export interface FooterAboutProps extends FooterPartsPrimitiveProps<HTMLDivElement> {
   entityLink?: string
   entityName?: string
 }

src/components/footer/FooterFeedback.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { FooterPartsPrimitiveProps } from "./types";
 
-interface FooterFeedbackProps extends FooterPartsPrimitiveProps<HTMLDivElement> {
+export interface FooterFeedbackProps extends FooterPartsPrimitiveProps<HTMLDivElement> {
   feedbackLink: string;
 }
 

src/components/footer/FooterPublic.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { FooterPartsPrimitiveProps } from "./types";
 
-interface FooterPublicProps extends FooterPartsPrimitiveProps<HTMLAnchorElement> {
+export interface FooterPublicProps extends FooterPartsPrimitiveProps<HTMLAnchorElement> {
   dshboardLink: string;
 }
 

src/components/footer/FooterSocials.tsx

@@ -20,7 +20,7 @@ type SocialMediaProps =
       icon: React.ReactElement;
     }>;
 
-interface FooterSocialsProps extends FooterPartsPrimitiveProps<HTMLDivElement> {
+export interface FooterSocialsProps extends FooterPartsPrimitiveProps<HTMLDivElement> {
   platforms: SocialMediaProps[];
 }
 

src/components/footer/index.tsx

@@ -1,27 +1 @@
-import React from "react";
-import FooterRoot from "./Footer";
-import FooterAbout from "./FooterAbout";
-import FooterFeedback from "./FooterFeedback";
-import FooterLegal from "./FooterLegal";
-import { FooterSocials } from "./FooterSocials";
-import FooterPublic from "./FooterPublic";
-
-const Footer: typeof FooterRoot & {
-  About: typeof FooterAbout;
-  Feedback: typeof FooterFeedback;
-  Legal: typeof FooterLegal;
-  Socials: typeof FooterSocials;
-  Public: typeof FooterPublic;
-} = (props) => {
-  return <FooterRoot {...props} />;
-};
-
-// Attach subcomponents as properties
-
-Footer.About = FooterAbout;
-Footer.Feedback = FooterFeedback;
-Footer.Legal = FooterLegal;
-Footer.Socials = FooterSocials;
-Footer.Public = FooterPublic;
-
-export default Footer;
+export * from './Footer';

src/icons/DiscordIcon.tsx

@@ -17,8 +17,8 @@ const DiscordIcon = ({
     {...props}
   >
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M14.9997 0.916504C11.652 0.916504 9.12018 1.48117 6.34634 2.84334C6.1873 2.9212 6.05422 3.04346 5.96318 3.19534C4.05834 6.37067 0.33301 15.2092 0.33301 25.6665C0.332528 25.9044 0.424568 26.1332 0.589676 26.3045C2.33501 28.103 3.92084 29.4267 5.62218 30.3617C7.33268 31.3003 9.11468 31.8228 11.223 32.0758C11.3988 32.0972 11.577 32.0672 11.7361 31.9894C11.8952 31.9117 12.0284 31.7895 12.1195 31.6377L13.0545 30.0757C11.6923 29.599 10.3008 28.9665 9.44284 28.1085C9.31158 27.9816 9.2069 27.8298 9.13492 27.662C9.06293 27.4943 9.02509 27.3138 9.02359 27.1312C9.02209 26.9487 9.05697 26.7676 9.12618 26.5987C9.1954 26.4297 9.29757 26.2763 9.42673 26.1472C9.55589 26.0182 9.70946 25.9161 9.87848 25.8471C10.0475 25.778 10.2286 25.7433 10.4111 25.745C10.5937 25.7467 10.7741 25.7847 10.9418 25.8568C11.1096 25.929 11.2612 26.0338 11.388 26.1652C11.8555 26.6327 12.9537 27.1643 14.5047 27.6612C15.7862 27.9967 18.0173 28.4165 20.4997 28.4165C22.982 28.4165 25.2132 27.9967 26.4947 27.6612C28.0457 27.1643 29.1438 26.6308 29.6113 26.1652C29.7372 26.0301 29.889 25.9217 30.0577 25.8466C30.2264 25.7714 30.4084 25.731 30.5931 25.7278C30.7777 25.7245 30.9611 25.7585 31.1323 25.8276C31.3035 25.8968 31.459 25.9997 31.5896 26.1303C31.7201 26.2608 31.8231 26.4164 31.8922 26.5876C31.9614 26.7588 31.9953 26.9422 31.9921 27.1268C31.9888 27.3114 31.9484 27.4935 31.8733 27.6622C31.7981 27.8308 31.6898 27.9826 31.5547 28.1085C30.6985 28.9665 29.307 29.599 27.943 30.0757L28.8798 31.6377C28.9707 31.7898 29.1038 31.9124 29.2629 31.9905C29.422 32.0686 29.6004 32.0989 29.7763 32.0777C31.8847 31.8228 33.6667 31.3003 35.3772 30.3617C37.0785 29.4267 38.6643 28.103 40.4078 26.3045C40.5736 26.1335 40.6663 25.9047 40.6663 25.6665C40.6663 15.2092 36.941 6.37067 35.0362 3.19534C34.9451 3.04346 34.812 2.9212 34.653 2.84334C31.8792 1.48117 29.3473 0.916504 25.9997 0.916504C25.8074 0.91665 25.62 0.977275 25.464 1.0898C25.3081 1.20232 25.1914 1.36105 25.1307 1.5435L24.5147 3.3915C23.2175 2.97154 21.8631 2.75508 20.4997 2.74984C19.1362 2.75508 17.7818 2.97154 16.4847 3.3915L15.8687 1.5435C15.8079 1.36105 15.6913 1.20232 15.5353 1.0898C15.3794 0.977275 15.192 0.91665 14.9997 0.916504ZM16.833 17.8748C16.833 19.6458 15.601 21.0832 14.083 21.0832C12.565 21.0832 11.333 19.6458 11.333 17.8748C11.333 16.1038 12.565 14.6665 14.083 14.6665C15.601 14.6665 16.833 16.1038 16.833 17.8748ZM26.9163 21.0832C28.4343 21.0832 29.6663 19.6458 29.6663 17.8748C29.6663 16.1038 28.4343 14.6665 26.9163 14.6665C25.3983 14.6665 24.1663 16.1038 24.1663 17.8748C24.1663 19.6458 25.3983 21.0832 26.9163 21.0832Z"
       fill="currentColor"
     />

src/index.ts

@@ -1 +1,2 @@
-export * from './components/Button';
+export * from './components/button';
+export * from './components/footer';