feat(PrismCode): react renderer (#687)

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

Author: tenphi

.changeset/fair-turtles-switch.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Use react renderer for PrismCode.

.size-limit.cjs

@@ -20,7 +20,7 @@ module.exports = [
         }),
       );
     },
-    limit: '247kB',
+    limit: '260kB',
   },
   {
     name: 'Tree shaking (just a Button)',

package.json

@@ -79,6 +79,7 @@
     "diff": "^7.0.0",
     "email-validator": "^2.0.4",
     "globals": "^16.0.0",
+    "prism-react-renderer": "^2.4.1",
     "prismjs": "^1.30.0",
     "react-aria": "^3.37.0",
     "react-focus-lock": "^2.13.5",

pnpm-lock.yaml

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { useCallback } from 'react';
 
 import { useSyncRef } from './use-sync-ref';

src/_internal/hooks/use-event.ts

@@ -9,6 +9,5 @@ export function useUpdateEffect(effect: EffectCallback, deps?: DependencyList) {
     if (!isFirst) {
       return effect();
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, deps);
 }

src/_internal/hooks/use-update-effect.ts

@@ -249,6 +249,24 @@ const GlobalStylesElement = createGlobalStyle<GlobalStylesElementProps>`
     white-space: normal;
   }
 
+  .token.inserted-sign {
+    background-color: #e6ffed;
+    color: #30A666;
+  }
+
+  .token.inserted {
+    color: #30A666;
+  }
+
+  .token.deleted-sign {
+    background-color: #ffeef0;
+    color: (--danger-color);
+  }
+
+  .token.deleted {
+    color: var(--pink-color);
+  }
+
   .token.comment,
   .token.prolog,
   .token.doctype,
@@ -271,8 +289,7 @@ const GlobalStylesElement = createGlobalStyle<GlobalStylesElementProps>`
   .token.constant,
   .token.symbol,
   .token.key,
-  .token.keyword,
-  .token.deleted {
+  .token.keyword {
     color: var(--pink-color);
   }
 
@@ -285,8 +302,7 @@ const GlobalStylesElement = createGlobalStyle<GlobalStylesElementProps>`
   .token.attr-name,
   .token.string,
   .token.char,
-  .token.builtin,
-  .token.inserted {
+  .token.builtin {
     color: var(--purple-text-color);
   }
 
@@ -328,16 +344,6 @@ 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

@@ -12,22 +12,29 @@ export default {
   },
 };
 
-const Template = ({ ...args }) => <PrismCode {...args} />;
+const Template = (args: any) => <PrismCode {...args} />;
 
-export const OneLine = Template.bind({});
-OneLine.args = {
-  code: '$ npm install -g cubejs-cli',
+export const OneLine = {
+  render: Template,
+  args: {
+    language: 'bash',
+    code: '$ npm install -g cubejs-cli',
+  },
 };
 
-export const MultiLine = Template.bind({});
-MultiLine.args = {
-  code: '$ npm install -g cubejs-cli\n$ cubejs deploy',
+export const MultiLine = {
+  render: Template,
+  args: {
+    language: 'bash',
+    code: '$ npm install -g cubejs-cli\n$ cubejs deploy',
+  },
 };
 
-export const JavascriptSyntax = Template.bind({});
-JavascriptSyntax.args = {
-  language: 'javascript',
-  code: `cube('LineItems', {
+export const JavascriptSyntax = {
+  render: Template,
+  args: {
+    language: 'javascript',
+    code: `cube('LineItems', {
   sql: \`SELECT * FROM public.line_items\`,
 
 
@@ -73,12 +80,14 @@ JavascriptSyntax.args = {
     }
   }
 });`,
+  },
 };
 
-export const YamlSyntax = Template.bind({});
-YamlSyntax.args = {
-  language: 'yaml',
-  code: `cubes:
+export const YamlSyntax = {
+  render: Template,
+  args: {
+    language: 'yaml',
+    code: `cubes:
   # Define the Orders cube
   - name: Orders
     sql: SELECT * FROM public.orders
@@ -136,12 +145,14 @@ YamlSyntax.args = {
       - 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 (
+export const SqlSyntax = {
+  render: Template,
+  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
@@ -184,7 +195,7 @@ FinalOutput AS (
     CROSS JOIN RecursiveCTE r
     WHERE r.GeneratedDate <= GETDATE()
 )
--- Final query to output the results
+ -- Final query to output the results
 SELECT
     fo.UserID,
     fo.UserName,
@@ -194,13 +205,16 @@ SELECT
     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!');
+export const DiffSyntax = {
+  render: Template,
+  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.');`,
+  },
 };