@lotte-innovate/ui-component-test 0.2.41 → 0.2.43

package/README.md

@@ -6,74 +6,49 @@
 
 - [Introduction](#introduction)
 - [Installation](#installation)
-- [Setup](#setup)
 - [Usage](#usage)
-- [Components](#components)
-- [Theme](#theme)
 - [License](#license)
 
 ## Introduction
 
-모든 L-UI 구성 요소를 내보내는 단일 패키지입니다.
+L-UI 에디터를 포함한 단일 패키지입니다.
 
-일관되고 통일된 컴포넌트를 제공하며 사용자 정의 및 재사용 가능합니다.
+이 패키지는 TinyMCE 에디터를 사용하며 웹 기반의 WYSIWYG HTML 편집기를 제공합니다.
 
-이 라이브러리는 React로 구축된 프로젝트를 지원합니다.
+다양한 플러그인을 통해 기능을 확장할 수 있으며 상세 기능은 이 [링크](https://www.tiny.cloud/docs/tinymce/6/examples/)에서 확인 가능합니다.
 
 ## Installation
 
 패키지를 설치하기 위해 아래 명령어를 사용합니다.
 
 ```bash
-  npm i @lotte-innovate/lui
+  npm i @lotte-innovate/lui-editor
 ```
 
 ```bash
-  yarn add @lotte-innovate/lui
+  yarn add @lotte-innovate/lui-editor
 ```
 
-## Setup
+패키지 설치 시, 에디터 내부의 콘텐츠 스타일을 정의하는 css 파일이 다음 경로에 추가됩니다.
 
-패키지를 설치한 후 css 스타일을 프로젝트로 가져옵니다.
-
-프로젝트 App 진입 파일에 다음 줄을 추가해줍니다.
-
-```
-  import '@lotte-innovate/lui/dist/globals.css';
+```bash
+  public/tinymce/skins/ui/oxide/content.min.css
+  public/tinymce/skins/ui/oxide/skin.min.css
+  public/tinymce/skins/content/default/content.css
 ```
 
 ## Usage
 
-React 프로젝트에서 컴포넌트를 사용하는 방법에 대한 예시입니다.
-
-```javascript
-import React from 'react';
-import { Button } from '@lotte-innovate/lui';
-
-const App = () => {
-  return (
-    <div>
-      <Button onClick={() => alert('Button clicked!')}>Click Me</Button>
-    </div>
-  );
-};
-
-export default App;
-```
-
-컴포넌트에서 아이콘을 사용하려면, 다음과 같은 방법으로 아이콘을 가져올 수 있습니다.
+React 프로젝트에서 에디터를 사용하는 방법에 대한 예시입니다.
 
 ```javascript
 import React from 'react';
-import { IconButton } from '@lotte-innovate/lui';
-import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
+import { Editor } from '@lotte-innovate/lui-editor';
 
 const App = () => {
   return (
     <div>
-      <IconButton>
-        <MagnifyingGlassIcon />
-      </IconButton>
+      <Editor />
     </div>
   );
 };
@@ -81,142 +56,6 @@ const App = () => {
 export default App;
 ```
 
-## Components
-
-<br />
-
-<details>
-  <summary>컴포넌트 목록</summary>
-
-| 구분                | 종류                                                                                                             |
-| ------------------- | ---------------------------------------------------------------------------------------------------------------- |
-| Typography 컴포넌트 | Header, Text                                                                                                     |
-| 기본 컴포넌트       | Avatar, Badge, Button, IconButton, Label                                                                         |
-| 입력 컴포넌트       | DatePicker, Editor, Slider, TextArea, TextField                                                                  |
-| 선택 컴포넌트       | Checkbox, CheckboxCards, CheckboxGroup, Radio, RadioCards, RadioGroup, Select, Toggle, ToggleGroup, ToggleSwitch |
-| 네비게이션 컴포넌트 | Breadcrumb, GNB, Menubar, NavigationMenu, SNB, Tab Nav, Tabs                                                     |
-| 레이아웃 컴포넌트   | AspectRatio, Card, Collapsible, Footer, Grid, Inset, ScrollArea, Separator, Table                                |
-
-</details>
-<details>
-	<summary>차트 목록</summary>
-
-| 구분      | 종류          |
-| --------- | ------------- |
-| 비교 차트 | Bar, Line     |
-| 구성 차트 | Pie, Doughnut |
-| 분포 차트 | Bubble        |
-| 관계 차트 | Radar         |
-
-</details>
-
-<details>
-  <summary>공통 Props 목록</summary>
-
-| name       | description                                       | 단계     | option                                        | 테마적용여부 |
-| ---------- | ------------------------------------------------- | -------- | --------------------------------------------- | ------------ |
-| Color      | 27가지 색상을 라이트/다크/알파/알파다크 모드 제공 | 1~12단계 | blue, crimson, teal, orange, purple, amber... | O            |
-| Radius     | 컴포넌트의 둥글기 적용                            | 5단계    | none, small, medium, large, full              | O            |
-| Scaling    | 컴포넌트의 비율                                   | 5단계    | 90%, 95%, 100%, 105%, 110%                    | O            |
-| Weight     | 컴포넌트의 텍스트 굵기                            | 4단계    | regular, medium, semibold, bold               | O            |
-| Appearance | 컴포넌트의 디자인 스타일                          | 6단계    | classic, ghost, outline, soft, solid, surface | X            |
-| Size       | 컴포넌트의 크기                                   | 5단계    | x-small, small, medium, large, x-large        | X            |
-
-</details>
-
-<br />
-
-## Theme
-
-각 컴포넌트들은 공통 Props를 개별적으로 적용할 수도 있고, 테마를 통해 컴포넌트의 스타일을 한번에 변경할 수도 있습니다.
-
-L-UI는 테마 컨텍스트를 제공하여 `Color`, `Radius`, `Scaling`, `Weight` 를 모든 컴포넌트에 동일한 스타일을 지정할 수 있습니다..
-
-먼저 App 최상단에 `LuiThemeProvider`를 추가하여 테마 컨텍스트를 제공합니다.
-
-> Next.js와 같은 프레임워크를 사용하는 프로젝트에서 사용 예시
-
-```javascript
-import { LuiThemeProvider } from '@lotte-innovate/lui';
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en" className="bg-white">
-      <body>
-        <LuiThemeProvider>{children}</LuiThemeProvider>
-      </body>
-    </html>
-  );
-}
-
-```
-
-> 클라이언트 사이드 프로젝트에서 사용 예시
-
-```javascript
-import { LuiThemeProvider } from '@lotte-innovate/lui';
-
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-  <LuiThemeProvider>
-    <App />
-  </LuiThemeProvider>,
-);
-```
-
-테마를 변경하려면 `useTheme`훅을 사용합니다.
-
-`useTheme`훅은 현재 테마와 테마를 업데이트할 수 있는 함수를 제공합니다.
-
-```javascript
-import { useTheme, Button } from '@lotte-innovate/lui';
-
-const ThemeChanger = () => {
-  const { theme, updateTheme } = useTheme();
-
-  // 초기 값 설정 시
-  theme.themeRadius = 'none';
-  theme.themeColor = 'olive';
-  theme.themeScaling = '90%';
-  theme.themeWeight = 'regular';
-
-  // 테마 변경 시
-  updateTheme({ themeRadius: 'full', themeColor: 'amber', themeScaling: '110%' });
-
-  return (
-    <div>
-      <Button>버튼</Button>
-    </div>
-  );
-};
-```
-
-테마가 적용되었지만 일부 컴포넌트는 스타일을 다르게 하고 싶은 경우, 각 컴포넌트에 직접 Props를 전달하여 스타일을 재정의할 수 있습니다.
-
-```javascript
-import { useTheme, Button } from '@lotte-innovate/lui';
-
-const ThemeChanger = () => {
-  const { theme } = useTheme();
-
-  theme.themeRadius: 'full';
-  theme.themeColor: 'blue';
-
-  return (
-    <div>
-      <Button>테마 적용 버튼</Button>
-      <Button radius="none" color="crimson">테마 미적용 버튼</Button>
-    </div>
-  );
-};
-```
-
-<br />
-
 ## License
 
 @lotte-innovate

package/dist/lib/components/Editor/index.d.ts

@@ -15,7 +15,7 @@ import 'tinymce/plugins/image/plugin.js';
 export interface EditorProps extends VariantProps<typeof editorVariants> {
 }
 declare const editorVariants: (props?: ({
-    scaling?: "90%" | "95%" | "100%" | "105%" | "110%" | null | undefined;
+    scaling?: "100%" | "90%" | "95%" | "105%" | "110%" | null | undefined;
     size?: "small" | "medium" | "large" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const Editor: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & EditorProps & IAllProps & React.RefAttributes<HTMLDivElement>>;

package/dist/lib/components/Editor/index.js

@@ -56,9 +56,10 @@ var editorVariants = cva('', {
 export var Editor = forwardRef(function (_a, ref) {
     var className = _a.className, size = _a.size, scaling = _a.scaling, props = __rest(_a, ["className", "size", "scaling"]);
     return (_jsx("div", { className: cn(editorVariants({ size: size, scaling: scaling }), className), ref: ref, children: _jsx(EditorUI, __assign({ init: {
+                base_url: 'tinymce',
                 width: '100%',
                 height: '100%',
-                plugins: 'link table code lists codesample',
+                plugins: 'link table lists code codesample',
                 menubar: false,
                 toolbar: 'blocks | bold italic forecolor strikethrough | hr blockquote | bullist numlist outdent indent | table image link | inlinecode codeformat codesample markdown',
                 content_style: 'body { font-family:Noto Sans KR, sans-serif, Nunito Sans, Helvetica Neue, Helvetica }',

package/dist/lib/components/Editor/index.mjs

@@ -0,0 +1,3 @@
+"use client";
+import{jsx as t}from"react/jsx-runtime";import{forwardRef as e}from"react";import{Editor as i}from"@tinymce/tinymce-react";import{cva as n}from"class-variance-authority";import{scalingVariants as o}from"../../constants.mjs";import{cn as r}from"../../utils/utils.mjs";import{marked as s}from"marked";import"tinymce/tinymce.js";import"tinymce/themes/silver/theme.js";import"tinymce/models/dom/model.js";import"tinymce/icons/default/icons.js";import"tinymce/plugins/advlist/plugin.js";import"tinymce/plugins/code/plugin.js";import"tinymce/plugins/codesample/plugin.js";import"tinymce/plugins/link/plugin.js";import"tinymce/plugins/lists/plugin.js";import"tinymce/plugins/table/plugin.js";import"tinymce/plugins/image/plugin.js";var l=function(){return l=Object.assign||function(t){for(var e,i=1,n=arguments.length;i<n;i++)for(var o in e=arguments[i])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t},l.apply(this,arguments)},a=function(t,e){var i={};for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&e.indexOf(n)<0&&(i[n]=t[n]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(t);o<n.length;o++)e.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(t,n[o])&&(i[n[o]]=t[n[o]])}return i},m=n("",{variants:{scaling:l({},o),size:{small:"w-[500px] h-[350px]",medium:"w-[550px] h-[400px]",large:"w-[600px] h-[450px]"}},defaultVariants:{scaling:"100%",size:"medium"}}),c=e((function(e,n){var o=e.className,c=e.size,p=e.scaling,u=a(e,["className","size","scaling"]);return t("div",{className:r(m({size:c,scaling:p}),o),ref:n,children:t(i,l({init:{base_url:"tinymce",width:"100%",height:"100%",plugins:"link table lists code codesample",menubar:!1,toolbar:"blocks | bold italic forecolor strikethrough | hr blockquote | bullist numlist outdent indent | table image link | inlinecode codeformat codesample markdown",content_style:"body { font-family:Noto Sans KR, sans-serif, Nunito Sans, Helvetica Neue, Helvetica }",setup:function(t){t.ui.registry.addButton("inlinecode",{icon:"sourcecode",tooltip:"Inline code",onAction:function(){t.formatter.toggle("code")}}),t.on("init",(function(){t.formatter.register("code",{inline:"code",remove:"all"})})),t.ui.registry.addButton("markdown",{text:"Markdown",onAction:function(){var e=t.getContent({format:"text"}),i=s(e);t.setContent(i)}})}}},u))})}));c.displayName="Editor";export{c as Editor,c as default};
+//# sourceMappingURL=index.mjs.map

package/dist/lib/components/index.d.ts

@@ -1,63 +1 @@
-export { default as Accordion } from './Accordion';
-export { default as AlertDialog } from './AlertDialog';
-export { default as AspectRatio } from './AspectRatio';
-export { default as Avatar } from './Avatar';
-export { default as Badge } from './Badge';
-export { default as Box } from './Box';
-export { default as Breadcrumb } from './Breadcrumb';
-export { default as Button } from './Button';
-export { default as Calendar } from './Calendar';
-export { default as Callout } from './Callout';
-export { default as Card } from './Card';
-export { default as Checkbox } from './Checkbox';
-export { default as CheckboxCard } from './CheckboxCard';
-export { default as CheckboxGroup } from './CheckboxGroup';
-export { default as ContextMenu } from './ContextMenu';
-export { default as Collapsible } from './Collapsible';
-export { default as DataList } from './DataList';
-export { default as Datepicker } from './Datepicker';
-export { default as Dialog } from './Dialog';
-export { default as DropdownMenu } from './DropdownMenu';
-export { default as DynamicTabs } from './Tabs/DynamicTabs';
-export { default as Footer } from './Footer';
-export { default as Gnb } from './Gnb';
-export { default as HoverCard } from './HoverCard';
-export { default as IconButton } from './IconButton';
-export { default as Inset } from './Inset';
-export { default as Label } from './Label';
-export { default as Menubar } from './Menubar';
-export { default as Modal } from './Modal';
-export { default as NavigationMenu } from './NavigationMenu';
-export { default as Popover } from './Popover';
-export { default as Progress } from './Progress';
-export { default as Radio } from './Radio';
-export { default as RadioCards } from './RadioCards';
-export { default as RadioGroup } from './RadioGroup';
-export { default as ScrollArea } from './ScrollArea';
-export { default as SegmentedControl } from './SegmentedControl';
-export { default as Select } from './Select';
-export { default as Separator } from './Separator';
-export { default as Sidebar } from './SideBar';
-export { default as Skeleton } from './Skeleton';
-export { default as Slider } from './Slider';
-export { default as Spinner } from './Spinner';
-export { default as Table } from './Table';
-export { default as TabNav } from './TabNav';
-export { default as Tabs } from './Tabs';
-export { default as TextArea } from './TextArea';
-export { default as TextField } from './TextField';
-export { default as Timeline } from './Timeline';
-export { default as Toast } from './Toast';
-export { default as Toggle } from './Toggle';
-export { default as ToggleWithText } from './Toggle/ToggleWithText';
-export { default as ToggleGroup } from './ToggleGroup';
-export { default as ToggleSwitch } from './ToggleSwitch';
-export { default as Tooltip } from './Tooltip';
-export { default as BarChart } from './BarChart';
-export { default as BubbleChart } from './BubbleChart';
-export { default as RadarChart } from './RadarChart';
-export { default as LineChart } from './LineChart';
-export { default as PieChart } from './PieChart';
-export { default as DoughnutChart } from './DoughnutChart';
-export { default as Grid } from './Grid';
-export { useGrid } from './Grid/useGrid';
+export { default as Editor } from './Editor';

package/dist/lib/components/index.js

@@ -1,66 +1 @@
-// Component
-export { default as Accordion } from './Accordion';
-export { default as AlertDialog } from './AlertDialog';
-export { default as AspectRatio } from './AspectRatio';
-export { default as Avatar } from './Avatar';
-export { default as Badge } from './Badge';
-export { default as Box } from './Box';
-export { default as Breadcrumb } from './Breadcrumb';
-export { default as Button } from './Button';
-export { default as Calendar } from './Calendar';
-export { default as Callout } from './Callout';
-export { default as Card } from './Card';
-export { default as Checkbox } from './Checkbox';
-export { default as CheckboxCard } from './CheckboxCard';
-export { default as CheckboxGroup } from './CheckboxGroup';
-export { default as ContextMenu } from './ContextMenu';
-export { default as Collapsible } from './Collapsible';
-export { default as DataList } from './DataList';
-export { default as Datepicker } from './Datepicker';
-export { default as Dialog } from './Dialog';
-export { default as DropdownMenu } from './DropdownMenu';
-export { default as DynamicTabs } from './Tabs/DynamicTabs';
-export { default as Footer } from './Footer';
-export { default as Gnb } from './Gnb';
-export { default as HoverCard } from './HoverCard';
-export { default as IconButton } from './IconButton';
-export { default as Inset } from './Inset';
-export { default as Label } from './Label';
-export { default as Menubar } from './Menubar';
-export { default as Modal } from './Modal';
-export { default as NavigationMenu } from './NavigationMenu';
-export { default as Popover } from './Popover';
-export { default as Progress } from './Progress';
-export { default as Radio } from './Radio';
-export { default as RadioCards } from './RadioCards';
-export { default as RadioGroup } from './RadioGroup';
-export { default as ScrollArea } from './ScrollArea';
-export { default as SegmentedControl } from './SegmentedControl';
-export { default as Select } from './Select';
-export { default as Separator } from './Separator';
-export { default as Sidebar } from './SideBar';
-export { default as Skeleton } from './Skeleton';
-export { default as Slider } from './Slider';
-export { default as Spinner } from './Spinner';
-export { default as Table } from './Table';
-export { default as TabNav } from './TabNav';
-export { default as Tabs } from './Tabs';
-export { default as TextArea } from './TextArea';
-export { default as TextField } from './TextField';
-export { default as Timeline } from './Timeline';
-export { default as Toast } from './Toast';
-export { default as Toggle } from './Toggle';
-export { default as ToggleWithText } from './Toggle/ToggleWithText';
-export { default as ToggleGroup } from './ToggleGroup';
-export { default as ToggleSwitch } from './ToggleSwitch';
-export { default as Tooltip } from './Tooltip';
-// Chart
-export { default as BarChart } from './BarChart';
-export { default as BubbleChart } from './BubbleChart';
-export { default as RadarChart } from './RadarChart';
-export { default as LineChart } from './LineChart';
-export { default as PieChart } from './PieChart';
-export { default as DoughnutChart } from './DoughnutChart';
-//Grid
-export { default as Grid } from './Grid';
-export { useGrid } from './Grid/useGrid';
+export { default as Editor } from './Editor';