use date-fns instead of luxon for es module tree shaking

babel.config.js

@@ -1,13 +1,20 @@
-module.exports = {
-  presets: [
-    [
-      "@babel/preset-env",
-      {
-        targets: {
-          node: "current"
-        }
-      }
-    ]
-  ],
-  plugins: ["transform-es2015-modules-commonjs"]
-};
+module.exports = (api) => {
+  const isTest = api.env('test');
+  if (isTest) {
+    // special babel config for jest
+    return {
+      presets: [
+        [
+          "@babel/preset-env",
+          {
+            targets: {
+              node: "current"
+            }
+          }
+        ]
+      ],
+      plugins: ["transform-es2015-modules-commonjs"]
+    };
+  }
+  return {};
+};

package.json

@@ -26,7 +26,6 @@
     "@charlietango/use-focus-trap": "^1.2.6",
     "@popperjs/core": "^2.5.4",
     "classnames": "^2.2.6",
-    "luxon": "^1.22.0",
     "react-popper": "^2.2.3"
   },
   "devDependencies": {
@@ -52,7 +51,6 @@
     "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/jest": "^26.0.4",
     "@types/lodash-es": "^4.17.3",
-    "@types/luxon": "^1.21.0",
     "@types/react": "^16.9.55",
     "@types/react-dom": "^16.9.9",
     "@types/react-test-renderer": "^16.9.2",
@@ -64,6 +62,7 @@
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
     "classnames": "^2.2.6",
     "css-loader": "^3.6.0",
+    "date-fns": "^2.16.1",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "eslint": "^6.8.0",

rollup.config.js

@@ -28,7 +28,6 @@ const config = [{
   external: [
     "react", "react-dom",
     "@popperjs/core", "react-popper",
-    "luxon",
     "@charlietango/use-focus-trap",
   ],
   plugins: [

src/components/DatePicker/DatePicker.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { UUI } from '../../core/uui';
-import { DateTime } from 'luxon';
+import { format, isValid } from 'date-fns';
 
 export interface DatePickerFeatureProps {
   /**
@@ -28,7 +28,7 @@ export const DatePicker = UUI.FunctionComponent({
 
   const dateValue = useMemo(() => {
     if (!props.value) return ''
-    return DateTime.fromJSDate(props.value).toFormat('yyyy-LL-dd')
+    return format(props.value, 'yyyy-LL-dd')
   }, [props.value])
 
   return (
@@ -39,7 +39,11 @@ export const DatePicker = UUI.FunctionComponent({
         name={props.name}
         value={props.value === undefined ? undefined : dateValue}
         onChange={props.onChange === undefined ? undefined : (
-          (event) => { props.onChange && props.onChange(new Date(event.target.value), event) }
+          (event) => {
+            const newValue = new Date(event.target.value)
+            if (!isValid(newValue)) return
+            props.onChange && props.onChange(newValue, event)
+          }
         )}
       ></Input>
     </Root>

src/components/Label/CountdownLabel.tsx

@@ -1,7 +1,8 @@
 import React, { useState, useCallback } from 'react';
 import { UUI } from '../../core/uui';
 import { useInterval } from 'react-use';
-import { DateTime, Duration } from 'luxon';
+import { format, differenceInMilliseconds } from 'date-fns';
+import { addHours, addMilliseconds } from 'date-fns/esm';
 
 export interface CountdownLabelFeatureProps {
   /**
@@ -41,9 +42,11 @@ export const CountdownLabel = UUI.FunctionComponent({
   }
 
   const generateLabelText = useCallback(() => {
-    const diff = DateTime.fromJSDate(props.until).diffNow()
-    const duration = (!props.allowNegative && diff.milliseconds < 0) ? Duration.fromMillis(0) : diff
-    return duration.toFormat(finalProps.format)
+    const diff = differenceInMilliseconds(props.until, new Date())
+    const duration = (!props.allowNegative && diff && diff < 0)
+      ? new Date(0)
+      : addMilliseconds(addHours(new Date(0), 16), diff)
+    return format(duration, finalProps.format)
   }, [finalProps.format, props.allowNegative, props.until])
 
   const [text, setText] = useState(generateLabelText())

src/utils/dateFormatter.ts

@@ -1,4 +1,4 @@
-import { DateTime } from "luxon"
+import { format } from 'date-fns'
 
 export type DateFormatterLocale =
   | 'zh-CN' | 'zh-TW'
@@ -6,7 +6,7 @@ export type DateFormatterLocale =
 
 
 
-const formatHelper = (format: string) => (d: Date) => DateTime.fromJSDate(d).toFormat(format)
+const formatHelper = (f: string) => (d: Date) => format(d, f)
 const chineseWeekHelper1 = (weekday: number) => {
   switch(weekday) {
     case 1: return "星期一"

src/utils/timeFormatter.ts

@@ -1,10 +1,10 @@
-import { DateTime } from "luxon"
+import { format } from 'date-fns'
 
 export type TimeFormatterLocale =
   | 'zh-CN' | 'zh-TW'
   | 'en-US'
 
-const formatHelper = (format: string) => (d: Date) => DateTime.fromJSDate(d).toFormat(format)
+const formatHelper = (f: string) => (d: Date) => format(d, f)
 
 const chineseCapitalNumber = ['〇', '一', '二', '三', '四', '五', '六', '七', '八', '九']
 const chineseCapitalHourSecondHelper = (value: number) => {

stories/Label.stories.mdx

@@ -1,7 +1,7 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
 import { MoneyLabel, DateLabel, TimeLabel, CountdownLabel, NumberAbbrLabel } from '../src';
 import { useState } from 'react';
-import { DateTime } from 'luxon';
+import { addHours } from 'date-fns'
 
 <Meta title="组件/文本标签 Label" components={{ MoneyLabel, DateLabel, TimeLabel }} />
 
@@ -115,7 +115,7 @@ import { DateTime } from 'luxon';
 <Canvas>
   <Story name="CountdownLabel">
     {() => {
-      const until = DateTime.local().plus({ hours: 12 }).toJSDate()
+      const until = addHours(new Date(), 12)
       return (
         <div className="flex flex-col">
           <CountdownLabel until={until} format={'hh:mm:ss'} />

yarn.lock

@@ -3022,11 +3022,6 @@
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.164.tgz#52348bcf909ac7b4c1bcbeda5c23135176e5dfa0"
   integrity sha512-fXCEmONnrtbYUc5014avwBeMdhHHO8YJCkOBflUL9EoJBSKZ1dei+VO74fA7JkTHZ1GvZack2TyIw5U+1lT8jg==
 
-"@types/luxon@^1.21.0":
-  version "1.22.0"
-  resolved "https://registry.yarnpkg.com/@types/luxon/-/luxon-1.22.0.tgz#dbdf2cc7ba3dfce98c57a3f0e003791122cba009"
-  integrity sha512-riAvdx85rU7OXCrjW3f7dIf7fuJDrxck2Dkjd0weh6ul7q+wumrwe6+/tD8v7yOKnZAuEnTFF4FU7b+5W/I3bw==
-
 "@types/markdown-to-jsx@^6.11.0":
   version "6.11.3"
   resolved "https://registry.yarnpkg.com/@types/markdown-to-jsx/-/markdown-to-jsx-6.11.3.tgz#cdd1619308fecbc8be7e6a26f3751260249b020e"
@@ -6253,6 +6248,11 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
+date-fns@^2.16.1:
+  version "2.16.1"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.16.1.tgz#05775792c3f3331da812af253e1a935851d3834b"
+  integrity sha512-sAJVKx/FqrLYHAQeN7VpJrPhagZc9R4ImZIWYRFZaaohR3KzmuK88touwsSwSVT8Qcbd4zoDsnGfX4GFB4imyQ==
+
 date-time@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/date-time/-/date-time-2.1.0.tgz#0286d1b4c769633b3ca13e1e62558d2dbdc2eba2"
@@ -11039,11 +11039,6 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
-luxon@^1.22.0:
-  version "1.25.0"
-  resolved "https://registry.yarnpkg.com/luxon/-/luxon-1.25.0.tgz#d86219e90bc0102c0eb299d65b2f5e95efe1fe72"
-  integrity sha512-hEgLurSH8kQRjY6i4YLey+mcKVAWXbDNlZRmM6AgWDJ1cY3atl8Ztf5wEY7VBReFbmGnwQPz7KYJblL8B2k0jQ==
-
 macos-release@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/macos-release/-/macos-release-2.3.0.tgz#eb1930b036c0800adebccd5f17bc4c12de8bb71f"