Merge pull request #85 from ryanhefner/feat/add-format

[feat] Add New Format

Author: ryanhefner

.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["./tools/babel-preset.js"]
+  "presets": ["./tools/babel-preset.cjs"]
 }

.circleci/config.yml

@@ -1,21 +1,15 @@
-# Javascript Node CircleCI 2.0 configuration file
-#
-# Check https://circleci.com/docs/2.0/language-javascript/ for more details
-#
-version: 2
-jobs:
-  build:
-    docker:
-      # specify the version you desire here
-      - image: circleci/node:10.18.0
-
-      # Specify service dependencies here if necessary
-      # CircleCI maintains a library of pre-built images
-      # documented at https://circleci.com/docs/2.0/circleci-images/
-      # - image: circleci/mongo:3.4.4
+# This config is equivalent to both the '.circleci/extended/orb-free.yml' and the base '.circleci/config.yml'
+version: 2.1
 
-    working_directory: ~/repo
+# Orbs are reusable packages of CircleCI configuration that you may share across projects, enabling you to create encapsulated, parameterized commands, jobs, and executors that can be used across multiple projects.
+# See: https://circleci.com/docs/2.0/orb-intro/
+orbs:
+  node: circleci/node@4.7
 
+jobs:
+  build-test-package:
+    docker:
+      - image: cimg/node:18.0.0
     steps:
       - checkout
 
@@ -26,20 +20,28 @@ jobs:
           # fallback to using the latest cache if no exact match is found
           - v1-dependencies-
 
-      - run: npm i
+      - run: yarn
 
       - save_cache:
           paths:
             - node_modules
           key: v1-dependencies-{{ checksum "package.json" }}
 
-      - run: ./node_modules/.bin/greenkeeper-lockfile-update
-      - run: npm run build
+      - run: yarn build
 
       # run tests!
-      - run: npm run test
+      - run: yarn test:ci
 
       # send code coverage info to coveralls
       - run: cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js
 
-      - run: ./node_modules/.bin/greenkeeper-lockfile-upload
+      # send code coverage info to codecov
+      - run: bash <(curl -s https://codecov.io/bash)
+
+# Invoke jobs via workflows
+# See: https://circleci.com/docs/2.0/configuration-reference/#workflows
+workflows:
+  test-package: # This is the name of the workflow, feel free to change it to better match your workflow.
+    # Inside the workflow, you define the jobs you want to run.
+    jobs:
+      - build-test-package

.eslintrc.json

@@ -0,0 +1,45 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node": true
+  },
+  "extends": [
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {
+        "semi": ["error", "never"],
+        "no-prototype-builtins": "off",
+        "react/react-in-jsx-scope": "off",
+        "react-hooks/rules-of-hooks": "error",
+        "react-hooks/exhaustive-deps": "warn",
+        "react/prop-types": "off",
+        "prettier/prettier": [
+          "error",
+          {
+            "endOfLine": "auto"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    }
+  ],
+  "parserOptions": {
+    "babelOptions": {
+      "plugins": [
+        "@babel/plugin-syntax-import-assertions"
+      ]
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  }
+}

.gitignore

@@ -4,8 +4,10 @@ es
 node_modules
 umd
 /*.js
+/*.cjs
 npm-debug.log
 yarn-error.log
 *.sublime-project
 *.sublime-workspace
 !rollup.config.js
+!jest.config.cjs

.npmignore

@@ -1,6 +1,9 @@
+.circleci
+.github
 coverage
 tools
 src/.babelrc
+src/__snapshots__
 **/*.test.js
 rollup.config.js
 *.sublime-project

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "semi": false
+}

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018 Ryan Hefner <hi@ryanhefner.com> (https://www.ryanhefner.com)
+Copyright (c) 2018 - 2023: [Ryan Hefner](https://www.ryanhefner.com)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -5,7 +5,8 @@
 ![npm](https://img.shields.io/npm/dt/react-timecode?style=flat-square)
 ![Coveralls github](https://img.shields.io/coveralls/github/ryanhefner/react-timecode?style=flat-square)
 ![CircleCI](https://img.shields.io/circleci/build/github/ryanhefner/react-timecode?style=flat-square)
-![Snyk Vulnerabilities for GitHub Repo](https://img.shields.io/snyk/vulnerabilities/github/ryanhefner/react-timecode?style=flat-square)
+![Known Vulnerabilities](https://snyk.io/test/github/ryanhefner/react-timecode/badge.svg)
+![Twitter Follow](https://img.shields.io/twitter/follow/ryanhefner)
 
 
 Simple React component for displaying a timecode, with various formatting options.
@@ -32,7 +33,8 @@ simple example.
 
 ### Properties
 
-* `component:String|Function` - Element to render the timecode within. (Default: `span`)
+* `as:String|Function` - Element to render the timecode within. (Default: `span`)
+* `[DEPRECATED]` `component:String|Function` - Element to render the timecode within. (Default: `span`)
 * `format:String` - Specifies the format to display the timecode. (Default: `H:?m:ss`)
   * `HH:mm:ss.SSS` - (Example: 00:01:23.876)
   * `H:mm:ss.SSS` - (Example: 0:01:23.876)
@@ -44,6 +46,8 @@ simple example.
   * `H:mm` - (Example: 0:01)
   * `s.SSS` - (Example: 0.000)
   * `s.SS` - (Example: 0.00)
+  * `mm:ss` - (Example: 90:00)
+  * `H:?mm:ss` - (Example: 00:00)
   * `H:?m:ss` - (Example: 1:23 - _Default_)
 * `postfix:String` - Append a string after the formatted timecode.
 * `prefix:String` - Include a string before the formatted timecode.
@@ -70,6 +74,17 @@ import Timecode from 'react-timecode';
 
 ```
 
+### Utilities
+
+In addition to the `Timecode` component, the underlying utility methods that the
+component uses for rendering the timecodes have also been exposed, in case you
+have some need to render some strings without the context of the component.
+
+* `parseTime(time:Number): { hours: Number, minutes: Number, seconds: Number, milliseconds: Number }`
+* `pad(number: Number, length: Number = 2): String`
+* `formatMilliseconds(milliseconds: Number, length: Number = 3): String`
+* `formatTimecode({ format: String, time: Number }): String`
+
 ## Pairs well with...
 
 * [react-timer-wrapper](https://github.com/ryanhefner/react-timer-wrapper)

jest.config.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+  testEnvironment: 'jsdom',
+}