diff --git a/.changeset/great-plums-shout.md b/.changeset/great-plums-shout.md new file mode 100644 index 000000000..81ac85a63 --- /dev/null +++ b/.changeset/great-plums-shout.md @@ -0,0 +1,5 @@ +--- +"@launchpad-ui/components": patch +--- + +remove snippet from the components diff --git a/packages/components/package.json b/packages/components/package.json index cf896ce38..aa9f5fc01 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -34,8 +34,7 @@ "@launchpad-ui/icons": "workspace:~", "@launchpad-ui/tokens": "workspace:~", "@react-aria/live-announcer": "3.4.4", - "class-variance-authority": "0.7.0", - "prism-themes": "1.9.0" + "class-variance-authority": "0.7.0" }, "devDependencies": { "@react-aria/focus": "3.21.2", @@ -43,7 +42,6 @@ "@react-aria/utils": "3.31.0", "@react-stately/utils": "3.10.8", "@react-types/shared": "3.32.1", - "@types/prismjs": "1.26.5", "copyfiles": "2.4.1", "react": "19.2.0", "react-aria": "3.44.0", @@ -58,7 +56,6 @@ "@react-aria/utils": "3.31.0", "@react-stately/utils": "3.10.8", "@react-types/shared": "3.32.1", - "prismjs": "1.30.0", "react": "19.2.0", "react-aria": "3.44.0", "react-aria-components": "1.13.0", diff --git a/packages/components/src/Snippet.tsx b/packages/components/src/Snippet.tsx deleted file mode 100644 index 53119c544..000000000 --- a/packages/components/src/Snippet.tsx +++ /dev/null @@ -1,181 +0,0 @@ -import Prism from 'prismjs'; -import { type JSX, useLayoutEffect, useRef } from 'react'; - -import { IconButton } from './IconButton'; - -// Import languages based on what you need -import 'prismjs/components/prism-apex'; -import 'prismjs/components/prism-bash'; -import 'prismjs/components/prism-brightscript'; -import 'prismjs/components/prism-c'; -import 'prismjs/components/prism-clike'; -import 'prismjs/components/prism-cpp'; -import 'prismjs/components/prism-csharp'; -import 'prismjs/components/prism-erlang'; -import 'prismjs/components/prism-go'; -import 'prismjs/components/prism-gradle'; -import 'prismjs/components/prism-haskell'; -import 'prismjs/components/prism-java'; -import 'prismjs/components/prism-javascript'; -import 'prismjs/components/prism-json'; -import 'prismjs/components/prism-jsx'; -import 'prismjs/components/prism-kotlin'; -import 'prismjs/components/prism-lua'; -import 'prismjs/components/prism-makefile'; -import 'prismjs/components/prism-markup'; -import 'prismjs/components/prism-markup-templating'; -import 'prismjs/components/prism-objectivec'; -import 'prismjs/components/prism-php'; -import 'prismjs/components/prism-powershell'; -import 'prismjs/components/prism-python'; -import 'prismjs/components/prism-ruby'; -import 'prismjs/components/prism-rust'; -import 'prismjs/components/prism-sql'; -import 'prismjs/components/prism-swift'; -import 'prismjs/components/prism-tsx'; -import 'prismjs/components/prism-typescript'; -import 'prismjs/components/prism-yaml'; -// Import plugins -import 'prismjs/plugins/keep-markup/prism-keep-markup'; -import 'prismjs/plugins/line-highlight/prism-line-highlight'; -import 'prismjs/plugins/line-numbers/prism-line-numbers'; - -import { CopyToClipboard } from './CopyToClipboard'; - -import 'prismjs/plugins/line-numbers/prism-line-numbers.css'; - -import styles from './styles/Snippet.module.css'; - -export const languages = [ - 'bash', - 'shell', - 'json', - 'html', - 'xml', - 'js', - 'javascript', - 'lua', - 'ts', - 'typescript', - 'php', - 'java', - 'ruby', - 'python', - 'go', - 'csharp', - 'c', - 'cpp', - 'objectivec', - 'swift', - 'makefile', - 'haskell', - 'brightscript', - 'dart', - 'rust', - 'tsx', - 'gradle', - 'powershell', - 'kotlin', - 'erlang', - 'yaml', - 'apex', - // text and empty string are not a recognized languages by prism, we use it here as a default option for when you don't want styling. - 'text', - '', -] as const; - -export type SnippetLang = (typeof languages)[number]; - -type SnippetProps = { - children: string | JSX.Element; - className?: string; - highlightRange?: string; - highlightOffset?: number; - lang: SnippetLang; - label?: string; - withHeader?: boolean; - withLineNumbers?: boolean; - useDefaultHighlighting?: boolean; - withCopyButton?: boolean; - trackAnalyticsOnClick?: () => void; -}; - -// Example usage: -// -// const json = JSON.stringify({ -// 'key': 'test@test.com', -// 'ip': '192.168.0.1', -// 'custom': { -// 'customer_ranking': 10004 -// } -// }, null, 2); -// -// {json} -export function Snippet({ - children, - className, - highlightRange, - highlightOffset, - lang, - label, - withHeader, - withLineNumbers, - useDefaultHighlighting = false, - withCopyButton, - trackAnalyticsOnClick, -}: SnippetProps) { - const codeEl = useRef(null); - - // biome-ignore lint/correctness/useExhaustiveDependencies: children and lang are intentionally included to re-highlight when they change - useLayoutEffect(() => { - const element = codeEl.current; - if (!element) { - return; - } - - // Use requestAnimationFrame to ensure that the element is mounted - // before highlighting it. - const frame = requestAnimationFrame(() => { - Prism.highlightElement(element); - }); - - // Cancel the animation frame when the component unmounts. - return () => cancelAnimationFrame(frame); - }, [children, lang]); - - return ( - <> - {withHeader && ( -
- {label && {label}} - {lang && {lang}} -
- )} -
-
-					
-						{children}
-					
-					{withCopyButton && (
-						
-							
-						
-					)}
-				
-
- - ); -} diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index f687f6087..3d244b534 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -65,7 +65,6 @@ export type { SearchFieldProps } from './SearchField'; export type { ListBoxSectionProps, MenuSectionProps } from './Section'; export type { SelectProps, SelectValueProps } from './Select'; export type { SeparatorProps } from './Separator'; -export type { SnippetLang } from './Snippet'; export type { SwitchProps } from './Switch'; export type { CellProps, @@ -269,7 +268,6 @@ export { selectValueStyles, } from './Select'; export { Separator, SeparatorContext, separatorStyles } from './Separator'; -export { Snippet } from './Snippet'; export { Switch, SwitchContext, switchStyles } from './Switch'; export { Cell, diff --git a/packages/components/src/styles/Snippet.module.css b/packages/components/src/styles/Snippet.module.css deleted file mode 100644 index a9a75e386..000000000 --- a/packages/components/src/styles/Snippet.module.css +++ /dev/null @@ -1,132 +0,0 @@ -@import 'prism-themes/themes/prism-ghcolors.css'; - -.snippet { - border: 1px solid var(--lp-color-border-ui-secondary); - border-radius: 3px; - overflow-x: auto; - overflow-y: auto; -} - -.snippet > pre { - position: relative; - white-space: pre-wrap; - word-break: break-word; - width: 100%; -} - -.copyable { - display: flex; - align-items: flex-start; - justify-content: space-between; - position: relative; -} - -.header { - display: flex; - justify-content: space-between; - color: var(--lp-color-text-ui-secondary); - font-size: var(--lp-font-size-200); - line-height: var(--lp-line-height-200); - width: 100%; -} - -.copyable [class*='_CopyToClipboard'] { - position: absolute; - top: var(--lp-spacing-400); - right: var(--lp-spacing-400); - visibility: hidden; -} - -.copyable:hover [class*='_CopyToClipboard'] { - visibility: visible; -} - -.Snippet--inline { - border: none; -} - -.snippet pre[class*='language-'] { - margin: 0; - border: none; - background-color: var(--lp-color-bg-ui-secondary); - padding-right: 2rem; -} - -.snippet pre[class*='language-'] [data-theme='dark'] { - background-color: var(--lp-color-bg-ui-tertiary); - color: var(--lp-color-gray-200); -} - -.snippet pre[class*='language-'], -.snippet code[class*='language-'] { - font-family: var(--lp-font-family-monospace); - line-height: 140%; - color: var(--lp-color-text-code-base); -} - -.snippet code { - padding-left: 0; - background-color: transparent; - z-index: var(--stacking-above-new-context); - white-space: pre-wrap; - word-break: break-word; - border: none; -} - -.snippet:not(.useDefaultHighlighting) .line-highlight { - margin-top: 0; - background: var(--lp-color-brand-yellow-light); - z-index: var(--stacking-new-context); -} - -.snippet:not(.useDefaultHighlighting) .line-highlight [data-theme='dark'] { - background: #3c4200; -} - -.snippet pre[class*='language-'].line-numbers { - line-height: 0.625rem; - padding-bottom: var(--lp-spacing-400); - padding-top: var(--lp-spacing-400); - overflow-y: hidden; - white-space: pre-wrap; - z-index: var(--stacking-above-new-context); -} - -.snippet .line-numbers .line-numbers-rows { - border: none; - left: -3em; - width: 2em; -} - -.snippet .token.operator, -.snippet .token.punctuation { - color: var(--lp-color-text-ui-primary-base); -} - -.snippet .token.function { - color: var(--lp-color-text-code-function); - font-weight: var(--lp-font-weight-regular); -} - -.snippet .token.tag { - color: var(--lp-color-text-code-tag); -} - -.token.attr-value, -.token.string { - color: var(--lp-color-text-code-string); -} - -.snippet .token.property { - color: var(--lp-color-text-code-keyword); -} - -.snippet .token.keyword { - color: var(--lp-color-text-code-keyword); -} - -.copyButton { - position: absolute; - right: 0; - top: 0; -} diff --git a/packages/components/stories/Snippet.stories.tsx b/packages/components/stories/Snippet.stories.tsx deleted file mode 100644 index 26582bcdb..000000000 --- a/packages/components/stories/Snippet.stories.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react-vite'; - -import { Snippet } from '../src/Snippet'; - -const meta: Meta = { - component: Snippet, - title: 'Components/Forms/Snippet', - parameters: { - figma: { - design: - 'https://www.figma.com/design/98HKKXL2dTle29ikJ3tzk7/%F0%9F%9A%80-LaunchPad?node-id=14383-120499&m=dev', - }, - }, -}; - -export default meta; - -type Story = StoryObj; - -const json = JSON.stringify( - { - key: 'test@test.com', - ip: '192.168.0.1', - custom: { - customerRanking: 10004, - }, - }, - null, - 2, -); - -export const Example: Story = { - args: { - children: json, - lang: 'json', - withCopyButton: true, - }, -}; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d41b6faca..080d1a2e7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -254,12 +254,6 @@ importers: class-variance-authority: specifier: 0.7.0 version: 0.7.0 - prism-themes: - specifier: 1.9.0 - version: 1.9.0 - prismjs: - specifier: 1.30.0 - version: 1.30.0 react-hook-form: specifier: 7.59.0 version: 7.59.0(react@19.2.0) @@ -279,9 +273,6 @@ importers: '@react-types/shared': specifier: 3.32.1 version: 3.32.1(react@19.2.0) - '@types/prismjs': - specifier: 1.26.5 - version: 1.26.5 copyfiles: specifier: 2.4.1 version: 2.4.1 @@ -2595,9 +2586,6 @@ packages: '@types/postcss-modules-scope@3.0.4': resolution: {integrity: sha512-//ygSisVq9kVI0sqx3UPLzWIMCmtSVrzdljtuaAEJtGoGnpjBikZ2sXO5MpH9SnWX9HRfXxHifDAXcQjupWnIQ==} - '@types/prismjs@1.26.5': - resolution: {integrity: sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ==} - '@types/react-dom@19.2.1': resolution: {integrity: sha512-/EEvYBdT3BflCWvTMO7YkYBHVE9Ci6XdqZciZANQgKpaiDRGOLIlRo91jbTNRQjgPFWVaRxcYc0luVNFitz57A==} peerDependencies: @@ -4654,13 +4642,6 @@ packages: resolution: {integrity: sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} - prism-themes@1.9.0: - resolution: {integrity: sha512-tX2AYsehKDw1EORwBps+WhBFKc2kxfoFpQAjxBndbZKr4fRmMkv47XN0BghC/K1qwodB1otbe4oF23vUTFDokw==} - - prismjs@1.30.0: - resolution: {integrity: sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==} - engines: {node: '>=6'} - process-nextick-args@2.0.1: resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==} @@ -8006,8 +7987,6 @@ snapshots: dependencies: postcss: 8.5.4 - '@types/prismjs@1.26.5': {} - '@types/react-dom@19.2.1(@types/react@19.2.2)': dependencies: '@types/react': 19.2.2 @@ -10252,10 +10231,6 @@ snapshots: ansi-styles: 5.2.0 react-is: 18.3.1 - prism-themes@1.9.0: {} - - prismjs@1.30.0: {} - process-nextick-args@2.0.1: {} process@0.11.10: {}