@lotte-innovate/ui-component-test 0.0.132 → 0.0.134

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

@@ -0,0 +1,190 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { primaryColorStyle } from '../../../lib/constants';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { StaticTreeDataProvider, Tree as ComplexTree, UncontrolledTreeEnvironment, } from 'react-complex-tree';
+import 'react-complex-tree/lib/style-modern.css';
+import TextField from '../TextField';
+import Button from '../Button';
+import { MAIN_COLOR } from '../../../lib/color/constants';
+import { useTheme } from '../../../lib/theme';
+var treeVariants = cva('', {
+    variants: {
+        color: primaryColorStyle(),
+    },
+});
+function findItems(arr, key) {
+    var results = [];
+    Object.values(arr).forEach(function (item) {
+        if (item[key]) {
+            results.push(item.index);
+        }
+    });
+    return results;
+}
+var treeProvider = null;
+var Tree = React.forwardRef(function (_a, ref) {
+    var _b;
+    var _c, _d;
+    var items = _a.items, treeId = _a.treeId, className = _a.className, color = _a.color, isSearch = _a.isSearch, props = __rest(_a, ["items", "treeId", "className", "color", "isSearch"]);
+    var _e = useState(''), search = _e[0], setSearch = _e[1];
+    var tree = useRef(null);
+    var _f = useState({}), treeData = _f[0], setTreeData = _f[1];
+    var focusedItem = findItems(items, 'isFocusd');
+    var expandedItems = findItems(items, 'isExpanded');
+    var selectedItems = findItems(items, 'isSelected');
+    treeProvider = new StaticTreeDataProvider(treeData, function (item, data) { return (__assign(__assign({}, item), { data: data })); });
+    var theme = useTheme().theme;
+    var contextValue = {
+        color: (_c = color !== null && color !== void 0 ? color : theme.themeColor) !== null && _c !== void 0 ? _c : MAIN_COLOR,
+    };
+    var findItemPath = useCallback(function (search_1) {
+        var args_1 = [];
+        for (var _i = 1; _i < arguments.length; _i++) {
+            args_1[_i - 1] = arguments[_i];
+        }
+        return __awaiter(void 0, __spreadArray([search_1], args_1, true), void 0, function (search, searchRoot) {
+            var item, searchedItems, result;
+            var _a, _b;
+            if (searchRoot === void 0) { searchRoot = 'root'; }
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        if (!treeProvider)
+                            return [2 /*return*/];
+                        return [4 /*yield*/, treeProvider.getTreeItem(searchRoot)];
+                    case 1:
+                        item = _c.sent();
+                        if (item.data.toLowerCase().includes(search.toLowerCase())) {
+                            return [2 /*return*/, [item.index]];
+                        }
+                        return [4 /*yield*/, Promise.all((_b = (_a = item.children) === null || _a === void 0 ? void 0 : _a.map(function (child) { return findItemPath(search, child); })) !== null && _b !== void 0 ? _b : [])];
+                    case 2:
+                        searchedItems = _c.sent();
+                        result = searchedItems.find(function (item) { return item !== null; });
+                        if (!result) {
+                            return [2 /*return*/, null];
+                        }
+                        return [2 /*return*/, __spreadArray([item.index], result, true)];
+                }
+            });
+        });
+    }, [treeProvider]);
+    var find = useCallback(function (e) {
+        e.preventDefault();
+        if (search) {
+            findItemPath(search).then(function (path) {
+                var _a;
+                if (path) {
+                    // wait for full path including leaf, to make sure it loaded in
+                    (_a = tree.current) === null || _a === void 0 ? void 0 : _a.expandSubsequently(path).then(function () {
+                        var _a, _b;
+                        (_a = tree.current) === null || _a === void 0 ? void 0 : _a.selectItems([path[path.length - 1]]);
+                        (_b = tree.current) === null || _b === void 0 ? void 0 : _b.focusItem(path[path.length - 1]);
+                    });
+                }
+            });
+        }
+    }, [findItemPath, search]);
+    useEffect(function () {
+        if (items) {
+            var results_1 = [];
+            var children_1 = [];
+            items.map(function (item) {
+                children_1.push.apply(children_1, item.children);
+            });
+            items.forEach(function (item) {
+                if (!children_1.includes(item.index)) {
+                    results_1.push(item.index);
+                }
+            });
+            var t_1 = {};
+            t_1['root'] = {
+                index: 'root',
+                isFolder: true,
+                children: results_1,
+                data: 'Root item',
+            };
+            items.map(function (item) {
+                t_1[item.index] = __assign(__assign({}, item), { isFolder: item.children.length > 0 });
+            });
+            setTreeData(t_1);
+        }
+    }, [items]);
+    return (_jsxs("div", { className: "text-slate-12", children: [_jsx("style", { children: "\n        :root {\n          --rct-bar-color: \"\";\n        }\n      " }), isSearch && (_jsxs("div", { className: "flex", children: [_jsx(TextField.Root, { color: contextValue.color, value: search, onChange: function (e) { return setSearch(e.target.value); }, placeholder: "\uAC80\uC0C9\uC5B4\uB97C \uC785\uB825\uD558\uC138\uC694", className: "mr-2" }), _jsx(Button, { color: contextValue.color, onClick: find, children: "\uAC80\uC0C9" })] })), _jsx(UncontrolledTreeEnvironment, __assign({ ref: ref, dataProvider: treeProvider, viewState: (_b = {},
+                    _b[treeId] = {
+                        focusedItem: (_d = focusedItem[0]) !== null && _d !== void 0 ? _d : '',
+                        expandedItems: expandedItems,
+                        selectedItems: selectedItems,
+                    },
+                    _b), keyboardBindings: __assign({ renameItem: ['enter'], abortRenameItem: ['control+z'] }, props.keyboardBindings) }, props, { canSearch: false, children: _jsx(ComplexTree, { ref: tree, treeId: treeId, rootItem: "root", treeLabel: "Tree Example" }) }))] }));
+});
+Tree.displayName = 'Tree';
+export { Tree, treeProvider };

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

