@nobak/design-system 1.0.0

package/lib/shared/components/Calendar/CalendarWeek.js

@@ -0,0 +1,267 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import React, { Fragment } from 'react';
+import { format, isSameDay } from 'date-fns';
+import { timesOfDay } from "./constants";
+import { CalendarHeader } from "./CalendarHeader";
+import { useCalendar } from '@h6s/calendar';
+import { DateTime } from 'luxon';
+import clsx from 'clsx';
+var ColumnsFix = function ColumnsFix() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "min-h-screen bg-neutral-150 max-h-full max-w-full"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "sm:col-start-1"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "sm:col-start-2"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "sm:col-start-3"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "sm:col-start-4"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "sm:col-start-5"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "sm:col-start-6"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "sm:col-start-7"
+  }));
+};
+export var WeekView = function WeekView(_ref) {
+  var headers = _ref.headers,
+    body = _ref.body,
+    navigation = _ref.navigation,
+    cursorDate = _ref.cursorDate,
+    events = _ref.events,
+    view = _ref.view;
+  var container = React.useRef(null);
+  var containerNav = React.useRef(null);
+  var containerOffset = React.useRef(null);
+
+  // React.useEffect(() => {
+  //   const currentMinute = new Date().getHours() * 60;
+  //   if (
+  //     typeof container.current?.scrollHeight === 'number' &&
+  //     typeof containerNav.current?.offsetHeight === 'number' &&
+  //     typeof containerOffset.current?.offsetHeight === 'number'C
+  //   ) {
+  //     const x =
+  //       container.current.scrollHeight -
+  //       containerNav.current.offsetHeight -
+  //       containerOffset.current.offsetHeight;
+  //     window.scrollTo(0, (x * currentMinute) / 1440);
+  //   }
+  // }, []);
+  // console.log('cursorDate', cursorDate)
+
+  var eventsOnWeek = body.value.map(function (_ref2, key) {
+    var week = _ref2.value;
+    // console.log('item', item)
+    // console.log('value', item.value)
+    // Find Week
+    // console.log('week', key, week)
+    var weekly = week.map(function (_ref3) {
+      var day = _ref3.value,
+        isCurrentDate = _ref3.isCurrentDate;
+      if (isCurrentDate) {
+        // console.log('week', key, week)
+      }
+      var evently = events.filter(function (event) {
+        // console.log('event', day)
+
+        // console.log(new Date(event.timestamp *1000))
+        if (isSameDay(day, +new Date(event.timestamp * 1000))) {
+          // console.log(isSameDay(day, +new Date(event.timestamp *1000)), +new Date(event.timestamp *1000))
+          return event;
+        }
+        // const eventTime = new Date(event.timestamp * 1000);
+        // return isSameDay(day, +new Date(event.timestamp *1000)) ? event : null;
+      });
+      // console.log('evently', evently)
+      return evently;
+    });
+    // console.log('weekly', weekly)
+    return weekly;
+  })[0];
+
+  // console.log('events', events)
+
+  // console.log('eventsOnWeek', eventsOnWeek)
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    ref: container,
+    className: "flex flex-auto flex-col overflow-auto bg-neutral-100"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: '165%'
+    },
+    className: "flex max-w-full flex-none flex-col sm:max-w-none md:max-w-full"
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: containerNav,
+    className: "sticky top-0 flex-none bg-neutral-100 shadow ring-1 ring-neutral-800 ring-opacity-5 sm:pr-8"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "grid grid-cols-7 text-sm leading-6 text-neutral-500 sm:hidden"
+  }, headers.weekDays.map(function (_ref4) {
+    var key = _ref4.key,
+      value = _ref4.value;
+    var isToday = format(value, 'Y-MM-dd') === format(+new Date(), 'Y-MM-dd');
+    var isSelected = format(cursorDate, 'Y-MM-dd') === format(value, 'Y-MM-dd') ? true : false;
+    var dayStyle = clsx('mt-1 flex h-8 w-8 items-center justify-center font-semibold rounded-full', isToday && isSelected && 'bg-primary-400 text-neutral-100', isToday && !isSelected && 'text-primary-400', isSelected && 'bg-neutral-900 text-neutral-100', !isSelected && 'text-neutral-900');
+    return /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "flex flex-col items-center pt-2 pb-3",
+      onClick: function onClick() {
+        return navigation.setDate(value);
+      },
+      key: key
+    }, format(value, 'eee').charAt(0), /*#__PURE__*/React.createElement("span", {
+      className: dayStyle
+    }, format(value, 'dd')));
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "-mr-px hidden grid-cols-7 divide-x divide-neutral-800 border-r border-neutral-100 text-sm leading-6 text-neutral-500 sm:grid"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "col-end-1 w-14 border-b"
+  }), headers.weekDays.map(function (_ref5) {
+    var key = _ref5.key,
+      value = _ref5.value;
+    var isToday = format(value, 'Y-MM-dd') === format(+new Date(), 'Y-MM-dd');
+    var isSelected = format(cursorDate, 'Y-MM-dd') === format(value, 'Y-MM-dd') ? true : false;
+    var dayStyle = clsx('items-center justify-center font-semibold ml-1 flex h-6 w-6 rounded-full', isToday && isSelected && 'bg-primary-400 text-neutral-100', isToday && !isSelected && 'text-primary-400', isSelected && 'bg-neutral-900 text-neutral-100', !isSelected && 'text-neutral-900');
+    var spanStyle = clsx(isToday && 'flex items-baseline');
+    return /*#__PURE__*/React.createElement("div", {
+      className: "flex items-center justify-center py-3",
+      key: key
+    }, /*#__PURE__*/React.createElement("span", {
+      className: spanStyle
+    }, format(value, 'eee').slice(0, 3), ' ', /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      onClick: function onClick() {
+        return navigation.setDate(value);
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      className: dayStyle
+    }, format(value, 'dd')))));
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-auto"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sticky left-0 w-14 flex-none bg-neutral-100 ring-1 ring-neutral-800"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "grid flex-auto grid-cols-1 grid-rows-1 bg-neutral-50"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "col-start-1 col-end-2 row-start-1 grid divide-y divide-neutral-100",
+    style: {
+      gridTemplateRows: 'repeat(48, minmax(3.5rem, 1fr))'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: containerOffset,
+    className: "row-end-1 h-7"
+  }), timesOfDay.map(function (_ref6, key) {
+    var time = _ref6.time;
+    return /*#__PURE__*/React.createElement(Fragment, {
+      key: key
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-neutral-400"
+    }, time)), /*#__PURE__*/React.createElement("div", null));
+  }), /*#__PURE__*/React.createElement("div", null)), /*#__PURE__*/React.createElement("div", {
+    className: "col-start-1 col-end-2 row-start-1 hidden grid-cols-7 grid-rows-1 divide-x divide-neutral-400 sm:grid sm:grid-cols-7"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "col-start-1 row-span-full"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "col-start-2 row-span-full"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "col-start-3 row-span-full"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "col-start-4 row-span-full"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "col-start-5 row-span-full"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "col-start-6 row-span-full"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "col-start-7 row-span-full"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "col-start-8 row-span-full w-8"
+  })), /*#__PURE__*/React.createElement("ol", {
+    className: "col-start-1 col-end-2 row-start-1 grid grid-cols-1 sm:grid-cols-7 sm:pr-8",
+    style: {
+      gridTemplateRows: '1.75rem repeat(288, minmax(0, 1fr)) auto'
+    }
+  }, eventsOnWeek.map(function (day, index) {
+    console.log('day', day);
+    if (day.length > 0) {
+      return day.map(function (event) {
+        var start = DateTime.fromSeconds(parseInt(event.timestamp)),
+          end = DateTime.fromSeconds(parseInt(event.timestamp) + parseInt(event.duration));
+        var start_time = (parseInt(start.toFormat('HH')) * 60 + parseInt(start.toFormat('mm'))) / 5 + 2;
+        var startTime = start.toFormat('HH:mm'),
+          endTime = end.toFormat('HH:mm');
+        return /*#__PURE__*/React.createElement(Fragment, {
+          key: index
+        }, /*#__PURE__*/React.createElement("li", {
+          className: "relative mt-px flex sm:col-start-".concat(index + 1),
+          style: {
+            gridRow: "".concat(start_time, " / span ").concat(event.duration / 60 / 5)
+          }
+        }, /*#__PURE__*/React.createElement("a", {
+          href: "#",
+          className: "group absolute inset-1 flex flex-col overflow-y-auto rounded-lg bg-primary-300 p-2 text-xs leading-5 hover:bg-blue-100"
+        }, /*#__PURE__*/React.createElement("p", {
+          className: "order-1 font-semibold text-blue-700"
+        }, event.name), /*#__PURE__*/React.createElement("p", {
+          className: "text-blue-500 group-hover:text-blue-700"
+        }, /*#__PURE__*/React.createElement("time", {
+          dateTime: "2022-01-22T06:00"
+        }, event.date)), /*#__PURE__*/React.createElement("p", null, startTime, " - ", endTime))));
+      });
+    }
+  })))))));
+};
+export var CalendarWeek = function CalendarWeek(_ref7) {
+  var _ref7$events = _ref7.events,
+    events = _ref7$events === void 0 ? [] : _ref7$events;
+  var _React$useState = React.useState('month'),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    activeView = _React$useState2[0],
+    changeView = _React$useState2[1];
+  var _useCalendar = useCalendar(),
+    cursorDate = _useCalendar.cursorDate,
+    headers = _useCalendar.headers,
+    body = _useCalendar.body,
+    view = _useCalendar.view,
+    navigation = _useCalendar.navigation;
+  var setView = function setView(option) {
+    changeView(option);
+    switch (option) {
+      case 'month':
+        return view.showMonthView();
+      case 'day':
+        return view.showMonthView();
+      case 'week':
+        return view.showWeekView();
+    }
+  };
+
+  // React.useEffect, populate events, watch [view]
+  var eventsOnDate = events.filter(function (event) {
+    return format(cursorDate, 'DDD') === format(new Date(event.timestamp * 1000), 'DDD') ? true : false;
+  });
+  var bodyStyle = clsx(activeView === 'month' && 'flex flex-col', (activeView === 'week' || activeView === 'day') && 'flex flex-col h-screen');
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: bodyStyle
+  }, /*#__PURE__*/React.createElement(CalendarHeader, {
+    activeView: activeView,
+    setView: setView,
+    view: view,
+    cursorDate: cursorDate,
+    navigation: navigation
+  }), /*#__PURE__*/React.createElement(WeekView, {
+    headers: headers,
+    body: body,
+    events: events,
+    navigation: navigation,
+    cursorDate: cursorDate,
+    view: view
+  })));
+};

