From 006b15b467a5cd835a6eab1b49023100bdc8f2e6 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Fri, 13 Oct 2023 19:32:56 +0200 Subject: refactor(components): rewrite Code component and usePrism hook * move Prism styles to Sass placeholders to avoid repeats * let usePrism consumer define its plugins (remove default ones) * remove `plugins` prop from Code component * add new props to Code component to let consumer configure plugins (and handle plugin list from the given options) However there are some problems with Prism plugins: line-highlight and treeview does not seems to be loaded. I don't want to use Babel instead of SWC so I have no solution for now. --- src/components/molecules/code/code.module.scss | 13 + src/components/molecules/code/code.stories.tsx | 192 ++++++++++++++ src/components/molecules/code/code.test.tsx | 14 ++ src/components/molecules/code/code.tsx | 183 ++++++++++++++ src/components/molecules/code/index.ts | 1 + src/components/molecules/index.ts | 1 + src/components/molecules/layout/code.module.scss | 305 ----------------------- src/components/molecules/layout/code.stories.tsx | 121 --------- src/components/molecules/layout/code.test.tsx | 17 -- src/components/molecules/layout/code.tsx | 69 ----- src/components/molecules/layout/index.ts | 1 - 11 files changed, 404 insertions(+), 513 deletions(-) create mode 100644 src/components/molecules/code/code.module.scss create mode 100644 src/components/molecules/code/code.stories.tsx create mode 100644 src/components/molecules/code/code.test.tsx create mode 100644 src/components/molecules/code/code.tsx create mode 100644 src/components/molecules/code/index.ts delete mode 100644 src/components/molecules/layout/code.module.scss delete mode 100644 src/components/molecules/layout/code.stories.tsx delete mode 100644 src/components/molecules/layout/code.test.tsx delete mode 100644 src/components/molecules/layout/code.tsx (limited to 'src/components/molecules') diff --git a/src/components/molecules/code/code.module.scss b/src/components/molecules/code/code.module.scss new file mode 100644 index 0000000..b551040 --- /dev/null +++ b/src/components/molecules/code/code.module.scss @@ -0,0 +1,13 @@ +@use "../../../styles/abstracts/placeholders"; + +.wrapper { + width: 100%; + + :global { + @extend %prism; + } + + figcaption { + margin-top: calc(var(--spacing-sm) * -1); + } +} diff --git a/src/components/molecules/code/code.stories.tsx b/src/components/molecules/code/code.stories.tsx new file mode 100644 index 0000000..1127839 --- /dev/null +++ b/src/components/molecules/code/code.stories.tsx @@ -0,0 +1,192 @@ +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { Code } from './code'; + +/** + * Code - Storybook Meta + */ +export default { + title: 'Molecules/Code', + component: Code, + argTypes: { + children: { + control: { + type: 'text', + }, + description: 'The code sample.', + type: { + name: 'string', + required: true, + }, + }, + filterPattern: { + control: { + type: 'text', + }, + description: 'Define a pattern to filter the command line output.', + table: { + category: 'Options', + }, + type: { + name: 'string', + required: false, + }, + }, + language: { + control: { + type: 'text', + }, + description: 'The code sample language.', + type: { + name: 'string', + required: true, + }, + }, + plugins: { + description: 'An array of Prism plugins to activate.', + type: { + name: 'object', + required: false, + value: {}, + }, + }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ; + +const javascriptCodeSample = ` +const foo = () => { + return 'bar'; +} +`; + +/** + * Code Stories - Code sample + */ +export const CodeSample = Template.bind({}); +CodeSample.args = { + children: javascriptCodeSample, + language: 'javascript', +}; + +/** + * Code Stories - Highlighting + * + * @todo Find a way to make it working: line-highlight plugin is not loaded. + */ +export const Highlighting = Template.bind({}); +Highlighting.args = { + children: javascriptCodeSample, + highlight: '3', + language: 'javascript', +}; + +// cSpell:ignore xinitrc +const commandLineCode = ` +ls -lah +#output#drwxr-x---+ 42 armand armand 4,0K 17 april 11:15 . +#output#drwxr-xr-x 4 root root 4,0K 30 mai 2021 .. +#output#-rw-r--r-- 1 armand armand 2,0K 21 jul. 2021 .xinitrc +`; + +/** + * Code Stories - Command Line + */ +export const CommandLine = Template.bind({}); +CommandLine.args = { + children: commandLineCode, + cmdOutputFilter: '#output#', + isCmd: true, + language: 'bash', +}; + +// cSpell:ignore lcov +const treeSample = ` +. +├── bin +│ └── deploy.sh +├── CHANGELOG.md +├── commitlint.config.cjs +├── coverage +│ ├── clover.xml +│ ├── coverage-final.json +│ ├── lcov-report +│ └── lcov.info +├── cspell.json +├── cypress.config.js +├── docker-compose.yml +├── Dockerfile +├── jest.config.js +├── jest.setup.js +├── lang +│ ├── en.json +│ └── fr.json +├── LICENSE +├── lint-staged.config.js +├── mdx.d.ts +├── next-env.d.ts +├── next-sitemap.config.cjs +├── next.config.js +├── package.json +├── public +│ ├── apple-touch-icon.png +│ ├── armand-philippot.jpg +│ ├── favicon.ico +│ ├── icon-192.png +│ ├── icon-512.png +│ ├── icon.svg +│ ├── manifest.webmanifest +│ ├── prism +│ ├── projects +│ ├── robots.txt +│ ├── sitemap-0.xml +│ ├── sitemap.xml +│ └── vercel.svg +├── README.md +├── src +│ ├── assets +│ ├── components +│ ├── content +│ ├── i18n +│ ├── pages +│ ├── services +│ ├── styles +│ ├── types +│ └── utils +├── tests +│ ├── cypress +│ ├── jest +│ └── utils +├── tsconfig.eslint.json +├── tsconfig.json +├── tsconfig.tsbuildinfo +└── yarn.lock`; + +/** + * Code Stories - Tree view + * + * @todo Find a way to make it working: treeview plugin is not loaded. + */ +export const TreeView = Template.bind({}); +TreeView.args = { + children: treeSample, + language: 'treeview', +}; + +const diffSample = ` +--- file1.js 2023-10-13 19:17:05.540644084 +0200 ++++ file2.js 2023-10-13 19:17:15.310564281 +0200 +@@ -1,2 +1 @@ +-let foo = bar.baz([1, 2, 3]); +-foo = foo + 1; ++const foo = bar.baz([1, 2, 3]) + 1;`; + +/** + * Code Stories - Diff + */ +export const Diff = Template.bind({}); +Diff.args = { + children: diffSample, + isDiff: true, + language: 'diff', +}; diff --git a/src/components/molecules/code/code.test.tsx b/src/components/molecules/code/code.test.tsx new file mode 100644 index 0000000..5b946b3 --- /dev/null +++ b/src/components/molecules/code/code.test.tsx @@ -0,0 +1,14 @@ +import { describe, expect, it } from '@jest/globals'; +import { render, screen as rtlScreen } from '../../../../tests/utils'; +import { Code } from './code'; + +describe('Code', () => { + it('renders a code block', () => { + const language = 'javascript'; + const code = 'nam'; + + render({code}); + + expect(rtlScreen.getByText(code)).toBeInTheDocument(); + }); +}); diff --git a/src/components/molecules/code/code.tsx b/src/components/molecules/code/code.tsx new file mode 100644 index 0000000..0168fd6 --- /dev/null +++ b/src/components/molecules/code/code.tsx @@ -0,0 +1,183 @@ +import { forwardRef, type ForwardRefRenderFunction } from 'react'; +import { + usePrism, + type PrismLanguage, + type PrismAvailablePlugin, +} from '../../../utils/hooks'; +import { Figure, type FigureProps } from '../../atoms'; +import styles from './code.module.scss'; + +export type CodeProps = Omit & { + /** + * The code to highlight. + */ + children: string; + /** + * Define a pattern to automatically present some lines as continuation lines + * when using command line. + * + * @default undefined + */ + cmdContinuationFilter?: string; + /** + * Define the prompt to be displayed when the command has continued beyond + * the first line. Only used with command line. + * + * @default '>' + */ + cmdContinuationPrompt?: string; + /** + * Define the line continuation string or character when using command line. + */ + cmdContinuationStr?: string; + /** + * Define the host when using command line. + */ + cmdHost?: string; + /** + * Define a custom prompt when using command line. By default, `#` will be + * used for the root user and `$` for all other users. + */ + cmdPrompt?: string; + /** + * Define the line(s) that must be presented as output when using command + * line. + * + * @example '6' // a single line + * @example '2-7' // a range + * @example '3,9-11' // multiple lines with a range + * + * @default undefined + */ + cmdOutput?: string; + /** + * Define a pattern to automatically present some lines as output when using + * command line. + * + * @default undefined + */ + cmdOutputFilter?: string; + /** + * Specify the user when using command line. + */ + cmdUser?: string; + /** + * Define the line(s) that must be highlighted. + * + * DON'T USE: it seems the plugin is not correctly loaded. + * + * @example '6' // a single line + * @example '2-7' // a range + * @example '3,9-11' // multiple lines with a range + * + * @default undefined + */ + highlight?: string; + /** + * Should the code be treated as command lines? + * + * @default false + */ + isCmd?: boolean; + /** + * Should the code be treated as a diff block? + * + * @default false + */ + isDiff?: boolean; + /** + * The code language. + */ + language: PrismLanguage; + /** + * Define the starting line number. It will be ignored with command lines. + * + * @default undefined // Starts with 1. + */ + start?: string; +}; + +const CodeWithRef: ForwardRefRenderFunction = ( + { + children, + className = '', + cmdContinuationFilter, + cmdContinuationPrompt, + cmdContinuationStr, + cmdHost, + cmdOutput, + cmdOutputFilter, + cmdPrompt, + cmdUser, + highlight, + isCmd = false, + isDiff = false, + language, + start, + ...props + }, + ref +) => { + const wrapperClass = `${styles.wrapper} ${className}`; + const codeClass = isDiff + ? `language-diff-${language}` + : `language-${language}`; + const plugins: PrismAvailablePlugin[] = [ + 'toolbar', + 'autoloader', + 'show-language', + 'color-scheme', + 'copy-to-clipboard', + 'inline-color', + 'match-braces', + 'normalize-whitespace', + ]; + + if (isDiff || language === 'diff') plugins.push('diff-highlight'); + + if (language.endsWith('treeview')) plugins.push('treeview'); + else plugins.push(isCmd ? 'command-line' : 'line-numbers'); + + const { attributes: prismAttributes, className: prismClass } = usePrism({ + attributes: { + 'data-continuation-prompt': cmdContinuationPrompt, + 'data-continuation-str': cmdContinuationStr, + 'data-filter-continuation': cmdContinuationFilter, + 'data-filter-output': cmdOutputFilter, + 'data-host': cmdHost, + 'data-line': highlight, + 'data-output': cmdOutput, + 'data-prompt': cmdPrompt, + 'data-start': start, + 'data-toolbar-order': 'show-language,copy-to-clipboard,color-scheme', + 'data-user': cmdUser, + }, + language, + plugins, + }); + + return ( +
+ 
+        {children}
+
+
+ ); +}; + +/** + * Code component + * + * Render a code block with syntax highlighting. + * + * @todo Find a way to load Prism plugins without Babel (Next uses SWC). It + * seems some plugins are not loaded correctly (`line-highlight` or `treeview` + * for example). + */ +export const Code = forwardRef(CodeWithRef); diff --git a/src/components/molecules/code/index.ts b/src/components/molecules/code/index.ts new file mode 100644 index 0000000..d18a4e0 --- /dev/null +++ b/src/components/molecules/code/index.ts @@ -0,0 +1 @@ +export * from './code'; diff --git a/src/components/molecules/index.ts b/src/components/molecules/index.ts index cb0b7eb..a1e2c7a 100644 --- a/src/components/molecules/index.ts +++ b/src/components/molecules/index.ts @@ -1,5 +1,6 @@ export * from './branding'; export * from './buttons'; +export * from './code'; export * from './collapsible'; export * from './forms'; export * from './images'; diff --git a/src/components/molecules/layout/code.module.scss b/src/components/molecules/layout/code.module.scss deleted file mode 100644 index 2eaf9a2..0000000 --- a/src/components/molecules/layout/code.module.scss +++ /dev/null @@ -1,305 +0,0 @@ -@use "../../../styles/abstracts/functions" as fun; -@use "../../../styles/abstracts/mixins" as mix; - -.wrapper { - :global { - .code-toolbar { - --toolbar-height: #{fun.convert-px(100)}; - - position: relative; - margin-top: calc(var(--toolbar-height) + var(--spacing-sm)); - - @include mix.media("screen") { - @include mix.dimensions("2xs") { - --toolbar-height: #{fun.convert-px(60)}; - } - } - - .toolbar { - display: flex; - flex-flow: row wrap; - justify-content: center; - width: 100%; - height: var(--toolbar-height); - position: absolute; - top: calc(var(--toolbar-height) * -1); - left: 0; - right: 0; - background: var(--color-bg-tertiary); - border: fun.convert-px(1) solid var(--color-border); - } - - .toolbar-item { - display: flex; - align-items: center; - margin: 0 var(--spacing-2xs); - } - - .toolbar-item:nth-child(1) { - flex: 0 0 100%; - justify-content: center; - margin: 0 auto 0 0; - padding: 0 var(--spacing-sm); - background: var(--color-bg-code); - border-bottom: fun.convert-px(1) solid var(--color-border); - color: var(--color-primary-darker); - font-size: var(--font-size-sm); - font-weight: 600; - - @include mix.media("screen") { - @include mix.dimensions("2xs") { - flex: 0 0 auto; - justify-content: left; - border-bottom: none; - border-right: fun.convert-px(1) solid var(--color-border); - } - } - } - } - - .copy-to-clipboard-button, - .prism-color-scheme-button { - display: block; - padding: fun.convert-px(3) var(--spacing-xs); - background: var(--color-bg); - border: 0.4ex solid var(--color-primary); - border-radius: fun.convert-px(30); - box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) - var(--color-shadow), - fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2) - var(--color-shadow), - fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4) - var(--color-shadow); - color: var(--color-primary); - font-size: var(--font-size-sm); - font-weight: 600; - transition: all 0.35s ease-in-out 0s; - - &:hover, - &:focus { - transform: translateX(#{fun.convert-px(-2)}) - translateY(#{fun.convert-px(-2)}); - box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) - var(--color-shadow-light), - fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) - fun.convert-px(-2) var(--color-shadow-light), - fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) - fun.convert-px(-4) var(--color-shadow-light), - fun.convert-px(4) fun.convert-px(7) fun.convert-px(8) - fun.convert-px(-3) var(--color-shadow-light); - } - - &:focus { - text-decoration: underline var(--color-primary) fun.convert-px(3); - } - - &:active { - text-decoration: none; - transform: translateY(#{fun.convert-px(2)}); - box-shadow: 0 0 0 0 var(--color-shadow); - } - } - - pre[class*="language-"] { - --gutter-size-with-spacing: calc(var(--gutter-size) + var(--spacing-xs)); - - position: relative; - overflow: auto; - background: var(--color-bg-secondary); - border: fun.convert-px(1) solid var(--color-border-light); - color: var(--color-fg); - hyphens: none; - tab-size: 4; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - word-wrap: normal; - - &.command-line { - --gutter-size: 19ch; - padding-left: var(--gutter-size-with-spacing); - } - - &.line-numbers { - --gutter-size: 6ch; - - counter-reset: lineNumber; - padding-left: var(--gutter-size-with-spacing); - } - - code { - display: block; - padding: var(--spacing-xs) 0; - position: relative; - } - - .line-numbers-rows, - .command-line-prompt { - display: block; - width: var(--gutter-size); - padding: var(--spacing-xs) 0; - position: absolute; - top: 0; - left: calc(var(--gutter-size-with-spacing) * -1); - background: var(--color-bg); - border-right: fun.convert-px(1) solid var(--color-border); - font-size: 100%; - letter-spacing: -1px; - text-align: right; - pointer-events: none; - user-select: none; - - > span { - &::before { - display: block; - padding-right: var(--spacing-xs); - color: var(--color-fg-light); - } - } - } - - .command-line-prompt { - > span { - &::before { - content: " "; - } - - &[data-user]::before { - content: "[" attr(data-user) "@" attr(data-host) "] $"; - } - - &[data-user="root"]::before { - content: "[" attr(data-user) "@" attr(data-host) "] #"; - } - - &[data-prompt]::before { - content: attr(data-prompt); - } - - &[data-continuation-prompt]::before { - content: attr(data-continuation-prompt); - } - } - } - - .line-numbers-rows { - > span { - counter-increment: lineNumber; - - &::before { - content: counter(lineNumber); - } - } - } - - .token { - &.comment, - &.doc-comment { - color: var(--color-fg-light); - } - - &.punctuation { - color: var(--color-fg); - } - - &.attr-name, - &.hexcode, - &.inserted, - &.string { - color: var(--color-token-green); - } - - &.class, - &.coord, - &.id, - &.function { - color: var(--color-token-purple); - } - - &.builtin, - &.builtin.class-name, - &.property-access, - &.regex, - &.scope { - color: var(--color-token-magenta); - } - - &.class-name, - &.constant, - &.global, - &.interpolation, - &.key, - &.package, - &.this, - &.title, - &.variable { - color: var(--color-token-blue); - } - - &.combinator, - &.keyword, - &.operator, - &.pseudo-class, - &.pseudo-element, - &.rule, - &.selector, - &.unit { - color: var(--color-token-orange); - } - - &.attr-value, - &.boolean, - &.number { - color: var(--color-token-yellow); - } - - &.delimiter, - &.doctype, - &.parameter, - &.parent, - &.property, - &.shebang, - &.tag { - color: var(--color-token-cyan); - } - - &.deleted { - color: var(--color-token-red); - } - - &.punctuation.brace-hover, - &.punctuation.brace-selected { - background: var(--color-bg); - outline: solid fun.convert-px(1) var(--color-primary-light); - } - } - - span.inline-color-wrapper { - background: url(fun.encode-svg( - '' - )); - - // Prevent repeating pattern to be seen. - background-position: center; - background-size: 110%; - - display: inline-block; - height: 1.1ch; - width: 1.1ch; - margin: 0 0.5ch 0 0; - border: fun.convert-px(1) solid var(--color-bg); - outline: fun.convert-px(1) solid var(--color-border-dark); - overflow: hidden; - } - - span.inline-color { - display: block; - - /* To prevent visual glitches again */ - height: 120%; - width: 120%; - } - } - } -} diff --git a/src/components/molecules/layout/code.stories.tsx b/src/components/molecules/layout/code.stories.tsx deleted file mode 100644 index d20cdbe..0000000 --- a/src/components/molecules/layout/code.stories.tsx +++ /dev/null @@ -1,121 +0,0 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Code } from './code'; - -/** - * Code - Storybook Meta - */ -export default { - title: 'Molecules/Layout/Code', - component: Code, - args: { - filterOutput: false, - outputPattern: '#output#', - }, - argTypes: { - 'aria-label': { - control: { - type: 'text', - }, - description: 'An accessible name for the code sample.', - table: { - category: 'Accessibility', - }, - type: { - name: 'string', - required: false, - }, - }, - children: { - control: { - type: 'text', - }, - description: 'The code sample.', - type: { - name: 'string', - required: true, - }, - }, - filterOutput: { - control: { - type: 'boolean', - }, - description: 'Filter the command line output.', - table: { - category: 'Options', - defaultValue: { summary: false }, - }, - type: { - name: 'boolean', - required: false, - }, - }, - language: { - control: { - type: 'text', - }, - description: 'The code sample language.', - type: { - name: 'string', - required: true, - }, - }, - plugins: { - description: 'An array of Prism plugins to activate.', - type: { - name: 'object', - required: false, - value: {}, - }, - }, - outputPattern: { - control: { - type: 'text', - }, - description: 'The command line output pattern.', - table: { - category: 'Options', - defaultValue: { summary: '#output#' }, - }, - type: { - name: 'string', - required: false, - }, - }, - }, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ; - -const javascriptCodeSample = ` -const foo = () => { - return 'bar'; -} -`; - -/** - * Code Stories - Code sample - */ -export const CodeSample = Template.bind({}); -CodeSample.args = { - children: javascriptCodeSample, - language: 'javascript', - plugins: ['line-numbers'], -}; - -const commandLineCode = ` -ls -lah -#output#drwxr-x---+ 42 armand armand 4,0K 17 avril 11:15 . -#output#drwxr-xr-x 4 root root 4,0K 30 mai 2021 .. -#output#-rw-r--r-- 1 armand armand 2,0K 21 juil. 2021 .xinitrc -`; - -/** - * Code Stories - Command Line - */ -export const CommandLine = Template.bind({}); -CommandLine.args = { - children: commandLineCode, - filterOutput: true, - language: 'bash', - plugins: ['command-line'], -}; diff --git a/src/components/molecules/layout/code.test.tsx b/src/components/molecules/layout/code.test.tsx deleted file mode 100644 index a0e4143..0000000 --- a/src/components/molecules/layout/code.test.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render } from '../../../../tests/utils'; -import { Code } from './code'; - -const code = ` -function foo() { - return 'bar'; -} -`; - -const language = 'javascript'; - -describe('Code', () => { - it('renders a code block', () => { - render({code}); - }); -}); diff --git a/src/components/molecules/layout/code.tsx b/src/components/molecules/layout/code.tsx deleted file mode 100644 index a1aadd8..0000000 --- a/src/components/molecules/layout/code.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import { FC, useRef } from 'react'; -import { - type OptionalPrismPlugin, - type PrismLanguage, - usePrism, -} from '../../../utils/hooks'; -import styles from './code.module.scss'; - -export type CodeProps = { - /** - * An accessible name. - */ - 'aria-label'?: string; - /** - * The code to highlight. - */ - children: string; - /** - * Filter command line output. Default: false. - */ - filterOutput?: boolean; - /** - * The code language. - */ - language: PrismLanguage; - /** - * The optional Prism plugins. - */ - plugins?: OptionalPrismPlugin[]; - /** - * Filter command line output using the given string. Default: #output# - */ - outputPattern?: string; -}; - -/** - * Code component - * - * Render a code block with syntax highlighting. - */ -export const Code: FC = ({ - children, - filterOutput = false, - language, - plugins = [], - outputPattern = '#output#', - ...props -}) => { - const wrapperRef = useRef(null); - const { attributes, className } = usePrism({ language, plugins }); - - const outputAttribute = filterOutput - ? { 'data-filter-output': outputPattern } - : {}; - - return ( -
- 
-        {children}
-
-
- ); -}; diff --git a/src/components/molecules/layout/index.ts b/src/components/molecules/layout/index.ts index 58d5442..80db10a 100644 --- a/src/components/molecules/layout/index.ts +++ b/src/components/molecules/layout/index.ts @@ -1,5 +1,4 @@ export * from './card'; -export * from './code'; export * from './columns'; export * from './page-footer'; export * from './page-header'; -- cgit v1.2.3