@tsiky/components-r19 1.3.0 → 1.3.1

package/src/components/Alert/AlertContext.tsx

@@ -1,200 +0,0 @@
-import React, {
-  createContext,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type ReactNode,
-} from 'react';
-import { createPortal } from 'react-dom';
-import { Alert, type AlertModel } from './Alert';
-
-// --- Types -------------------------------------------------
-export type ShowAlertOptions = {
-  text: string;
-  subtext?: string;
-  model?: AlertModel;
-  icon?: string;
-  background?: string;
-  colorTextPrimary?: string;
-  colorTextSub?: string;
-  duration?: number; // ms (if 0 or undefined = use defaultDuration; if -1 => never auto-dismiss)
-};
-
-export type AlertItem = ShowAlertOptions & {
-  id: string;
-  createdAt: number;
-};
-
-export type AlertsContextValue = {
-  showAlert: (opts: ShowAlertOptions) => string;
-  dismissAlert: (id: string) => void;
-  updateAlert: (id: string, patch: Partial<ShowAlertOptions>) => void;
-  clearAlerts: () => void;
-  setContainerRef: (el: HTMLElement | null) => void;
-  getAlertsSnapshot: () => AlertItem[];
-};
-
-// --- Context -------------------------------------------------
-const AlertsContext = createContext<AlertsContextValue | null>(null);
-
-// --- Helpers -------------------------------------------------
-const genId = (prefix = 'alert') => `${prefix}_${Math.random().toString(36).slice(2, 9)}`;
-
-// --- Provider -------------------------------------------------
-export const AlertsProvider: React.FC<{
-  children?: ReactNode;
-  defaultDuration?: number; // ms
-  maxAlerts?: number; // initial max limit (undefined => unlimited)
-}> = ({ children, defaultDuration = 5000, maxAlerts: initialMax }) => {
-  const [alerts, setAlerts] = useState<AlertItem[]>([]);
-  const timeouts = useRef(new Map<string, number>());
-  const containerRef = useRef<HTMLElement | null>(null);
-  const externalContainerRef = useRef<HTMLElement | null>(null);
-  const maxAlertsRef = useRef<number | undefined>(initialMax);
-
-  useEffect(() => {
-    return () => {
-      // cleanup timeouts on unmount
-      timeouts.current.forEach((t) => window.clearTimeout(t));
-      timeouts.current.clear();
-    };
-  }, []);
-
-  // --- internal helpers
-  const scheduleAutoDismiss = (id: string, duration?: number) => {
-    // duration === -1 => never auto dismiss
-    const d = duration === undefined || duration === 0 ? defaultDuration : duration;
-    if (d === -1) return;
-    const t = window.setTimeout(() => {
-      dismissAlert(id);
-    }, d);
-    timeouts.current.set(id, t);
-  };
-
-  const cancelAutoDismiss = (id: string) => {
-    const t = timeouts.current.get(id);
-    if (t) {
-      window.clearTimeout(t);
-      timeouts.current.delete(id);
-    }
-  };
-
-  const showAlert = (opts: ShowAlertOptions) => {
-    const id = genId();
-    const item: AlertItem = { ...opts, id, createdAt: Date.now() };
-
-    setAlerts((prev) => {
-      // newest first => unshift-like
-      const next = [item, ...prev];
-      const max = maxAlertsRef.current;
-      if (typeof max === 'number' && max >= 0 && next.length > max) {
-        // remove oldest (end of array)
-        const removed = next.slice(max);
-        // clear their timeouts
-        removed.forEach((r) => cancelAutoDismiss(r.id));
-        return next.slice(0, max);
-      }
-      return next;
-    });
-
-    // schedule dismissal
-    scheduleAutoDismiss(id, opts.duration);
-
-    return id;
-  };
-
-  const dismissAlert = (id: string) => {
-    cancelAutoDismiss(id);
-    setAlerts((prev) => prev.filter((a) => a.id !== id));
-  };
-
-  const updateAlert = (id: string, patch: Partial<ShowAlertOptions>) => {
-    setAlerts((prev) => prev.map((a) => (a.id === id ? { ...a, ...patch } : a)));
-  };
-
-  const clearAlerts = () => {
-    timeouts.current.forEach((t) => window.clearTimeout(t));
-    timeouts.current.clear();
-    setAlerts([]);
-  };
-
-  const setContainerRef = (el: HTMLElement | null) => {
-    externalContainerRef.current = el;
-  };
-
-  const getAlertsSnapshot = () => alerts.slice();
-
-  const value = useMemo<AlertsContextValue>(
-    () => ({
-      showAlert,
-      dismissAlert,
-      updateAlert,
-      clearAlerts,
-      setContainerRef,
-      getAlertsSnapshot,
-    }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [alerts]
-  );
-
-  // decide which container to render into
-  const target = externalContainerRef.current;
-  const alertsList = (
-    <>
-      {alerts.map((a) => (
-        <Alert
-          key={a.id}
-          id={a.id}
-          text={a.text}
-          subtext={a.subtext}
-          icon={a.icon}
-          background={a.background}
-          colorTextPrimary={a.colorTextPrimary}
-          colorTextSub={a.colorTextSub}
-          model={a.model}
-          onClose={() => dismissAlert(a.id)}
-          size='100%'
-        />
-      ))}
-    </>
-  );
-  const alertsNode = (
-    <div
-      ref={(el) => {
-        if (!externalContainerRef.current) containerRef.current = el;
-      }}
-      style={{
-        width: '100%',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 5,
-        ...(alerts.length && { padding: '20px' }),
-      }}
-      aria-live='polite'
-    >
-      {alertsList}
-    </div>
-  );
-
-  return (
-    <AlertsContext.Provider value={value}>
-      {target ? createPortal(alertsList, target) : alertsNode}
-      {children}
-    </AlertsContext.Provider>
-  );
-};
-
-// --- Hook -------------------------------------------------
-export const useAlerts = (): AlertsContextValue => {
-  const ctx = useContext(AlertsContext);
-  if (!ctx) throw new Error('useAlerts must be used inside an AlertsProvider');
-  return ctx;
-};
-
-// --- Minimal CSS (you can move to Alert.css) --------------
-// .alert-container { display:flex; flex-direction:column; gap:8px; align-items:stretch; padding:8px; /* decorative only - NOT positioned */ }
-// .alert { border-radius:8px; padding:8px 12px; box-shadow:0 6px 18px rgba(0,0,0,0.06); display:flex; gap:8px; align-items:center; }
-
-export default AlertsProvider;

package/src/components/Alert/AlertModels.ts

@@ -1,34 +0,0 @@
-import type { AlertModel } from './Alert';
-
-export const alertModels: Record<string, AlertModel> = {
-  default: {
-    background: '#f3f4f6',
-    icon: 'Info',
-    colorTextPrimary: '#111827',
-    colorTextSub: '#4b5563',
-  },
-  info: {
-    background: '#dbeafe',
-    icon: 'Info',
-    colorTextPrimary: '#1e40af',
-    colorTextSub: '#3b82f6',
-  },
-  success: {
-    background: '#dcfce7',
-    icon: 'CheckCircle2',
-    colorTextPrimary: '#166534',
-    colorTextSub: '#22c55e',
-  },
-  warning: {
-    background: '#fef3c7',
-    icon: 'AlertTriangle',
-    colorTextPrimary: '#92400e',
-    colorTextSub: '#f59e0b',
-  },
-  error: {
-    background: '#fee2e2',
-    icon: 'XCircle',
-    colorTextPrimary: '#991b1b',
-    colorTextSub: '#ef4444',
-  },
-};

package/src/components/AnnouncementPanel/FlexRowContainer.css

@@ -1,17 +0,0 @@
-.frc-root {
-  display: flex;
-  gap: var(--frc-gap, 12px);
-  flex-wrap: wrap;
-}
-
-.frc-item {
-  box-sizing: border-box;
-  display: flex;
-  flex: 1 1 auto;
-  min-width: min-content;
-}
-
-.frc-item > * {
-  width: 100%;
-  min-width: 0;
-}

package/src/components/AnnouncementPanel/FlexRowContainer.stories.tsx

@@ -1,329 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { ArrowUp, ArrowDown, TrendingUp, Users } from 'lucide-react';
-import { FlexRowContainer } from './FlexRowContainer';
-import { ListContentContainer } from './ListContentContainer';
-import { CounterListBox } from './ListBox/CounterListBox';
-import { SimpleListBox } from './ListBox/SimpleListBox';
-import { TrendListBox } from './ListBox/TrendListBox';
-
-const meta: Meta<typeof FlexRowContainer> = {
-  title: 'Components/FlexRowContainer',
-  component: FlexRowContainer,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component:
-          'An adaptive flex container that allows children to take their natural size and wrap to new lines when needed.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    gap: {
-      control: 'text',
-      description: 'Space between items',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const AdaptiveDashboard: Story = {
-  name: 'Adaptive Dashboard',
-  args: {
-    gap: '1.5rem',
-    style: {
-      padding: '2rem',
-      background: '#f8fafc',
-    },
-  },
-  render: (args) => (
-    <FlexRowContainer {...args}>
-      {/* Small counter box */}
-      <ListContentContainer background='#0ea5e9'>
-        <CounterListBox title='Patients' data={[['63', 'Total']]} badgeColor='#0ea5e9' />
-      </ListContentContainer>
-
-      {/* Medium box with multiple lists */}
-      <ListContentContainer background='#0ea5e9'>
-        <SimpleListBox
-          title='Available beds'
-          data={[
-            ['MED', '21 beds'],
-            ['SURG', '2 beds'],
-            ['ER', '12 beds'],
-          ]}
-        />
-        <SimpleListBox title='Overdue patients' data={['623152385 - MED', '623168542 - SURG']} />
-        <SimpleListBox title='Overdue patients' data={['623152385 - MED', '623168542 - SURG']} />
-        <SimpleListBox title='Overdue patients' data={['623152385 - MED', '623168542 - SURG']} />
-      </ListContentContainer>
-
-      {/* Large trend box */}
-      <ListContentContainer background='#0ea5e9'>
-        <TrendListBox
-          title='3h Trend'
-          items={[
-            { label: 'MED', value: '+3', delta: 3, icon: <ArrowUp size={16} /> },
-            { label: 'SURG', value: '-2', delta: -2, icon: <ArrowDown size={16} /> },
-            { label: 'ER', value: '+5', delta: 5, icon: <ArrowUp size={16} /> },
-            { label: 'PED', value: '+1', delta: 1, icon: <ArrowUp size={16} /> },
-          ]}
-        />
-      </ListContentContainer>
-
-      {/* Very wide box */}
-      <ListContentContainer background='#0ea5e9'>
-        <SimpleListBox
-          title='General information'
-          data={[
-            'All services are operating normally',
-            'Planned maintenance tonight at 10pm',
-            'Daily report available',
-          ]}
-        />
-      </ListContentContainer>
-    </FlexRowContainer>
-  ),
-};
-
-export const MixedSizes: Story = {
-  name: 'Mixed Content Sizes',
-  args: {
-    gap: '1rem',
-    style: {
-      padding: '1.5rem',
-      background: '#f1f5f9',
-    },
-  },
-  render: (args) => (
-    <FlexRowContainer {...args}>
-      {/* Tiny box */}
-      <ListContentContainer background='#10b981'>
-        <CounterListBox title='Alerts' data={[['3', 'Critical']]} badgeColor='#ef4444' />
-      </ListContentContainer>
-
-      {/* Small box */}
-      <ListContentContainer background='#10b981'>
-        <TrendListBox
-          title='Stats'
-          items={[{ label: 'Up', value: '+5', icon: <ArrowUp size={14} /> }]}
-        />
-      </ListContentContainer>
-
-      {/* Medium box */}
-      <ListContentContainer background='#10b981'>
-        <SimpleListBox
-          title='Status'
-          data={[
-            ['System', 'Operational'],
-            ['Database', 'Connected'],
-          ]}
-        />
-      </ListContentContainer>
-
-      {/* Large box */}
-      <ListContentContainer background='#10b981'>
-        <CounterListBox
-          title='Details'
-          data={[
-            ['156', 'Orders processed'],
-            ['42', 'New customers'],
-            ['24', 'Pending'],
-            ['8', 'Overdue'],
-          ]}
-          badgeColor='#8b5cf6'
-        />
-      </ListContentContainer>
-
-      {/* Extra large box */}
-      <ListContentContainer background='#10b981'>
-        <TrendListBox
-          title='Detailed Performance'
-          items={[
-            { label: 'Response time', value: '125ms', delta: -12, icon: <ArrowDown size={16} /> },
-            { label: 'CPU usage', value: '45%', delta: 2, icon: <ArrowUp size={16} /> },
-            { label: 'Memory', value: '68%', delta: 5, icon: <ArrowUp size={16} /> },
-            { label: 'Storage', value: '82%', delta: 8, icon: <ArrowUp size={16} /> },
-          ]}
-        />
-      </ListContentContainer>
-    </FlexRowContainer>
-  ),
-};
-
-export const BusinessAdaptive: Story = {
-  name: 'Business Adaptive Layout',
-  args: {
-    gap: '1.5rem',
-    style: {
-      padding: '2rem',
-      background: '#f8fafc',
-      minHeight: '100vh',
-    },
-  },
-  render: (args) => (
-    <FlexRowContainer {...args}>
-      {/* Sales metrics */}
-      <ListContentContainer background='#0ea5e9'>
-        <CounterListBox
-          title='Sales'
-          data={[
-            ['156', 'Orders'],
-            ['€2.4K', 'Revenue'],
-            ['42', 'Customers'],
-          ]}
-          badgeColor='#0ea5e9'
-        />
-      </ListContentContainer>
-
-      {/* Performance trends */}
-      <ListContentContainer background='#0ea5e9'>
-        <TrendListBox
-          title='Performance'
-          items={[
-            { label: 'Revenue', value: '+12%', delta: 12, icon: <TrendingUp size={16} /> },
-            { label: 'Users', value: '+8%', delta: 8, icon: <Users size={16} /> },
-            { label: 'Engagement', value: '-2%', delta: -2, icon: <ArrowDown size={16} /> },
-          ]}
-        />
-      </ListContentContainer>
-
-      {/* Quick stats */}
-      <ListContentContainer background='#0ea5e9'>
-        <SimpleListBox
-          title='Quick metrics'
-          data={[
-            ['Conversion rate', '3.2%'],
-            ['Average order value', '€68.50'],
-            ['Customer satisfaction', '4.8/5'],
-          ]}
-        />
-      </ListContentContainer>
-
-      {/* System status */}
-      <ListContentContainer background='#0ea5e9'>
-        <SimpleListBox
-          title='System status'
-          data={['All services operational', 'Backup successful', 'Update available']}
-        />
-      </ListContentContainer>
-
-      {/* Detailed analytics */}
-      <ListContentContainer background='#0ea5e9'>
-        <TrendListBox
-          title='Detailed analytics'
-          items={[
-            { label: 'New signups', value: '24', delta: 4, icon: <ArrowUp size={16} /> },
-            { label: 'Retention', value: '88%', delta: 2, icon: <ArrowUp size={16} /> },
-            { label: 'Bounce rate', value: '32%', delta: -3, icon: <ArrowDown size={16} /> },
-            { label: 'Avg. session time', value: '4:12', delta: 0.5, icon: <ArrowUp size={16} /> },
-          ]}
-        />
-      </ListContentContainer>
-    </FlexRowContainer>
-  ),
-};
-
-export const CompactAdaptive: Story = {
-  name: 'Compact Adaptive',
-  args: {
-    gap: '0.8rem',
-    style: {
-      padding: '1rem',
-      background: '#f1f5f9',
-    },
-  },
-  render: (args) => (
-    <FlexRowContainer {...args}>
-      <ListContentContainer background='#0ea5e9'>
-        <CounterListBox title='Active' data={[['42', 'Users']]} badgeColor='#0ea5e9' />
-      </ListContentContainer>
-
-      <ListContentContainer background='#0ea5e9'>
-        <SimpleListBox title='Status' data={['System normal']} />
-      </ListContentContainer>
-
-      <ListContentContainer background='#0ea5e9'>
-        <TrendListBox
-          title='Trends'
-          items={[
-            { label: 'Up', value: '+3', icon: <ArrowUp size={14} /> },
-            { label: 'Down', value: '-1', icon: <ArrowDown size={14} /> },
-          ]}
-        />
-      </ListContentContainer>
-
-      <ListContentContainer background='#0ea5e9'>
-        <CounterListBox title='Alerts' data={[['2', 'Minor']]} badgeColor='#f59e0b' />
-      </ListContentContainer>
-    </FlexRowContainer>
-  ),
-};
-
-export const ResponsiveBehavior: Story = {
-  name: 'Responsive Behavior Demo',
-  args: {
-    gap: '1rem',
-    style: {
-      padding: '1.5rem',
-      background: '#f8fafc',
-      border: '2px dashed #cbd5e1',
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'This demo shows how items naturally wrap to new lines based on their content size and available space. Resize the browser window to see the adaptive behavior.',
-      },
-    },
-  },
-  render: (args) => (
-    <div>
-      <div
-        style={{
-          textAlign: 'center',
-          marginBottom: '1rem',
-          color: '#64748b',
-          fontStyle: 'italic',
-        }}
-      >
-        ↓ Resize the window to see adaptive behavior ↓
-      </div>
-      <FlexRowContainer {...args}>
-        <ListContentContainer background='#0ea5e9'>
-          <SimpleListBox title='Small' data={['Short content']} />
-        </ListContentContainer>
-
-        <ListContentContainer background='#0ea5e9'>
-          <SimpleListBox title='Medium' data={['Medium-length content', 'Another line here']} />
-        </ListContentContainer>
-
-        <ListContentContainer background='#0ea5e9'>
-          <SimpleListBox
-            title='Large'
-            data={[
-              'Very long content that takes more space',
-              'Another line with extra text',
-              'Yet another line to show behavior',
-            ]}
-          />
-        </ListContentContainer>
-
-        <ListContentContainer background='#0ea5e9'>
-          <SimpleListBox
-            title='Extra Large'
-            data={[
-              'Extremely long content that will take up a lot of width in the layout',
-              'A second line also with lots of text for demonstration',
-              'Third line to complete the showcase',
-            ]}
-          />
-        </ListContentContainer>
-      </FlexRowContainer>
-    </div>
-  ),
-};

package/src/components/AnnouncementPanel/FlexRowContainer.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import './FlexRowContainer.css';
-
-export type FlexRowContainerProps = {
-  className?: string;
-  style?: React.CSSProperties;
-  children?: React.ReactNode; // normally ListContentContainer nodes
-  gap?: string;
-};
-
-export const FlexRowContainer: React.FC<FlexRowContainerProps> = ({
-  className = '',
-  style = {},
-  children,
-  gap = '1rem',
-}) => {
-  return (
-    <div className={`frc-root ${className}`} style={{ ...style, ['--frc-gap' as any]: gap }}>
-      {React.Children.map(children, (child) => (
-        <div className='frc-item'>{child}</div>
-      ))}
-    </div>
-  );
-};

package/src/components/AnnouncementPanel/ListBox/CounterListBox.css

@@ -1,56 +0,0 @@
-.clb-root {
-  padding: 0.125rem;
-}
-.clb-title {
-  font-weight: var(--font-bold);
-  padding: 0.0625rem 0.125rem;
-  margin-bottom: 0.0625rem;
-}
-
-.clb-grid {
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-}
-
-.clb-row {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--col-gap, 0.5rem);
-  align-items: center;
-  padding: 0;
-}
-
-.clb-badge-col {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-}
-.counter-badge {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 9999px;
-  color: #fff;
-  min-width: 0;
-  white-space: nowrap;
-  line-height: 1;
-  padding: 0.25rem 0.5rem;
-  box-sizing: border-box;
-}
-.clb-text {
-  padding: 0.25rem 0;
-  min-width: 0;
-  overflow: hidden;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-}
-
-.clb-fullrow {
-  grid-column: 1 / -1;
-  padding: 0.25rem 0.125rem;
-  text-align: center;
-}
-.clb-empty-badge {
-  min-height: 1px;
-}