@jk-core/components 0.0.6 → 0.0.7

package/.eslintrc.json

@@ -1,63 +0,0 @@
-{
-  "env": {
-    "browser": true,
-    "es2021": true
-  },
-  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:react/recommended",
-    "airbnb",
-    "airbnb/hooks",
-    "airbnb-typescript"
-  ],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaVersion": "latest",
-    "sourceType": "module",
-    "project": ["./tsconfig.json"]
-  },
-  "plugins": [
-    "@typescript-eslint",
-    "react"
-  ],
-  "rules": {
-    "import/prefer-default-export":"off",
-    "no-var": "error",
-    "jsx-a11y/control-has-associated-label":"off",
-    "jsx-a11y/label-has-associated-control": [
-      2,
-      {
-        "labelAttributes": ["htmlFor"],
-        "depth": 3
-      }
-    ],    
-    "react/react-in-jsx-scope": "off",
-    "react/jsx-props-no-spreading": "off",
-    "react/require-default-props": "off",
-    "react/jsx-one-expression-per-line": "off",
-    "implicit-arrow-linebreak": "off",
-    "linebreak-style" : "off",
-    "import/no-extraneous-dependencies": ["error", {"devDependencies": true}],
-    "no-restricted-imports": [
-      "error",
-      {
-        "patterns": [
-          {
-            "group": ["../../../*"],
-            "message": "Please use absolute path."
-          }
-        ]
-      }
-    ],
-    "sort-imports": [
-      "error",
-      {
-        "ignoreCase": true,
-        "ignoreDeclarationSort": true,
-        "ignoreMemberSort": false,
-        "memberSyntaxSortOrder": ["none", "all", "multiple", "single"]
-      }
-    ]
-  }
-}

package/.stylelintrc.json

@@ -1,29 +0,0 @@
-{
-  "extends": [
-    "stylelint-config-standard",
-    "stylelint-config-standard-scss"
-  ],
-  "plugins": ["stylelint-scss","stylelint-selector-bem-pattern"],
-  "recommendations": ["stylelint.vscode-stylelint"],
-  "rules": {
-    "property-no-vendor-prefix":null,
-    "import-notation": "string",
-    "selector-class-pattern": null,
-    "color-hex-length": null,
-    "no-descending-specificity": null,
-    "color-function-notation":null,
-    "alpha-value-notation":null,
-    "scss/percent-placeholder-pattern":null,
-    "custom-property-pattern":null,
-    "declaration-empty-line-before":null,
-    "scss/at-mixin-pattern":null,
-    "plugin/selector-bem-pattern": {
-      "componentName": "[A-Z]+",
-      "componentSelectors": {
-        "initial": "^\\.{componentName}(?:-[a-z]+)?$",
-        "combined": "^\\.combined-{componentName}-[a-z]+$"
-      },
-      "utilitySelectors": "^\\.util-[a-z]+$"
-    }
-  }
-}

package/src/Calendar/components/DayTile/DayTile.module.scss

