@bufferapp/analyze-shared-components - npm Package Compare versions

Comparing version 1.77.0 to 1.77.3

ContentModal/components/Card/index.jsx

 import React from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
-import moment from "moment-timezone";
+import dayjs from "dayjs";
+import relativeTime from 'dayjs/plugin/relativeTime';
 import Text from "@bufferapp/components/Text";
@@ -13,2 +14,4 @@ import Label from "@bufferapp/ui/Text";
 
+dayjs.extend(relativeTime);
+
 const Container = styled.div`
@@ -203,4 +206,4 @@ width: 1000px;
   return !!timestamp.toString().match(/0{3}$/)
-    ? moment(timestamp).fromNow()
-    : moment(timestamp * 1000).fromNow();
+    ? dayjs(timestamp).fromNow()
+    : dayjs(timestamp * 1000).fromNow();
 }
@@ -251,3 +254,3 @@
           <Text color="outerSpace" weight="semi-bold">
-            {moment(post.date).format("MMMM D, YYYY h:mma")}
+            {dayjs(post.date).format("MMMM D, YYYY h:mma")}
           </Text>
@@ -254,0 +257,0 @@ <ProfileLegend profile={post.profile} />

GraphQLWrapper/index.jsx

 import React, { useEffect } from "react";
-import moment from "moment-timezone";
+import dayjs from "dayjs";
 import { useQuery } from "@apollo/client";
@@ -78,2 +78,3 @@ import {
 export function formatQueryVariables(profile, variables) {
+  console.log('variables', variables.startDate);
   return {
@@ -83,4 +84,4 @@ serviceId: profile.serviceId,
     ...variables,
-    endDate: moment(new Date(variables.endDate)).format("Y-MM-DD"),
-    startDate: moment(new Date(variables.startDate)).format("Y-MM-DD"),
+    endDate: dayjs(variables.endDate, "MM-DD-YYYY").format("YYYY-MM-DD"),
+    startDate: dayjs(variables.startDate, "MM-DD-YYYY").format("YYYY-MM-DD"),
   };
@@ -87,0 +88,0 @@ }

GridItem/components/ChartTooltip/index.jsx

 import PropTypes from "prop-types";
 import React from "react";
-import moment from "moment-timezone";
 import styled from "styled-components";
@@ -10,3 +9,9 @@ import TruncatedNumber from "../../../TruncatedNumber";
 import PromotedIcon from "@bufferapp/ui/Icon/Icons/Promoted";
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import dayTimezone from 'dayjs/plugin/timezone';
 
+dayjs.extend(utc);
+dayjs.extend(dayTimezone);
+
 import {
@@ -65,3 +70,3 @@ blueLight,
         <Text>
-          {moment.utc(point.x).format("D MMMM")}
+          {dayjs.utc(point.x).format("D MMMM")}
         </Text>
@@ -106,3 +111,3 @@ </Date>
         <Text>
-          {moment.utc(point.x).format("D MMMM")}
+          {dayjs.utc(point.x).format("D MMMM")}
         </Text>
@@ -109,0 +114,0 @@ </Date>

GridItem/components/GridItemChart/index.jsx

 import PropTypes from "prop-types";
 import React from "react";
 import ReactHighcharts from "react-highcharts";
-import moment from "moment-timezone";
 import { blueLight, teal } from "@bufferapp/ui/style/colors";
 import chartConfig from "./chartConfig";
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import dayTimezone from 'dayjs/plugin/timezone';
 
+dayjs.extend(utc);
+dayjs.extend(dayTimezone);
+
 const chartFillColorBlue = blueLight;
@@ -13,3 +18,3 @@ const paidFill = teal;
   const organicSeries = Array.from(dailyMetric, (day) => {
-    const dayStartTimestamp = moment
+    const dayStartTimestamp = dayjs
       .utc(Number(day.day))
@@ -37,3 +42,3 @@ .startOf("day")
   const paidSeries = Array.from(dailyMetric, (day) => {
-    const dayStartTimestamp = moment
+    const dayStartTimestamp = dayjs
       .utc(Number(day.day))
@@ -40,0 +45,0 @@ .startOf("day")

GridItem/story.jsx

 import React from 'react';
 import PropTypes from 'prop-types';
-import moment from 'moment-timezone';
 import { storiesOf } from '@storybook/react';
@@ -14,5 +13,11 @@ import { checkA11y } from 'storybook-addon-a11y';
 import mockDaily90days from './mock/daily90days';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import dayTimezone from 'dayjs/plugin/timezone';
 
-const dayTimestamp = moment.utc(Number(mockDaily7days[0].day)).startOf('day').valueOf();
+dayjs.extend(utc);
+dayjs.extend(dayTimezone);
 
+const dayTimestamp = dayjs.utc(Number(mockDaily7days[0].day)).startOf('day').valueOf();
+
 storiesOf('GridItem')
@@ -19,0 +24,0 @@ .addDecorator(checkA11y)

package.json

 {
   "name": "@bufferapp/analyze-shared-components",
-  "version": "1.77.0",
+  "version": "1.77.3",
   "description": "Shared components for Analyze",
@@ -16,3 +16,2 @@ "main": "index.js",
     "immutability-helper": "^2.9.0",
-    "moment-timezone": "^0.5.27",
     "react-highcharts": "^16.1.0"
@@ -19,0 +18,0 @@ },

PeriodPhrase/index.jsx

 import React from 'react';
 import PropTypes from 'prop-types';
-import moment from 'moment-timezone';
+import dayjs from 'dayjs';
 
 const formatDateRange = (startDate, endDate) => {
-  const start = moment.unix(startDate);
-  const end = moment.unix(endDate);
+  const start = dayjs.unix(startDate);
+  const end = dayjs.unix(endDate);
 
@@ -23,3 +23,3 @@ const daysFrom = end.diff(start, 'days') + 1;
     range.start = 'yesterday';
-    range.end = moment().subtract(2, 'days').startOf('day').format('dddd');
+    range.end = dayjs().subtract(2, 'days').startOf('day').format('dddd');
   } else if (daysFrom > 1 && daysFrom < 345) {
@@ -26,0 +26,0 @@ range.start = `${daysFrom} days`;

PostsTable/components/PostItem/index.jsx

 import React from "react";
 import PropTypes from "prop-types";
-import moment from "moment-timezone";
 import styled from "styled-components";
@@ -10,5 +9,10 @@ import { Text } from "@bufferapp/components";
 import Profile from "./components/Profile";
-
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import dayTimezone from 'dayjs/plugin/timezone';
 import { lightSlate, nevada, white } from "@bufferapp/components/style/color";
 
+dayjs.extend(utc);
+dayjs.extend(dayTimezone);
+
 const Container = styled.li`
