@elicecontents/content-ui 0.0.0

package/es/components/dialog/Dialog.js

@@ -0,0 +1,113 @@
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { Stack, Dialog, DialogTitle, Typography, DialogContent, DialogActions } from '@mui/material';
+import { textPrimaryColor, textSecondaryColor } from '../tokenColorTemporary.js';
+import EliceButton from '../button/Button.js';
+
+var EliceDialog = function EliceDialog(_ref) {
+  var anchorElement = _ref.anchorElement,
+    title = _ref.title,
+    content = _ref.content,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'OK' : _ref$type,
+    onConfirm = _ref.onConfirm,
+    onAgree = _ref.onAgree,
+    onDisagree = _ref.onDisagree;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  return jsxs(Fragment, {
+    children: [jsx(Stack, {
+      onClick: function onClick() {
+        return setOpen(true);
+      },
+      children: anchorElement
+    }), jsxs(Dialog, {
+      open: open,
+      onClose: function onClose() {
+        return setOpen(false);
+      },
+      PaperProps: {
+        style: {
+          minWidth: '40rem',
+          padding: '1.25rem 1.5rem',
+          gap: '1rem'
+        }
+      },
+      children: [jsx(DialogTitle, {
+        style: {
+          fontSize: '1.375rem',
+          fontWeight: 700,
+          padding: 0,
+          color: textPrimaryColor
+        },
+        children: jsx(Typography, {
+          variant: "subtitle1",
+          children: title
+        })
+      }), jsx(DialogContent, {
+        style: {
+          padding: 0
+        },
+        children: jsx(Stack, {
+          mb: "1.25rem",
+          fontSize: "1.375rem",
+          color: textSecondaryColor,
+          children: jsx(Typography, {
+            variant: "body1",
+            children: content
+          })
+        })
+      }), jsxs(DialogActions, {
+        style: {
+          padding: 0
+        },
+        children: [type === 'OK' && jsx(EliceButton, {
+          style: {
+            width: '100%'
+          },
+          onClick: function onClick() {
+            if (onConfirm) {
+              onConfirm();
+            }
+            setOpen(false);
+          },
+          children: "\uB2EB\uAE30"
+        }), type === 'YesOrNo' && jsxs(Stack, {
+          direction: "row",
+          gap: "0.625rem",
+          width: "100%",
+          children: [jsx(EliceButton, {
+            variant: "contained",
+            style: {
+              flexGrow: 1
+            },
+            onClick: function onClick() {
+              if (onAgree) {
+                onAgree();
+              }
+              setOpen(false);
+            },
+            children: "\uD655\uC778"
+          }), jsx(EliceButton, {
+            variant: "outlined",
+            style: {
+              flexGrow: 1
+            },
+            onClick: function onClick() {
+              if (onDisagree) {
+                onDisagree();
+              }
+              setOpen(false);
+            },
+            children: "\uCDE8\uC18C"
+          })]
+        })]
+      })]
+    })]
+  });
+};
+
+export { EliceDialog as default };

package/es/components/dialog/index.d.ts

@@ -0,0 +1,2 @@
+export { default as EliceDialog } from './Dialog';
+export type { EliceDialogProps } from './Dialog';

package/es/components/dialog/index.js

@@ -0,0 +1 @@
+export { default as EliceDialog } from './Dialog.js';

package/es/components/dotted-pagination/DottedPagination.d.ts

@@ -0,0 +1,8 @@
+export interface DottedPaginationProps {
+    currentPage?: number;
+    totalPage?: number;
+    onPrev?: VoidFunction;
+    onNext?: VoidFunction;
+}
+declare const EliceDottedPagination: (props: DottedPaginationProps) => import("react/jsx-runtime").JSX.Element | "Total page is at most 10";
+export default EliceDottedPagination;

package/es/components/dotted-pagination/DottedPagination.js

