@internetarchive/collection-browser 0.0.1-alpha.1

package/src/utils/format-count.ts

@@ -0,0 +1,95 @@
+/*
+ * Replaces Petabox www/common/Util::number_format()
+ * For positive numbers only.
+ */
+import { msg, str } from '@lit/localize';
+
+export type NumberFormat =
+  | 'short' // 1.2 [K | thousand]
+  | 'long'; // 1,200 [No label for numbers < 1,000,000]
+export type LabelFormat =
+  | 'short' // [1.2]K
+  | 'long'; // [1.2] thousand
+type Divisor = 1_000_000_000 | 1_000_000 | 1_000 | 1;
+
+/**
+ * Return the magnitude of a number.
+ */
+function magnitude(number: number, numberFormat: NumberFormat): Divisor {
+  let divisor: Divisor = 1;
+  if (number >= 1_000_000_000) {
+    divisor = 1_000_000_000;
+  } else if (number >= 1_000_000) {
+    divisor = 1_000_000;
+  } else if (number >= 1_000 && numberFormat === 'short') {
+    divisor = 1_000;
+  }
+  return divisor;
+}
+
+/**
+ * Round a number given passed magnitude.
+ * Significant digits of value less than 10 get a decimal.
+ */
+function round(number: number = 0, divisor: Divisor): number {
+  const result = number / divisor;
+  const roundToOne = result < 10;
+  let rounded: number = 0;
+  if (roundToOne) {
+    rounded = Math.round((result + Number.EPSILON) * 10) / 10;
+  } else {
+    rounded = Math.round(result);
+  }
+  return rounded;
+}
+
+/**
+ * Return a label for a number and format.
+ */
+function labelize(
+  rounded: number,
+  divisor: Divisor,
+  format: LabelFormat,
+  locale: string
+): string {
+  switch (divisor) {
+    case 1_000_000_000:
+      if (format === 'short') {
+        return msg(str`${rounded}B`);
+      }
+      return msg(str`${rounded} billion`);
+    case 1_000_000:
+      if (format === 'short') {
+        return msg(str`${rounded}M`);
+      }
+      return msg(str`${rounded} million`);
+    case 1_000:
+      if (format === 'short') {
+        return msg(str`${rounded}K`);
+      }
+      return msg(str`${rounded} thousand`);
+
+    default:
+      return new Intl.NumberFormat(locale).format(rounded);
+  }
+}
+
+/**
+ * Format a "count" number into short "icon" or longer text string.
+ * For positive numbers only.
+ */
+export function formatCount(
+  count: number | undefined,
+  numberFormat: NumberFormat = 'long',
+  labelFormat: LabelFormat = 'short',
+  locale: string = 'en-US'
+): string {
+  // Return blank if undefined
+  const number = count ?? -1;
+  if (number < 0) {
+    return '';
+  }
+  const divisor = magnitude(number, numberFormat);
+  const rounded = round(number, divisor);
+  return labelize(rounded, divisor, labelFormat, locale);
+}

package/src/utils/format-date.ts

@@ -0,0 +1,36 @@
+/*
+ * Display date
+ * Override browser timezone to always display same date as in data
+ */
+export type DateFormat =
+  | 'short' // 12/20
+  | 'long'; // Dec 20, 2020
+
+export function formatDate(
+  date: Date | undefined,
+  format: DateFormat = 'short',
+  locale: string = 'en-US'
+): string {
+  // Return blank if undefined
+  if (!date) return '';
+
+  const options: Intl.DateTimeFormatOptions = {
+    timeZone: 'UTC', // Override browser timezone
+  };
+  switch (format) {
+    case 'short':
+      options.month = '2-digit';
+      options.year = '2-digit';
+      break;
+    case 'long':
+      options.year = 'numeric';
+      options.month = 'short';
+      options.day = '2-digit';
+      break;
+    default:
+      break;
+  }
+
+  const dateFormatter = new Intl.DateTimeFormat(locale, options);
+  return dateFormatter.format(date);
+}

