@dxos/react-ui-syntax-highlighter 0.8.1 → 0.8.2-main.10c050d

package/src/SyntaxHighlighter/SyntaxHighlighter.stories.tsx

@@ -4,32 +4,38 @@
 
 import '@dxos-theme';
 
+import { type Meta, type StoryObj } from '@storybook/react';
+
 import { withTheme } from '@dxos/storybook-utils';
 
 import { SyntaxHighlighter } from './SyntaxHighlighter';
 
-export default {
+const meta: Meta<typeof SyntaxHighlighter> = {
   title: 'ui/react-ui-syntax-highlighter/SyntaxHighlighter',
   component: SyntaxHighlighter,
   decorators: [withTheme],
 };
 
-export const Default = {
+export default meta;
+
+type Story = StoryObj<typeof SyntaxHighlighter>;
+
+export const Default: Story = {
   args: {
     language: 'json',
-    className: 'text-sm',
+    classNames: 'text-sm',
     children: JSON.stringify({ message: 'DXOS', initialized: true }, null, 2),
   },
 };
 
-export const Typescript = {
+export const Typescript: Story = {
   args: {
     language: 'ts',
     children: 'const x = 100;',
   },
 };
 
-export const Empty = {
+export const Empty: Story = {
   args: {
     children: false,
   },

package/src/SyntaxHighlighter/SyntaxHighlighter.tsx

@@ -4,16 +4,16 @@
 
 import React from 'react';
 import { type SyntaxHighlighterProps as NativeSyntaxHighlighterProps } from 'react-syntax-highlighter';
-// Lightweight version will load specific language parsers asynchronously.
 // Using `light-async` version directly from dist to avoid any chance of the heavy one being loaded.
+// Lightweight version will load specific language parsers asynchronously.
 // eslint-disable-next-line no-restricted-imports
 import NativeSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/light-async';
+// eslint-disable-next-line no-restricted-imports
+import { github as light, a11yDark as dark } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 
 import { type ThemedClassName, useThemeContext } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 
-import { alabasterDark, githubLight } from './styles';
-
 const zeroWidthSpace = '\u200b';
 
 export type SyntaxHighlighterProps = ThemedClassName<
@@ -22,21 +22,24 @@ export type SyntaxHighlighterProps = ThemedClassName<
   }
 >;
 
+light.hljs.background = '';
+dark.hljs.background = '';
+
 /**
  * https://github.com/react-syntax-highlighter/react-syntax-highlighter
  */
 export const SyntaxHighlighter = ({
   classNames,
-  fallback = zeroWidthSpace,
   children,
+  fallback = zeroWidthSpace,
   ...props
 }: SyntaxHighlighterProps) => {
   const { themeMode } = useThemeContext();
 
   return (
     <NativeSyntaxHighlighter
-      className={mx('w-full p-0', classNames)}
-      style={themeMode === 'dark' ? alabasterDark : githubLight}
+      className={mx('w-full p-0 bg-baseSurface font-thin', classNames)}
+      style={themeMode === 'dark' ? dark : light}
       {...props}
     >
       {/* Non-empty fallback prevents collapse. */}

package/src/shims.d.ts

@@ -3,5 +3,6 @@
 //
 
 declare module 'react-syntax-highlighter/dist/esm/light-async';
+
 declare module 'react-syntax-highlighter/dist/esm/styles/hljs/a11y-dark';
 declare module 'react-syntax-highlighter/dist/esm/styles/hljs/a11y-light';

package/dist/types/src/SyntaxHighlighter/styles.d.ts

@@ -1,10 +0,0 @@
-import { type CSSProperties } from 'react';
-/**
- * https://github.com/findrakecil/hljs-alabaster-dark/blob/master/readme.md
- */
-export declare const alabasterDark: Record<string, CSSProperties>;
-/**
- * https://github.com/highlightjs/highlight.js/blob/main/src/styles/github.css
- */
-export declare const githubLight: Record<string, CSSProperties>;
-//# sourceMappingURL=styles.d.ts.map

package/dist/types/src/SyntaxHighlighter/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/SyntaxHighlighter/styles.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAM3C;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAoCvD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CA8FrD,CAAC"}

package/src/SyntaxHighlighter/styles.ts

@@ -1,149 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type CSSProperties } from 'react';
-
-// https://highlightjs.org/examples
-// https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo
-// https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/AVAILABLE_STYLES_HLJS.MD
-
-/**
- * https://github.com/findrakecil/hljs-alabaster-dark/blob/master/readme.md
- */
-export const alabasterDark: Record<string, CSSProperties> = {
-  hljs: {
-    display: 'block',
-    overflowX: 'auto',
-    color: '#CECECE',
-    padding: '0.5em',
-  },
-  'hljs-comment': {
-    color: '#DFDF8E',
-  },
-  'hljs-string': {
-    color: '#95CB82',
-  },
-  'hljs-meta-string': {
-    color: '#95CB82',
-  },
-  'hljs-regexp': {
-    color: '#95CB82',
-  },
-  'hljs-number': {
-    color: '#CC8BC9',
-  },
-  'hljs-literal': {
-    color: '#CC8BC9',
-  },
-  'hljs-title': {
-    color: '#71ADE7',
-  },
-  'hljs-deletion': {
-    backgroundColor: '#ffdddd',
-    color: '#434343',
-  },
-  'hljs-addition': {
-    backgroundColor: '#ddffdd',
-    color: '#434343',
-  },
-};
-
-/**
- * https://github.com/highlightjs/highlight.js/blob/main/src/styles/github.css
- */
-export const githubLight: Record<string, CSSProperties> = {
-  hljs: {
-    display: 'block',
-    overflowX: 'auto',
-    color: '#545454',
-    padding: '0.5em',
-  },
-  'hljs-comment': {
-    color: '#696969',
-  },
-  'hljs-quote': {
-    color: '#696969',
-  },
-  'hljs-variable': {
-    color: '#d91e18',
-  },
-  'hljs-template-variable': {
-    color: '#d91e18',
-  },
-  'hljs-tag': {
-    color: '#d91e18',
-  },
-  'hljs-name': {
-    color: '#d91e18',
-  },
-  'hljs-selector-id': {
-    color: '#d91e18',
-  },
-  'hljs-selector-class': {
-    color: '#d91e18',
-  },
-  'hljs-regexp': {
-    color: '#d91e18',
-  },
-  'hljs-deletion': {
-    color: '#d91e18',
-  },
-  'hljs-number': {
-    color: '#aa5d00',
-  },
-  'hljs-built_in': {
-    color: '#aa5d00',
-  },
-  'hljs-builtin-name': {
-    color: '#aa5d00',
-  },
-  'hljs-literal': {
-    color: '#aa5d00',
-  },
-  'hljs-type': {
-    color: '#aa5d00',
-  },
-  'hljs-params': {
-    color: '#aa5d00',
-  },
-  'hljs-meta': {
-    color: '#aa5d00',
-  },
-  'hljs-link': {
-    color: '#aa5d00',
-  },
-  'hljs-attribute': {
-    color: '#aa5d00',
-  },
-  'hljs-string': {
-    color: '#008000',
-  },
-  'hljs-symbol': {
-    color: '#008000',
-  },
-  'hljs-bullet': {
-    color: '#008000',
-  },
-  'hljs-addition': {
-    color: '#008000',
-  },
-  'hljs-title': {
-    color: '#007faa',
-  },
-  'hljs-section': {
-    color: '#007faa',
-  },
-  'hljs-keyword': {
-    color: '#7928a1',
-  },
-  'hljs-selector-tag': {
-    color: '#7928a1',
-  },
-  'hljs-emphasis': {
-    fontStyle: 'italic',
-  },
-  'hljs-strong': {
-    fontWeight: 'bold',
-  },
-};