tharaday 0.4.0 → 0.5.1

package/src/components/Switch/Switch.types.ts

@@ -1,6 +1,7 @@
 import type { InputHTMLAttributes } from 'react';
 
 export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  className?: string;
   label?: string;
   helperText?: string;
 }

package/src/components/Table/Table.types.ts

@@ -6,6 +6,7 @@ import type {
 } from 'react';
 
 export interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
+  className?: string;
   striped?: boolean;
   hoverable?: boolean;
   dense?: boolean;

package/src/components/Text/Text.types.ts

@@ -26,6 +26,8 @@ export type TextColor =
   | 'info';
 
 export interface TextProps extends HTMLAttributes<HTMLElement> {
+  /** Additional class name */
+  className?: string;
   /** The content to display */
   children: ReactNode;
   /** The typographic style to apply */

package/src/components/Textarea/Textarea.types.ts

@@ -3,6 +3,7 @@ import type { TextareaHTMLAttributes } from 'react';
 export type TextareaSize = 'sm' | 'md' | 'lg';
 
 export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  className?: string;
   size?: TextareaSize;
   error?: boolean;
   label?: string;

package/src/layouts/AppLayout/AppLayout.stories.tsx

@@ -122,3 +122,56 @@ export const LoggedOut: Story = {
     activeNavId: 'home',
   },
 };
+
+export const HeaderOnly: Story = {
+  args: {
+    headerTitle: 'Header Only',
+    headerLogo: logo,
+    user: { name: 'John Doe' },
+    navItems: [],
+    children: (
+      <Box padding={8} textAlign="center">
+        <Text variant="h2">Layout with Header only</Text>
+        <Text variant="body-md">NavBar is hidden because navItems is empty.</Text>
+      </Box>
+    ),
+  },
+};
+
+export const NavBarOnly: Story = {
+  args: {
+    headerTitle: '',
+    headerLogo: undefined,
+    user: undefined,
+    onLogin: undefined,
+    onLogout: undefined,
+    onCreateAccount: undefined,
+    navItems,
+    children: (
+      <Box padding={8} textAlign="center">
+        <Text variant="h2">Layout with NavBar only</Text>
+        <Text variant="body-md">
+          Header is hidden because no branding or user props are provided.
+        </Text>
+      </Box>
+    ),
+  },
+};
+
+export const ContentOnly: Story = {
+  args: {
+    headerTitle: '',
+    headerLogo: undefined,
+    user: undefined,
+    onLogin: undefined,
+    onLogout: undefined,
+    onCreateAccount: undefined,
+    navItems: [],
+    children: (
+      <Box padding={8} textAlign="center" border backgroundColor="subtle">
+        <Text variant="h2">Layout with Content only</Text>
+        <Text variant="body-md">Both Header and NavBar are hidden.</Text>
+      </Box>
+    ),
+  },
+};

package/src/layouts/AppLayout/AppLayout.tsx

@@ -1,3 +1,5 @@
+import clsx from 'clsx';
+
 import styles from './AppLayout.module.css';
 import type { AppLayoutProps } from './AppLayout.types.ts';
 import { Header } from '../../components/Header/Header.tsx';