package/lib/shared/components/Calendar/constants.js

@@ -0,0 +1,73 @@
+export var timesOfDay = [{
+  time: '12AM',
+  code: '2'
+}, {
+  time: '1AM',
+  code: '14'
+}, {
+  time: '2AM',
+  code: '26'
+}, {
+  time: '3AM',
+  code: '38'
+}, {
+  time: '4AM',
+  code: '50'
+}, {
+  time: '5AM',
+  code: '62'
+}, {
+  time: '6AM',
+  code: '74'
+}, {
+  time: '7AM',
+  code: '86'
+}, {
+  time: '8AM',
+  code: '98'
+}, {
+  time: '9AM',
+  code: '110'
+}, {
+  time: '10AM',
+  code: '122'
+}, {
+  time: '11AM',
+  code: '134'
+}, {
+  time: '12PM',
+  code: '146'
+}, {
+  time: '1PM',
+  code: '158'
+}, {
+  time: '2PM',
+  code: '170'
+}, {
+  time: '3PM',
+  code: '182'
+}, {
+  time: '4PM',
+  code: '194'
+}, {
+  time: '5PM',
+  code: '206'
+}, {
+  time: '6PM',
+  code: '218'
+}, {
+  time: '7PM',
+  code: '230'
+}, {
+  time: '8PM',
+  code: '242'
+}, {
+  time: '9PM',
+  code: '254'
+}, {
+  time: '10PM',
+  code: '266'
+}, {
+  time: '11PM',
+  code: '278'
+}];

