podo-ui 0.1.29

package/react/atom/editor.tsx

@@ -0,0 +1,171 @@
+import { useEffect, useRef, useState } from 'react';
+import { v4 as uuid } from 'uuid';
+import suneditor from 'suneditor';
+import 'suneditor/dist/css/suneditor.min.css';
+import styles from './editor.module.scss';
+import lang from 'suneditor/src/lang';
+import {
+  blockquote,
+  align,
+  font,
+  fontSize,
+  fontColor,
+  hiliteColor,
+  horizontalRule,
+  list,
+  formatBlock,
+  lineHeight,
+  template,
+  paragraphStyle,
+  textStyle,
+  link,
+  image,
+  video,
+  table,
+} from 'suneditor/src/plugins';
+import { z } from 'zod';
+
+interface Props {
+  value: string;
+  width?: string;
+  height?: string;
+  onChange: (content: string) => void;
+  imageUploadUrl?: string;
+  imageUploadHeader?: Record<string, string>;
+  validator?: z.ZodType<unknown>;
+}
+
+const SunEditor = ({
+  value = '',
+  width = '100%',
+  height = '600px',
+  onChange,
+  imageUploadUrl,
+  imageUploadHeader,
+  validator,
+}: Props) => {
+  const [message, setMessage] = useState('');
+  const [statusClass, setStatusClass] = useState('');
+  const editorRef = useRef<HTMLTextAreaElement>(null);
+  const editorID = `f${uuid()}`;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const ref = useRef<any>();
+
+  const validateHandler = (content: string) => {
+    setMessage('');
+    setStatusClass('');
+    if (validator && content.length > 0) {
+      try {
+        validator.parse(content);
+        setStatusClass('success');
+      } catch (e) {
+        if (e instanceof z.ZodError) {
+          setMessage(e.errors[0].message);
+          setStatusClass('danger');
+        }
+      }
+    }
+  };
+  const toolbar = [
+    ['undo', 'redo'],
+    ['formatBlock', 'bold', 'underline', 'italic', 'strike'],
+    ['fontColor', 'hiliteColor'],
+    ['align', 'list', 'table'],
+    ['link', 'image', 'video'],
+    ['fullScreen', 'codeView'],
+  ];
+  const editorOptions = {
+    lang: lang.ko,
+    plugins: {
+      blockquote,
+      align,
+      font,
+      fontSize,
+      fontColor,
+      hiliteColor,
+      horizontalRule,
+      list,
+      table,
+      formatBlock,
+      lineHeight,
+      template,
+      paragraphStyle,
+      textStyle,
+      link,
+      image,
+      video,
+    },
+    width: width,
+    height: height,
+    buttonList: toolbar,
+    formats: [
+      'h1',
+      'h2',
+      'h3',
+      {
+        tag: 'p',
+        name: '본문',
+        command: 'replace',
+        class: '',
+      },
+      {
+        tag: 'div',
+        name: '인용구',
+        command: 'range',
+        class: '__se__format__range__quote',
+      },
+    ],
+    resizingBar: false,
+    imageUploadUrl,
+    imageUploadHeader,
+    icons: {
+      undo: '<i class="editor undo">실행취소</i>',
+      redo: '<i class="editor redo">다시실행</i>',
+      bold: '<i class="editor bold">굵게</i>',
+      underline: '<i class="editor underline">밑줄</i>',
+      italic: '<i class="editor italic">기울이기</i>',
+      strike: '<i class="editor strike">가운데선</i>',
+      font_color: '<i class="editor font">글자색</i>',
+      highlight_color: '<i class="editor highlighter">배경색</i>',
+      align_left: '<i class="editor align-left">왼쪽 정렬</i>',
+      align_center: '<i class="editor align-center">가운데 정렬</i>',
+      align_right: '<i class="editor align-right">우측 정렬</i>',
+      align_justify: '<i class="editor align-justify">양쪽 정렬</i>',
+
+      list_bullets: '<i class="editor list-ul">목록</i>',
+      list_number: '<i class="editor list-ol">숫자 목록</i>',
+      table: '<i class="editor table">테이블</i>',
+      link: '<i class="editor link">링크</i>',
+      image: '<i class="editor image">사진</i>',
+      video: '<i class="editor video">비디오</i>',
+      expansion: '<i class="editor expand">확장</i>',
+      code_view: '<i class="editor code">코드</i>',
+    },
+  };
+
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ref.current = suneditor.create(editorID, editorOptions as any);
+
+    ref.current.onChange = function (content: string) {
+      onChange(content);
+      validateHandler(content);
+    };
+
+    return () => {
+      ref.current.destroy();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div className={`${styles.editor} ${statusClass}`}>
+      <textarea ref={editorRef} id={editorID} defaultValue={value} />
+      {validator && message && (
+        <div className={styles.validator}>{message}</div>
+      )}
+    </div>
+  );
+};
+
+export default SunEditor;

