corners - npm Package Compare versions

Comparing version 0.0.8 to 0.0.9

package.json

 {
   "name": "corners",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "private": false,
@@ -13,3 +13,3 @@ "files": [
   "scripts": {
-    "dev": "esbuild example/client.tsx --outfile=example/web/client.js --servedir=example/web --serve=3001 --bundle --minify --sourcemap",
+    "dev": "esbuild example/client.tsx --outfile=example/web/client.js --servedir=example/web --serve=6144 --bundle --minify --sourcemap",
     "build:example": "esbuild example/client.tsx --outfile=example/web/client.js --bundle --minify --sourcemap",
@@ -88,4 +88,4 @@ "predeploy": "yarn build:example",
   "bugs": {
-    "url": "https://github.com/jeremybanka/luum/issues"
+    "url": "https://github.com/jeremybanka/corners/issues"
   }
 }

README.md

 <hr>
 <div align="center">
-  <img alt="corners logo" src="./corners.png"/>
+  <img alt="corners logo" src="https://raw.githubusercontent.com/jeremybanka/corners/main/corners.png"/>
 </div>
@@ -36,2 +36,6 @@
 
+* [Features](#features)
+* [API](#api)
+* [Examples](#examples)
+
 ## Features
@@ -48,4 +52,63 @@
 
-### corners(...cornerFns).size(cornerSize)
+### corners
+```ts
+corners(...cornerFns).with({ cornerSize, noClipping, above, below }) => ComponentFactory
+```
 
+Creates a new component factory with the given corner functions. The corner functions are applied in the order they are given.
+
+| Argument   | Type                                               | Required? | Description                                                                       |
+| ---------- | -------------------------------------------------- | --------- | --------------------------------------------------------------------------------- |
+| cornerFns  | <code>Nullable<[DrawCorner](#drawcorner)>[]</code> | Yes       | 1, 2, or 4 functions that specify the corners for this factory in clockwise order |
+| cornerSize | `number`                                           | No        | Equivalent to `N` in css `border-radius: Npx`                                     |
+| noClipping | `boolean`                                          | No        | `true` is equivalent to css `overflow: visible`                                   |
+| above      | <code>Partial<[Layer](#layer)>[]</code>            | No        | Layers with the same shape as the component, but rendered above the component     |
+| below      | <code>Partial<[Layer](#layer)>[]</code>            | No        | Layers with the same shape as the component, but rendered below the component     |
+
+| Returns          | Type                                               | Description                                                                  |
+| ---------------- | -------------------------------------------------- | ---------------------------------------------------------------------------- |
+| ComponentFactory | <code>[ComponentFactory](#componentfactory)</code> | A new component factory with the given corner functions and options applied. |
+
+### DrawCorner 
+#### (p1, p2, idx) => pathPoints
+
+A function that draws a corner
+
+| Argument | Type                        | Required? | Description                                                                                      |
+| -------- | --------------------------- | --------- | ------------------------------------------------------------------------------------------------ |
+| p1       | `{ x: number; y: number; }` | Yes       | The first point of the corner                                                                    |
+| p2       | `{ x: number; y: number; }` | Yes       | The second point of the corner                                                                   |
+| idx      | `number`                    | Yes       | The index of the corner. `0` = top right, `1` = bottom right, `2` = bottom left, `3` = top left. |
+
+| Returns    | Type       | Description       |
+| ---------- | ---------- | ----------------- |
+| pathPoints | `string[]` | svg path commands |
+
+### Layer
+
+A layer takes the same shape as the component it is applied to.
+
+| Property | Type                | Required? | Description                    |
+| -------- | ------------------- | --------- | ------------------------------ |
+| color    | string              | Yes       | The color of the layer         |
+| x        | number              | Yes       | The x offset of the layer      |
+| y        | number              | Yes       | The y offset of the layer      |
+| blur     | number              | Yes       | The blur radius of the layer   |
+| spread   | number              | Yes       | The spread radius of the layer |
+| stroke   | <code>Stroke</code> | No        | The stroke of the layer        |
+
+## Examples
+
+### Make a "dog-eared" component
+
+```
+ /¯¯¯¯¯¯¯¯¯|
+/          |
+|          |
+|__________|
+```
+
+(it should look like a dog-eared page)
+
+
 ```jsx harmony
@@ -55,3 +118,3 @@ import type { FC } from "react"
 
-const upperLeftDogeared = corners(null, null, null, chamfer).size(20)
+const upperLeftDogeared = corners(null, null, null, chamfer).with({ cornerSize: 20 })
 
@@ -65,13 +128,32 @@ const DogearedDiv = upperLeftDogeared.div
 )
+```
 
+### Make a "squircled" component with a drop shadow
+
+
+
+```jsx harmony
+import type { FC } from "react"
+import { rounded } from "corners"
+
+const LAYER: Record<string, Partial<Layer>> = {
+  FAINT_SHADOW: { color: `#0003`, spread: -4, blur: 12, y: -4 },
+  LIGHT_FILL: { color: `#f3f3f3` },
+}
+const RoundedSpanWithShadow = rounded.span.with({
+  cornerSize: 15,
+  below: [LAYER.LIGHT_FILL, LAYER.FAINT_SHADOW],
+  noClipping: true,
+})
+
+const MyComponent: FC = () => (
+  <RoundedSpanWithShadow>
+    Hello, World!
+  </RoundedSpanWithShadow>
+)
 ```
 
-| Argument   | Type                                             | Required? | Description                                                                       |
-| ---------- | ------------------------------------------------ | --------- | --------------------------------------------------------------------------------- |
-| cornerFns  | <code>Maybe<[DrawCorner](#draw-corner)>[]</code> | Yes       | 1, 2, or 4 functions that specify the corners for this factory in clockwise order |
-| cornerSize | number                                           | Yes       | Equivalent to the `N`px given in css `border-radius`                              |
 
-
 ## LICENSE
 
 MIT

src/react/createComponentFactory.ts

@@ -39,2 +39,3 @@ import type { AllHTMLAttributes, FC, ForwardRefExoticComponent } from "react"
     const options = { ...DEFAULT_OPTIONS, ...baseOptions, ...additionalOptions }
+    // @ts-expect-error union type too complex. it's okay; this is internal
     return withCorners(WrappedComponent, options, ...corners)
@@ -70,5 +71,5 @@ }
   // or
-  // rounded.div.with({ cornerSize: 10, shadow: { blur: 2, color: "blue" } })
+  // rounded.div.with({ cornerSize: 10, below: [{ blur: 2, color: "blue" }] })
 
   return componentFactoryWithTagProps
 }

No alert changes

Improved metrics

Total package byte prevSize

135496

increased by2.93%

Lines of code

1788

increased by0.06%

Number of lines in readme file

156

increased by110.81%

No dependency changes