website(deps): update markdown preview.

.github/workflows/ci.yml

@@ -24,20 +24,20 @@ jobs:
         uses: jaywcjlove/github-action-contributors@main
         with:
           filter-author: (renovate\[bot\]|renovate-bot|dependabot\[bot\])
-          output: build/CONTRIBUTORS.svg
+          output: www/build/CONTRIBUTORS.svg
           avatarSize: 42
 
       - name: Deploy
         uses: peaceiris/actions-gh-pages@v3
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./build
+          publish_dir: ./www/build
 
       - name: Create Tag
         id: create_tag
         uses: jaywcjlove/create-tag-action@main
         with:
-          package-path: ./package.json
+          package-path: ./core/package.json
 
       - name: Generate Changelog
         id: changelog
@@ -57,6 +57,8 @@ jobs:
           tag: ${{ steps.create_tag.outputs.version }}
           body: |
             [![](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-markdown-editor@${{steps.create_tag.outputs.versionNumber}}/file/README.md) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/@uiw/react-markdown-editor)](https://bundlephobia.com/result?p=@uiw/react-markdown-editor@${{steps.create_tag.outputs.versionNumber}}) [![npm version](https://img.shields.io/npm/v/@uiw/react-markdown-editor.svg)](https://www.npmjs.com/package/@uiw/react-markdown-editor)
+            Documentation ${{ steps.changelog.outputs.tag }}: https://raw.githack.com/uiwjs/react-clock/${{ steps.changelog.outputs.gh-pages-short-hash }}/index.html  
+            Comparing Changes: ${{ steps.changelog.outputs.compareurl }}  
 
             ```bash
             npm i @uiw/react-clock@${{steps.create_tag.outputs.versionNumber}}
@@ -68,6 +70,7 @@ jobs:
 
       - run: npm publish --access public
         name: 📦 @uiw/react-clock publish to NPM
+        working-directory: core
         continue-on-error: true
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no-install lint-staged

.prettierignore

@@ -0,0 +1,12 @@
+**/*.md
+**/*.svg
+**/*.ejs
+**/*.yml
+package.json
+node_modules
+dist
+build
+lib
+esm
+cjs
+test

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 120,
+  "overrides": [
+    {
+      "files": ".prettierrc",
+      "options": { "parser": "json" }
+    }
+  ]
+}

core/.kktrc.ts

@@ -0,0 +1,18 @@
+import { LoaderConfOptions, WebpackConfiguration } from 'kkt';
+import lessModules from '@kkt/less-modules';
+
+export default (conf: WebpackConfiguration, env: 'production' | 'development', options: LoaderConfOptions) => {
+  conf = lessModules(conf, env, options);
+  if (options.bundle) {
+    conf.output!.library = '@uiw/react-clock';
+    conf.externals = {
+      react: {
+        root: 'React',
+        commonjs2: 'react',
+        commonjs: 'react',
+        amd: 'react',
+      },
+    };
+  }
+  return conf;
+};

core/README.md

@@ -0,0 +1,75 @@
+<!--rehype:ignore:start-->
+<p align="center">
+  <h2>React Clock</h2>
+  <a href="https://uiwjs.github.io/react-clock">
+    <img src="https://user-images.githubusercontent.com/1680273/99911627-b3040f80-2d30-11eb-9c48-669f1745f348.png">
+  </a>
+</p>
+
+<!--rehype:ignore:end-->
+
+[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-clock.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-clock)
+[![Build & Deploy](https://github.com/uiwjs/react-clock/actions/workflows/ci.yml/badge.svg)](https://github.com/uiwjs/react-clock/actions/workflows/ci.yml)
+[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-clock/file/README.md)
+[![npm version](https://img.shields.io/npm/v/@uiw/react-clock.svg)](https://www.npmjs.com/package/@uiw/react-clock)
+[![Open in Gitpod](https://shields.io/badge/Open%20in-Gitpod-green?logo=Gitpod)](https://gitpod.io/#https://github.com/uiwjs/react-clock)
+
+An analog clock for your react app.
+
+## Quick Start
+
+```jsx mdx:preview
+import React from "react";
+import ReactClock from '@uiw/react-clock';
+
+export default function Demo() {
+  return (
+    <ReactClock />
+  );
+}
+```
+
+## Props
+
+```typescript
+type ClockProps = {
+  width?: number;
+  height?: number;
+  value?: Date;
+  run?: boolean
+} & React.SVGProps<SVGSVGElement>;
+```
+
+## Development
+
+Runs the project in development mode.  
+
+```bash
+# Step 1, run first, listen to the component compile and output the .js and type .d.ts file
+npm run watch
+# Step 2, development mode, listen to compile preview website instance
+npm run start
+```
+
+Builds the app for production to the build folder.
+
+```bash
+npm run build
+```
+
+The build is minified and the filenames include the hashes.
+Your app is ready to be deployed!
+
+## Contributors
+
+As always, thanks to our amazing contributors!
+
+<a href="https://github.com/uiwjs/react-clock/graphs/contributors">
+  <img src="https://uiwjs.github.io/react-clock/CONTRIBUTORS.svg" />
+</a>
+
+Made with [contributors](https://github.com/jaywcjlove/github-action-contributors).
+
+### License
+
+Licensed under the MIT License.

core/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@uiw/react-clock",
+  "version": "1.2.5",
+  "description": "An analog clock for your React app.",
+  "homepage": "https://uiwjs.github.io/react-clock",
+  "main": "cjs/index.js",
+  "module": "esm/index.js",
+  "types": "esm/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/uiwjs/react-clock.git"
+  },
+  "license": "MIT",
+  "files": [
+    "dist.css",
+    "dist",
+    "cjs",
+    "esm",
+    "src"
+  ],
+  "keywords": [
+    "react-clock",
+    "react.js",
+    "react",
+    "react-component",
+    "component",
+    "components",
+    "clock"
+  ],
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.33",
+    "@types/react-dom": "^18.0.11",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}

src/index.less → core/src/index.less

@@ -1,10 +1,13 @@
-
 @keyframes u-clock-fade-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
-* {
+.u-clock * {
   transform-origin: inherit;
 }
 

src/index.tsx → core/src/index.tsx

@@ -5,13 +5,13 @@ export interface ClockProps extends React.SVGProps<SVGSVGElement> {
   width?: number;
   height?: number;
   value?: Date;
-  run?: boolean
+  run?: boolean;
 }
 
 const rotations = [0, 0, 0]; // [seconds, minutes, hours]
 
 export default function Clock(props: ClockProps = {}) {
-  const { width= 140, height =140, value, run = true, ...svgProps } = props;
+  const { width = 140, height = 140, value, run = true, ...svgProps } = props;
   const interval = useRef<NodeJS.Timeout>();
   const handHour = React.createRef<SVGLineElement>();
   const handMinute = React.createRef<SVGLineElement>();
@@ -34,9 +34,9 @@ export default function Clock(props: ClockProps = {}) {
       rotations[2] += 1;
     }
 
-    const secondsDeg = ((seconds / 60) * 360) + (rotations[0] * 360);
-    const minutesDeg = ((minutes / 60) * 360) + (rotations[1] * 360);
-    const hoursDeg = ((hours / 12) * 360) + ((minutes / 60) * 30) + (rotations[2] * 360);
+    const secondsDeg = (seconds / 60) * 360 + rotations[0] * 360;
+    const minutesDeg = (minutes / 60) * 360 + rotations[1] * 360;
+    const hoursDeg = (hours / 12) * 360 + (minutes / 60) * 30 + rotations[2] * 360;
     if (handHour.current) {
       handHour.current.style.transform = `rotate(${hoursDeg}deg)`;
     }
@@ -46,7 +46,6 @@ export default function Clock(props: ClockProps = {}) {
     if (handSecond.current) {
       handSecond.current.style.transform = `rotate(${secondsDeg}deg)`;
     }
-
   }
   useEffect(() => {
     handleTime();
@@ -58,13 +57,13 @@ export default function Clock(props: ClockProps = {}) {
         clearInterval(interval.current);
         interval.current = undefined;
       }
-    }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return (
     <svg
-      className="u-clock" 
-      viewBox="0 0 100 100" 
+      className="u-clock"
+      viewBox="0 0 100 100"
       color="#212121"
       fill="currentColor"
       width={width}
@@ -80,20 +79,40 @@ export default function Clock(props: ClockProps = {}) {
             strokeWidth={1}
             transform={`rotate(${30 * idx})`}
             strokeLinecap="round"
-            x1="50" 
-            y1="5" 
+            x1="50"
+            y1="5"
             x2="50"
             y2="10"
           />
         ))}
       </g>
-      <line ref={handHour} stroke="currentColor" className="u-clock-hour" strokeLinecap="round" strokeWidth="1.5" x1="50" y1="25" x2="50" y2="50" />
-      <line ref={handMinute} stroke="currentColor" className="u-clock-minute" strokeLinecap="round" strokeWidth="1.5" x1="50" y1="10" x2="50" y2="50" />
+      <line
+        ref={handHour}
+        stroke="currentColor"
+        className="u-clock-hour"
+        strokeLinecap="round"
+        strokeWidth="1.5"
+        x1="50"
+        y1="25"
+        x2="50"
+        y2="50"
+      />
+      <line
+        ref={handMinute}
+        stroke="currentColor"
+        className="u-clock-minute"
+        strokeLinecap="round"
+        strokeWidth="1.5"
+        x1="50"
+        y1="10"
+        x2="50"
+        y2="50"
+      />
       <circle cx="50" cy="50" r="3" />
       <g ref={handSecond} className="u-clock-second" stroke="currentColor" color="#F44336" strokeWidth="1">
         <line x1="50" y1="10" x2="50" y2="60" strokeLinecap="round" />
         <circle cx="50" cy="50" r="1.5" />
       </g>
     </svg>
   );
-}
+}

website/tsconfig.json → core/tsconfig.json

@@ -1,9 +1,9 @@
 {
   "extends": "../tsconfig",
-  "include": ["./"],
+  "include": ["src"],
   "compilerOptions": {
+    "outDir": "./cjs",
     "baseUrl": ".",
-    "emitDeclarationOnly": true,
     "noEmit": false
   }
-}
+}

lerna.json

@@ -0,0 +1,4 @@
+{
+  "version": "1.2.5",
+  "packages": ["www", "core"]
+}