diff --git a/src/app/common/clarity-prism.ts b/src/app/common/clarity-prism.ts deleted file mode 100644 index f9fbdcdfc12..00000000000 --- a/src/app/common/clarity-prism.ts +++ /dev/null @@ -1,126 +0,0 @@ -import * as PrismLib from 'prismjs'; - -export interface PrismType { - languages: typeof PrismLib.languages; - tokenize: typeof PrismLib.tokenize; - highlight: typeof PrismLib.highlight; - [key: string]: any; -} - -const clarity = (Prism: PrismType) => { - // Functions to construct regular expressions - // simple form - // e.g. (interactive ... or (interactive) - // function simple_form(name) { - // return RegExp('(\\()' + name + '(?=[\\s\\)])'); - // } - - // booleans and numbers - function primitive(pattern: string) { - return RegExp(`([\\s([])${pattern}(?=[\\s)])`); - } - - // Patterns in regular expressions - - // Open parenthesis for look-behind - const par = '(\\()'; - // const endpar = '(?=\\))'; - // End the pattern with look-ahead space - const space = '(?=\\s)'; - - const language: PrismLib.Grammar = { - // Three or four semicolons are considered a heading. - heading: { - pattern: /;;;.*/, - alias: ['comment', 'title'], - }, - comment: /;;.*/, - string: [ - { - pattern: /"(?:[^"\\]|\\.)*"/, - greedy: true, - }, - { - pattern: /0x[0-9a-fA-F]*/, - greedy: true, - }, - ], - symbol: { - pattern: /'[^()#'\s]+/, - greedy: true, - }, - keyword: [ - { - pattern: RegExp( - par + - '(?:or|and|xor|not|begin|let|if|ok|err|unwrap\\!|unwrap-err\\!|unwrap-panic|unwrap-err-panic|match|try\\!|asserts\\!|\ -map-get\\?|var-get|contract-map-get\\?|get|tuple|\ -define-public|define-private|define-constant|define-map|define-data-var|\ -define-fungible-token|define-non-fungible-token|\ -define-read-only)' + - space - ), - lookbehind: true, - }, - { - pattern: RegExp(par + '(?:is-eq|is-some|is-none|is-ok|is-er)' + space), - lookbehind: true, - }, - { - pattern: RegExp( - par + - '(?:var-set|map-set|map-delete|map-insert|\ -ft-transfer\\?|nft-transfer\\?|nft-mint\\?|ft-mint\\?|nft-get-owner\\?|ft-get-balance\\?|\ -contract-call\\?)' + - space - ), - lookbehind: true, - }, - { - pattern: RegExp( - par + - '(?:list|map|filter|fold|len|concat|append|as-max-len\\?|to-int|to-uint|\ -buff|hash160|sha256|sha512|sha512/256|keccak256|true|false|none)' + - space - ), - lookbehind: true, - }, - { - pattern: RegExp( - par + - '(?:as-contract|contract-caller|tx-sender|block-height|at-block|get-block-info\\?)' + - space - ), - lookbehind: true, - }, - { - pattern: RegExp(par + '(?:is-eq|is-some|is-none|is-ok|is-err)' + space), - lookbehind: true, - }, - ], - boolean: /(?:false|true|none)/, - number: { - pattern: primitive('[-]?u?\\d+'), - lookbehind: true, - }, - address: { - pattern: /([\s()])(?:\'[0123456789ABCDEFGHJKMNPQRSTVWXYZ]{28,41})(?=[()\s]|$)/, - lookbehind: true, - }, - operator: { - pattern: /(\()(?:[-+*\/]|[<>]=?|=>?)(?=[()\s]|$)/, - lookbehind: true, - }, - function: { - pattern: /(\()[^()'\s]+(?=[()\s]|$)/, - lookbehind: true, - }, - punctuation: /[()']/, - }; - - Prism.languages.clarity = language; -}; - -clarity(PrismLib); - -export const Prism = PrismLib as PrismType; diff --git a/src/app/features/errors/app-error-boundary.tsx b/src/app/features/errors/app-error-boundary.tsx index 3972cc49647..5dc79e8aa7a 100644 --- a/src/app/features/errors/app-error-boundary.tsx +++ b/src/app/features/errors/app-error-boundary.tsx @@ -4,10 +4,9 @@ import BroadcastError from '@assets/images/unhappy-face-ui.png'; import { SharedComponentsSelectors } from '@tests/selectors/shared-component.selectors'; import { Box, Flex, HStack, styled } from 'leather-styles/jsx'; -import { Button, CopyIcon, Link } from '@leather.io/ui'; +import { Button, CopyIcon, Link, Prism } from '@leather.io/ui'; import { isError } from '@leather.io/utils'; -import { Prism } from '@app/common/clarity-prism'; import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard'; import { compliantErrorBody } from '@app/query/common/compliance-checker/compliance-checker.query'; import { CodeBlock } from '@app/ui/components/codeblock'; diff --git a/src/app/features/stacks-transaction-request/contract-deploy-details/contract-deploy-details.tsx b/src/app/features/stacks-transaction-request/contract-deploy-details/contract-deploy-details.tsx index ee107ef2154..84192e1e2c9 100644 --- a/src/app/features/stacks-transaction-request/contract-deploy-details/contract-deploy-details.tsx +++ b/src/app/features/stacks-transaction-request/contract-deploy-details/contract-deploy-details.tsx @@ -2,9 +2,8 @@ import { useState } from 'react'; import { HStack, HTMLStyledProps, Stack, styled } from 'leather-styles/jsx'; -import { Title } from '@leather.io/ui'; +import { Prism, Title } from '@leather.io/ui'; -import { Prism } from '@app/common/clarity-prism'; import { AttachmentRow } from '@app/features/stacks-transaction-request/attachment-row'; import { ContractPreviewLayout } from '@app/features/stacks-transaction-request/contract-preview'; import { Row } from '@app/features/stacks-transaction-request/row'; diff --git a/src/app/ui/components/codeblock.tsx b/src/app/ui/components/codeblock.tsx index 1bd904d89ad..b598da94963 100644 --- a/src/app/ui/components/codeblock.tsx +++ b/src/app/ui/components/codeblock.tsx @@ -2,7 +2,7 @@ import { forwardRef } from 'react'; import { Box, BoxProps } from 'leather-styles/jsx'; -import { Highlighter, HighlighterProps } from './highlighter'; +import { Highlighter, HighlighterProps } from '@leather.io/ui'; type CodeBlockProps = HighlighterProps & BoxProps; diff --git a/src/app/ui/components/highlighter.tsx b/src/app/ui/components/highlighter.tsx deleted file mode 100644 index bf8ec62be07..00000000000 --- a/src/app/ui/components/highlighter.tsx +++ /dev/null @@ -1,150 +0,0 @@ -import { memo } from 'react'; - -import { Box, Flex } from 'leather-styles/jsx'; -import { Highlight } from 'prism-react-renderer'; - -import type { PrismType } from '@app/common/clarity-prism'; - -import { - GetGrammaticalTokenProps, - GrammaticalToken, - Language, - RenderProps, - theme, -} from '../utils/prism'; -import { startPad } from '../utils/start-pad'; - -const lineNumberWidth = 60; -const getLineNumber = (n: number, length: number) => startPad(n + 1, length.toString().length); - -function Tokens({ - tokens, - getTokenProps, - showLineNumbers, - ...rest -}: { - tokens: GrammaticalToken[]; - getTokenProps: GetGrammaticalTokenProps; - showLineNumbers?: boolean; -}) { - const pl = `calc(${showLineNumbers ? lineNumberWidth : '0'}px + 16px`; - - return ( - - {tokens.map((token, i) => ( - - ))} - - ); -} - -function LineNumber({ number, length, ...rest }: { number: number; length: number }) { - return ( - - {getLineNumber(number, length)} - - ); -} - -function Line({ - tokens, - getTokenProps, - index, - length, - showLineNumbers, - hideLineHover, - ...rest -}: { - tokens: GrammaticalToken[]; - index: number; - length: number; - getTokenProps: GetGrammaticalTokenProps; - showLineNumbers?: boolean; - hideLineHover?: boolean; -}) { - return ( - - {showLineNumbers ? : null} - - - ); -} - -function Lines({ - tokens: lines, - getLineProps, - getTokenProps, - className, - showLineNumbers, - hideLineHover, -}: { showLineNumbers?: boolean; hideLineHover?: boolean } & RenderProps) { - return ( - - - {lines.map((tokens: GrammaticalToken[], i: number) => ( - - ))} - - - ); -} - -export interface HighlighterProps { - code: string; - language?: Language; - showLineNumbers?: boolean; - hideLineHover?: boolean; - prism: PrismType; -} - -export const Highlighter = memo( - ({ code, language = 'clarity', showLineNumbers, hideLineHover, prism }: HighlighterProps) => { - return ( - - {props => ( - - )} - - ); - } -); diff --git a/src/app/ui/utils/prism.tsx b/src/app/ui/utils/prism.tsx deleted file mode 100644 index 24c8207f81b..00000000000 --- a/src/app/ui/utils/prism.tsx +++ /dev/null @@ -1,133 +0,0 @@ -import { CSSProperties } from 'react'; - -import { token } from 'leather-styles/tokens'; -import { PrismTheme } from 'prism-react-renderer'; - -export interface GrammaticalToken { - types: string[]; - content: string; - empty?: boolean; -} - -interface GrammaticalTokenOutputProps { - key?: React.Key; - style?: CSSProperties; - className: string; - children: string; - [otherProp: string]: any; -} - -interface GrammaticalTokenInputProps { - key?: React.Key; - style?: CSSProperties; - className?: string; - token: GrammaticalToken; - [otherProp: string]: any; -} - -interface LineInputProps { - key?: React.Key; - style?: CSSProperties; - className?: string; - line: GrammaticalToken[]; - [otherProp: string]: any; -} - -interface LineOutputProps { - key?: React.Key; - style?: CSSProperties; - className: string; - [otherProps: string]: any; -} - -export interface RenderProps { - tokens: GrammaticalToken[][]; - className: string; - style: CSSProperties; - getLineProps(input: LineInputProps): LineOutputProps; - getTokenProps(input: GrammaticalTokenInputProps): GrammaticalTokenOutputProps; -} - -export type GetGrammaticalTokenProps = ( - input: GrammaticalTokenInputProps -) => GrammaticalTokenOutputProps; - -export type Language = - | 'markup' - | 'bash' - | 'clarity' - | 'clike' - | 'c' - | 'cpp' - | 'css' - | 'javascript' - | 'jsx' - | 'coffeescript' - | 'actionscript' - | 'css-extr' - | 'diff' - | 'git' - | 'go' - | 'graphql' - | 'handlebars' - | 'json' - | 'less' - | 'lisp' - | 'makefile' - | 'markdown' - | 'objectivec' - | 'ocaml' - | 'python' - | 'reason' - | 'sass' - | 'scss' - | 'sql' - | 'stylus' - | 'tsx' - | 'typescript' - | 'wasm' - | 'yaml'; - -export const theme: PrismTheme = { - plain: { - color: token('colors.ink.text-primary'), - }, - styles: [ - { - types: ['comment', 'punctuation'], - style: { - color: token('colors.ink.text-subdued'), - }, - }, - { - types: ['operator'], - style: { - color: token('colors.ink.text-primary'), - }, - }, - { - types: ['builtin', 'tag', 'changed', 'keyword'], - style: { - color: token('colors.yellow.action-primary-default'), - }, - }, - { - types: ['function'], - style: { - color: token('colors.red.action-primary-default'), - }, - }, - { - types: ['number', 'variable', 'inserted'], - style: { - color: token('colors.yellow.action-primary-default'), - }, - }, - { - types: ['deleted', 'string', 'symbol', 'char'], - style: { - color: token('colors.green.action-primary-default'), - }, - }, - ], -}; diff --git a/src/app/ui/utils/start-pad.tsx b/src/app/ui/utils/start-pad.tsx deleted file mode 100644 index e65286a56c5..00000000000 --- a/src/app/ui/utils/start-pad.tsx +++ /dev/null @@ -1,2 +0,0 @@ -export const startPad = (n: number, z = 2, s = '0') => - (n + '').length <= z ? ['', '-'][+(n < 0)] + (s.repeat(z) + Math.abs(n)).slice(-1 * z) : n + '';