@loword/loword-design-system 0.0.6 → 0.0.7

package/src/styles/components/auto-complete.css

@@ -0,0 +1,72 @@
+@utility autocomplete-2xs {
+  --autocomplete-item-min-height: var(--spacing_32);
+  --autocomplete-item-padding-x: var(--spacing_4);
+  --autocomplete-item-padding-y: var(--spacing_4);
+  --autocomplete-secondary-font-size: var(--text-display10);
+  --autocomplete-secondary-line-height: var(--leading-display10);
+  --autocomplete-secondary-letter-spacing: var(--tracking-display10);
+  @apply display10;
+}
+
+@utility autocomplete-xs {
+  --autocomplete-item-min-height: var(--spacing_40);
+  --autocomplete-item-padding-x: var(--spacing_8);
+  --autocomplete-item-padding-y: var(--spacing_4);
+  --autocomplete-secondary-font-size: var(--text-display10);
+  --autocomplete-secondary-line-height: var(--leading-display10);
+  --autocomplete-secondary-letter-spacing: var(--tracking-display10);
+  @apply display12;
+}
+
+@utility autocomplete-sm {
+  --autocomplete-item-min-height: var(--spacing_60);
+  --autocomplete-item-padding-x: var(--spacing_16);
+  --autocomplete-item-padding-y: var(--spacing_12);
+  --autocomplete-secondary-font-size: var(--text-display12);
+  --autocomplete-secondary-line-height: var(--leading-display12);
+  --autocomplete-secondary-letter-spacing: var(--tracking-display12);
+  @apply display14;
+}
+
+@utility autocomplete-md {
+  --autocomplete-item-min-height: var(--spacing_60);
+  --autocomplete-item-padding-x: var(--spacing_16);
+  --autocomplete-item-padding-y: var(--spacing_12);
+  --autocomplete-secondary-font-size: var(--text-display12);
+  --autocomplete-secondary-line-height: var(--leading-display12);
+  --autocomplete-secondary-letter-spacing: var(--tracking-display12);
+  @apply display14;
+}
+
+@utility autocomplete-lg {
+  --autocomplete-item-min-height: var(--spacing_60);
+  --autocomplete-item-padding-x: var(--spacing_16);
+  --autocomplete-item-padding-y: var(--spacing_12);
+  --autocomplete-secondary-font-size: var(--text-display12);
+  --autocomplete-secondary-line-height: var(--leading-display12);
+  --autocomplete-secondary-letter-spacing: var(--tracking-display12);
+  @apply display14;
+}
+
+@utility autocomplete-xl {
+  --autocomplete-item-min-height: var(--spacing_60);
+  --autocomplete-item-padding-x: var(--spacing_16);
+  --autocomplete-item-padding-y: var(--spacing_12);
+  --autocomplete-secondary-font-size: var(--text-display12);
+  --autocomplete-secondary-line-height: var(--leading-display12);
+  --autocomplete-secondary-letter-spacing: var(--tracking-display12);
+  @apply display14;
+}
+
+@utility autocomplete-item {
+  min-height: var(--autocomplete-item-min-height);
+  padding-inline: var(--autocomplete-item-padding-x);
+  padding-block: var(--autocomplete-item-padding-y);
+  font-weight: var(--font-regular);
+}
+
+@utility autocomplete-secondary {
+  font-size: var(--autocomplete-secondary-font-size);
+  line-height: var(--autocomplete-secondary-line-height);
+  letter-spacing: var(--autocomplete-secondary-letter-spacing);
+}

package/src/styles/components/index.css

@@ -7,3 +7,4 @@
 @import './modal.css';
 @import './editor.css';
 @import './bread-crumb.css';
+@import './auto-complete.css';

package/dist/components/LDFileUpload/LDFileUploadBase.d.ts

