@tsiky/components-r19 1.0.0

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

@@ -0,0 +1,169 @@
+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

@@ -0,0 +1,100 @@
+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.6 < 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

@@ -0,0 +1,30 @@
+// 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/NavBar/index.ts

@@ -0,0 +1,2 @@
+export * from './NavBar';
+export * from './NavContext';

package/src/components/NavItem/NavItem.css

@@ -0,0 +1,29 @@
+/* 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

@@ -0,0 +1,58 @@
+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

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

package/src/components/Page/Dashboard.tsx

@@ -0,0 +1,93 @@
+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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,73 @@
+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

@@ -0,0 +1,81 @@
+.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;
+}