package/react/atom/input.module.scss

@@ -0,0 +1,42 @@
+@use '../../mixin.scss' as *;
+.style {
+  display: flex;
+  flex-direction: column;
+  gap: s(3);
+  &:global {
+    > input {
+      width: 300px;
+    }
+    > div.validator {
+      @include p4;
+      & {
+        color: color('text-sub');
+      }
+    }
+    > div{
+      position: relative;
+      width: fit-content;
+      > span.unit {
+        position: absolute;
+        right: s(3);
+        top: 50%;
+        transform: translateY(-50%);
+        color: color('text-sub');
+        pointer-events: none;
+      }
+      > input {
+        /* Chrome, Safari, Edge, Opera */
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
+          -webkit-appearance: none;
+          margin: 0;
+        }
+
+        /* Firefox  */
+        &[type='number'] {
+          -moz-appearance: textfield;
+        }
+      }
+    }
+  }
+}

package/react/atom/input.tsx

@@ -0,0 +1,67 @@
+import { useState, useEffect, useCallback } from 'react';
+import { z } from 'zod';
+import styles from './input.module.scss';
+
+interface InputWrapperProps extends React.ComponentProps<'input'> {
+  value?: string | number;
+  className?: string;
+  validator?: z.ZodType<unknown>;
+  withIcon?: string;
+  withRightIcon?: string;
+  unit?: string;
+}
+
+const Input: React.FC<InputWrapperProps> = ({
+  validator,
+  value,
+  className,
+  withIcon,
+  withRightIcon,
+  unit,
+  ...rest
+}) => {
+  const [message, setMessage] = useState('');
+  const [statusClass, setStatusClass] = useState('');
+
+  const validateHandler = useCallback(() => {
+    setMessage('');
+    setStatusClass('');
+    if (validator && value) {
+      try {
+        validator.parse(value);
+        setStatusClass('success');
+      } catch (e) {
+        if (e instanceof z.ZodError) {
+          setMessage(e.errors[0].message);
+          setStatusClass('danger');
+        }
+      }
+    }
+  }, [validator, value]);
+
+  useEffect(() => {
+    validateHandler();
+  }, [validateHandler, value]);
+
+  return (
+    <div className={`${styles.style} ${className || ''}`}>
+      <div
+        className={`${className || ''} ${withIcon ? 'with-icon' : ''} ${withRightIcon ? 'with-right-icon' : ''}`}
+      >
+        {withIcon && <i className={withIcon} />}
+        <input
+          {...rest}
+          value={value ?? ''}
+          className={`${statusClass} ${className || ''}`}
+        />
+        {withRightIcon && <i className={withRightIcon} />}
+        {unit && <span className="unit">{unit}</span>}
+      </div>
+      {validator && message !== '' && (
+        <div className="validator">{message}</div>
+      )}
+    </div>
+  );
+};
+
+export default Input;

package/react/atom/textarea.module.scss

@@ -0,0 +1,17 @@
+@use '../../mixin.scss' as *;
+.style {
+  display: flex;
+  flex-direction: column;
+  gap: s(3);
+  &:global {
+    > textarea {
+      width: 100%;
+    }
+    > div.validator {
+      @include p4;
+      & {
+        color: color('text-sub');
+      }
+    }
+  }
+}

package/react/atom/textarea.tsx

@@ -0,0 +1,51 @@
+import { useState } from 'react';
+import { z } from 'zod';
+import styles from './textarea.module.scss';
+
+interface TextareaWrapperProps extends React.ComponentProps<'textarea'> {
+  value: string;
+  className?: string;
+  validator?: z.ZodType<unknown>;
+}
+
+const Textarea: React.FC<TextareaWrapperProps> = ({
+  validator,
+  value,
+  className,
+  ...rest
+}) => {
+  const [message, setMessage] = useState('');
+  const [statusClass, setStatusClass] = useState('');
+
+  const validateHandler = () => {
+    setMessage('');
+    setStatusClass('');
+    if (validator && value.length > 0) {
+      try {
+        validator.parse(value);
+        setStatusClass('success');
+      } catch (e) {
+        if (e instanceof z.ZodError) {
+          setMessage(e.errors[0].message);
+          setStatusClass('danger');
+        }
+      }
+    }
+  };
+
+  return (
+    <div className={`${styles.style} ${className}`}>
+      <textarea
+        {...rest}
+        value={value}
+        className={`${statusClass} ${className}`}
+        onKeyUp={validateHandler}
+      />
+      {validator && message !== '' && (
+        <div className="validator">{message}</div>
+      )}
+    </div>
+  );
+};
+
+export default Textarea;

