@sellmate/design-system 0.0.0 → 0.0.2

package/dist/types/components.d.ts

@@ -23,6 +23,10 @@ export { Row, SdTableColumn } from "./components/sd-table/sd-table";
 export { TagColor, TagSize } from "./components/sd-tag/sd-tag";
 export namespace Components {
     interface SdButton {
+        /**
+          * @default {}
+         */
+        "buttonStyle": StyleProps;
         /**
           * @default '#025497'
          */
@@ -32,7 +36,13 @@ export namespace Components {
          */
         "disabled": boolean;
         "icon"?: IconName;
+        "iconColor"?: string;
         "iconRight"?: IconName;
+        "iconSize"?: number;
+        /**
+          * @default {}
+         */
+        "iconStyle": StyleProps;
         /**
           * @default ''
          */
@@ -138,11 +148,34 @@ export namespace Components {
         "maxRange"?: number;
         "selectable"?: [string, string];
     }
+    interface SdGuide {
+        /**
+          * @default ''
+         */
+        "guideUrl": string;
+        /**
+          * @default ''
+         */
+        "message": string | string[];
+        /**
+          * @default ''
+         */
+        "popupTitle": string;
+        "popupWidth"?: number;
+        /**
+          * @default 'help'
+         */
+        "type": 'help' | 'pdf' | 'youtube' | 'notion' | 'event';
+    }
     interface SdIcon {
         /**
           * 아이콘 색상
          */
         "color"?: string;
+        /**
+          * @default {}
+         */
+        "iconStyle": StyleProps;
         /**
           * 접근성을 위한 라벨
          */
@@ -391,6 +424,7 @@ export namespace Components {
           * @default []
          */
         "columns": SdTableColumn[];
+        "height"?: number;
         /**
           * @default '데이터가 없습니다.'
          */
@@ -420,6 +454,10 @@ export namespace Components {
           * @default new Set()
          */
         "selected": Set<Row>;
+        /**
+          * @default { left: 0, right: 0 }
+         */
+        "stickyColumn": { left?: number; right?: number };
         /**
           * @default false
          */
@@ -649,6 +687,12 @@ declare global {
         prototype: HTMLSdDateRangePickerElement;
         new (): HTMLSdDateRangePickerElement;
     };
+    interface HTMLSdGuideElement extends Components.SdGuide, HTMLStencilElement {
+    }
+    var HTMLSdGuideElement: {
+        prototype: HTMLSdGuideElement;
+        new (): HTMLSdGuideElement;
+    };
     interface HTMLSdIconElement extends Components.SdIcon, HTMLStencilElement {
     }
     var HTMLSdIconElement: {
@@ -808,6 +852,7 @@ declare global {
         "sd-date-box": HTMLSdDateBoxElement;
         "sd-date-picker": HTMLSdDatePickerElement;
         "sd-date-range-picker": HTMLSdDateRangePickerElement;
+        "sd-guide": HTMLSdGuideElement;
         "sd-icon": HTMLSdIconElement;
         "sd-input": HTMLSdInputElement;
         "sd-pagination": HTMLSdPaginationElement;
@@ -823,6 +868,10 @@ declare global {
 }
 declare namespace LocalJSX {
     interface SdButton {
+        /**
+          * @default {}
+         */
+        "buttonStyle"?: StyleProps;
         /**
           * @default '#025497'
          */
@@ -832,7 +881,13 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         "icon"?: IconName;
+        "iconColor"?: string;
         "iconRight"?: IconName;
+        "iconSize"?: number;
+        /**
+          * @default {}
+         */
+        "iconStyle"?: StyleProps;
         /**
           * @default ''
          */
@@ -947,11 +1002,34 @@ declare namespace LocalJSX {
         "onSdChange"?: (event: SdDateRangePickerCustomEvent<[string, string]>) => void;
         "selectable"?: [string, string];
     }
+    interface SdGuide {
+        /**
+          * @default ''
+         */
+        "guideUrl"?: string;
+        /**
+          * @default ''
+         */
+        "message"?: string | string[];
+        /**
+          * @default ''
+         */
+        "popupTitle"?: string;
+        "popupWidth"?: number;
+        /**
+          * @default 'help'
+         */
+        "type"?: 'help' | 'pdf' | 'youtube' | 'notion' | 'event';
+    }
     interface SdIcon {
         /**
           * 아이콘 색상
          */
         "color"?: string;
+        /**
+          * @default {}
+         */
+        "iconStyle"?: StyleProps;
         /**
           * 접근성을 위한 라벨
          */
@@ -1212,6 +1290,7 @@ declare namespace LocalJSX {
           * @default []
          */
         "columns"?: SdTableColumn[];
+        "height"?: number;
         /**
           * @default '데이터가 없습니다.'
          */
@@ -1243,6 +1322,10 @@ declare namespace LocalJSX {
           * @default new Set()
          */
         "selected"?: Set<Row>;
+        /**
+          * @default { left: 0, right: 0 }
+         */
+        "stickyColumn"?: { left?: number; right?: number };
         /**
           * @default false
          */
@@ -1343,6 +1426,7 @@ declare namespace LocalJSX {
         "sd-date-box": SdDateBox;
         "sd-date-picker": SdDatePicker;
         "sd-date-range-picker": SdDateRangePicker;
+        "sd-guide": SdGuide;
         "sd-icon": SdIcon;
         "sd-input": SdInput;
         "sd-pagination": SdPagination;
@@ -1365,6 +1449,7 @@ declare module "@stencil/core" {
             "sd-date-box": LocalJSX.SdDateBox & JSXBase.HTMLAttributes<HTMLSdDateBoxElement>;
             "sd-date-picker": LocalJSX.SdDatePicker & JSXBase.HTMLAttributes<HTMLSdDatePickerElement>;
             "sd-date-range-picker": LocalJSX.SdDateRangePicker & JSXBase.HTMLAttributes<HTMLSdDateRangePickerElement>;
+            "sd-guide": LocalJSX.SdGuide & JSXBase.HTMLAttributes<HTMLSdGuideElement>;
             "sd-icon": LocalJSX.SdIcon & JSXBase.HTMLAttributes<HTMLSdIconElement>;
             "sd-input": LocalJSX.SdInput & JSXBase.HTMLAttributes<HTMLSdInputElement>;
             "sd-pagination": LocalJSX.SdPagination & JSXBase.HTMLAttributes<HTMLSdPaginationElement>;

package/dist/types/utils/color/index.d.ts

@@ -0,0 +1,2 @@
+export * from './isColorKey';
+export * from './resolveColor';

package/dist/types/utils/color/isColorKey.d.ts

@@ -0,0 +1,4 @@
+export type ColorMap = Record<string, string>;
+export declare const colors: ColorMap;
+export type ColorKey = keyof typeof colors;
+export declare function isColorKey(input: string): input is ColorKey;

package/dist/types/utils/color/resolveColor.d.ts

@@ -0,0 +1 @@
+export declare function resolveColor(input: string | undefined | null, fallback?: string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@sellmate/design-system",
- "version": "0.0.0",
+ "version": "0.0.2",
  "description": "Sellmate Design System - Web Components Library built with Stencil",
  "keywords": [
   "web-components",
@@ -83,5 +83,5 @@
   "@stencil/react-output-target": "^1.2.0",
   "@stencil/vue-output-target": "^0.11.8"
  },
- "gitHead": "cb83a0141f6b846b81fd382ad77a1f0a12009bf2"
+ "gitHead": "c2d7d7b5014e99bb3a5a23a05b44464ffd093459"
 }

package/readme.md

@@ -1,111 +1,125 @@
 [![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)](https://stenciljs.com)
 
-# Stencil Component Starter
+# Sellmate Design System
 
-> This is a starter project for building a standalone Web Components using Stencil.
+A comprehensive web components library built with Stencil for Sellmate.
 
-Stencil is a compiler for building fast web apps using Web Components.
-
-Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than runtime tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements specification.
-
-Stencil components are just Web Components, so they work in any major framework or with no framework at all.
-
-## Getting Started
-
-To start building a new web component using Stencil, clone this repo to a new directory:
+## Installation
 
 ```bash
-git clone https://github.com/stenciljs/component-starter.git my-component
-cd my-component
-git remote rm origin
+npm install @sellmate/design-system
 ```
 
-and run:
+or
 
 ```bash
-npm install
-npm start
+yarn add @sellmate/design-system
 ```
 
-To build the component for production, run:
+## Quick Start
 
-```bash
-npm run build
-```
+### Lazy Loading (Recommended for most projects)
 
-To run the unit tests for the components, run:
+Include this script in your HTML:
 
-```bash
-npm test
+```html
+<script type="module" src="https://unpkg.com/@sellmate/design-system"></script>
 ```
 
-Need help? Check out our docs [here](https://stenciljs.com/docs/my-first-component).
+Then use any component:
+
+```html
+<sd-button>Click me</sd-button>
+```
 
-## Naming Components
+### ES Module Import
 
-When creating new component tags, we recommend _not_ using `stencil` in the component name (ex: `<stencil-datepicker>`). This is because the generated component has little to nothing to do with Stencil; it's just a web component!
+```tsx
+import '@sellmate/design-system/dist/design-system/design-system.esm.js';
 
-Instead, use a prefix that fits your company or any name for a group of related components. For example, all of the [Ionic-generated](https://ionicframework.com/) web components use the prefix `ion`.
+function App() {
+  return (
+    <sd-button 
+      label='Click me' 
+      onClick={() => console.log('clicked')}
+    >
+    </sd-button>
+  );
+}
 
-## Using this component
+export default App;
+```
 
-There are two strategies we recommend for using web components built with Stencil.
+### CommonJS (Node.js)
 
-The first step for all two of these strategies is to [publish to NPM](https://docs.npmjs.com/getting-started/publishing-npm-packages).
+```js
+const { defineCustomElements } = require('@sellmate/design-system/loader');
 
-You can read more about these different approaches in the [Stencil docs](https://stenciljs.com/docs/publishing).
+defineCustomElements();
+```
 
-### Lazy Loading
+## Available Components
 
-If your Stencil project is built with the [`dist`](https://stenciljs.com/docs/distribution) output target, you can import a small bootstrap script that registers all components and allows you to load individual component scripts lazily.
+- **sd-button** - Button component
+- **sd-input** - Input field component
+- **sd-checkbox** - Checkbox component
+- **sd-select** - Select dropdown component
+- **sd-table** - Data table component
+- **sd-tag** - Tag/badge component
+- **sd-icon** - Icon component
+- **sd-tooltip** - Tooltip component
+- **sd-popover** - Popover component
+- **sd-date-picker** - Date picker component
+- **sd-date-range-picker** - Date range picker component
+- **sd-pagination** - Pagination component
 
-For example, given your Stencil project namespace is called `my-design-system`, to use `my-component` on any website, inject this into your HTML:
+## Framework Integration
 
-```html
-<script type="module" src="https://unpkg.com/my-design-system"></script>
-<!--
-To avoid unpkg.com redirects to the actual file, you can also directly import:
-https://unpkg.com/foobar-design-system@0.0.1/dist/foobar-design-system/foobar-design-system.esm.js
--->
-<my-component first="Stencil" middle="'Don't call me a framework'" last="JS"></my-component>
-```
+### React
 
-This will only load the necessary scripts needed to render `<my-component />`. Once more components of this package are used, they will automatically be loaded lazily.
+Use the React wrapper package for better TypeScript support:
 
-You can also import the script as part of your `node_modules` in your applications entry file:
+```bash
+npm install @sellmate/design-system-react
+```
 
 ```tsx
-import 'foobar-design-system/dist/foobar-design-system/foobar-design-system.esm.js';
+import { SdButton } from '@sellmate/design-system-react';
+
+export function App() {
+  return <SdButton>Click me</SdButton>;
+}
 ```
 
-Check out this [Live Demo](https://stackblitz.com/edit/vitejs-vite-y6v26a?file=src%2Fmain.tsx).
+### Vue 3
 
-### Standalone
+Use the Vue wrapper package:
+
+```bash
+npm install @sellmate/design-system-vue
+```
 
-If you are using a Stencil component library with `dist-custom-elements`, we recommend importing Stencil components individually in those files where they are needed.
+```vue
+<template>
+  <SdButton @click="handleClick">Click me</SdButton>
+</template>
 
-To export Stencil components as standalone components make sure you have the [`dist-custom-elements`](https://stenciljs.com/docs/custom-elements) output target defined in your `stencil.config.ts`.
+<script setup>
+import { SdButton } from '@sellmate/design-system-vue';
 
-For example, given you'd like to use `<my-component />` as part of a React component, you can import the component directly via:
+const handleClick = () => {
+  console.log('clicked');
+};
+</script>
+```
 
-```tsx
-import 'foobar-design-system/my-component';
+## Browser Support
 
-function App() {
-  return (
-    <>
-      <div>
-        <my-component
-          first="Stencil"
-          middle="'Don't call me a framework'"
-          last="JS"
-        ></my-component>
-      </div>
-    </>
-  );
-}
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
 
-export default App;
-```
+## License
 
-Check out this [Live Demo](https://stackblitz.com/edit/vitejs-vite-b6zuds?file=src%2FApp.tsx).
+MIT