@tsiky/components-r19 1.0.0

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

@@ -0,0 +1,547 @@
+/**
+ * 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'],
+};