RubyGems - playbook_ui - Versions diffs - 12.37.0.pre.alpha.svgiconmethods1064 → 12.38.0.pre.alpha.PLAY932removemomentqp1088 - Mend

playbook_ui 12.37.0.pre.alpha.svgiconmethods1064 → 12.38.0.pre.alpha.PLAY932removemomentqp1088

Files changed (34) hide show

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_icon/docs/_icon_animate.html.erb CHANGED Viewed

@@ -1,4 +1,3 @@
 <p><%= pb_rails("icon", props: { icon: "spinner", spin: true, fixed_width: true, size: "2x" }) %> <span>Spin</span></p>
 <br/>
 <p><%= pb_rails("icon", props: { icon: "spinner", pulse: true, fixed_width: true, size: "2x" }) %> <span>Pulse</span></p>

data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb CHANGED Viewed

@@ -14,5 +14,3 @@
     parent element's css color properties."
   } ) %>
 </div>

data/app/pb_kits/playbook/pb_icon/docs/example.yml CHANGED Viewed

@@ -1,15 +1,14 @@
 examples:
   rails:
-  # - icon_default: Icon Default
-  # - icon_rotate: Icon Rotate
-  # - icon_flip: Icon Flip
-  # - icon_animate: Icon Animation
-  # - icon_pull: Icon Pull
-  # - icon_border: Icon Border
-  # - icon_sizes: Icon Sizes
-  # - icon_custom: Icon Custom
-  # - icon_fa_kit: Icon with FontAwesome Kit
-  - icon_svg: Icon SVG
+  - icon_default: Icon Default
+  - icon_rotate: Icon Rotate
+  - icon_flip: Icon Flip
+  - icon_animate: Icon Animation
+  - icon_pull: Icon Pull
+  - icon_border: Icon Border
+  - icon_sizes: Icon Sizes
+  - icon_custom: Icon Custom
+  - icon_fa_kit: Icon with FontAwesome Kit
   react:
   - icon_default: Icon Default

data/app/pb_kits/playbook/pb_icon/icon.html.erb CHANGED Viewed

@@ -1,15 +1,15 @@
 <% if object.custom_icon %>
-  <%= object.embedded_svg(object.custom_icon) %>
+  <%= object.render_svg(object.custom_icon) %>
 <% elsif object.valid_emoji(object.icon) %>
   <span class="pb_icon_kit_emoji"><%= object.icon.html_safe %></span>
 <% else %>
   <%= content_tag(:i, nil,
       id: object.id,
       data: object.data,
-      class: object.classname,
+      class: object.classname
   ) %>
   <%= content_tag(:span, nil,
       aria: { label: "#{object.icon} icon" }.merge(object.aria),
       hidden: true
   ) %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_icon/icon.rb CHANGED Viewed

@@ -90,25 +90,6 @@ module Playbook
         end
       end
-      def embedded_svg(icon_name)
-        svg_path = Rails.application.config.respond_to?(:icon_path) ? Rails.application.config.icon_path : "app/assets/images"
-        file_path = File.read(Rails.root.join(svg_path, "#{icon_name}.svg"))
-        doc = Nokogiri::HTML::DocumentFragment.parse file_path
-        svg = doc.at_css "svg"
-        doc.to_html.html_safe
-        size_factor = size.to_i
-        if size_factor > 1
-          pixel_size = size_factor * 16
-          svg["width"] = pixel_size.to_s
-          svg["height"] = pixel_size.to_s
-        end
-        raw doc
-      end
     private
       def border_class

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

