Merge pull request #1380 from DNNCommunity/release/0.27.6

Released v0.27.6

Author: valadas

.github/dependabot.yml

@@ -7,9 +7,11 @@ version: 2
 updates:
   - package-ecosystem: "npm" # See documentation for possible values
     directory: "/" # Location of package manifests
+    open-pull-requests-limit: 10
     schedule:
       interval: "monthly"
   - package-ecosystem: "nuget"
     directory: "/_build"
+    open-pull-requests-limit: 10
     schedule:
       interval: "monthly"

.github/workflows/Publish_Site.yml

@@ -21,7 +21,6 @@ on:
     branches:
       - main
       - master
-      - 'release/*'
 
 jobs:
   ubuntu-latest:

package-lock.json

@@ -10,7 +10,7 @@
     "test": "npx lerna run test"
   },
   "devDependencies": {
-    "@types/node": "^22.14.0",
+    "@types/node": "^24.3.0",
     "lerna": "^8.0.0",
     "typescript": "^5.0.3"
   }

package.json

@@ -1,24 +1,76 @@
-# `dnn-elements-react`
-This is a collection of pure web components (custom elements) for use within DNN Platform or custom extensions for DNN. These can even be used in projects outside of the DNN purview, though some are unique for the DNN experience. The web components in `dnn-elements-react` are framework specific to React. For framework agnostic web components, you can use `dnn-elements`.
+# DNN Elements React
 
-## Usage
-### npm
-`npm install @dnncommunity/dnn-elements-react`
+React wrapper components for DNN Elements using the latest Stencil React Output Target.
 
-### yarn
-`yarn add @dnncommunity/dnn-elements-react`
+## Installation
 
+```bash
+npm install @dnncommunity/dnn-elements-react
 ```
-// App.tsx
-import { DnnButton, defineCustomElements } from '@dnncommunity/dnn-elements-react';
 
-defineCustomElements();
+## Usage
+
+### Basic Setup
 
+```tsx
+import React, { useEffect } from 'react';
+import { defineCustomElements } from '@dnncommunity/dnn-elements-react';
+
+// Call this once in your app's main component or index file
 function App() {
-    return (
-        <div className="App>
-            <DnnButton type="secondary">Secondary Button</DnnButton>
-        </div>
-    );
+  useEffect(() => {
+    defineCustomElements();
+  }, []);
+
+  return (
+    <div>
+      {/* Your app content */}
+    </div>
+  );
 }
-```
+```
+
+### Using Components
+
+```tsx
+import React, { useState } from 'react';
+import { DnnButton, DnnInput, DnnCheckbox } from '@dnncommunity/dnn-elements-react';
+
+function MyComponent() {
+  const [inputValue, setInputValue] = useState('');
+  const [checked, setChecked] = useState(false);
+
+  return (
+    <div>
+      <DnnButton
+        onClick={() => console.log('Button clicked!')}
+      >
+        Click me
+      </DnnButton>
+
+      <DnnInput 
+        label="Your Name"
+        helpText="Enter your name..."
+        value={inputValue}
+        onValueChange={(e) => setInputValue(e.detail)}
+      />
+
+      <DnnCheckbox 
+        label="Agree to terms"
+        checked={checked}
+        onCheckedChange={(e) => setChecked(e.detail)}
+      />
+    </div>
+  );
+}
+```
+
+## TypeScript Support
+
+This package includes full TypeScript definitions for all components with proper prop types and event handlers.
+
+## Testing
+
+A test React application is available in the `test-app/` directory to verify component functionality.
+
+This is a collection of pure web components (custom elements) for use within DNN Platform or custom extensions for DNN. These can even be used in projects outside of the DNN purview, though some are unique for the DNN experience. The web components in `dnn-elements-react` are framework specific to React. For framework agnostic web components, you can use `dnn-elements`.