@patternfly/pfe-avatar - npm Package Compare versions

Comparing version 1.12.3 to 2.0.0-next.0

package.json

 {
   "name": "@patternfly/pfe-avatar",
-  "pfelement": {
-    "className": "PfeAvatar",
-    "elementName": "pfe-avatar",
-    "preview": "squares.png"
+  "license": "MIT",
+  "version": "2.0.0-next.0",
+  "customElements": "custom-elements.json",
+  "type": "module",
+  "main": "./pfe-avatar.js",
+  "module": "./pfe-avatar.js",
+  "types": "./pfe-avatar.d.ts",
+  "exports": {
+    ".": {
+      "esbuild": "./pfe-avatar.ts",
+      "default": "./pfe-avatar.js"
+    },
+    "./*": {
+      "esbuild": "./*.ts",
+      "default": "./*.js"
+    }
   },
-  "version": "1.12.3",
-  "description": "Avatar for PatternFly Elements",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "⚙️-----UTIL-------⚙️": "❓ Manages the repo",
+    "clean": "git clean -fX -e node_modules -e tsconfig.tsbuildinfo",
+    "🚚-----DIST-------🚚": "❓ Publish packages",
+    "prepublishOnly": "npm run build",
+    "👷‍♀️-----BUILD------👷‍♀️": "❓ Prepare dist artifacts",
+    "analyze": "cem analyze",
+    "build": "run-s build:*",
+    "build:clean": "npm run clean",
+    "build:esbuild": "node ../../scripts/build.js --include pfe-avatar",
+    "build:analyze": "npm run analyze",
+    "build:types": "tsc -b .",
+    "🧑‍🔬-----TEST-------🧑‍🔬": "❓ Test packages",
+    "test": "wtr --files './test/*.spec.ts' --config ../../web-test-runner.config.js",
+    "👷‍♀️-----DEV--------👷‍♀️": "❓ Development aids",
+    "test:watch": "npm test -- --watch",
+    "watch:analyze": "npm run analyze -- --watch",
+    "watch:types": "tsc -w"
+  },
   "keywords": [
     "web-components",
+    "avatar",
     "html"
@@ -19,40 +53,26 @@ ],
   },
-  "browserslist": [
-    "last 2 versions",
-    "Firefox >= 78",
-    "iOS >= 8",
-    "ie 11"
-  ],
-  "publishConfig": {
-    "access": "public"
+  "bugs": {
+    "url": "https://github.com/patternfly/patternfly-elements/issues"
   },
-  "main": "./dist/pfe-avatar.umd.js",
-  "module": "./dist/pfe-avatar.js",
-  "unpkg": "./dist/pfe-avatar.umd.min.js",
   "files": [
-    "dist"
+    "!*.ts",
+    "custom-elements.json",
+    "**/*.LEGAL.txt",
+    "**/*.css",
+    "**/*.d.ts",
+    "**/*.js",
+    "**/*.js.map",
+    "!custom-elements-manifest.config.js",
+    "!demo/*",
+    "!docs/*",
+    "!test/*"
   ],
-  "scripts": {
-    "build": "../../node_modules/.bin/gulp && ../../node_modules/.bin/prettier --ignore-path ../../.prettierignore --write '**/*.{js,json}'",
-    "dev": "../../node_modules/.bin/gulp dev",
-    "watch": "../../node_modules/.bin/gulp watch",
-    "test": "../../node_modules/.bin/wct --configFile ../../wct.conf.json elements/pfe-avatar/test/"
-  },
   "contributors": [
-    {
-      "name": "Michael Clayton"
-    }
+    "Michael Clayton <[e-mail]>",
+    "Benny Powers <[e-mail]>"
   ],
-  "license": "MIT",
-  "devDependencies": {
-    "@patternfly/pfe-sass": "^1.12.3"
-  },
   "dependencies": {
-    "@patternfly/pfelement": "^1.12.3"
-  },
-  "generator-pfelement-version": "0.6.8",
-  "bugs": {
-    "url": "https://github.com/patternfly/patternfly-elements/issues"
-  },
-  "gitHead": "8cad71b1de7cb39aa77372fa8ae228b813e700c5"
+    "@patternfly/pfe-core": "^2.0.0-next.0",
+    "lit": "^2.1.2"
+  }
 }

