WIP: Relative time component

packages/uui-base/lib/utils/index.ts

@@ -1,3 +1,4 @@
+export * from './Duration';
 export * from './Timer';
 export * from './demandCustomElement';
 export * from './drag';

packages/uui-relative-time/README.md

@@ -0,0 +1,31 @@
+# uui-relative-time
+
+![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-relative-time?logoColor=%231B264F)
+
+Umbraco style relative-time component.
+
+## Installation
+
+### ES imports
+
+```zsh
+npm i @umbraco-ui/uui-relative-time
+```
+
+Import the registration of `<uui-relative-time>` via:
+
+```javascript
+import '@umbraco-ui/uui-relative-time';
+```
+
+When looking to leverage the `UUIRelativeTimeElement` base class as a type and/or for extension purposes, do so via:
+
+```javascript
+import { UUIRelativeTimeElement } from '@umbraco-ui/uui-relative-time';
+```
+
+## Usage
+
+```html
+<uui-relative-time></uui-relative-time>
+```

packages/uui-relative-time/lib/index.ts

@@ -0,0 +1 @@
+export * from './uui-relative-time.element';

packages/uui-relative-time/lib/uui-relative-time.story.ts

@@ -0,0 +1,126 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+import './uui-relative-time.element';
+import type { UUIRelativeTimeElement } from './uui-relative-time.element';
+import readme from '../README.md?raw';
+
+const meta: Meta<UUIRelativeTimeElement> = {
+  id: 'uui-relative-time',
+  title: 'Displays/Relative Time',
+  component: 'uui-relative-time',
+  parameters: {
+    readme: { markdown: readme },
+    docs: {
+      source: {
+        code: `<uui-relative-time></uui-relative-time>`,
+      },
+    },
+  },
+};
+
+const now = new Date();
+
+const yesterday = new Date(now);
+yesterday.setDate(now.getDate() - 1);
+
+const tomorrow = new Date(now);
+tomorrow.setDate(now.getDate() + 1);
+
+const daysAgo = new Date(now);
+daysAgo.setDate(now.getDate() - 15);
+
+const monthsAgo = new Date(now);
+monthsAgo.setMonth(now.getMonth() - 3);
+
+const format = ['duration', 'relative', 'datetime'];
+const tense = ['auto', 'past', 'future'];
+const precision = [
+  'year',
+  'month',
+  'week',
+  'day',
+  'hour',
+  'minute',
+  'second',
+  'millisecond',
+];
+
+export default meta;
+type Story = StoryObj<UUIRelativeTimeElement>;
+
+const Template: Story = {
+  render: (args: any) => html`
+    <uui-relative-time
+      datetime="${args.datetime}"
+      format="${args.format}"
+      tense="${args.tense}"
+      precision="${args.precision}"
+      >February 16th, 2005</uui-relative-time
+    >
+  `,
+  args: {
+    datetime: '2005-02-16T16:30:00-08:00',
+    format: 'relative',
+    tense: 'auto',
+    precision: 'second',
+  },
+  argTypes: {
+    datetime: { control: 'date' },
+    tense: {
+      options: tense,
+      control: { type: 'select' },
+    },
+    format: {
+      options: format,
+      control: { type: 'select' },
+    },
+    precision: {
+      options: precision,
+      control: { type: 'select' },
+    },
+  },
+};
+
+export const Overview: Story = {
+  ...Template,
+  args: { datetime: '2005-02-16T16:30:00-08:00' },
+};
+
+export const Yesterday: Story = {
+  ...Template,
+  args: {
+    datetime: yesterday.toISOString(),
+    format: 'relative',
+    precision: 'day',
+    tense: 'past',
+  },
+};
+
+export const Tomorrow: Story = {
+  ...Template,
+  args: {
+    datetime: tomorrow.toISOString(),
+    format: 'relative',
+    tense: 'auto',
+  },
+};
+
+export const DaysAgo: Story = {
+  ...Template,
+  args: {
+    datetime: daysAgo.toISOString(),
+    format: 'relative',
+    precision: 'day',
+    tense: 'past',
+  },
+};
+
+export const MonthsAgo: Story = {
+  ...Template,
+  args: {
+    datetime: monthsAgo.toISOString(),
+    format: 'relative',
+    tense: 'past',
+  },
+};

packages/uui-relative-time/lib/uui-relative-time.test.ts

@@ -0,0 +1,18 @@
+import { html, fixture, expect } from '@open-wc/testing';
+import { UUIRelativeTimeElement } from './uui-relative-time.element';
+
+describe('UUIRelativeTimeElement', () => {
+  let element: UUIRelativeTimeElement;
+
+  beforeEach(async () => {
+    element = await fixture(html` <uui-relative-time></uui-relative-time> `);
+  });
+
+  it('is defined with its own instance', () => {
+    expect(element).to.be.instanceOf(UUIRelativeTimeElement);
+  });
+
+  it('passes the a11y audit', async () => {
+    await expect(element).shadowDom.to.be.accessible();
+  });
+});

packages/uui-relative-time/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@umbraco-ui/uui-relative-time",
+  "version": "0.0.0",
+  "license": "MIT",
+  "keywords": [
+    "Umbraco",
+    "Custom elements",
+    "Web components",
+    "UI",
+    "Lit",
+    "Relative Time"
+  ],
+  "description": "Umbraco UI relative-time component",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/umbraco/Umbraco.UI.git",
+    "directory": "packages/uui-relative-time"
+  },
+  "bugs": {
+    "url": "https://github.com/umbraco/Umbraco.UI/issues"
+  },
+  "main": "./lib/index.js",
+  "module": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "type": "module",
+  "customElements": "custom-elements.json",
+  "files": [
+    "lib/**/*.d.ts",
+    "lib/**/*.js",
+    "custom-elements.json"
+  ],
+  "dependencies": {
+    "@umbraco-ui/uui-base": "1.9.0-rc.1"
+  },
+  "scripts": {
+    "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
+    "clean": "tsc --build --clean && rimraf -g dist lib/*.js lib/**/*.js *.tgz lib/**/*.d.ts custom-elements.json",
+    "analyze": "web-component-analyzer **/*.element.ts --outFile custom-elements.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://uui.umbraco.com/?path=/story/uui-relative-time"
+}

packages/uui-relative-time/rollup.config.js

@@ -0,0 +1,5 @@
+import { UUIProdConfig } from '../rollup-package.config.mjs';
+
+export default UUIProdConfig({
+  entryPoints: ['index'],
+});

packages/uui-relative-time/tsconfig.json

@@ -0,0 +1,17 @@
+// Don't edit this file directly. It is generated by /scripts/generate-ts-config.js
+
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./lib",
+    "rootDir": "./lib",
+    "composite": true
+  },
+  "include": ["./**/*.ts"],
+  "exclude": ["./**/*.test.ts", "./**/*.story.ts"],
+  "references": [
+    {
+      "path": "../uui-base"
+    }
+  ]
+}

packages/uui/lib/index.ts

@@ -80,3 +80,5 @@ export * from '@umbraco-ui/uui-toast-notification-layout/lib';
 export * from '@umbraco-ui/uui-toast-notification/lib';
 export * from '@umbraco-ui/uui-toggle/lib';
 export * from '@umbraco-ui/uui-visually-hidden/lib';
+
+export * from '@umbraco-ui/uui-relative-time/lib/index.js';