@tsiky/components-r19 1.0.0

package/src/components/SideComponent/PatientEditor.tsx

@@ -0,0 +1,64 @@
+import React, { useRef } from 'react';
+import SideComponent, { type SideComponentRef } from './SideComponent';
+import './SideComponent.css';
+
+export const PatientEditor: React.FC = () => {
+  const editorRef = useRef<SideComponentRef | null>(null);
+
+  return (
+    <div style={{ padding: 24 }}>
+      <h3>Card with inline drawer (parent must be position: relative)</h3>
+
+      <div
+        style={{
+          marginTop: 12,
+          position: 'relative',
+          border: '1px solid #e6e6e6',
+          padding: 16,
+          borderRadius: 8,
+          minHeight: 480,
+        }}
+      >
+        <div style={{ marginTop: 12 }}>
+          <button
+            onClick={() => editorRef.current?.open()}
+            style={{
+              padding: '8px 12px',
+              borderRadius: 6,
+              background: '#0b84ff',
+              color: '#fff',
+              border: 'none',
+            }}
+          >
+            Edit
+          </button>
+        </div>
+
+        <SideComponent
+          ref={editorRef}
+          title='Edit Patient'
+          subtitle='John WICK - IEP: 26'
+          size='360px'
+        >
+          <div style={{ padding: 16 }}>
+            <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, textAlign: 'left' }}>Bed*</label>
+              <div className='select-wrapper'>
+                <select>
+                  <option>Select a bed</option>
+                </select>
+              </div>
+            </div>
+          </div>
+        </SideComponent>
+      </div>
+    </div>
+  );
+};
+
+export default PatientEditor;

package/src/components/SideComponent/SideComponent.css

@@ -0,0 +1,179 @@
+/* inline root (parent must be position: relative) */
+.scp-inline-root {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 999;
+}
+/* root activé uniquement quand quelque chose est visible */
+.scp-inline-root.open {
+  pointer-events: none; /* <-- on ne réactive pas directement ici */
+}
+
+/* overlay */
+.scp-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(24, 27, 31, 0.45);
+  opacity: 0;
+  transition: opacity 250ms cubic-bezier(0.2, 0.9, 0.2, 1);
+  pointer-events: none;
+}
+.scp-overlay.visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* panel */
+.scp-panel {
+  position: absolute;
+  pointer-events: none;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 420px;
+  max-width: 100%;
+  background: #ffffff;
+  box-shadow: -20px 0 40px rgba(16, 24, 40, 0.12);
+  transform: translateX(110%);
+  opacity: 0;
+  transition:
+    transform 250ms cubic-bezier(0.2, 0.9, 0.2, 1),
+    opacity 250ms cubic-bezier(0.2, 0.9, 0.2, 1);
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  z-index: 4;
+  pointer-events: none;
+}
+
+.scp-panel.interactive {
+  pointer-events: auto;
+}
+
+/* visible state: slide in + fade in */
+.scp-panel.in {
+  transform: translateX(0%);
+  opacity: 1;
+  pointer-events: auto;
+}
+.scp-panel.out {
+  transform: translateX(110%);
+  opacity: 0;
+}
+
+/* header, body, etc. (unchanged) */
+.scp-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 20px 22px;
+  border-bottom: 1px solid #eef0f2;
+  background: #fff;
+  z-index: 5;
+}
+.scp-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #111827;
+}
+.scp-subtitle {
+  margin-top: 6px;
+  font-size: 13px;
+  color: #55606a;
+}
+.scp-close {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  padding: 6px;
+  color: #667080;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.scp-body {
+  padding: 20px 24px;
+  flex: 1 1 auto;
+  min-height: 0;
+  background: #fff;
+}
+
+/* footer helper */
+.scp-footer {
+  position: sticky;
+  bottom: 0;
+  background: #fff;
+  padding: 12px 24px;
+  border-top: 1px solid #eee;
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  z-index: 6;
+}
+
+/* select wrapper */
+.select-wrapper {
+  position: relative;
+  display: block;
+  margin-bottom: 0.5rem;
+}
+.scp-body select,
+.select-wrapper select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  width: 100%;
+  padding: 10px 44px 10px 12px;
+  border-radius: 6px;
+  border: 1px solid #d8dce0;
+  background-color: #fff;
+  box-sizing: border-box;
+  font-size: 14px;
+  color: #111827;
+}
+.select-wrapper::after {
+  content: '';
+  position: absolute;
+  right: 14px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 12px;
+  height: 8px;
+  pointer-events: none;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23667080' d='M6 8L0 0h12z'/></svg>");
+  background-repeat: no-repeat;
+  background-size: 12px 8px;
+  opacity: 1;
+}
+
+/* focus */
+*:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
+:focus-visible {
+  outline: none;
+}
+button:focus-visible,
+input:focus-visible,
+textarea:focus-visible,
+select:focus-visible,
+.select-wrapper select:focus-visible,
+.scp-close:focus-visible {
+  box-shadow: 0 0 0 3px rgba(11, 132, 255, 0.12);
+  border-color: rgba(11, 132, 255, 0.85);
+  border-radius: 6px;
+  transition:
+    box-shadow 160ms ease,
+    border-color 160ms ease;
+}
+
+/* responsive */
+@media (max-width: 640px) {
+  .scp-panel {
+    width: 100% !important;
+  }
+}