@covalent/components-react 0.0.0-COVALENT

package/.eslintrc.json

@@ -0,0 +1,23 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {}
+    }
+  ]
+}

package/README.md

@@ -0,0 +1,168 @@
+# Covalent Components React
+
+[![License](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
+[![npm version](https://badge.fury.io/js/@covalent%2Fcomponents-react.svg)](https://badge.fury.io/js/@covalent%2Fcomponents-react)
+
+**Covalent Components React** is a **React wrapper library** built on top of the [Covalent Web Components](https://github.com/Teradata/covalent/tree/main/libs/components) library. It provides a seamless, React-friendly interface for using Covalent's design system and UI components in React applications. This library bridges the gap between web components and React, enabling developers to leverage Covalent's robust component library while adhering to React's declarative syntax and patterns.
+
+---
+
+## Table of Contents
+1. [Overview](#overview)
+2. [Key Features](#key-features)
+3. [Installation](#installation)
+4. [Usage](#usage)
+   - [Quick Start](#quick-start)
+   - [Handling Props and Events](#handling-props-and-events)
+5. [Why Use This Wrapper?](#why-use-this-wrapper)
+   - [Comparison: Core Web Components vs. React Wrapper](#comparison-core-web-components-vs-react-wrapper)
+6. [Documentation](#documentation)
+7. [Contributing](#contributing)
+8. [License](#license)
+9. [Links](#links)
+
+---
+
+## Overview
+The `@covalent/components-react` package wraps the [Covalent Web Components](https://github.com/Teradata/covalent/tree/main/libs/components) into reusable React components. It abstracts the complexity of directly interfacing with web components in React, such as:
+- **Prop passing**: Automatically converts React props to web component properties/attributes.
+- **Event handling**: Maps native DOM events to React-style event handlers (e.g., `onChange`).
+- **Type Safety**: Provides TypeScript support for props and events.
+
+This library is ideal for teams building React applications that want to use Covalent's design system without manual workarounds for web component integration.
+
+---
+
+## Key Features
+- **React Compatibility**: Full integration with React’s lifecycle and state management.
+- **Declarative Syntax**: Use Covalent components as native React components.
+- **TypeScript Support**: Auto-generated types for props and events.
+- **Automatic Prop Conversion**: Handles both attributes (strings) and properties (objects, arrays, etc.).
+- **Event Normalization**: Listen to web component events via React `onEvent` handlers.
+- **Custom Element Registration**: No need to manually register components in the DOM.
+
+---
+
+## Installation
+```bash
+npm install @covalent/components-react @covalent/components
+```
+
+---
+
+## Usage
+
+### Quick Start
+1. Import the React-wrapped component:
+   ```tsx
+   import { cvButton } from '@covalent/components-react';
+   ```
+2. Use it in your JSX:
+   ```tsx
+   function App() {
+     return (
+       <cvButton
+         variant="filled"
+         onClick={() => console.log('Button clicked!')}
+       >
+         Click Me
+       </cvButton>
+     );
+   }
+   ```
+
+### Handling Props and Events
+- **Props**: Pass props as you would with any React component. Non-primitive values (e.g., objects, arrays) are set as properties on the underlying web component.
+- **Events**: Use `on`-prefixed event names (e.g., `onClick` for `click` events).
+
+Example with a complex component:
+```tsx
+import { cvDataTable } from '@covalent/components-react';
+
+function TableDemo() {
+  const columns = [{ label: 'Name', key: 'name' }];
+  const data = [{ name: 'Item 1' }, { name: 'Item 2' }];
+
+  return (
+    <cvDataTable
+      columns={columns}
+      data={data}
+      onRowClick={(event) => console.log('Row clicked:', event.detail)}
+    />
+  );
+}
+```
+
+---
+
+## Why Use This Wrapper?
+
+### Comparison: Core Web Components vs. React Wrapper
+| Task                | With Core Web Components (No Wrapper)          | With React Wrapper (`@covalent/components-react`) |
+|---------------------|-----------------------------------------------|---------------------------------------------------|
+| **Passing Data**     | Manually distinguish between attributes (strings) and properties (objects). | Pass props naturally; the wrapper handles conversion. |
+| **Event Handling**   | Use `ref` to add event listeners.             | Use React-style `onEvent` props.                   |
+| **Type Support**     | No built-in TypeScript types.                 | Full TypeScript support.                          |
+| **Code Readability** | More boilerplate.                             | Clean, declarative JSX.                           |
+
+**Example: Button Implementation**
+
+Without Wrapper:
+```tsx
+import { cvButton } from '@covalent/components';
+import { useRef, useEffect } from 'react';
+
+export default function Button() {
+  const buttonRef = useRef(null);
+
+  useEffect(() => {
+    buttonRef.current.addEventListener('click', () => {
+      console.log('Button clicked!');
+    });
+  }, []);
+
+  return <cv-button ref={buttonRef}>Click Me</cv-button>;
+}
+```
+
+With Wrapper:
+```tsx
+import { cvButton } from '@covalent/components-react';
+
+export default function Button() {
+  return (
+    <cvButton onClick={() => console.log('Button clicked!')}>
+      Click Me
+    </cvButton>
+  );
+}
+```
+
+---
+
+## Documentation
+- **Covalent Components (Web)**: Full documentation for the underlying web components is available [here](https://github.com/Teradata/covalent/tree/main/libs/components).
+- **React-Specific Guidance**: See the [Design system docs](h[ttps://teradata.github.io/covalent/](https://design.teradata.com/)) for interactive examples.
+
+---
+
+## Contributing
+We welcome contributions! Please follow these steps:
+1. Fork the repository.
+2. Install dependencies: `npm install`.
+3. Make changes and test using the provided Storybook.
+4. Submit a pull request with a clear description of changes.
+
+Report bugs or request features via [GitHub Issues](https://github.com/Teradata/covalent/issues).
+
+---
+
+## License
+MIT © [Teradata](https://www.teradata.com/)
+
+---
+
+## Links
+- [Covalent Main Repo](https://github.com/Teradata/covalent)
+- [Covalent Web Components](https://github.com/Teradata/covalent/tree/main/libs/components)
+- [Teradata Design System](https://design.teradata.com/)

package/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@covalent/components-react",
+  "version": "0.0.0-COVALENT",
+  "dependencies": {
+    "@covalent/components": "latest"
+  },
+  "main": "./index.js",
+  "module": "./index.mjs",
+  "typings": "./index.d.ts"
+}

package/project.json

@@ -0,0 +1,48 @@
+{
+  "name": "components-react",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/components-react/src",
+  "projectType": "library",
+  "release": {
+    "version": {
+      "generatorOptions": {
+        "packageRoot": "dist/{projectRoot}",
+        "currentVersionResolver": "git-tag"
+      }
+    }
+  },
+  "tags": [],
+  "targets": {
+    "build-files": {
+      "executor": "@nx/vite:build",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/libs/components-react"
+      }
+    },
+    "build": {
+      "dependsOn": ["build-files"],
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "cp dist/libs/components/style.css dist/libs/components-react/"
+      }
+    },
+    "test": {
+      "executor": "@nx/vite:test",
+      "outputs": ["{options.reportsDirectory}"],
+      "options": {
+        "reportsDirectory": "../../coverage/libs/components-react"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    },
+    "generate-react-wrappers": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": ["node ./scripts/react-wrappers"]
+      }
+    }
+  },
+  "implicitDependencies": ["components"]
+}

package/src/ActionRibbon/CovalentActionRibbon.spec.ts

@@ -0,0 +1,7 @@
+import { CovalentActionRibbon } from './CovalentActionRibbon';
+
+describe('CovalentActionRibbon', () => {
+  it('should work', () => {
+    expect(CovalentActionRibbon).toBeTruthy();
+  });
+});

package/src/ActionRibbon/CovalentActionRibbon.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import { CovalentActionRibbon as CovalentActionRibbonWeb } from '@covalent/components';
+export const CovalentActionRibbon = createComponent({
+  tagName: 'cv-action-ribbon',
+  elementClass: CovalentActionRibbonWeb,
+  react: React,
+});

package/src/Alert/CovalentAlert.spec.ts

@@ -0,0 +1,7 @@
+import { CovalentAlert } from './CovalentAlert';
+
+describe('CovalentAlert', () => {
+  it('should work', () => {
+    expect(CovalentAlert).toBeTruthy();
+  });
+});

package/src/Alert/CovalentAlert.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import { CovalentAlert as CovalentAlertWeb } from '@covalent/components';
+export const CovalentAlert = createComponent({
+  tagName: 'cv-alert',
+  elementClass: CovalentAlertWeb,
+  react: React,
+});

package/src/AppShell/CovalentAppShell.spec.ts

@@ -0,0 +1,7 @@
+import { CovalentAppShell } from './CovalentAppShell';
+
+describe('CovalentAppShell', () => {
+  it('should work', () => {
+    expect(CovalentAppShell).toBeTruthy();
+  });
+});

package/src/AppShell/CovalentAppShell.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import { CovalentAppShell as CovalentAppShellWeb } from '@covalent/components';
+export const CovalentAppShell = createComponent({
+  tagName: 'cv-app-shell',
+  elementClass: CovalentAppShellWeb,
+  react: React,
+  events: {
+    ontoggle: 'toggle',
+  },
+});

package/src/Badge/CovalentBadge.spec.ts

@@ -0,0 +1,7 @@
+import { CovalentBadge } from './CovalentBadge';
+
+describe('CovalentBadge', () => {
+  it('should work', () => {
+    expect(CovalentBadge).toBeTruthy();
+  });
+});

package/src/Badge/CovalentBadge.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import { CovalentBadge as CovalentBadgeWeb } from '@covalent/components';
+export const CovalentBadge = createComponent({
+  tagName: 'cv-badge',
+  elementClass: CovalentBadgeWeb,
+  react: React,
+});

package/src/Button/CovalentButton.spec.ts

@@ -0,0 +1,7 @@
+import { CovalentButton } from './CovalentButton';
+
+describe('CovalentButton', () => {
+  it('should work', () => {
+    expect(CovalentButton).toBeTruthy();
+  });
+});

package/src/Button/CovalentButton.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import { CovalentButton as CovalentButtonWeb } from '@covalent/components';
+export const CovalentButton = createComponent({
+  tagName: 'cv-button',
+  elementClass: CovalentButtonWeb,
+  react: React,
+});

package/src/Card/CovalentCard.spec.ts

@@ -0,0 +1,7 @@
+import { CovalentCard } from './CovalentCard';
+
+describe('CovalentCard', () => {
+  it('should work', () => {
+    expect(CovalentCard).toBeTruthy();
+  });
+});

package/src/Card/CovalentCard.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import { CovalentCard as CovalentCardWeb } from '@covalent/components';
+export const CovalentCard = createComponent({
+  tagName: 'cv-card',
+  elementClass: CovalentCardWeb,
+  react: React,
+});

package/src/Checkbox/CovalentCheckbox.spec.ts

@@ -0,0 +1,7 @@
+import { CovalentCheckbox } from './CovalentCheckbox';
+
+describe('CovalentCheckbox', () => {
+  it('should work', () => {
+    expect(CovalentCheckbox).toBeTruthy();
+  });
+});

package/src/Checkbox/CovalentCheckbox.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import { CovalentCheckbox as CovalentCheckboxWeb } from '@covalent/components';
+export const CovalentCheckbox = createComponent({
+  tagName: 'cv-checkbox',
+  elementClass: CovalentCheckboxWeb,
+  react: React,
+  events: {
+    onchange: 'change',
+  },
+});

package/src/Chips/CovalentChip.spec.ts

@@ -0,0 +1,7 @@
+import { CovalentChip } from './CovalentChip';
+
+describe('CovalentChip', () => {
+  it('should work', () => {
+    expect(CovalentChip).toBeTruthy();
+  });
+});

package/src/Chips/CovalentChip.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import { CovalentChip as CovalentChipWeb } from '@covalent/components';
+export const CovalentChip = createComponent({
+  tagName: 'cv-chip',
+  elementClass: CovalentChipWeb,
+  react: React,
+});

package/src/Chips/CovalentChipSet.spec.ts

@@ -0,0 +1,7 @@
+import { CovalentChipSet } from './CovalentChipSet';
+
+describe('CovalentChipSet', () => {
+  it('should work', () => {
+    expect(CovalentChipSet).toBeTruthy();
+  });
+});

package/src/Chips/CovalentChipSet.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import { CovalentChipSet as CovalentChipSetWeb } from '@covalent/components';
+export const CovalentChipSet = createComponent({
+  tagName: 'cv-chip-set',
+  elementClass: CovalentChipSetWeb,
+  react: React,
+});

package/src/CircularProgress/CovalentCircularProgress.spec.ts

@@ -0,0 +1,7 @@
+import { CovalentCircularProgress } from './CovalentCircularProgress';
+
+describe('CovalentCircularProgress', () => {
+  it('should work', () => {
+    expect(CovalentCircularProgress).toBeTruthy();
+  });
+});

package/src/CircularProgress/CovalentCircularProgress.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import { CovalentCircularProgress as CovalentCircularProgressWeb } from '@covalent/components';
+export const CovalentCircularProgress = createComponent({
+  tagName: 'cv-circular-progress',
+  elementClass: CovalentCircularProgressWeb,
+  react: React,
+});

package/src/CodeEditor/CovalentCodeEditor.spec.ts

@@ -0,0 +1,7 @@
+import { CovalentCodeEditor } from './CovalentCodeEditor';
+
+describe('CovalentCodeEditor', () => {
+  it('should work', () => {
+    expect(CovalentCodeEditor).toBeTruthy();
+  });
+});

package/src/CodeEditor/CovalentCodeEditor.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import { CovalentCodeEditor as CovalentCodeEditorWeb } from '@covalent/components';
+export const CovalentCodeEditor = createComponent({
+  tagName: 'cv-code-editor',
+  elementClass: CovalentCodeEditorWeb,
+  react: React,
+  events: {
+    oneditorReady: 'editor-ready',
+    oneditorFocus: 'editor-focus',
+    oneditorBlur: 'editor-blur',
+    oncodeChange: 'code-change',
+  },
+});

package/src/CodeSnippet/CovalentCodeSnippet.spec.ts

@@ -0,0 +1,7 @@
+import { CovalentCodeSnippet } from './CovalentCodeSnippet';
+
+describe('CovalentCodeSnippet', () => {
+  it('should work', () => {
+    expect(CovalentCodeSnippet).toBeTruthy();
+  });
+});

package/src/CodeSnippet/CovalentCodeSnippet.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import { CovalentCodeSnippet as CovalentCodeSnippetWeb } from '@covalent/components';
+export const CovalentCodeSnippet = createComponent({
+  tagName: 'cv-code-snippet',
+  elementClass: CovalentCodeSnippetWeb,
+  react: React,
+});

package/src/Dialog/CovalentDialog.spec.ts

@@ -0,0 +1,7 @@
+import { CovalentDialog } from './CovalentDialog';
+
+describe('CovalentDialog', () => {
+  it('should work', () => {
+    expect(CovalentDialog).toBeTruthy();
+  });
+});

package/src/Dialog/CovalentDialog.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import { CovalentDialog as CovalentDialogWeb } from '@covalent/components';
+export const CovalentDialog = createComponent({
+  tagName: 'cv-dialog',
+  elementClass: CovalentDialogWeb,
+  react: React,
+  events: {
+    onopening: 'opening',
+    onopened: 'opened',
+    onclosing: 'closing',
+    onclosed: 'closed',
+  },
+});

package/src/Drawer/CovalentDrawer.spec.ts

@@ -0,0 +1,7 @@
+import { CovalentDrawer } from './CovalentDrawer';
+
+describe('CovalentDrawer', () => {
+  it('should work', () => {
+    expect(CovalentDrawer).toBeTruthy();
+  });
+});

package/src/Drawer/CovalentDrawer.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import { CovalentDrawer as CovalentDrawerWeb } from '@covalent/components';
+export const CovalentDrawer = createComponent({
+  tagName: 'cv-drawer',
+  elementClass: CovalentDrawerWeb,
+  react: React,
+  events: {
+    onopened: 'opened',
+    onclosed: 'closed',
+  },
+});

package/src/EmptyState/CovalentEmptyState.spec.ts

@@ -0,0 +1,7 @@
+import { CovalentEmptyState } from './CovalentEmptyState';
+
+describe('CovalentEmptyState', () => {
+  it('should work', () => {
+    expect(CovalentEmptyState).toBeTruthy();
+  });
+});

package/src/EmptyState/CovalentEmptyState.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import { CovalentEmptyState as CovalentEmptyStateWeb } from '@covalent/components';
+export const CovalentEmptyState = createComponent({
+  tagName: 'cv-empty-state',
+  elementClass: CovalentEmptyStateWeb,
+  react: React,
+});

package/src/ExpansionPanel/CovalentExpansionPanel.spec.ts

@@ -0,0 +1,7 @@
+import { CovalentExpansionPanel } from './CovalentExpansionPanel';
+
+describe('CovalentExpansionPanel', () => {
+  it('should work', () => {
+    expect(CovalentExpansionPanel).toBeTruthy();
+  });
+});

package/src/ExpansionPanel/CovalentExpansionPanel.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import { CovalentExpansionPanel as CovalentExpansionPanelWeb } from '@covalent/components';
+export const CovalentExpansionPanel = createComponent({
+  tagName: 'cv-expansion-panel',
+  elementClass: CovalentExpansionPanelWeb,
+  react: React,
+});

package/src/ExpansionPanel/CovalentExpansionPanelItem.spec.ts

@@ -0,0 +1,7 @@
+import { CovalentExpansionPanelItem } from './CovalentExpansionPanelItem';
+
+describe('CovalentExpansionPanelItem', () => {
+  it('should work', () => {
+    expect(CovalentExpansionPanelItem).toBeTruthy();
+  });
+});

package/src/ExpansionPanel/CovalentExpansionPanelItem.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import { CovalentExpansionPanelItem as CovalentExpansionPanelItemWeb } from '@covalent/components';
+export const CovalentExpansionPanelItem = createComponent({
+  tagName: 'cv-expansion-panel-item',
+  elementClass: CovalentExpansionPanelItemWeb,
+  react: React,
+  events: {
+    oncvExpansionPanelTogglePanel: 'cv-expansionPanel-togglePanel',
+  },
+});

package/src/FocusedPage/CovalentFocusedPage.spec.ts

@@ -0,0 +1,7 @@
+import { CovalentFocusedPage } from './CovalentFocusedPage';
+
+describe('CovalentFocusedPage', () => {
+  it('should work', () => {
+    expect(CovalentFocusedPage).toBeTruthy();
+  });
+});

package/src/FocusedPage/CovalentFocusedPage.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import { CovalentFocusedPage as CovalentFocusedPageWeb } from '@covalent/components';
+export const CovalentFocusedPage = createComponent({
+  tagName: 'cv-focused-page',
+  elementClass: CovalentFocusedPageWeb,
+  react: React,
+});

package/src/Formfield/CovalentFormfield.spec.ts

@@ -0,0 +1,7 @@
+import { CovalentFormfield } from './CovalentFormfield';
+
+describe('CovalentFormfield', () => {
+  it('should work', () => {
+    expect(CovalentFormfield).toBeTruthy();
+  });
+});

package/src/Formfield/CovalentFormfield.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import { CovalentFormfield as CovalentFormfieldWeb } from '@covalent/components';
+export const CovalentFormfield = createComponent({
+  tagName: 'cv-formfield',
+  elementClass: CovalentFormfieldWeb,
+  react: React,
+});

package/src/FullScreenDialog/CovalentFullscreenDialog.spec.ts

@@ -0,0 +1,7 @@
+import { CovalentFullscreenDialog } from './CovalentFullscreenDialog';
+
+describe('CovalentFullscreenDialog', () => {
+  it('should work', () => {
+    expect(CovalentFullscreenDialog).toBeTruthy();
+  });
+});

package/src/FullScreenDialog/CovalentFullscreenDialog.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import { CovalentFullscreenDialog as CovalentFullscreenDialogWeb } from '@covalent/components';
+export const CovalentFullscreenDialog = createComponent({
+  tagName: 'cv-full-screen-dialog',
+  elementClass: CovalentFullscreenDialogWeb,
+  react: React,
+  events: {
+    onopening: 'opening',
+    onopened: 'opened',
+    onclosing: 'closing',
+    onclosed: 'closed',
+  },
+});