package/react/molecule/field.module.scss

@@ -0,0 +1,22 @@
+@use '../../mixin.scss' as *;
+.style {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: s(3);
+  &:global {
+    > div.child {
+      width: 100%;
+      > :not(:last-child) {
+        display: inline-block;
+        margin-right: s(5);
+      }
+    }
+    > div.helper {
+      @include p4;
+      & {
+        color: color('text-sub');
+      }
+    }
+  }
+}

package/react/molecule/field.tsx

@@ -0,0 +1,78 @@
+import { z } from 'zod';
+import styles from './field.module.scss';
+import { useCallback, useEffect, useState } from 'react';
+
+interface Props {
+  label?: string;
+  labelClass?: string;
+  required?: boolean;
+  helper?: string;
+  helperClass?: string;
+  children?: React.ReactNode;
+  validator?: z.ZodType<unknown>;
+  value?: string;
+  setClassName?: React.Dispatch<React.SetStateAction<string>>;
+  className?: string;
+}
+
+const Field = ({
+  label,
+  labelClass,
+  required,
+  helper,
+  helperClass,
+  children,
+  validator,
+  value,
+  setClassName,
+  className,
+}: Props) => {
+  const [message, setMessage] = useState('');
+
+  const validateHandler = useCallback(() => {
+    setMessage('');
+    if (setClassName) {
+      setClassName('');
+    }
+    if (validator && value && value.length > 0) {
+      try {
+        validator.parse(value);
+        if (setClassName) {
+          setClassName('success');
+        }
+      } catch (e) {
+        if (e instanceof z.ZodError) {
+          setMessage(e.errors[0].message);
+          if (setClassName) {
+            setClassName('danger');
+          }
+        }
+      }
+    }
+  }, [validator, value, setClassName]);
+
+  useEffect(() => {
+    validateHandler();
+  }, [validateHandler]);
+
+  return (
+    <div className={`${styles.style} ${className || ''}`}>
+      {label && (
+        <label className={labelClass}>
+          {label}
+
+          {required && <span className="required">*</span>}
+        </label>
+      )}
+      <div className="child">{children}</div>
+      {helper ||
+        (validator && message !== '' && (
+          <div className={`helper ${helperClass || ''}`}>
+            {message || helper}
+          </div>
+        ))}
+    </div>
+  );
+};
+
+export default Field;

package/react.ts

@@ -0,0 +1,16 @@
+import Input from './react/atom/input';
+import Textarea from './react/atom/textarea';
+import Editor from './react/atom/editor';
+import EditorView from './react/atom/editor-view';
+import Field from './react/molecule/field';
+const Form = {
+  Input,
+  Textarea,
+  Editor,
+  EditorView,
+  Field,
+};
+
+export default Form;
+
+export { Input, Textarea, Editor, EditorView, Field };

package/readme.md

