@gyldendal/kobber-components - npm Package Compare versions

Comparing version 0.0.1 to 0.1.0

package.json

 {
   "name": "@gyldendal/kobber-components",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "license": "MIT",
@@ -19,9 +19,12 @@ "type": "module",
     "prepare": "npm run build",
-    "dev": "npm run build -- --watch"
+    "dev": "onchange \"./src/**/*.{ts,tsx,css}\" -- npm run build"
   },
   "dependencies": {
+    "@gyldendal/kobber-base": "*",
+    "@lit/react": "^1.0.2",
     "@r2wc/react-to-web-component": "^2.0.3",
-    "@gyldendal/kobber-base": "*",
+    "lit": "^3.1.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "stylis": "^4.3.0"
   },
@@ -31,2 +34,5 @@ "devDependencies": {
     "@gyldendal/kobber-stylelint": "*",
+    "@types/react": "18.2.0",
+    "@types/stylis": "^4.2.4",
+    "onchange": "^7.1.0",
     "tsup": "^7.2.0",
@@ -33,0 +39,0 @@ "typescript": "^5.2.2"

react/index.d.ts

@@ -1,55 +0,11 @@
-import { FunctionComponent, CSSProperties } from 'react';
+import * as _lit_react from '@lit/react';
+import { G as Grid, a as GridColumn } from '../GridColumn-d727ac46.js';
+export { E as Example, b as ExampleProps, P as ProficiencyBar, c as ProficiencyBarProps, d as ProgressBar, e as ProgressBarProps } from '../GridColumn-d727ac46.js';
+import 'react';
+import 'lit-html';
+import 'lit';
 
-interface ExampleProps {
-    backgroundColor: string;
-    message: string;
-}
-/** JSDoc på komponent vises ikke i Storybook >_> */
-declare const Example: FunctionComponent<ExampleProps>;
+declare const KobberGrid: _lit_react.ReactWebComponent<Grid, {}>;
+declare const KobberGridColumn: _lit_react.ReactWebComponent<GridColumn, {}>;
 
-interface Props$1 {
-    className?: string;
-    labelledById: string;
-    progressInPercent: number;
-    style?: CSSProperties;
-}
-/**
- * A simple and accessible one-bar measuring proficiency by pre-defined values. This will probably cover most use cases.
- * @param progressInPercent A number indicating the achieved progress.
- * @returns One progress bar on background, with colors that are aligned with the achieved progress.
- */
-declare const ProficiencyBar: FunctionComponent<Props$1>;
-
-type AriaProps = {
-    "aria-label": string;
-    "aria-labelledby"?: never;
-} | {
-    "aria-label"?: never;
-    "aria-labelledby": string;
-};
-type ProgressBarType = AriaProps & {
-    explainOtherUnitThanPercentage?: string;
-    valueNow: number;
-    valueMin?: number;
-    valueMax?: number;
-    fillColorVar?: string;
-    filledColorVar?: string;
-};
-
-interface Props {
-    className?: string;
-    progressBars: Array<ProgressBarType>;
-    showFullLength?: boolean;
-    style?: CSSProperties;
-    height?: "default" | "low";
-}
-/**
- * A flexible and accessible bar intended to be used for learning analytics, and all other progress to be measured.
- * The component does not use the html `<progress>` element due to its default styling. This can be reconsidered, however.
- * @param progressBars Array of an arbitrary number of progress bar objects. These are the actual progress bars, listed in a container. In most use cases there is just one, in some others: two.
- * @param showFullLength Applies only when more than one progress bar: Spread progress bars of their full length. Preferably used when the sum of two bars is 100.
- * @returns Progress bar(s) on background.
- */
-declare const ProgressBar: FunctionComponent<Props>;
-
-export { Example, ExampleProps, ProficiencyBar, Props$1 as ProficiencyBarProps, ProgressBar, Props as ProgressBarProps };
+export { KobberGrid, KobberGridColumn };

react/index.js

 import {
   Example,
+  Grid,
+  GridColumn,
   ProficiencyBar,
   ProgressBar
-} from "../chunks/chunk-WDMDHRN6.js";
+} from "../chunks/chunk-YUX5UU2M.js";
+
+// src/index.react.tsx
+import { createComponent } from "@lit/react";
+import * as React from "react";
+var KobberGrid = createComponent({
+  tagName: "kobber-grid",
+  elementClass: Grid,
+  react: React
+});
+var KobberGridColumn = createComponent({
+  tagName: "kobber-grid-column",
+  elementClass: GridColumn,
+  react: React
+});
 export {
   Example,
+  KobberGrid,
+  KobberGridColumn,
   ProficiencyBar,
   ProgressBar
 };

README.md

@@ -0,0 +0,0 @@ # Component library

web-components/index.d.ts

@@ -1,3 +0,6 @@
-import { ExampleProps, ProgressBarProps as Props, ProficiencyBarProps as Props$1 } from '../react/index.js';
+import { b as ExampleProps, e as Props, c as Props$1 } from '../GridColumn-d727ac46.js';
+export { G as Grid, a as GridColumn } from '../GridColumn-d727ac46.js';
 import 'react';
+import 'lit-html';
+import 'lit';
 
@@ -4,0 +7,0 @@ declare const Example: new (...params: any[]) => HTMLElement & ExampleProps;

web-components/index.js

 import {
   Example,
+  Grid,
+  GridColumn,
   ProficiencyBar,
@@ -8,3 +10,3 @@ ProgressBar,
   propNames3
-} from "../chunks/chunk-WDMDHRN6.js";
+} from "../chunks/chunk-YUX5UU2M.js";
 
@@ -33,4 +35,6 @@ // src/example/web-component.ts
   Example2 as Example,
+  Grid,
+  GridColumn,
   ProficiencyBar2 as ProficiencyBar,
   ProgressBar2 as ProgressBar
 };

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

19733

increased by57.16%

Lines of code

517

increased by66.77%

Worsened metrics

Dependency count

7

increased by75%

Dev dependency count

7

increased by75%

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Added@lit/react@^1.0.2

• + Addedlit@^3.1.0

• + Addedstylis@^4.3.0

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

• + Added@lit/react@1.0.7(transitive)

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

• + Added@types/react@19.0.10(transitive)

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

• + Addedcsstype@3.1.3(transitive)

• + Addedlit@3.2.1(transitive)

• + Addedlit-element@4.1.1(transitive)

• + Addedlit-html@3.2.1(transitive)

• + Addedstylis@4.3.6(transitive)