@@ -153,3 +157,3 @@ display: flex;
     if (!timezone) {
-      timezone = moment.tz.guess();
+      timezone = dayjs.tz.guess();
     }
@@ -191,3 +195,3 @@
               <Text size="medium" weight="bold" color="outerSpace">
-                {moment(post.date).tz(timezone).format(dateFormat)}
+                {dayjs(post.date).tz(timezone).format(dateFormat)}
               </Text>
@@ -194,0 +198,0 @@ {post.profile && <Profile profile={post.profile} />}

utils/chartUtils/chartConfig.jsx

 import numeral from 'numeral';
-import moment from 'moment-timezone';
 import ReactHighcharts from 'react-highcharts';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import dayTimezone from 'dayjs/plugin/timezone';
 
+dayjs.extend(utc);
+dayjs.extend(dayTimezone);
+
 export function truncateNumber() {
@@ -22,3 +27,3 @@ let number = parseFloat(this.value);
 export function xAxisLabelFormatter() {
-  const date = moment(new Date(this.value)).utc();
+  const date = dayjs(new Date(this.value)).utc();
   if (!date.isValid()) return this.value;
@@ -25,0 +30,0 @@ const isFirstOfMonth = date.date() === 1;

utils/index.jsx

 import React from "react";
-import moment from "moment-timezone";
+import dayjs from "dayjs";
 import ChevronDown from "@bufferapp/ui/Icon/Icons/ChevronDown";
@@ -16,4 +16,4 @@ import styled from "styled-components";
 export function getNumOfDaysForDateRange(dateRange) {
-  const start = moment(dateRange.startDate, "MM/DD/YYYY");
-  const end = moment(dateRange.endDate, "MM/DD/YYYY");
+  const start = dayjs(dateRange.startDate, "MM/DD/YYYY");
+  const end = dayjs(dateRange.endDate, "MM/DD/YYYY");
   return end.diff(start, "days") + 1;
@@ -20,0 +20,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

335413

increased by0.2%

Dependency count

5

decreased by-16.67%

Lines of code

12888

increased by0.18%

Dependency changes

• - Removedmoment-timezone@^0.5.27

• - Removedmoment-timezone@0.5.45(transitive)