feat(PrismCode): diff support (#569)

Author: tenphi

.changeset/cool-bottles-report.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': minor
+---
+
+Add support for diff in PrismCode and add a separate PrismDiffCode component that shows a diff between two strings.

package.json

@@ -72,6 +72,7 @@
     "@vitejs/plugin-react": "^4.3.2",
     "clipboard-copy": "^4.0.1",
     "clsx": "^1.1.1",
+    "diff": "^7.0.0",
     "email-validator": "^2.0.4",
     "prismjs": "^1.27.0",
     "react-aria": "^3.35.1",

pnpm-lock.yaml

@@ -304,10 +304,9 @@ const GlobalStylesElement = createGlobalStyle<GlobalStylesElementProps>`
   .token.prolog,
   .token.doctype,
   .token.cdata {
-    color: var(--dark-04-color);
+    color: var(--dark-03-color);
   }
 
-  .token.keyword,
   .token.tag,
   .token.operator,
   .token.punctuation {
@@ -322,6 +321,8 @@ const GlobalStylesElement = createGlobalStyle<GlobalStylesElementProps>`
   .token.boolean,
   .token.constant,
   .token.symbol,
+  .token.key,
+  .token.keyword,
   .token.deleted {
     color: var(--pink-color);
   }
@@ -346,7 +347,6 @@ const GlobalStylesElement = createGlobalStyle<GlobalStylesElementProps>`
     color: var(--dark-color);
   }
 
-  .token.atrule,
   .token.attr-value {
     color: var(--dark-color);
   }
@@ -379,6 +379,16 @@ const GlobalStylesElement = createGlobalStyle<GlobalStylesElementProps>`
   .token.entity {
     cursor: help;
   }
+
+  .token.inserted-sign {
+    background-color: #e6ffed;
+    color: #30A666;
+  }
+
+  .token.deleted-sign {
+    background-color: #ffeef0;
+    color: (--danger-color);
+  }
 `;
 
 export const GlobalStyles = (props: GlobalStylesProps) => {

src/components/GlobalStyles.tsx

@@ -74,3 +74,133 @@ JavascriptSyntax.args = {
   }
 });`,
 };
