hello world

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "public",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

.changeset/silent-poems-rescue.md

@@ -0,0 +1,5 @@
+---
+"@taep96/squircle-path": major
+---
+
+hello world

.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.eslintrc.json

@@ -0,0 +1,5 @@
+{
+  "extends": ["plugin:@typescript-eslint/strict-type-checked", "plugin:@typescript-eslint/stylistic-type-checked", "prettier"],
+  "ignorePatterns": "dist",
+  "parserOptions": { "project": true }
+}

.github/workflows/main.yml

@@ -0,0 +1,22 @@
+name: CI
+on:
+  push:
+    branches:
+      - "**"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v3
+
+      - name: Install Bun
+        uses: oven-sh/setup-bun@v1
+
+      - name: Install dependencies
+        run: bun install --frozen-lockfile
+
+      - name: Run the CI script
+        run: bun ci

.github/workflows/publish.yml

@@ -0,0 +1,29 @@
+name: Publish
+on:
+  push:
+    branches:
+      - "main"
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v3
+
+      - name: Install Bun
+        uses: oven-sh/setup-bun@v1
+
+      - name: Install dependencies
+        run: bun install --frozen-lockfile
+
+      - name: Create release PR or publish
+        uses: changesets/action@v1
+        with:
+          publish: bun run publish
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -0,0 +1,5 @@
+# dependencies
+node_modules/
+
+# build output
+dist/

.prettierrc.json

@@ -0,0 +1,3 @@
+{
+  "printWidth": 140
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 taep96
+
+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.

README.md

@@ -0,0 +1,39 @@
+# squircle-path
+
+Generate squircle paths
+
+## Installation
+
+```sh
+bun install @taep96/squircle-path
+```
+
+## Usage
+
+<!-- prettier-ignore-start -->
+
+```tsx
+import { squirclePath } from "@taep96/squircle-path";
+
+const squircle = squirclePath({ width: 256, height: 256, squarness: 0.5 });
+
+⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
+
+<img
+  style={{ "clip-path": `path("${squircle}")` }}
+  src="./image.png"
+  alt="squircle"
+  width="256"
+  height="256"
+/>
+```
+
+<!-- prettier-ignore-end -->
+
+## Options
+
+| Name      | Type    | Default | Description                                                                        |
+| --------- | ------- | ------- | ---------------------------------------------------------------------------------- |
+| width     | number  |         | Width of the squircle                                                              |
+| height    | number  |         | Height of the squircle                                                             |
+| squarness | number? | 0.3     | Squarness of the squircle. 0 is a circle, 1 is a square, 0.5 is a perfect squircle |

bun.build.ts

@@ -0,0 +1,8 @@
+import dts from "bun-plugin-dts";
+
+await Bun.build({
+  entrypoints: ["./src/index.ts"],
+  outdir: "./dist",
+  external: ["@taep96/svg-path-utils"],
+  plugins: [dts()],
+});

package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@taep96/squircle-path",
+  "version": "0.0.0",
+  "description": "Generate squircle paths",
+  "keywords": [
+    "squircle",
+    "clip-path",
+    "path",
+    "svg",
+    "typescript",
+    "ts"
+  ],
+  "license": "MIT",
+  "repository": "github:taep96/squircle-path",
+  "homepage": "https://taep96.moe/projects/squircle-path",
+  "author": "taep96 <[email protected]> (https://taep96.moe/)",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "bun bun.build.ts",
+    "dev": " bun test --watch",
+    "lint": "tsc && eslint . --cache --cache-location node_modules/.cache/eslint",
+    "format": "prettier . --check --cache --write",
+    "ci": "bun lint && bun test && bun run build",
+    "publish": "bun ci && changeset publish"
+  },
+  "dependencies": {
+    "@taep96/svg-path-utils": "^1.0.0"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.27.1",
+    "@types/bun": "latest",
+    "@typescript-eslint/eslint-plugin": "^6.16.0",
+    "@typescript-eslint/parser": "^6.16.0",
+    "bun-plugin-dts": "^0.2.1",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "prettier": "^3.1.1",
+    "typescript": "^5.3.3"
+  }
+}

src/index.test.ts

@@ -0,0 +1,14 @@
+import { describe, expect, it, beforeEach } from "bun:test";
+import { squirclePath } from "./index";
+
+let path: string;
+
+describe("Path", () => {
+  beforeEach(() => {
+    path = squirclePath({ width: 100, height: 100 });
+  });
+
+  it("matches the expected output", () => {
+    expect(path).toEqual("M 0 50 C 0 8.888 8.888 0 50 0 S 100 8.888 100 50 S 91.111 100 50 100 S 0 91.111 0 50");
+  });
+});

src/index.ts

@@ -0,0 +1,43 @@
+// Thanks to https://github.com/nora2605 for the math
+import { Path } from "@taep96/svg-path-utils";
+
+interface squirclePathProps {
+  width: number;
+  height: number;
+  squareness?: number;
+}
+
+export function squirclePath({ width, height, squareness = 0.3 }: squirclePathProps) {
+  const s = 5 / 9 + (8 / 9) * squareness;
+
+  const halfWidth = width / 2;
+  const halfHeight = height / 2;
+
+  const toKth = (n: number) => Math.trunc(n * 1000) / 1000;
+
+  const sLeft = toKth((1 - s) * halfWidth);
+  const sTop = toKth((1 - s) * halfHeight);
+  const sRight = toKth((1 + s) * halfWidth);
+  const sBottom = toKth((1 + s) * halfHeight);
+
+  return new Path()
+    .M([0, halfHeight])
+    .C([
+      [0, sTop],
+      [sLeft, 0],
+      [halfWidth, 0],
+    ])
+    .S([
+      [width, sTop],
+      [width, halfHeight],
+    ])
+    .S([
+      [sRight, height],
+      [halfWidth, height],
+    ])
+    .S([
+      [0, sBottom],
+      [0, halfHeight],
+    ])
+    .toString();
+}

tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    /* Base Options */
+    "lib": ["ESNext"],
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleDetection": "force",
+    "allowJs": true,
+
+    /* Bundler mode */
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    /* Linting */
+    "skipLibCheck": true,
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "noFallthroughCasesInSwitch": true,
+    "forceConsistentCasingInFileNames": true
+  }
+}