From 5eb6939ad5a291a1f440391ffcce01a48ca952ee Mon Sep 17 00:00:00 2001 From: Keith Cirkel Date: Tue, 6 Dec 2022 18:28:02 +0000 Subject: [PATCH] Create RelativeTime component (#2484) * Create RelativeTime component Co-authored-by: Keith Cirkel * add tests for RelativeTime * add fallback to class prop for checkStylesDeep class props will still render out correctly * add snapshots * add missing index file * add changeset * upgrade time-elements to latest * add more story examples for relativetime * add time-elements and lit-labs/react to rollup ESM_ONLY * update snapshot tests * add custom-elements polyfill for SSR * prettier * prettier * bump @github/time-elements to v3.4.1 * add event stub * drop event stub * move polyfill locally to component * upgrade time-elements to latest * remove redundant custom-element polyfill * Run ./script/setup * add RelativeTime docs * add RelativeTime docs link in nav * fix up relativetime docs * docs: make `datetime` a required prop * docs: drop `string` from format type * docs: make month defaultValue be numeric * upgrade from time-elements@3 to relative-time-element@4 Co-authored-by: Cole Bemis --- .changeset/giant-mails-battle.md | 5 + docs/content/RelativeTime.mdx | 143 +++++++++++++++ docs/package-lock.json | 173 ++++-------------- .../src/@primer/gatsby-theme-doctocat/nav.yml | 2 + examples/nextjs/package-lock.json | 112 ++++++------ jest.config.js | 2 +- package-lock.json | 22 +++ package.json | 2 + rollup.config.js | 8 +- src/RelativeTime/RelativeTime.stories.tsx | 158 ++++++++++++++++ src/RelativeTime/RelativeTime.tsx | 11 ++ src/RelativeTime/index.ts | 2 + src/__tests__/RelativeTime.test.tsx | 24 +++ .../__snapshots__/RelativeTime.test.tsx.snap | 8 + .../__snapshots__/exports.test.ts.snap | 1 + src/index.ts | 2 + src/utils/test-matchers.tsx | 2 +- 17 files changed, 484 insertions(+), 193 deletions(-) create mode 100644 .changeset/giant-mails-battle.md create mode 100644 docs/content/RelativeTime.mdx create mode 100644 src/RelativeTime/RelativeTime.stories.tsx create mode 100644 src/RelativeTime/RelativeTime.tsx create mode 100644 src/RelativeTime/index.ts create mode 100644 src/__tests__/RelativeTime.test.tsx create mode 100644 src/__tests__/__snapshots__/RelativeTime.test.tsx.snap diff --git a/.changeset/giant-mails-battle.md b/.changeset/giant-mails-battle.md new file mode 100644 index 00000000000..4a4be5ebf98 --- /dev/null +++ b/.changeset/giant-mails-battle.md @@ -0,0 +1,5 @@ +--- +'@primer/react': minor +--- + +Add RelativeTime component diff --git a/docs/content/RelativeTime.mdx b/docs/content/RelativeTime.mdx new file mode 100644 index 00000000000..1af34cd40d0 --- /dev/null +++ b/docs/content/RelativeTime.mdx @@ -0,0 +1,143 @@ +--- +componentId: relative-time +title: RelativeTime +status: Alpha +source: https://github.com/primer/react/blob/main/src/RelativeTime.tsx +--- + +```js +import {RelativeTime} from '@primer/react' +``` + +Formats a timestamp as a localized string or as relative text that auto-updates in the user's browser. + +## Examples + +### Default + +```jsx live +<> + +
+ +
+ + +``` + +## Props + +### RelativeTime + + + + + + + + + + + + + + + + + + @github/relative-time-element + } + /> + + +## Status + + diff --git a/docs/package-lock.json b/docs/package-lock.json index 60dc6cee99c..bce1dedf91d 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -4848,36 +4848,6 @@ "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==" }, - "node_modules/babel-eslint": { - "version": "10.1.0", - "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz", - "integrity": "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==", - "deprecated": "babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.", - "peer": true, - "dependencies": { - "@babel/code-frame": "^7.0.0", - "@babel/parser": "^7.7.0", - "@babel/traverse": "^7.7.0", - "@babel/types": "^7.7.0", - "eslint-visitor-keys": "^1.0.0", - "resolve": "^1.12.0" - }, - "engines": { - "node": ">=6" - }, - "peerDependencies": { - "eslint": ">= 4.12.1" - } - }, - "node_modules/babel-eslint/node_modules/eslint-visitor-keys": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz", - "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==", - "peer": true, - "engines": { - "node": ">=4" - } - }, "node_modules/babel-jest": { "version": "24.9.0", "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-24.9.0.tgz", @@ -23962,19 +23932,6 @@ "is-typedarray": "^1.0.0" } }, - "node_modules/typescript": { - "version": "4.8.4", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz", - "integrity": "sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==", - "peer": true, - "bin": { - "tsc": "bin/tsc", - "tsserver": "bin/tsserver" - }, - "engines": { - "node": ">=4.2.0" - } - }, "node_modules/unbox-primitive": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz", @@ -27489,8 +27446,7 @@ "ws": { "version": "7.4.5", "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.5.tgz", - "integrity": "sha512-xzyu3hFvomRfXKH8vOFMU3OguG6oOvhXMo3xsGy3xWExqaM2dxBbVxuD99O7m3ZUFMvvscsZDqxfgMaRr/Nr1g==", - "requires": {} + "integrity": "sha512-xzyu3hFvomRfXKH8vOFMU3OguG6oOvhXMo3xsGy3xWExqaM2dxBbVxuD99O7m3ZUFMvvscsZDqxfgMaRr/Nr1g==" } } }, @@ -27909,8 +27865,7 @@ "@mdx-js/react": { "version": "1.6.22", "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-1.6.22.tgz", - "integrity": "sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg==", - "requires": {} + "integrity": "sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg==" }, "@mdx-js/util": { "version": "1.6.22", @@ -28124,8 +28079,7 @@ "@primer/octicons-react": { "version": "17.7.0", "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-17.7.0.tgz", - "integrity": "sha512-rxJiArra+q7lorhzQH223btMcRR8di9TUei9DhQG18jmVEI+wQTY+MypI5FZqU8UyehBOtcnD4TWx+i4Zwpz5Q==", - "requires": {} + "integrity": "sha512-rxJiArra+q7lorhzQH223btMcRR8di9TUei9DhQG18jmVEI+wQTY+MypI5FZqU8UyehBOtcnD4TWx+i4Zwpz5Q==" }, "@primer/primitives": { "version": "4.1.0", @@ -28160,8 +28114,7 @@ "@primer/octicons-react": { "version": "16.1.1", "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-16.1.1.tgz", - "integrity": "sha512-xCxQ5z23ol7yDuJs85Lc4ARzyoay+b3zOhAKkEMU7chk0xi2hT2OnRP23QUudNNDPTGozX268RGYLexUa6P4xw==", - "requires": {} + "integrity": "sha512-xCxQ5z23ol7yDuJs85Lc4ARzyoay+b3zOhAKkEMU7chk0xi2hT2OnRP23QUudNNDPTGozX268RGYLexUa6P4xw==" }, "@primer/primitives": { "version": "7.6.0", @@ -28173,8 +28126,7 @@ "@radix-ui/react-polymorphic": { "version": "0.0.14", "resolved": "https://registry.npmjs.org/@radix-ui/react-polymorphic/-/react-polymorphic-0.0.14.tgz", - "integrity": "sha512-9nsMZEDU3LeIUeHJrpkkhZVxu/9Fc7P2g2I3WR+uA9mTbNC3hGaabi0dV6wg0CfHb+m4nSs1pejbE/5no3MJTA==", - "requires": {} + "integrity": "sha512-9nsMZEDU3LeIUeHJrpkkhZVxu/9Fc7P2g2I3WR+uA9mTbNC3hGaabi0dV6wg0CfHb+m4nSs1pejbE/5no3MJTA==" }, "@react-aria/ssr": { "version": "3.1.0", @@ -29308,8 +29260,7 @@ "acorn-jsx": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.1.tgz", - "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==", - "requires": {} + "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==" }, "acorn-walk": { "version": "6.2.0", @@ -29344,14 +29295,12 @@ "ajv-errors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz", - "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==", - "requires": {} + "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==" }, "ajv-keywords": { "version": "3.5.2", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", - "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", - "requires": {} + "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==" }, "alphanum-sort": { "version": "1.0.2", @@ -29707,28 +29656,6 @@ "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==" }, - "babel-eslint": { - "version": "10.1.0", - "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz", - "integrity": "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==", - "peer": true, - "requires": { - "@babel/code-frame": "^7.0.0", - "@babel/parser": "^7.7.0", - "@babel/traverse": "^7.7.0", - "@babel/types": "^7.7.0", - "eslint-visitor-keys": "^1.0.0", - "resolve": "^1.12.0" - }, - "dependencies": { - "eslint-visitor-keys": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz", - "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==", - "peer": true - } - } - }, "babel-jest": { "version": "24.9.0", "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-24.9.0.tgz", @@ -29900,8 +29827,7 @@ "babel-plugin-remove-graphql-queries": { "version": "2.16.1", "resolved": "https://registry.npmjs.org/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-2.16.1.tgz", - "integrity": "sha512-PkHJuRodMp4p617a/ZVhV8elBhRoFpOTpdu2DaApXJFIsDJWhjZ8d4BGbbFCT/yKJrhRDTdqg1r5AhWEaEUKkw==", - "requires": {} + "integrity": "sha512-PkHJuRodMp4p617a/ZVhV8elBhRoFpOTpdu2DaApXJFIsDJWhjZ8d4BGbbFCT/yKJrhRDTdqg1r5AhWEaEUKkw==" }, "babel-plugin-styled-components": { "version": "2.0.2", @@ -31834,8 +31760,7 @@ "cssnano-utils": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-2.0.1.tgz", - "integrity": "sha512-i8vLRZTnEH9ubIyfdZCAdIdgnHAUeQeByEeQ2I7oTilvP9oHO6RScpeq3GsFUVqeB8uZgOQ9pw8utofNn32hhQ==", - "requires": {} + "integrity": "sha512-i8vLRZTnEH9ubIyfdZCAdIdgnHAUeQeByEeQ2I7oTilvP9oHO6RScpeq3GsFUVqeB8uZgOQ9pw8utofNn32hhQ==" }, "csso": { "version": "4.2.0", @@ -32466,8 +32391,7 @@ "ws": { "version": "7.4.6", "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz", - "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==", - "requires": {} + "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==" } } }, @@ -32491,8 +32415,7 @@ "ws": { "version": "7.4.6", "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz", - "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==", - "requires": {} + "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==" } } }, @@ -33214,8 +33137,7 @@ "eslint-plugin-react-hooks": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz", - "integrity": "sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==", - "requires": {} + "integrity": "sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==" }, "eslint-scope": { "version": "5.1.1", @@ -34515,8 +34437,7 @@ "babel-plugin-remove-graphql-queries": { "version": "3.7.1", "resolved": "https://registry.npmjs.org/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-3.7.1.tgz", - "integrity": "sha512-9fANNkzCZJ0i65FXGnoeg/knDPC3riazCDyRrcH/2DVovxChAMSN2mqh/7eohJ8IrB/0e6cwLO4VirqanSk1Hw==", - "requires": {} + "integrity": "sha512-9fANNkzCZJ0i65FXGnoeg/knDPC3riazCDyRrcH/2DVovxChAMSN2mqh/7eohJ8IrB/0e6cwLO4VirqanSk1Hw==" }, "braces": { "version": "3.0.2", @@ -35889,8 +35810,7 @@ "ws": { "version": "7.5.0", "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.0.tgz", - "integrity": "sha512-6ezXvzOZupqKj4jUqbQ9tXuJNo+BR2gU8fFRk3XCP3e0G6WT414u5ELe6Y0vtp7kmSJ3F7YWObSNr1ESsgi4vw==", - "requires": {} + "integrity": "sha512-6ezXvzOZupqKj4jUqbQ9tXuJNo+BR2gU8fFRk3XCP3e0G6WT414u5ELe6Y0vtp7kmSJ3F7YWObSNr1ESsgi4vw==" } } }, @@ -36350,14 +36270,12 @@ "graphql-type-json": { "version": "0.3.2", "resolved": "https://registry.npmjs.org/graphql-type-json/-/graphql-type-json-0.3.2.tgz", - "integrity": "sha512-J+vjof74oMlCWXSvt0DOf2APEdZOCdubEvGDUAlqH//VBYcOYsGgRW7Xzorr44LvkjiuvecWc8fChxuZZbChtg==", - "requires": {} + "integrity": "sha512-J+vjof74oMlCWXSvt0DOf2APEdZOCdubEvGDUAlqH//VBYcOYsGgRW7Xzorr44LvkjiuvecWc8fChxuZZbChtg==" }, "graphql-ws": { "version": "4.9.0", "resolved": "https://registry.npmjs.org/graphql-ws/-/graphql-ws-4.9.0.tgz", - "integrity": "sha512-sHkK9+lUm20/BGawNEWNtVAeJzhZeBg21VmvmLoT5NdGVeZWv5PdIhkcayQIAgjSyyQ17WMKmbDijIPG2On+Ag==", - "requires": {} + "integrity": "sha512-sHkK9+lUm20/BGawNEWNtVAeJzhZeBg21VmvmLoT5NdGVeZWv5PdIhkcayQIAgjSyyQ17WMKmbDijIPG2On+Ag==" }, "gray-matter": { "version": "4.0.3", @@ -36886,8 +36804,7 @@ "icss-utils": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", - "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==", - "requires": {} + "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==" }, "ieee754": { "version": "1.2.1", @@ -37633,8 +37550,7 @@ "isomorphic-ws": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/isomorphic-ws/-/isomorphic-ws-4.0.1.tgz", - "integrity": "sha512-BhBvN2MBpWTaSHdWRb/bwdZJ1WaehQ2L1KngkCkfLUGF0mAWAT1sQUQacEmQ0jXkFw/czDXPNQSL5u2/Krsz1w==", - "requires": {} + "integrity": "sha512-BhBvN2MBpWTaSHdWRb/bwdZJ1WaehQ2L1KngkCkfLUGF0mAWAT1sQUQacEmQ0jXkFw/czDXPNQSL5u2/Krsz1w==" }, "isstream": { "version": "0.1.2", @@ -38059,8 +37975,7 @@ "jest-pnp-resolver": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz", - "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==", - "requires": {} + "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==" }, "jest-regex-util": { "version": "24.9.0", @@ -39129,8 +39044,7 @@ "meros": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/meros/-/meros-1.1.4.tgz", - "integrity": "sha512-E9ZXfK9iQfG9s73ars9qvvvbSIkJZF5yOo9j4tcwM5tN8mUKfj/EKN5PzOr3ZH0y5wL7dLAHw3RVEfpQV9Q7VQ==", - "requires": {} + "integrity": "sha512-E9ZXfK9iQfG9s73ars9qvvvbSIkJZF5yOo9j4tcwM5tN8mUKfj/EKN5PzOr3ZH0y5wL7dLAHw3RVEfpQV9Q7VQ==" }, "methods": { "version": "1.1.2", @@ -40434,32 +40348,27 @@ "postcss-discard-comments": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.0.1.tgz", - "integrity": "sha512-lgZBPTDvWrbAYY1v5GYEv8fEO/WhKOu/hmZqmCYfrpD6eyDWWzAOsl2rF29lpvziKO02Gc5GJQtlpkTmakwOWg==", - "requires": {} + "integrity": "sha512-lgZBPTDvWrbAYY1v5GYEv8fEO/WhKOu/hmZqmCYfrpD6eyDWWzAOsl2rF29lpvziKO02Gc5GJQtlpkTmakwOWg==" }, "postcss-discard-duplicates": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.0.1.tgz", - "integrity": "sha512-svx747PWHKOGpAXXQkCc4k/DsWo+6bc5LsVrAsw+OU+Ibi7klFZCyX54gjYzX4TH+f2uzXjRviLARxkMurA2bA==", - "requires": {} + "integrity": "sha512-svx747PWHKOGpAXXQkCc4k/DsWo+6bc5LsVrAsw+OU+Ibi7klFZCyX54gjYzX4TH+f2uzXjRviLARxkMurA2bA==" }, "postcss-discard-empty": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.0.1.tgz", - "integrity": "sha512-vfU8CxAQ6YpMxV2SvMcMIyF2LX1ZzWpy0lqHDsOdaKKLQVQGVP1pzhrI9JlsO65s66uQTfkQBKBD/A5gp9STFw==", - "requires": {} + "integrity": "sha512-vfU8CxAQ6YpMxV2SvMcMIyF2LX1ZzWpy0lqHDsOdaKKLQVQGVP1pzhrI9JlsO65s66uQTfkQBKBD/A5gp9STFw==" }, "postcss-discard-overridden": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.0.1.tgz", - "integrity": "sha512-Y28H7y93L2BpJhrdUR2SR2fnSsT+3TVx1NmVQLbcnZWwIUpJ7mfcTC6Za9M2PG6w8j7UQRfzxqn8jU2VwFxo3Q==", - "requires": {} + "integrity": "sha512-Y28H7y93L2BpJhrdUR2SR2fnSsT+3TVx1NmVQLbcnZWwIUpJ7mfcTC6Za9M2PG6w8j7UQRfzxqn8jU2VwFxo3Q==" }, "postcss-flexbugs-fixes": { "version": "5.0.2", "resolved": "https://registry.npmjs.org/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-5.0.2.tgz", - "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==", - "requires": {} + "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==" }, "postcss-loader": { "version": "5.3.0", @@ -40585,8 +40494,7 @@ "postcss-modules-extract-imports": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz", - "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==", - "requires": {} + "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==" }, "postcss-modules-local-by-default": { "version": "4.0.0", @@ -40624,8 +40532,7 @@ "postcss-normalize-charset": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.0.1.tgz", - "integrity": "sha512-6J40l6LNYnBdPSk+BHZ8SF+HAkS4q2twe5jnocgd+xWpz/mx/5Sa32m3W1AA8uE8XaXN+eg8trIlfu8V9x61eg==", - "requires": {} + "integrity": "sha512-6J40l6LNYnBdPSk+BHZ8SF+HAkS4q2twe5jnocgd+xWpz/mx/5Sa32m3W1AA8uE8XaXN+eg8trIlfu8V9x61eg==" }, "postcss-normalize-display-values": { "version": "5.0.1", @@ -40996,8 +40903,7 @@ "prism-react-renderer": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-1.2.1.tgz", - "integrity": "sha512-w23ch4f75V1Tnz8DajsYKvY5lF7H1+WvzvLUcF0paFxkTHSp42RS0H5CttdN2Q8RR3DRGZ9v5xD/h3n8C8kGmg==", - "requires": {} + "integrity": "sha512-w23ch4f75V1Tnz8DajsYKvY5lF7H1+WvzvLUcF0paFxkTHSp42RS0H5CttdN2Q8RR3DRGZ9v5xD/h3n8C8kGmg==" }, "prismjs": { "version": "1.28.0", @@ -41382,8 +41288,7 @@ "react-docgen-typescript": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/react-docgen-typescript/-/react-docgen-typescript-2.0.0.tgz", - "integrity": "sha512-lPf+KJKAo6a9klKyK4y8WwgaX+6t5/HkVjHOpJDMbmaXfXcV7zP0QgWtnEOc3ccEUXKvlHMGUMIS9f6Zgo1BSw==", - "requires": {} + "integrity": "sha512-lPf+KJKAo6a9klKyK4y8WwgaX+6t5/HkVjHOpJDMbmaXfXcV7zP0QgWtnEOc3ccEUXKvlHMGUMIS9f6Zgo1BSw==" }, "react-dom": { "version": "17.0.1", @@ -41556,14 +41461,12 @@ "react-side-effect": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.1.tgz", - "integrity": "sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==", - "requires": {} + "integrity": "sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==" }, "react-simple-code-editor": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-simple-code-editor/-/react-simple-code-editor-0.11.0.tgz", - "integrity": "sha512-xGfX7wAzspl113ocfKQAR8lWPhavGWHL3xSzNLeseDRHysT+jzRBi/ExdUqevSMos+7ZtdfeuBOXtgk9HTwsrw==", - "requires": {} + "integrity": "sha512-xGfX7wAzspl113ocfKQAR8lWPhavGWHL3xSzNLeseDRHysT+jzRBi/ExdUqevSMos+7ZtdfeuBOXtgk9HTwsrw==" }, "react-style-singleton": { "version": "2.1.1", @@ -43745,8 +43648,7 @@ "stylis-rule-sheet": { "version": "0.0.10", "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz", - "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==", - "requires": {} + "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==" }, "subscriptions-transport-ws": { "version": "0.9.19", @@ -44442,12 +44344,6 @@ "is-typedarray": "^1.0.0" } }, - "typescript": { - "version": "4.8.4", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz", - "integrity": "sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==", - "peer": true - }, "unbox-primitive": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz", @@ -44981,8 +44877,7 @@ "use-callback-ref": { "version": "1.2.5", "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.2.5.tgz", - "integrity": "sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==", - "requires": {} + "integrity": "sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==" }, "use-sidecar": { "version": "1.0.5", diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml index 3c5d0e90ad0..ff743eddac8 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml +++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml @@ -110,6 +110,8 @@ # url: /Portal - title: ProgressBar url: /ProgressBar + - title: RelativeTime + url: /RelativeTime - title: Radio url: /Radio - title: RadioGroup diff --git a/examples/nextjs/package-lock.json b/examples/nextjs/package-lock.json index 65d1824f1e3..4cf053f4726 100644 --- a/examples/nextjs/package-lock.json +++ b/examples/nextjs/package-lock.json @@ -17,15 +17,17 @@ }, "../..": { "name": "@primer/react", - "version": "35.10.0", + "version": "35.14.2", "license": "MIT", "dependencies": { "@github/combobox-nav": "^2.1.5", "@github/markdown-toolbar-element": "^2.1.0", "@github/paste-markdown": "^1.4.0", - "@primer/behaviors": "^1.1.1", - "@primer/octicons-react": "^17.3.0", - "@primer/primitives": "7.9.0", + "@github/time-elements": "^3.5.0", + "@lit-labs/react": "1.0.9", + "@primer/behaviors": "1.3.1", + "@primer/octicons-react": "^17.7.0", + "@primer/primitives": "7.10.0", "@react-aria/ssr": "^3.1.0", "@styled-system/css": "^5.1.5", "@styled-system/props": "^5.1.5", @@ -44,50 +46,53 @@ "styled-system": "^5.1.5" }, "devDependencies": { + "@axe-core/playwright": "4.5.0", "@babel/cli": "7.17.6", "@babel/core": "7.14.8", "@babel/eslint-parser": "7.15.7", "@babel/plugin-proposal-nullish-coalescing-operator": "7.16.0", "@babel/plugin-proposal-optional-chaining": "7.16.7", - "@babel/plugin-transform-modules-commonjs": "7.14.5", - "@babel/preset-react": "7.14.5", + "@babel/plugin-transform-modules-commonjs": "7.19.6", + "@babel/preset-react": "7.18.6", "@babel/preset-typescript": "7.18.6", - "@changesets/changelog-github": "0.4.3", - "@changesets/cli": "2.17.0", + "@changesets/changelog-github": "0.4.7", + "@changesets/cli": "2.25.1", "@github/prettier-config": "0.0.4", - "@rollup/plugin-babel": "5.3.1", - "@rollup/plugin-commonjs": "22.0.2", + "@playwright/test": "1.27.1", + "@rollup/plugin-babel": "6.0.2", + "@rollup/plugin-commonjs": "23.0.0", "@rollup/plugin-node-resolve": "14.1.0", - "@rollup/plugin-typescript": "8.5.0", + "@rollup/plugin-replace": "5.0.0", + "@rollup/plugin-typescript": "9.0.2", "@size-limit/preset-big-lib": "7.0.3", "@storybook/addon-a11y": "6.5.12", "@storybook/addon-actions": "6.5.12", "@storybook/addon-essentials": "6.5.12", - "@storybook/addon-interactions": "6.5.12", + "@storybook/addon-interactions": "6.5.13", "@storybook/addon-links": "6.5.12", "@storybook/addon-storysource": "6.5.12", "@storybook/builder-webpack5": "6.5.12", "@storybook/jest": "0.0.10", "@storybook/manager-webpack5": "6.5.12", "@storybook/react": "6.5.12", - "@storybook/test-runner": "0.7.2", + "@storybook/test-runner": "0.9.0", "@storybook/testing-library": "0.0.13", + "@storybook/theming": "6.5.13", "@testing-library/dom": "8.13.0", "@testing-library/jest-dom": "5.16.4", "@testing-library/react": "12.1.5", "@testing-library/react-hooks": "7.0.2", "@testing-library/user-event": "^14.3.0", - "@types/chroma-js": "2.1.3", - "@types/enzyme": "3.10.9", + "@types/chroma-js": "2.1.4", "@types/jest": "27.0.2", "@types/jest-axe": "3.5.3", - "@types/lodash.isempty": "4.4.6", - "@types/lodash.isobject": "3.0.6", + "@types/lodash.groupby": "4.6.7", + "@types/lodash.isempty": "4.4.7", + "@types/lodash.isobject": "3.0.7", "@types/node": "16.11.11", - "@typescript-eslint/eslint-plugin": "4.31.2", + "@typescript-eslint/eslint-plugin": "4.33.0", "@typescript-eslint/parser": "4.33.0", "@whitespace/storybook-addon-html": "5.0.0", - "@wojtekmaj/enzyme-adapter-react-17": "0.6.7", "babel-core": "7.0.0-bridge.0", "babel-loader": "^8.2.2", "babel-plugin-add-react-displayname": "0.0.5", @@ -98,12 +103,11 @@ "babel-plugin-transform-commonjs": "1.1.6", "babel-plugin-transform-replace-expressions": "0.2.0", "babel-polyfill": "6.26.0", - "chroma-js": "2.1.2", + "chroma-js": "2.4.2", "chromatic": "6.1.0", - "concurrently": "6.4.0", + "concurrently": "7.5.0", "copyfiles": "2.4.1", "cross-env": "7.0.3", - "enzyme": "3.11.0", "eslint": "7.32.0", "eslint-plugin-github": "4.1.3", "eslint-plugin-jest": "24.3.6", @@ -113,19 +117,21 @@ "eslint-plugin-primer-react": "0.7.4", "eslint-plugin-react": "7.24.0", "eslint-plugin-react-hooks": "4.2.0", + "fast-glob": "3.2.12", "front-matter": "4.0.2", "husky": "7.0.4", "jest": "29.0.1", "jest-axe": "5.0.1", - "jest-environment-jsdom": "29.0.1", + "jest-environment-jsdom": "29.2.1", "jest-matchmedia-mock": "1.1.0", "jest-styled-components": "6.3.4", "jest-watch-typeahead": "2.1.1", "jscodeshift": "0.13.0", "lint-staged": "12.1.2", + "lodash.groupby": "4.6.0", "lodash.isempty": "4.4.0", "lodash.isobject": "3.0.2", - "prettier": "2.3.2", + "prettier": "2.7.1", "react": "17.0.2", "react-dnd": "14.0.4", "react-dnd-html5-backend": "14.0.2", @@ -137,11 +143,10 @@ "rollup-plugin-visualizer": "5.8.1", "semver": "7.3.5", "size-limit": "7.0.3", - "storybook-addon-performance": "0.16.1", "storybook-addon-turbo-build": "1.1.0", "styled-components": "4.4.1", "ts-toolbelt": "9.6.0", - "typescript": "4.5.4", + "typescript": "4.8.3", "webpack": "5.74.0" }, "engines": { @@ -1318,41 +1323,47 @@ "@primer/react": { "version": "file:../..", "requires": { + "@axe-core/playwright": "4.5.0", "@babel/cli": "7.17.6", "@babel/core": "7.14.8", "@babel/eslint-parser": "7.15.7", "@babel/plugin-proposal-nullish-coalescing-operator": "7.16.0", "@babel/plugin-proposal-optional-chaining": "7.16.7", - "@babel/plugin-transform-modules-commonjs": "7.14.5", - "@babel/preset-react": "7.14.5", + "@babel/plugin-transform-modules-commonjs": "7.19.6", + "@babel/preset-react": "7.18.6", "@babel/preset-typescript": "7.18.6", - "@changesets/changelog-github": "0.4.3", - "@changesets/cli": "2.17.0", + "@changesets/changelog-github": "0.4.7", + "@changesets/cli": "2.25.1", "@github/combobox-nav": "^2.1.5", "@github/markdown-toolbar-element": "^2.1.0", "@github/paste-markdown": "^1.4.0", "@github/prettier-config": "0.0.4", - "@primer/behaviors": "^1.1.1", - "@primer/octicons-react": "^17.3.0", - "@primer/primitives": "7.9.0", + "@github/time-elements": "^3.5.0", + "@lit-labs/react": "1.0.9", + "@playwright/test": "1.27.1", + "@primer/behaviors": "1.3.1", + "@primer/octicons-react": "^17.7.0", + "@primer/primitives": "7.10.0", "@react-aria/ssr": "^3.1.0", - "@rollup/plugin-babel": "5.3.1", - "@rollup/plugin-commonjs": "22.0.2", + "@rollup/plugin-babel": "6.0.2", + "@rollup/plugin-commonjs": "23.0.0", "@rollup/plugin-node-resolve": "14.1.0", - "@rollup/plugin-typescript": "8.5.0", + "@rollup/plugin-replace": "5.0.0", + "@rollup/plugin-typescript": "9.0.2", "@size-limit/preset-big-lib": "7.0.3", "@storybook/addon-a11y": "6.5.12", "@storybook/addon-actions": "6.5.12", "@storybook/addon-essentials": "6.5.12", - "@storybook/addon-interactions": "6.5.12", + "@storybook/addon-interactions": "6.5.13", "@storybook/addon-links": "6.5.12", "@storybook/addon-storysource": "6.5.12", "@storybook/builder-webpack5": "6.5.12", "@storybook/jest": "0.0.10", "@storybook/manager-webpack5": "6.5.12", "@storybook/react": "6.5.12", - "@storybook/test-runner": "0.7.2", + "@storybook/test-runner": "0.9.0", "@storybook/testing-library": "0.0.13", + "@storybook/theming": "6.5.13", "@styled-system/css": "^5.1.5", "@styled-system/props": "^5.1.5", "@styled-system/theme-get": "^5.1.2", @@ -1361,21 +1372,20 @@ "@testing-library/react": "12.1.5", "@testing-library/react-hooks": "7.0.2", "@testing-library/user-event": "^14.3.0", - "@types/chroma-js": "2.1.3", - "@types/enzyme": "3.10.9", + "@types/chroma-js": "2.1.4", "@types/jest": "27.0.2", "@types/jest-axe": "3.5.3", - "@types/lodash.isempty": "4.4.6", - "@types/lodash.isobject": "3.0.6", + "@types/lodash.groupby": "4.6.7", + "@types/lodash.isempty": "4.4.7", + "@types/lodash.isobject": "3.0.7", "@types/node": "16.11.11", "@types/styled-components": "^5.1.11", "@types/styled-system": "^5.1.12", "@types/styled-system__css": "^5.0.16", "@types/styled-system__theme-get": "^5.0.1", - "@typescript-eslint/eslint-plugin": "4.31.2", + "@typescript-eslint/eslint-plugin": "4.33.0", "@typescript-eslint/parser": "4.33.0", "@whitespace/storybook-addon-html": "5.0.0", - "@wojtekmaj/enzyme-adapter-react-17": "0.6.7", "babel-core": "7.0.0-bridge.0", "babel-loader": "^8.2.2", "babel-plugin-add-react-displayname": "0.0.5", @@ -1386,15 +1396,14 @@ "babel-plugin-transform-commonjs": "1.1.6", "babel-plugin-transform-replace-expressions": "0.2.0", "babel-polyfill": "6.26.0", - "chroma-js": "2.1.2", + "chroma-js": "2.4.2", "chromatic": "6.1.0", "classnames": "^2.3.1", "color2k": "^1.2.4", - "concurrently": "6.4.0", + "concurrently": "7.5.0", "copyfiles": "2.4.1", "cross-env": "7.0.3", "deepmerge": "^4.2.2", - "enzyme": "3.11.0", "eslint": "7.32.0", "eslint-plugin-github": "4.1.3", "eslint-plugin-jest": "24.3.6", @@ -1404,6 +1413,7 @@ "eslint-plugin-primer-react": "0.7.4", "eslint-plugin-react": "7.24.0", "eslint-plugin-react-hooks": "4.2.0", + "fast-glob": "3.2.12", "focus-visible": "^5.2.0", "front-matter": "4.0.2", "fzy.js": "0.4.1", @@ -1411,15 +1421,16 @@ "husky": "7.0.4", "jest": "29.0.1", "jest-axe": "5.0.1", - "jest-environment-jsdom": "29.0.1", + "jest-environment-jsdom": "29.2.1", "jest-matchmedia-mock": "1.1.0", "jest-styled-components": "6.3.4", "jest-watch-typeahead": "2.1.1", "jscodeshift": "0.13.0", "lint-staged": "12.1.2", + "lodash.groupby": "4.6.0", "lodash.isempty": "4.4.0", "lodash.isobject": "3.0.2", - "prettier": "2.3.2", + "prettier": "2.7.1", "react": "17.0.2", "react-dnd": "14.0.4", "react-dnd-html5-backend": "14.0.2", @@ -1432,12 +1443,11 @@ "rollup-plugin-visualizer": "5.8.1", "semver": "7.3.5", "size-limit": "7.0.3", - "storybook-addon-performance": "0.16.1", "storybook-addon-turbo-build": "1.1.0", "styled-components": "4.4.1", "styled-system": "^5.1.5", "ts-toolbelt": "9.6.0", - "typescript": "4.5.4", + "typescript": "4.8.3", "webpack": "5.74.0" } }, diff --git a/jest.config.js b/jest.config.js index 90263ee6b73..e1d6c0c6778 100644 --- a/jest.config.js +++ b/jest.config.js @@ -7,7 +7,7 @@ module.exports = { setupFilesAfterEnv: ['/src/utils/test-matchers.tsx', '/src/utils/test-deprecations.tsx'], testMatch: ['/(src|codemods)/**/*.test.[jt]s?(x)', '!**/*.types.test.[jt]s?(x)'], transformIgnorePatterns: [ - 'node_modules/(?!@github/combobox-nav|@koddsson/textarea-caret|@github/markdown-toolbar-element)', + 'node_modules/(?!@github/combobox-nav|@koddsson/textarea-caret|@github/[a-z-]+-element|@lit-labs/react)', ], watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'], } diff --git a/package-lock.json b/package-lock.json index 7bd5ab4dffc..6d528ae3c24 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,8 @@ "@github/combobox-nav": "^2.1.5", "@github/markdown-toolbar-element": "^2.1.0", "@github/paste-markdown": "^1.4.0", + "@github/relative-time-element": "4.0.0", + "@lit-labs/react": "1.0.9", "@primer/behaviors": "1.3.1", "@primer/octicons-react": "^17.7.0", "@primer/primitives": "7.10.0", @@ -3022,6 +3024,11 @@ "integrity": "sha512-Sdb089z+QbGnFF2NivbDeaJ62ooPlD31wE6Fkb/ESjAOXSjNJo+gjqzYYhlM7G3ERJmKFZRUJYMlsqB7Tym8lQ==", "dev": true }, + "node_modules/@github/relative-time-element": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@github/relative-time-element/-/relative-time-element-4.0.0.tgz", + "integrity": "sha512-A//nGe6GFciGP0GxSZZKZbULwSZuENZ19cTaAkvRU3Ptqgdpo95VF6YS5TPi54NVM/zt8q6KtDTOMyjdFQHj0g==" + }, "node_modules/@hapi/hoek": { "version": "9.3.0", "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz", @@ -5847,6 +5854,11 @@ "@jridgewell/sourcemap-codec": "^1.4.10" } }, + "node_modules/@lit-labs/react": { + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-1.0.9.tgz", + "integrity": "sha512-yjkdcciypTIJ6vUXzZJHTAwt2fdATUAfZMkHRbLpbgEnr8OwpwVOQ04me1Y7p5Vwtmcd4GWY0/BQ6G8jUgCK1w==" + }, "node_modules/@manypkg/find-root": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@manypkg/find-root/-/find-root-1.1.0.tgz", @@ -44825,6 +44837,11 @@ "integrity": "sha512-Sdb089z+QbGnFF2NivbDeaJ62ooPlD31wE6Fkb/ESjAOXSjNJo+gjqzYYhlM7G3ERJmKFZRUJYMlsqB7Tym8lQ==", "dev": true }, + "@github/relative-time-element": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@github/relative-time-element/-/relative-time-element-4.0.0.tgz", + "integrity": "sha512-A//nGe6GFciGP0GxSZZKZbULwSZuENZ19cTaAkvRU3Ptqgdpo95VF6YS5TPi54NVM/zt8q6KtDTOMyjdFQHj0g==" + }, "@hapi/hoek": { "version": "9.3.0", "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz", @@ -47016,6 +47033,11 @@ "@jridgewell/sourcemap-codec": "^1.4.10" } }, + "@lit-labs/react": { + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-1.0.9.tgz", + "integrity": "sha512-yjkdcciypTIJ6vUXzZJHTAwt2fdATUAfZMkHRbLpbgEnr8OwpwVOQ04me1Y7p5Vwtmcd4GWY0/BQ6G8jUgCK1w==" + }, "@manypkg/find-root": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@manypkg/find-root/-/find-root-1.1.0.tgz", diff --git a/package.json b/package.json index bb2dbeb3253..32d3cac7335 100644 --- a/package.json +++ b/package.json @@ -84,6 +84,8 @@ "@github/combobox-nav": "^2.1.5", "@github/markdown-toolbar-element": "^2.1.0", "@github/paste-markdown": "^1.4.0", + "@github/relative-time-element": "4.0.0", + "@lit-labs/react": "1.0.9", "@primer/behaviors": "1.3.1", "@primer/octicons-react": "^17.7.0", "@primer/primitives": "7.10.0", diff --git a/rollup.config.js b/rollup.config.js index 02b366b82a4..286effb320f 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -50,7 +50,13 @@ const input = new Set([ ]) const extensions = ['.js', '.jsx', '.ts', '.tsx'] -const ESM_ONLY = new Set(['@github/combobox-nav', '@github/markdown-toolbar-element', '@github/paste-markdown']) +const ESM_ONLY = new Set([ + '@github/combobox-nav', + '@github/markdown-toolbar-element', + '@github/paste-markdown', + '@github/relative-time-element', + '@lit-labs/react', +]) const dependencies = [ ...Object.keys(packageJson.peerDependencies ?? {}), ...Object.keys(packageJson.dependencies ?? {}), diff --git a/src/RelativeTime/RelativeTime.stories.tsx b/src/RelativeTime/RelativeTime.stories.tsx new file mode 100644 index 00000000000..ade5029b5e0 --- /dev/null +++ b/src/RelativeTime/RelativeTime.stories.tsx @@ -0,0 +1,158 @@ +import RelativeTime from './RelativeTime' +import React from 'react' +import {Meta, Story} from '@storybook/react' + +const meta: Meta = { + title: 'Components/RelativeTime', + component: RelativeTime, + parameters: { + layout: 'fullscreen', + controls: { + // StoryBook infers from type info of the component which includes CE Lifecycle, + // SX props, and methods we want to otherwise ignore + exclude: /^(getFormatted.*|datetime|sx|as|theme|forwardedAs|.*Callback|update)$/g, + }, + }, + args: { + date: new Date('2020-01-01T00:00:00Z'), + second: '', + minute: '', + hour: '', + weekday: '', + day: 'numeric', + month: 'short', + year: '', + timeZoneName: '', + }, + argTypes: { + hour: { + type: { + name: 'enum', + value: ['', 'numeric', '2-digit'], + }, + control: { + type: 'select', + labels: { + '': '(None)', + }, + }, + }, + minute: { + type: { + name: 'enum', + value: ['', 'numeric', '2-digit'], + }, + control: { + type: 'select', + labels: { + '': '(None)', + }, + }, + }, + second: { + type: { + name: 'enum', + value: ['', 'numeric', '2-digit'], + }, + control: { + type: 'select', + labels: { + '': '(None)', + }, + }, + }, + weekday: { + type: { + name: 'enum', + value: ['', 'short', 'long', 'narrow'], + }, + control: { + type: 'select', + labels: { + '': '(None)', + }, + }, + }, + day: { + type: { + name: 'enum', + value: ['', 'numeric', '2-digit'], + }, + control: { + type: 'select', + labels: { + '': '(None)', + }, + }, + }, + month: { + type: { + name: 'enum', + value: ['', 'numeric', '2-digit', 'long', 'short', 'narrow'], + }, + control: { + type: 'select', + labels: { + '': '(None)', + }, + }, + }, + year: { + type: { + name: 'enum', + value: ['', 'numeric', '2-digit'], + }, + control: { + type: 'select', + labels: { + '': '(None)', + }, + }, + }, + timeZoneName: { + type: { + name: 'enum', + value: ['', 'long', 'short', 'longOffset', 'shortOffset', 'longGeneric', 'shortGeneric'], + }, + control: { + type: 'select', + labels: { + '': '(None)', + }, + }, + }, + date: { + control: 'date', + }, + format: { + control: 'string', + }, + }, +} + +export const Default: Story = args => { + const {date, ...rest} = args + return +} + +export const MicroFormat: Story = args => { + const {date, ...rest} = args + return +} +MicroFormat.args = {tense: 'past'} +MicroFormat.argTypes = {format: {control: false}} + +export const RecentTime: Story = args => { + const {...rest} = args + return +} +RecentTime.argTypes = {date: {control: false}} + +export const CountDownTimer: Story = args => { + const {...rest} = args + return +} +CountDownTimer.args = {date: new Date('2038-01-19T03:14:08Z'), format: 'elapsed', day: '', month: ''} +CountDownTimer.argTypes = {date: {control: false}, format: {control: false}} + +export default meta diff --git a/src/RelativeTime/RelativeTime.tsx b/src/RelativeTime/RelativeTime.tsx new file mode 100644 index 00000000000..6b5acc14d61 --- /dev/null +++ b/src/RelativeTime/RelativeTime.tsx @@ -0,0 +1,11 @@ +import React from 'react' +import styled from 'styled-components' +import {RelativeTimeElement} from '@github/relative-time-element' +import {createComponent} from '@lit-labs/react' +import {ComponentProps} from '../utils/types' +import sx from '../sx' + +const RelativeTime = styled(createComponent(React, 'relative-time', RelativeTimeElement))(sx) + +export type RelativeTimeProps = ComponentProps +export default RelativeTime diff --git a/src/RelativeTime/index.ts b/src/RelativeTime/index.ts new file mode 100644 index 00000000000..70437bbda11 --- /dev/null +++ b/src/RelativeTime/index.ts @@ -0,0 +1,2 @@ +export {default} from './RelativeTime' +export type {RelativeTimeProps} from './RelativeTime' diff --git a/src/__tests__/RelativeTime.test.tsx b/src/__tests__/RelativeTime.test.tsx new file mode 100644 index 00000000000..6c92229a2e5 --- /dev/null +++ b/src/__tests__/RelativeTime.test.tsx @@ -0,0 +1,24 @@ +import React from 'react' +import {RelativeTime} from '..' +import {render as HTMLRender} from '@testing-library/react' +import {axe, toHaveNoViolations} from 'jest-axe' +import {render, behavesAsComponent, checkExports} from '../utils/testing' +expect.extend(toHaveNoViolations) + +describe('RelativeTime', () => { + behavesAsComponent({Component: RelativeTime}) + + checkExports('RelativeTime', { + default: RelativeTime, + }) + + it('should have no axe violations', async () => { + const {container} = HTMLRender() + const results = await axe(container) + expect(results).toHaveNoViolations() + }) + + it('renders a ', () => { + expect(render().type).toEqual('relative-time') + }) +}) diff --git a/src/__tests__/__snapshots__/RelativeTime.test.tsx.snap b/src/__tests__/__snapshots__/RelativeTime.test.tsx.snap new file mode 100644 index 00000000000..7d295b98ff2 --- /dev/null +++ b/src/__tests__/__snapshots__/RelativeTime.test.tsx.snap @@ -0,0 +1,8 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`RelativeTime renders consistently 1`] = ` + +`; diff --git a/src/__tests__/__snapshots__/exports.test.ts.snap b/src/__tests__/__snapshots__/exports.test.ts.snap index 1827185437f..fb0d8eb3a5c 100644 --- a/src/__tests__/__snapshots__/exports.test.ts.snap +++ b/src/__tests__/__snapshots__/exports.test.ts.snap @@ -49,6 +49,7 @@ exports[`@primer/react should not update exports without a semver change 1`] = ` "ProgressBar", "Radio", "RadioGroup", + "RelativeTime", "SSRProvider", "SegmentedControl", "Select", diff --git a/src/index.ts b/src/index.ts index 866d1bb07cf..115c38342a9 100644 --- a/src/index.ts +++ b/src/index.ts @@ -130,6 +130,8 @@ export type {PortalProps} from './Portal' export {default as ProgressBar} from './ProgressBar' export type {ProgressBarProps} from './ProgressBar' export {default as RadioGroup} from './RadioGroup' +export type {RelativeTimeProps} from './RelativeTime' +export {default as RelativeTime} from './RelativeTime' export {SegmentedControl} from './SegmentedControl' export {default as Select} from './Select' export type {SelectProps} from './Select' diff --git a/src/utils/test-matchers.tsx b/src/utils/test-matchers.tsx index 12888591cd8..fcbd6c2d1cd 100644 --- a/src/utils/test-matchers.tsx +++ b/src/utils/test-matchers.tsx @@ -39,7 +39,7 @@ expect.extend({ const elem = React.cloneElement(element, {sx: sxPropValue}) function checkStylesDeep(rendered: ReactTestRendererJSON): boolean { - const className = rendered.props.className + const className = rendered.props.className || rendered.props.class const styles = getComputedStyles(className) const mediaStyles = styles[mediaKey] as Record | null if (mediaStyles && mediaStyles.color) {