feat: updated to latest version

Author: marcinkrasowski

package-lock.json

@@ -37,11 +37,14 @@
         "@commitlint/config-conventional": "^19.8.1",
         "@turbo/gen": "^2.5.3",
         "@types/cli-progress": "^3.11.6",
+        "@types/fs-extra": "^11.0.4",
         "@types/prompts": "^2.4.9",
         "@types/unzipper": "^0.10.11",
+        "fs-extra": "^11.3.1",
         "husky": "^9.1.7",
         "lint-staged": "^16.0.0",
         "prettier": "^3.5.3",
+        "simple-git": "^3.28.0",
         "syncpack": "^14.0.0-alpha.11",
         "turbo": "^2.5.3",
         "typescript": "5.8.3"

package.json

@@ -12,9 +12,10 @@ import { TooltipHover } from '@dxp/ui/components/TooltipHover';
 
 import { Badge } from '@dxp/ui/elements/badge';
 import { Button } from '@dxp/ui/elements/button';
-import { Link } from '@dxp/ui/elements/link';
 import { Typography } from '@dxp/ui/elements/typography';
 
+import { LinkList } from '../../LinkList';
+
 import { FeatureItemProps, PricingCardProps } from './PricingCard.types';
 
 export const FeatureItem: React.FC<FeatureItemProps> = ({ title, description, icon }) => {
@@ -100,24 +101,7 @@ export const PricingCard: React.FC<Readonly<PricingCardProps>> = (props) => {
                         </Typography>
                     )}
 
-                    {links && links.length > 0 && (
-                        <ul className="flex flex-col gap-2 w-full items-center">
-                            {links.map((link, index) => (
-                                <li key={`${link.label}-${index}`} className="w-full">
-                                    {link.label && (
-                                        <Link asChild variant={link.variant} key={link.label} className="w-full">
-                                            <LinkComponent href={link.url}>
-                                                <>
-                                                    {link.label}
-                                                    {link.icon && <DynamicIcon name={link.icon} size={16} />}
-                                                </>
-                                            </LinkComponent>
-                                        </Link>
-                                    )}
-                                </li>
-                            ))}
-                        </ul>
-                    )}
+                    <LinkList className="justify-center sm:flex-col" links={links} LinkComponent={LinkComponent} />
                 </div>
 
                 <div className="flex flex-col gap-4">

packages/ui/src/components/Cards/PricingCard/PricingCard.tsx

@@ -45,9 +45,15 @@ export const Container: React.FC<ContainerProps> = ({
     className,
     spacing = 'medium',
     background = 'none',
+    theme,
 }) => {
+    let finalTheme = theme;
+    if (theme) {
+        finalTheme = `theme-${theme}`;
+    }
+
     return (
-        <div className={cn(containerBackgroundVariants({ background }), className)}>
+        <div className={cn(finalTheme, containerBackgroundVariants({ background }), className)}>
             <div className={containerVariants({ variant, spacing })}>
                 <div className="">{children}</div>
             </div>

packages/ui/src/components/Container/Container.tsx

@@ -6,4 +6,5 @@ export interface ContainerProps {
     className?: string;
     spacing?: 'none' | 'small' | 'medium' | 'large';
     background?: 'none' | 'light' | 'dark' | 'brand';
+    theme?: string;
 }

packages/ui/src/components/Container/Container.types.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import { cn } from '@dxp/ui/lib/utils';
+
+import { Link } from '@dxp/ui/elements/link';
+
+import { DynamicIcon } from '../DynamicIcon';
+
+import { LinkListProps } from './LinkList.types';
+
+export const LinkList: React.FC<Readonly<LinkListProps>> = ({ className, links, LinkComponent }) => {
+    if (!links) {
+        return null;
+    }
+
+    return (
+        <div className={cn('w-full sm:w-auto flex flex-col sm:flex-row gap-4', className)}>
+            {links?.map(
+                (link) =>
+                    link.label && (
+                        <Link asChild variant={link.variant} key={link.label}>
+                            <LinkComponent href={link.url}>
+                                <>
+                                    {link.label}
+                                    {link.icon && <DynamicIcon name={link.icon} size={16} />}
+                                </>
+                            </LinkComponent>
+                        </Link>
+                    ),
+            )}
+        </div>
+    );
+};

packages/ui/src/components/LinkList/LinkList.tsx

@@ -0,0 +1,9 @@
+import { Models } from '@dxp/framework/modules';
+import { Models as FrontendModels } from '@dxp/utils.frontend';
+
+export type LinkListProps = {
+    children?: React.ReactNode;
+    links?: Models.Link.Link[];
+    LinkComponent: FrontendModels.Link.LinkComponent;
+    className?: string;
+};

packages/ui/src/components/LinkList/LinkList.types.ts

@@ -0,0 +1,2 @@
+export { LinkList } from './LinkList';
+export type { LinkListProps } from './LinkList.types';

packages/ui/src/components/LinkList/index.ts

@@ -21,6 +21,8 @@ interface GlobalProviderProps {
     };
     labels: CMS.Model.AppConfig.Labels;
     locale: string;
+    themes: CMS.Model.AppConfig.Themes;
+    currentTheme?: string;
     children: ReactNode;
 }
 
@@ -42,11 +44,15 @@ export interface GlobalContextType {
         isVisible: boolean;
         toggle: (show: boolean) => void;
     };
+    themes: {
+        available: CMS.Model.AppConfig.Themes;
+        current?: string;
+    };
 }
 
 export const GlobalContext = createContext({} as GlobalContextType);
 
-export const GlobalProvider = ({ config, labels, locale, children }: GlobalProviderProps) => {
+export const GlobalProvider = ({ config, labels, locale, themes, currentTheme, children }: GlobalProviderProps) => {
     const priceService = usePriceService(locale);
 
     const [isSpinnerVisible, setIsSpinnerVisible] = useState(false);
@@ -61,6 +67,10 @@ export const GlobalProvider = ({ config, labels, locale, children }: GlobalProvi
                     isVisible: isSpinnerVisible,
                     toggle: setIsSpinnerVisible,
                 },
+                themes: {
+                    available: themes,
+                    current: currentTheme,
+                },
             }}
         >
             {children}

packages/ui/src/providers/GlobalProvider/GlobalProvider.tsx

@@ -58,7 +58,28 @@
     --tertiary-hover: hsl(220 13% 95%);
 }
 
-.dark {
+.theme-personal {
+}
+
+.theme-business {
+    --primary: hsl(346 100% 41%);
+    --primary-foreground: hsl(0 0% 100%);
+    --secondary: hsl(165.9, 100%, 41%);
+    --secondary-foreground: hsl(0 0% 0%);
+    --navbar-background: hsl(234 25% 92%);
+    --navbar-foreground: hsl(215 28% 17%);
+    --navbar-primary: hsl(228 100% 19%);
+    --navbar-primary-foreground: hsl(0 0% 100%);
+    --navbar-border: hsl(232 12% 87%);
+    --navbar-muted: hsl(228 100% 19%);
+    --navbar-accent-background: hsl(214 95% 93%);
+    --navbar-accent-foreground: hsl(224 64% 33%);
+    --navbar-sub-background: hsl(346, 100%, 29%);
+    --navbar-sub-foreground: hsl(0 0% 100%);
+    --navbar-sub-accent: hsl(346 100% 41%);
+}
+
+.theme-dark {
     --background: hsl(226 57% 21%);
     --foreground: hsl(0 0% 98%);
     --card: hsl(224 64% 33%);