Skip to content

Commit

Permalink
Merge pull request tailwarden#1486 from tailwarden/develop
Browse files Browse the repository at this point in the history
v3.1.19 release πŸš€
  • Loading branch information
Azanul authored Aug 7, 2024
2 parents e2ac260 + bb9ba35 commit 2ecdf84
Show file tree
Hide file tree
Showing 39 changed files with 2,586 additions and 5,442 deletions.
89 changes: 89 additions & 0 deletions dashboard/components/banner/Banner.mocks.tsx
Original file line number Diff line number Diff line change
@@ -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;
30 changes: 30 additions & 0 deletions dashboard/components/banner/Banner.stories.tsx
Original file line number Diff line number Diff line change
@@ -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
}
};
82 changes: 31 additions & 51 deletions dashboard/components/banner/Banner.tsx
Original file line number Diff line number Diff line change
@@ -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"
Expand Down
8 changes: 4 additions & 4 deletions dashboard/components/layout/Layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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');

Expand All @@ -77,7 +77,7 @@ function Layout({ children }: LayoutProps) {

{!isOnboarding && (
<>
<Banner githubStars={githubStars} />
<GithubBanner githubStars={githubStars} />
<Navbar />
<main
className={classNames(
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
Loading

0 comments on commit 2ecdf84

Please sign in to comment.