feature: refactor and add banner to storybook

dashboard/components/banner/Banner.mocks.tsx

@@ -0,0 +1,89 @@
+import { StarIcon } from '@components/icons';
+import formatNumber from '@utils/formatNumber';
+import Image from 'next/image';
+import { BannerProps } from './Banner';
+
+const base: BannerProps = {
+ children: 'Banner Content',
+ displayBanner: true,
+ dismissBanner: () => {}
+};
+
+const primary: BannerProps = {
+ children: (
+ <>
+ <span className="text-sm font-medium">
+ Support Komiser by giving us a star on GitHub.
+ </span>
+
+ <a
+ href="https://github.com/tailwarden/komiser"
+ target="_blank"
+ rel="noreferrer"
+ className="group flex items-center gap-3 rounded border-[1.5px] border-white pl-4 text-sm text-white transition-colors hover:bg-white/10"
+ >
+ <Image
+ src="/assets/img/others/github-white.svg"
+ width="18"
+ height="16"
+ alt="Github logo"
+ />
+ <span>Star Komiser</span>
+ <div className="flex h-full items-center justify-center gap-2 border-l border-white/10 bg-white/10 px-3 py-2.5">
+ <StarIcon
+ width={16}
+ height={16}
+ className="group-hover:fill-orange-400 group-hover:text-orange-400"
+ />
+ {formatNumber(100000)}
+ </div>
+ </a>
+ </>
+ ),
+ displayBanner: true,
+ dismissBanner: () => {}
+};
+
+const secondary: BannerProps = {
+ children: (
+ <>
+ <span className="text-sm font-medium">
+ Support Komiser by giving us a star on GitHub.
+ </span>
+
+ <a
+ href="https://github.com/tailwarden/komiser"
+ target="_blank"
+ rel="noreferrer"
+ className="group flex items-center gap-3 rounded border-[1.5px] border-darkcyan-500 text-darkcyan-500 pl-4 text-sm transition-colors hover:bg-black/10"
+ >
+ <Image
+ src="/assets/img/others/github-black.svg"
+ width="18"
+ height="16"
+ alt="Github logo"
+ />
+ <span>Star Komiser</span>
+ <div className="flex h-full items-center justify-center gap-2 border-l border-black/10 bg-black/10 px-3 py-2.5">
+ <StarIcon
+ width={16}
+ height={16}
+ className="group-hover:fill-orange-400 group-hover:text-orange-400"
+ />
+ {formatNumber(100000)}
+ </div>
+ </a>
+ </>
+ ),
+ displayBanner: true,
+ dismissBanner: () => {},
+ style: 'secondary'
+};
+
+const mockBannerProps = {
+ base,
+ primary,
+ secondary
+};
+
+export default mockBannerProps;

dashboard/components/banner/Banner.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Banner from './Banner';
+import mockBannerProps from './Banner.mocks';
+
+const meta: Meta<typeof Banner> = {
+ title: 'Komiser/Banner',
+ component: Banner,
+ tags: ['autodocs']
+};
+
+export default meta;
+type Story = StoryObj<typeof Banner>;
+
+export const Default: Story = {
+ args: {
+ ...mockBannerProps.base
+ }
+};
+
+export const Primary: Story = {
+ args: {
+ ...mockBannerProps.primary
+ }
+};
+
+export const Secondary: Story = {
+ args: {
+ ...mockBannerProps.secondary
+ }
+};

dashboard/components/banner/Banner.tsx

@@ -1,60 +1,40 @@
-import Image from 'next/image';
-import { useContext } from 'react';
 import classNames from 'classnames';
-import formatNumber from '../../utils/formatNumber';
-import GlobalAppContext from '../layout/context/GlobalAppContext';
-import StarIcon from '../icons/StarIcon';
+import { ReactNode } from 'react';
 
