feat: some changes for retrofunding app (#120)

* chore: added briefcase, collection and home icons

* chore: added retrofunding logos and export gitcoin-ui/logos

* chore: moved colors to /theme and export gitcoin-ui/theme

* chore: implemented CreateButton

* chore: implemented Typography component

* chore: refactored SideNavItem to have items as optional

* chore: refactored Navbar to have text as optional

Author: hussedev

package.json

@@ -43,6 +43,11 @@
       "import": "./dist/icons.js",
       "require": "./dist/icons.js"
     },
+    "./logos": {
+      "types": "./dist/logos.d.ts",
+      "import": "./dist/logos.js",
+      "require": "./dist/logos.js"
+    },
     "./lib": {
       "types": "./dist/lib.d.ts",
       "import": "./dist/lib.js",
@@ -58,6 +63,11 @@
       "import": "./dist/types.js",
       "require": "./dist/types.js"
     },
+    "./theme": {
+      "types": "./dist/theme.d.ts",
+      "import": "./dist/theme.js",
+      "require": "./dist/theme.js"
+    },
     "./application": {
       "types": "./dist/application.d.ts",
       "import": "./dist/application.js",

src/assets/icons/heroicons.ts

@@ -1,6 +1,7 @@
 // Status Icons
 import { InformationCircleIcon } from "@heroicons/react/outline";
 import {
+  BriefcaseIcon,
   CalendarIcon,
   CashIcon,
   CheckCircleIcon as CheckSolidIcon,
@@ -9,9 +10,11 @@ import {
   ChevronRightIcon,
   ClipboardListIcon,
   ClockIcon,
+  CollectionIcon,
   DocumentDuplicateIcon,
   ExclamationCircleIcon,
   GlobeAltIcon as GlobeIcon,
+  HomeIcon,
   LinkIcon,
   PencilIcon,
   QuestionMarkCircleIcon as SolidQuestionMarkCircleIcon,
@@ -25,19 +28,22 @@ import {
 } from "@heroicons/react/solid";
 
 enum HeroiconsType {
+  BRIEFCASE = "briefcase",
   CALENDAR = "calendar",
   CASH = "cash",
   CHECK = "check",
   CHEVRON_LEFT = "chevron-left",
   CLIPBOARD_LIST = "clipboardList",
   CLOCK = "clock",
+  COLLECTION = "collection",
   DOCUMENT_DUPLICATE = "document-duplicate",
-  PENCIL = "pencil",
   EXCLAMATION_CIRCLE = "exclamation-circle",
-  LINK = "link",
-  PLUS = "plus",
   GLOBE = "globe",
+  HOME = "home",
   INFORMATION_CIRCLE = "informationCircle",
+  LINK = "link",
+  PENCIL = "pencil",
+  PLUS = "plus",
   SOLID_CHECK = "solid-check",
   SOLID_QUESTION_MARK_CIRCLE = "questionMarkCircle",
   SOLID_X = "solid-x",
@@ -49,18 +55,21 @@ enum HeroiconsType {
 }
 
 const heroiconsComponents: Record<HeroiconsType, React.FC<React.SVGProps<SVGSVGElement>>> = {
+  briefcase: BriefcaseIcon,
   calendar: CalendarIcon,
   cash: CashIcon,
   check: CheckIcon,
   "chevron-left": ChevronLeftIcon,
   clipboardList: ClipboardListIcon,
   clock: ClockIcon,
+  collection: CollectionIcon,
   "document-duplicate": DocumentDuplicateIcon,
-  pencil: PencilIcon,
   "exclamation-circle": ExclamationCircleIcon,
-  informationCircle: InformationCircleIcon,
   globe: GlobeIcon,
+  informationCircle: InformationCircleIcon,
+  home: HomeIcon,
   link: LinkIcon,
+  pencil: PencilIcon,
   plus: PlusIcon,
   questionMarkCircle: SolidQuestionMarkCircleIcon,
   "solid-check": CheckSolidIcon,
@@ -77,18 +86,22 @@ const heroIcons = Object.keys(heroiconsComponents).sort((a, b) =>
 ) as HeroiconsType[];
 
 export {
+  BriefcaseIcon,
   CalendarIcon,
   CheckSolidIcon,
   CheckIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
   ClipboardListIcon,
   ClockIcon,
+  CollectionIcon,
   DocumentDuplicateIcon,
   ExclamationCircleIcon,
-  InformationCircleIcon,
   GlobeIcon,
+  HomeIcon,
+  InformationCircleIcon,
   LinkIcon,
+  PencilIcon,
   PlusIcon,
   SolidQuestionMarkCircleIcon,
   SparklesIcon,

src/assets/index.ts

@@ -1,2 +1,3 @@
 export * from "./icons";
 export * from "./images";
+export * from "./logos";

src/assets/logos/index.ts

@@ -0,0 +1,6 @@
+export * from "./builder";
+export * from "./explorer";
+export * from "./gitcoin";
+export * from "./grantsStack";
+export * from "./manager";
+export * from "./retrofunding";

src/assets/logos/retrofunding/index.ts

@@ -1,4 +1,5 @@
+import RetrofundingLogoLockup from "./retrofundingLockup.svg?react";
 import RetrofundingLogoWordmark from "./retrofundingWordmark.svg?react";
 import RetrofundingVoteLogoWordmark from "./voteWordmark.svg?react";
 
-export { RetrofundingLogoWordmark, RetrofundingVoteLogoWordmark };
+export { RetrofundingLogoLockup, RetrofundingLogoWordmark, RetrofundingVoteLogoWordmark };

src/assets/logos/retrofunding/retrofundingLockup.svg

@@ -0,0 +1,44 @@
+import { action } from "@storybook/addon-actions";
+import { Meta, StoryObj } from "@storybook/react";
+
+import { CreateButton } from "./CreateButton";
+
+const onButtonClick = action("Button clicked!");
+
+const meta: Meta<typeof CreateButton> = {
+  title: "Features/RetroFunding/Components/CreateButton",
+  component: CreateButton,
+  args: {
+    children: "Create new program",
+    onClick: () => onButtonClick("button clicked"),
+  },
+  argTypes: {
+    variant: {
+      control: {
+        type: "select",
+        options: ["program", "round"],
+      },
+    },
+    className: {
+      control: "text",
+    },
+  },
+} satisfies Meta<typeof CreateButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof CreateButton>;
+
+export const Default: Story = {
+  args: {
+    onClick: () => onButtonClick("program button clicked"),
+  },
+};
+
+export const Round: Story = {
+  args: {
+    variant: "round",
+    children: "Create new round",
+    onClick: () => onButtonClick("round button clicked"),
+  },
+};

src/assets/logos/retrofunding/voteWordmark.svg

@@ -0,0 +1,40 @@
+"use client";
+
+import { tv, VariantProps } from "tailwind-variants";
+
+import { cn } from "@/lib";
+import { Icon, IconType } from "@/primitives/Icon";
+
+const variants = tv({
+  base: "flex h-20 w-full items-center gap-2 rounded-2xl p-6 font-ui-sans text-2xl font-medium",
+  variants: {
+    variant: {
+      program: "bg-moss-50",
+      round: "bg-purple-50",
+    },
+  },
+  defaultVariants: {
+    variant: "program",
+  },
+});
+
+export interface CreateButtonProps extends VariantProps<typeof variants> {
+  className?: string;
+  children: string;
+  onClick?: () => void;
+}
+
+export const CreateButton = ({
+  variant,
+  children = "Create new program",
+  onClick,
+  className,
+}: CreateButtonProps) => {
+  const styles = variants({ variant });
+  return (
+    <button className={cn(styles, className)} onClick={onClick} value={children}>
+      <Icon type={IconType.PLUS} />
+      {children}
+    </button>
+  );
+};

src/components/CreateButton/CreateButton.stories.tsx

@@ -0,0 +1 @@
+export * from "./CreateButton";

src/components/CreateButton/CreateButton.tsx

@@ -39,12 +39,12 @@ export const SideNav = ({
 
   return (
     <div className={cn("relative flex flex-col gap-4", className)}>
-      {items.map((item, index) => {
+      {items?.map((item, index) => {
         const isActive = item.id === activeId;
 
         return (
           <div key={`sidenav-item-${index}`}>
-            {item.items.length > 0 ? (
+            {item.items && item.items.length > 0 ? (
               <AccordionItem
                 item={item}
                 onClick={onClick}

src/components/CreateButton/index.ts

@@ -9,11 +9,11 @@ export interface SideNavItem {
   iconType?: IconType;
   id?: string;
   isSeparator?: boolean;
-  items: SideNavItem[];
+  items?: SideNavItem[];
 }
 
 export interface InternalSideNavProps {
-  items: SideNavItem[];
+  items?: SideNavItem[];
   onClick: (id: string | undefined) => void;
   activeId?: string;
   className?: string;

src/components/SideNav/SideNav.tsx

@@ -1,6 +1,6 @@
 import { Meta, ColorPalette, ColorItem, Title } from "@storybook/blocks";
 
-import { grantsStackUIKit, grantsStackDesignSystem } from "@/tokens/colors";
+import { grantsStackUIKit, grantsStackDesignSystem } from "@/theme/colors";
 
 <Meta title="Styles/Colors" />
 

src/components/SideNav/types.ts

@@ -20,10 +20,12 @@ export * from "./primitives/StatCard";
 export * from "./primitives/StatCardGroup";
 export * from "./primitives/TextArea";
 export * from "./primitives/Toast";
+export * from "./primitives/Typography";
 export * from "./primitives/VerticalTabs";
 export * from "./primitives/Switch";
 export * from "./primitives/Checkbox";
 
+export * from "./components/CreateButton";
 export * from "./components/IconLabel";
 export * from "./components/ProgressModal";
 export * from "./components/RadioGroupList";