@tsiky/components-r19 1.3.0 → 1.3.1

package/src/components/NavBar/NavBar.stories.tsx

@@ -1,169 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { NavBar } from './NavBar';
-import { NavProvider } from './NavContext';
-
-const meta = {
-  title: 'Components/NavBar',
-  component: NavBar,
-  parameters: {
-    layout: 'fullscreen',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    items: {
-      control: 'object',
-      description: 'Array of navigation items',
-      table: {
-        category: 'Content',
-      },
-    },
-    highlightColor: {
-      control: 'color',
-      description: 'Highlight color for active items',
-      table: {
-        category: 'Appearance',
-      },
-    },
-    onNavClick: {
-      action: 'navItemClicked',
-      description: 'Callback function when a navigation item is clicked',
-      table: {
-        category: 'Events',
-      },
-    },
-  },
-  args: {
-    onNavClick: (item: string) => console.log(`Clicked on ${item}`),
-    items: [
-      { id: 'home', label: 'Home' },
-      { id: 'about', label: 'About' },
-      { id: 'services', label: 'Services' },
-      { id: 'contact', label: 'Contact' },
-    ],
-  },
-  decorators: [
-    (Story) => (
-      <NavProvider>
-        <div style={{ padding: '20px', background: '#f5f5f5', minHeight: '100px' }}>
-          <Story />
-        </div>
-      </NavProvider>
-    ),
-  ],
-} satisfies Meta<typeof NavBar>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    highlightColor: '#008CBA',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Default navigation bar with basic navigation items',
-      },
-    },
-  },
-};
-
-export const WithLinks: Story = {
-  args: {
-    items: [
-      { id: 'home', label: 'Home', href: '/' },
-      { id: 'about', label: 'About', href: '/about' },
-      { id: 'services', label: 'Services', href: '/services' },
-      { id: 'contact', label: 'Contact', href: '/contact' },
-    ],
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Navigation bar with items that function as links',
-      },
-    },
-  },
-};
-
-export const WithCustomHighlight: Story = {
-  args: {
-    highlightColor: '#ff5733',
-    items: [
-      { id: 'home', label: 'Home' },
-      { id: 'about', label: 'About' },
-      { id: 'services', label: 'Services' },
-      { id: 'contact', label: 'Contact' },
-    ],
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Navigation bar with custom highlight color for active items',
-      },
-    },
-  },
-};
-
-export const ManyItems: Story = {
-  args: {
-    items: [
-      { id: 'home', label: 'Home' },
-      { id: 'about', label: 'About' },
-      { id: 'services', label: 'Services' },
-      { id: 'products', label: 'Products' },
-      { id: 'blog', label: 'Blog' },
-      { id: 'gallery', label: 'Gallery' },
-      { id: 'testimonials', label: 'Testimonials' },
-      { id: 'team', label: 'Our Team' },
-      { id: 'careers', label: 'Careers' },
-      { id: 'contact', label: 'Contact Us' },
-    ],
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Navigation bar with many items that will trigger mobile view on smaller screens',
-      },
-    },
-  },
-};
-
-export const MobileView: Story = {
-  args: {
-    items: [
-      { id: 'home', label: 'Home' },
-      { id: 'about', label: 'About' },
-      { id: 'services', label: 'Services' },
-      { id: 'contact', label: 'Contact' },
-    ],
-  },
-  parameters: {
-    viewport: {
-      defaultViewport: 'mobile1',
-    },
-    docs: {
-      description: {
-        story: 'Navigation bar in mobile view with dropdown menu',
-      },
-    },
-  },
-};
-
-export const MixedItems: Story = {
-  args: {
-    items: [
-      { id: 'home', label: 'Home', href: '/' },
-      { id: 'about', label: 'About' },
-      { id: 'services', label: 'Services', href: '/services' },
-      { id: 'contact', label: 'Contact' },
-    ],
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Navigation bar with a mix of items with and without href attributes',
-      },
-    },
-  },
-};

package/src/components/NavBar/NavBar.tsx

