@papernote/ui 1.3.1 → 1.6.0

package/src/components/index.ts

@@ -165,8 +165,14 @@ export type { MarkdownEditorProps } from './MarkdownEditor';
 export { default as Menu, MenuDivider } from './Menu';
 export type { MenuProps, MenuItem } from './Menu';
 
-export { default as Chip } from './Chip';
-export type { ChipProps } from './Chip';
+export { default as Chip, ChipGroup } from './Chip';
+export type { ChipProps, ChipGroupProps } from './Chip';
+
+export { default as CheckboxList } from './CheckboxList';
+export type { CheckboxListProps, CheckboxListItem } from './CheckboxList';
+
+export { default as SearchableList } from './SearchableList';
+export type { SearchableListProps, SearchableListItem } from './SearchableList';
 
 export { default as NumberInput } from './NumberInput';
 export type { NumberInputProps } from './NumberInput';
@@ -189,7 +195,10 @@ export type { BottomSheetProps } from './BottomSheet';
 export { default as Collapsible } from './Collapsible';
 export type { CollapsibleProps } from './Collapsible';
 
-export { Show, Hide, useMediaQuery } from './ResponsiveUtilities';
+export { default as ExpandablePanel, ExpandablePanelSpacer, ExpandablePanelContainer } from './ExpandablePanel';
+export type { ExpandablePanelProps } from './ExpandablePanel';
+
+export { Show, Hide } from './ResponsiveUtilities';
 
 // Navigation Components
 export { default as Breadcrumbs } from './Breadcrumbs';
@@ -243,6 +252,19 @@ export type { PageNavigationProps } from './PageNavigation';
 export { default as Sidebar, SidebarGroup } from './Sidebar';
 export type { SidebarProps, SidebarItem, SidebarGroupProps } from './Sidebar';
 
+// Mobile Navigation Components
+export { default as BottomNavigation, BottomNavigationSpacer } from './BottomNavigation';
+export type { BottomNavigationProps, BottomNavItem } from './BottomNavigation';
+
+export { default as MobileHeader, MobileHeaderSpacer } from './MobileHeader';
+export type { MobileHeaderProps } from './MobileHeader';
+
+export { default as FloatingActionButton, useFABScroll } from './FloatingActionButton';
+export type { FloatingActionButtonProps, FABAction } from './FloatingActionButton';
+
+export { default as PullToRefresh, usePullToRefresh } from './PullToRefresh';
+export type { PullToRefreshProps } from './PullToRefresh';
+
 // Logo
 export { default as Logo } from './Logo';
 export type { LogoProps } from './Logo';
@@ -255,6 +277,9 @@ export type { UserProfileButtonProps } from './UserProfileButton';
 export { default as Layout } from './Layout';
 export type { LayoutProps } from './Layout';
 
+export { default as MobileLayout } from './MobileLayout';
+export type { MobileLayoutProps } from './MobileLayout';
+
 export { default as TwoColumnContent } from './TwoColumnContent';
 export type { TwoColumnContentProps } from './TwoColumnContent';
 
@@ -287,6 +312,12 @@ export type {
   ExpansionMode
 } from './DataTable';
 
+export { default as DataTableCardView } from './DataTableCardView';
+export type { CardViewConfig, DataTableCardViewProps } from './DataTableCardView';
+
+export { default as SwipeActions } from './SwipeActions';
+export type { SwipeActionsProps, SwipeAction } from './SwipeActions';
+
 // Spreadsheet
 export { Spreadsheet, SpreadsheetReport } from './Spreadsheet';
 export type { SpreadsheetProps, SpreadsheetCell, Matrix, CellBase } from './Spreadsheet';
@@ -349,6 +380,12 @@ export type { AppLayoutProps } from './AppLayout';
 
 export { PageLayout } from './PageLayout';
 
+export { default as PageHeader } from './PageHeader';
+export type { PageHeaderProps, PageHeaderAction } from './PageHeader';
+
+export { default as ActionBar, ActionBarLeft, ActionBarCenter, ActionBarRight } from './ActionBar';
+export type { ActionBarProps, ActionBarAction } from './ActionBar';
+
 export { AdminModal } from './AdminModal';
 export type { AdminModalProps, AdminModalTab } from './AdminModal';
 
