Merge pull request #30 from ndom91/feat/snowpack-dev

feat: move from webpack to snowpack devenv

.github/workflows/tests.yml

@@ -9,23 +9,5 @@ jobs:
         uses: actions/setup-node@v2
         with:
           node-version: '14'
-      - run: yarn install
-      - run: yarn test:ci
-      - name: Tests ✅
-        if: ${{ success() }}
-        run: |
-          curl --request POST           --url https://api.github.com/repos/${{ github.repository }}/statuses/${{ github.sha }}           --header 'authorization: Bearer ${{ secrets.GITHUB_TOKEN }}'           --header 'content-type: application/json'           --data '{
-            "context": "tests",
-            "state": "success",
-            "description": "Tests passed",
-            "target_url": "https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}"
-          }'
-      - name: Tests 🚨
-        if: ${{ failure() }}
-        run: |
-          curl --request POST           --url https://api.github.com/repos/${{ github.repository }}/statuses/${{ github.sha }}           --header 'authorization: Bearer ${{ secrets.GITHUB_TOKEN }}'           --header 'content-type: application/json'           --data '{
-            "context": "tests",
-            "state": "failure",
-            "description": "Tests failed",
-            "target_url": "https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}"
-          }'
+      - run: npm install
+      - run: npm run test:ci

.gitignore

@@ -1,2 +1,4 @@
 node_modules/
 dist/
+example/.snowpack
+example/node_modules

.npmignore

@@ -1,4 +1,5 @@
 example/
-webpack.config.js
 tsconfig.json
-.gitignore
+.gitignore
+jest.config.js
+.github

example/.npmignore

@@ -0,0 +1,2 @@
+.build
+build

example/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all"
+}

example/build/_snowpack/env.js

@@ -0,0 +1,3 @@
+export const MODE = "production";
+export const NODE_ENV = "production";
+export const SSR = false;

example/build/_snowpack/link/react-timezone-select/src/index.js