package/lib/shared/components/Calendar/index.js

@@ -0,0 +1,3 @@
+export { Calendar } from "./Calendar";
+export { CalendarWeek } from "./CalendarWeek";
+export { CalendarDay } from "./CalendarDay";

package/lib/shared/components/Cartel/Cartel.js

@@ -0,0 +1,44 @@
+import React from 'react';
+export var Cartel = function Cartel(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'basic' : _ref$variant,
+    customCss = _ref.customCss,
+    message = _ref.message,
+    CTA = _ref.CTA;
+  var _ref2 = message || {},
+    title = _ref2.title,
+    description = _ref2.description;
+  switch (variant) {
+    case 'basic':
+      return /*#__PURE__*/React.createElement("div", {
+        className: "flex flex-row justify-center p-[20px] bg-neutral-100 rounded-[8px]"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "flex flex-col space-y-[20px] w-[200px] text-center"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "text-neutral-800"
+      }, title), /*#__PURE__*/React.createElement("div", {
+        className: "text-neutral-600"
+      }, description), /*#__PURE__*/React.createElement("div", {
+        className: "h-[64px]"
+      }, CTA)));
+    case 'full':
+      return /*#__PURE__*/React.createElement("div", {
+        className: "border border-neutral-100 rounded-[20px] text-neutral-800 flex flex-row justify-between w-full"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "w-[300px] rounded-bl-[20px] rounded-tl-[20px] bg-cover bg-center",
+        style: {
+          backgroundImage: "linear-gradient(to right, rgba(255, 255, 255, 0), #1C181E), url('https://imagedelivery.net/uDbEDRBQqhBXrrfuCRrATQ/f583905b-d36c-49e6-0f3b-edc3d40b3c00/public')"
+        }
+      }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+        className: "flex flex-col space-y-[20px] p-[40px] "
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "text-subheading-bold"
+      }, title), /*#__PURE__*/React.createElement("div", {
+        className: "text-p2-medium"
+      }, description), /*#__PURE__*/React.createElement("div", {
+        className: "h-[64px]"
+      }, CTA))));
+  }
+};