@@ -1,79 +0,0 @@
-@use "../mixin.module.scss" as mixin;
-@use "../../../styles/mediaQuery.scss" as media;
-
-.body {
-  @include mixin.body;
-
-  &__tile {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    gap: 5px;
-  }
-
-  &__weeks {
-    display: flex;
-    justify-content: space-between;
-    font-weight: 400;
-    font-size: 1em;
-
-    &--date {
-      flex: 1 0;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      min-width: 40px;
-      padding: 5px 0;
-    }
-  }
-
-  &__week {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  &__day {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    width: 100%;
-    min-width: 40px;
-    min-height: 40px;
-    border-radius: 100%;
-    padding: 5px;
-    border: none;
-    font-weight: 400;
-    font-size: 1em;
-
-    &:hover {
-      @include media.pc {
-        background-color: var(--G-5);
-      }
-    }
-
-    &:active {
-      background-color: var(--G-10);
-    }
-
-    &--today {
-      color: var(--P-50);
-      font-weight: 600;
-    }
-
-    &--selected {
-      background-color: var(--P-50) !important;
-      color: var(--white) !important;
-      font-weight: 600;
-    }
-
-    &--before {
-      color: var(--G-40);
-    }
-
-    &--tile {
-      border-radius: 10px;
-      gap: 5px;
-    }
-  }
-}

package/src/Calendar/components/DayTile/index.tsx

@@ -1,52 +0,0 @@
-/* eslint-disable max-len */
-/* eslint-disable react/no-array-index-key */
-import { cn } from '@jk-core/utils';
-import isSameDay from '../../utils/isSameDay';
-import styles from './DayTile.module.scss';
-
-const WEEKS = ['일', '월', '화', '수', '목', '금', '토'];
-
-interface Props {
-  selectedDate?: Date;
-  weeksInMonth: {
-    thisMonth: boolean;
-    date: Date;
-  }[][];
-  tileContent?: () => React.ReactNode;
-  handleDayClick: (day: Date) => void;
-}
-export default function DayTile({
-  selectedDate, weeksInMonth, tileContent, handleDayClick,
-}: Props) {
-  return (
-    <div className={styles.body}>
-      <div className={styles.body__weeks}>
-        {WEEKS.map((week) => (<div className={styles['body__weeks--date']} key={week}>{week}</div>))}
-      </div>
-
-      <div className={styles.body__tile}>
-        {weeksInMonth.map((week, index) => (
-          <div key={index} className={styles.body__week}>
-            {week.map((day, idx) => (
-              <button
-                className={cn({
-                  [styles.body__day]: true,
-                  [styles['body__day--today']]: isSameDay(day.date, new Date()),
-                  [styles['body__day--selected']]: !!selectedDate && isSameDay(day.date, selectedDate),
-                  [styles['body__day--before']]: !day.thisMonth,
-                  [styles['body__day--tile']]: !!(tileContent && tileContent()),
-                })}
-                type="button"
-                key={idx}
-                onClick={() => handleDayClick(day.date)}
-              >
-                {day.date.getDate()}
-                {tileContent && tileContent()}
-              </button>
-            ))}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}

package/src/Calendar/components/MonthTile/MonthTile.module.scss

@@ -1,44 +0,0 @@
-@use "../mixin.module.scss" as mixin;
-
-.body {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(4, 1fr);
-  gap: 5px;
-
-  @include mixin.body;
-
-  &__month {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    padding: 5px;
-    border-radius: 10px;
-
-    svg {
-      width: 15px;
-      height: 15px;
-      cursor: pointer;
-    }
-
-    &:active {
-      background-color: var(--G-10);
-    }
-
-    &--selected {
-      background-color: var(--P-50) !important;
-      color: var(--white) !important;
-    }
-
-    &--today {
-      color: var(--P-50);
-      font-weight: 600;
-    }
-
-    &--tile {
-      justify-content: flex-start;
-      gap: 5px;
-    }
-  }
-}

package/src/Calendar/components/MonthTile/index.tsx

@@ -1,38 +0,0 @@
-import { cn } from '@jk-core/utils';
-import styles from './MonthTile.module.scss';
-import isSameDay from '../../utils/isSameDay';
-import { CalendarView } from '../../type';
-
-const MONTHS = Array.from({ length: 12 }, (_, i) => i);
-
-interface Props {
-  selectedDate?: Date;
-  viewDate: Date;
-  handleMonthClick: (month: number) => void;
-  tileContent?: (date: Date, view:CalendarView) => React.ReactNode;
-}
-export default function MonthTile({
-  selectedDate, viewDate, handleMonthClick, tileContent = () => false,
-}: Props) {
-  return (
-    <div className={styles.body}>
-      {MONTHS.map((month) => (
-        <button
-          className={cn({
-            [styles.body__month]: true,
-            [styles['body__month--selected']]: !!selectedDate && isSameDay(selectedDate, new Date(viewDate.getFullYear(), month), 'month'),
-            [styles['body__month--today']]: isSameDay(new Date(viewDate.getFullYear(), month), new Date(), 'month'),
-            [styles['body__month--tile']]: !!tileContent(new Date(viewDate.getFullYear(), month - 1, 1), 'month'),
-          })}
-          type="button"
-          key={month}
-          onClick={() => handleMonthClick(month)}
-        >
-          <span>{`${month + 1}월`}</span>
-          {!!tileContent(new Date(viewDate.getFullYear(), month - 1, 1), 'month')
-            && tileContent(new Date(viewDate.getFullYear(), month - 1, 1), 'month')}
-        </button>
-      ))}
-    </div>
-  );
-}

package/src/Calendar/components/YearTile/YearTile.module.scss

@@ -1,85 +0,0 @@
-@use "../mixin.module.scss" as mixin;
-@use "../../../styles/mediaQuery.scss" as media;
-
-.body {
-  @include mixin.body;
-
-  position: relative;
-  height: 310px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  overflow: auto;
-  gap: 10px;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  &__blank {
-    height: calc(50% - 40px);
-    flex-shrink: 0;
-
-    &:last-child {
-      height: 50%;
-    }
-  }
-
-  &__year {
-    min-width: 50%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    min-height: 40px;
-    border-radius: 6px;
-    flex-shrink: 0;
-    overflow: hidden;
-    font-weight: 400;
-    font-size: 1.2em;
-
-    &:hover {
-      @include media.pc {
-        background-color: var(--P-5);
-      }
-    }
-
-    &:active {
-      background-color: var(--P-10);
-    }
-
-    &--border {
-      border: 1px solid var(--G-30);
-      background-color: var(--P-5);
-
-      &:hover {
-        @include media.pc {
-          background-color: var(--P-10);
-        }
-      }
-    }
-
-    &--year {
-      height: 40px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    &--selected {
-      color: var(--white);
-      background-color: var(--P-50) !important;
-    }
-
-    &--tile {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      min-height: 40px;
-      color: var(--G-80);
-      width: 100%;
-      background-color: var(--white);
-      border-top: var(--P-50);
-    }
-  }
-}

package/src/Calendar/components/YearTile/index.tsx

@@ -1,60 +0,0 @@
-import { cn } from '@jk-core/utils';
-import { useEffect, useRef } from 'react';
-import styles from './YearTile.module.scss';
-import { CalendarView } from '../../type';
-
-interface Props {
-  selectedDate?: Date;
-  onClick: (year: number) => void;
-  tileContent?: (date: Date, view:CalendarView) => React.ReactNode;
-}
-
-const YEARS = Array.from({ length: 100 }, (_, i) => i + 2000);
-
-export default function YearTile({
-  selectedDate, onClick,
-  tileContent = () => false,
-}: Props) {
-  const wrapperRef = useRef<HTMLDivElement>(null);
-  const selectedRef = useRef<HTMLButtonElement>(null);
-
-  useEffect(() => {
-    const selectedElement = selectedRef.current;
-    const wrapperElement = wrapperRef.current;
-    if (!selectedElement || !wrapperElement) return;
-
-    const { clientHeight } = wrapperElement;
-    const { offsetTop, clientHeight: selectedHeight } = selectedElement;
-
-    wrapperElement.scrollTo({
-      top: offsetTop - clientHeight / 2 + selectedHeight,
-    });
-  }, []);
-
-  return (
-    <div className={styles.body} ref={wrapperRef}>
-      <div className={styles.body__blank} />
-      {YEARS.map((year) => (
-        <button
-          className={cn({
-            [styles.body__year]: true,
-            [styles['body__year--selected']]: !!selectedDate && selectedDate.getFullYear() === year,
-            [styles['body__year--border']]: !!tileContent(new Date(year, 1, 1), 'year'),
-          })}
-          key={year}
-          type="button"
-          ref={!!selectedDate && selectedDate.getFullYear() === year ? selectedRef : null}
-          onClick={() => onClick(year)}
-        >
-          <span className={styles['body__year--year']}>{year}</span>
-          {tileContent(new Date(year, 1, 1), 'year') && (
-          <div className={styles['body__year--tile']}>
-            {tileContent(new Date(year, 1, 1), 'year')}
-          </div>
-          )}
-        </button>
-      ))}
-      <div className={styles.body__blank} />
-    </div>
-  );
-}

package/src/Calendar/components/mixin.module.scss

@@ -1,5 +0,0 @@
-@mixin body {
-  min-height: 310px;
-  padding: 5px;
-  background-color: var(--white);
-}

package/src/Calendar/hooks/useCalendarNav.ts

@@ -1,80 +0,0 @@
-import { CalendarView } from '../type';
-
-interface Props {
-  method: CalendarView;
-  selectMode: CalendarView;
-  date: Date;
-  setDate:(date: Date) => void;
-  min: Date;
-  max: Date;
-}
-const useCalendarNav = ({
-  method, selectMode, date, setDate, min, max,
-}:Props) => {
-  const disabled = (direction: 'prev' | 'next') => {
-    if (selectMode === 'year' || method !== selectMode) return true;
-
-    if (method === 'day') {
-      if (direction === 'prev') {
-        const prevMonth = new Date(date.getFullYear(), date.getMonth() - 1, 1);
-        return prevMonth < min;
-      }
-      const nextMonth = new Date(date.getFullYear(), date.getMonth() + 1, 1);
-      return nextMonth > max;
-    }
-
-    if (method === 'month') {
-      if (direction === 'prev') {
-        const prevYear = new Date(date.getFullYear() - 1, date.getMonth(), 1);
-        return prevYear < min;
-      }
-      const nextYear = new Date(date.getFullYear() + 1, date.getMonth(), 1);
-      return nextYear > max;
-    }
-
-    if (method === 'year') {
-      if (direction === 'prev') {
-        const prevDecade = new Date(date.getFullYear() - 10, date.getMonth(), 1);
-        return prevDecade < min;
-      }
-      const nextDecade = new Date(date.getFullYear() + 10, date.getMonth(), 1);
-      return nextDecade > max;
-    }
-
-    return false;
-  };
-
-  const onArrowClick = (direction: 'prev' | 'next') => {
-    const offset = direction === 'prev' ? -1 : 1;
-    const minDate = new Date(2000, 0, 1);
-    const maxDate = new Date(2099, 11, 31);
-
-    if (method === 'day') {
-      const newDate = new Date(date.getFullYear(), date.getMonth() + offset, 1);
-
-      if (newDate >= minDate && newDate <= maxDate) {
-        setDate(newDate);
-      }
-    }
-
-    if (method === 'month') {
-      const newDate = new Date(date.getFullYear() + offset, date.getMonth(), 1);
-
-      if (newDate >= minDate && newDate <= maxDate) {
-        setDate(newDate);
-      }
-    }
-
-    if (method === 'year') {
-      const newDate = new Date(date.getFullYear() + offset * 10, date.getMonth(), 1);
-
-      if (newDate >= minDate && newDate <= maxDate) {
-        setDate(newDate);
-      }
-    }
-  };
-
-  return { disabled, onArrowClick };
-};
-
-export default useCalendarNav;

package/src/Calendar/hooks/useDateSelect.ts

@@ -1,47 +0,0 @@
-import { CalendarView } from '../type';
-
-interface UseDateSelectProps {
-  viewDate: Date;
-  setViewDate: (date: Date) => void;
-  method: CalendarView;
-  setSelectMode:(mode:CalendarView) => void;
-  onChange:(date:Date) => void;
-
-}
-
-const useDateSelect = ({
-  viewDate, setViewDate, onChange, setSelectMode, method,
-}: UseDateSelectProps) => {
-  const min = new Date(2000, 0, 1);
-  const max = new Date(2099, 11, 31);
-
-  const onDayClick = (day: Date) => {
-    if (day < min || day > max) {
-      return;
-    }
-
-    setViewDate(day);
-    onChange(day);
-  };
-
-  const onMonthClick = (month:number) => {
-    const newDate = new Date(viewDate.getFullYear(), month, 1);
-
-    setViewDate(newDate);
-
-    if (method !== 'month') setSelectMode(method);
-    if (method === 'month') onChange(newDate);
-  };
-
-  const onYearClick = (year:number) => {
-    const newDate = new Date(year, 0, 1);
-
-    setViewDate(newDate);
-    if (method !== 'year') setSelectMode(method);
-    if (method === 'year') onChange(newDate);
-  };
-
-  return { onDayClick, onMonthClick, onYearClick };
-};
-
-export default useDateSelect;