@sykoramaros/marosh-components 0.1.17 → 0.2.3

package/src/components/basicComponents/MainSidebarLayout.tsx

@@ -10,8 +10,7 @@ import {
   SidebarTrigger,
   SidebarProvider,
 } from "@/components/ui/sidebar"
-import { Link, Outlet } from "@tanstack/react-router"
-import { MainNav, type NavItem } from "@/components/basicComponents/MainNav"
+import { MainNav, type NavItem, type LinkComponentProps } from "@/components/basicComponents/MainNav"
 import { Footer, type FooterItems } from "@/components/basicComponents/Footer"
 
 export interface MainSidebarLayoutProps {
@@ -23,6 +22,7 @@ export interface MainSidebarLayoutProps {
   footerItems?: FooterItems
   sidebarDefaultOpen?: boolean
   children?: React.ReactNode
+  LinkComponent?: React.ComponentType<LinkComponentProps>
 }
 
 export const MainSidebarLayout = ({
@@ -33,25 +33,21 @@ export const MainSidebarLayout = ({
   navItems = [],
   footerItems,
   sidebarDefaultOpen = true,
+  children,
+  LinkComponent,
 }: MainSidebarLayoutProps) => {
-  // Layout bez sidebaru
   if (!useSidebar) {
     return (
       <div className="flex-1 flex min-h-screen flex-col">
-        {useMainNav && <MainNav navItems={navItems} />}
+        {useMainNav && <MainNav navItems={navItems} LinkComponent={LinkComponent} />}
         <main className="flex-1 p-5">
-          <Outlet />
+          {children}
         </main>
-        {useFooter && footerItems && (
-          <footer>
-            <Footer {...footerItems} />
-          </footer>
-        )}
+        {useFooter && footerItems && <Footer {...footerItems} LinkComponent={LinkComponent} />}
       </div>
     )
   }
 
-  // Layout se sidebarem
   return (
     <SidebarProvider defaultOpen={sidebarDefaultOpen}>
       <div className="flex min-h-screen w-full">
@@ -66,16 +62,29 @@ export const MainSidebarLayout = ({
                   {navItems.map((item) => (
                     <SidebarMenuItem key={item.title}>
                       <SidebarMenuButton asChild>
-                        <Link to={item.url}>
-                          {item.icon && (
-                            <span className="inline-flex h-5 w-5 shrink-0 items-center">
-                              <item.icon className="h-full w-full" />
+                        {LinkComponent ? (
+                          <LinkComponent to={item.url}>
+                            {item.icon && (
+                              <span className="inline-flex h-5 w-5 shrink-0 items-center">
+                                <item.icon className="h-full w-full" />
+                              </span>
+                            )}
+                            <span className="text-base font-medium">
+                              {item.title}
                             </span>
-                          )}
-                          <span className="text-base font-medium">
-                            {item.title}
-                          </span>
-                        </Link>
+                          </LinkComponent>
+                        ) : (
+                          <a href={item.url}>
+                            {item.icon && (
+                              <span className="inline-flex h-5 w-5 shrink-0 items-center">
+                                <item.icon className="h-full w-full" />
+                              </span>
+                            )}
+                            <span className="text-base font-medium">
+                              {item.title}
+                            </span>
+                          </a>
+                        )}
                       </SidebarMenuButton>
                     </SidebarMenuItem>
                   ))}
@@ -88,18 +97,14 @@ export const MainSidebarLayout = ({
         <div className="flex-1 flex flex-col">
           <header className="sticky top-0 z-10 flex items-center border-b bg-background px-4 h-14 gap-2">
             <SidebarTrigger />
-            {useMainNav && <MainNav navItems={navItems} />}
+            {useMainNav && <MainNav navItems={navItems} LinkComponent={LinkComponent} />}
           </header>
 
           <main className="flex-1 p-6">
-            <Outlet />
+            {children}
           </main>
 
-          {useFooter && footerItems && (
-            <footer>
-              <Footer {...footerItems} />
-            </footer>
-          )}
+          {useFooter && footerItems && <Footer {...footerItems} LinkComponent={LinkComponent} />}
         </div>
       </div>
     </SidebarProvider>

package/src/components/basicComponents/Switcher.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/tanstack-react"
+import { Moon, Sun } from "lucide-react"
+import { Switcher } from "./Switcher"
+
+const meta: Meta<typeof Switcher> = {
+  title: "Components/Switcher",
+  component: Switcher,
+  tags: ["autodocs"],
+  argTypes: {
+    checked: { control: "boolean" },
+    disabled: { control: "boolean" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Switcher>
+
+export const Default: Story = {
+  args: { checked: false },
+}
+
+export const Checked: Story = {
+  args: { checked: true },
+}
+
+export const WithIcon: Story = {
+  args: {
+    checked: false,
+    icon: <Moon className="h-3 w-3" />,
+  },
+}
+
+export const WithIconChecked: Story = {
+  args: {
+    checked: true,
+    icon: <Sun className="h-3 w-3" />,
+  },
+}
+
+export const Disabled: Story = {
+  args: { checked: false, disabled: true },
+}

package/src/components/basicComponents/Switcher.tsx

@@ -25,3 +25,5 @@ export const Switcher = React.forwardRef<
     </SwitchPrimitives.Thumb>
   </SwitchPrimitives.Root>
 ))
+
+Switcher.displayName = "Switcher"

package/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,171 @@
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & { inset?: boolean }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & { inset?: boolean }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & { inset?: boolean }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => (
+  <span className={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...props} />
+)
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}

package/src/components/ui/sidebar.tsx

@@ -608,6 +608,7 @@ function SidebarMenuSkeleton({
 }) {
   // Random width between 50 to 90%.
   const width = React.useMemo(() => {
+    // eslint-disable-next-line react-hooks/purity
     return `${Math.floor(Math.random() * 40) + 50}%`
   }, [])
 

package/src/hooks/use-mobile.ts

@@ -3,17 +3,16 @@ import * as React from "react"
 const MOBILE_BREAKPOINT = 768
 
 export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+  const [isMobile, setIsMobile] = React.useState(
+    () => window.innerWidth < MOBILE_BREAKPOINT,
+  )
 
   React.useEffect(() => {
     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    }
+    const onChange = () => setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
     mql.addEventListener("change", onChange)
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
     return () => mql.removeEventListener("change", onChange)
   }, [])
 
-  return !!isMobile
+  return isMobile
 }

package/src/index.ts

@@ -1,5 +1,4 @@
 export { cn } from "@/lib/utils.ts"
-export { Link } from "@tanstack/react-router"
 
 // COMPONENTS
 
@@ -11,6 +10,7 @@ export {
   MainNav,
   type NavItem,
   type MainNavProps,
+  type LinkComponentProps,
 } from "@/components/basicComponents/MainNav"
 export {
   Footer,
@@ -23,6 +23,11 @@ export {
   type MainSidebarLayoutProps,
 } from "@/components/basicComponents/MainSidebarLayout"
 export { Switcher } from "@/components/basicComponents/Switcher"
+export {
+  LanguageSwitcher,
+  type Language,
+  type LanguageSwitcherProps,
+} from "@/components/basicComponents/LanguageSwitcher"
 
 // PROVIDERS
 export {
@@ -31,12 +36,6 @@ export {
   type BaseUrlProviderProps,
 } from "@/providers/BaseUrlProvider"
 
-export {
-  ProjectProvider,
-  useProject,
-  type ProjectProviderProps,
-} from "@/providers/ProjectDataProvider"
-
 export {
   ThemeContextProvider,
   useThemeContext,

package/src/providers/BaseUrlProvider.tsx

@@ -1,6 +1,6 @@
 import { createContext, useContext, ReactNode } from "react"
 
-export const BaseUrlContext = createContext<string>("")
+export const BaseUrlContext = createContext<string | undefined>(undefined)
 
 export interface BaseUrlProviderProps {
   children: ReactNode

package/src/providers/ThemeContextProvider.tsx

@@ -1,5 +1,5 @@
 // src/providers/ThemeContextProvider.tsx
-import React, { createContext, useContext, useEffect, useState } from "react"
+import React, { createContext, useContext, useEffect, useRef, useState } from "react"
 
 // Typy - EXPORTUJ JE!
 export type ThemeMode = "light" | "dark"
@@ -12,7 +12,7 @@ export interface ThemeConfig {
     dark: Record<string, string>
   }
   css?: {
-    "@layer base"?: Record<string, any>
+    "@layer base"?: Record<string, Record<string, string>>
   }
 }
 
@@ -57,6 +57,7 @@ export const ThemeContextProvider = ({
 
   const [isDarkMode, setIsDarkMode] = useState(defaultMode === "dark")
   const [themeName, setThemeName] = useState<string>(initialTheme)
+  const appliedVarsRef = useRef<string[]>([])
 
   const mode: ThemeMode = isDarkMode ? "dark" : "light"
 
@@ -68,16 +69,27 @@ export const ThemeContextProvider = ({
       return
     }
 
+    // Smazat CSS proměnné předchozího tématu
+    appliedVarsRef.current.forEach((key) => {
+      document.documentElement.style.removeProperty(key)
+    })
+
+    const newKeys: string[] = []
+
     // Aplikovat CSS proměnné pro mode (light/dark)
     Object.entries(theme.cssVars[mode] || {}).forEach(([key, value]) => {
       document.documentElement.style.setProperty(`--${key}`, value)
+      newKeys.push(`--${key}`)
     })
 
     // Aplikovat CSS proměnné z theme (včetně fontů)
     Object.entries(theme.cssVars.theme || {}).forEach(([key, value]) => {
       document.documentElement.style.setProperty(`--${key}`, value)
+      newKeys.push(`--${key}`)
     })
 
+    appliedVarsRef.current = newKeys
+
     // Vytvořit a přidat @layer base styly
     const styleId = "theme-base-styles"
     let styleElement = document.getElementById(styleId) as HTMLStyleElement

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/src/App.css

@@ -1,42 +0,0 @@
-/* #root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-} */

package/src/App.tsx

@@ -1,44 +0,0 @@
-import { Button } from "@/components/ui/button"
-import { CustomButton } from "@/components/basicComponents/CustomButton"
-import { MainNav } from "@/components/basicComponents/MainNav"
-import { Github, Menu, Twitter } from "lucide-react"
-import { Footer } from "@/components/basicComponents/Footer"
-
-export const App = () => {
-  return (
-    <>
-      <MainNav
-        navItems={[
-          { title: "Home", url: "/", icon: Menu },
-          { title: "About", url: "/about", icon: Menu },
-          { title: "Contact", url: "/contact", icon: Menu },
-        ]}
-      />
-      <div className="p-13 flex gap-5">
-        <Button>Shadcn UI Test</Button>
-        <CustomButton>Custom Button</CustomButton>
-      </div>
-      <Footer
-        className="fixed bottom-0 w-full"
-        links={[
-          { title: "Home", url: "/" },
-          { title: "About", url: "/about" },
-          { title: "Contact", url: "/contact" },
-        ]}
-        socialProfiles={[
-          {
-            title: "Twitter",
-            url: "https://twitter.com/shadcn",
-            icon: Twitter,
-          },
-          {
-            title: "GitHub",
-            url: "https://github.com/shadcn",
-            icon: Github,
-          },
-        ]}
-        copyright="© 2026 Marosh Sykora"
-      />
-    </>
-  )
-}

package/src/config/projectData.ts

@@ -1,122 +0,0 @@
-import {
-  Home,
-  FolderOpenDot,
-  SmilePlus,
-  MessageSquareMore,
-  Facebook,
-  Linkedin,
-  Info,
-  Gitlab,
-} from "lucide-react"
-import type { LucideIcon } from "lucide-react"
-
-export interface ProjectData {
-  appName: string
-  navItems: NavItem[]
-  footerItems: FooterItem
-}
-
-export interface NavItem {
-  title: string
-  url: string
-  icon: LucideIcon
-}
-
-export interface FooterItem {
-  links: Link[]
-  socialProfiles: SocialProfile[]
-  copyright: string
-}
-
-export interface Link {
-  title: string
-  url: string
-}
-
-export interface SocialProfile {
-  title: string
-  url: string
-  icon: LucideIcon
-}
-
-export const projectData: ProjectData = {
-  appName: "Frontend App Template",
-  navItems: [
-    {
-      title: "Home",
-      url: "/",
-      icon: Home,
-    },
-    {
-      title: "About",
-      url: "/portfolio/about",
-      icon: Info,
-    },
-    {
-      title: "Skills",
-      url: "/portfolio/skills",
-      icon: SmilePlus,
-    },
-    {
-      title: "Projects",
-      url: "/portfolio/projects",
-      icon: FolderOpenDot,
-    },
-    // {
-    //   title: "Hobbies",
-    //   url: "/portfolio/hobbies",
-    //   icon: FerrisWheel,
-    // },
-    {
-      title: "Contact",
-      url: "/portfolio/contact",
-      icon: MessageSquareMore,
-    },
-  ],
-  footerItems: {
-    links: [
-      {
-        title: "Home",
-        url: "/",
-      },
-      {
-        title: "Contact",
-        url: "/portfolio/contact",
-      },
-      {
-        title: "Services",
-        url: "/portfolio/services",
-      },
-      {
-        title: "About",
-        url: "/portfolio/about",
-      },
-      {
-        title: "Terms",
-        url: "/portfolio/terms",
-      },
-      // {
-      //   title: "Privacy Policy",
-      //   url: "/privacy-policy",
-      // },
-    ],
-    copyright: "Copyright Marosh ©" + new Date().getFullYear(),
-    socialProfiles: [
-      {
-        title: "Facebook",
-        url: "https://facebook.com/",
-        icon: Facebook,
-      },
-      {
-        title: "Gitlab",
-        url: "https://gitlab.com/",
-        icon: Gitlab,
-      },
-      {
-        title: "LinkedIn",
-        url: "https://www.linkedin.com/",
-        icon: Linkedin,
-      },
-    ],
-  },
-}