@jk-core/components 0.0.6 → 0.0.8

package/src/Calendar/index.tsx

@@ -1,166 +0,0 @@
-/* eslint-disable react/no-array-index-key */
-import { useState } from 'react';
-import { cn } from '@jk-core/utils';
-import CloseIcon from '../assets/close.svg';
-import DropIcon from '../assets/drop-arrow.svg';
-import styles from './Calendar.module.scss';
-import { CalendarView } from './type';
-import getWeeksInMonth from './utils/getWeeksInMonth';
-import DayTile from './components/DayTile';
-import MonthTile from './components/MonthTile';
-import YearTile from './components/YearTile';
-import useCalendarNav from './hooks/useCalendarNav';
-import useDateSelect from './hooks/useDateSelect';
-
-import '../styles/color.scss';
-
-interface CalendarProps {
-  date?: Date;
-  view?: CalendarView;
-  tileContent?: (date: Date | undefined, view: CalendarView) => React.ReactNode;
-  onChange?:(date:Date)=>void;
-  min?: Date;
-  max?: Date;
-  onClose?:()=>void;
-}
-
-export default function Calendar({
-  date: selectedDate, view, tileContent, onChange = () => { }, onClose,
-  min = new Date(2000, 0, 1), max = new Date(2099, 11, 31),
-}:CalendarProps) {
-  const [viewDate, setViewDate] = useState<Date>(selectedDate || new Date());
-  const [method, setMethod] = useState<CalendarView>(view || 'day');
-  const [selectMode, setSelectMode] = useState<CalendarView>('day');
-  const weeksInMonth = getWeeksInMonth(viewDate);
-  const { onDayClick, onMonthClick, onYearClick } = useDateSelect({
-    viewDate,
-    setViewDate: (data) => setViewDate(data),
-    onChange,
-    setSelectMode,
-    method,
-  });
-  const { disabled, onArrowClick } = useCalendarNav({
-    method, selectMode, date: viewDate, setDate: setViewDate, min, max,
-  });
-
-  return (
-    <div className={styles.calendar}>
-      <div className={styles.calendar__close}>
-        {onClose
-      && (
-        <CloseIcon onClick={onClose} />
-      )}
-      </div>
-      {/* 일/월/년 선택 버튼 */}
-      <div className={styles.view}>
-        <div className={cn({
-          [styles.view__block]: true,
-          [styles['view__block--second']]: method === 'month',
-          [styles['view__block--last']]: method === 'year',
-        })}
-        />
-        <button
-          className={cn({
-            [styles.view__selector]: true,
-            [styles['view__selector--selected']]: method === 'day',
-          })}
-          type="button"
-          onClick={() => { setMethod('day'); setSelectMode('day'); }}
-        >일
-        </button>
-        <button
-          className={cn({
-            [styles.view__selector]: true,
-            [styles['view__selector--selected']]: method === 'month',
-          })}
-          type="button"
-          onClick={() => { setMethod('month'); setSelectMode('month'); }}
-        >월
-        </button>
-        <button
-          className={cn({
-            [styles.view__selector]: true,
-            [styles['view__selector--selected']]: method === 'year',
-          })}
-          type="button"
-          onClick={() => { setMethod('year'); setSelectMode('year'); }}
-        >년
-        </button>
-      </div>
-
-      <div className={styles.nav}>
-        <button
-          className={styles.nav__button}
-          type="button"
-          onClick={() => onArrowClick('prev')}
-          disabled={disabled('prev')}
-        >
-          ◀︎
-        </button>
-        <div className={styles.nav__label}>
-          {method === 'year' && '연도 선택'}
-          {method !== 'year' && (
-          <button
-            className={cn({
-              [styles['nav__label--date']]: true,
-              [styles['nav__label--date-selected']]: selectMode === 'year',
-            })}
-            type="button"
-            onClick={() => setSelectMode('year')}
-          >
-            {`${viewDate.getFullYear()}년`}<DropIcon />
-          </button>
-          )}
-          {method === 'day' && (
-          <button
-            className={cn({
-              [styles['nav__label--date']]: true,
-              [styles['nav__label--date-selected']]: selectMode === 'month',
-            })}
-            type="button"
-            onClick={() => setSelectMode('month')}
-          >
-            {`${viewDate.getMonth() + 1}월`}<DropIcon />
-          </button>
-          )}
-        </div>
-        <button
-          className={styles.nav__button}
-          type="button"
-          onClick={() => onArrowClick('next')}
-          disabled={disabled('next')}
-        >►
-        </button>
-      </div>
-
-      {(method === 'day' && selectMode === 'day') && (
-      <DayTile
-        selectedDate={selectedDate}
-        weeksInMonth={weeksInMonth}
-        // selectRange={selectRange}
-        // selectedRange={selectedRange}
-        handleDayClick={onDayClick}
-        tileContent={() => (tileContent ? tileContent(selectedDate, method) : null)}
-      />
-      )}
-
-      {((method === 'month' || selectMode === 'month') && selectMode !== 'year') && (
-        <MonthTile
-          selectedDate={selectedDate}
-          viewDate={viewDate}
-          handleMonthClick={onMonthClick}
-          tileContent={tileContent}
-
-        />
-      )}
-
-      {(method === 'year' || selectMode === 'year') && (
-        <YearTile
-          selectedDate={selectedDate}
-          onClick={onYearClick}
-          tileContent={tileContent}
-        />
-      )}
-    </div>
-  );
-}

