@sellmate/design-system-react 0.0.11 → 0.0.13

package/lib/components/sd-portal.ts

@@ -0,0 +1,24 @@
+'use client';
+
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+
+/* eslint-disable */
+
+import { SdPortal as SdPortalElement, defineCustomElement as defineSdPortal } from "@sellmate/design-system/dist/components/sd-portal.js";
+import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+
+export type SdPortalEvents = { onSdClose: EventName<CustomEvent<void>> };
+
+export const SdPortal: StencilReactComponent<SdPortalElement, SdPortalEvents> = /*@__PURE__*/ createComponent<SdPortalElement, SdPortalEvents>({
+    tagName: 'sd-portal',
+    elementClass: SdPortalElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onSdClose: 'sdClose' } as SdPortalEvents,
+    defineCustomElement: defineSdPortal
+});

package/lib/components/sd-select-option.server.ts

@@ -0,0 +1,38 @@
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+
+/* eslint-disable */
+
+// @ts-ignore - ignore potential type issues as the project is importing itself
+import * as clientComponents from '@sellmate/design-system-react';
+
+import { type SdSelectOptionCustomEvent, type SelectOption } from "@sellmate/design-system";
+import { SdSelectOption as SdSelectOptionElement } from "@sellmate/design-system/dist/components/sd-select-option.js";
+import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { createComponent, type HydrateModule, type ReactWebComponent, type SerializeShadowRootOptions } from '@stencil/react-output-target/ssr';
+
+export const serializeShadowRoot: SerializeShadowRootOptions = { default: "declarative-shadow-dom" };
+
+export type SdSelectOptionEvents = {
+    onOptionClick: EventName<SdSelectOptionCustomEvent<{
+        option: SelectOption;
+        index: number;
+        event: MouseEvent;
+    }>>
+};
+
+export const SdSelectOption: StencilReactComponent<SdSelectOptionElement, SdSelectOptionEvents> = /*@__PURE__*/ createComponent<SdSelectOptionElement, SdSelectOptionEvents>({
+    tagName: 'sd-select-option',
+    properties: {
+        index: 'index',
+        isSelected: 'is-selected',
+        isFocused: 'is-focused',
+        disabled: 'disabled',
+        useCheckbox: 'use-checkbox'
+    },
+    hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
+    clientModule: clientComponents.SdSelectOption as ReactWebComponent<SdSelectOptionElement, SdSelectOptionEvents>,
+    serializeShadowRoot,
+});

package/lib/components/sd-select-option.ts

@@ -0,0 +1,31 @@
+'use client';
+
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+
+/* eslint-disable */
+
+import { type SdSelectOptionCustomEvent, type SelectOption } from "@sellmate/design-system";
+import { SdSelectOption as SdSelectOptionElement, defineCustomElement as defineSdSelectOption } from "@sellmate/design-system/dist/components/sd-select-option.js";
+import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+
+export type SdSelectOptionEvents = {
+    onOptionClick: EventName<SdSelectOptionCustomEvent<{
+        option: SelectOption;
+        index: number;
+        event: MouseEvent;
+    }>>
+};
+
+export const SdSelectOption: StencilReactComponent<SdSelectOptionElement, SdSelectOptionEvents> = /*@__PURE__*/ createComponent<SdSelectOptionElement, SdSelectOptionEvents>({
+    tagName: 'sd-select-option',
+    elementClass: SdSelectOptionElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onOptionClick: 'optionClick' } as SdSelectOptionEvents,
+    defineCustomElement: defineSdSelectOption
+});

package/lib/components/sd-select.server.ts

