corners - npm Package Compare versions

Comparing version 0.0.0 to 0.0.1

package.json

 {
   "name": "corners",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "private": false,
+  "main": "dist/index.js",
+  "types": "src/index.tsx",
   "scripts": {
-    "serve": "nodemon ./example/dist/server.js --watch",
+    "serve": "nodemon ./example/dist/server.js",
     "build:server": "node ./example/esbuild.config.server.js",
     "build:client": "node ./example/esbuild.config.client.js",
-    "prebuild": "rm -rf example/dist && mkdir example/dist && cp example/src/index.html example/dist",
-    "build": "concurrently \"yarn build:server\" \"yarn build:client\"",
-    "dev": "concurrently \"yarn build\" \"yarn serve\"",
+    "prebuild:example": "rm -rf example/dist && mkdir example/dist && cp example/src/index.html example/dist",
+    "build:example": "concurrently \"yarn build:server\" \"yarn build:client\"",
+    "dev": "concurrently \"yarn build:example\" \"yarn serve\"",
+    "build": "node ./esbuild.config.js",
     "pretest": "tsc --noEmit",
@@ -25,2 +28,3 @@ "test": "jest --watch --no-coverage",
     "@banka/eslint-config": "^1.0.0",
+    "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
@@ -50,2 +54,4 @@ "@ls-lint/ls-lint": "^1.10.0",
     "prettier": "^2.4.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "ts-node": "^10.2.1",
@@ -67,7 +73,8 @@ "tsconfig-paths": "^3.11.0",
   "dependencies": {
-    "@emotion/react": "^11.7.1",
-    "@react-hook/resize-observer": "^1.2.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "@react-hook/resize-observer": "^1.2.5"
+  },
+  "peerDependencies": {
+    "react": "<=17.0.0",
+    "react-dom": "<=17.0.0"
   }
 }

README.md

@@ -1,5 +0,4 @@
-Thanks @rafaph/ts-app-template
-
+Let's face it: `border-radius` is terrible.
 ## License
 
 MIT

src/utils/svg.ts

@@ -0,1 +1,3 @@
+import { interpolate } from "./interpolate"
+
 type SvgCommandCode = `C` | `L` | `M` | `Q` | `S`
@@ -7,3 +9,3 @@
 
-interface Point2d {
+type Point2d = {
   x: number
@@ -13,9 +15,10 @@ y: number
 
-const drawAngledCorner = (p1: Point2d, p2: Point2d, idx: number) =>
-  [
-    writePathPoint(p1.x, p1.y, idx === 0 ? `M` : `L`),
-    writePathPoint(p2.x, p2.y, `L`),
-  ].join(`\n`) + `\n`
+export type DrawCorner = (p1: Point2d, p2: Point2d, idx: number) => string[]
 
-const drawRoundedCornerNaively = (p1: Point2d, p2: Point2d, idx: number) => {
+export const chamfer: DrawCorner = (p1, p2, idx) => [
+  writePathPoint(p1.x, p1.y, idx === 0 ? `M` : `L`),
+  writePathPoint(p2.x, p2.y, `L`),
+]
+
+export const straight: DrawCorner = (p1, p2, idx) => {
   const isEven = idx % 2 === 0
@@ -26,18 +29,20 @@ const ex = {
   }
-  return (
-    [
-      writePathPoint(p1.x, p1.y, idx === 0 ? `M` : `L`),
-      writePathPoint(ex.x, ex.y, `C`),
-      writePathPoint(ex.x, ex.y),
-      writePathPoint(p2.x, p2.y),
-    ].join(`\n`) + `\n`
-  )
+  return [writePathPoint(ex.x, ex.y, idx === 0 ? `M` : `L`)]
 }
 
-type Interpolate = (from: number, to: number, completionRatio: number) => number
+export const roundedNaive: DrawCorner = (p1, p2, idx) => {
+  const isEven = idx % 2 === 0
+  const ex = {
+    x: isEven ? p2.x : p1.x,
+    y: isEven ? p1.y : p2.y,
+  }
+  return [
+    writePathPoint(p1.x, p1.y, idx === 0 ? `M` : `L`),
+    writePathPoint(ex.x, ex.y, `C`),
+    writePathPoint(ex.x, ex.y),
+    writePathPoint(p2.x, p2.y),
+  ]
+}
 
-const interpolate: Interpolate = (from, to, completionRatio = 0.5) =>
-  from + completionRatio * (to - from)
-
-const drawRoundedCorner = (p1: Point2d, p2: Point2d, idx: number): string => {
+export const round: DrawCorner = (p1, p2, idx) => {
   const isEven = idx % 2 === 0
@@ -64,29 +69,24 @@ const axis1 = isEven ? `x` : `y`
 
-  return (
-    [
-      writePathPoint(p1.x, p1.y, idx === 0 ? `M` : `L`),
-      writePathPoint(c0.x, c0.y, `C`),
-      writePathPoint(c1.x, c1.y),
-      writePathPoint(c2.x, c2.y),
-      writePathPoint(s0.x, s0.y, `S`),
-      writePathPoint(p2.x, p2.y),
-    ].join(`\n`) + `\n`
-  )
+  return [
+    writePathPoint(p1.x, p1.y, idx === 0 ? `M` : `L`),
+    writePathPoint(c0.x, c0.y, `C`),
+    writePathPoint(c1.x, c1.y),
+    writePathPoint(c2.x, c2.y),
+    writePathPoint(s0.x, s0.y, `S`),
+    writePathPoint(p2.x, p2.y),
+  ]
 }
 
-export const drawClipPath = (
+// export type DrawCorners = cornerPoints
+
+export const drawCorners = (
   height: number,
   width: number,
   cornerSize: number,
-  cornerFunction: (
-    p1: Point2d,
-    p2: Point2d,
-    idx: number,
-    cornerSize: number
-  ) => string
+  corners: [DrawCorner, DrawCorner, DrawCorner, DrawCorner]
 ): string => {
   if (!height || !width || !cornerSize) return ``
-  const realCornerSize = Math.min(cornerSize, Math.min(height, width) / 2)
-  const cornerHeight = realCornerSize / height
-  const cornerWidth = realCornerSize / width
+  const maxCornerSize = Math.min(cornerSize, Math.min(height, width) / 2)
+  const cornerHeight = maxCornerSize / height
+  const cornerWidth = maxCornerSize / width
 
@@ -101,22 +101,67 @@ const cornerPoints = [
   const path =
-    cornerPoints.reduce(
-      (acc, { p1, p2 }, idx) => acc + cornerFunction(p1, p2, idx, cornerSize),
-      ``
-    ) + `Z`
+    cornerPoints.reduce((acc, { p1, p2 }, idx) => {
+      const drawCorner = corners[idx]
+      return acc + drawCorner(p1, p2, idx).join(`\n`) + `\n`
+    }, ``) + `Z`
   return path
 }
 
-export type DrawPath = (
+type SvgPath = string
+
+export type Pathfinder = (
   height: number,
   width: number,
-  cornerSize: number
-) => string
+  cornerSize?: number
+) => SvgPath
 
-export const drawRoundedBoxNaively: DrawPath = (height, width, cornerRadius) =>
-  drawClipPath(height, width, cornerRadius, drawRoundedCornerNaively)
+export type CreatePathfinder = (
+  defaultCornerSize: number,
+  ...corners: (DrawCorner | null)[]
+) => Pathfinder
 
-export const drawChamferedBox: DrawPath = (height, width, cornerRadius) =>
-  drawClipPath(height, width, cornerRadius, drawAngledCorner)
-
-export const drawRoundedBox: DrawPath = (height, width, cornerRadius) =>
-  drawClipPath(height, width, cornerRadius, drawRoundedCorner)
+/* eslint-disable no-case-declarations */
+export const createPathfinder: CreatePathfinder = (
+  defaultCornerSize,
+  ...corners
+) => {
+  switch (corners.length) {
+    case 0:
+      throw new Error(`No corners provided`)
+    case 1:
+      const corner = corners[0] ?? straight
+      return (height: number, width: number, cornerSize?: number) =>
+        drawCorners(height, width, cornerSize || defaultCornerSize, [
+          corner,
+          corner,
+          corner,
+          corner,
+        ])
+    case 2:
+      const cornerX = corners[0] ?? straight
+      const cornerY = corners[1] ?? straight
+      return (height: number, width: number, cornerSize?: number) =>
+        drawCorners(height, width, cornerSize || defaultCornerSize, [
+          cornerX,
+          cornerY,
+          cornerX,
+          cornerY,
+        ])
+    case 3:
+      throw new Error(`pass 1, 2, or 4 corners`)
+    case 4:
+      const cornerA = corners[0] ?? straight
+      const cornerB = corners[1] ?? straight
+      const cornerC = corners[2] ?? straight
+      const cornerD = corners[3] ?? straight
+      return (height: number, width: number, cornerSize?: number) =>
+        drawCorners(height, width, cornerSize || defaultCornerSize, [
+          cornerA,
+          cornerB,
+          cornerC,
+          cornerD,
+        ])
+    default:
+      throw new Error(`pass 2 or 4 corners`)
+  }
+}
+/* eslint-enable no-case-declarations */

tsconfig.json

@@ -32,3 +32,10 @@ {
   },
-  "include": ["src", "test", "example", "jest.config.js", "babel.config.js"]
+  "include": [
+    "src",
+    "test",
+    "example",
+    "esbuild.config.js",
+    "jest.config.js",
+    "babel.config.js"
+  ]
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Misc. License Issues

License

(Experimental) A package's licensing information has fine-grained problems.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

106280

increased by596.37%

Dependency count

3

decreased by-25%

Number of package files

26

increased by18.18%

Lines of code

558

increased by43.44%

Worsened metrics

Dev dependency count

34

increased by9.68%

Number of medium license alerts

1

increased byInfinity%

Number of lines in readme file

5

decreased by-16.67%

Number of low supply chain risk alerts

2

increased by100%

Dependency changes

• + Addedreact@17.0.0(transitive)

• + Addedreact-dom@17.0.0(transitive)

• - Removed@emotion/react@^11.7.1

• - Removedreact@^17.0.2

• - Removedreact-dom@^17.0.2

• - Removed@babel/code-frame@7.26.2(transitive)

• - Removed@babel/generator@7.26.2(transitive)

• - Removed@babel/helper-module-imports@7.25.9(transitive)

• - Removed@babel/helper-string-parser@7.25.9(transitive)

• - Removed@babel/helper-validator-identifier@7.25.9(transitive)

• - Removed@babel/parser@7.26.2(transitive)

• - Removed@babel/runtime@7.26.0(transitive)

• - Removed@babel/template@7.25.9(transitive)

• - Removed@babel/traverse@7.25.9(transitive)

• - Removed@babel/types@7.26.0(transitive)

• - Removed@emotion/babel-plugin@11.13.5(transitive)

• - Removed@emotion/cache@11.13.5(transitive)

• - Removed@emotion/hash@0.9.2(transitive)

• - Removed@emotion/memoize@0.9.0(transitive)

• - Removed@emotion/react@11.13.5(transitive)

• - Removed@emotion/serialize@1.3.3(transitive)

• - Removed@emotion/sheet@1.4.0(transitive)

• - Removed@emotion/unitless@0.10.0(transitive)

• - Removed@emotion/use-insertion-effect-with-fallbacks@1.1.0(transitive)

• - Removed@emotion/utils@1.4.2(transitive)

• - Removed@emotion/weak-memoize@0.4.0(transitive)

• - Removed@jridgewell/gen-mapping@0.3.5(transitive)

• - Removed@jridgewell/resolve-uri@3.1.2(transitive)

• - Removed@jridgewell/set-array@1.2.1(transitive)

• - Removed@jridgewell/sourcemap-codec@1.5.0(transitive)

• - Removed@jridgewell/trace-mapping@0.3.25(transitive)

• - Removed@types/parse-json@4.0.2(transitive)

• - Removedbabel-plugin-macros@3.1.0(transitive)

• - Removedcallsites@3.1.0(transitive)

• - Removedconvert-source-map@1.9.0(transitive)

• - Removedcosmiconfig@7.1.0(transitive)

• - Removedcsstype@3.1.3(transitive)

• - Removeddebug@4.3.7(transitive)

• - Removederror-ex@1.3.2(transitive)

• - Removedescape-string-regexp@4.0.0(transitive)

• - Removedfind-root@1.1.0(transitive)

• - Removedfunction-bind@1.1.2(transitive)

• - Removedglobals@11.12.0(transitive)

• - Removedhasown@2.0.2(transitive)

• - Removedhoist-non-react-statics@3.3.2(transitive)

• - Removedimport-fresh@3.3.0(transitive)

• - Removedis-arrayish@0.2.1(transitive)

• - Removedis-core-module@2.15.1(transitive)

• - Removedjsesc@3.0.2(transitive)

• - Removedjson-parse-even-better-errors@2.3.1(transitive)

• - Removedlines-and-columns@1.2.4(transitive)

• - Removedms@2.1.3(transitive)

• - Removedparent-module@1.0.1(transitive)

• - Removedparse-json@5.2.0(transitive)

• - Removedpath-parse@1.0.7(transitive)

• - Removedpath-type@4.0.0(transitive)

• - Removedpicocolors@1.1.1(transitive)

• - Removedreact@17.0.2(transitive)

• - Removedreact-dom@17.0.2(transitive)

• - Removedreact-is@16.13.1(transitive)

• - Removedregenerator-runtime@0.14.1(transitive)

• - Removedresolve@1.22.8(transitive)

• - Removedresolve-from@4.0.0(transitive)

• - Removedsource-map@0.5.7(transitive)

• - Removedstylis@4.2.0(transitive)

• - Removedsupports-preserve-symlinks-flag@1.0.0(transitive)

• - Removedyaml@1.10.2(transitive)