@@ -0,0 +1,63 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTheme, Stack } from '@mui/material';
+import { gray300Color } from '../tokenColorTemporary.js';
+import ArrowLeft from '../../icons/ArrowLeft.js';
+import ArrowRight from '../../icons/ArrowRight.js';
+
+var EliceDottedPagination = function EliceDottedPagination(props) {
+  var _props$currentPage = props.currentPage,
+    currentPage = _props$currentPage === void 0 ? 1 : _props$currentPage,
+    _props$totalPage = props.totalPage,
+    totalPage = _props$totalPage === void 0 ? 1 : _props$totalPage,
+    onNext = props.onNext,
+    onPrev = props.onPrev;
+  var isPrevAble = currentPage > 1;
+  var isNextAble = currentPage < totalPage;
+  var theme = useTheme();
+  if (totalPage > 10 || currentPage > 10) return 'Total page is at most 10';
+  return jsxs(Stack, {
+    direction: "row",
+    gap: "1rem",
+    children: [jsx(ArrowLeft, {
+      size: 24,
+      color: isPrevAble ? theme.palette.primary.main : gray300Color,
+      style: {
+        cursor: 'pointer'
+      },
+      onClick: function onClick() {
+        if (onPrev && isPrevAble) {
+          onPrev();
+        }
+      }
+    }), jsx(Stack, {
+      direction: "row",
+      gap: "0.375rem",
+      alignItems: "center",
+      children: Array.from({
+        length: totalPage
+      }, function (i) {
+        return i;
+      }).map(function (_, index) {
+        return jsx(Stack, {
+          borderRadius: "0.3rem",
+          height: "0.75rem",
+          width: "0.75rem",
+          bgcolor: currentPage === index + 1 ? theme.palette.primary.main : gray300Color
+        }, index);
+      })
+    }), jsx(ArrowRight, {
+      size: 24,
+      color: isNextAble ? theme.palette.primary.main : gray300Color,
+      style: {
+        cursor: 'pointer'
+      },
+      onClick: function onClick() {
+        if (onNext && isNextAble) {
+          onNext();
+        }
+      }
+    })]
+  });
+};
+
+export { EliceDottedPagination as default };

package/es/components/dotted-pagination/index.d.ts

@@ -0,0 +1,2 @@
+export { default as EliceDottedPagination } from './DottedPagination';
+export type { DottedPaginationProps } from './DottedPagination';

package/es/components/dotted-pagination/index.js

@@ -0,0 +1 @@
+export { default as EliceDottedPagination } from './DottedPagination.js';

package/es/components/icon-button/IconButton.d.ts