package/src/Calendar/utils/getWeeksInMonth.ts

@@ -1,45 +0,0 @@
-const getWeeksInMonth = (viewDate:Date) => {
-  const startOfMonth = new Date(viewDate.getFullYear(), viewDate.getMonth(), 1);
-  const endOfMonth = new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 0);
-  const weeks = [];
-  let currentWeek = [];
-
-  const startDayOfWeek = startOfMonth.getDay();
-  if (startDayOfWeek !== 0) {
-    const prevMonthEnd = new Date(startOfMonth);
-    prevMonthEnd.setDate(0);
-    for (let i = startDayOfWeek - 1; i >= 0; i -= 1) {
-      const prevDate = new Date(prevMonthEnd);
-      prevDate.setDate(prevMonthEnd.getDate() - i);
-      currentWeek.push({ thisMonth: false, date: prevDate });
-    }
-  }
-
-  const currentDate = new Date(startOfMonth);
-
-  while (currentDate <= endOfMonth) {
-    currentWeek.push({ thisMonth: true, date: new Date(currentDate) });
-    if (currentDate.getDay() === 6) {
-      weeks.push(currentWeek);
-      currentWeek = [];
-    }
-    currentDate.setDate(currentDate.getDate() + 1);
-  }
-
-  const endDayOfWeek = endOfMonth.getDay();
-  if (endDayOfWeek !== 6) {
-    for (let i = 1; i <= 6 - endDayOfWeek; i += 1) {
-      const nextDate = new Date(endOfMonth);
-      nextDate.setDate(endOfMonth.getDate() + i);
-      currentWeek.push({ thisMonth: false, date: nextDate });
-    }
-  }
-
-  if (currentWeek.length > 0) {
-    weeks.push(currentWeek);
-  }
-
-  return weeks;
-};
-
-export default getWeeksInMonth;

package/src/Calendar/utils/isInRange.ts

@@ -1,8 +0,0 @@
-import { CalendarRange } from '../type';
-
-const isInRange = (day: Date, range:CalendarRange) => {
-  if (!range.start || !range.end) return false;
-  return day > range.start && day < range.end;
-};
-
-export default isInRange;

package/src/Calendar/utils/isSameDay.ts

@@ -1,21 +0,0 @@
-import { CalendarView } from '../type';
-
-const isSameDay = (date1: Date | null, date2: Date | null, view: CalendarView = 'day'): boolean => {
-  if (date1 === null || date2 === null) return false;
-
-  switch (view) {
-    case 'day':
-      return date1.getFullYear() === date2.getFullYear()
-        && date1.getMonth() === date2.getMonth()
-        && date1.getDate() === date2.getDate();
-    case 'month':
-      return date1.getFullYear() === date2.getFullYear()
-        && date1.getMonth() === date2.getMonth();
-    case 'year':
-      return date1.getFullYear() === date2.getFullYear();
-    default:
-      return false;
-  }
-};
-
-export default isSameDay;