@@ -1,100 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import './NavBar.css';
-import { NavItem } from '../NavItem/NavItem';
-import type { NavItemType } from '../NavItem/NavItem';
-import { useNavigation } from './NavContext';
-
-export type NavBarProps = {
-  items: NavItemType[];
-  onNavClick?: (id: string) => void;
-  highlightColor?: string;
-  moduleConfig?: Record<string, boolean>;
-};
-
-export const NavBar: React.FC<NavBarProps> = ({
-  items,
-  onNavClick,
-  highlightColor = '#008CBA',
-  moduleConfig = {},
-}) => {
-  const { activeNav } = useNavigation();
-  const [isMobile, setIsMobile] = useState(true);
-  const [dropdownOpen, setDropdownOpen] = useState(false);
-  const navRef = useRef<HTMLDivElement | null>(null);
-
-  useEffect(() => {
-    const checkNavSize = () => {
-      if (navRef.current && navRef.current.parentElement) {
-        const parentWidth = navRef.current.parentNode?.parentElement?.offsetWidth || 0;
-        setIsMobile(parentWidth * 0.2 < navRef.current.offsetWidth);
-      }
-    };
-
-    checkNavSize();
-    window.addEventListener('resize', checkNavSize);
-
-    return () => window.removeEventListener('resize', checkNavSize);
-  }, []);
-
-  const handleClick = (id: string) => {
-    onNavClick?.(id);
-    setDropdownOpen(false);
-  };
-
-  const activeItem = items.find((item) => item.id === activeNav) || items[0];
-
-  return (
-    <div ref={navRef}>
-      {isMobile ? (
-        <div className='navbar-mobile'>
-          <button
-            className='navbar-dropdown-toggle'
-            onClick={() => setDropdownOpen(!dropdownOpen)}
-            style={{ backgroundColor: highlightColor, color: '#fff' }}
-          >
-            {activeItem.label}
-            <span className={`dropdown-arrow ${dropdownOpen ? 'open' : ''}`}></span>
-          </button>
-
-          {dropdownOpen && (
-            <div className='navbar-dropdown'>
-              {items.map((item) => (
-                <NavItem
-                  key={item.id}
-                  id={item.id}
-                  label={item.label}
-                  href={item.moduleKey && moduleConfig[item.moduleKey] ? item.href : undefined}
-                  isActive={
-                    activeNav === item.id &&
-                    item.moduleKey !== undefined &&
-                    moduleConfig[item.moduleKey]
-                  }
-                  onClick={handleClick}
-                  highlightColor={highlightColor}
-                />
-              ))}
-            </div>
-          )}
-        </div>
-      ) : (
-        <nav className='navbar'>
-          {items.map((item) => (
-            <NavItem
-              key={item.id}
-              id={item.id}
-              label={item.label}
-              href={item.moduleKey && moduleConfig[item.moduleKey] ? item.href : undefined}
-              isActive={
-                activeNav === item.id &&
-                item.moduleKey !== undefined &&
-                moduleConfig[item.moduleKey]
-              }
-              onClick={handleClick}
-              highlightColor={highlightColor}
-            />
-          ))}
-        </nav>
-      )}
-    </div>
-  );
-};

package/src/components/NavBar/NavContext.tsx

@@ -1,30 +0,0 @@
-// context/NavContext.tsx
-import React, { createContext, useContext, useState, type ReactNode } from 'react';
-
-interface NavContextType {
-  activeNav: string;
-  setActiveNav: (id: string) => void;
-  activeSubNav: string;
-  setActiveSubNav: (id: string) => void;
-}
-
-const NavContext = createContext<NavContextType | undefined>(undefined);
-export const useNavigation = () => {
-  const ctx = useContext(NavContext);
-  if (!ctx) throw new Error('useNavigation must be used within a NavProvider');
-  return ctx;
-};
-
-export const NavProvider: React.FC<{ children: ReactNode; defaultActive?: string }> = ({
-  children,
-  defaultActive = '',
-}) => {
-  const [activeNav, setActiveNav] = useState<string>(defaultActive);
-  const [activeSubNav, setActiveSubNav] = useState<string>(defaultActive);
-
-  return (
-    <NavContext.Provider value={{ activeNav, setActiveNav, activeSubNav, setActiveSubNav }}>
-      {children}
-    </NavContext.Provider>
-  );
-};

