-
-
Notifications
You must be signed in to change notification settings - Fork 36
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
41 changed files
with
796 additions
and
2,194 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,3 @@ | ||
| .cache | ||
| .yarn | ||
| coverage | ||
| dist | ||
| *.yml | ||
| yarnrc.yml |
Large diffs are not rendered by default.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,111 +1,3 @@ | ||
| [](https://www.npmjs.com/package/react-clock)  [](https://github.com/wojtekmaj/react-clock/actions) | ||
| # react-clock monorepo | ||
|
|
||
| # React-Clock | ||
|
|
||
| An analog clock for your React app. | ||
|
|
||
| ## tl;dr | ||
|
|
||
| - Install by executing `npm install react-clock` or `yarn add react-clock`. | ||
| - Import by adding `import Clock from 'react-clock'`. | ||
| - Use by adding `<Clock />`. | ||
|
|
||
| ## Demo | ||
|
|
||
| A minimal demo page can be found in `sample` directory. | ||
|
|
||
| [Online demo](http://projects.wojtekmaj.pl/react-clock/) is also available! | ||
|
|
||
| ## Installation | ||
|
|
||
| Add React-Clock to your project by executing `npm install react-clock` or `yarn add react-clock`. | ||
|
|
||
| ### Usage | ||
|
|
||
| Here's an example of basic usage: | ||
|
|
||
| ```tsx | ||
| import { useEffect, useState } from 'react'; | ||
| import Clock from 'react-clock'; | ||
|
|
||
| function MyApp() { | ||
| const [value, setValue] = useState(new Date()); | ||
|
|
||
| useEffect(() => { | ||
| const interval = setInterval(() => setValue(new Date()), 1000); | ||
|
|
||
| return () => { | ||
| clearInterval(interval); | ||
| }; | ||
| }, []); | ||
|
|
||
| return ( | ||
| <div> | ||
| <p>Current time:</p> | ||
| <Clock value={value} /> | ||
| </div> | ||
| ); | ||
| } | ||
| ``` | ||
|
|
||
| ### Custom styling | ||
|
|
||
| If you want to use default React-Clock styling to build upon it, you can import React-Clock's styles by using: | ||
|
|
||
| ```ts | ||
| import 'react-clock/dist/Clock.css'; | ||
| ``` | ||
|
|
||
| ## User guide | ||
|
|
||
| ### Clock | ||
|
|
||
| Displays a complete clock. | ||
|
|
||
| #### Props | ||
|
|
||
| | Prop name | Description | Default value | Example values | | ||
| | ------------------------ | ------------------------------------------------------------------------------------------------------------------------- | ----------------------- | --------------------------------------------------------------------------------------------------- | | ||
| | className | Class name(s) that will be added along with `"react-clock"` to the main React-Clock `<time>` element. | n/a | <ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul> | | ||
| | formatHour | Function called to override default formatting of hour marks. Can be used to use your own formatting function. | (default formatter) | `(locale, hour) => formatHour(hour, 'HH')` | | ||
| | hourHandLength | Hour hand length, in %. | `50` | `80` | | ||
| | hourHandOppositeLength | The length of the part of an hour hand on the opposite side the hand is pointing to, in %. | `10` | `20` | | ||
| | hourHandWidth | Hour hand width, in pixels. | `4` | `3` | | ||
| | hourMarksLength | Hour marks length, in %. | `10` | `8` | | ||
| | hourMarksWidth | Hour marks width, in pixels. | `3` | `2` | | ||
| | locale | Locale that should be used by the clock. Can be any [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag). | User's browser settings | `"hu-HU"` | | ||
| | minuteHandLength | Minute hand length, in %. | `70` | `80` | | ||
| | minuteHandOppositeLength | The length of the part of a minute hand on the opposite side the hand is pointing to, in %. | `10` | `20` | | ||
| | minuteHandWidth | Minute hand width, in pixels. | `2` | `3` | | ||
| | minuteMarksLength | Minute marks length, in %. | `6` | `8` | | ||
| | minuteMarksWidth | Minute marks width, in pixels. | `1` | `2` | | ||
| | renderHourMarks | Whether hour marks shall be rendered. | `true` | `false` | | ||
| | renderMinuteHand | Whether minute hand shall be rendered. | `true` | `false` | | ||
| | renderMinuteMarks | Whether minute marks shall be rendered. | `true` | `false` | | ||
| | renderNumbers | Whether numbers shall be rendered. | `false` | `true` | | ||
| | renderSecondHand | Whether second hand shall be rendered. | `true` | `false` | | ||
| | secondHandLength | Second hand length, in %. | `90` | `80` | | ||
| | secondHandOppositeLength | The length of the part of a second hand on the opposite side the hand is pointing to, in %. | `10` | `20` | | ||
| | secondHandWidth | Second hand width, in pixels. | `1` | `2` | | ||
| | size | Clock size, in pixels (e.g. `200`) or as string (e.g. `"50vw"`). | `150` | <ul><li>Number: `250`</li><li>String: `"50vw"`</li></ul> | | ||
| | useMillisecondPrecision | Whether to use millisecond precision. | `false` | `true` | | ||
| | value | Clock value. Must be provided. | n/a | Date: `new Date()` | | ||
|
|
||
| ## License | ||
|
|
||
| The MIT License. | ||
|
|
||
| ## Author | ||
|
|
||
| <table> | ||
| <tr> | ||
| <td> | ||
| <img src="https://github.com/wojtekmaj.png?s=100" width="100"> | ||
| </td> | ||
| <td> | ||
| Wojciech Maj<br /> | ||
| <a href="mailto:[email protected]">[email protected]</a><br /> | ||
| <a href="https://wojtekmaj.pl">https://wojtekmaj.pl</a> | ||
| </td> | ||
| </tr> | ||
| </table> | ||
| Looking for the react-clock documentation? It can now be found [here](package/README.md). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,104 +1,26 @@ | ||
| { | ||
| "name": "react-clock", | ||
| "version": "4.5.0", | ||
| "description": "An analog clock for your React app.", | ||
| "name": "react-clock-monorepo", | ||
| "version": "1.0.0", | ||
| "description": "react-clock monorepo", | ||
| "type": "module", | ||
| "sideEffects": [ | ||
| "*.css" | ||
| "workspaces": [ | ||
| "package", | ||
| "test" | ||
| ], | ||
| "main": "./dist/cjs/index.js", | ||
| "module": "./dist/esm/index.js", | ||
| "source": "./src/index.ts", | ||
| "types": "./dist/cjs/index.d.ts", | ||
| "exports": { | ||
| ".": { | ||
| "import": "./dist/esm/index.js", | ||
| "require": "./dist/cjs/index.js" | ||
| }, | ||
| "./dist/Clock.css": "./dist/Clock.css" | ||
| }, | ||
| "scripts": { | ||
| "build": "yarn build-js && yarn copy-styles", | ||
| "build-js": "yarn build-js-esm && yarn build-js-cjs && yarn build-js-cjs-package", | ||
| "build-js-esm": "tsc --project tsconfig.build.json --outDir dist/esm --module esnext", | ||
| "build-js-cjs": "tsc --project tsconfig.build.json --outDir dist/cjs --module commonjs", | ||
| "build-js-cjs-package": "echo '{\n \"type\": \"commonjs\"\n}' > dist/cjs/package.json", | ||
| "clean": "rimraf dist", | ||
| "copy-styles": "cpy 'src/**/*.css' dist", | ||
| "lint": "eslint . --ext .js,.jsx,.ts,.tsx", | ||
| "build": "yarn workspace react-clock build", | ||
| "dev": "yarn workspace react-clock watch & yarn workspace test dev", | ||
| "lint": "yarn workspaces foreach run lint", | ||
| "postinstall": "husky install", | ||
| "prepack": "yarn clean && yarn build", | ||
| "prettier": "prettier --check . --cache", | ||
| "test": "yarn lint && yarn tsc && yarn prettier && yarn unit", | ||
| "tsc": "tsc --noEmit", | ||
| "unit": "vitest", | ||
| "watch": "yarn build-js-esm --watch & yarn build-js-cjs --watch & yarn build-js-cjs-package & nodemon --watch src --ext css --exec \"yarn copy-styles\"" | ||
| }, | ||
| "keywords": [ | ||
| "clock", | ||
| "digital clock", | ||
| "analog clock", | ||
| "time", | ||
| "react" | ||
| ], | ||
| "author": { | ||
| "name": "Wojciech Maj", | ||
| "email": "[email protected]" | ||
| }, | ||
| "contributors": [ | ||
| { | ||
| "name": "Yin Hengli", | ||
| "email": "[email protected]" | ||
| } | ||
| ], | ||
| "license": "MIT", | ||
| "dependencies": { | ||
| "@wojtekmaj/date-utils": "^1.5.0", | ||
| "clsx": "^2.0.0", | ||
| "get-user-locale": "^2.2.1", | ||
| "prop-types": "^15.6.0" | ||
| "prettier": "yarn workspaces foreach run prettier", | ||
| "test": "yarn workspaces foreach run test", | ||
| "tsc": "yarn workspaces foreach run tsc", | ||
| "unit": "yarn workspaces foreach run unit" | ||
| }, | ||
| "devDependencies": { | ||
| "@testing-library/jest-dom": "^5.15.0", | ||
| "@testing-library/react": "^14.0.0", | ||
| "@types/node": "*", | ||
| "@types/react": "*", | ||
| "cpy-cli": "^5.0.0", | ||
| "eslint": "^8.26.0", | ||
| "eslint-config-wojtekmaj": "^0.9.0", | ||
| "husky": "^8.0.0", | ||
| "jsdom": "^21.1.0", | ||
| "nodemon": "^3.0.0", | ||
| "prettier": "^2.7.0", | ||
| "pretty-quick": "^3.1.0", | ||
| "react": "^18.2.0", | ||
| "react-dom": "^18.2.0", | ||
| "rimraf": "^3.0.0", | ||
| "typescript": "^5.0.0", | ||
| "vitest": "^0.30.1" | ||
| }, | ||
| "peerDependencies": { | ||
| "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", | ||
| "react": "^16.8.0 || ^17.0.0 || ^18.0.0", | ||
| "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" | ||
| }, | ||
| "peerDependenciesMeta": { | ||
| "@types/react": { | ||
| "optional": true | ||
| } | ||
| }, | ||
| "publishConfig": { | ||
| "access": "public", | ||
| "provenance": true | ||
| }, | ||
| "files": [ | ||
| "dist", | ||
| "src" | ||
| ], | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/wojtekmaj/react-clock.git" | ||
| "pretty-quick": "^3.1.0" | ||
| }, | ||
| "funding": "https://github.com/wojtekmaj/react-clock?sponsor=1", | ||
| "packageManager": "[email protected]" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| dist | ||
| node_modules |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| { | ||
| "extends": "wojtekmaj/react-no-automatic-runtime" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| dist |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| MIT License | ||
|
|
||
| Copyright (c) 2017–2023 Wojciech Maj | ||
|
|
||
| Permission is hereby granted, free of charge, to any person obtaining a copy | ||
| of this software and associated documentation files (the "Software"), to deal | ||
| in the Software without restriction, including without limitation the rights | ||
| to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
| copies of the Software, and to permit persons to whom the Software is | ||
| furnished to do so, subject to the following conditions: | ||
|
|
||
| The above copyright notice and this permission notice shall be included in all | ||
| copies or substantial portions of the Software. | ||
|
|
||
| THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
| IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
| FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
| AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
| LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
| OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | ||
| SOFTWARE. |
Oops, something went wrong.