README.md

@@ -1,5 +0,26 @@
-# PFElements Avatar Element
+# PatternFly Elements Avatar
+         
+`<pfe-avatar>` is an element for displaying a user's avatar image. If the user in question has provided a custom avatar, provide it and it will be displayed. If they don't, a nice colored pattern will be generated based on their name. A specific name will always generate the same pattern, so users' avatars will stay static without the need for storing their generated image.
 
-`pfe-avatar` is an element for displaying a user's avatar image. If the user in question has provided a custom avatar, provide it and it will be displayed. If they don't, a nice colored pattern will be generated based on their name. A specific name will always generate the same pattern, so users' avatars will stay static without the need for storing their generated image.
+Read more about Avatar in the [PatternFly Elements Avatar documentation](https://patternflyelements.org/components/avatar)
 
+##  Installation
+
+Load `<pfe-avatar>` via CDN:
+
+```html
+<script src="https://unpkg.com/@patternfly/pfe-avatar?module"></script>
+```
+
+Or, if you are using [NPM](https://npm.im), install it
+
+```bash
+npm install @patternfly/pfe-avatar
+```
+
+Then once installed, import it to your application:
+
+```js
+import '@patternfly/pfe-avatar';
+```
 ## Usage
@@ -17,50 +38,1 @@
 
-## Attributes
-
-### pfe-name (observed) (required)
-
-The user's name, either given name and family name, or username. When displaying a pattern, the name will be used to seed the pattern generator.
-
-### pfe-src (observed)
-
-The URL to the user's custom avatar image. It will be displayed instead of a random pattern.
-
-### pfe-pattern (observed)
-
-The type of pattern to display. Currently supported values are `"squares"` and `"triangles"`.
-
-| squares                         | triangles                           |
-| ------------------------------- | ----------------------------------- |
-| ![squares image](./squares.png) | ![triangles image](./triangles.png) |
-
-### pfe-shape (observed)
-
-The shape of the avatar itself. Supported values are `"square"` (default), `"rounded"`, and `"circle"`.
-
-## Styling
-
-| Theme hook         | Description                                                                                                                                                   | Default                                   |
-| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- |
-| `--pfe-avatar--colors` | A space-delimited list of colors to use for generated patterns. Only hex values are supported, ex: `#fc0` or `#0fcb41`. Any number of colors may be provided. | `#3B0083 #f0ab00 #007a87 #00b9e4 #92d400` |
-
-## Test
-
-    npm run test
-
-## Build
-
-    npm run build
-
-## Demo
-
-From the PFElements root directory, run:
-
-    npm start
-
-## Code style
-
-Avatar (and all PFElements) use [Prettier][prettier] to auto-format JS and JSON. The style rules get applied when you commit a change. If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.
-
-[prettier]: https://github.com/prettier/prettier/
-[prettier-ed]: https://prettier.io/docs/en/editors.html
-[web-component-tester]: https://github.com/Polymer/web-component-tester

New alerts

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

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

Fixed alerts

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

Improved metrics

Dev dependency count

0

decreased by-100%

Is type module

Yes

Worsened metrics

Total package byte prevSize

53036

decreased by-68.06%

Dependency count

2

increased by100%

Lines of code

640

decreased by-40.69%

Number of lines in readme file

38

decreased by-42.42%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@patternfly/pfe-core@^2.0.0-next.0

• + Addedlit@^2.1.2

• + Added@floating-ui/core@1.6.3(transitive)

• + Added@floating-ui/dom@1.6.6(transitive)

• + Added@floating-ui/utils@0.2.3(transitive)

• + Added@lit-labs/ssr-dom-shim@1.2.0(transitive)

• + Added@lit/reactive-element@1.6.3(transitive)

• + Added@patternfly/pfe-core@2.4.1(transitive)

• + Added@types/trusted-types@2.0.7(transitive)

• + Addedlit@2.8.0(transitive)

• + Addedlit-element@3.3.3(transitive)

• + Addedlit-html@2.8.0(transitive)

• - Removed@patternfly/pfelement@^1.12.3

• - Removed@patternfly/pfelement@1.12.3(transitive)