@apify/ui-library 1.98.3 → 1.99.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.98.3",
+    "version": "1.99.0",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -64,5 +64,5 @@
         "src",
         "style"
     ],
-    "gitHead": "11a60e90663e75d2de31c28a6e6b01c98d0b9d57"
+    "gitHead": "066d002719f4c6ed241b7394465ed7aa74eea1c8"
 }

package/src/components/code/one_light_theme.ts

@@ -0,0 +1,110 @@
+import type { PrismTheme } from 'prism-react-renderer';
+
+export const oneLightTheme: PrismTheme = {
+    plain: {
+        backgroundColor: 'hsl(230, 1%, 98%)',
+        color: 'hsl(230, 8%, 24%)',
+    },
+    styles: [
+        {
+            types: ['comment', 'prolog', 'cdata'],
+            style: {
+                color: 'hsl(230, 4%, 64%)',
+            },
+        },
+        {
+            types: ['doctype', 'entity'],
+            style: {
+                color: 'hsl(230, 8%, 24%)',
+            },
+        },
+        {
+            types: [
+                'attr-name',
+                'class-name',
+                'boolean',
+                'constant',
+                'number',
+                'atrule',
+            ],
+            style: {
+                color: 'hsl(35, 99%, 36%)',
+            },
+        },
+        {
+            types: ['keyword'],
+            style: {
+                color: 'hsl(301, 63%, 40%)',
+            },
+        },
+
+        {
+            types: ['property', 'tag', 'symbol', 'deleted', 'important'],
+            style: {
+                color: 'hsl(5, 74%, 59%)',
+            },
+        },
+        {
+            types: ['punctuation'],
+            style: {
+                color: 'hsl(230, 6%, 44%)',
+            },
+        },
+        {
+            types: [
+                'selector',
+                'string',
+                'char',
+                'builtin',
+                'inserted',
+                'regex',
+                'attr-value',
+            ],
+            style: {
+                color: 'hsl(119, 34%, 47%)',
+            },
+        },
+        {
+            types: ['variable', 'operator', 'function'],
+            style: {
+                color: 'hsl(221, 87%, 60%)',
+            },
+        },
+        {
+            types: ['url'],
+            style: {
+                color: 'hsl(198, 99%, 37%)',
+            },
+        },
+        {
+            types: ['deleted'],
+            style: {
+                textDecorationLine: 'line-through',
+            },
+        },
+        {
+            types: ['inserted'],
+            style: {
+                textDecorationLine: 'underline',
+            },
+        },
+        {
+            types: ['italic'],
+            style: {
+                fontStyle: 'italic',
+            },
+        },
+        {
+            types: ['important', 'bold'],
+            style: {
+                fontWeight: 'bold',
+            },
+        },
+        {
+            types: ['important'],
+            style: {
+                color: 'hsl(230, 8%, 24%)',
+            },
+        },
+    ],
+};

package/src/components/code/prism_highlighter.tsx

@@ -10,6 +10,7 @@ import { theme } from '../../design_system/theme.js';
 import { useSharedUiDependencies } from '../../ui_dependency_provider.js';
 import { Text } from '../text/index.js';
 import type { SharedTextSize } from '../text/text_shared.js';
+import { oneLightTheme } from './one_light_theme.js';
 
 (typeof global !== 'undefined' ? global : window).Prism = Prism;
 
@@ -34,13 +35,13 @@ const loadLanguages = async () => {
         // @ts-expect-error The library is badly typed and does not export the type
         import('prismjs/components/prism-markup.js'),
         // @ts-expect-error The library is badly typed and does not export the type
-        import('prismjs/components/prism-python.js'),
-        // @ts-expect-error The library is badly typed and does not export the type
         import('prismjs/components/prism-typescript.js'),
         // @ts-expect-error The library is badly typed and does not export the type
         import('prismjs/components/prism-xml-doc.js'),
         // @ts-expect-error The library is badly typed and does not export the type
         import('prismjs/components/prism-yaml.js'),
+        // @ts-expect-error The library is badly typed and does not export the type
+        import('./prism_python.js'),
     ]);
 };
 