-type BannerProps = {
- githubStars: number | undefined;
+export type BannerProps = {
+ children: ReactNode;
+ displayBanner: boolean;
+ dismissBanner: () => void;
+ style?: 'primary' | 'secondary';
 };
 
-function Banner({ githubStars }: BannerProps) {
- const { displayBanner, dismissBanner } = useContext(GlobalAppContext);
+function Banner({
+ children,
+ displayBanner,
+ dismissBanner,
+ style = 'primary'
+}: BannerProps) {
+ const bannerStyle = classNames(
+ 'top-0 z-10 flex w-full animate-fade-in-down-short items-center justify-center gap-6 bg-gradient-to-br py-3 opacity-0',
+ {
+ fixed: displayBanner,
+ hidden: !displayBanner,
+ 'text-white from-darkcyan-500 to-darkcyan-700': style === 'primary',
+ 'text-black bg-white shadow-right': style === 'secondary'
+ }
+ );
+ const buttonStyle = classNames(
+ 'absolute right-8 cursor-pointer rounded-lg p-3 transition-colors',
+ {
+ 'text-white hover:bg-white/10 active:bg-gray-950': style === 'primary',
+ 'text-black hover:bg-black/10': style === 'secondary'
+ }
+ );
 
  return (
- <div
- className={classNames(
- 'top-0 z-10 flex w-full animate-fade-in-down-short items-center justify-center gap-6 bg-gradient-to-br from-darkcyan-500 to-darkcyan-700 py-3 opacity-0',
- {
- fixed: displayBanner,
- hidden: !displayBanner
- }
- )}
- >
- <span className="text-sm font-medium text-white">
- Support Komiser by giving us a star on GitHub.
- </span>
-
- {githubStars && (
- <a
- href="https://github.com/tailwarden/komiser"
- target="_blank"
- rel="noreferrer"
- className="group flex items-center gap-3 rounded border-[1.5px] border-white pl-4 text-sm text-white transition-colors hover:bg-white/10"
- >
- <Image
- src="/assets/img/others/github-white.svg"
- width="18"
- height="16"
- alt="Github logo"
- />
- <span>Star Komiser</span>
- <div className="flex h-full items-center justify-center gap-2 border-l border-white/10 bg-white/10 px-3 py-2.5">
- <StarIcon
- width={16}
- height={16}
- className="group-hover:fill-orange-400 group-hover:text-orange-400"
- />
- {formatNumber(githubStars)}
- </div>
- </a>
- )}
-
- <button
- onClick={dismissBanner}
- className="absolute right-8 cursor-pointer rounded-lg p-3 text-white transition-colors hover:bg-white/10 active:bg-gray-950"
- >
+ <div className={bannerStyle}>
+ {children}
+ <button onClick={dismissBanner} className={buttonStyle}>
  <svg
  xmlns="http://www.w3.org/2000/svg"
  width="24"

dashboard/components/layout/Layout.tsx

@@ -4,9 +4,9 @@ import { useRouter } from 'next/router';
 import { ReactNode, useEffect } from 'react';
 import settingsService from '@services/settingsService';
 import { ToastProvider } from '@components/toast/ToastProvider';
+import GithubBanner from './components/github-banner/GithubBanner';
 import environment from '../../environments/environment';
-import Banner from '../banner/Banner';
-import useGithubStarBanner from '../banner/hooks/useGithubStarBanner';
+import useGithubStarBanner from './hooks/useGithubStarBanner';
 import Button from '../button/Button';
 import EmptyState from '../empty-state/EmptyState';
 import ErrorState from '../error-state/ErrorState';
@@ -55,7 +55,7 @@ function Layout({ children }: LayoutProps) {
  }
  }, [telemetry]);
 
- const betaFlagOnboardingWizard = true; // set this to true once wizard gets good support of the backend 
+ const betaFlagOnboardingWizard = true; // set this to true once wizard gets good support of the backend
  const isOnboarding =
  betaFlagOnboardingWizard && router.pathname.startsWith('/onboarding');
 
@@ -77,7 +77,7 @@ function Layout({ children }: LayoutProps) {
 
  {!isOnboarding && (
  <>
- <Banner githubStars={githubStars} />
+ <GithubBanner githubStars={githubStars} />
  <Navbar />
  <main
  className={classNames(

dashboard/components/layout/components/github-banner/GithubBanner.tsx

@@ -0,0 +1,49 @@
+import Banner from '@components/banner/Banner';
+import { StarIcon } from '@components/icons';
+import GlobalAppContext from '@components/layout/context/GlobalAppContext';
+import Image from 'next/image';
+import { useContext } from 'react';
+import formatNumber from '../../../../utils/formatNumber';
+
+type GithubBannerProps = {
+ githubStars: number | undefined;
+};
+
+function GithubBanner({ githubStars }: GithubBannerProps) {
+ const { displayBanner, dismissBanner } = useContext(GlobalAppContext);
+
+ return (
+ <Banner displayBanner={displayBanner} dismissBanner={dismissBanner}>
+ <span className="text-sm font-medium">
+ Support Komiser by giving us a star on GitHub.
+ </span>
+
+ {githubStars && (
+ <a
+ href="https://github.com/tailwarden/komiser"
+ target="_blank"
+ rel="noreferrer"
+ className="group flex items-center gap-3 rounded border-[1.5px] border-white pl-4 text-sm text-white transition-colors hover:bg-white/10"
+ >
+ <Image
+ src="/assets/img/others/github-white.svg"
+ width="18"
+ height="16"
+ alt="Github logo"
+ />
+ <span>Star Komiser</span>
+ <div className="flex h-full items-center justify-center gap-2 border-l border-white/10 bg-white/10 px-3 py-2.5">
+ <StarIcon
+ width={16}
+ height={16}
+ className="group-hover:fill-orange-400 group-hover:text-orange-400"
+ />
+ {formatNumber(githubStars)}
+ </div>
+ </a>
+ )}
+ </Banner>
+ );
+}
+
+export default GithubBanner;