package/src/assets/close.svg

@@ -1,16 +0,0 @@
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
-<svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#000000" fill="#000000" stroke-width="0.696">
-
-<g id="SVGRepo_bgCarrier" stroke-width="0"/>
-
-<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
-
-<g id="SVGRepo_iconCarrier">
-
-<path fill-rule="evenodd" clip-rule="evenodd" d="M19.207 6.207a1 1 0 0 0-1.414-1.414L12 10.586 6.207 4.793a1 1 0 0 0-1.414 1.414L10.586 12l-5.793 5.793a1 1 0 1 0 1.414 1.414L12 13.414l5.793 5.793a1 1 0 0 0 1.414-1.414L13.414 12l5.793-5.793z" />
-
-</g>
-
-</svg>

package/src/assets/drop-arrow.svg

@@ -1,3 +0,0 @@
-<svg width="25" height="25" viewBox="0 0 20 20" fill="none"  stroke="#2D2D2D" xmlns="http://www.w3.org/2000/svg">
-<path d="M5 7.5L10 13L15 7.5" stroke-width="1.4" stroke-linecap="round"/>
-</svg>

package/src/index.tsx

@@ -1,3 +0,0 @@
-import Calendar from './Calendar';
-
-export { Calendar };

package/src/styles/mediaQuery.scss

@@ -1,22 +0,0 @@
-// 스크롤바 너비 14px 추가
-$pc: 1396px;
-$tablet: 1395px;
-$mobile: 774px;
-
-@mixin pc {
-  @media (min-width: $pc) {
-    @content;
-  }
-}
-
-@mixin tablet {
-  @media (max-width: $tablet) {
-    @content;
-  }
-}
-
-@mixin mobile {
-  @media (max-width: $mobile) {
-    @content;
-  }
-}

package/src/svg.d.ts

@@ -1,6 +0,0 @@
-// svg를 ReactComponent처럼 사용하기 위해 선언
-declare module '*.svg' {
-  import { HTMLAttributes } from 'react';
-
-  export default React.Component<HTMLAttributes<HTMLDivElement>>;
-}

package/src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

package/tsconfig.json

@@ -1,13 +0,0 @@
-{
- "extends": "../../tsconfig.base.json",
-  "compilerOptions": {   
-    "composite": true,
-    "baseUrl": "./src",
-    "outDir": "dist",
-    "rootDir": "./src",
-    "jsx": "react-jsx",
-    "emitDeclarationOnly": true,
-    "types": ["node", "vite/client","vite-plugin-svgr/client"],
-  },
-  "include": ["./src", "./src/svg.d.ts"]
-}

package/vite.config.ts

@@ -1,58 +0,0 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react-swc'
-import tsconfigPaths from 'vite-tsconfig-paths';
-import svgr from 'vite-plugin-svgr';
-import checker from 'vite-plugin-checker';
-import { resolve } from 'path'
-import dts from 'vite-plugin-dts'
-import sassDts from 'vite-plugin-sass-dts';
-
-// https://vitejs.dev/config/
-export default defineConfig({
-   plugins: [
-    react(),
-    tsconfigPaths(),
-    dts(),
-    sassDts(),
-    svgr({ include: '**/*.svg' }),
-    checker({
-      typescript: true,
-      eslint: {
-        lintCommand: 'eslint "./src/**/*.{ts,tsx}"',
-      },
-      overlay: {
-        badgeStyle: 'width:fit-content;font-size:14px;',
-      },
-    }),
-  ],
-  css: {
-    modules: {
-      scopeBehaviour: 'local',
-      generateScopedName: '[name]__[local]___[hash:base64:5]'
-    },
-    preprocessorOptions: {
-      scss: {
-        api:'modern-compiler'
-      }
-    }
-  },
-  build: {
-    lib: {
-      entry: resolve(__dirname, './src/index.tsx'),
-      name:'index',
-      fileName: 'index'
-    },
-    sourcemap: true,
-    rollupOptions: {
-      external: ['react', 'sass'],
-      output: {
-        assetFileNames:'style.css',
-        globals: {
-          react: 'React',
-          sass: 'sass'
-        },
-      }
-    },
-    outDir: 'dist'
-  }
-})