@@ -1,90 +1,376 @@
+const ABBR_DAYS = ['SU', 'M', 'T', 'W', 'TH', 'F', 'S']
-import moment, { Moment } from 'moment'
-import 'moment-strftime'
-import 'moment-timezone'
+const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
-type DateTimeType = {
-  value: string | Date,
-  zone?: string,
-}
+const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
-const ABBR_DAYS = ['SU', 'M', 'T', 'W', 'TH', 'F', 'S']
+const formatDate = (newDate: Date | string) => {
+  const isTimelessStringDate = typeof newDate === "string" && !newDate.includes("T")
-export default class DateTime {
-  value: Moment & any
-  constructor({ value, zone = 'America/New_York' }: DateTimeType) {
-    this.value = this.convertToTimestampZone(value, zone)
+  if (isTimelessStringDate) {
+    const unhyphenatedDate = new Date((newDate as string).replace(/-/g, "/"))
+    return unhyphenatedDate
   }
-  convertToTimestampZone(value: string | Date, zone: string) {
-    return moment(value).tz(zone)
-  }
+  return new Date(newDate)
+}
-  convertToTimezone() {
-    return this.value.strftime('%Z')
+export const toMinute = (newDate: Date | string, timeZone?: string): string => {
+  const date = formatDate(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);
   }
+}
-  toCustomFormat(format = '%-m/%-d') {
-    return this.value.strftime(format)
+export const toHour = (newDate: Date | string, timeZone?: string): string => {
+  const date = formatDate(newDate)
+  if (timeZone) {
+    return date.toLocaleTimeString(undefined, { timeZone, hour: "numeric" }).split(' ')[0];
+  } else {
+    return date.toLocaleTimeString(undefined, { hour: "numeric" }).split(' ')[0];
   }
+}
-  toYear() {
-    return this.value.strftime('%Y')
-  }
+export const toDay = (newDate: Date | string, timeZone?: string): number => {
+    if (timeZone) {
+      const date = new Date(formatDate(newDate).toLocaleString(undefined, { timeZone }));
+      return date.getDate()
+    } else {
+      const date = formatDate(newDate)
+      return date.getDate()
+    }
+}
-  toMonth() {
-    return this.value.strftime('%b')
-  }
+export const toDayAbbr = (newDate: Date | string): string => {
+  const date = formatDate(newDate)
+  return ABBR_DAYS[date.getUTCDay()]
+}
-  toMonthNum() {
-    return this.value.strftime('%-m')
-  }
+export const toWeekday = (newDate: Date | string): string => {
+    const date = formatDate(newDate)
+    return days[date.getUTCDay()]
+}
-  toMonthFull() {
-    return this.value.strftime('%B')
-  }
+export const toMonth = (newDate: Date | string, timeZone?: string): string => {
+    if (timeZone) {
+      const date = new Date(formatDate(newDate).toLocaleString(undefined, { timeZone }));
+      return months[date.getUTCMonth()]
+    } else {
+      const date = formatDate(newDate)
+      return months[date.getUTCMonth()]
+    }
+}
-  toDay() {
-    return this.value.strftime('%e')
-  }
+export const toMonthNum = (newDate: Date | string): number => {
+  const date = formatDate(newDate)
+  return date.getUTCMonth() +1
+}
-  toDayAbbr() {
-    return ABBR_DAYS[this.value.day()]
-  }
+export const toYear = (newDate: Date | string, 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()
+    }
+}
-  toWeekday() {
-    return this.value.strftime('%a')
+export const toTime = (newDate: Date | string, timeZone?: string): string => {
+  const date = formatDate(newDate)
+  if (timeZone) {
+    return date.toLocaleTimeString(undefined, { timeZone, timeStyle: "short" }).split(' ')[0];
+  } else {
+    return date.toLocaleTimeString(undefined, { timeStyle: "short" }).split(' ')[0];
   }
+}
-  toHour() {
-    return this.value.strftime('%l')
-  }
+export const toMeridiem = (newDate: Date | string, timeZone?: string): string => {
+    const date = formatDate(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();
+    }
+}
-  toMinute() {
-    return this.value.strftime('%M')
-  }
+export const toTimeZone = (newDate: Date | string, timeZone?: string): string => {
+    const date = formatDate(newDate)
+    if (timeZone) {
+      return date.toLocaleString(undefined, { timeZone, timeZoneName: "short" }).split(' ')[3];
+    } else {
+      return date.toLocaleString(undefined, { timeZoneName: "short" }).split(' ')[3];
+    }
+}
-  toMeridian() {
-    return this.value.strftime('%P')[0]
-  }
+export const toTimeWithMeridiem = (newDate: Date | string, timeZone: string): string => {
+  const date = formatDate(newDate)
+  return `${toTime(date, timeZone)}${toMeridiem(date, timeZone)}`;
+}
-  toIso() {
-    return this.value.toISOString()
-  }
+export const toIso = (newDate: Date | string): string => {
+    const date = formatDate(newDate)
+    return date.toISOString()
+}
-  toTime() {
-    const time = this.value.strftime('%I:%M')
+export const fromNow = (newDate: Date | string): string => {
+  const startDate = formatDate(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
-    // 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
-  }
+  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
+  ];
-  toTimezone() {
-    return this.value.strftime('%Z')
+  for (const timeDate of elapsedTimeData) {
+    if (elapsedTime >= timeDate.min && elapsedTime <= timeDate.max) {
+      elapsedTimeString = timeDate.value;
+      break;
+    }
   }
-  toTimeWithMeridian() {
-    return this.toTime() + this.toMeridian()
+  return elapsedTimeString
+}
+export const toCustomFormat = (newDate: Date | string, format = 'month_day'): string => {
+  const date = formatDate(newDate)
+  if (format == "month_day") {
+    return `${toMonthNum(date)}/${toDay(date)}`
+  } else {
+    return `${date.toLocaleString(undefined, { month: "short" })} ${toDay(date)}`
   }
 }
+// For quickPick.tsx
+// Yesterday
+export const getYesterdayDate = (newDate: Date | string): Date => {
+  const today = formatDate(newDate)
+  const yesterday = new Date()
+  yesterday.setDate(today.getDate() - 1)
+  return yesterday
+}
+// Weeks
+export const getFirstDayOfWeek = (newDate: Date | string): Date => {
+  const today = formatDate(newDate)
+  const dayOfWeek = today.getDay()
+  // Replicate Moment.js: Start of week (Monday) has a time of 00:00:00
+  const firstDayOfWeek = new Date(today.setHours(0, 0, 0))
+  const isSunday = dayOfWeek === 0
+  const daysToSubtract = isSunday ? 6 : (dayOfWeek - 1)
+  firstDayOfWeek.setDate(today.getDate() - daysToSubtract)
+  return firstDayOfWeek
+}
+export const getLastDayOfWeek = (newDate: Date | string): Date => {
+  const today = formatDate(newDate)
+  const dayOfWeek = today.getDay()
+  // Replicate Moment.js: End of week (Sunday) has a time of 23:59:59
+  const lastDayOfWeek = new Date(today.setHours(23, 59, 59, 0))
+  const isSunday = dayOfWeek === 0
+  const daysToAdd = isSunday ? 0 : (7 - dayOfWeek)
+  lastDayOfWeek.setDate(today.getDate() + daysToAdd)
+  return lastDayOfWeek
+}
+export const getPreviousWeekStartDate = (newDate: Date | string): Date => {
+  const firstDayOfWeek = getFirstDayOfWeek(newDate)
+  const firstDayOfPreviousWeek = new Date(
+    firstDayOfWeek.getFullYear(),
+    firstDayOfWeek.getMonth(),
+    firstDayOfWeek.getDate() - 7
+  )
+  return firstDayOfPreviousWeek
+}
+export const getPreviousWeekEndDate = (newDate: Date | string): Date => {
+  const lastDayOfWeek = getLastDayOfWeek(newDate)
+  const lastDayOfPreviousWeek = new Date(
+    lastDayOfWeek.getFullYear(),
+    lastDayOfWeek.getMonth(),
+    lastDayOfWeek.getDate() - 7,
+    lastDayOfWeek.getHours(),
+    lastDayOfWeek.getMinutes(),
+    lastDayOfWeek.getSeconds()
+  )
+  return lastDayOfPreviousWeek
+}
+// Months
+export const getMonthStartDate = (newDate: Date | string): Date => {
+  const date = formatDate(newDate)
+  const firstDayOfMonth = new Date(date.getFullYear(), date.getMonth(), 1)
+  return firstDayOfMonth
+}
+export const getMonthEndDate = (newDate: Date | string): Date => {
+  const date = formatDate(newDate)
+  // Replicate Moment.js: End of month has a time of 23:59:59
+  const lastDayOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0, 23, 59, 59)
+  return lastDayOfMonth
+}
+export const getPreviousMonthStartDate = (newDate: Date | string): Date => {
+  const firstDayOfMonth = getMonthStartDate(newDate)
+  const firstDayOfPreviousMonth = new Date(
+    firstDayOfMonth.getFullYear(),
+    firstDayOfMonth.getMonth() - 1,
+    firstDayOfMonth.getDate()
+  )
+  return firstDayOfPreviousMonth
+}
+export const getPreviousMonthEndDate = (newDate: Date | string): Date => {
+  const lastDayOfMonth = getMonthEndDate(newDate)
+  const lastDayOfPreviousMonth = new Date(
+    lastDayOfMonth.getFullYear(),
+    lastDayOfMonth.getMonth() - 1,
+    lastDayOfMonth.getDate(),
+    lastDayOfMonth.getHours(),
+    lastDayOfMonth.getMinutes(),
+    lastDayOfMonth.getSeconds()
+  )
+  return lastDayOfPreviousMonth
+}
+// Quarters
+export const getQuarterStartDate = (newDate: Date | string): Date => {
+  const date = formatDate(newDate)
+  const quarter = Math.floor(date.getMonth() / 3)
+  const startOfQuarter = new Date(date.getFullYear(), quarter * 3, 1)
+  return startOfQuarter
+}
+export const getQuarterEndDate = (newDate: Date | string): Date => {
+  const date = formatDate(newDate)
+  const quarter = Math.floor(date.getMonth() / 3)
+  const startOfNextQuarter = new Date(date.getFullYear(), (quarter + 1) * 3, 1)
+  // Replicate Moment.js: End of quarter has a time of 23:59:59
+  const endOfQuarter = new Date(startOfNextQuarter.getTime() - 1)
+  return endOfQuarter
+}
+export const getPreviousQuarterStartDate = (newDate: Date | string): Date => {
+  const startOfQuarter = getQuarterStartDate(newDate)
+  const firstDayOfPreviousQuarter = new Date(
+    startOfQuarter.getFullYear(),
+    startOfQuarter.getMonth() - 3,
+    startOfQuarter.getDate()
+  )
+  return firstDayOfPreviousQuarter
+}
+export const getPreviousQuarterEndDate = (newDate: Date | string): Date => {
+  const endOfQuarter = getQuarterEndDate(newDate)
+  const lastDayOfPreviousQuarter = new Date(
+    endOfQuarter.getFullYear(),
+    endOfQuarter.getMonth() - 3,
+    endOfQuarter.getDate(),
+    endOfQuarter.getHours(),
+    endOfQuarter.getMinutes(),
+    endOfQuarter.getSeconds()
+  )
+  return lastDayOfPreviousQuarter
+}
+// Years
+export const getYearStartDate = (newDate: Date | string): Date => {
+  const date = formatDate(newDate)
+  const startOfYear = new Date(date.getFullYear(), 0, 1)
+  return startOfYear
+}
+export const getYearEndDate = (newDate: Date | string): Date => {
+  const date = formatDate(newDate)
+  const endOfYear = new Date(date.getFullYear(), 11, 31, 23, 59, 59)
+  return endOfYear
+}
+export const getPreviousYearStartDate = (newDate: Date | string): Date => {
+  const startOfYear = getYearStartDate(newDate)
+  const firstDayOfPreviousYear = new Date(
+    startOfYear.getFullYear() - 1,
+    startOfYear.getMonth(),
+    startOfYear.getDate()
+  )
+  return firstDayOfPreviousYear
+}
+export const getPreviousYearEndDate = (newDate: Date | string): Date => {
+  const endOfYear = getYearEndDate(newDate)
+  const lastDayOfPreviousYear = new Date(
+    endOfYear.getFullYear() - 1,
+    endOfYear.getMonth(),
+    endOfYear.getDate(),
+    endOfYear.getHours(),
+    endOfYear.getMinutes(),
+    endOfYear.getSeconds()
+  )
+  return lastDayOfPreviousYear
+}
+export default {
+  toMinute,
+  toHour,
+  toDay,
+  toDayAbbr,
+  toWeekday,
+  toMonth,
+  toMonthNum,
+  toYear,
+  toTime,
+  toMeridiem,
+  toTimeZone,
+  toTimeWithMeridiem,
+  toIso,
+  fromNow,
+  toCustomFormat,
+  getYesterdayDate,
+  getFirstDayOfWeek,
+  getLastDayOfWeek,
+  getPreviousWeekStartDate,
+  getPreviousWeekEndDate,
+  getMonthStartDate,
+  getMonthEndDate,
+  getPreviousMonthStartDate,
+  getPreviousMonthEndDate,
+  getQuarterStartDate,
+  getQuarterEndDate,
+  getPreviousQuarterStartDate,
+  getPreviousQuarterEndDate,
+  getYearStartDate,
+  getYearEndDate,
+  getPreviousYearStartDate,
+  getPreviousYearEndDate
+}