lupine.components 1.1.21 → 1.1.22

package/src/demo/demo-registry.ts

@@ -0,0 +1,54 @@
+import { DemoStory } from './demo-types';
+import { buttonDemo } from '../components/button-demo';
+import { buttonPushAnimationDemo } from '../components/button-push-animation-demo';
+import { toggleSwitchDemo } from '../components/toggle-switch-demo';
+import { spinnerDemo } from '../components/spinner-demo';
+import { starsDemo } from '../components/stars-component-demo';
+import { editableLabelDemo } from '../components/editable-label-demo';
+import { progressDemo } from '../components/progress-demo';
+import { radioLabelDemo } from '../components/radio-label-demo';
+import { selectAngleDemo } from '../components/select-angle-demo';
+import { switchOptionDemo } from '../components/switch-option-demo';
+import { actionSheetDemo } from '../components/action-sheet-demo';
+import { selectWithTitleDemo } from '../components/select-with-title-demo';
+import { inputWithTitleDemo } from '../components/input-with-title-demo';
+import { tabsDemo } from '../components/tabs-demo';
+import { modalDemo } from '../components/modal-demo';
+import { popupMenuDemo } from '../components/popup-menu-demo';
+import { noticeMessageDemo } from '../components/notice-message-demo';
+import { resizableSplitterDemo } from '../components/resizable-splitter-demo';
+import { redirectDemo } from '../components/redirect-demo';
+import { textWaveDemo } from '../components/text-wave-demo';
+import { textScaleDemo } from '../components/text-scale-demo';
+import { textGlowDemo } from '../components/text-glow-demo';
+import { togglePlayButtonDemo } from '../components/toggle-play-button-demo';
+import { toggleButtonDemo } from '../components/toggle-button-demo';
+import { messageBoxDemo } from '../components/message-box-demo';
+
+export const demoRegistry: Record<string, DemoStory<any>> = {
+  [buttonDemo.id]: buttonDemo,
+  [buttonPushAnimationDemo.id]: buttonPushAnimationDemo,
+  [toggleSwitchDemo.id]: toggleSwitchDemo,
+  [spinnerDemo.id]: spinnerDemo,
+  [starsDemo.id]: starsDemo,
+  [editableLabelDemo.id]: editableLabelDemo,
+  [progressDemo.id]: progressDemo,
+  [radioLabelDemo.id]: radioLabelDemo,
+  [selectAngleDemo.id]: selectAngleDemo,
+  [switchOptionDemo.id]: switchOptionDemo,
+  [actionSheetDemo.id]: actionSheetDemo,
+  [selectWithTitleDemo.id]: selectWithTitleDemo,
+  [inputWithTitleDemo.id]: inputWithTitleDemo,
+  [tabsDemo.id]: tabsDemo,
+  [modalDemo.id]: modalDemo,
+  [popupMenuDemo.id]: popupMenuDemo,
+  [noticeMessageDemo.id]: noticeMessageDemo,
+  [resizableSplitterDemo.id]: resizableSplitterDemo,
+  [redirectDemo.id]: redirectDemo,
+  [textWaveDemo.id]: textWaveDemo,
+  [textScaleDemo.id]: textScaleDemo,
+  [textGlowDemo.id]: textGlowDemo,
+  [togglePlayButtonDemo.id]: togglePlayButtonDemo,
+  [toggleButtonDemo.id]: toggleButtonDemo,
+  [messageBoxDemo.id]: messageBoxDemo,
+};

package/src/demo/demo-render-page.tsx

@@ -0,0 +1,54 @@
+import { CssProps, HtmlVar, isFrontEnd, PageProps } from 'lupine.components';
+import { demoRegistry } from './demo-registry';
+
+export const DemoRenderPage = async (props: PageProps) => {
+  const dom = new HtmlVar(
+    (
+      <div
+        css={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          width: '100%',
+          height: '100vh',
+          color: 'var(--text-color, #333)',
+        }}
+      >
+        Loading component preview...
+      </div>
+    )
+  );
+
+  if (isFrontEnd()) {
+    const urlParams = new URL(window.location.href).searchParams;
+    const id = urlParams.get('id');
+    const story = id ? demoRegistry[id] : null;
+
+    if (story) {
+      // First render using the correct context
+      dom.value = story.render(story.args);
+
+      (window as any)._lj_demo_hook = {
+        updateArgs: (newArgs: any) => {
+          dom.value = story.render(newArgs);
+        },
+      };
+    } else {
+      dom.value = <div>Component not found</div>;
+    }
+  }
+
+  const css: CssProps = {
+    width: '100%',
+    height: '100%',
+    // Reset any body margins if they exist, though typically handled by global css
+    margin: 0,
+    padding: 'var(--space-m, 16px)',
+    boxSizing: 'border-box',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center', // Center components by default
+  };
+
+  return <div css={css}>{dom.node}</div>;
+};

package/src/demo/demo-types.ts

@@ -0,0 +1,21 @@
+import { VNode } from 'lupine.components';
+
+export type DemoControlType = 'text' | 'boolean' | 'select' | 'number';
+
+export type DemoArgType<T = any> = {
+  control: DemoControlType;
+  options?: T[]; // For 'select'
+  description?: string;
+};
+
+export type DemoArgTypes<TArgs> = {
+  [K in keyof TArgs]?: DemoArgType<TArgs[K]>;
+};
+
+export interface DemoStory<TArgs> {
+  id: string;
+  text: string;
+  args: TArgs;
+  argTypes?: DemoArgTypes<TArgs>;
+  render: (args: TArgs) => VNode;
+}