feat: add date-fn

Author: abolkog

jest.config.js

@@ -9,6 +9,9 @@ module.exports = {
     'src/**/*.{ts,tsx}',
     '!src/**/**.d.ts',
     '!src/index.tsx',
+    '!src/components/App/tabs.ts',
+    '!src/helpers/const.ts',
+    '!src/helpers/global.ts',
     '!src/reportWebVitals.ts',
   ],
   coverageThreshold: {

package-lock.json

@@ -42,6 +42,7 @@
   "dependencies": {
     "@testing-library/jest-dom": "^5.16.5",
     "axios": "^0.21.4",
+    "date-fns": "^2.29.3",
     "gh-pages": "^3.2.3",
     "github-fork-ribbon-css": "^0.2.3",
     "lodash": "^4.17.21",
@@ -92,6 +93,7 @@
     "lint-staged": "^13.0.2",
     "mini-css-extract-plugin": "^2.6.1",
     "prettier": "^2.3.2",
+    "semantic-release": "^21.0.0",
     "ts-jest": "^29.0.1",
     "ts-loader": "^9.3.1",
     "webpack": "^5.74.0",

package.json

@@ -40,7 +40,8 @@ const About: React.FC = () => {
                           target="_blank"
                           rel="noopener noreferrer"
                         >
-                          {lib.name}
+                          {lib.name}{' '}
+                          <span className="text-sm">v{lib.version}</span>
                         </a>
                         <span>Use as {lib.use}</span>
                       </div>

src/components/About/About.tsx

@@ -2,24 +2,34 @@
 export const LIBRARIES: Library[] = [
   {
     name: 'redux',
+    version: '4.2.0',
     url: 'https://redux.js.org/',
     use: 'Redux',
   },
   {
     name: 'lodash',
+    version: '4.17.21',
     url: 'http://lodash.com',
     use: '_',
   },
   {
     name: 'axios',
+    version: '0.21.4',
     url: 'https://github.com/axios/axios',
     use: 'axios',
   },
   {
     name: 'luxon',
+    version: '1.28.0',
     url: 'https://moment.github.io/luxon/docs',
     use: 'luxon',
   },
+  {
+    name: 'date-fns',
+    version: '2.29.3',
+    url: 'https://date-fns.org/',
+    use: 'dfn',
+  },
 ];
 
 export const CODE_SAMPLES: CodeSample[] = [
@@ -47,6 +57,12 @@ export const CODE_SAMPLES: CodeSample[] = [
     codeSample:
       "// Luxon code example. Reference Luxon in the code as `luxon` \n\nconst luxonDate = luxon.DateTime.now().setZone('America/New_York').minus({weeks:1}).endOf('day').toISO();\nluxonDate",
   },
+  {
+    id: 5,
+    name: 'date-fns',
+    codeSample:
+      '// date-fns code example. Reference date-fns in the code as `dfn` \n\nconst value = dfn.formatDistance(dfn.subDays(new Date(), 3), new Date(), { addSuffix: true });\nvalue;',
+  },
 ];
 
 export const EDITOR_THEMES: EditorTheme[] = [

src/helpers/const.ts

@@ -2,10 +2,12 @@ import _ from 'lodash';
 import { createStore, combineReducers } from 'redux';
 import axios from 'axios';
 import * as luxon from 'luxon';
+import * as dfn from 'date-fns';
 
 _.extend(window, {
   _,
   axios,
   luxon,
+  dfn,
   Redux: { createStore, combineReducers },
 });

src/helpers/global.ts

@@ -14,4 +14,5 @@ interface Library {
   name: string;
   url: string;
   use: string;
+  version: string;
 }

src/helpers/type.d.ts

@@ -93,3 +93,9 @@ body {
   width: 100%;
   text-align: left;
 }
+
+
+.text-sm {
+  color: #aaa;
+  font-size: 0.7rem;
+}