package/src/components/NavItem/NavItem.css

@@ -1,29 +0,0 @@
-/* item de nav */
-.nav-item {
-  text-decoration: none;
-  padding: 10px 12px;
-  border-radius: 8px;
-  cursor: pointer;
-  transition:
-    background 180ms ease,
-    transform 120ms ease,
-    color 180ms ease;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  background: rgba(0, 0, 0, 0.04);
-  transform: translateY(-1px);
-  color: rgba(0, 0, 0, 0.1);
-}
-
-/* item actif : pill rempli */
-.nav-item.active,
-.nav-item[aria-current='page'] {
-  background: var(--highlightColor, #1387c8);
-  box-shadow: 0 6px 18px rgba(19, 135, 200, 0.14);
-}
-
-/* si tu veux un style lien <a> différent (évite outlines moches) */
-.nav-item:focus {
-  outline: none;
-  box-shadow: 0 0 0 3px rgba(19, 135, 200, 0.12);
-}

package/src/components/NavItem/NavItem.tsx

@@ -1,58 +0,0 @@
-import React from 'react';
-import './NavItem.css';
-import { useNavigation } from '../NavBar';
-
-export type NavItemType = {
-  id: string;
-  label: string;
-  isActive?: boolean;
-  onClick?: (id: string) => void;
-  href?: string;
-  highlightColor?: string;
-  moduleKey?: string;
-};
-
-export const NavItem: React.FC<NavItemType> = ({
-  id,
-  label,
-  isActive = false,
-  onClick,
-  href,
-  highlightColor = '#008CBA',
-  moduleKey = '',
-  ...props
-}) => {
-  // Determine which element to render
-  const { setActiveNav } = useNavigation();
-  const handleClick = () => {
-    setActiveNav(id); // ✅ met à jour la nav active
-    onClick?.(id); // ✅ appelle le callback externe si défini
-  };
-  if (href) {
-    // Render as anchor tag if href is provided and no onClick handler
-    return (
-      <a
-        href={href}
-        className={`nav-item ${isActive ? 'active' : ''}`}
-        style={isActive ? { backgroundColor: highlightColor, color: '#fff' } : {}}
-        onClick={handleClick}
-        {...props}
-      >
-        {label}
-      </a>
-    );
-  } else {
-    return (
-      <div
-        className={`nav-item ${isActive ? 'active' : ''}`}
-        style={isActive ? { backgroundColor: highlightColor, color: '#fff' } : {}}
-        onClick={handleClick}
-        role={onClick ? 'button' : 'presentation'}
-        tabIndex={onClick ? 0 : -1}
-        {...props}
-      >
-        {label}
-      </div>
-    );
-  }
-};

package/src/components/NavItem/index.ts

@@ -1 +0,0 @@
-export * from './NavItem';

package/src/components/Page/Dashboard.tsx

@@ -1,93 +0,0 @@
-import React from 'react';
-import BandChart, { type BandChartData, type BandChartConfig } from '../BandChart';
-
-const chartData: BandChartData = {
-  labels: [
-    '00h',
-    '01h',
-    '02h',
-    '03h',
-    '04h',
-    '05h',
-    '06h',
-    '07h',
-    '08h',
-    '09h',
-    '10h',
-    '11h',
-    '12h',
-    '13h',
-    '14h',
-    '15h',
-    '16h',
-    '17h',
-    '18h',
-    '19h',
-    '20h',
-    '21h',
-    '22h',
-    '23h',
-  ],
-  // prédictions principales (main) = moyenne des admissions attendues
-  main: [3, 2, 1, 1, 1, 2, 4, 7, 11, 14, 18, 20, 18, 17, 16, 16, 17, 18, 17, 15, 12, 10, 8, 6],
-
-  // borne supérieure (upper) = main + variation
-  upper: [5, 3, 2, 2, 2, 4, 7, 11, 16, 20, 25, 28, 24, 22, 21, 21, 23, 24, 22, 19, 15, 13, 10, 8],
-
-  // borne inférieure (lower) = main - variation (min 0)
-  lower: [2, 1, 0, 0, 0, 1, 3, 5, 8, 11, 14, 15, 15, 14, 13, 13, 14, 15, 14, 12, 10, 8, 6, 5],
-
-  // histogram = valeurs observées réelles (avec bruit et quelques dépassements aux pics)
-  histogram: [2, 1, 1, 0, 0, 1, 3, 6, 10, 13, 16, 22, 17, 15, 14, 15, 16, 17, 15, 14, 11, 10, 7, 5],
-};
-
-const config: BandChartConfig = {
-  rangeBands: [
-    {
-      id: 'Ongoing',
-      lowerKey: 'lower',
-      upperKey: 'upper',
-      visible: true,
-      color: '#cbd7ea',
-      opacity: 0.22,
-    },
-  ],
-  lines: [
-    { id: 'Max', key: 'upper', label: 'Max', visible: true, color: '#082b4d', width: 1 },
-    {
-      id: 'Predictions',
-      key: 'main',
-      label: 'Predictions',
-      visible: true,
-      color: '#6fb0ff',
-      width: 1.5,
-    },
-    { id: 'Min', key: 'lower', label: 'Min', visible: true, color: '#082b4d', width: 1, dash: 6 },
-  ],
-  showHistogram: true,
-  histogramKey: 'histogram',
-  histogramColor: '#6f6f6f',
-  bubble: {
-    visible: true,
-    values: [2, 1, 1, 0, 0, 1, 3, 6, 10, 13, 16, 22, 17, 15, 14, 15, 16, 17, 15, 14, 11, 10, 7, 5], // ex: correct predictions positions
-    size: 4,
-  },
-  displayCondition: null,
-  responsive: true,
-};
-
-const Dashboard: React.FC = () => (
-  <div
-    style={{
-      border: '1px solid #ccc',
-      borderRadius: '18px',
-      padding: '0px 30px',
-      backgroundColor: '#fff',
-    }}
-  >
-    <h2 style={{ marginBottom: 15, textAlign: 'left', fontStyle: 'normal' }}>Admissions 14.08</h2>
-    <BandChart data={chartData} config={config} height={350} />
-  </div>
-);
-
-export default Dashboard;

package/src/components/Page/Page.stories.ts

@@ -1,33 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { expect, userEvent, within } from 'storybook/test';
-
-import { Page } from './Page';
-
-const meta = {
-  title: 'Example/Page',
-  component: Page,
-  parameters: {
-    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-    layout: 'fullscreen',
-  },
-} satisfies Meta<typeof Page>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const LoggedOut: Story = {};
-
-// More on component testing: https://storybook.js.org/docs/writing-tests/interaction-testing
-export const LoggedIn: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const loginButton = canvas.getByRole('button', { name: /Log in/i });
-    await expect(loginButton).toBeInTheDocument();
-    await userEvent.click(loginButton);
-    await expect(loginButton).not.toBeInTheDocument();
-
-    const logoutButton = canvas.getByRole('button', { name: /Log out/i });
-    await expect(logoutButton).toBeInTheDocument();
-  },
-};