package/lib/shared/components/Cartel/index.js

@@ -0,0 +1 @@
+export { Cartel } from "./Cartel";

package/lib/shared/components/Cell/Cell.js

@@ -0,0 +1,105 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+// Cells are List and Table child components for displaying data.
+
+import React from 'react';
+import { Button, Checkbox, Dropdown, Person } from '..';
+// type DropdownItemsI = {
+//   title: string;
+//   type: 'button' | 'link';
+//   action?: () => void;
+//   to?: string;
+// }[];
+
+export var Cell = function Cell(_ref) {
+  var type = _ref.type,
+    value = _ref.value,
+    Component = _ref.component;
+  var handleClick = function handleClick() {
+    // runSound()
+    if (type === 'button' || 'checkbox') value === null || value === void 0 || value.onClick(value === null || value === void 0 ? void 0 : value.content);
+  };
+  var cellAssert = function cellAssert(type, value) {
+    switch (type) {
+      case 'simple':
+        return /*#__PURE__*/React.createElement("div", {
+          className: "text-p3-medium"
+        }, value);
+      case 'person':
+        return /*#__PURE__*/React.createElement("div", {
+          className: "px-[16px]"
+        }, /*#__PURE__*/React.createElement(Person, {
+          imageUrl: value.avatar_url,
+          fullname: value.first_name
+        }));
+      case 'description':
+        return /*#__PURE__*/React.createElement("div", {
+          className: "px-6 py-4"
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "text-sm text-neutral-800"
+        }, value.title), /*#__PURE__*/React.createElement("div", {
+          className: "text-sm text-neutral-500"
+        }, value.description));
+      case 'extended':
+        return /*#__PURE__*/React.createElement("div", {
+          className: "flex items-center px-6 py-4"
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "flex-shrink-0 h-10 w-10"
+        }, /*#__PURE__*/React.createElement("img", {
+          className: "h-10 w-10 rounded-full",
+          src: value.imageUrl,
+          alt: ""
+        })), /*#__PURE__*/React.createElement("div", {
+          className: "ml-4"
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "text-sm font-medium text-neutral-800"
+        }, value.title), /*#__PURE__*/React.createElement("div", {
+          className: "text-sm text-neutral-500"
+        }, value.description)));
+      case 'button':
+        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, _extends({}, value, {
+          size: "tiny",
+          text: value.text,
+          onClick: handleClick
+        })));
+      case 'internal_link':
+        if (!!Component) return /*#__PURE__*/React.createElement(Component, {
+          to: value.to
+        }, value.text);
+      case 'link':
+        return /*#__PURE__*/React.createElement("a", {
+          href: value.to
+        }, value.text);
+      case 'badge':
+        return /*#__PURE__*/React.createElement(React.Fragment, null);
+      case 'icon':
+        return /*#__PURE__*/React.createElement(React.Fragment, null);
+      case 'dropdown':
+        return /*#__PURE__*/React.createElement("div", {
+          className: ""
+        }, /*#__PURE__*/React.createElement(Dropdown, {
+          button: {
+            icon: 'dots',
+            size: 'small',
+            variant: 'basic'
+          },
+          items: value,
+          component: Component
+        }));
+      case 'image':
+        return /*#__PURE__*/React.createElement("div", {
+          className: "flex h-[64px] px-6 py-4",
+          style: {
+            backgroundImage: "linear-gradient(to left, rgba(44, 51, 53, 1), rgba(44, 51, 53, 0.5), rgba(44, 51, 53, 0.5), rgba(44, 51, 53, 0.2)), url('".concat(value.imageUrl, "')"),
+            backgroundSize: 'cover'
+          }
+        }, value.text);
+      case 'checkbox':
+        return /*#__PURE__*/React.createElement(Checkbox, {
+          onChange: handleClick
+        });
+      default:
+        return /*#__PURE__*/React.createElement(React.Fragment, null);
+    }
+  };
+  return cellAssert(type, value);
+};