@@ -0,0 +1,182 @@
+import React from "../../../pkg/react";
+import Select from "../../../pkg/react-select";
+import spacetime from "../../../pkg/spacetime";
+import {display} from "../../../pkg/spacetime-informal";
+export const i18nTimezones = {
+  "Pacific/Midway": "Midway Island, Samoa",
+  "Pacific/Honolulu": "Hawaii",
+  "America/Juneau": "Alaska",
+  "America/Boise": "Mountain Time",
+  "America/Dawson": "Dawson, Yukon",
+  "America/Chihuahua": "Chihuahua, La Paz, Mazatlan",
+  "America/Phoenix": "Arizona",
+  "America/Chicago": "Central Time",
+  "America/Regina": "Saskatchewan",
+  "America/Mexico_City": "Guadalajara, Mexico City, Monterrey",
+  "America/Belize": "Central America",
+  "America/Detroit": "Eastern Time",
+  "America/Bogota": "Bogota, Lima, Quito",
+  "America/Caracas": "Caracas, La Paz",
+  "America/Santiago": "Santiago",
+  "America/St_Johns": "Newfoundland and Labrador",
+  "America/Sao_Paulo": "Brasilia",
+  "America/Tijuana": "Tijuana, Pacific Time",
+  "America/Argentina/Buenos_Aires": "Buenos Aires, Georgetown",
+  "America/Godthab": "Greenland",
+  "Atlantic/Azores": "Azores",
+  "Atlantic/Cape_Verde": "Cape Verde Islands",
+  GMT: "UTC",
+  "Europe/London": "Edinburgh, London",
+  "Europe/Dublin": "Dublin",
+  "Europe/Lisbon": "Lisbon",
+  "Africa/Casablanca": "Casablanca, Monrovia",
+  "Atlantic/Canary": "Canary Islands",
+  "Europe/Belgrade": "Belgrade, Bratislava, Budapest, Ljubljana, Prague",
+  "Europe/Sarajevo": "Sarajevo, Skopje, Warsaw, Zagreb",
+  "Europe/Brussels": "Brussels, Copenhagen, Madrid, Paris",
+  "Europe/Amsterdam": "Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna",
+  "Africa/Algiers": "West Central Africa",
+  "Europe/Bucharest": "Bucharest",
+  "Africa/Cairo": "Cairo",
+  "Europe/Helsinki": "Helsinki, Kiev, Riga, Sofia, Tallinn, Vilnius",
+  "Europe/Athens": "Athens, Istanbul, Minsk",
+  "Asia/Jerusalem": "Jerusalem",
+  "Africa/Harare": "Harare, Pretoria",
+  "Europe/Moscow": "Moscow, St. Petersburg, Volgograd",
+  "Asia/Kuwait": "Kuwait, Riyadh",
+  "Africa/Nairobi": "Nairobi",
+  "Asia/Baghdad": "Baghdad",
+  "Asia/Tehran": "Tehran",
+  "Asia/Dubai": "Abu Dhabi, Muscat",
+  "Asia/Baku": "Baku, Tbilisi, Yerevan",
+  "Asia/Kabul": "Kabul",
+  "Asia/Yekaterinburg": "Ekaterinburg",
+  "Asia/Karachi": "Islamabad, Karachi, Tashkent",
+  "Asia/Kolkata": "Chennai, Kolkata, Mumbai, New Delhi",
+  "Asia/Kathmandu": "Kathmandu",
+  "Asia/Dhaka": "Astana, Dhaka",
+  "Asia/Colombo": "Sri Jayawardenepura",
+  "Asia/Almaty": "Almaty, Novosibirsk",
+  "Asia/Rangoon": "Yangon Rangoon",
+  "Asia/Bangkok": "Bangkok, Hanoi, Jakarta",
+  "Asia/Krasnoyarsk": "Krasnoyarsk",
+  "Asia/Shanghai": "Beijing, Chongqing, Hong Kong SAR, Urumqi",
+  "Asia/Kuala_Lumpur": "Kuala Lumpur, Singapore",
+  "Asia/Taipei": "Taipei",
+  "Australia/Perth": "Perth",
+  "Asia/Irkutsk": "Irkutsk, Ulaanbaatar",
+  "Asia/Seoul": "Seoul",
+  "Asia/Tokyo": "Osaka, Sapporo, Tokyo",
+  "Asia/Yakutsk": "Yakutsk",
+  "Australia/Darwin": "Darwin",
+  "Australia/Adelaide": "Adelaide",
+  "Australia/Sydney": "Canberra, Melbourne, Sydney",
+  "Australia/Brisbane": "Brisbane",
+  "Australia/Hobart": "Hobart",
+  "Asia/Vladivostok": "Vladivostok",
+  "Pacific/Guam": "Guam, Port Moresby",
+  "Asia/Magadan": "Magadan, Solomon Islands, New Caledonia",
+  "Asia/Kamchatka": "Kamchatka, Marshall Islands",
+  "Pacific/Fiji": "Fiji Islands",
+  "Pacific/Auckland": "Auckland, Wellington",
+  "Pacific/Tongatapu": "Nuku'alofa"
+};
+export var LabelType;
+(function(LabelType2) {
+  LabelType2["ORIGINAL"] = "original";
+  LabelType2["ALTNAME"] = "altName";
+  LabelType2["ABBREV"] = "abbrev";
+})(LabelType || (LabelType = {}));
+const TimezoneSelect = ({
+  value,
+  onBlur,
+  onChange,
+  labelStyle = "original",
+  timezones = i18nTimezones,
+  ...props
+}) => {
+  const getOptions = React.useMemo(() => {
+    return Object.entries(timezones).reduce((selectOptions, zone) => {
+      const now = spacetime.now().goto(zone[0]);
+      const tz = now.timezone();
+      const tzStrings = display(zone[0]);
+      let label = "";
+      let abbrev = zone[0];
+      let altName = zone[0];
+      if (tzStrings && tzStrings.daylight && tzStrings.standard) {
+        abbrev = now.isDST() ? tzStrings.daylight.abbrev : tzStrings.standard.abbrev;
+        altName = now.isDST() ? tzStrings.daylight.name : tzStrings.standard.name;
+      }
+      const min = tz.current.offset * 60;
+      const hr = `${min / 60 ^ 0}:` + (min % 60 === 0 ? "00" : Math.abs(min % 60));
+      const prefix = `(GMT${hr.includes("-") ? hr : `+${hr}`}) ${zone[1]}`;
+      switch (labelStyle) {
+        case "original":
+          label = prefix;
+          break;
+        case "altName":
+          label = `${prefix} ${!altName.includes("/") ? `(${altName})` : ""}`;
+          break;
+        case "abbrev":
+          label = `${prefix} ${abbrev.length < 5 ? `(${abbrev})` : ""}`;
+          break;
+        default:
+          label = `${prefix}`;
+      }
+      selectOptions.push({
+        value: zone[0],
+        label,
+        offset: tz.current.offset,
+        abbrev,
+        altName
+      });
+      return selectOptions;
+    }, []).sort((a, b) => a.offset - b.offset);
+  }, [labelStyle, timezones]);
+  const handleChange = (tz) => {
+    onChange && onChange(tz);
+  };
+  const findFuzzyTz = (zone) => {
+    let currentTime;
+    try {
+      currentTime = spacetime.now(zone);
+    } catch (err) {
+      return;
+    }
+    return getOptions.filter((tz) => tz.offset === currentTime.timezone().current.offset).map((tz) => {
+      let score = 0;
+      if (currentTime.timezones[tz.value.toLowerCase()] && !!currentTime.timezones[tz.value.toLowerCase()].dst === currentTime.timezone().hasDst) {
+        if (tz.value.toLowerCase().indexOf(currentTime.tz.substr(currentTime.tz.indexOf("/") + 1)) !== -1) {
+          score += 8;
+        }
+        if (tz.label.toLowerCase().indexOf(currentTime.tz.substr(currentTime.tz.indexOf("/") + 1)) !== -1) {
+          score += 4;
+        }
+        if (tz.value.toLowerCase().indexOf(currentTime.tz.substr(0, currentTime.tz.indexOf("/")))) {
+          score += 2;
+        }
+        score += 1;
+      } else if (tz.value === "GMT") {
+        score += 1;
+      }
+      return {tz, score};
+    }).sort((a, b) => b.score - a.score).map(({tz, score}) => tz)[0];
+  };
+  const parseTimezone = (zone) => {
+    if (typeof zone === "object" && zone.value && zone.label)
+      return zone;
+    if (typeof zone === "string") {
+      return getOptions.find((tz) => tz.value === zone) || zone.indexOf("/") !== -1 && findFuzzyTz(zone);
+    } else if (zone.value && !zone.label) {
+      return getOptions.find((tz) => tz.value === zone.value);
+    }
+  };
+  return /* @__PURE__ */ React.createElement(Select, {
+    value: parseTimezone(value),
+    onChange: handleChange,
+    options: getOptions,
+    onBlur,
+    ...props
+  });
+};
+export default TimezoneSelect;

