onno - npm Package Compare versions

Comparing version 1.0.0 to 2.0.0-0

package.json

 {
   "name": "onno",
+  "type": "module",
   "license": "MIT",
-  "version": "1.0.0",
-  "homepage": "https://onnojs.com",
-  "description": "Responsive style props for building themed design systems",
-  "author": "Matthew Wagerfield <[e-mail]>",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/wagerfield/onno.git"
+  "version": "2.0.0-0",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "author": {
+    "name": "Matthew Wagerfield",
+    "email": "[e-mail]",
+    "url": "https://matthew.wagerfield.com"
   },
-  "bugs": {
-    "url": "https://github.com/wagerfield/onno/issues"
+  "scripts": {
+    "build": "pkgroll",
+    "lint": "prettier --write .",
+    "test": "vitest run --coverage",
+    "clean": "rm -rf coverage dist",
+    "changelog": "pnpm auto-changelog",
+    "prepare": "husky install",
+    "release": "release-it"
   },
-  "keywords": [
-    "onno",
-    "css-in-js",
-    "styled-system",
-    "styled-components",
-    "emotion"
-  ],
-  "main": "cjs/index.js",
-  "module": "esm/index.js",
-  "types": "types/index.d.ts",
-  "files": [
-    "cjs",
-    "esm",
-    "types"
-  ],
+  "prettier": {
+    "semi": false
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "auto-changelog": {
+    "package": true,
+    "output": "changelog.md",
+    "startingVersion": "0.5"
+  },
+  "lint-staged": {
+    "**/*.ts": [
+      "prettier --write",
+      "vitest related --run"
+    ],
+    "**/*.{json,md}": [
+      "prettier --write"
+    ]
+  },
   "dependencies": {
-    "csstype": "2.6.5"
+    "clsx": "2.0.0"
   },
-  "gitHead": "efb54065674ceea706e27d76da433ac36dfe33c1"
+  "devDependencies": {
+    "@commitlint/cli": "17.6.7",
+    "@commitlint/config-conventional": "17.6.7",
+    "@vitest/coverage-v8": "0.34.1",
+    "auto-changelog": "2.4.0",
+    "husky": "8.0.3",
+    "lint-staged": "13.2.3",
+    "pkgroll": "1.11.0",
+    "prettier": "3.0.1",
+    "release-it": "16.1.3",
+    "typescript": "5.1.6",
+    "vitest": "0.34.1"
+  }
 }

readme.md

@@ -1,11 +0,11 @@
-# [![onno](https://raw.githubusercontent.com/wagerfield/onno/master/assets/onno.svg?sanitize=true)][onno]
+# [![onno](https://raw.github.com/wagerfield/onno/main/assets/onno.svg)][onno]
 
-[![Code Coverage](https://img.shields.io/codecov/c/github/wagerfield/onno.svg?color=4C8&style=flat-square)][codecov]
-[![Bundle Size](https://img.shields.io/bundlephobia/minzip/onno.svg?color=4C8&style=flat-square&label=size)][bundlephobia]
-[![Build Status](https://img.shields.io/circleci/build/github/wagerfield/onno.svg?color=4C8&style=flat-square)][circleci]
-[![License](https://img.shields.io/github/license/wagerfield/onno.svg?color=4C8&style=flat-square)][license]
+[![Bundle Size](https://img.shields.io/bundlephobia/minzip/onno?style=flat-square&logo=npm&logoColor=FFF&label=size&color=4C8)][bundlephobia-onno]
+[![Code Coverage](https://img.shields.io/codecov/c/gh/wagerfield/onno?style=flat-square&logo=codecov&logoColor=FFF&color=4C8)][codecov]
+[![Workflow Status](https://img.shields.io/github/actions/workflow/status/wagerfield/onno/test.yml?style=flat-square&logo=github&logoColor=FFF&color=4C8)][workflow]
+[![License](https://img.shields.io/github/license/wagerfield/onno?style=flat-square&color=4C8)][license]
 
-Responsive style props for building themed design systems.
+Tiny ([510B][bundlephobia-onno]) utility for composing class variants using `clsx`
 
-    yarn add onno
+    pnpm add onno
 
@@ -15,67 +15,114 @@ ## Features
 - Framework agnostic
-- Zero dependencies
-- First class support for themes and design tokens
-- Works with any CSS in JS library that supports object styles like [Styled Components][styled-components] and [Emotion][emotion]
-- Written in [TypeScript][typescript] with comprehensive type definitions and interfaces
+- Single _tiny_ dependency on `clsx` ([330B][bundlephobia-clsx])
+- Written in [TypeScript][typescript] with lovely [type helpers](#typescript)
 - Rigorously tested with [100% code coverage][codecov]
+- Perfect companion to [Tailwind CSS][tailwindcss]
 
 ## Usage
 
-```jsx
-import styled from "styled-components"
-import { colorSet, spaceSet } from "onno"
+```js
+const button = onno({
+  variants: {
+    intent: {
+      primary: "bg-blue-600 text-white",
+      secondary: "bg-gray-200 text-black",
+    },
+    size: {
+      sm: "h-8 px-1",
+      md: "h-10 px-2",
+      lg: "h-12 px-3",
+    },
+  },
+})
 
-const Box = styled.div(colorSet, spaceSet)
+// "bg-blue-600 text-white h-10 px-2"
+const classes = button({
+  intent: "primary",
+  size: "md",
+})
+```
 
-// [{ padding: "16px" }]
-<Box p={4} />
+### Variants
 
-// [{ margin: "-32px" }]
-<Box m={-5} />
+Todo
 
-// [{ marginLeft: "8px", marginRight: "8px" }, { paddingBottom: "4px" }]
-<Box mx={3} pb={2} />
+### Defaults
 
-// [{ backgroundColor: "coral" }, { color: "ivory" }]
-<Box backgroundColor="coral" color="ivory" />
+Todo
 
-// [{ background: "url(onno.png) center" }]
-<Box bg="url(onno.png) center" />
+### Baseline Classes
+
+Todo
+
+### Compound Classes
+
+Todo
+
+### Additional Classes
+
+Todo
+
+## TypeScript
+
+Use `OnnoProps` to infer variant props from an `OnnoFunction`
+
+```ts
+import { onno, type OnnoProps } from "onno"
+
+export const button = onno({
+  variants: {
+    size: {
+      sm: "pretty small",
+      lg: "really large",
+    },
+  },
+})
+
+export type ButtonProps = OnnoProps<typeof button>
+export type ButtonSizeType = ButtonProps["size"] // "sm" | "lg" | undefined
 ```
 
-## Documentation
+Note that inferred `OnnoProps` include the `className` option alongside the variant types:
 
-- [Features](https://github.com/wagerfield/onno/blob/master/docs/features.md)
-- [Render Functions](https://github.com/wagerfield/onno/blob/master/docs/render-functions.md)
-- [API](https://github.com/wagerfield/onno/blob/master/docs/api.md)
-- [Utils](https://github.com/wagerfield/onno/blob/master/docs/utils.md)
+```ts
+export type ButtonClassNameType = ButtonProps["className"] // clsx.ClassValue
+```
 
-## Credits
+By default all variants are _optional_. To require one or more variants, pass a union of _required_ variant keys as the second argument to the `OnnoProps` type:
 
-Onno is an iteration of [Styled System][styled-system] written in [TypeScript][typescript] from the ground up. The core ideas are indebted to the brilliant work of [Brent Jackson][jxnblk] and the [numerous contributors][styled-system-contributors] to this library.
+```ts
+import { onno, type OnnoProps } from "onno"
 
-Onno started life as a rewrite of Styled System in TypeScript following a [discussion on GitHub][styled-system-comment]. However, during the course of this rewrite, a number of new ideas, features and refinements to Styled System's API were introduced that eventually warranted another library.
+export const button = onno({
+  variants: {
+    disabled: "not allowed",
+    intent: {
+      primary: "very punchy",
+      secondary: "quite normal",
+    },
+    size: {
+      sm: "pretty small",
+      lg: "really large",
+    },
+  },
+})
 
-The additional features introduced by onno are [presented in detail here](https://github.com/wagerfield/onno/blob/master/docs/features.md#features).
+export type ButtonProps = OnnoProps<typeof button, "intent" | "size">
 
-## Author
+// Error: Property 'intent' is missing in type '{ size: "md" }'
+const buttonProps: ButtonProps = { size: "md" }
+```
 
-[Matthew Wagerfield][github]
-
 ## License
 
-[MIT][license]
+[MIT][license] © [Matthew Wagerfield][wagerfield]
 
 [onno]: https://onnojs.com
-[github]: https://github.com/wagerfield
-[license]: https://github.com/wagerfield/onno/blob/master/license
-[bundlephobia]: https://bundlephobia.com/result?p=onno
-[circleci]: https://circleci.com/gh/wagerfield/onno
+[wagerfield]: https://github.com/wagerfield
 [codecov]: https://codecov.io/gh/wagerfield/onno
-[emotion]: https://emotion.sh
-[styled-components]: https://styled-components.com
-[styled-system]: https://styled-system.com
-[styled-system-contributors]: https://github.com/styled-system/styled-system/graphs/contributors
-[styled-system-comment]: https://github.com/styled-system/styled-system/issues/463#issuecomment-487167817
+[license]: https://github.com/wagerfield/onno/blob/main/license
+[workflow]: https://github.com/wagerfield/onno/actions/workflows/test.yml
+[bundlephobia-clsx]: https://bundlephobia.com/package/clsx@2.0.0
+[bundlephobia-onno]: https://bundlephobia.com/package/onno@2.0.0
 [typescript]: https://www.typescriptlang.org
-[jxnblk]: https://jxnblk.com
+[tailwindcss]: https://tailwindcss.com

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

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

211178

increased by76.14%

Number of lines in readme file

128

increased by58.02%

Is type module

Yes

Worsened metrics

Dev dependency count

11

increased byInfinity%

Number of package files

27

decreased by-10%

Lines of code

344

decreased by-91.66%

Number of low maintenance alerts

1

increased byInfinity%

Number of low quality alerts

3

increased byInfinity%

Number of low supply chain risk alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedclsx@2.0.0

• + Addedclsx@2.0.0(transitive)

• - Removedcsstype@2.6.5

• - Removedcsstype@2.6.5(transitive)