feat(PrismCode): react renderer

.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",

src/_internal/hooks/use-event.ts

@@ -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-update-effect.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/components/GlobalStyles.tsx

@@ -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/content/PrismCode/PrismCode.stories.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.');`,
+ },
 };