@tsiky/components-r19 1.3.0 → 1.3.1

package/src/components/SideComponent/SideComponent.stories.tsx

@@ -1,547 +0,0 @@
-/**
- * Notes:
- * - SideComponent is inline-only and covers its parent. Parent MUST have `position: relative`.
- * - No external focus-trap used here. If you install `focus-trap-react`, you can
- *   integrate it inside the component and add a story for it.
- */
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import React, { useRef, useEffect, useState } from 'react';
-import SideComponent, { type SideComponentRef, type SideComponentProps } from './SideComponent';
-import './SideComponent.css';
-
-const meta: Meta<typeof SideComponent> = {
-  title: 'Components/SideComponent',
-  component: SideComponent,
-  parameters: { layout: 'padded' },
-  tags: ['autodocs'],
-  argTypes: {
-    title: { control: 'text' },
-    subtitle: { control: 'text' },
-    size: { control: 'text' },
-    closeOnOverlayClick: { control: 'boolean' },
-    showCloseButton: { control: 'boolean' },
-  },
-};
-export default meta;
-type Story = StoryObj<typeof SideComponent>;
-
-/* Shared example content used by many stories */
-const ExampleContent = (
-  <div style={{ padding: 16, minHeight: 480 }}>
-    <div style={{ background: '#eef6fb', padding: 12, borderRadius: 6, marginBottom: 12 }}>
-      <strong>GENDER : M</strong> <span style={{ marginLeft: 18 }} /> <strong>AGE : 42</strong>
-    </div>
-
-    <div style={{ marginBottom: 12 }}>
-      <label style={{ display: 'block', marginBottom: 6 }}>Destination*</label>
-      <div className='select-wrapper'>
-        <select>
-          <option>Select a destination</option>
-          <option>Cardiology</option>
-          <option>Geriatrics</option>
-        </select>
-      </div>
-    </div>
-
-    <div style={{ marginTop: 8 }}>
-      <div style={{ marginBottom: 6, fontWeight: 600 }}>Stretchering</div>
-      <label style={{ display: 'block', marginBottom: 6 }}>
-        <input type='radio' name='s' defaultChecked /> No
-      </label>
-      <label style={{ display: 'block', marginBottom: 6 }}>
-        <input type='radio' name='s' /> By Saniia
-      </label>
-      <label style={{ display: 'block' }}>
-        <input type='radio' name='s' /> Yes
-      </label>
-    </div>
-  </div>
-);
-
-/** 1) DefaultOpen — opens on mount for quick visual check */
-export const DefaultOpen: Story = {
-  render: (args) => {
-    const ref = React.createRef<SideComponentRef>();
-    useEffect(() => {
-      ref.current?.open();
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    return (
-      <div
-        style={{
-          width: 700,
-          margin: '24px auto',
-          position: 'relative',
-          border: '1px solid #e6e6e6',
-          padding: 16,
-          minHeight: 480,
-        }}
-      >
-        <p style={{ marginTop: 0 }}>
-          Parent container — SideComponent will cover only this parent.
-        </p>
-        <SideComponent ref={ref} {...(args as SideComponentProps)}>
-          {ExampleContent}
-        </SideComponent>
-      </div>
-    );
-  },
-  args: {
-    title: 'Edit Patient',
-    subtitle: 'John WICK - IEP: 26',
-    size: '420px',
-  },
-  tags: ['autodocs'],
-};
-
-/** 2) WithButton — open/close using an external button (typical usage) */
-export const WithButton: Story = {
-  render: () => {
-    const ref = useRef<SideComponentRef | null>(null);
-    return (
-      <div
-        style={{
-          width: 700,
-          margin: '24px auto',
-          position: 'relative',
-          border: '1px solid #e6e6e6',
-          padding: 16,
-          minHeight: 480,
-        }}
-      >
-        <p style={{ marginTop: 0 }}>Click the button to open the inline drawer:</p>
-        <button
-          onClick={() => ref.current?.open()}
-          style={{
-            padding: '8px 12px',
-            borderRadius: 6,
-            background: '#0b84ff',
-            color: '#fff',
-            border: 'none',
-            cursor: 'pointer',
-          }}
-        >
-          Open editor
-        </button>
-
-        <SideComponent ref={ref} title='Edit Patient' subtitle='John WICK - IEP: 26' size='420px'>
-          {ExampleContent}
-        </SideComponent>
-      </div>
-    );
-  },
-  tags: ['autodocs'],
-};
-
-/** 3) WithFooter — sticky footer for actions (save/cancel) */
-export const WithFooter: Story = {
-  render: () => {
-    const ref = useRef<SideComponentRef | null>(null);
-    return (
-      <div
-        style={{
-          width: 700,
-          margin: '24px auto',
-          position: 'relative',
-          border: '1px solid #e6e6e6',
-          padding: 16,
-          minHeight: 480,
-        }}
-      >
-        <p style={{ marginTop: 0 }}>Long content + sticky footer demonstration.</p>
-        <button onClick={() => ref.current?.open()}>Open (with footer)</button>
-
-        <SideComponent ref={ref} title='Edit Patient' subtitle='John WICK - IEP: 26' size='420px'>
-          <div style={{ padding: 16 }}>
-            <p>Scrollable content area (to demonstrate footer stickiness):</p>
-            <div style={{ height: 380, background: '#fff', marginBottom: 12 }} />
-            <div style={{ height: 200, background: '#f9fafb' }} />
-          </div>
-
-          <div className='scp-footer'>
-            <button onClick={() => ref.current?.close()}>Cancel</button>
-            <button
-              style={{
-                background: '#0b84ff',
-                color: '#fff',
-                border: 'none',
-                padding: '8px 12px',
-                borderRadius: 6,
-              }}
-            >
-              Save
-            </button>
-          </div>
-        </SideComponent>
-      </div>
-    );
-  },
-  tags: ['autodocs'],
-};
-
-/** 4) SizeVariants — show small/medium/percentage sizes */
-export const SizeVariants: Story = {
-  render: () => {
-    const refSmall = useRef<SideComponentRef | null>(null);
-    const refPercent = useRef<SideComponentRef | null>(null);
-    return (
-      <div style={{ display: 'flex', gap: 16, width: '100%', justifyContent: 'center' }}>
-        <div
-          style={{
-            width: 380,
-            position: 'relative',
-            border: '1px solid #e6e6e6',
-            padding: 12,
-            minHeight: 480,
-          }}
-        >
-          <button onClick={() => refSmall.current?.open()}>Open 300px</button>
-          <SideComponent ref={refSmall} title='Small' size='300px'>
-            <div style={{ padding: 12 }}>Small panel (300px)</div>
-          </SideComponent>
-        </div>
-
-        <div
-          style={{
-            width: 700,
-            position: 'relative',
-            border: '1px solid #e6e6e6',
-            padding: 12,
-            minHeight: 480,
-          }}
-        >
-          <button onClick={() => refPercent.current?.open()}>Open 60%</button>
-          <SideComponent ref={refPercent} title='60%' size='60%'>
-            <div style={{ padding: 12 }}>60% width of parent</div>
-          </SideComponent>
-        </div>
-      </div>
-    );
-  },
-  tags: ['autodocs'],
-};
-
-/** 5) MultipleInstances — independent drawers in the same page */
-export const MultipleInstances: Story = {
-  render: () => {
-    const refA = useRef<SideComponentRef | null>(null);
-    const refB = useRef<SideComponentRef | null>(null);
-    return (
-      <div style={{ display: 'flex', gap: 24, padding: 24 }}>
-        <div
-          style={{
-            width: 360,
-            position: 'relative',
-            border: '1px solid #e6e6e6',
-            padding: 12,
-            minHeight: 480,
-          }}
-        >
-          <p>Box A</p>
-          <button onClick={() => refA.current?.open()}>Open A</button>
-          <SideComponent ref={refA} title='Panel A' size='320px'>
-            <div style={{ padding: 12 }}>Content A</div>
-          </SideComponent>
-        </div>
-
-        <div
-          style={{
-            width: 420,
-            position: 'relative',
-            border: '1px solid #e6e6e6',
-            padding: 12,
-            minHeight: 480,
-          }}
-        >
-          <p>Box B</p>
-          <button onClick={() => refB.current?.open()}>Open B</button>
-          <SideComponent ref={refB} title='Panel B' size='360px'>
-            <div style={{ padding: 12 }}>Content B</div>
-          </SideComponent>
-        </div>
-      </div>
-    );
-  },
-  tags: ['autodocs'],
-};
-
-/** 6) FormWithValidation — form inside the drawer with simple validation */
-export const FormWithValidation: Story = {
-  render: () => {
-    const ref = useRef<SideComponentRef | null>(null);
-    const [name, setName] = useState('');
-    const [error, setError] = useState<string | null>(null);
-
-    const onSave = () => {
-      if (name.trim().length < 3) {
-        setError('Name must be at least 3 characters');
-        return;
-      }
-      setError(null);
-      // simulate save and close
-      setTimeout(() => ref.current?.close(), 300);
-    };
-
-    return (
-      <div
-        style={{
-          width: 700,
-          margin: 24,
-          position: 'relative',
-          border: '1px solid #e6e6e6',
-          padding: 12,
-          minHeight: 480,
-        }}
-      >
-        <button onClick={() => ref.current?.open()}>Open form</button>
-        <SideComponent ref={ref} title='Edit Patient' size='420px'>
-          <div style={{ padding: 16 }}>
-            <label style={{ display: 'block', marginBottom: 6 }}>Full name</label>
-            <input
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              style={{ width: '100%', padding: 8, marginBottom: 8 }}
-            />
-            {error && <div style={{ color: 'crimson', marginBottom: 8 }}>{error}</div>}
-            <div style={{ display: 'flex', gap: 8 }}>
-              <button onClick={() => ref.current?.close()}>Cancel</button>
-              <button
-                onClick={onSave}
-                style={{
-                  background: '#0b84ff',
-                  color: '#fff',
-                  border: 'none',
-                  padding: '8px 12px',
-                  borderRadius: 6,
-                }}
-              >
-                Save
-              </button>
-            </div>
-          </div>
-        </SideComponent>
-      </div>
-    );
-  },
-  tags: ['autodocs'],
-};
-
-/** 7) AsyncContent — show loader then content (simulate remote data) */
-export const AsyncContent: Story = {
-  render: () => {
-    const ref = useRef<SideComponentRef | null>(null);
-    const [loading, setLoading] = useState(false);
-    const [data, setData] = useState<string | null>(null);
-
-    const openAndLoad = () => {
-      ref.current?.open();
-      setLoading(true);
-      setData(null);
-      setTimeout(() => {
-        setData('Loaded patient data from server (simulated).');
-        setLoading(false);
-      }, 1000);
-    };
-
-    return (
-      <div
-        style={{
-          width: 700,
-          margin: 24,
-          position: 'relative',
-          border: '1px solid #e6e6e6',
-          padding: 12,
-          minHeight: 480,
-        }}
-      >
-        <button onClick={openAndLoad}>Open (async)</button>
-        <SideComponent ref={ref} title='Edit Patient (async)' size='420px'>
-          <div style={{ padding: 16 }}>
-            {loading ? (
-              <div>Loading…</div>
-            ) : (
-              <div>{data ?? 'No data yet. Click open to load.'}</div>
-            )}
-          </div>
-        </SideComponent>
-      </div>
-    );
-  },
-  tags: ['autodocs'],
-};
-
-/** 8) Themed — pass custom inline style and className to customize look */
-export const Themed: Story = {
-  render: () => {
-    const ref = useRef<SideComponentRef | null>(null);
-    return (
-      <div
-        style={{
-          width: 700,
-          margin: 24,
-          position: 'relative',
-          border: '1px solid #e6e6e6',
-          padding: 12,
-          minHeight: 480,
-        }}
-      >
-        <button onClick={() => ref.current?.open()}>Open themed</button>
-        <SideComponent
-          ref={ref}
-          title='Custom Theme'
-          size='420px'
-          style={{ background: '#fffaf0' }}
-          className='my-custom-side'
-        >
-          <div style={{ padding: 16 }}>
-            This panel uses inline style and a custom class (declare .my-custom-side in your CSS).
-          </div>
-        </SideComponent>
-      </div>
-    );
-  },
-  tags: ['autodocs'],
-};
-
-/** 9) RTL — show the drawer in a right-to-left context (wrap parent with dir="rtl") */
-export const RTLExample: Story = {
-  render: () => {
-    const ref = useRef<SideComponentRef | null>(null);
-    return (
-      <div
-        dir='rtl'
-        style={{
-          width: 700,
-          margin: 24,
-          position: 'relative',
-          border: '1px solid #e6e6e6',
-          padding: 12,
-          minHeight: 480,
-        }}
-      >
-        <p>
-          Parent with dir="rtl" — note how content direction changes. The drawer still anchors to
-          parent right edge (logical start/end may differ).
-        </p>
-        <button onClick={() => ref.current?.open()}>Open (RTL)</button>
-        <SideComponent ref={ref} title='RTL Example' size='360px'>
-          <div style={{ padding: 16 }}>RTL content</div>
-        </SideComponent>
-      </div>
-    );
-  },
-  tags: ['autodocs'],
-};
-
-/** 10) KeyboardNavigation — show tabbable controls inside and test keyboard focus */
-export const KeyboardNavigation: Story = {
-  render: () => {
-    const ref = useRef<SideComponentRef | null>(null);
-    return (
-      <div
-        style={{
-          width: 700,
-          margin: 24,
-          position: 'relative',
-          border: '1px solid #e6e6e6',
-          padding: 12,
-          minHeight: 480,
-        }}
-      >
-        <p>Open the drawer and use Tab to move through focusable elements.</p>
-        <button onClick={() => ref.current?.open()}>Open (Keyboard)</button>
-        <SideComponent ref={ref} title='Keyboard Nav' size='420px'>
-          <div style={{ padding: 16 }}>
-            <input
-              placeholder='First name'
-              style={{ display: 'block', marginBottom: 8, width: '100%' }}
-            />
-            <input
-              placeholder='Last name'
-              style={{ display: 'block', marginBottom: 8, width: '100%' }}
-            />
-            <select style={{ display: 'block', marginBottom: 8, width: '100%' }}>
-              <option>Option A</option>
-              <option>Option B</option>
-            </select>
-            <button style={{ marginRight: 8 }}>Action</button>
-            <a href='#' onClick={(e) => e.preventDefault()} style={{ marginLeft: 8 }}>
-              Link
-            </a>
-          </div>
-        </SideComponent>
-      </div>
-    );
-  },
-  tags: ['autodocs'],
-};
-
-/** 11) NestedTrigger — open drawer from inside the parent (e.g. inline contextual action) */
-export const NestedTrigger: Story = {
-  render: () => {
-    const ref = useRef<SideComponentRef | null>(null);
-    return (
-      <div
-        style={{
-          width: 700,
-          margin: 24,
-          position: 'relative',
-          border: '1px solid #e6e6e6',
-          padding: 12,
-          minHeight: 480,
-        }}
-      >
-        <div style={{ display: 'flex', gap: 12 }}>
-          <div style={{ flex: 1 }}>
-            <p>Parent content</p>
-            <div style={{ marginTop: 8 }}>
-              <button onClick={() => ref.current?.open()}>Open inline (nested)</button>
-            </div>
-          </div>
-        </div>
-
-        <SideComponent ref={ref} title='Nested trigger' size='360px'>
-          <div style={{ padding: 16 }}>
-            <p>Opened from a trigger inside the parent. Good for contextual editors.</p>
-          </div>
-        </SideComponent>
-      </div>
-    );
-  },
-  tags: ['autodocs'],
-};
-
-/** 12) Playground — modify args in Controls, then click Open */
-export const Playground: Story = {
-  render: (args) => {
-    const ref = useRef<SideComponentRef | null>(null);
-    return (
-      <div
-        style={{
-          width: 700,
-          margin: 24,
-          position: 'relative',
-          border: '1px solid #e6e6e6',
-          padding: 12,
-          minHeight: 480,
-        }}
-      >
-        <div style={{ marginBottom: 12 }}>
-          <small>Change the controls (title/size/etc.) in the panel then click Open.</small>
-        </div>
-        <button onClick={() => ref.current?.open()}>Open (Playground)</button>
-        <SideComponent ref={ref} {...(args as SideComponentProps)}>
-          {ExampleContent}
-        </SideComponent>
-      </div>
-    );
-  },
-  args: {
-    title: 'Edit Patient (Playground)',
-    subtitle: 'John WICK - IEP: 26',
-    size: '420px',
-    closeOnOverlayClick: true,
-    showCloseButton: true,
-  },
-  tags: ['autodocs'],
-};