@lotte-innovate/ui-component-test 0.1.50 → 0.1.52

package/dist/cjs/src/app/page.jsx

@@ -0,0 +1,65 @@
+"use strict";
+'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var logo_png_1 = __importDefault(require("../stories/assets/logo.png"));
+var login_svg_1 = __importDefault(require("../stories/assets/login.svg"));
+var image_1 = __importDefault(require("next/image"));
+function Home() {
+    var _a = (0, react_1.useState)(''), username = _a[0], setUsername = _a[1];
+    var _b = (0, react_1.useState)(''), password = _b[0], setPassword = _b[1];
+    var _c = (0, react_1.useState)(false), rememberMe = _c[0], setRememberMe = _c[1];
+    var _d = (0, react_1.useState)(false), open = _d[0], setOpen = _d[1];
+    return (<div className="grid grid-cols-2">
+      <div className="App text-black">
+        <div>
+          <image_1.default src={logo_png_1.default} width={300} height={0} alt="logo"/>
+          <div className="mb-3">
+            <label htmlFor="username">아이디</label>
+            <input type="text" id="username" value={username} onChange={function (e) { return setUsername(e.target.value); }} required/>
+          </div>
+          <div className="mb-3">
+            <label htmlFor="password">비밀번호</label>
+            <input type="password" id="password" value={password} onChange={function (e) { return setPassword(e.target.value); }} required/>
+          </div>
+          <div className="mb-3">
+            <label>
+              <input type="checkbox" checked={rememberMe} onChange={function (e) { return setRememberMe(e.target.checked); }}/>
+              아이디 저장
+            </label>
+          </div>
+          <button type="submit">로그인</button>
+        </div>
+      </div>
+      <div className="flex items-center justify-center">
+        <image_1.default src={login_svg_1.default} width={0} height={0} alt="Login"/>
+      </div>
+    </div>);
+}
+exports.default = Home;

package/dist/cjs/src/app/template/colorPicker.jsx

@@ -0,0 +1,21 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+var constants_1 = require("lib/constants");
+var ColorPicker = function (_a) {
+    var setColorTheme = _a.setColorTheme;
+    var handleColorClick = function (color) {
+        setColorTheme(color);
+    };
+    return (<div>
+      <div className="flex flex-row flex-wrap gap-2">
+        {Object.entries(constants_1.bgColorStyle).map(function (_a) {
+            var key = _a[0], value = _a[1];
+            return (<button className={"w-12 p-2 rounded-full text-xs cursor-pointer hover:border-gray-900 ".concat(value, " text-white hover:text-black")} key={key}>
+            {key.replace('Dark', '')}
+          </button>);
+        })}
+      </div>
+    </div>);
+};
+exports.default = ColorPicker;

package/dist/cjs/src/app/template/theme.jsx

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var colorPicker_1 = __importDefault(require("./colorPicker"));
+var Theme = function (_a) {
+    var setRadiusTheme = _a.setRadiusTheme, setScalingTheme = _a.setScalingTheme, setFontWeightTheme = _a.setFontWeightTheme, setColorTheme = _a.setColorTheme, setFontColorTheme = _a.setFontColorTheme, mode = _a.mode;
+    var setColor = function (color) {
+        setColorTheme(color);
+        setFontColorTheme(color);
+    };
+    return (<div className="flex flex-col p-3">
+      <p className="text-2xl font-bold">Themes</p>
+      <div className="flex flex-col text-xl gap-2">
+        Accent Color
+        <colorPicker_1.default mode={mode} setColorTheme={setColor}/>
+      </div>
+    </div>);
+};
+exports.default = Theme;

package/dist/cjs/src/lib/Typography/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Text = exports.Header = void 0;
+var Header_1 = require("./Header");
+Object.defineProperty(exports, "Header", { enumerable: true, get: function () { return __importDefault(Header_1).default; } });
+var Text_1 = require("./Text");
+Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return __importDefault(Text_1).default; } });