@@ -14,14 +14,17 @@ 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 Container } from './Container';
 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 Editor } from './Editor';
+export { default as Flex } from './Flex';
 export { default as DynamicTabs } from './Tabs/DynamicTabs';
 export { default as Footer } from './Footer';
 export { default as Gnb } from './Gnb';
+export { default as GridLayout } from './GridLayout';
 export { default as HoverCard } from './HoverCard';
 export { default as IconButton } from './IconButton';
 export { default as Inset } from './Inset';

package/dist/lib/components/index.js

@@ -15,14 +15,17 @@ 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 Container } from './Container';
 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 Editor } from './Editor';
+export { default as Flex } from './Flex';
 export { default as DynamicTabs } from './Tabs/DynamicTabs';
 export { default as Footer } from './Footer';
 export { default as Gnb } from './Gnb';
+export { default as GridLayout } from './GridLayout';
 export { default as HoverCard } from './HoverCard';
 export { default as IconButton } from './IconButton';
 export { default as Inset } from './Inset';

package/dist/lib/index.mjs

@@ -1,2 +1,2 @@
-export{default as Accordion}from"./components/Accordion/index.mjs";export{default as AlertDialog}from"./components/AlertDialog/index.mjs";export{default as AspectRatio}from"./components/AspectRatio/index.mjs";export{default as Avatar}from"./components/Avatar/index.mjs";export{default as Badge}from"./components/Badge/index.mjs";export{Box}from"./components/Box/index.mjs";export{default as Breadcrumb}from"./components/Breadcrumb/index.mjs";export{Button}from"./components/Button/index.mjs";export{Calendar}from"./components/Calendar/index.mjs";export{default as Callout}from"./components/Callout/index.mjs";export{default as Card}from"./components/Card/index.mjs";export{Checkbox}from"./components/Checkbox/index.mjs";export{default as CheckboxCard}from"./components/CheckboxCard/index.mjs";export{default as CheckboxGroup}from"./components/CheckboxGroup/index.mjs";export{default as ContextMenu}from"./components/ContextMenu/index.mjs";export{default as Collapsible}from"./components/Collapsible/index.mjs";export{default as DataList}from"./components/DataList/index.mjs";export{Datepicker}from"./components/Datepicker/index.mjs";export{default as Dialog}from"./components/Dialog/index.mjs";export{default as DropdownMenu}from"./components/DropdownMenu/index.mjs";export{Editor}from"./components/Editor/index.mjs";export{default as DynamicTabs}from"./components/Tabs/DynamicTabs.mjs";export{Footer}from"./components/Footer/index.mjs";export{default as Gnb}from"./components/Gnb/index.mjs";export{default as HoverCard}from"./components/HoverCard/index.mjs";export{IconButton}from"./components/IconButton/index.mjs";export{Inset}from"./components/Inset/index.mjs";export{Label}from"./components/Label/index.mjs";export{default as Menubar}from"./components/Menubar/index.mjs";export{default as Modal}from"./components/Modal/index.mjs";export{default as NavigationMenu}from"./components/NavigationMenu/index.mjs";export{default as Popover}from"./components/Popover/index.mjs";export{Progress}from"./components/Progress/index.mjs";export{Radio}from"./components/Radio/index.mjs";export{default as RadioCards}from"./components/RadioCards/index.mjs";export{default as RadioGroup}from"./components/RadioGroup/index.mjs";export{ScrollArea}from"./components/ScrollArea/index.mjs";export{SearchBar}from"./components/SearchBar/index.mjs";export{default as SegmentedControl}from"./components/SegmentedControl/index.mjs";export{default as Select}from"./components/Select/index.mjs";export{Separator}from"./components/Separator/index.mjs";export{default as Sidebar}from"./components/SideBar/index.mjs";export{Skeleton}from"./components/Skeleton/index.mjs";export{Slider}from"./components/Slider/index.mjs";export{Spinner}from"./components/Spinner/index.mjs";export{default as Table}from"./components/Table/index.mjs";export{default as TabNav}from"./components/TabNav/index.mjs";export{default as Tabs}from"./components/Tabs/index.mjs";export{TextArea}from"./components/TextArea/index.mjs";export{default as TextField}from"./components/TextField/index.mjs";export{default as Timeline}from"./components/Timeline/index.mjs";export{default as Toast}from"./components/Toast/index.mjs";export{Toggle}from"./components/Toggle/index.mjs";export{ToggleWithText}from"./components/Toggle/ToggleWithText.mjs";export{default as ToggleGroup}from"./components/ToggleGroup/index.mjs";export{ToggleSwitch}from"./components/ToggleSwitch/index.mjs";export{default as Tooltip}from"./components/Tooltip/index.mjs";export{default as BarChart}from"./components/BarChart/index.mjs";export{BubbleChart}from"./components/BubbleChart/index.mjs";export{RadarChart}from"./components/RadarChart/index.mjs";export{default as LineChart}from"./components/LineChart/index.mjs";export{default as PieChart}from"./components/PieChart/index.mjs";export{default as DoughnutChart}from"./components/DoughnutChart/index.mjs";export{default as Grid}from"./components/Grid/index.mjs";export{useGrid}from"./components/Grid/useGrid.mjs";export{Header}from"./Typography/Header/index.mjs";export{default as Text}from"./Typography/Text/index.mjs";export{default as LuiThemeProvider,useTheme}from"./theme/ThemeProvider.mjs";
+export{default as Accordion}from"./components/Accordion/index.mjs";export{default as AlertDialog}from"./components/AlertDialog/index.mjs";export{default as AspectRatio}from"./components/AspectRatio/index.mjs";export{default as Avatar}from"./components/Avatar/index.mjs";export{default as Badge}from"./components/Badge/index.mjs";export{Box}from"./components/Box/index.mjs";export{default as Breadcrumb}from"./components/Breadcrumb/index.mjs";export{Button}from"./components/Button/index.mjs";export{Calendar}from"./components/Calendar/index.mjs";export{default as Callout}from"./components/Callout/index.mjs";export{default as Card}from"./components/Card/index.mjs";export{Checkbox}from"./components/Checkbox/index.mjs";export{default as CheckboxCard}from"./components/CheckboxCard/index.mjs";export{default as CheckboxGroup}from"./components/CheckboxGroup/index.mjs";export{default as ContextMenu}from"./components/ContextMenu/index.mjs";export{default as Collapsible}from"./components/Collapsible/index.mjs";export{Container}from"./components/Container/index.mjs";export{default as DataList}from"./components/DataList/index.mjs";export{Datepicker}from"./components/Datepicker/index.mjs";export{default as Dialog}from"./components/Dialog/index.mjs";export{default as DropdownMenu}from"./components/DropdownMenu/index.mjs";export{Editor}from"./components/Editor/index.mjs";export{Flex}from"./components/Flex/index.mjs";export{default as DynamicTabs}from"./components/Tabs/DynamicTabs.mjs";export{Footer}from"./components/Footer/index.mjs";export{default as Gnb}from"./components/Gnb/index.mjs";export{GridLayout}from"./components/GridLayout/index.mjs";export{default as HoverCard}from"./components/HoverCard/index.mjs";export{IconButton}from"./components/IconButton/index.mjs";export{Inset}from"./components/Inset/index.mjs";export{Label}from"./components/Label/index.mjs";export{default as Menubar}from"./components/Menubar/index.mjs";export{default as Modal}from"./components/Modal/index.mjs";export{default as NavigationMenu}from"./components/NavigationMenu/index.mjs";export{default as Popover}from"./components/Popover/index.mjs";export{Progress}from"./components/Progress/index.mjs";export{Radio}from"./components/Radio/index.mjs";export{default as RadioCards}from"./components/RadioCards/index.mjs";export{default as RadioGroup}from"./components/RadioGroup/index.mjs";export{ScrollArea}from"./components/ScrollArea/index.mjs";export{SearchBar}from"./components/SearchBar/index.mjs";export{default as SegmentedControl}from"./components/SegmentedControl/index.mjs";export{default as Select}from"./components/Select/index.mjs";export{Separator}from"./components/Separator/index.mjs";export{default as Sidebar}from"./components/SideBar/index.mjs";export{Skeleton}from"./components/Skeleton/index.mjs";export{Slider}from"./components/Slider/index.mjs";export{Spinner}from"./components/Spinner/index.mjs";export{default as Table}from"./components/Table/index.mjs";export{default as TabNav}from"./components/TabNav/index.mjs";export{default as Tabs}from"./components/Tabs/index.mjs";export{TextArea}from"./components/TextArea/index.mjs";export{default as TextField}from"./components/TextField/index.mjs";export{default as Timeline}from"./components/Timeline/index.mjs";export{default as Toast}from"./components/Toast/index.mjs";export{Toggle}from"./components/Toggle/index.mjs";export{ToggleWithText}from"./components/Toggle/ToggleWithText.mjs";export{default as ToggleGroup}from"./components/ToggleGroup/index.mjs";export{ToggleSwitch}from"./components/ToggleSwitch/index.mjs";export{default as Tooltip}from"./components/Tooltip/index.mjs";export{default as BarChart}from"./components/BarChart/index.mjs";export{BubbleChart}from"./components/BubbleChart/index.mjs";export{RadarChart}from"./components/RadarChart/index.mjs";export{default as LineChart}from"./components/LineChart/index.mjs";export{default as PieChart}from"./components/PieChart/index.mjs";export{default as DoughnutChart}from"./components/DoughnutChart/index.mjs";export{default as Grid}from"./components/Grid/index.mjs";export{useGrid}from"./components/Grid/useGrid.mjs";export{Header}from"./Typography/Header/index.mjs";export{default as Text}from"./Typography/Text/index.mjs";export{default as LuiThemeProvider,useTheme}from"./theme/ThemeProvider.mjs";
 //# sourceMappingURL=index.mjs.map