@@ -1,50 +0,0 @@
-import { Dispatch, type ReactNode, SetStateAction } from 'react';
-import { TMimeType } from '../../constants/file.js';
-import { type LDButtonProps } from '../../components/LDButton/LDButton.js';
-import { IFile } from '../../utils/file.js';
-interface FileUploadContextType {
-    recommendedSize?: {
-        width: number;
-        height: number;
-    };
-    maxSize: number;
-    allowedExtensions: TMimeType[];
-    fileList: IFile[];
-    setFileList: Dispatch<SetStateAction<IFile[]>>;
-    maxFileCount: number;
-}
-export declare const useFileUploadContext: () => FileUploadContextType;
-interface RootProps {
-    recommendedSize?: {
-        width: number;
-        height: number;
-    };
-    maxSize: number;
-    allowedExtensions: TMimeType[];
-    fileList: IFile[] | [];
-    setFileList: Dispatch<SetStateAction<IFile[] | []>>;
-    maxFileCount?: number;
-    className?: string;
-    children?: ReactNode;
-}
-interface LDInputProps extends LDButtonProps<'button'> {
-    onChangeFile: ({ fileName, fileBase64, file, }: {
-        fileName: string;
-        fileBase64: string;
-        file: File;
-    }) => Promise<string | void>;
-    label?: string;
-}
-export declare const LDFileUploadBase: {
-    Root: ({ recommendedSize, maxSize, allowedExtensions, maxFileCount, fileList, setFileList, className, children, }: RootProps) => import("react/jsx-runtime").JSX.Element;
-    LDInput: ({ onChangeFile, label, ...props }: LDInputProps) => import("react/jsx-runtime").JSX.Element;
-    CardList: ({ emptyContent, className, }: {
-        emptyContent?: ReactNode;
-        className?: string;
-    }) => import("react/jsx-runtime").JSX.Element | null;
-    Description: ({ className }: {
-        className?: string;
-    }) => import("react/jsx-runtime").JSX.Element;
-};
-export default LDFileUploadBase;
-//# sourceMappingURL=LDFileUploadBase.d.ts.map

package/dist/components/LDFileUpload/LDFileUploadBase.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"LDFileUploadBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDFileUpload/LDFileUploadBase.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,QAAQ,EACR,KAAK,SAAS,EACd,cAAc,EAGf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAmB,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAiB,EACf,KAAK,aAAa,EACnB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAGL,KAAK,EAKN,MAAM,kBAAkB,CAAC;AAG1B,UAAU,qBAAqB;IAC7B,eAAe,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACpD,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,EAAE,SAAS,EAAE,CAAC;IAC/B,QAAQ,EAAE,KAAK,EAAE,CAAC;IAClB,WAAW,EAAE,QAAQ,CAAC,cAAc,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IAC/C,YAAY,EAAE,MAAM,CAAC;CACtB;AAID,eAAO,MAAM,oBAAoB,6BAUhC,CAAC;AAEF,UAAU,SAAS;IACjB,eAAe,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACpD,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,EAAE,SAAS,EAAE,CAAC;IAC/B,QAAQ,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC;IACvB,WAAW,EAAE,QAAQ,CAAC,cAAc,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;IACpD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA8BD,UAAU,YAAa,SAAQ,aAAa,CAAC,QAAQ,CAAC;IACpD,YAAY,EAAE,CAAC,EACb,QAAQ,EACR,UAAU,EACV,IAAI,GACL,EAAE;QACD,QAAQ,EAAE,MAAM,CAAC;QACjB,UAAU,EAAE,MAAM,CAAC;QACnB,IAAI,EAAE,IAAI,CAAC;KACZ,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAmJD,eAAO,MAAM,gBAAgB;uHAjL1B,SAAS;iDAoCT,YAAY;6CA2EZ;QACD,YAAY,CAAC,EAAE,SAAS,CAAC;QACzB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB;iCA6CmC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE;CAuBzD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/LDFileUpload/LDFileUploadBase.js