@@ -0,0 +1,39 @@
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+
+/* eslint-disable */
+
+// @ts-ignore - ignore potential type issues as the project is importing itself
+import * as clientComponents from '@sellmate/design-system-react';
+
+import { type SdSelectCustomEvent, type SelectEvents } from "@sellmate/design-system";
+import { SdSelect as SdSelectElement } from "@sellmate/design-system/dist/components/sd-select.js";
+import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { createComponent, type HydrateModule, type ReactWebComponent, type SerializeShadowRootOptions } from '@stencil/react-output-target/ssr';
+
+export const serializeShadowRoot: SerializeShadowRootOptions = { default: "declarative-shadow-dom" };
+
+export type SdSelectEvents = {
+    onSdChange: EventName<SdSelectCustomEvent<SelectEvents['sdChange']>>,
+    onDropDownShow: EventName<SdSelectCustomEvent<SelectEvents['dropDownShow']>>
+};
+
+export const SdSelect: StencilReactComponent<SdSelectElement, SdSelectEvents> = /*@__PURE__*/ createComponent<SdSelectElement, SdSelectEvents>({
+    tagName: 'sd-select',
+    properties: {
+        value: 'value',
+        label: 'label',
+        placeholder: 'placeholder',
+        optionPlaceholder: 'option-placeholder',
+        width: 'width',
+        dropdownHeight: 'dropdown-height',
+        disabled: 'disabled',
+        clearable: 'clearable',
+        searchable: 'searchable'
+    },
+    hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
+    clientModule: clientComponents.SdSelect as ReactWebComponent<SdSelectElement, SdSelectEvents>,
+    serializeShadowRoot,
+});

package/lib/components/sd-select.ts

@@ -0,0 +1,31 @@
+'use client';
+
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+
+/* eslint-disable */
+
+import { type SdSelectCustomEvent, type SelectEvents } from "@sellmate/design-system";
+import { SdSelect as SdSelectElement, defineCustomElement as defineSdSelect } from "@sellmate/design-system/dist/components/sd-select.js";
+import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+
+export type SdSelectEvents = {
+    onSdChange: EventName<SdSelectCustomEvent<SelectEvents['sdChange']>>,
+    onDropDownShow: EventName<SdSelectCustomEvent<SelectEvents['dropDownShow']>>
+};
+
+export const SdSelect: StencilReactComponent<SdSelectElement, SdSelectEvents> = /*@__PURE__*/ createComponent<SdSelectElement, SdSelectEvents>({
+    tagName: 'sd-select',
+    elementClass: SdSelectElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onSdChange: 'sdChange',
+        onDropDownShow: 'dropDownShow'
+    } as SdSelectEvents,
+    defineCustomElement: defineSdSelect
+});

package/lib/components/sd-table.server.ts

@@ -0,0 +1,36 @@
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+
+/* eslint-disable */
+
+// @ts-ignore - ignore potential type issues as the project is importing itself
+import * as clientComponents from '@sellmate/design-system-react';
+
+import { type Row, type SdTableCustomEvent } from "@sellmate/design-system";
+import { SdTable as SdTableElement } from "@sellmate/design-system/dist/components/sd-table.js";
+import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { createComponent, type HydrateModule, type ReactWebComponent, type SerializeShadowRootOptions } from '@stencil/react-output-target/ssr';
+
+export const serializeShadowRoot: SerializeShadowRootOptions = { default: "declarative-shadow-dom" };
+
+export type SdTableEvents = {
+    onSdSelectChange: EventName<SdTableCustomEvent<Row[]>>,
+    onSdPageChange: EventName<CustomEvent<number>>
+};
+
+export const SdTable: StencilReactComponent<SdTableElement, SdTableEvents> = /*@__PURE__*/ createComponent<SdTableElement, SdTableEvents>({
+    tagName: 'sd-table',
+    properties: {
+        rowKey: 'row-key',
+        selectable: 'selectable',
+        resizable: 'resizable',
+        height: 'height',
+        stickyHeader: 'sticky-header',
+        noDataLabel: 'no-data-label'
+    },
+    hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
+    clientModule: clientComponents.SdTable as ReactWebComponent<SdTableElement, SdTableEvents>,
+    serializeShadowRoot,
+});