example/build/_snowpack/pkg/react

@@ -0,0 +1,16 @@
+/*
+ * Skypack CDN - [email protected]
+ *
+ * Learn more:
+ *   📙 Package Documentation: https://www.skypack.dev/view/react
+ *   📘 Skypack Documentation: https://www.skypack.dev/docs
+ *
+ * Pinned URL: (Optimized for Production)
+ *   ▶️ Normal: https://cdn.skypack.dev/pin/[email protected]/mode=imports/optimized/react.js
+ *   ⏩ Minified: https://cdn.skypack.dev/pin/[email protected]/mode=imports,min/optimized/react.js
+ *
+ */
+
+// Browser-Optimized Imports (Don't directly import the URLs below in your application!)
+export * from '/_snowpack/pkg/-/[email protected]/dist=es2020,mode=imports/optimized/react.js';
+export {default} from '/_snowpack/pkg/-/[email protected]/dist=es2020,mode=imports/optimized/react.js';

example/build/_snowpack/pkg/react-dom

@@ -0,0 +1,16 @@
+/*
+ * Skypack CDN - [email protected]
+ *
+ * Learn more:
+ *   📙 Package Documentation: https://www.skypack.dev/view/react-dom
+ *   📘 Skypack Documentation: https://www.skypack.dev/docs
+ *
+ * Pinned URL: (Optimized for Production)
+ *   ▶️ Normal: https://cdn.skypack.dev/pin/[email protected]/mode=imports/optimized/react-dom.js
+ *   ⏩ Minified: https://cdn.skypack.dev/pin/[email protected]/mode=imports,min/optimized/react-dom.js
+ *
+ */
+
+// Browser-Optimized Imports (Don't directly import the URLs below in your application!)
+export * from '/_snowpack/pkg/-/[email protected]/dist=es2020,mode=imports/optimized/react-dom.js';
+export {default} from '/_snowpack/pkg/-/[email protected]/dist=es2020,mode=imports/optimized/react-dom.js';