@@ -11,7 +13,7 @@ import { NavBar } from '../../components/NavBar/NavBar.tsx';
  */
 export const AppLayout = ({
   headerLogo,
-  headerTitle = 'Tharaday',
+  headerTitle,
   user,
   navItems,
   activeNavId,
@@ -21,23 +23,41 @@ export const AppLayout = ({
   onLogout,
   onCreateAccount,
   onNavItemClick,
+  className,
+  maxWidth,
 }: AppLayoutProps) => {
+  const showHeader = !!(
+    headerLogo ||
+    headerTitle ||
+    user ||
+    onLogin ||
+    onLogout ||
+    onCreateAccount
+  );
+  const showNavBar = !!(navItems?.length || navActions);
+
   return (
-    <div className={styles.root}>
-      <Header
-        logo={headerLogo}
-        title={headerTitle}
-        user={user}
-        onLogin={onLogin}
-        onLogout={onLogout}
-        onCreateAccount={onCreateAccount}
-      />
-      <NavBar
-        items={navItems}
-        activeId={activeNavId}
-        actions={navActions}
-        onItemClick={onNavItemClick}
-      />
+    <div className={clsx(styles.root, className)}>
+      {showHeader && (
+        <Header
+          logo={headerLogo}
+          title={headerTitle}
+          user={user}
+          onLogin={onLogin}
+          onLogout={onLogout}
+          onCreateAccount={onCreateAccount}
+          maxWidth={maxWidth}
+        />
+      )}
+      {showNavBar && (
+        <NavBar
+          items={navItems}
+          activeId={activeNavId}
+          actions={navActions}
+          onItemClick={onNavItemClick}
+          maxWidth={maxWidth}
+        />
+      )}
       <main className={styles.main}>
         <div className={styles.container}>{children}</div>
       </main>

package/src/layouts/AppLayout/AppLayout.types.ts

@@ -3,6 +3,14 @@ import type { ReactNode } from 'react';
 import type { NavBarItem } from '../../components/NavBar/NavBar.types.ts';
 
 export interface AppLayoutProps {
+  /**
+   * Additional class name for the layout root
+   */
+  className?: string;
+  /**
+   * Max width for header and navbar containers
+   */
+  maxWidth?: string | number;
   /**
    * Header logo element
    */

package/src/layouts/AuthLayout/AuthLayout.tsx

@@ -1,11 +1,13 @@
+import clsx from 'clsx';
+
 import styles from './AuthLayout.module.css';
 import type { AuthLayoutProps } from './AuthLayout.types.tsx';
 import { Box } from '../../components/Box/Box.tsx';
 import { Text } from '../../components/Text/Text.tsx';
 
-export const AuthLayout = ({ logo, title, description, children }: AuthLayoutProps) => {
+export const AuthLayout = ({ logo, title, description, children, className }: AuthLayoutProps) => {
   return (
-    <Box className={styles.root}>
+    <Box className={clsx(styles.root, className)}>
       <Box className={styles.card}>
         <Box className={styles.header}>
           {logo && <Box className={styles.logo}>{logo}</Box>}

package/src/layouts/AuthLayout/AuthLayout.types.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 
 export interface AuthLayoutProps {
+  className?: string;
   logo?: ReactNode;
   title?: string;
   description?: string;

package/src/layouts/DashboardLayout/DashboardLayout.tsx

@@ -1,10 +1,12 @@
+import clsx from 'clsx';
+
 import styles from './DashboardLayout.module.css';
 import type { DashboardLayoutProps } from './DashboardLayout.types.tsx';
 import { Header } from '../../components/Header/Header.tsx';
 
 export const DashboardLayout = ({
   headerLogo,
-  headerTitle = 'Tharaday',
+  headerTitle,
   breadcrumbs,
   actions,
   stats,
@@ -13,9 +15,11 @@ export const DashboardLayout = ({
   onLogin,
   onLogout,
   onCreateAccount,
+  className,
+  maxWidth,
 }: DashboardLayoutProps) => {
   return (
-    <div className={styles.root}>
+    <div className={clsx(styles.root, className)}>
       <Header
         logo={headerLogo}
         title={headerTitle}
@@ -23,6 +27,7 @@ export const DashboardLayout = ({
         onLogin={onLogin}
         onLogout={onLogout}
         onCreateAccount={onCreateAccount}
+        maxWidth={maxWidth}
       />
       <main className={styles.main}>
         <div className={styles.container}>

package/src/layouts/DashboardLayout/DashboardLayout.types.tsx

@@ -1,6 +1,8 @@
 import type { ReactNode } from 'react';
 
 export interface DashboardLayoutProps {
+  className?: string;
+  maxWidth?: string | number;
   headerLogo?: ReactNode;
   headerTitle?: string;
   breadcrumbs?: ReactNode;

package/src/layouts/SettingsLayout/SettingsLayout.tsx

@@ -1,10 +1,12 @@
+import clsx from 'clsx';
+
 import styles from './SettingsLayout.module.css';
 import type { SettingsLayoutProps } from './SettingsLayout.types.tsx';
 import { Header } from '../../components/Header/Header.tsx';
 
 export const SettingsLayout = ({
   headerLogo,
-  headerTitle = 'Tharaday',
+  headerTitle,
   breadcrumbs,
   sidebar,
   children,
@@ -12,9 +14,11 @@ export const SettingsLayout = ({
   onLogin,
   onLogout,
   onCreateAccount,
+  className,
+  maxWidth,
 }: SettingsLayoutProps) => {
   return (
-    <div className={styles.root}>
+    <div className={clsx(styles.root, className)}>
       <Header
         logo={headerLogo}
         title={headerTitle}
@@ -22,6 +26,7 @@ export const SettingsLayout = ({
         onLogin={onLogin}
         onLogout={onLogout}
         onCreateAccount={onCreateAccount}
+        maxWidth={maxWidth}
       />
       <main className={styles.main}>
         <div className={styles.container}>

package/src/layouts/SettingsLayout/SettingsLayout.types.tsx

@@ -1,6 +1,8 @@
 import type { ReactNode } from 'react';
 
 export interface SettingsLayoutProps {
+  className?: string;
+  maxWidth?: string | number;
   headerLogo?: ReactNode;
   headerTitle?: string;
   breadcrumbs?: ReactNode;