@jk-core/components 0.0.62 → 0.0.64

package/src/Calendar/{Calendar.module.scss → scss/_calendar.scss}

@@ -1,3 +1,12 @@
+button {
+  border: none;
+  background-color: transparent;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  cursor: pointer;
+}
+
 .calendar {
   width: 100%;
   min-width: 300px;

package/src/Calendar/scss/_tile.scss

@@ -0,0 +1,214 @@
+@use "../../styles/mediaQuery.scss" as media;
+
+.day-tile {
+  min-height: 310px;
+  padding: 5px;
+  background-color: var(--white);
+
+  &__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: 40px;
+    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;
+    }
+  }
+}
+
+.month-tile {
+  min-height: 310px;
+  padding: 5px;
+  background-color: var(--white);
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(4, 1fr);
+  gap: 5px;
+
+  &__month {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 5px;
+    border-radius: 10px;
+
+    svg {
+      width: 15px;
+      height: 15px;
+      cursor: pointer;
+    }
+
+    &:hover {
+      @include media.pc {
+        background-color: var(--G-5);
+      }
+    }
+
+    &: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;
+    }
+  }
+}
+
+.year-tile {
+  min-height: 310px;
+  padding: 5px;
+  background-color: var(--white);
+  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/scss/_variables.scss

@@ -0,0 +1,91 @@
+:root {
+  --white: #ffffff;
+  --black: #000000;
+  --P-5: #eff5ff;
+  --P-10: #d3e1fb;
+  --P-20: #a7c4f7;
+  --P-30: #7ca6f3;
+  --P-40: #5089ef;
+  --P-50: #246beb;
+  --P-60: #1d56bc;
+  --P-70: #16408d;
+  --P-90: #07152f;
+  --P-100: #000000;
+  --S-5: #edf1f5;
+  --S-10: #cdd7e4;
+  --S-20: #b4c4d6;
+  --S-30: #99b0cb;
+  --S-40: #2a5c96;
+  --S-50: #003675;
+  --S-60: #002b5e;
+  --S-70: #002036;
+  --S-80: #00162f;
+  --S-90: #000b17;
+  --G-5: #f8f8f8;
+  --G-10: #f0f0f0;
+  --G-20: #e4e4e4;
+  --G-30: #d8d8d8;
+  --G-40: #c6c6c6;
+  --G-50: #8e8e8e;
+  --G-60: #717171;
+  --G-70: #555555;
+  --G-80: #2d2d2d;
+  --G-90: #1d1d1d;
+  --Point-5: #fdf2f3;
+  --Point-10: #f8d6d8;
+  --Point-20: #f5a3a8;
+  --Point-30: #f1747c;
+  --Point-40: #ec4651;
+  --Point-50: #e71825;
+  --Point-60: #b9131e;
+  --Point-70: #8b0e16;
+  --Point-80: #5c0a0f;
+  --Point-90: #2e0507;
+  --Warning-5: #fff8e9;
+  --Warning-10: #ffeac1;
+  --Warning-20: #ffe2a7;
+  --Warning-30: #ffd47c;
+  --Warning-40: #ffc550;
+  --Warning-50: #ffb724;
+  --Warning-60: #98690a;
+  --Warning-70: #66490e;
+  --Warning-80: #4d370b;
+  --Warning-90: #332507;
+  --Success-5: #eef7f0;
+  --Success-10: #cee9d4;
+  --Success-20: #b2dcbb;
+  --Success-30: #8cca99;
+  --Success-40: #33a14b;
+  --Success-50: #008a1e;
+  --Success-60: #006e18;
+  --Success-70: #005312;
+  --Success-80: #00370c;
+  --Success-90: #002207;
+  --Info-5: #e9f0ff;
+  --Info-10: #d4e1ff;
+  --Info-20: #a9c3ff;
+  --Info-30: #7da4ff;
+  --Info-40: #5286ff;
+  --Info-50: #2768ff;
+  --Info-60: #1f53cc;
+  --Info-70: #173e99;
+  --Info-80: #0c1f4d;
+  --Info-90: #040a1a;
+  --Red: #e40000;
+  --Red2: #ffe4e4;
+  --Green: #2fb400;
+  --Green-2: #d7ffe0;
+  --Orange: #ff8800;
+  --Orange-5: #ffead1;
+  --Orange-10: #ffdacc;
+  --Orange-30: #ff8f66;
+  --Orange-40: #ff6a33;
+  --Orange-50: #ff4500;
+  --Orange-60: #d53209;
+  --Orange-70: #992900;
+  --Orange-80: #661c00;
+  --Orange-90: #330e00;
+  --Modal-Shadow: #0000005a;
+  --Modal-Background: #6666663a;
+  --Calendar-Background: #ffffff;
+}

package/src/Calendar/scss/main.scss

@@ -0,0 +1,3 @@
+@import "variables";
+@import "calendar";
+@import "tile";

package/src/Calendar/style.css

@@ -0,0 +1,129 @@
+.calendar {
+  width: 100%;
+  min-width: 300px;
+  border: 1px solid var(--G-30);
+  border-radius: 10px;
+  overflow: hidden;
+  color: var(--G-80);
+  background-color: var(--white);
+}
+
+.calendar__close {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 5px 5px 0 0;
+}
+
+.calendar__close svg {
+  width: 15px;
+  height: 15px;
+  cursor: pointer;
+}
+
+.view {
+  position: relative;
+  margin: 0 auto;
+  width: 90%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #f3f4f8;
+  border-radius: 10px;
+}
+
+.view__block {
+  position: absolute;
+  background-color: #fff;
+  left: 0;
+  height: 100%;
+  border: 2px solid var(--G-30);
+  width: 33.3%;
+  border-radius: 10px;
+  transition: 0.3s;
+}
+
+.view__block--second {
+  left: 33%;
+}
+
+.view__block--last {
+  left: 66.6%;
+}
+
+.view__selector {
+  position: relative;
+  height: 40px;
+  flex: 1 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--G-60);
+  font-size: 1em;
+  font-weight: 400;
+}
+
+.view__selector--selected {
+  color: var(--G-80);
+  font-size: 1em;
+  font-weight: 600;
+}
+
+.nav {
+  height: 60px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 5px;
+  border-bottom: 1px solid var(--G-30);
+  font-size: 1.3em;
+  font-weight: 400;
+}
+
+.nav__button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  padding: 10px;
+  border-radius: 100%;
+}
+
+.nav__button:active {
+  background-color: var(--G-30);
+}
+
+.nav__button:disabled {
+  cursor: not-allowed;
+  fill: var(--G-40);
+  background-color: transparent;
+}
+
+.nav__label {
+  flex: 1 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  font-size: 1.1em;
+  font-weight: 400;
+}
+
+.nav__label--date {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 5px;
+  padding: 5px 10px;
+  font-size: 1.2em;
+  font-weight: 400;
+}
+
+.nav__label--date svg {
+  width: 15px;
+  height: 15px;
+}
+
+.nav__label--date-selected {
+  background-color: var(--S-10);
+}

package/src/main.tsx

@@ -0,0 +1,6 @@
+import { createRoot } from 'react-dom/client';
+import Calendar from './Calendar';
+
+createRoot(document.getElementById('root')!).render(
+  <Calendar date={new Date()} />,
+);

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/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/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);
-    }
-  }
-}