From 88e038cb81603332b5d23a4ef56d86c060dc45eb Mon Sep 17 00:00:00 2001 From: Matthew Oliveira Date: Wed, 3 Jan 2024 15:09:20 -0500 Subject: [PATCH 1/3] chore(code-snippet): update code-snippet to sb v7 --- .../carbon-web-components/.storybook/main.ts | 2 + .../code-snippet/code-snippet-story.ts | 214 ------------- ...ode-snippet-story.mdx => code-snippet.mdx} | 7 +- .../code-snippet/code-snippet.stories.ts | 289 ++++++++++++++++++ 4 files changed, 296 insertions(+), 216 deletions(-) delete mode 100644 packages/carbon-web-components/src/components/code-snippet/code-snippet-story.ts rename packages/carbon-web-components/src/components/code-snippet/{code-snippet-story.mdx => code-snippet.mdx} (91%) create mode 100644 packages/carbon-web-components/src/components/code-snippet/code-snippet.stories.ts diff --git a/packages/carbon-web-components/.storybook/main.ts b/packages/carbon-web-components/.storybook/main.ts index 7c002530418..e4a8c7d4a50 100644 --- a/packages/carbon-web-components/.storybook/main.ts +++ b/packages/carbon-web-components/.storybook/main.ts @@ -20,6 +20,8 @@ const stories = glob.sync( // '../src/**/*.mdx', // '../src/**/*.stories.@(js|jsx|ts|tsx)', // add mdx/story files as they are being worked on + '../src/**/code-snippet.mdx', + '../src/**/code-snippet.stories.ts', '../src/**/combo-box.stories.ts', '../src/**/combo-box.mdx', '../src/**/dropdown.stories.ts', diff --git a/packages/carbon-web-components/src/components/code-snippet/code-snippet-story.ts b/packages/carbon-web-components/src/components/code-snippet/code-snippet-story.ts deleted file mode 100644 index fa46f8d44b2..00000000000 --- a/packages/carbon-web-components/src/components/code-snippet/code-snippet-story.ts +++ /dev/null @@ -1,214 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2019, 2023 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -import { html } from 'lit'; -import { number, boolean } from '@storybook/addon-knobs'; -import { prefix } from '../../globals/settings'; -import textNullable from '../../../.storybook/knob-text-nullable'; -import storyDocs from './code-snippet-story.mdx'; -import './index'; - -export const inline = () => { - return html` - node -v - - `; -}; - -export const inlineWithLayer = () => { - return html` - - node -v - - - `; -}; - -export const multiline = () => { - const children = `"scripts": { - "build": "lerna run build --stream --prefix --npm-client yarn", - "ci-check": "carbon-cli ci-check", - "clean": "lerna run clean && lerna clean --yes && rimraf node_modules", - "doctoc": "doctoc --title '## Table of Contents'", - "format": "prettier --write '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**'", - "format:diff": "prettier --list-different '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**' '!packages/components/**'", - "lint": "eslint actions config codemods packages", - "lint:styles": "stylelint '**/*.{css,scss}' --report-needless-disables --report-invalid-scope-disables", - "sync": "carbon-cli sync", - "test": "cross-env BABEL_ENV=test jest", - "test:e2e": "cross-env BABEL_ENV=test jest --testPathPattern=e2e --testPathIgnorePatterns='examples,/packages/components/,/packages/react/'" - }, - "resolutions": { - "react": "~16.9.0", - "react-dom": "~16.9.0", - "react-is": "~16.9.0", - "react-test-renderer": "~16.9.0" - }, - "devDependencies": { - "@babel/core": "^7.10.0", - "@babel/plugin-proposal-class-properties": "^7.7.4", - "@babel/plugin-proposal-export-default-from": "^7.7.4", - "@babel/plugin-proposal-export-namespace-from": "^7.7.4", - "@babel/plugin-transform-runtime": "^7.10.0", - "@babel/preset-env": "^7.10.0", - "@babel/preset-react": "^7.10.0", - "@babel/runtime": "^7.10.0", - "@commitlint/cli": "^8.3.5", -`; - // prettier-ignore - return html` - ${children} - -`; -}; - -export const multilineWithLayer = () => { - const children = `"scripts": { - "build": "lerna run build --stream --prefix --npm-client yarn", - "ci-check": "carbon-cli ci-check", - "clean": "lerna run clean && lerna clean --yes && rimraf node_modules", - "doctoc": "doctoc --title '## Table of Contents'", - "format": "prettier --write '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**'", - "format:diff": "prettier --list-different '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**' '!packages/components/**'", - "lint": "eslint actions config codemods packages", - "lint:styles": "stylelint '**/*.{css,scss}' --report-needless-disables --report-invalid-scope-disables", - "sync": "carbon-cli sync", - "test": "cross-env BABEL_ENV=test jest", - "test:e2e": "cross-env BABEL_ENV=test jest --testPathPattern=e2e --testPathIgnorePatterns='examples,/packages/components/,/packages/react/'" - }, - "resolutions": { - "react": "~16.9.0", - "react-dom": "~16.9.0", - "react-is": "~16.9.0", - "react-test-renderer": "~16.9.0" - }, - "devDependencies": { - "@babel/core": "^7.10.0", - "@babel/plugin-proposal-class-properties": "^7.7.4", - "@babel/plugin-proposal-export-default-from": "^7.7.4", - "@babel/plugin-proposal-export-namespace-from": "^7.7.4", - "@babel/plugin-transform-runtime": "^7.10.0", - "@babel/preset-env": "^7.10.0", - "@babel/preset-react": "^7.10.0", - "@babel/runtime": "^7.10.0", - "@commitlint/cli": "^8.3.5", -`; - // prettier-ignore - return html` - - ${children} - - -`; -}; - -export const singleline = () => { - return html` - - yarn add carbon-components@latest carbon-components-react@latest - @carbon/icons-react@latest carbon-icons@latest - - `; -}; - -export const singlelineWithLayer = () => { - return html` - - yarn add carbon-components@latest carbon-components-react@latest - @carbon/icons-react@latest carbon-icons@latest > - - `; -}; - -export const skeleton = () => - html` - - - `; - -skeleton.parameters = { - percy: { - skip: true, - }, -}; - -export const Playground = (args) => { - const { - copyButtonDescription, - copyText, - disabled, - feedback, - feedbackTimeout, - hideCopyButton, - maxCollapsedNumberOfRows, - maxExpandedNumberOfRows, - minCollapsedNumberOfRows, - minExpandedNumberOfRows, - showLessText, - showMoreText, - wrapText, - } = args?.[`${prefix}-code-snippet`] ?? {}; - return html` - yarn add @carbon/react - - `; -}; - -Playground.parameters = { - knobs: { - [`${prefix}-code-snippet`]: () => ({ - copyButtonDescription: textNullable( - 'Copy button description', - 'Copy to clipboard' - ), - copyText: textNullable('Copy text', ''), - disabled: boolean('Disabled', false), - feedback: textNullable('Feedback', ''), - feedbackTimeout: number('Feedback timeout', 0), - hideCopyButton: boolean('Hide copy button', false), - maxCollapsedNumberOfRows: number('Max collapsed number of rows', 15), - maxExpandeddNumberOfRows: number('Max expanded number of rows', 0), - minCollapsedNumberOfRows: number('Min collapsed number of rows', 3), - minExpandeddNumberOfRows: number('Min expanded number of rows', 16), - showLessText: textNullable('Show less text', 'Show less'), - showMoreText: textNullable('Show more text', 'Show more'), - wrapText: boolean('Wrap text', false), - }), - }, -}; - -export default { - title: 'Components/Code snippet', - parameters: { - ...storyDocs.parameters, - }, -}; diff --git a/packages/carbon-web-components/src/components/code-snippet/code-snippet-story.mdx b/packages/carbon-web-components/src/components/code-snippet/code-snippet.mdx similarity index 91% rename from packages/carbon-web-components/src/components/code-snippet/code-snippet-story.mdx rename to packages/carbon-web-components/src/components/code-snippet/code-snippet.mdx index d344bb199d1..c7811cff78e 100644 --- a/packages/carbon-web-components/src/components/code-snippet/code-snippet-story.mdx +++ b/packages/carbon-web-components/src/components/code-snippet/code-snippet.mdx @@ -1,5 +1,8 @@ -import { Props, Description } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Meta, Description } from '@storybook/addon-docs/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; +import * as CodeSnippetStories from './code-snippet.stories'; + + # Code snippet @@ -80,4 +83,4 @@ For the skeleton variation, utilize ``. ## `` attributes and properties - + diff --git a/packages/carbon-web-components/src/components/code-snippet/code-snippet.stories.ts b/packages/carbon-web-components/src/components/code-snippet/code-snippet.stories.ts new file mode 100644 index 00000000000..516358e1692 --- /dev/null +++ b/packages/carbon-web-components/src/components/code-snippet/code-snippet.stories.ts @@ -0,0 +1,289 @@ +/** + * @license + * + * Copyright IBM Corp. 2019, 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { html } from 'lit'; +import storyDocs from './code-snippet.mdx'; +import './index'; + +const args = { + copyButtonDescription: 'Copy to clipboard', + copyText: '', + disabled: false, + feedback: '', + feedbackTimeout: 0, + hideCopyButton: false, + maxCollapsedNumberOfRows: 15, + maxExpandeddNumberOfRows: 0, + minCollapsedNumberOfRows: 3, + minExpandeddNumberOfRows: 16, + showLessText: 'Show less', + showMoreText: 'Show more', + wrapText: false, +}; + +const argTypes = { + copyButtonDescription: { + control: 'text', + description: 'Specify the description for the Copy Button.', + }, + copyText: { + control: 'text', + description: + "Optional text to copy. If not specified, the children node's innerText will be used as the copy value.", + }, + disabled: { + control: 'boolean', + description: 'Specify whether or not the CodeSnippet should be disabled.', + }, + feedback: { + control: 'text', + description: 'Specify the string displayed when the snippet is copied.', + }, + feedbackTimeout: { + control: 'number', + description: + 'Specify the time it takes for the feedback message to timeout.', + }, + hideCopyButton: { + control: 'boolean', + description: + 'Specify whether or not a copy button should be used/rendered.', + }, + maxCollapsedNumberOfRows: { + control: 'number', + description: + 'Specify the maximum number of rows to be shown when in collapsed view.', + }, + maxExpandeddNumberOfRows: { + control: 'number', + description: + 'Specify the maximum number of rows to be shown when in expanded view.', + }, + minCollapsedNumberOfRows: { + control: 'number', + description: + 'Specify the minimum number of rows to be shown when in collapsed view.', + }, + minExpandeddNumberOfRows: { + control: 'number', + description: + 'Specify the minimum number of rows to be shown when in expanded view.', + }, + showLessText: { + control: 'text', + description: + 'Specify a string that is displayed when the Code Snippet has been interacted with to show more lines.', + }, + showMoreText: { + control: 'text', + description: + 'Specify a string that is displayed when the Code Snippet text is more than 15 lines.', + }, + wrapText: { + control: 'boolean', + description: 'Specify whether or not to wrap the text.', + }, +}; + +export const Inline = { + render: () => { + return html` + node -v + + `; + }, +}; + +export const InlineWithLayer = { + render: () => { + return html` + + node -v + + + `; + }, +}; + +export const Multiline = { + render: () => { + const children = `"scripts": { + "build": "lerna run build --stream --prefix --npm-client yarn", + "ci-check": "carbon-cli ci-check", + "clean": "lerna run clean && lerna clean --yes && rimraf node_modules", + "doctoc": "doctoc --title '## Table of Contents'", + "format": "prettier --write '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**'", + "format:diff": "prettier --list-different '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**' '!packages/components/**'", + "lint": "eslint actions config codemods packages", + "lint:styles": "stylelint '**/*.{css,scss}' --report-needless-disables --report-invalid-scope-disables", + "sync": "carbon-cli sync", + "test": "cross-env BABEL_ENV=test jest", + "test:e2e": "cross-env BABEL_ENV=test jest --testPathPattern=e2e --testPathIgnorePatterns='examples,/packages/components/,/packages/react/'" + }, + "resolutions": { + "react": "~16.9.0", + "react-dom": "~16.9.0", + "react-is": "~16.9.0", + "react-test-renderer": "~16.9.0" + }, + "devDependencies": { + "@babel/core": "^7.10.0", + "@babel/plugin-proposal-class-properties": "^7.7.4", + "@babel/plugin-proposal-export-default-from": "^7.7.4", + "@babel/plugin-proposal-export-namespace-from": "^7.7.4", + "@babel/plugin-transform-runtime": "^7.10.0", + "@babel/preset-env": "^7.10.0", + "@babel/preset-react": "^7.10.0", + "@babel/runtime": "^7.10.0", + "@commitlint/cli": "^8.3.5", +`; + // prettier-ignore + return html` + ${children} + +`; + }, +}; + +export const MultilineWithLayer = { + render: () => { + const children = `"scripts": { + "build": "lerna run build --stream --prefix --npm-client yarn", + "ci-check": "carbon-cli ci-check", + "clean": "lerna run clean && lerna clean --yes && rimraf node_modules", + "doctoc": "doctoc --title '## Table of Contents'", + "format": "prettier --write '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**'", + "format:diff": "prettier --list-different '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**' '!packages/components/**'", + "lint": "eslint actions config codemods packages", + "lint:styles": "stylelint '**/*.{css,scss}' --report-needless-disables --report-invalid-scope-disables", + "sync": "carbon-cli sync", + "test": "cross-env BABEL_ENV=test jest", + "test:e2e": "cross-env BABEL_ENV=test jest --testPathPattern=e2e --testPathIgnorePatterns='examples,/packages/components/,/packages/react/'" + }, + "resolutions": { + "react": "~16.9.0", + "react-dom": "~16.9.0", + "react-is": "~16.9.0", + "react-test-renderer": "~16.9.0" + }, + "devDependencies": { + "@babel/core": "^7.10.0", + "@babel/plugin-proposal-class-properties": "^7.7.4", + "@babel/plugin-proposal-export-default-from": "^7.7.4", + "@babel/plugin-proposal-export-namespace-from": "^7.7.4", + "@babel/plugin-transform-runtime": "^7.10.0", + "@babel/preset-env": "^7.10.0", + "@babel/preset-react": "^7.10.0", + "@babel/runtime": "^7.10.0", + "@commitlint/cli": "^8.3.5", +`; + // prettier-ignore + return html` + + ${children} + + +`; + }, +}; + +export const Singleline = { + render: () => { + return html` + + yarn add carbon-components@latest carbon-components-react@latest + @carbon/icons-react@latest carbon-icons@latest + + `; + }, +}; + +export const SinglelineWithLayer = { + render: () => { + return html` + + yarn add carbon-components@latest carbon-components-react@latest + @carbon/icons-react@latest carbon-icons@latest > + + `; + }, +}; + +export const Skeleton = { + parameters: { + percy: { + skip: true, + }, + }, + render: () => + html` + + + `, +}; + +export const Playground = { + args, + argTypes, + render: (args) => { + const { + copyButtonDescription, + copyText, + disabled, + feedback, + feedbackTimeout, + hideCopyButton, + maxCollapsedNumberOfRows, + maxExpandedNumberOfRows, + minCollapsedNumberOfRows, + minExpandedNumberOfRows, + showLessText, + showMoreText, + wrapText, + } = args ?? {}; + return html` + yarn add @carbon/react + + `; + }, +}; + +const meta = { + title: 'Components/Code snippet', + parameters: { + docs: { + page: storyDocs, + }, + }, +}; + +export default meta; From 69ac46e1fc1190ea4b546d0da2aba66ad66b635a Mon Sep 17 00:00:00 2001 From: Matthew Oliveira Date: Mon, 8 Jan 2024 14:44:14 -0500 Subject: [PATCH 2/3] chore(code-snippet): include storybook layers components --- .../src/components/code-snippet/code-snippet.stories.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/carbon-web-components/src/components/code-snippet/code-snippet.stories.ts b/packages/carbon-web-components/src/components/code-snippet/code-snippet.stories.ts index 516358e1692..6c60d97fc8f 100644 --- a/packages/carbon-web-components/src/components/code-snippet/code-snippet.stories.ts +++ b/packages/carbon-web-components/src/components/code-snippet/code-snippet.stories.ts @@ -10,6 +10,7 @@ import { html } from 'lit'; import storyDocs from './code-snippet.mdx'; import './index'; +import '../../../.storybook/templates/with-layer'; const args = { copyButtonDescription: 'Copy to clipboard', From 63004f976da4a6ec814dd3c2b9c5bf64b68ff399 Mon Sep 17 00:00:00 2001 From: Matthew Oliveira Date: Mon, 8 Jan 2024 15:11:20 -0500 Subject: [PATCH 3/3] chore(code-snippet): include storybook layers components --- .../src/components/code-snippet/code-snippet.stories.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/carbon-web-components/src/components/code-snippet/code-snippet.stories.ts b/packages/carbon-web-components/src/components/code-snippet/code-snippet.stories.ts index 6c60d97fc8f..8b1ce887824 100644 --- a/packages/carbon-web-components/src/components/code-snippet/code-snippet.stories.ts +++ b/packages/carbon-web-components/src/components/code-snippet/code-snippet.stories.ts @@ -10,6 +10,7 @@ import { html } from 'lit'; import storyDocs from './code-snippet.mdx'; import './index'; +import '../layer/index'; import '../../../.storybook/templates/with-layer'; const args = {