RubyGems - playbook_ui - Versions diffs - 12.28.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown869 → 12.28.0.pre.alpha.PLAY814removemomentjs871 - Mend

playbook_ui 12.28.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown869 → 12.28.0.pre.alpha.PLAY814removemomentjs871

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (42) hide show

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx CHANGED Viewed

@@ -3,7 +3,7 @@ import classnames from "classnames";
 import { globalProps } from "../utilities/globalProps";
 import { buildCss, buildDataProps } from "../utilities/props";
-import DateTime from "../pb_kit/dateTime";
+import DateTime from '../pb_kit/dateTime';
 import Body from "../pb_body/_body";
 import Caption from "../pb_caption/_caption";
@@ -21,18 +21,16 @@ type DateRangeInlineProps = {
   endDate?: Date;
 };
-const dateTimestamp = (dateValue: Date | string, includeYear: boolean) => {
-  const date = new DateTime({ value: dateValue });
+const dateTimestamp = (dateValue: Date, includeYear: boolean) => {
   if (includeYear) {
-    return `${date.toMonth()} ${date.toDay()}, ${date.toYear()}`;
+    return `${DateTime.toMonth(dateValue)} ${DateTime.toDay(dateValue)}, ${DateTime.toYear(dateValue)}`;
   } else {
-    return `${date.toMonth()} ${date.toDay()}`;
+    return `${DateTime.toMonth(dateValue)} ${DateTime.toDay(dateValue)}`;
   }
 };
-const dateTimeIso = (dateValue: Date | string) => {
-  const date = new DateTime({ value: dateValue });
-  return date.toIso();
+const dateTimeIso = (dateValue: Date) => {
+  return DateTime.toIso(dateValue);
 };
 const DateRangeInline = (props: DateRangeInlineProps) => {
@@ -52,14 +50,17 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
       <>
         {icon && (
           <>
-            <Body color="light" key={Math.random()} tag="span">
-              <Icon
-                className="pb_date_range_inline_icon"
-                dark={dark}
-                fixedWidth
-                icon="calendar-alt"
-                size={size}
+            <Body color="light"
+                key={Math.random()}
                 tag="span"
+            >
+              <Icon
+                  className="pb_date_range_inline_icon"
+                  dark={dark}
+                  fixedWidth
+                  icon="calendar-alt"
+                  size={size}
+                  tag="span"
               />
             </Body>
           </>
@@ -78,7 +79,7 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
   const dateRangeClasses = buildCss("pb_date_range_inline_kit", align);
   const dataProps = buildDataProps(data)
-  const renderTime = (date: Date | string) => {
+  const renderTime = (date: Date) => {
     return (
       <time dateTime={dateTimeIso(date)}>
         {dateInCurrentYear() ? (
@@ -92,24 +93,30 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
   return (
     <div
-    {...dataProps}
-      className={classnames(dateRangeClasses, globalProps(props), className)}
+        {...dataProps}
+        className={classnames(dateRangeClasses, globalProps(props), className)}
     >
       <div className="pb_date_range_inline_wrapper">
         {size == "xs" && (
           <>
             {iconContent()}
-            <Caption dark={dark} tag="span">
+            <Caption dark={dark}
+                tag="span"
+            >
               {renderTime(startDate)}
             </Caption>
-            <Caption dark={dark} tag="span">
+            <Caption dark={dark}
+                tag="span"
+            >
               <Icon
-                className="pb_date_range_inline_arrow"
-                fixedWidth
-                icon="long-arrow-right"
+                  className="pb_date_range_inline_arrow"
+                  fixedWidth
+                  icon="long-arrow-right"
               />
             </Caption>
-            <Caption dark={dark} tag="span">
+            <Caption dark={dark}
+                tag="span"
+            >
               {renderTime(endDate)}
             </Caption>
           </>
@@ -118,18 +125,25 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
         {size == "sm" && (
           <>
             {iconContent()}
-            <Body dark={dark} tag="span">
+            <Body dark={dark}
+                tag="span"
+            >
               {renderTime(startDate)}
             </Body>
-            <Body color="light" dark={dark} tag="span">
-              <Icon
-                className="pb_date_range_inline_arrow"
+            <Body color="light"
                 dark={dark}
-                fixedWidth
-                icon="long-arrow-right"
+                tag="span"
+            >
+              <Icon
+                  className="pb_date_range_inline_arrow"
+                  dark={dark}
+                  fixedWidth
+                  icon="long-arrow-right"
               />
             </Body>
-            <Body dark={dark} tag="span">
+            <Body dark={dark}
+                tag="span"
+            >
               {renderTime(endDate)}
             </Body>
           </>

data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.tsx CHANGED Viewed

@@ -14,9 +14,9 @@ type DateRangeStackedProps = {
   className?: string | string[],
   data?: string,
   dark?: boolean,
-  endDate: string,
+  endDate: Date,
   id?: string,
-  startDate: string,
+  startDate: Date,
 }
 const DateRangeStacked = (props: DateRangeStackedProps) => {
@@ -29,7 +29,9 @@ const DateRangeStacked = (props: DateRangeStackedProps) => {
   const dataProps = buildDataProps(data)
   return (
-    <div {...dataProps} className={css}>
+    <div {...dataProps}
+        className={css}
+    >
       <Flex vertical="center">
         <FlexItem>
           <DateYearStacked

data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx CHANGED Viewed

@@ -1,9 +1,9 @@
 import React from "react";
 import classnames from "classnames";
-import DateTime from "../pb_kit/dateTime";
 import { buildCss, buildDataProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
+import DateTime from '../pb_kit/dateTime';
 import Caption from "../pb_caption/_caption";
 import Title from "../pb_title/_title";
@@ -14,7 +14,7 @@ type DateStackedProps = {
   className?: string | string[];
   dark?: boolean;
   data?: string;
-  date: string | Date;
+  date: Date;
   size?: "sm" | "md";
   id?: string;
   reverse?: boolean;
@@ -45,39 +45,42 @@ const DateStacked = (props: DateStackedProps) => {
     className
   );
-  const currentYear = new Date().getFullYear().toString();
-  const dateTimestamp = new DateTime({ value: date });
-  const inputYear = dateTimestamp.toYear().toString();
+  const currentYear = new Date().getFullYear()
+  const inputYear = DateTime.toYear(date);
   const dataProps = buildDataProps(data)
   return (
     <>
       {bold == false ? (
-        <div {...dataProps} className={classes}>
+        <div {...dataProps}
+            className={classes}
+        >
           <div className="pb_date_stacked_day_month">
-            <Caption text={dateTimestamp.toMonth().toUpperCase()} />
+            <Caption text={DateTime.toMonth(date).toUpperCase()} />
             <Title
-              dark={dark}
-              size={sizes[size]}
-              text={dateTimestamp.toDay()}
+                dark={dark}
+                size={sizes[size]}
+                text={DateTime.toDay(date).toString()}
             />
           </div>
           {currentYear != inputYear && <Caption size="xs">{inputYear}</Caption>}
         </div>
       ) : (
-          <div {...dataProps} className={classes}>
+          <div {...dataProps}
+              className={classes}
+          >
             <div className="pb_date_stacked_day_month">
-              <Title
-                bold
-                dark={dark}
-                size="4"
-                text={dateTimestamp.toMonth()}
+              <Title
+                  bold
+                  dark={dark}
+                  size="4"
+                  text={DateTime.toMonth(date)}
               />
-              <Title
-                bold
-                dark={dark}
-                size="4"
-                text={dateTimestamp.toDay()}
+              <Title
+                  bold
+                  dark={dark}
+                  size="4"
+                  text={DateTime.toDay(date).toString()}
               />
               {currentYear != inputYear && <Title size="4">{inputYear}</Title>}
             </div>

data/app/pb_kits/playbook/pb_date_time/_date_time.tsx CHANGED Viewed

@@ -13,7 +13,7 @@ type DateTimeProps = {
   aria?: { [key: string]: string; },
   className?: string,
   data?: { [key: string]: string; },
-  datetime: string,
+  datetime: Date,
   id?: string,
   size?: "sm" | "md",
   showDayOfWeek: boolean,

data/app/pb_kits/playbook/pb_date_time/dateTime.test.js CHANGED Viewed

@@ -89,7 +89,7 @@ describe('DateTime Kit', () => {
     const kit = screen.getByTestId(testId)
     const text = kit.querySelector('.pb_time_kit_md.ml_sm')
-    expect(text.textContent).toEqual('2:00p JST')
+    expect(text.textContent).toEqual('2:00p GMT+9')
   })
   test('renders DatePicker size', () => {
     render(

data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx CHANGED Viewed

@@ -12,8 +12,8 @@ import DateStacked from '../pb_date_stacked/_date_stacked'
 type DateTimeStackedProps = {
   id?: string,
-  date: string,
-  datetime: string,
+  date: Date,
+  datetime: Date,
   dark: boolean,
   timeZone?: string,
 }

data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js CHANGED Viewed

@@ -34,7 +34,7 @@ test('renders time in default timezone', () => {
 test('renders time in timezone', () => {
   props.timeZone = 'Asia/Tokyo'
   const kit = renderKit(DateTimeStacked, props)
-  expect(kit).toHaveTextContent(`${monthDayYear}2:00aJST`)
+  expect(kit).toHaveTextContent(`${monthDayYear}2:00aGMT+9`)
 })
 test('renders time in timezone', () => {

data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.tsx CHANGED Viewed

@@ -1,9 +1,9 @@
 import React from 'react'
 import classnames from 'classnames'
-import DateTime from '../pb_kit/dateTime'
 import { buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
+import DateTime from '../pb_kit/dateTime';
 import Body from '../pb_body/_body'
 import Title from '../pb_title/_title'
@@ -13,13 +13,12 @@ type DateYearStackedProps = {
   className?: string | string[],
   dark?: boolean,
   data?: string,
-  date: string,
+  date: Date,
   id?: string,
 }
 const DateYearStacked = (props: DateYearStackedProps) => {
   const { align = 'left', className, dark = false, date, data={} } = props
-  const dateTimestamp = new DateTime({ value: date })
   const css = classnames(
     buildCss('pb_date_year_stacked', align),
     globalProps(props),
@@ -29,15 +28,14 @@ const DateYearStacked = (props: DateYearStackedProps) => {
   return (
     <div {...dataProps}
-    className={css}>
+        className={css}
+    >
       <Title
           dark={dark}
           size={4}
-          text={`${dateTimestamp.toDay()} ${dateTimestamp
-          .toMonth()
-          .toUpperCase()}`}
+          text={`${DateTime.toDay(date)} ${DateTime.toMonth(date).toUpperCase()}`}
       />
-      <Body color="light">{dateTimestamp.toYear()}</Body>
+      <Body color="light">{DateTime.toYear(date)}</Body>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_kit/dateTime.ts CHANGED Viewed

@@ -1,90 +1,162 @@
-import moment, { Moment } from 'moment'
-import 'moment-strftime'
-import 'moment-timezone'
-type DateTimeType = {
-  value: string | Date,
-  zone?: string,
-}
 const ABBR_DAYS = ['SU', 'M', 'T', 'W', 'TH', 'F', 'S']
-export default class DateTime {
-  value: Moment & any
-  constructor({ value, zone = 'America/New_York' }: DateTimeType) {
-    this.value = this.convertToTimestampZone(value, zone)
-  }
-  convertToTimestampZone(value: string | Date, zone: string) {
-    return moment(value).tz(zone)
-  }
-  convertToTimezone() {
-    return this.value.strftime('%Z')
-  }
+const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
-  toCustomFormat(format = '%-m/%-d') {
-    return this.value.strftime(format)
-  }
+const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
-  toYear() {
-    return this.value.strftime('%Y')
+export const toMinute = (newDate: Date, timeZone?: string): string => {
+  const date = new Date(newDate)
+  if (timeZone) {
+    return date.toLocaleTimeString(undefined, {timeZone, hour: "2-digit", minute: "2-digit"}).slice(3, 5);
+  } else {
+    return date.toLocaleTimeString(undefined, {hour: "2-digit", minute: "2-digit"}).slice(3, 5);
   }
+}
-  toMonth() {
-    return this.value.strftime('%b')
+export const toHour = (newDate: Date, timeZone?: string): string => {
+  const date = new Date(newDate)
+  if (timeZone) {
+    return date.toLocaleTimeString(undefined, {timeZone, hour: "numeric"}).split(' ')[0];
+  } else {
+    return date.toLocaleTimeString(undefined, {hour: "numeric"}).split(' ')[0];
   }
+}
-  toMonthNum() {
-    return this.value.strftime('%-m')
-  }
+export const toDay = (newDate: Date, timeZone?: string): number => {
+    if (timeZone) {
+      const date = new Date(newDate.toLocaleString(undefined, { timeZone }));
+      return date.getUTCDate()
+    } else {
+      const date = new Date(newDate)
+      return date.getUTCDate()
+    }
+}
-  toMonthFull() {
-    return this.value.strftime('%B')
-  }
+export const toDayAbbr = (newDate: Date): string => {
+  const date = new Date(newDate)
+  return ABBR_DAYS[date.getUTCDay()]
+}
-  toDay() {
-    return this.value.strftime('%e')
-  }
+export const toWeekday = (newDate: Date): string => {
+    const date = new Date(newDate)
+    return days[date.getUTCDay()]
+}
-  toDayAbbr() {
-    return ABBR_DAYS[this.value.day()]
-  }
+export const toMonth = (newDate: Date, timeZone?: string): string => {
+    if (timeZone) {
+      const date = new Date(newDate.toLocaleString(undefined, { timeZone }));
+      return months[date.getUTCMonth()]
+    } else {
+      const date = new Date(newDate)
+      return months[date.getUTCMonth()]
+    }
+}
-  toWeekday() {
-    return this.value.strftime('%a')
-  }
+export const toMonthNum = (newDate: Date): number => {
+  const date = new Date(newDate)
+  return date.getUTCMonth() +1
+}
-  toHour() {
-    return this.value.strftime('%l')
-  }
+export const toYear = (newDate: Date, timeZone?: string): number => {
+    if (timeZone) {
+      const date = new Date(newDate.toLocaleString(undefined, { timeZone }));
+      return date.getUTCFullYear()
+    } else {
+      const date = new Date(newDate)
+      return date.getUTCFullYear()
+    }
+}
-  toMinute() {
-    return this.value.strftime('%M')
+export const toTime = (newDate: Date, timeZone?: string): string => {
+  const date = new Date(newDate)
+  if (timeZone) {
+    return date.toLocaleTimeString(undefined, {timeZone, timeStyle: "short"}).split(' ')[0];
+  } else {
+    return date.toLocaleTimeString(undefined, {timeStyle: "short"}).split(' ')[0];
   }
+}
-  toMeridian() {
-    return this.value.strftime('%P')[0]
-  }
+export const toMeridiem = (newDate: Date, timeZone?: string): string => {
+    const date = new Date(newDate)
+    if (timeZone) {
+      return date.toLocaleString(undefined, {timeZone, hour12: true }).slice(-2).charAt(0).toLocaleLowerCase();
+    } else {
+      return date.toLocaleString(undefined, {hour12: true }).slice(-2).charAt(0).toLocaleLowerCase();
+    }
+}
-  toIso() {
-    return this.value.toISOString()
-  }
+export const toTimeZone = (newDate: Date, timeZone?: string): string => {
+    const date = new Date(newDate)
+    if (timeZone) {
+      return date.toLocaleString(undefined, {timeZone, timeZoneName: "short"}).split(' ')[3];
+    } else {
+      return date.toLocaleString(undefined, {timeZoneName: "short"}).split(' ')[3];
+    }
+}
-  toTime() {
-    const time = this.value.strftime('%I:%M')
+export const toTimeWithMeridiem = (newDate: Date, timeZone: string): string => {
+  const date = new Date(newDate)
+  return `${toTime(date, timeZone)}${toMeridiem(date, timeZone)}`;
+}
-    // strftime adds a leading 0 on single hour times. ie 08:31.
-    // this removes that 0 to match the rails kit.
-    return time.charAt() === '0' ? time.slice(1) : time
-  }
+export const toIso = (newDate: Date): string => {
+    const date = new Date(newDate)
+    return date.toISOString()
+}
-  toTimezone() {
-    return this.value.strftime('%Z')
-  }
+export const fromNow = (newDate: Date): string => {
+  const startDate = new Date(newDate).getTime()
+  const endDate = new Date().getTime()
+  const elapsedTime = endDate - startDate
+  let elapsedTimeString = `${Math.round(elapsedTime / (365.25 * 24 * 60 * 60 * 1000))} years ago.`; // 730+ days
+  const elapsedTimeData = [
+    { min: 0, max: 44999, value: "a few seconds ago" }, // 0-44 seconds
+    { min: 45000, max: 89999, value: "a minute ago" }, // 45-89 seconds
+    { min: 90000, max: 2649999, value: `${Math.round(elapsedTime / 60000)} minutes ago`}, //  90s-44 minutes
+    { min: 2650000, max: 7299999, value: "an hour ago" }, // 45-120 minutes
+    { min: 7300000, max: 75699999, value: `${Math.round(elapsedTime / 3600000)} hours ago`}, // 2-21 hours
+    { min: 75700000, max: 172899999, value: "a day ago" }, // 22-48 hours
+    { min: 172900000, max: 2169999999, value: `${Math.round(elapsedTime / 86400000)} days ago`}, // 2-25 days
+    { min: 2170000000, max: 5184999999, value: "a month ago"}, // 26-60 days
+    { min: 5185000000, max: 27561699999, value: `${Math.round(elapsedTime / 30.44 * 24 * 60 * 60 * 1000)} months ago`}, // 60-319 days
+    { min: 27561700000, max: 63072999999, value: "a year ago"}, // 320-730 days
+  ];
+  for (const timeDate of elapsedTimeData) {
+    if (elapsedTime >= timeDate.min && elapsedTime <= timeDate.max) {
+      elapsedTimeString = timeDate.value;
+      break;
+    }
+  }
+  return elapsedTimeString
+}
-  toTimeWithMeridian() {
-    return this.toTime() + this.toMeridian()
+export const toCustomFormat = (newDate: Date, format = 'month_day'): string => {
+  const date = new Date(newDate)
+  if (format == "month_day") {
+    return `${toMonthNum(date)}/${toDay(date)}`
+  } else {
+    return `${date.toLocaleString(undefined, {month: "short"})} ${toDay(date)}`
   }
 }
+export default {
+  toMinute,
+  toHour,
+  toDay,
+  toDayAbbr,
+  toWeekday,
+  toMonth,
+  toMonthNum,
+  toYear,
+  toTime,
+  toMeridiem,
+  toTimeZone,
+  toTimeWithMeridiem,
+  toIso,
+  fromNow,
+  toCustomFormat,
+}