From 3091ddc161c7d26451f4eacdeb3d93e5f944d4b1 Mon Sep 17 00:00:00 2001 From: Huss Martinez Date: Wed, 22 Jan 2025 10:19:40 +0100 Subject: [PATCH 1/8] chore: added briefcase, collection and home icons --- src/assets/icons/heroicons.ts | 25 +++++++++++++++++++------ src/primitives/Icon/Icon.tsx | 7 +++++-- 2 files changed, 24 insertions(+), 8 deletions(-) diff --git a/src/assets/icons/heroicons.ts b/src/assets/icons/heroicons.ts index 8fbabf0..10ceab6 100644 --- a/src/assets/icons/heroicons.ts +++ b/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>> = { + 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,6 +86,7 @@ const heroIcons = Object.keys(heroiconsComponents).sort((a, b) => ) as HeroiconsType[]; export { + BriefcaseIcon, CalendarIcon, CheckSolidIcon, CheckIcon, @@ -84,11 +94,14 @@ export { ChevronRightIcon, ClipboardListIcon, ClockIcon, + CollectionIcon, DocumentDuplicateIcon, ExclamationCircleIcon, - InformationCircleIcon, GlobeIcon, + HomeIcon, + InformationCircleIcon, LinkIcon, + PencilIcon, PlusIcon, SolidQuestionMarkCircleIcon, SparklesIcon, diff --git a/src/primitives/Icon/Icon.tsx b/src/primitives/Icon/Icon.tsx index db0cde9..07ba618 100644 --- a/src/primitives/Icon/Icon.tsx +++ b/src/primitives/Icon/Icon.tsx @@ -8,18 +8,21 @@ import { cn } from "@/lib/utils"; export enum IconType { // Heroicons + BRIEFCASE = "briefcase", CALENDAR = "calendar", CASH = "cash", CHECK = "check", CHEVRON_LEFT = "chevron-left", CLIPBOARD_LIST = "clipboardList", CLOCK = "clock", + COLLECTION = "collection", DOCUMENT_DUPLICATE = "document-duplicate", EXCLAMATION_CIRCLE = "exclamation-circle", - LINK = "link", - PLUS = "plus", GLOBE = "globe", + HOME = "home", INFORMATION_CIRCLE = "informationCircle", + LINK = "link", + PLUS = "plus", PENCIL = "pencil", SOLID_CHECK = "solid-check", SOLID_QUESTION_MARK_CIRCLE = "questionMarkCircle", From 0edbc2aca38157fb7b0d0590c9cddd836b542eff Mon Sep 17 00:00:00 2001 From: Huss Martinez Date: Wed, 22 Jan 2025 10:20:56 +0100 Subject: [PATCH 2/8] chore: added retrofunding logos and export gitcoin-ui/logos --- package.json | 5 +++++ src/assets/index.ts | 1 + src/assets/logos/index.ts | 6 ++++++ src/assets/logos/retrofunding/index.ts | 3 ++- src/assets/logos/retrofunding/retrofundingLockup.svg | 9 +++++++++ src/assets/logos/retrofunding/voteWordmark.svg | 4 ++++ vite.config.ts | 1 + 7 files changed, 28 insertions(+), 1 deletion(-) create mode 100644 src/assets/logos/index.ts create mode 100644 src/assets/logos/retrofunding/retrofundingLockup.svg diff --git a/package.json b/package.json index 51a25ce..ba4088b 100644 --- a/package.json +++ b/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", diff --git a/src/assets/index.ts b/src/assets/index.ts index 427c3e6..2ee63fc 100644 --- a/src/assets/index.ts +++ b/src/assets/index.ts @@ -1,2 +1,3 @@ export * from "./icons"; export * from "./images"; +export * from "./logos"; diff --git a/src/assets/logos/index.ts b/src/assets/logos/index.ts new file mode 100644 index 0000000..02f2b96 --- /dev/null +++ b/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"; diff --git a/src/assets/logos/retrofunding/index.ts b/src/assets/logos/retrofunding/index.ts index f1ab236..36d6a07 100644 --- a/src/assets/logos/retrofunding/index.ts +++ b/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 }; diff --git a/src/assets/logos/retrofunding/retrofundingLockup.svg b/src/assets/logos/retrofunding/retrofundingLockup.svg new file mode 100644 index 0000000..1bbba1e --- /dev/null +++ b/src/assets/logos/retrofunding/retrofundingLockup.svg @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file diff --git a/src/assets/logos/retrofunding/voteWordmark.svg b/src/assets/logos/retrofunding/voteWordmark.svg index e69de29..b84706b 100644 --- a/src/assets/logos/retrofunding/voteWordmark.svg +++ b/src/assets/logos/retrofunding/voteWordmark.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/vite.config.ts b/vite.config.ts index db04601..4a025c3 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -17,6 +17,7 @@ export default defineConfig({ hooks: resolve(__dirname, "./src/hooks/index.ts"), icons: resolve(__dirname, "./src/assets/icons/index.ts"), lib: resolve(__dirname, "./src/lib/index.ts"), + logos: resolve(__dirname, "./src/assets/logos/index.ts"), mocks: resolve(__dirname, "./src/mocks/handlers.ts"), types: resolve(__dirname, "./src/types/index.ts"), From d4373114640e7b9127932e1bec46f00a58bc70f7 Mon Sep 17 00:00:00 2001 From: Huss Martinez Date: Wed, 22 Jan 2025 10:22:12 +0100 Subject: [PATCH 3/8] chore: moved colors to /theme and export gitcoin-ui/theme --- package.json | 5 +++++ src/docs/colors.mdx | 2 +- src/{tokens => theme}/colors.ts | 0 src/theme/index.ts | 1 + src/{tokens => theme}/types.ts | 0 tailwind.config.ts | 2 +- vite.config.ts | 1 + 7 files changed, 9 insertions(+), 2 deletions(-) rename src/{tokens => theme}/colors.ts (100%) create mode 100644 src/theme/index.ts rename src/{tokens => theme}/types.ts (100%) diff --git a/package.json b/package.json index ba4088b..cb9a675 100644 --- a/package.json +++ b/package.json @@ -63,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", diff --git a/src/docs/colors.mdx b/src/docs/colors.mdx index 3d48896..6782bfb 100644 --- a/src/docs/colors.mdx +++ b/src/docs/colors.mdx @@ -1,6 +1,6 @@ import { Meta, ColorPalette, ColorItem, Title } from "@storybook/blocks"; -import { grantsStackUIKit, grantsStackDesignSystem } from "@/tokens/colors"; +import { grantsStackUIKit, grantsStackDesignSystem } from "@/theme/colors"; diff --git a/src/tokens/colors.ts b/src/theme/colors.ts similarity index 100% rename from src/tokens/colors.ts rename to src/theme/colors.ts diff --git a/src/theme/index.ts b/src/theme/index.ts new file mode 100644 index 0000000..bbdc171 --- /dev/null +++ b/src/theme/index.ts @@ -0,0 +1 @@ +export * from "./colors"; diff --git a/src/tokens/types.ts b/src/theme/types.ts similarity index 100% rename from src/tokens/types.ts rename to src/theme/types.ts diff --git a/tailwind.config.ts b/tailwind.config.ts index 6a49f5f..292be97 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -2,7 +2,7 @@ import { withTV } from "tailwind-variants/transformer"; import type { Config } from "tailwindcss"; import tailwindcssAnimate from "tailwindcss-animate"; -import { colors } from "./src/tokens/colors"; +import { colors } from "./src/theme/colors"; export default withTV({ content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"], diff --git a/vite.config.ts b/vite.config.ts index 4a025c3..92e4185 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -20,6 +20,7 @@ export default defineConfig({ logos: resolve(__dirname, "./src/assets/logos/index.ts"), mocks: resolve(__dirname, "./src/mocks/handlers.ts"), types: resolve(__dirname, "./src/types/index.ts"), + theme: resolve(__dirname, "./src/theme/index.ts"), // features application: resolve(__dirname, "./src/features/application/index.ts"), From aa1013cd0006be8ebced674c7b7f3df843841355 Mon Sep 17 00:00:00 2001 From: Huss Martinez Date: Wed, 22 Jan 2025 10:22:46 +0100 Subject: [PATCH 4/8] chore: implemented CreateButton --- .../CreateButton/CreateButton.stories.tsx | 44 +++++++++++++++++++ src/components/CreateButton/CreateButton.tsx | 40 +++++++++++++++++ src/components/CreateButton/index.ts | 1 + src/index.ts | 1 + 4 files changed, 86 insertions(+) create mode 100644 src/components/CreateButton/CreateButton.stories.tsx create mode 100644 src/components/CreateButton/CreateButton.tsx create mode 100644 src/components/CreateButton/index.ts diff --git a/src/components/CreateButton/CreateButton.stories.tsx b/src/components/CreateButton/CreateButton.stories.tsx new file mode 100644 index 0000000..300e3ef --- /dev/null +++ b/src/components/CreateButton/CreateButton.stories.tsx @@ -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 = { + 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; + +export default meta; + +type Story = StoryObj; + +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"), + }, +}; diff --git a/src/components/CreateButton/CreateButton.tsx b/src/components/CreateButton/CreateButton.tsx new file mode 100644 index 0000000..3d7ce76 --- /dev/null +++ b/src/components/CreateButton/CreateButton.tsx @@ -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 { + className?: string; + children: string; + onClick?: () => void; +} + +export const CreateButton = ({ + variant, + children = "Create new program", + onClick, + className, +}: CreateButtonProps) => { + const styles = variants({ variant }); + return ( + + ); +}; diff --git a/src/components/CreateButton/index.ts b/src/components/CreateButton/index.ts new file mode 100644 index 0000000..052e7eb --- /dev/null +++ b/src/components/CreateButton/index.ts @@ -0,0 +1 @@ +export * from "./CreateButton"; diff --git a/src/index.ts b/src/index.ts index afc4bfd..900510f 100644 --- a/src/index.ts +++ b/src/index.ts @@ -24,6 +24,7 @@ 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"; From a130ac4d3143bb698db67e0840640022b12e303d Mon Sep 17 00:00:00 2001 From: Huss Martinez Date: Wed, 22 Jan 2025 10:24:06 +0100 Subject: [PATCH 5/8] chore: implemented Typography component --- src/index.ts | 1 + src/primitives/Typography/Typography.tsx | 29 ++++++++++++++++++++++++ src/primitives/Typography/index.ts | 1 + 3 files changed, 31 insertions(+) create mode 100644 src/primitives/Typography/Typography.tsx create mode 100644 src/primitives/Typography/index.ts diff --git a/src/index.ts b/src/index.ts index 900510f..dadb770 100644 --- a/src/index.ts +++ b/src/index.ts @@ -20,6 +20,7 @@ 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"; diff --git a/src/primitives/Typography/Typography.tsx b/src/primitives/Typography/Typography.tsx new file mode 100644 index 0000000..5a57019 --- /dev/null +++ b/src/primitives/Typography/Typography.tsx @@ -0,0 +1,29 @@ +"use client"; + +import { tv, VariantProps } from "tailwind-variants"; + +import { cn } from "@/lib"; + +// TODO: Add variant (h1, h2, h3, p, body, caption, label, link, div), size, weight, etc + +const styles = tv({ + base: "", + variants: { + font: { + sans: "font-ui-sans", + mono: "font-ui-mono", + }, + }, + defaultVariants: { + font: "sans", + }, +}); + +export interface TypographyProps extends VariantProps { + className?: string; + children: string; +} + +export const Typography = ({ className, children, font }: TypographyProps) => { + return
{children}
; +}; diff --git a/src/primitives/Typography/index.ts b/src/primitives/Typography/index.ts new file mode 100644 index 0000000..922c252 --- /dev/null +++ b/src/primitives/Typography/index.ts @@ -0,0 +1 @@ +export * from "./Typography"; From 3f6477b15bf2ee27cfa7341fe22c2a0065fc2323 Mon Sep 17 00:00:00 2001 From: Huss Martinez Date: Wed, 22 Jan 2025 10:25:10 +0100 Subject: [PATCH 6/8] chore: refactored SideNavItem to have items as optional --- src/components/SideNav/SideNav.tsx | 4 ++-- src/components/SideNav/types.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/SideNav/SideNav.tsx b/src/components/SideNav/SideNav.tsx index 98027dd..9b1d02e 100644 --- a/src/components/SideNav/SideNav.tsx +++ b/src/components/SideNav/SideNav.tsx @@ -39,12 +39,12 @@ export const SideNav = ({ return (
- {items.map((item, index) => { + {items?.map((item, index) => { const isActive = item.id === activeId; return (
- {item.items.length > 0 ? ( + {item.items && item.items.length > 0 ? ( void; activeId?: string; className?: string; From 8356b297243f1e37d896a7809ca7b7460fc0a0f8 Mon Sep 17 00:00:00 2001 From: Huss Martinez Date: Wed, 22 Jan 2025 10:25:27 +0100 Subject: [PATCH 7/8] chore: refactored Navbar to have text as optional --- src/primitives/Navbar/Navbar.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/primitives/Navbar/Navbar.tsx b/src/primitives/Navbar/Navbar.tsx index 96a0d29..a60771a 100644 --- a/src/primitives/Navbar/Navbar.tsx +++ b/src/primitives/Navbar/Navbar.tsx @@ -20,7 +20,7 @@ export interface NavbarProps { primaryLogo?: NavbarLogoProps; secondaryLogo?: NavbarLogoProps; showDivider?: boolean; - text: NavbarTitleProps; + text?: NavbarTitleProps; children?: React.ReactNode; } @@ -41,7 +41,7 @@ export const Navbar = ({ {showDivider &&
}
{secondaryLogo && } - + {text && }
{children}
From f64ab0e9a95085d55dad0fc209822fc464e8e3e6 Mon Sep 17 00:00:00 2001 From: Huss Martinez Date: Wed, 22 Jan 2025 10:42:09 +0100 Subject: [PATCH 8/8] chore: added classname prop to navbar --- src/primitives/Navbar/Navbar.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/primitives/Navbar/Navbar.tsx b/src/primitives/Navbar/Navbar.tsx index a60771a..4f93e2a 100644 --- a/src/primitives/Navbar/Navbar.tsx +++ b/src/primitives/Navbar/Navbar.tsx @@ -4,6 +4,8 @@ import * as React from "react"; import { tv } from "tailwind-variants"; +import { cn } from "@/lib"; + import { NavbarLogo, NavbarLogoProps, NavbarTitle, NavbarTitleProps } from "./components"; const navbarVariants = tv({ @@ -17,6 +19,7 @@ const navbarVariants = tv({ }); export interface NavbarProps { + className?: string; primaryLogo?: NavbarLogoProps; secondaryLogo?: NavbarLogoProps; showDivider?: boolean; @@ -25,6 +28,7 @@ export interface NavbarProps { } export const Navbar = ({ + className, primaryLogo, secondaryLogo, showDivider = true, @@ -34,7 +38,7 @@ export const Navbar = ({ const { base, container, leftSection, divider, rightSection } = navbarVariants(); return ( -