package/test/collection-browser.test.ts

@@ -0,0 +1 @@
+describe('YourWebComponent', () => {});

package/test/utils/format-count.test.ts

@@ -0,0 +1,32 @@
+import { expect } from '@open-wc/testing';
+import { formatCount } from '../../src/utils/format-count';
+
+const testCount = 805342;
+
+describe('formatCount', () => {
+  it('returns blank when undefined number', () => {
+    expect(formatCount(undefined)).to.equal('');
+  });
+
+  it('returns blank when negative number', () => {
+    expect(formatCount(testCount * -1)).to.equal('');
+  });
+
+  it('returns long number when no NumberFormat', () => {
+    expect(formatCount(testCount)).to.equal('805,342');
+  });
+
+  it('returns short number when short NumberFormat', () => {
+    expect(formatCount(testCount, 'short')).to.equal('805K');
+  });
+
+  it('returns decimal when value of significant digits < 10', () => {
+    expect(formatCount(testCount * 10, 'short', 'long')).to.equal(
+      '8.1 million'
+    );
+  });
+
+  it('returns locale formatted number', () => {
+    expect(formatCount(testCount, 'long', 'long', 'de-DE')).to.equal('805.342');
+  });
+});

package/test/utils/format-date.test.ts

@@ -0,0 +1,22 @@
+import { expect } from '@open-wc/testing';
+import { formatDate } from '../../src/utils/format-date';
+
+const testDate = new Date(Date.UTC(2020, 11, 9));
+
+describe('formatDate', () => {
+  it('returns blank when undefined date', () => {
+    expect(formatDate(undefined)).to.equal('');
+  });
+
+  it('returns short date when no DateFormat', () => {
+    expect(formatDate(testDate)).to.equal('12/20');
+  });
+
+  it('returns long date when long DateFormat', () => {
+    expect(formatDate(testDate, 'long')).to.equal('Dec 09, 2020');
+  });
+
+  it('returns locale formatted date', () => {
+    expect(formatDate(testDate, 'long', 'de-DE')).to.equal('09. Dez. 2020');
+  });
+});

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es2018",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "lib": ["es2017", "dom"],
+    "strict": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "outDir": "dist",
+    "sourceMap": true,
+    "inlineSources": true,
+    "rootDir": "./",
+    "declaration": true
+  },
+  "include": ["**/*.ts"]
+}

package/web-dev-server.config.mjs

@@ -0,0 +1,28 @@
+// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
+
+/** Use Hot Module replacement by adding --hmr to the start command */
+const hmr = process.argv.includes('--hmr');
+
+export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
+  nodeResolve: true,
+  open: '/demo/',
+  watch: !hmr,
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto'
+
+  /** Set appIndex to enable SPA routing */
+  // appIndex: 'demo/index.html',
+
+  /** Confgure bare import resolve plugin */
+  // nodeResolve: {
+  //   exportConditions: ['browser', 'development']
+  // },
+
+  plugins: [
+    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
+    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
+  ],
+
+  // See documentation for all available options
+});

package/web-test-runner.config.mjs

@@ -0,0 +1,41 @@
+// import { playwrightLauncher } from '@web/test-runner-playwright';
+
+const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
+
+export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
+  /** Test files to run */
+  files: 'dist/test/**/*.test.js',
+
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
+
+  /** Filter out lit dev mode logs */
+  filterBrowserLogs(log) {
+    for (const arg of log.args) {
+      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
+        return false;
+      }
+    }
+    return true;
+  },
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto',
+
+  /** Amount of browsers to run concurrently */
+  // concurrentBrowsers: 2,
+
+  /** Amount of test files per browser to test concurrently */
+  // concurrency: 1,
+
+  /** Browsers to run tests on */
+  // browsers: [
+  //   playwrightLauncher({ product: 'chromium' }),
+  //   playwrightLauncher({ product: 'firefox' }),
+  //   playwrightLauncher({ product: 'webkit' }),
+  // ],
+
+  // See documentation for all available options
+});