@@ -192,7 +193,7 @@ export const PrismSyntaxHighlighter = forwardRef<HTMLPreElement, SyntaxHighlight
 
     return (
         <Highlight
-            theme={uiTheme === 'DARK' ? themes.nightOwl : themes.oneLight}
+            theme={uiTheme === 'DARK' ? themes.nightOwl : oneLightTheme}
             language={effectiveLanguage}
             {...rest}
         >

package/src/components/code/prism_python.ts

@@ -0,0 +1,76 @@
+Prism.languages.python = {
+    comment: {
+        pattern: /(^|[^\\])#.*/,
+        lookbehind: true,
+        greedy: true,
+    },
+    // @ts-expect-error `prismjs` is badly typed
+    'string-interpolation': {
+        pattern: /(?:f|fr|rf)(?:("""|''')[\s\S]*?\1|("|')(?:\\.|(?!\2)[^\\\r\n])*\2)/i,
+        greedy: true,
+        inside: {
+            interpolation: {
+                // "{" <expression> <optional "!s", "!r", or "!a"> <optional ":" format specifier> "}"
+                pattern: /((?:^|[^{])(?:\{\{)*)\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}])+\})+\})+\}/,
+                lookbehind: true,
+                inside: {
+                    'format-spec': {
+                        pattern: /(:)[^:(){}]+(?=\}$)/,
+                        lookbehind: true,
+                    },
+                    'conversion-option': {
+                        pattern: /![sra](?=[:}]$)/,
+                        alias: 'punctuation',
+                    },
+                    rest: null,
+                },
+            },
+            string: /[\s\S]+/,
+        },
+    },
+    // this is missing in the official `prismjs` definition
+    'string-property': {
+        pattern: /((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,
+        lookbehind: true,
+        greedy: true,
+        alias: 'property',
+    },
+    'triple-quoted-string': {
+        pattern: /(?:[rub]|br|rb)?("""|''')[\s\S]*?\1/i,
+        greedy: true,
+        alias: 'string',
+    },
+    string: {
+        pattern: /(?:[rub]|br|rb)?("|')(?:\\.|(?!\1)[^\\\r\n])*\1/i,
+        greedy: true,
+    },
+    function: {
+        pattern: /((?:^|\s)def[ \t]+)[a-zA-Z_]\w*(?=\s*\()/g,
+        lookbehind: true,
+    },
+    'class-name': {
+        pattern: /(\bclass\s+)\w+/i,
+        lookbehind: true,
+    },
+    decorator: {
+        pattern: /(^[\t ]*)@\w+(?:\.\w+)*/m,
+        lookbehind: true,
+        alias: ['annotation', 'punctuation'],
+        inside: {
+            punctuation: /\./,
+        },
+    },
+    // eslint-disable-next-line max-len
+    keyword: /\b(?:_(?=\s*:)|and|as|assert|async|await|break|case|class|continue|def|del|elif|else|except|exec|finally|for|from|global|if|import|in|is|lambda|match|nonlocal|not|or|pass|print|raise|return|try|while|with|yield)\b/,
+    // eslint-disable-next-line max-len
+    builtin: /\b(?:__import__|abs|all|any|apply|ascii|basestring|bin|bool|buffer|bytearray|bytes|callable|chr|classmethod|cmp|coerce|compile|complex|delattr|dict|dir|divmod|enumerate|eval|execfile|file|filter|float|format|frozenset|getattr|globals|hasattr|hash|help|hex|id|input|int|intern|isinstance|issubclass|iter|len|list|locals|long|map|max|memoryview|min|next|object|oct|open|ord|pow|property|range|raw_input|reduce|reload|repr|reversed|round|set|setattr|slice|sorted|staticmethod|str|sum|super|tuple|type|unichr|unicode|vars|xrange|zip)\b/,
+    boolean: /\b(?:False|None|True)\b/,
+    number: /\b0(?:b(?:_?[01])+|o(?:_?[0-7])+|x(?:_?[a-f0-9])+)\b|(?:\b\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\B\.\d+(?:_\d+)*)(?:e[+-]?\d+(?:_\d+)*)?j?(?!\w)/i,
+    operator: /[-+%=]=?|!=|:=|\*\*?=?|\/\/?=?|<[<=>]?|>[=>]?|[&|^~]/,
+    punctuation: /[{}[\];(),.:]/,
+};
+
+// @ts-expect-error `prismjs` is badly typed
+Prism.languages.python['string-interpolation'].inside.interpolation.inside.rest = Prism.languages.python;
+
+Prism.languages.py = Prism.languages.python;