+
+export const YamlSyntax = Template.bind({});
+YamlSyntax.args = {
+  language: 'yaml',
+  code: `cubes:
+  # Define the Orders cube
+  - name: Orders
+    sql: SELECT * FROM public.orders
+
+    # Measures (metrics to analyze)
+    measures:
+      - name: count
+        type: count # Total number of orders
+      - name: totalRevenue
+        sql: total_amount
+        type: sum # Sum of all order totals
+
+    # Dimensions (categorical or time-based data)
+    dimensions:
+      - name: id
+        sql: id
+        type: number # Unique order ID
+      - name: status
+        sql: status
+        type: string # Order status (e.g., completed, pending)
+      - name: created_at
+        sql: created_at
+        type: time # Order creation date
+
+    # Pre-aggregation for performance optimization
+    preAggregations:
+      monthlyRevenue:
+        type: rollup
+        measures: [totalRevenue] # Aggregate total revenue
+        dimensions: [status] # Group by order status
+        timeDimension: created_at
+        granularity: month # Monthly rollups
+
+  # Define the Customers cube
+  - name: Customers
+    sql: SELECT * FROM public.customers
+
+    # Measures
+    measures:
+      - name: totalCustomers
+        type: countDistinct
+        sql: id # Count distinct customer IDs
+
+    # Dimensions
+    dimensions:
+      - name: id
+        sql: id
+        type: number # Customer ID
+      - name: name
+        sql: name
+        type: string # Customer name
+
+    # Join with the Orders cube
+    joins:
+      - cube: Orders
+        sql: \${Customers.id} = \${Orders.customer_id}
+        relationship: one_to_many # One customer can have many orders`,
+};
+
+export const SqlSyntax = Template.bind({});
+SqlSyntax.args = {
+  language: 'sql',
+  code: `WITH RecursiveCTE AS (
+    -- Recursive CTE to generate a sequence of numbers
+    SELECT 1 AS Level, CAST('2025-01-01' AS DATE) AS GeneratedDate
+    UNION ALL
+    SELECT Level + 1, DATEADD(DAY, 1, GeneratedDate)
+    FROM RecursiveCTE
+    WHERE Level < 10
+),
+AggregatedData AS (
+    -- Aggregate data with window functions and filters
+    SELECT
+        u.UserID,
+        u.UserName,
+        COUNT(o.OrderID) OVER (PARTITION BY u.UserID) AS TotalOrders,
+        SUM(o.TotalAmount) OVER (PARTITION BY u.UserID) AS TotalSpent,
+        ROW_NUMBER() OVER (PARTITION BY u.UserID ORDER BY o.OrderDate DESC) AS LatestOrderRank
+    FROM Users u
+    LEFT JOIN Orders o ON u.UserID = o.UserID
+    WHERE o.OrderDate > '2024-01-01'
+),
+FilteredData AS (
+    -- Filter the aggregated data to the most recent order per user
+    SELECT *
+    FROM AggregatedData
+    WHERE LatestOrderRank = 1
+),
+FinalOutput AS (
+    -- Final output with additional computations
+    SELECT
+        f.UserID,
+        f.UserName,
+        f.TotalOrders,
+        f.TotalSpent,
+        CASE
+            WHEN f.TotalSpent > 1000 THEN 'VIP'
+            WHEN f.TotalSpent BETWEEN 500 AND 1000 THEN 'Regular'
+            ELSE 'New'
+        END AS UserCategory,
+        r.GeneratedDate
+    FROM FilteredData f
+    CROSS JOIN RecursiveCTE r
+    WHERE r.GeneratedDate <= GETDATE()
+)
+-- Final query to output the results
+SELECT
+    fo.UserID,
+    fo.UserName,
+    fo.TotalOrders,
+    fo.TotalSpent,
+    fo.UserCategory,
+    fo.GeneratedDate
+FROM FinalOutput fo
+ORDER BY fo.GeneratedDate, fo.UserID;`,
+};
+
+export const DiffSyntax = Template.bind({});
+DiffSyntax.args = {
+  language: 'javascript',
+  code: `  console.log('Hello, world!');
++ console.log('This line was added!');
+  console.log('Another unchanged line');
+- console.log('This line was removed.');`,
+};

src/components/content/PrismCode/PrismCode.stories.tsx

@@ -1,5 +1,10 @@
 import { forwardRef, useEffect } from 'react';
 import Prism from 'prismjs';
+import 'prismjs/components/prism-yaml';
+import 'prismjs/components/prism-sql';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-diff';
+import 'prismjs/plugins/diff-highlight/prism-diff-highlight';
 
 import {
   BaseProps,
@@ -26,6 +31,30 @@ const PreElement = tasty({
   },
 });
 
+function isDiffCode(code: string): boolean {
+  // Split the code into lines
+  const lines = code.split('\n');
+
+  // Define patterns to check for diff characteristics
+  const additionPattern = /^\+/; // Lines starting with '+'
+  const deletionPattern = /^-/; // Lines starting with '-'
+  const headerPattern = /^(diff --git|---|\+\+\+)/; // Diff headers
+
+  // Check each line for diff-specific patterns
+  for (const line of lines) {
+    if (
+      additionPattern.test(line) ||
+      deletionPattern.test(line) ||
+      headerPattern.test(line)
+    ) {
+      return true; // Code matches a diff pattern
+    }
+  }
+
+  // No diff-specific patterns found
+  return false;
+}
+
 export interface CubePrismCodeProps extends ContainerStyleProps {
   /** The CSS style map */
   style?: BaseProps['style'];
@@ -51,13 +80,18 @@ export interface CubePrismCodeProps extends ContainerStyleProps {
 function PrismCode(props: CubePrismCodeProps, ref) {
   let { code, language = 'javascript', ...otherProps } = props;
 
+  const isDiff = isDiffCode(code || '');
+
   useEffect(() => {
     Prism.highlightAll();
   });
 
   return (
     <PreElement ref={ref} {...otherProps}>
-      <code data-element="Code" className={`language-${language}`}>
+      <code
+        data-element="Code"
+        className={`language${isDiff ? '-diff' : ''}-${language}${isDiff ? ' diff-highlight' : ''}`}
+      >
         {code}
       </code>
     </PreElement>