@@ -414,3 +451,32 @@ export type { ExcelColumn, ExportToExcelOptions, DataTableExportOptions, MultiSh
 // Hooks
 export { useColumnResize, useColumnReorder } from '../hooks/useTableEnhancements';
 export type { UseColumnResizeOptions, UseColumnReorderOptions } from '../hooks/useTableEnhancements';
+
+// Responsive Hooks
+export {
+  useViewportSize,
+  useBreakpoint,
+  useMediaQuery,
+  useIsMobile,
+  useIsTablet,
+  useIsDesktop,
+  useIsTouchDevice,
+  useOrientation,
+  useBreakpointValue,
+  useResponsiveCallback,
+  useSafeAreaInsets,
+  usePrefersMobile,
+  BREAKPOINTS,
+} from '../hooks/useResponsive';
+export type { Breakpoint, ViewportSize, Orientation } from '../hooks/useResponsive';
+
+// Mobile Context
+export {
+  MobileProvider,
+  useMobileContext,
+  withMobileContext,
+  MobileOnly,
+  DesktopOnly,
+  Responsive,
+} from '../context/MobileContext';
+export type { MobileContextValue, MobileProviderProps } from '../context/MobileContext';

package/src/context/MobileContext.tsx

@@ -0,0 +1,296 @@
+import React, { createContext, useContext, useMemo, ReactNode } from 'react';
+import {
+  useIsMobile,
+  useIsTablet,
+  useIsDesktop,
+  useIsTouchDevice,
+  useBreakpoint,
+  useOrientation,
+  useViewportSize,
+  useSafeAreaInsets,
+  Breakpoint,
+  Orientation,
+  ViewportSize,
+} from '../hooks/useResponsive';
+
+/**
+ * Mobile context value interface
+ * 
+ * Provides comprehensive responsive state for the entire application.
+ */
+export interface MobileContextValue {
+  /** True when viewport width < 768px */
+  isMobile: boolean;
+  /** True when viewport width is 768px - 1023px */
+  isTablet: boolean;
+  /** True when viewport width >= 1024px */
+  isDesktop: boolean;
+  /** True when device supports touch input */
+  isTouchDevice: boolean;
+  /** Current Tailwind breakpoint: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' */
+  breakpoint: Breakpoint;
+  /** Current orientation: 'portrait' | 'landscape' */
+  orientation: Orientation;
+  /** Current viewport dimensions */
+  viewport: ViewportSize;
+  /** Safe area insets for notched devices */
+  safeAreaInsets: {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+  };
+  /** True when mobile OR touch device (useful for UI decisions) */
+  useMobileUI: boolean;
+}
+
+/**
+ * Default context value (SSR-safe defaults)
+ */
+const defaultContextValue: MobileContextValue = {
+  isMobile: false,
+  isTablet: false,
+  isDesktop: true,
+  isTouchDevice: false,
+  breakpoint: 'lg',
+  orientation: 'landscape',
+  viewport: { width: 1024, height: 768 },
+  safeAreaInsets: { top: 0, right: 0, bottom: 0, left: 0 },
+  useMobileUI: false,
+};
+
+/**
+ * Mobile context
+ */
+const MobileContext = createContext<MobileContextValue>(defaultContextValue);
+
+/**
+ * MobileProvider props
+ */
+export interface MobileProviderProps {
+  /** Child components that will have access to mobile context */
+  children: ReactNode;
+  /** 
+   * Force mobile UI mode regardless of device detection.
+   * Useful for testing or forcing mobile layout on tablets.
+   */
+  forceMobileUI?: boolean;
+  /**
+   * Force desktop UI mode regardless of device detection.
+   * Useful for testing or forcing desktop layout on mobile.
+   */
+  forceDesktopUI?: boolean;
+}
+
+/**
+ * MobileProvider - Provides responsive state to the entire application
+ * 
+ * Wrap your application with MobileProvider to enable auto-responsive
+ * behavior in notebook-ui components.
+ * 
+ * @example Basic usage
+ * ```tsx
+ * import { MobileProvider } from 'notebook-ui';
+ * 
+ * function App() {
+ *   return (
+ *     <MobileProvider>
+ *       <YourApplication />
+ *     </MobileProvider>
+ *   );
+ * }
+ * ```
+ * 
+ * @example Force mobile UI for testing
+ * ```tsx
+ * <MobileProvider forceMobileUI>
+ *   <YourApplication />
+ * </MobileProvider>
+ * ```
+ */
+export function MobileProvider({
+  children,
+  forceMobileUI = false,
+  forceDesktopUI = false,
+}: MobileProviderProps) {
+  const isMobile = useIsMobile();
+  const isTablet = useIsTablet();
+  const isDesktop = useIsDesktop();
+  const isTouchDevice = useIsTouchDevice();
+  const breakpoint = useBreakpoint();
+  const orientation = useOrientation();
+  const viewport = useViewportSize();
+  const safeAreaInsets = useSafeAreaInsets();
+
+  const value = useMemo<MobileContextValue>(() => {
+    // Calculate effective mobile UI state
+    let useMobileUI = isMobile || isTouchDevice;
+    
+    // Apply force overrides
+    if (forceMobileUI) {
+      useMobileUI = true;
+    } else if (forceDesktopUI) {
+      useMobileUI = false;
+    }
+
+    return {
+      isMobile: forceMobileUI ? true : forceDesktopUI ? false : isMobile,
+      isTablet: forceMobileUI || forceDesktopUI ? false : isTablet,
+      isDesktop: forceDesktopUI ? true : forceMobileUI ? false : isDesktop,
+      isTouchDevice,
+      breakpoint: forceMobileUI ? 'xs' : forceDesktopUI ? 'lg' : breakpoint,
+      orientation,
+      viewport,
+      safeAreaInsets,
+      useMobileUI,
+    };
+  }, [
+    isMobile,
+    isTablet,
+    isDesktop,
+    isTouchDevice,
+    breakpoint,
+    orientation,
+    viewport,
+    safeAreaInsets,
+    forceMobileUI,
+    forceDesktopUI,
+  ]);
+
+  return (
+    <MobileContext.Provider value={value}>
+      {children}
+    </MobileContext.Provider>
+  );
+}
+
+/**
+ * useMobileContext - Hook to access mobile responsive state
+ * 
+ * Must be used within a MobileProvider. Returns comprehensive
+ * responsive state for making UI decisions.
+ * 
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { isMobile, useMobileUI, breakpoint } = useMobileContext();
+ *   
+ *   return useMobileUI ? <MobileView /> : <DesktopView />;
+ * }
+ * ```
+ */
+export function useMobileContext(): MobileContextValue {
+  const context = useContext(MobileContext);
+  
+  if (context === undefined) {
+    // Return default value if used outside provider (graceful degradation)
+    console.warn(
+      'useMobileContext was used outside of MobileProvider. ' +
+      'Wrap your app with <MobileProvider> for full mobile support.'
+    );
+    return defaultContextValue;
+  }
+  
+  return context;
+}
+
+/**
+ * withMobileContext - HOC to inject mobile context as props
+ * 
+ * For class components or when you prefer props over hooks.
+ * 
+ * @example
+ * ```tsx
+ * interface Props {
+ *   mobile: MobileContextValue;
+ * }
+ * 
+ * class MyComponent extends React.Component<Props> {
+ *   render() {
+ *     const { isMobile } = this.props.mobile;
+ *     return isMobile ? <Mobile /> : <Desktop />;
+ *   }
+ * }
+ * 
+ * export default withMobileContext(MyComponent);
+ * ```
+ */
+export function withMobileContext<P extends { mobile: MobileContextValue }>(
+  Component: React.ComponentType<P>
+) {
+  const displayName = Component.displayName || Component.name || 'Component';
+
+  const WrappedComponent = (props: Omit<P, 'mobile'>) => {
+    const mobile = useMobileContext();
+    return <Component {...(props as P)} mobile={mobile} />;
+  };
+
+  WrappedComponent.displayName = `withMobileContext(${displayName})`;
+
+  return WrappedComponent;
+}
+
+/**
+ * MobileOnly - Renders children only on mobile devices
+ * 
+ * @example
+ * ```tsx
+ * <MobileOnly>
+ *   <BottomNavigation items={navItems} />
+ * </MobileOnly>
+ * ```
+ */
+export function MobileOnly({ children }: { children: ReactNode }) {
+  const { useMobileUI } = useMobileContext();
+  return useMobileUI ? <>{children}</> : null;
+}
+
+/**
+ * DesktopOnly - Renders children only on desktop devices
+ * 
+ * @example
+ * ```tsx
+ * <DesktopOnly>
+ *   <Sidebar items={navItems} />
+ * </DesktopOnly>
+ * ```
+ */
+export function DesktopOnly({ children }: { children: ReactNode }) {
+  const { useMobileUI } = useMobileContext();
+  return useMobileUI ? null : <>{children}</>;
+}
+
+/**
+ * Responsive - Renders different content based on device type
+ * 
+ * @example
+ * ```tsx
+ * <Responsive
+ *   mobile={<MobileNavigation />}
+ *   tablet={<TabletNavigation />}
+ *   desktop={<DesktopNavigation />}
+ * />
+ * ```
+ */
+export function Responsive({
+  mobile,
+  tablet,
+  desktop,
+}: {
+  mobile?: ReactNode;
+  tablet?: ReactNode;
+  desktop?: ReactNode;
+}) {
+  const { isMobile, isTablet, isDesktop } = useMobileContext();
+
+  if (isMobile && mobile) return <>{mobile}</>;
+  if (isTablet && tablet) return <>{tablet}</>;
+  if (isDesktop && desktop) return <>{desktop}</>;
+  
+  // Fallback: desktop -> tablet -> mobile
+  if (isDesktop) return <>{desktop || tablet || mobile}</>;
+  if (isTablet) return <>{tablet || mobile || desktop}</>;
+  return <>{mobile || tablet || desktop}</>;
+}
+
+export default MobileContext;