package/src/components/Page/Page.tsx

@@ -1,73 +0,0 @@
-import React from 'react';
-
-import { Header } from '../Header/Header';
-import './page.css';
-
-type User = {
-  name: string;
-};
-
-export const Page: React.FC = () => {
-  const [user, setUser] = React.useState<User>();
-
-  return (
-    <article>
-      <Header
-        user={user}
-        onLogin={() => setUser({ name: 'Jane Doe' })}
-        onLogout={() => setUser(undefined)}
-        onCreateAccount={() => setUser({ name: 'Jane Doe' })}
-      />
-
-      <section className='storybook-page'>
-        <h2>Pages in Storybook</h2>
-        <p>
-          We recommend building UIs with a{' '}
-          <a href='https://componentdriven.org' target='_blank' rel='noopener noreferrer'>
-            <strong>component-driven</strong>
-          </a>{' '}
-          process starting with atomic components and ending with pages.
-        </p>
-        <p>
-          Render pages with mock data. This makes it easy to build and review page states without
-          needing to navigate to them in your app. Here are some handy patterns for managing page
-          data in Storybook:
-        </p>
-        <ul>
-          <li>
-            Use a higher-level connected component. Storybook helps you compose such data from the
-            "args" of child component stories
-          </li>
-          <li>
-            Assemble data in the page component from your services. You can mock these services out
-            using Storybook.
-          </li>
-        </ul>
-        <p>
-          Get a guided tutorial on component-driven development at{' '}
-          <a href='https://storybook.js.org/tutorials/' target='_blank' rel='noopener noreferrer'>
-            Storybook tutorials
-          </a>
-          . Read more in the{' '}
-          <a href='https://storybook.js.org/docs' target='_blank' rel='noopener noreferrer'>
-            docs
-          </a>
-          .
-        </p>
-        <div className='tip-wrapper'>
-          <span className='tip'>Tip</span> Adjust the width of the canvas with the{' '}
-          <svg width='10' height='10' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'>
-            <g fill='none' fillRule='evenodd'>
-              <path
-                d='M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z'
-                id='a'
-                fill='#999'
-              />
-            </g>
-          </svg>
-          Viewports addon in the toolbar
-        </div>
-      </section>
-    </article>
-  );
-};