example/build/_snowpack/pkg/react-select

@@ -0,0 +1,16 @@
+/*
+ * Skypack CDN - [email protected]
+ *
+ * Learn more:
+ *   📙 Package Documentation: https://www.skypack.dev/view/react-select
+ *   📘 Skypack Documentation: https://www.skypack.dev/docs
+ *
+ * Pinned URL: (Optimized for Production)
+ *   ▶️ Normal: https://cdn.skypack.dev/pin/[email protected]/mode=imports/optimized/react-select.js
+ *   ⏩ Minified: https://cdn.skypack.dev/pin/[email protected]/mode=imports,min/optimized/react-select.js
+ *
+ */
+
+// Browser-Optimized Imports (Don't directly import the URLs below in your application!)
+export * from '/_snowpack/pkg/-/[email protected]/dist=es2020,mode=imports/optimized/react-select.js';
+export {default} from '/_snowpack/pkg/-/[email protected]/dist=es2020,mode=imports/optimized/react-select.js';

example/build/_snowpack/pkg/spacetime

@@ -0,0 +1,16 @@
+/*
+ * Skypack CDN - [email protected]
+ *
+ * Learn more:
+ *   📙 Package Documentation: https://www.skypack.dev/view/spacetime
+ *   📘 Skypack Documentation: https://www.skypack.dev/docs
+ *
+ * Pinned URL: (Optimized for Production)
+ *   ▶️ Normal: https://cdn.skypack.dev/pin/[email protected]/mode=imports/optimized/spacetime.js
+ *   ⏩ Minified: https://cdn.skypack.dev/pin/[email protected]/mode=imports,min/optimized/spacetime.js
+ *
+ */
+
+// Browser-Optimized Imports (Don't directly import the URLs below in your application!)
+export * from '/_snowpack/pkg/-/[email protected]/dist=es2020,mode=imports/optimized/spacetime.js';
+export {default} from '/_snowpack/pkg/-/[email protected]/dist=es2020,mode=imports/optimized/spacetime.js';

example/build/_snowpack/pkg/spacetime-informal

@@ -0,0 +1,16 @@
+/*
+ * Skypack CDN - [email protected]
+ *
+ * Learn more:
+ *   📙 Package Documentation: https://www.skypack.dev/view/spacetime-informal
+ *   📘 Skypack Documentation: https://www.skypack.dev/docs
+ *
+ * Pinned URL: (Optimized for Production)
+ *   ▶️ Normal: https://cdn.skypack.dev/pin/[email protected]/mode=imports/optimized/spacetime-informal.js
+ *   ⏩ Minified: https://cdn.skypack.dev/pin/[email protected]/mode=imports,min/optimized/spacetime-informal.js
+ *
+ */
+
+// Browser-Optimized Imports (Don't directly import the URLs below in your application!)
+export * from '/_snowpack/pkg/-/[email protected]/dist=es2020,mode=imports/optimized/spacetime-informal.js';
+export {default} from '/_snowpack/pkg/-/[email protected]/dist=es2020,mode=imports/optimized/spacetime-informal.js';

example/src/index.html → example/build/index.html

@@ -2,18 +2,14 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+      name="description"
+      content="Snowpack react-timezone-select demo app"
     />
-    <meta name="theme-color" content="#000000" />
-    <!--
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
-    -->
-    <title>Example | react-timezone-select</title>
+    <title>react-timezone-select</title>
   </head>
-
   <body>
     <a
       href="https://github.com/ndom91/react-timezone-select"
@@ -74,7 +70,18 @@
         }
       }
     </style>
-    <noscript> You need to enable JavaScript to run this app. </noscript>
     <div id="root"></div>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <script type="module" src="/dist/index.js"></script>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
   </body>
 </html>