package/lib/shared/components/Cell/index.js

@@ -0,0 +1 @@
+export { Cell } from "./Cell";

package/lib/shared/components/Checkbox/Checkbox.js

@@ -0,0 +1,27 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import React from 'react';
+import { Switch as SwitchComponent } from '@headlessui/react';
+import { Icon } from "../Icon";
+export var Checkbox = function Checkbox(_ref) {
+  var onChange = _ref.onChange;
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    enabled = _React$useState2[0],
+    setEnabled = _React$useState2[1];
+  var toggleAction = function toggleAction() {
+    setEnabled(!enabled);
+    onChange();
+  };
+  return /*#__PURE__*/React.createElement(SwitchComponent, {
+    checked: enabled,
+    onChange: toggleAction,
+    className: "".concat(enabled ? 'bg-blue-600 border-blue-600 text-white' : 'bg-white border-neutral-1000 text-white', " h-6 w-6 border rounded-md")
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "Power"
+  }));
+};

package/lib/shared/components/Checkbox/index.js

@@ -0,0 +1 @@
+export { Checkbox } from "./Checkbox";

package/lib/shared/components/Clock/Clock.js

@@ -0,0 +1,6 @@
+function _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + t); }
+import React from 'react';
+export var Clock = function Clock(_ref) {
+  _objectDestructuringEmpty(_ref);
+  return /*#__PURE__*/React.createElement("div", null);
+};

package/lib/shared/components/Clock/index.js

@@ -0,0 +1 @@
+export { Clock } from "./Clock";

