diff --git a/package.json b/package.json index 51a25ce..cb9a675 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", @@ -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", 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/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/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/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; 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/index.ts b/src/index.ts index afc4bfd..dadb770 100644 --- a/src/index.ts +++ b/src/index.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"; 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", diff --git a/src/primitives/Navbar/Navbar.tsx b/src/primitives/Navbar/Navbar.tsx index 96a0d29..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,14 +19,16 @@ const navbarVariants = tv({ }); export interface NavbarProps { + className?: string; primaryLogo?: NavbarLogoProps; secondaryLogo?: NavbarLogoProps; showDivider?: boolean; - text: NavbarTitleProps; + text?: NavbarTitleProps; children?: React.ReactNode; } export const Navbar = ({ + className, primaryLogo, secondaryLogo, showDivider = true, @@ -34,14 +38,14 @@ export const Navbar = ({ const { base, container, leftSection, divider, rightSection } = navbarVariants(); return ( -