package/lib/components/sd-table.ts

@@ -0,0 +1,31 @@
+'use client';
+
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+
+/* eslint-disable */
+
+import { type Row, type SdTableCustomEvent } from "@sellmate/design-system";
+import { SdTable as SdTableElement, defineCustomElement as defineSdTable } from "@sellmate/design-system/dist/components/sd-table.js";
+import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+
+export type SdTableEvents = {
+    onSdSelectChange: EventName<SdTableCustomEvent<Row[]>>,
+    onSdPageChange: EventName<CustomEvent<number>>
+};
+
+export const SdTable: StencilReactComponent<SdTableElement, SdTableEvents> = /*@__PURE__*/ createComponent<SdTableElement, SdTableEvents>({
+    tagName: 'sd-table',
+    elementClass: SdTableElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onSdSelectChange: 'sdSelectChange',
+        onSdPageChange: 'sdPageChange'
+    } as SdTableEvents,
+    defineCustomElement: defineSdTable
+});

package/lib/components/sd-tag.server.ts

@@ -0,0 +1,32 @@
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+
+/* eslint-disable */
+
+// @ts-ignore - ignore potential type issues as the project is importing itself
+import * as clientComponents from '@sellmate/design-system-react';
+
+import { SdTag as SdTagElement } from "@sellmate/design-system/dist/components/sd-tag.js";
+import type { StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { createComponent, type HydrateModule, type ReactWebComponent, type SerializeShadowRootOptions } from '@stencil/react-output-target/ssr';
+
+export const serializeShadowRoot: SerializeShadowRootOptions = { default: "declarative-shadow-dom" };
+
+export type SdTagEvents = NonNullable<unknown>;
+
+export const SdTag: StencilReactComponent<SdTagElement, SdTagEvents> = /*@__PURE__*/ createComponent<SdTagElement, SdTagEvents>({
+    tagName: 'sd-tag',
+    properties: {
+        size: 'size',
+        color: 'color',
+        rounded: 'rounded',
+        label: 'label',
+        bgColor: 'bg-color',
+        textColor: 'text-color'
+    },
+    hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
+    clientModule: clientComponents.SdTag as ReactWebComponent<SdTagElement, SdTagEvents>,
+    serializeShadowRoot,
+});

package/lib/components/sd-tag.ts

@@ -0,0 +1,24 @@
+'use client';
+
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+
+/* eslint-disable */
+
+import { SdTag as SdTagElement, defineCustomElement as defineSdTag } from "@sellmate/design-system/dist/components/sd-tag.js";
+import type { StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+
+export type SdTagEvents = NonNullable<unknown>;
+
+export const SdTag: StencilReactComponent<SdTagElement, SdTagEvents> = /*@__PURE__*/ createComponent<SdTagElement, SdTagEvents>({
+    tagName: 'sd-tag',
+    elementClass: SdTagElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as SdTagEvents,
+    defineCustomElement: defineSdTag
+});

package/lib/components/sd-tooltip-portal.server.ts

@@ -0,0 +1,30 @@
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+
+/* eslint-disable */
+
+// @ts-ignore - ignore potential type issues as the project is importing itself
+import * as clientComponents from '@sellmate/design-system-react';
+
+import { SdTooltipPortal as SdTooltipPortalElement } from "@sellmate/design-system/dist/components/sd-tooltip-portal.js";
+import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { createComponent, type HydrateModule, type ReactWebComponent, type SerializeShadowRootOptions } from '@stencil/react-output-target/ssr';
+
+export const serializeShadowRoot: SerializeShadowRootOptions = { default: "declarative-shadow-dom" };
+
+export type SdTooltipPortalEvents = { onSdClose: EventName<CustomEvent<void>> };
+
+export const SdTooltipPortal: StencilReactComponent<SdTooltipPortalElement, SdTooltipPortalEvents> = /*@__PURE__*/ createComponent<SdTooltipPortalElement, SdTooltipPortalEvents>({
+    tagName: 'sd-tooltip-portal',
+    properties: {
+        to: 'to',
+        zIndex: 'z-index',
+        placement: 'placement',
+        open: 'open'
+    },
+    hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
+    clientModule: clientComponents.SdTooltipPortal as ReactWebComponent<SdTooltipPortalElement, SdTooltipPortalEvents>,
+    serializeShadowRoot,
+});

package/lib/components/sd-tooltip-portal.ts

@@ -0,0 +1,24 @@
+'use client';
+
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+
+/* eslint-disable */
+
+import { SdTooltipPortal as SdTooltipPortalElement, defineCustomElement as defineSdTooltipPortal } from "@sellmate/design-system/dist/components/sd-tooltip-portal.js";
+import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+
+export type SdTooltipPortalEvents = { onSdClose: EventName<CustomEvent<void>> };
+
+export const SdTooltipPortal: StencilReactComponent<SdTooltipPortalElement, SdTooltipPortalEvents> = /*@__PURE__*/ createComponent<SdTooltipPortalElement, SdTooltipPortalEvents>({
+    tagName: 'sd-tooltip-portal',
+    elementClass: SdTooltipPortalElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onSdClose: 'sdClose' } as SdTooltipPortalEvents,
+    defineCustomElement: defineSdTooltipPortal
+});

package/lib/components/sd-tooltip.server.ts

@@ -0,0 +1,36 @@
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+
+/* eslint-disable */
+
+// @ts-ignore - ignore potential type issues as the project is importing itself
+import * as clientComponents from '@sellmate/design-system-react';
+
+import { SdTooltip as SdTooltipElement } from "@sellmate/design-system/dist/components/sd-tooltip.js";
+import type { StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { createComponent, type HydrateModule, type ReactWebComponent, type SerializeShadowRootOptions } from '@stencil/react-output-target/ssr';
+
+export const serializeShadowRoot: SerializeShadowRootOptions = { default: "declarative-shadow-dom" };
+
+export type SdTooltipEvents = NonNullable<unknown>;
+
+export const SdTooltip: StencilReactComponent<SdTooltipElement, SdTooltipEvents> = /*@__PURE__*/ createComponent<SdTooltipElement, SdTooltipEvents>({
+    tagName: 'sd-tooltip',
+    properties: {
+        trigger: 'trigger',
+        placement: 'placement',
+        color: 'color',
+        icon: 'icon',
+        iconSize: 'icon-size',
+        label: 'label',
+        buttonSize: 'button-size',
+        buttonVariant: 'button-variant',
+        noHover: 'no-hover',
+        useClose: 'use-close'
+    },
+    hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
+    clientModule: clientComponents.SdTooltip as ReactWebComponent<SdTooltipElement, SdTooltipEvents>,
+    serializeShadowRoot,
+});

package/lib/components/sd-tooltip.ts

@@ -0,0 +1,24 @@
+'use client';
+
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+
+/* eslint-disable */
+
+import { SdTooltip as SdTooltipElement, defineCustomElement as defineSdTooltip } from "@sellmate/design-system/dist/components/sd-tooltip.js";
+import type { StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+
+export type SdTooltipEvents = NonNullable<unknown>;
+
+export const SdTooltip: StencilReactComponent<SdTooltipElement, SdTooltipEvents> = /*@__PURE__*/ createComponent<SdTooltipElement, SdTooltipEvents>({
+    tagName: 'sd-tooltip',
+    elementClass: SdTooltipElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as SdTooltipEvents,
+    defineCustomElement: defineSdTooltip
+});

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@sellmate/design-system-react",
- "version": "0.0.11",
+ "version": "0.0.13",
  "description": "Design System - React Component Wrappers",
  "keywords": [
   "react",
@@ -30,10 +30,9 @@
    "import": "./dist/index.js",
    "require": "./dist/index.js"
   },
-  "./hydrate": {
-   "types": "./dist/hydrate.d.ts",
-   "import": "./dist/hydrate.js",
-   "require": "./dist/hydrate.js"
+  "./next": {
+   "types": "./dist/components.server.d.ts",
+   "import": "./dist/components.server.js"
   }
  },
  "directories": {
@@ -54,7 +53,7 @@
   "dev": "tsc --watch"
  },
  "dependencies": {
-  "@sellmate/design-system": "^0.0.9",
+  "@sellmate/design-system": "^0.0.11",
   "@stencil/react-output-target": "^1.2.0"
  },
  "peerDependencies": {
@@ -68,5 +67,5 @@
   "rimraf": "^6.0.1",
   "typescript": "^5.9.3"
  },
- "gitHead": "8406a77cacf86efd489f6b4a42e362176fe81d7b"
+ "gitHead": "6423e809f1dfa0530fb3dcbe4f07d2dad13859d4"
 }

package/dist/hydrate.d.ts

@@ -1,2 +0,0 @@
-export declare function renderStencilToString(html: string): Promise<string>;
-export declare function registerStencilForNextjs(): void;

package/dist/hydrate.js

@@ -1,44 +0,0 @@
-import { hydrateDocument, } from '@sellmate/design-system/hydrate';
-// -------------------------------
-// SSR용 서버사이드 렌더링 함수
-// -------------------------------
-export async function renderStencilToString(html) {
-    try {
-        const results = await hydrateDocument(html, {
-            staticComponents: [
-                'sd-button',
-                'sd-input',
-                'sd-select',
-                'sd-table',
-                'sd-icon',
-                'sd-checkbox',
-                'sd-tag',
-                'sd-pagination',
-                'sd-tooltip',
-                'sd-popover',
-                'sd-guide',
-                'sd-date-picker',
-                'sd-date-range-picker',
-                'sd-date-box',
-                'sd-portal',
-                'sd-tooltip-portal',
-            ],
-        });
-        return results.html;
-    }
-    catch (error) {
-        console.warn('Stencil SSR failed, falling back to client-side rendering:', error);
-        return html;
-    }
-}
-// ----------------------------------------------
-//  클라이언트 사이드 등록 함수
-// ----------------------------------------------
-export function registerStencilForNextjs() {
-    if (typeof window === 'undefined')
-        return;
-    // router 변경 시에도 재등록
-    import('@sellmate/design-system/loader').then(({ defineCustomElements }) => {
-        defineCustomElements(window);
-    });
-}

package/lib/hydrate.ts

@@ -1,52 +0,0 @@
-import {
- renderToString,
- hydrateDocument,
-} from '@sellmate/design-system/hydrate';
-
-// -------------------------------
-// SSR용 서버사이드 렌더링 함수
-// -------------------------------
-export async function renderStencilToString(html: string) {
- try {
-  const results = await hydrateDocument(html, {
-   staticComponents: [
-    'sd-button',
-    'sd-input',
-    'sd-select',
-    'sd-table',
-    'sd-icon',
-    'sd-checkbox',
-    'sd-tag',
-    'sd-pagination',
-    'sd-tooltip',
-    'sd-popover',
-    'sd-guide',
-    'sd-date-picker',
-    'sd-date-range-picker',
-    'sd-date-box',
-    'sd-portal',
-    'sd-tooltip-portal',
-   ],
-  });
-
-  return results.html;
- } catch (error) {
-  console.warn(
-   'Stencil SSR failed, falling back to client-side rendering:',
-   error
-  );
-  return html;
- }
-}
-
-// ----------------------------------------------
-//  클라이언트 사이드 등록 함수
-// ----------------------------------------------
-export function registerStencilForNextjs() {
- if (typeof window === 'undefined') return;
-
- // router 변경 시에도 재등록
- import('@sellmate/design-system/loader').then(({ defineCustomElements }) => {
-  defineCustomElements(window);
- });
-}