@@ -1,102 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { createContext, useContext, } from 'react';
-import cn from '../../utils/cn.js';
-import { FILE_EXTENSIONS } from '../../constants/file.js';
-import LDButton from '../../components/LDButton/LDButton.js';
-import { fileToBase64, getFileSizeUnit, isImage, validAllowedExtesions, validFileSize, validImageSize, } from '../../utils/file.js';
-import LDToast from '../../components/LDToast/LDToast.js';
-const FileUploadContext = createContext(null);
-export const useFileUploadContext = () => {
-    const fileUploadContext = useContext(FileUploadContext);
-    if (!fileUploadContext) {
-        throw new Error('LDFileUploadBase 하위 컴포넌트는 Root 내부에서 사용해야 합니다.');
-    }
-    return fileUploadContext;
-};
-const Root = ({ recommendedSize, maxSize, allowedExtensions, maxFileCount, fileList, setFileList, className, children, }) => {
-    //   const [file, setFile] = useState<IFile | null>(null);
-    return (_jsx(FileUploadContext.Provider, { value: {
-            recommendedSize,
-            maxSize,
-            allowedExtensions,
-            maxFileCount: maxFileCount ?? 1,
-            fileList,
-            setFileList,
-        }, children: _jsx("div", { className: cn('w-full', className), children: children }) }));
-};
-const LDInput = ({ onChangeFile, label = '파일 선택', ...props }) => {
-    const { allowedExtensions, maxSize, fileList, setFileList, maxFileCount } = useFileUploadContext();
-    const getFileError = async (file) => {
-        if (!validAllowedExtesions(file, allowedExtensions)) {
-            const allowed = allowedExtensions
-                .map((item) => FILE_EXTENSIONS[item].toUpperCase())
-                .join(', ');
-            return `지원하지 않는 파일 형식입니다. ${allowed} 파일만 업로드 가능합니다.`;
-        }
-        if (!validFileSize(file, maxSize)) {
-            return `파일 크기가 너무 큽니다. ${getFileSizeUnit(maxSize)} 이하 파일을 선택해주세요.`;
-        }
-        if (isImage(file.name) && !(await validImageSize(file))) {
-            return '이미지 해상도가 너무 큽니다. 더 작은 크기의 이미지를 선택해주세요.';
-        }
-        return null;
-    };
-    const handleFile = async (e) => {
-        const files = e.target.files;
-        if (!files)
-            return;
-        for (const file of files) {
-            const error = await getFileError(file);
-            if (error) {
-                LDToast.error(error);
-                return;
-            }
-        }
-        for (const file of files) {
-            try {
-                const data = await fileToBase64(file);
-                const src = await onChangeFile({ ...data, file });
-                if (src) {
-                    setFileList((prev) => [...prev, { ...data, src }]);
-                }
-            }
-            catch (error) {
-                if (error instanceof Error) {
-                    LDToast.error(error.message);
-                    return;
-                }
-                LDToast.error('파일 업로드 중 문제가 발생했습니다. 잠시후 다시 시도해주세요.');
-            }
-        }
-    };
-    return (_jsxs(LDButton, { as: "label", ...props, children: [label, _jsx("input", { type: "file", multiple: maxFileCount > 1, onClick: (e) => (e.currentTarget.value = ''), onChange: (e) => handleFile(e), className: "sr-only" })] }));
-};
-const CardList = ({ emptyContent, className, }) => {
-    /*
-      이미지인 경우
-      이미지가 아닌 파일인 경우
-    */
-    const { fileList } = useFileUploadContext();
-    if (fileList.length <= 0)
-        return emptyContent ? _jsx(_Fragment, { children: emptyContent }) : null;
-    return (_jsxs(_Fragment, { children: [_jsx(_Fragment, { children: JSON.stringify(fileList, null, 2) }), _jsx(_Fragment, { children: 'length: ' + fileList.length }), _jsx("div", { className: cn('flex flex-row', className), children: fileList?.map((file, idx) => (_jsx("div", { className: "size-12 overflow-hidden", children: _jsx("img", { src: file?.src, alt: file?.fileName, className: "object-cover" }) }, `${file.fileName}_${idx}`))) })] }));
-};
-// const CardList = ({}) => {
-//   return <></>;
-// };
-const Description = ({ className }) => {
-    const { recommendedSize, maxSize, allowedExtensions } = useFileUploadContext();
-    const recommendedSizeText = recommendedSize &&
-        `권장 사이즈 ${recommendedSize.width}x${recommendedSize.height}, `;
-    const requiredText = `최대 크기 ${getFileSizeUnit(maxSize)}`;
-    const extensionsText = ` (${allowedExtensions.map((item) => FILE_EXTENSIONS[item]).join(', ')})`;
-    return (_jsxs("p", { className: cn('display14 text-neutral400 semibold', className), children: [recommendedSizeText, requiredText, extensionsText] }));
-};
-export const LDFileUploadBase = {
-    Root,
-    LDInput,
-    CardList,
-    Description,
-};
-export default LDFileUploadBase;