package/src/components/Page/page.css

@@ -1,81 +0,0 @@
-.storybook-page {
-  margin: 0 auto;
-  padding: 48px 20px;
-  max-width: 600px;
-  color: #333;
-  font-family: var(--font-primary);
-  font-size: var(--text-small); /* remplace 14px */
-  line-height: 1.6; /* équivalent à 24px pour 14px */
-}
-
-.storybook-page h2 {
-  display: inline-block;
-  vertical-align: top;
-  margin: 0 0 0.25rem; /* remplace 4px */
-  font-family: var(--font-primary);
-  font-weight: var(--font-bold); /* remplace 700 */
-  font-size: var(--h2); /* remplace 32px */
-  line-height: 1;
-}
-
-.storybook-page p {
-  font-family: var(--font-primary);
-  font-size: var(--text-paragraph); /* remplace la taille statique des paragraphes */
-  line-height: 1.6;
-  margin: 1em 0;
-}
-
-.storybook-page a {
-  color: inherit;
-  font-family: var(--font-primary);
-}
-
-.storybook-page ul {
-  margin: 1em 0;
-  padding-left: 1.875rem; /* 30px → en rem approximatif */
-  font-family: var(--font-primary);
-  font-size: var(--text-paragraph);
-  line-height: 1.6;
-}
-
-.storybook-page li {
-  margin-bottom: 0.5rem; /* 8px → en rem */
-  font-family: var(--font-primary);
-  font-size: var(--text-paragraph);
-  line-height: 1.6;
-}
-
-.storybook-page .tip {
-  display: inline-block;
-  vertical-align: top;
-  margin-right: 0.625rem; /* 10px → rem */
-  border-radius: 1em;
-  background: #e7fdd8;
-  padding: 0.25rem 0.75rem; /* 4px 12px → rem */
-  color: #357a14;
-  font-family: var(--font-primary);
-  font-weight: var(--font-bold); /* 700 */
-  font-size: var(--text-small); /* 11px → arrondi sur --text-small */
-  line-height: 1.1; /* 12px → approx */
-}
-
-.storybook-page .tip-wrapper {
-  margin-top: 2.5rem; /* 40px → rem */
-  margin-bottom: 2.5rem;
-  font-family: var(--font-primary);
-  font-size: var(--text-small); /* 13px → arrondi sur --text-small */
-  line-height: 1.5; /* 20px → approx */
-}
-
-.storybook-page .tip-wrapper svg {
-  display: inline-block;
-  vertical-align: top;
-  margin-top: 0.1875rem; /* 3px → rem */
-  margin-right: 0.25rem; /* 4px → rem */
-  width: 0.75rem; /* 12px → rem */
-  height: 0.75rem; /* 12px → rem */
-}
-
-.storybook-page .tip-wrapper svg path {
-  fill: #1ea7fd;
-}