package/lib/shared/components/ColorChecker/ColorChecker.js

@@ -0,0 +1,89 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + t); }
+import React from 'react';
+import { hexToRgb, calculateRatio, rgbToHsb, hsbToRgb, rgbToHex } from "./utils";
+import { Button } from '..';
+export var ColorChecker = function ColorChecker(_ref) {
+  _objectDestructuringEmpty(_ref);
+  var _React$useState = React.useState('ffffff'),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    colorOne = _React$useState2[0],
+    setColorOne = _React$useState2[1];
+  var _React$useState3 = React.useState('ffffff'),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    colorTwo = _React$useState4[0],
+    setColorTwo = _React$useState4[1];
+  var _React$useState5 = React.useState(null),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    ratio = _React$useState6[0],
+    setRatio = _React$useState6[1];
+  React.useEffect(function () {
+    var c1 = hexToRgb(colorOne);
+    var c2 = hexToRgb(colorTwo);
+    var r = calculateRatio(c1, c2).toFixed(2);
+    setRatio(r);
+    // if (parseInt(r) > 1) {
+    //   console.log('greater')
+    // } else {
+    //   if (!c2) return;
+    //   console.log('not greater')
+    //   const { r, g , b } = c2
+    //   const { h, s , b: brightness} = rgbToHsb(r, g, b)
+    //   const newB = brightness * 0.33
+    //   const newC = hsbToRgb(h,s,newB)
+    //   console.log(newC)
+    //   const newR = calculateRatio(c1, newC).toFixed(2)
+    //   console.log('iRatio', newR, parseFloat(newR), parseFloat(newR) > 7)
+    //   if (parseFloat(newR) > 7) {
+    //     console.log('is Greater')
+    //     // const newH = rgbToHex(newC)
+    //     const newH = rgbToHex(newC?.r, newC?.g, newC?.b)
+    //     console.log('newH', parseInt(newH).toString())
+    //     setColorTwo(parseInt(newH).toString())
+    //     setRatio(newR)
+    //   }
+    // }
+  }, [colorOne, colorTwo]);
+  var fixContrast = function fixContrast() {
+    var c1 = hexToRgb(colorOne);
+    var c2 = hexToRgb(colorTwo);
+    if (!c2) return;
+    var r = c2.r,
+      g = c2.g,
+      b = c2.b;
+    var _rgbToHsb = rgbToHsb(r, g, b),
+      h = _rgbToHsb.h,
+      s = _rgbToHsb.s,
+      brightness = _rgbToHsb.b;
+    var newB = brightness * 0.33;
+    var newC = hsbToRgb(h, s, newB);
+    var newR = calculateRatio(c1, newC).toFixed(2);
+    if (parseFloat(newR) > 7) {
+      var newH = rgbToHex(newC === null || newC === void 0 ? void 0 : newC.r, newC === null || newC === void 0 ? void 0 : newC.g, newC === null || newC === void 0 ? void 0 : newC.b);
+      setColorTwo(parseInt(newH).toString());
+      setRatio(newR);
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "text-neutral-800"
+  }, /*#__PURE__*/React.createElement("div", null, "Ratio: ", ratio), /*#__PURE__*/React.createElement("div", null, "Color 1: ", colorOne), /*#__PURE__*/React.createElement("div", null, "Color 2: ", colorTwo), /*#__PURE__*/React.createElement(Button, {
+    text: "fix contrast",
+    onClick: function onClick() {
+      return fixContrast();
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "w-[200px] h-[200px]",
+    style: {
+      backgroundColor: "#".concat(colorOne)
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      color: "#".concat(colorTwo)
+    }
+  }, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi vero sequi similique ullam, accusamus architecto cumque delectus quae, quo odio, vel rerum repellat?")));
+};

package/lib/shared/components/ColorChecker/index.js

@@ -0,0 +1,2 @@
+export { ColorChecker } from "./ColorChecker";
+export { calculateRatio, getColorObject, checksRGB, lightenDarkenColor, rgbToHex, hexToRgb } from "./utils";