@@ -0,0 +1,7 @@
+import { type IconButtonProps } from '@mui/material';
+import type { ReactNode } from 'react';
+export interface EliceIconButtonProps extends IconButtonProps {
+    children: ReactNode;
+}
+declare const EliceIconButton: ({ children, disabled, ...rest }: EliceIconButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default EliceIconButton;

package/es/components/icon-button/IconButton.js

@@ -0,0 +1,27 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { useTheme, IconButton } from '@mui/material';
+import { gray400Color, gray300Color } from '../tokenColorTemporary.js';
+
+var EliceIconButton = function EliceIconButton(_a) {
+  var children = _a.children,
+    disabled = _a.disabled,
+    rest = __rest(_a, ["children", "disabled"]);
+  var theme = useTheme();
+  return jsx(IconButton, Object.assign({
+    disabled: disabled,
+    style: {
+      flexShrink: 0,
+      height: '3.5rem',
+      width: '3.5rem',
+      boxSizing: 'border-box',
+      backgroundColor: disabled ? gray300Color : theme.palette.primary.main,
+      borderRadius: '1rem',
+      color: disabled ? gray400Color : theme.palette.primary.light
+    }
+  }, rest, {
+    children: children
+  }));
+};
+
+export { EliceIconButton as default };

package/es/components/icon-button/index.d.ts

@@ -0,0 +1,2 @@
+export { default as EliceIconButton } from './IconButton';
+export type { EliceIconButtonProps } from './IconButton';

package/es/components/icon-button/index.js

@@ -0,0 +1 @@
+export { default as EliceIconButton } from './IconButton.js';

package/es/components/index.d.ts

@@ -0,0 +1,18 @@
+export * from './AI-feedback';
+export * from './badge';
+export * from './button';
+export * from './chat';
+export * from './dialog';
+export * from './dotted-pagination';
+export * from './layout';
+export * from './question';
+export * from './dotted-pagination';
+export * from './selection';
+export * from './icon-button';
+export * from './answer-feedback';
+export * from './dotted-pagination';
+export * from './table';
+export * from './textarea';
+export * from './tooltip';
+export * from './AIDTTypography';
+export * from './AdaptiveImage';

package/es/components/index.js

@@ -0,0 +1,16 @@
+export { default as EliceAIFeedback } from './AI-feedback/AIFeedback.js';
+export { default as EliceBadge } from './badge/Badge.js';
+export { default as EliceButton } from './button/Button.js';
+export { default as EliceChat } from './chat/Chat.js';
+export { default as EliceDialog } from './dialog/Dialog.js';
+export { default as EliceDottedPagination } from './dotted-pagination/DottedPagination.js';
+export { default as EliceLayout } from './layout/Layout.js';
+export { default as EliceQuestion } from './question/Question.js';
+export { default as EliceSelection } from './selection/Selection.js';
+export { default as EliceIconButton } from './icon-button/IconButton.js';
+export { default as EliceAnswerFeedback } from './answer-feedback/AnswerFeedback.js';
+export { default as EliceTable } from './table/Table.js';
+export { default as EliceTextarea } from './textarea/Textarea.js';
+export { default as EliceTooltip } from './tooltip/Tooltip.js';
+export { default as AIDTTypography } from './AIDTTypography/AIDTTypography.js';
+export { default as EliceImage } from './AdaptiveImage/AdaptiveImage.js';

package/es/components/layout/Layout.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+export interface EliceLayoutProps {
+    levelKey?: 'elementary' | 'middle' | 'high';
+    title: string;
+    children: ReactNode;
+    sideChildren?: ReactNode;
+    currentPage: number;
+    totalPage: number;
+    onReset?: VoidFunction;
+    onPrev?: VoidFunction;
+    onNext?: VoidFunction;
+    allowPre?: boolean;
+    allowNext?: boolean;
+}
+declare const EliceLayout: (props: EliceLayoutProps) => import("react/jsx-runtime").JSX.Element;
+export default EliceLayout;

package/es/components/layout/Layout.js

@@ -0,0 +1,188 @@
+import _styled from '@emotion/styled/base';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useIsomorphicLayoutEffect } from 'react-use';
+import LoopIcon from '@mui/icons-material/Loop';
+import { Stack, Typography, useTheme } from '@mui/material';
+import { secondaryColor, gray200Color, main300Color, main400Color, KeyElementaryBg, KeyMiddleBg, KeyHighBg } from '../tokenColorTemporary.js';
+import img from './bg_pattern.png.js';
+import ArrowLeft from '../../icons/ArrowLeft.js';
+import ArrowRight from '../../icons/ArrowRight.js';
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var StyledContainer = /*#__PURE__*/_styled(Stack, {
+  target: "efnp08i6"
+})("production" === "production" ? {
+  name: "14skuem",
+  styles: "display:flex;flex-direction:column;height:100%;width:100%;min-height:10rem;max-height:calc(100vh - 3.5rem);box-sizing:border-box;position:relative;padding:1.5rem 3.125rem"
+} : {
+  name: "14skuem",
+  styles: "display:flex;flex-direction:column;height:100%;width:100%;min-height:10rem;max-height:calc(100vh - 3.5rem);box-sizing:border-box;position:relative;padding:1.5rem 3.125rem",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledContentContainer = /*#__PURE__*/_styled(Stack, {
+  target: "efnp08i5"
+})("production" === "production" ? {
+  name: "1p0a3is",
+  styles: "display:flex;flex-direction:column;flex-grow:1;gap:0px;position:relative;z-index:2;border-radius:2rem;background-color:rgb(255, 255, 255);overflow:hidden"
+} : {
+  name: "1p0a3is",
+  styles: "display:flex;flex-direction:column;flex-grow:1;gap:0px;position:relative;z-index:2;border-radius:2rem;background-color:rgb(255, 255, 255);overflow:hidden",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledTitleContainer = /*#__PURE__*/_styled(Stack, {
+  target: "efnp08i4"
+})("background-color:", function (props) {
+  return props.backgroundColor ? props.backgroundColor : 'rgb(93, 107, 179)';
+}, ";z-index:500;flex-shrink:0;height:4.625rem;width:fit-content;min-width:20.875rem;position:relative;top:auto;left:3.125rem;border-radius:0px 0px 1.625rem 1.625rem;padding-top:1rem;box-sizing:border-box;");
+var StyledTitle = /*#__PURE__*/_styled(Typography, {
+  target: "efnp08i3"
+})("production" === "production" ? {
+  name: "1gsf9d8",
+  styles: "border-top:0.125rem dashed rgb(255, 255, 255);height:100%;min-width:100%;text-align:center;font-size:1.375rem;font-weight:700;color:rgb(255, 255, 255);display:flex;align-items:center;justify-content:center"
+} : {
+  name: "1gsf9d8",
+  styles: "border-top:0.125rem dashed rgb(255, 255, 255);height:100%;min-width:100%;text-align:center;font-size:1.375rem;font-weight:700;color:rgb(255, 255, 255);display:flex;align-items:center;justify-content:center",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledScrollBarStack = /*#__PURE__*/_styled(Stack, {
+  target: "efnp08i2"
+})("flex-grow:1;position:relative;max-height:100%;overflow-y:scroll;box-sizing:border-box;::-webkit-scrollbar{width:0.5rem;}::-webkit-scrollbar-track{background:", gray200Color, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb{background:", main300Color, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb:hover{background:", main400Color, ";}");
+var StyledStepSwitcherContainerStack = /*#__PURE__*/_styled(Stack, {
+  target: "efnp08i1"
+})("production" === "production" ? {
+  name: "8mh45e",
+  styles: "flex-direction:row;width:100%;height:4.25rem;justify-content:space-between;align-items:center;padding-left:1.5rem;padding-right:1.5rem;box-sizing:border-box;flex-shrink:0"
+} : {
+  name: "8mh45e",
+  styles: "flex-direction:row;width:100%;height:4.25rem;justify-content:space-between;align-items:center;padding-left:1.5rem;padding-right:1.5rem;box-sizing:border-box;flex-shrink:0",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledSwitchStepButton = /*#__PURE__*/_styled(Typography, {
+  target: "efnp08i0"
+})("production" === "production" ? {
+  name: "9f748q",
+  styles: "cursor:pointer;font-size:1.625rem;font-weight:700;height:2.5rem;display:flex;align-items:center"
+} : {
+  name: "9f748q",
+  styles: "cursor:pointer;font-size:1.625rem;font-weight:700;height:2.5rem;display:flex;align-items:center",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var EliceLayout = function EliceLayout(props) {
+  var _a;
+  var _props$levelKey = props.levelKey,
+    levelKey = _props$levelKey === void 0 ? 'middle' : _props$levelKey,
+    children = props.children,
+    sideChildren = props.sideChildren,
+    _props$title = props.title,
+    title = _props$title === void 0 ? 'The title' : _props$title,
+    currentPage = props.currentPage,
+    totalPage = props.totalPage,
+    allowNext = props.allowNext,
+    allowPre = props.allowPre,
+    onNext = props.onNext,
+    onPrev = props.onPrev,
+    onReset = props.onReset;
+  var theme = useTheme();
+  var renderBgColorByLevelKey = function renderBgColorByLevelKey() {
+    if (levelKey === 'elementary') {
+      return KeyElementaryBg;
+    } else if (levelKey === 'middle') {
+      return KeyMiddleBg;
+    } else {
+      return KeyHighBg;
+    }
+  };
+  useIsomorphicLayoutEffect(function () {
+    document.documentElement.style.fontSize = '16px';
+  }, []);
+  return jsx(StyledContainer, {
+    style: {
+      background: "url(".concat(img, ")\n        100vw top repeat,\n      ").concat((_a = theme.palette.background["default"]) !== null && _a !== void 0 ? _a : renderBgColorByLevelKey(), " left top repeat")
+    },
+    children: jsxs(StyledContentContainer, {
+      children: [jsx(StyledTitleContainer, {
+        backgroundColor: theme.palette.primary.main,
+        children: jsx(StyledTitle, {
+          children: title
+        })
+      }), !!onReset && jsx(Stack, {
+        style: {
+          position: 'absolute',
+          top: 0,
+          right: 0,
+          height: '3.5rem',
+          width: '3.5rem',
+          transform: 'scaleX(-1)'
+        },
+        alignItems: "center",
+        justifyContent: "center",
+        children: jsx(LoopIcon, {
+          onClick: onReset,
+          style: {
+            transform: 'rotate(135deg)',
+            color: secondaryColor,
+            cursor: 'pointer'
+          }
+        })
+      }), jsxs(Stack, {
+        direction: "row",
+        gap: "2rem",
+        width: "100%",
+        padding: "0px 3.125rem",
+        margin: "2rem 0px 1.625rem",
+        boxSizing: "border-box",
+        flexGrow: 1,
+        overflow: "hidden",
+        children: [jsx(StyledScrollBarStack, {
+          children: sideChildren
+        }), jsx(StyledScrollBarStack, {
+          children: children
+        })]
+      }), jsxs(StyledStepSwitcherContainerStack, {
+        children: [jsxs(StyledSwitchStepButton, {
+          color: allowPre ? '#0A379B' : '#8F8F8F',
+          onClick: function onClick() {
+            if (!allowPre || !onPrev) return;
+            onPrev();
+          },
+          children: [jsx(ArrowLeft, {
+            size: 24
+          }), '이전']
+        }), jsxs(Stack, {
+          direction: "row",
+          gap: 0,
+          alignItems: "center",
+          children: [jsx(Typography, {
+            color: "#5D6BB3",
+            fontSize: "2rem",
+            fontWeight: 900,
+            children: currentPage
+          }), jsx(Stack, {
+            style: {
+              border: '0.125rem solid #D8D8E2',
+              width: '2rem',
+              height: 0,
+              transform: 'rotate(-69deg)'
+            }
+          }), jsx(Typography, {
+            color: "#D8D8E2",
+            fontSize: "2rem",
+            fontWeight: 900,
+            children: totalPage
+          })]
+        }), jsxs(StyledSwitchStepButton, {
+          color: allowNext ? '#0A379B' : '#8F8F8F',
+          onClick: function onClick() {
+            if (!allowNext || !onNext) return;
+            onNext();
+          },
+          children: ['다음', jsx(ArrowRight, {
+            size: 24
+          })]
+        })]
+      })]
+    })
+  });
+};
+
+export { EliceLayout as default };