@@ -0,0 +1,199 @@
+# Podo-ui
+- SCSS Module 기반 디자인 시스템
+
+
+# SCSS
+
+## 기본 적용
+
+```js
+import 'podo-ui/global.scss';
+```
+
+### SCSS Module 내에서 변수, 함수, 믹스인 활용
+
+👉 파일의 최상단에 아래 파일 선언
+
+```scss
+@use 'podo-ui/mixin' as *;
+```
+
+## Variables
+
+### Color Tone
+
+👉 회색의 톤을 결정함. 기본값(미설정) 과 warm으로 선택할 수 있음.
+👉 js에서 아래와 같이 설정(warm)
+
+```js
+// 기본값
+document.documentElement.setAttribute('data-color-tone', '');
+
+// warm 톤
+document.documentElement.setAttribute('data-color-tone', 'warm');
+```
+
+### Dark Mode
+
+👉 다크모드를 설정함. 기본값(자동, 브라우저 설정에 따름)과 'light', 'dark'를 선택할 수 있음.
+
+```js
+// 기본값(자동)
+document.documentElement.setAttribute('data-color-mode', '');
+
+// light 모드
+document.documentElement.setAttribute('data-color-mode', 'light');
+
+// dark 모드
+document.documentElement.setAttribute('data-color-mode', 'dark');
+```
+
+### Font family
+
+👉 font-family를 설정. scss에서 덮어쓰기
+
+```scss
+:root {
+  --base-font-family: 'Pretendard', sans-serif;
+}
+```
+
+## 색상
+
+### 적용 색상 종류
+
+👉 선택 가능한 색상 종류 : primary, default, default-deep, info, link, success, warning, danger  
+👉 선택 가능한 색상의 하위 색상으로 색상명-fill과 색상명-reverse가 존재한다.  
+👉 위 선택자에 없는 text, border, bg, bg-elevation은 시스템 내 자동 적용한다.
+
+### CSS 선택자 사용
+
+👉 아래와 같이 직접 선택자를 넣어 사용
+
+```html
+<div className="primary">primary color</div>
+<div className="bg-primary">primary background color</div>
+```
+
+### SCSS 내에서 함수 사용
+
+```scss
+p {
+  color: color(값);
+}
+```
+
+### 커스컴 컬러
+
+👉 아래 형태로 css 변수를 커스텀하여 사용
+
+```scss
+:root {
+  --color-primary: #f34a35;
+  --color-primary-hover: #dd2d0f;
+  --color-primary-pressed: #c9280c;
+  --color-primary-focus: #dd2d0f;
+  --color-primary-fill: #fff8f7;
+  --color-primary-reverse: #ffffff;
+}
+html[data-color-mode='dark'] {
+  --color-primary: #ff5d49;
+  --color-primary-hover: #ff7564;
+  --color-primary-pressed: #ff5d49;
+  --color-primary-focus: #ff7564;
+  --color-primary-fill: #1c1c20;
+}
+```
+
+## 그리드
+
+### 기본 그리드 시스템 ( 4 ~ 12 columns / auto wrap)
+
+👉 css에서 .grid 속성으로 기본 그리드 시스템을 설정합니다.
+
+```html
+<section className="grid">
+  <div className="w-4">w-4</div>
+  <div className="w-4">w-4</div>
+  <div className="w-4">w-4</div>
+</section>
+```
+
+👉 그리드 내 하위 요소가 중단점 이상일 경우 자동으로 줄바꿈 합니다.  
+👉 w-{숫자} 형태로 이루어져있으며 1~12 그리드가 존재합니다.  
+👉 {숫자} / 12 \* 100% 한 값을 전체 그리드 내의 비율로 사용합니다.  
+👉 예: w-1은 1 / 12 \* 100 = 8.333% 크기, w-6은 6 / 12 \* 100 = 50% 크기를 차지합니다.
+👉 PC는 12 그리드, Tablet은 6 그리드, Mobile은 4 그리드를 기본으로 한다.
+
+### 고정 그리드 시스템
+
+👉 디바이스에 관계없이 디바이스의 너비를 유지하고 줄바꿈을 하지 않습니다.  
+👉 css에서 grid-fix-2 ~ grid-gix-6 로 2 ~ 6개의 컬럼을 가진 그리드 시스템을 설정합니다.  
+👉 4그리드일 경우 CSS에서 하위 구성요소는 w-1_4, w-2_4, w-3_4가 존재합니다.w-1_4은 1/4(25%)  
+👉 크기, w-2_4는 2/4(50%) 크기, w-3_4는 3/4(75%) 크기를 차지합니다.  
+👉 Fixed wrap grid에서는 w-full로 하위 구성요소를 그리드 시스템내에 100% 크기를 차지하도록 설정할 수 있습니다.
+
+## 레이아웃
+
+### 테두리 두께 (border)
+
+👉 border 함수 혹은 class 사용 사용 (0 ~ 4)
+
+```scss
+p {
+  margin: border(값);
+}
+```
+
+```html
+<p className="border-4">border-4</p>
+```
+
+### 테두리 반경 (border radius)
+
+👉 r 함수 혹은 class 사용 (0 ~ 6, 'full')
+
+```scss
+p {
+  margin: r(값);
+}
+```
+
+```html
+<p className="r-4">r-4</p>
+```
+
+### 여백 (spacing)
+
+👉 spacing 함수 혹은 class 사용 (0 ~ 13)
+
+```scss
+p {
+  margin: s(값);
+}
+```
+
+```html
+<p className="spacing-4">spacing-4</p>
+```
+
+## 입력요소
+
+### 토글 (toggle)
+
+👉 checkbox에 .toggle 클래스 사용
+
+```html
+<input type="checkbox" className="toggle" />
+```
+
+## 아이콘 생성 방법
+
+👉 디자인 시스템 피그마에서 상태를 선택한 후 svg로 export 할 것
+👉 폰트포지에서 icon.woff 폰트 생성
+👉 /scss/icon/font 경로에 icon.woff 복사
+👉 쉘에서 아래 스크립트 실행
+
+```sh
+npm run icon
+```