feat(TextHighlighter): Add TextHighlighter component - React (#384)

* feat(TextHighlighter): Add TextHighlighter component - React * chore(doc): update docs and stories * docs(status): change to draft * chore(name): change package name * chore: simplify test * chore: format --------- Co-authored-by: Jeff Chew <jeff.chew@gmail.com> Co-authored-by: Anna Wen <54281166+annawen1@users.noreply.github.com>
carbon-design-system · Jan 30, 2025 · 61dca6b · 61dca6b
1 parent 3f1e6ff
commit 61dca6b
Show file tree

Hide file tree

Showing 20 changed files with 1,320 additions and 0 deletions.
diff --git a/examples/react/TextHighlighter/index.html b/examples/react/TextHighlighter/index.html
@@ -0,0 +1,22 @@
+<!--
+@license
+
+Copyright IBM Corp. 2025
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>@carbon-labs/react-text-highlighter stackblitz</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/react/TextHighlighter/package.json b/examples/react/TextHighlighter/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "carbon-labs-react-text-highlighter-example",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@carbon/react": "^1.72.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@carbon-labs/react-text-highlighter": "latest",
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@vitejs/plugin-react": "^4.2.1",
+    "sass": "~1.83.0",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.8"
+  }
+}
diff --git a/examples/react/TextHighlighter/src/App.tsx b/examples/react/TextHighlighter/src/App.tsx
@@ -0,0 +1,17 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import { TextHighlighter } from '@carbon-labs/react-text-highlighter/es/index';
+
+function App() {
+  return <TextHighlighter />;
+}
+
+export default App;
diff --git a/examples/react/TextHighlighter/src/index.scss b/examples/react/TextHighlighter/src/index.scss
@@ -0,0 +1,9 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+@use '@carbon/react';
+@use '@carbon-labs/react-text-highlighter/scss/text-highlighter';
diff --git a/examples/react/TextHighlighter/src/main.tsx b/examples/react/TextHighlighter/src/main.tsx
@@ -0,0 +1,19 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
+import './index.scss';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/examples/react/TextHighlighter/src/vite-env.d.ts b/examples/react/TextHighlighter/src/vite-env.d.ts
@@ -0,0 +1,10 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/// <reference types="vite/client" />
diff --git a/examples/react/TextHighlighter/tsconfig.json b/examples/react/TextHighlighter/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/examples/react/TextHighlighter/tsconfig.node.json b/examples/react/TextHighlighter/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/examples/react/TextHighlighter/vite.config.ts b/examples/react/TextHighlighter/vite.config.ts
@@ -0,0 +1,16 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+});
diff --git a/packages/react/src/components/TextHighlighter/__stories__/TextHighlighter.mdx b/packages/react/src/components/TextHighlighter/__stories__/TextHighlighter.mdx
@@ -0,0 +1,100 @@
+import { ArgTypes, Canvas, Meta, Controls } from '@storybook/blocks';
+import * as TextHighlighterStories from './TextHighlighter.stories';
+
+<Meta isTemplate />
+
+# TextHighlighter
+
+- **Initiative owner(s):** Punnoose Wilson
+- **Status:** Draft
+- **Target library:** TBD
+- **Target library maintainer(s) / PR Reviewer(s):** N/A
+- **Support channel:** `#carbon-labs`
+
+{/* <!-- START doctoc generated TOC please keep comment here to allow auto update --> */}
+{/* <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}
+
+> 💡 Check our
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-labs/tree/main/examples/react/TextHighlighter)
+> example implementation.
+
+[![Edit carbon-labs](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-labs/tree/main/examples/react/TextHighlighter)
+
+## Table of Contents
+
+- [Overview](#overview)
+  - [Variants](#here-we-have-a-component-offering-3-variants)
+- [Getting started](#getting-started)
+- [Example usages](#example-usages)
+  - [Version comparison](#1-version-comparison)
+  - [Reference anotation](#2-reference-anotation)
+  - [Document versioning](#3-document-versioning)
+  - [Document highlighting with source](#4-document-highlighting-with-source)
+
+{/* <!-- END doctoc generated TOC please keep comment here to allow auto update --> */}
+
+## Overview
+
+The text highlighter feature enhances user experience by improving readability, focus, and engagement with the content. This feature is especially beneficial in various contexts such as version comparison, commenting, documentation etc
+
+***It’s crucial that we use HTML semantics appropriately to represent the text highlighters, as improper usage could lead to a negative user experience. We must ensure effective communication to users utilizing assistive technologies, necessitating careful control over the markup.***
+
+### Here we have a component offering 3 variants:
+
+- 1st variant - `<mark>` : This HTML element represents text which is marked or highlighted for reference or notation purposes.
+- 2nd variant - `<ins>` : This HTML element represents a range of text that has been added to a document. (Comparison purpose)
+- 3rd variant - `<del>` : This HTML element represents a range of text that has been deleted from a document. (Comparison purpose)
+
+<Canvas of={TextHighlighterStories.Default} />
+
+<Controls />
+
+## Getting started
+
+Here's a quick example to get you started.
+
+```bash
+yarn add @carbon/react
+yarn add @carbon-labs/react-text-highlighter
+```
+
+### JS (via import)
+
+```javascript
+import { TextHighlighter } from '@carbon-labs/react-text-highlighter/es/index';
+
+function App() {
+  return <TextHighlighter />;
+}
+
+export default App;
+```
+
+### SCSS
+
+In your styles file import
+
+```
+@use '@carbon/react';
+@use '@carbon-labs/react-text-highlighter/scss/text-highlighter';
+```
+
+## Example usages
+
+Text highlighters add significant value by making content more interactive, engaging, and easier to manage and understand.
+
+### **1. Version comparison**
+
+<Canvas of={TextHighlighterStories.VersionComparison} />
+
+### **2. Reference anotation**
+
+<Canvas of={TextHighlighterStories.ReferenceAnotation} />
+
+### **3. Document versioning**
+
+<Canvas of={TextHighlighterStories.DocumentVersioning} />
+
+### **4. Document highlighting with source**
+
+<Canvas of={TextHighlighterStories.DocumentHighlightingWithSource} />