Skip to content

Commit b19e61e

Browse files
marcinkrasowskimarcinkrasowski
committed
feat: added a demo version notification
1 parent 6276f64 commit b19e61e

File tree

8 files changed

+110
-19
lines changed

8 files changed

+110
-19
lines changed

‎apps/frontend/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
"date-fns": "^4.1.0",
3232
"dotenv-cli": "^8.0.0",
3333
"formik": "^2.4.6",
34+
"js-cookie": "^3.0.5",
3435
"markdown-to-jsx": "^7.7.6",
3536
"next": "^15.3.2",
3637
"next-auth": "^5.0.0-beta.27",
@@ -57,6 +58,7 @@
5758
"@trivago/prettier-plugin-sort-imports": "^5.2.2",
5859
"@turbo/gen": "^2.5.3",
5960
"@types/bcryptjs": "^3.0.0",
61+
"@types/js-cookie": "^3.0.6",
6062
"@types/node": "^22.15.19",
6163
"@types/react": "^19.1.4",
6264
"@types/react-autosuggest": "^10.1.11",

‎apps/frontend/src/containers/Header/DemoAlert.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
'use client';
2+
3+
import Cookies from 'js-cookie';
4+
import { X } from 'lucide-react';
5+
import { useTranslations } from 'next-intl';
6+
import React, { useState } from 'react';
7+
8+
import { Button } from '@dxp/ui/elements/button';
9+
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@dxp/ui/elements/collapsible';
10+
import { Link } from '@dxp/ui/elements/link';
11+
import { Typography } from '@dxp/ui/elements/typography';
12+
13+
export const DemoAlert = () => {
14+
const t = useTranslations();
15+
16+
const [demoHidden, setDemoHidden] = useState(false);
17+
18+
return (
19+
<Collapsible
20+
open={!demoHidden}
21+
onOpenChange={() => {
22+
setDemoHidden(true);
23+
Cookies.set('demoHidden', 'true', { expires: 1 });
24+
}}
25+
>
26+
<CollapsibleContent defaultOpen={!demoHidden}>
27+
<div className="bg-primary text-primary-foreground">
28+
<div className="px-4 md:px-6 py-2 ml-auto mr-auto w-full md:max-w-7xl">
29+
<div className="flex gap-4 items-center justify-between">
30+
<Typography variant="small">
31+
{t('demoBar.info')}
32+
</Typography>
33+
34+
<CollapsibleTrigger asChild>
35+
<Button variant="ghost" size="sm" className="w-9 p-0 shrink-0">
36+
<X className="h-4 w-4" />
37+
<span className="sr-only">{t('general.close')}</span>
38+
</Button>
39+
</CollapsibleTrigger>
40+
</div>
41+
</div>
42+
</div>
43+
</CollapsibleContent>
44+
</Collapsible>
45+
);
46+
};

‎apps/frontend/src/containers/Header/Header.tsx‎

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { Link as NextLink } from '@/i18n';
1212

1313
import { LocaleSwitcher } from '../Toolbar/LocaleSwitcher';
1414

15+
import { DemoAlert } from './DemoAlert';
1516
import { DesktopNavigation } from './DesktopNavigation/DesktopNavigation';
1617
import { HeaderProps } from './Header.types';
1718
import { MobileNavigation } from './MobileNavigation/MobileNavigation';
@@ -38,22 +39,25 @@ export const Header: React.FC<HeaderProps> = ({ data, alternativeUrls, children
3839
};
3940

4041
return (
41-
<header className="flex flex-col gap-4">
42-
<>
43-
<div className="md:block hidden">
44-
<DesktopNavigation logoSlot={LogoSlot} localeSlot={<LocaleSlot />} items={data.items} />
45-
</div>
46-
<div className="md:hidden">
47-
<MobileNavigation
48-
logoSlot={LogoSlot}
49-
localeSlot={<LocaleSlot />}
50-
items={data.items}
51-
title={data.title}
52-
mobileMenuLabel={data.mobileMenuLabel}
53-
/>
54-
</div>
55-
</>
56-
{children}
57-
</header>
42+
<>
43+
<DemoAlert />
44+
<header className="flex flex-col gap-4">
45+
<>
46+
<div className="md:block hidden">
47+
<DesktopNavigation logoSlot={LogoSlot} localeSlot={<LocaleSlot />} items={data.items} />
48+
</div>
49+
<div className="md:hidden">
50+
<MobileNavigation
51+
logoSlot={LogoSlot}
52+
localeSlot={<LocaleSlot />}
53+
items={data.items}
54+
title={data.title}
55+
mobileMenuLabel={data.mobileMenuLabel}
56+
/>
57+
</div>
58+
</>
59+
{children}
60+
</header>
61+
</>
5862
);
5963
};

‎apps/frontend/src/i18n/messages/de.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
{
22
"general": {
3+
"close": "Schließen",
34
"comingSoon": "Diese Funktion ist in Kürze verfügbar!"
5+
},
6+
"demoBar": {
7+
"info": "Sie sehen gerade eine Demoversion, die beispielhaft ist - sie kann vollständig über das integrierte CMS verwaltet werden, alle Blöcke und Komponenten sowie das UI-Theme können angepasst werden."
48
}
59
}

‎apps/frontend/src/i18n/messages/en.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
{
22
"general": {
3+
"close": "Close",
34
"comingSoon": "This feature is coming soon!"
5+
},
6+
"demoBar": {
7+
"info": "You are currently viewing a demo that is exemplary - it can be fully managed from the integrated CMS, all blocks and components, as well as the UI theme can be customized."
48
}
59
}

‎apps/frontend/src/i18n/messages/pl.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
{
22
"general": {
3+
"close": "Zamknij",
34
"comingSoon": "Ta funkcja będzie dostępna już wkrótce!"
5+
},
6+
"demoBar": {
7+
"info": "Aktualnie przeglądasz wersję demonstracyjną, która jest przykładowa - można nią w pełni zarządzać z poziomu zintegrowanego CMS-a, wszystkie bloki i komponenty oraz motyw interfejsu użytkownika mogą być dostosowane."
48
}
59
}

‎package-lock.json‎

Lines changed: 18 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/ui/src/elements/collapsible.tsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,22 @@
11
import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
2+
import { cx } from 'class-variance-authority';
23
import * as React from 'react';
34

45
const Collapsible = CollapsiblePrimitive.Root;
56

67
const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
78

8-
const CollapsibleContent = (props: React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleContent>) => (
9+
export interface CollapsibleContentProps
10+
extends React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleContent> {
11+
defaultOpen?: boolean;
12+
}
13+
14+
const CollapsibleContent = ({ defaultOpen, ...props }: CollapsibleContentProps) => (
915
<CollapsiblePrimitive.CollapsibleContent
10-
className="overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down"
16+
className={cx(
17+
'overflow-hidden transition-all data-[state=closed]:animate-collapsible-up',
18+
!defaultOpen && 'data-[state=open]:animate-collapsible-down',
19+
)}
1120
{...props}
1221
/>
1322
);

0 commit comments

Comments
 (0)