From 81756401adfe1efd72e9974ba1e70b08bed634d2 Mon Sep 17 00:00:00 2001
From: Anna Wen <54281166+annawen1@users.noreply.github.com>
Date: Fri, 20 Dec 2024 14:56:08 -0500
Subject: [PATCH 01/11] chore: rollup build for react components
---
.gitignore | 1 +
packages/react/.storybook/preview.js | 2 -
packages/react/.storybook/theme.js | 1 -
packages/react/package.json | 41 ++-
.../__stories__/ExampleButton.stories.js | 1 +
.../components/ExampleButton.tsx | 10 +-
.../components/example-button.scss | 13 +-
.../src/components/ExampleButton/index.ts | 4 +-
.../src/components/ExampleButton/package.json | 16 +-
packages/react/src/internal/usePrefix.ts | 18 ++
packages/react/tasks/build.js | 182 ++++++++++++
packages/react/tsconfig.json | 21 +-
yarn.lock | 259 +++++++++++++++++-
13 files changed, 521 insertions(+), 48 deletions(-)
create mode 100644 packages/react/src/internal/usePrefix.ts
create mode 100644 packages/react/tasks/build.js
diff --git a/.gitignore b/.gitignore
index 71ebc159..fcbc6b51 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,6 +10,7 @@ lerna-debug.log*
node_modules
dist
es
+scss
dist-ssr
lib
*.local
diff --git a/packages/react/.storybook/preview.js b/packages/react/.storybook/preview.js
index a8083d96..0d4c8bce 100644
--- a/packages/react/.storybook/preview.js
+++ b/packages/react/.storybook/preview.js
@@ -8,8 +8,6 @@ import './styles.scss';
import theme from './theme';
-console.log('process.env.NODE_ENV', process.env.NODE_ENV);
-
const devTools = {
layoutSize: {
description: "Set the layout context's size",
diff --git a/packages/react/.storybook/theme.js b/packages/react/.storybook/theme.js
index e73b971f..8c8fc9aa 100644
--- a/packages/react/.storybook/theme.js
+++ b/packages/react/.storybook/theme.js
@@ -6,7 +6,6 @@
*/
import { create } from '@storybook/theming';
-import PackageInfo from '../package.json';
/**
* @see https://storybook.js.org/docs/react/configure/theming
diff --git a/packages/react/package.json b/packages/react/package.json
index 5c61a8dd..0b86f1bd 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -2,6 +2,7 @@
"name": "@carbon/labs-react",
"version": "0.0.0",
"private": true,
+ "type": "module",
"description": "React components for Carbon Labs",
"license": "Apache-2.0",
"repository": "https://github.com/carbon-design-system/carbon-labs",
@@ -11,28 +12,35 @@
"test": "jest",
"test:updateSnapshot": "jest -u"
},
+ "files": [
+ "es",
+ "lib"
+ ],
+ "peerDependencies": {
+ "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
+ "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
+ },
"dependencies": {
"@carbon/react": "^1.71.1",
"@carbon/styles": "^1.70.0",
- "@testing-library/jest-dom": "^5.17.0",
- "@testing-library/react": "^16.1.0",
- "@testing-library/user-event": "^14.5.2",
- "@types/jest": "^27.5.2",
- "@types/node": "^16.18.121",
- "@types/react": "^18.3.12",
- "@types/react-dom": "^18.3.1",
- "jest": "^29.7.0",
"react": "^18.3.1",
- "react-dom": "^18.3.1",
- "typescript": "^5.2.2"
+ "react-dom": "^18.3.1"
},
"devDependencies": {
"@babel/core": "^7.26.0",
+ "@babel/plugin-proposal-export-default-from": "^7.25.9",
+ "@babel/plugin-transform-class-properties": "^7.25.9",
+ "@babel/plugin-transform-export-namespace-from": "^7.25.9",
+ "@babel/plugin-transform-react-constant-elements": "^7.25.9",
"@babel/preset-env": "^7.26.0",
"@babel/preset-react": "^7.26.3",
"@babel/preset-typescript": "^7.26.0",
"@chromatic-com/storybook": "^3.2.2",
"@mdx-js/react": "^3.1.0",
+ "@rollup/plugin-babel": "^6.0.0",
+ "@rollup/plugin-commonjs": "^28.0.0",
+ "@rollup/plugin-node-resolve": "^15.0.0",
+ "@rollup/plugin-typescript": "^11.0.0",
"@storybook/addon-docs": "^8.4.7",
"@storybook/addon-essentials": "^8.4.7",
"@storybook/addon-interactions": "^8.4.7",
@@ -43,23 +51,36 @@
"@storybook/react": "^8.4.7",
"@storybook/react-webpack5": "^8.4.7",
"@storybook/test": "^8.4.7",
+ "@testing-library/jest-dom": "^5.17.0",
+ "@testing-library/react": "^16.1.0",
+ "@testing-library/user-event": "^14.5.2",
"@types/babel__core": "^7",
"@types/babel__preset-env": "^7",
+ "@types/jest": "^27.5.2",
+ "@types/node": "^16.18.121",
"@types/prop-types": "^15",
+ "@types/react": "^18.3.12",
+ "@types/react-dom": "^18.3.1",
"autoprefixer": "^10.4.20",
"babel-jest": "^29.7.0",
+ "babel-plugin-dev-expression": "^0.2.3",
+ "browserslist-config-carbon": "^11.2.0",
"css-loader": "^7.1.2",
+ "jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"mini-css-extract-plugin": "^2.9.2",
"postcss": "^8.4.49",
"postcss-loader": "^8.1.1",
"prop-types": "^15.8.1",
"remark-gfm": "^4.0.0",
+ "rollup-plugin-copy": "^3.5.0",
+ "rollup-plugin-strip-banner": "^3.0.0",
"sass-loader": "^16.0.4",
"storybook": "^8.4.7",
"storybook-addon-accessibility-checker": "^3.1.61-rc.3",
"style-loader": "^4.0.0",
"ts-jest": "^29.2.5",
+ "typescript": "^5.2.2",
"typescript-config-carbon": "^0.3.0",
"webpack": "^5.97.0"
}
diff --git a/packages/react/src/components/ExampleButton/__stories__/ExampleButton.stories.js b/packages/react/src/components/ExampleButton/__stories__/ExampleButton.stories.js
index 79d79044..cd32108e 100644
--- a/packages/react/src/components/ExampleButton/__stories__/ExampleButton.stories.js
+++ b/packages/react/src/components/ExampleButton/__stories__/ExampleButton.stories.js
@@ -10,6 +10,7 @@
import React from 'react';
import mdx from './ExampleButton.mdx';
import { ExampleButton } from '../components/ExampleButton';
+import '../components/example-button.scss';
export default {
title: 'Components/ExampleButton',
diff --git a/packages/react/src/components/ExampleButton/components/ExampleButton.tsx b/packages/react/src/components/ExampleButton/components/ExampleButton.tsx
index d8cf2430..861269af 100644
--- a/packages/react/src/components/ExampleButton/components/ExampleButton.tsx
+++ b/packages/react/src/components/ExampleButton/components/ExampleButton.tsx
@@ -8,7 +8,7 @@
*/
import React from 'react';
import { Button, ButtonProps } from '@carbon/react';
-import './example-button.scss';
+import { usePrefix } from '../../../internal/usePrefix';
/** Primary UI component for user interaction */
@@ -20,5 +20,11 @@ export const ExampleButton = ({
children = 'Button',
...rest
}: ExampleButtonProps) => {
- return ;
+ const prefix = usePrefix();
+
+ return (
+
+
+
+ );
};
diff --git a/packages/react/src/components/ExampleButton/components/example-button.scss b/packages/react/src/components/ExampleButton/components/example-button.scss
index aed566fe..dc434a54 100644
--- a/packages/react/src/components/ExampleButton/components/example-button.scss
+++ b/packages/react/src/components/ExampleButton/components/example-button.scss
@@ -5,4 +5,15 @@
* LICENSE file in the root directory of this source tree.
*/
-@use '@carbon/react/scss/components/button';
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/colors' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/components/button' as *;
+
+$prefix: 'clabs' !default;
+
+.#{$prefix}--example-button__container {
+ border: 1px solid $border-subtle-01;
+ width: fit-content;
+ padding: $spacing-01;
+}
diff --git a/packages/react/src/components/ExampleButton/index.ts b/packages/react/src/components/ExampleButton/index.ts
index 25bf602e..0d9bdff1 100644
--- a/packages/react/src/components/ExampleButton/index.ts
+++ b/packages/react/src/components/ExampleButton/index.ts
@@ -6,6 +6,4 @@
* 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 { ExampleButton } from './components/ExampleButton';
-
-export { ExampleButton };
+export { ExampleButton } from './components/ExampleButton.js';
diff --git a/packages/react/src/components/ExampleButton/package.json b/packages/react/src/components/ExampleButton/package.json
index 57519c6a..92d33412 100644
--- a/packages/react/src/components/ExampleButton/package.json
+++ b/packages/react/src/components/ExampleButton/package.json
@@ -15,13 +15,13 @@
},
"main": "./src/index.js",
"module": "./src/index.js",
- "exports": {
- ".": {
- "default": "./src/index.js"
- },
- "./es/": "./es/"
- },
"files": [
- "es/**/*"
- ]
+ "es",
+ "lib",
+ "scss"
+ ],
+ "scripts": {
+ "build": "node ../../../tasks/build.js",
+ "clean": "rm -rf {es,lib,scss}"
+ }
}
diff --git a/packages/react/src/internal/usePrefix.ts b/packages/react/src/internal/usePrefix.ts
new file mode 100644
index 00000000..095d9cab
--- /dev/null
+++ b/packages/react/src/internal/usePrefix.ts
@@ -0,0 +1,18 @@
+/**
+ * Copyright IBM Corp. 2016, 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 React from 'react';
+
+export const PrefixContext = React.createContext('clabs');
+
+/**
+ * Sets the prefix context
+ * @returns context value
+ */
+export function usePrefix() {
+ return React.useContext(PrefixContext);
+}
diff --git a/packages/react/tasks/build.js b/packages/react/tasks/build.js
new file mode 100644
index 00000000..2a5d7df0
--- /dev/null
+++ b/packages/react/tasks/build.js
@@ -0,0 +1,182 @@
+/**
+ * Copyright IBM Corp. 2016, 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 autoprefixer from 'autoprefixer';
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from '@rollup/plugin-typescript';
+import path from 'path';
+import stripBanner from 'rollup-plugin-strip-banner';
+import postcss from 'rollup-plugin-postcss';
+import copy from 'rollup-plugin-copy';
+import { babel } from '@rollup/plugin-babel';
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import { rollup } from 'rollup';
+import {
+ loadBaseTsCompilerOpts,
+ loadTsCompilerOpts,
+} from 'typescript-config-carbon';
+import * as packageJson from '../package.json' assert { type: 'json' };
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+/**
+ * build function
+ */
+async function build() {
+ const reactEntrypoint = {
+ filepath: path.resolve(process.cwd(), 'index.ts'),
+ rootDir: 'src',
+ outputDirectory: path.resolve(process.cwd()),
+ };
+
+ const formats = [
+ {
+ type: 'esm',
+ directory: 'es',
+ },
+ {
+ type: 'commonjs',
+ directory: 'lib',
+ },
+ ];
+
+ // Build @carbon/react formats
+ for (const format of formats) {
+ const outputDirectory = path.join(
+ reactEntrypoint.outputDirectory,
+ format.directory
+ );
+
+ const reactInputConfig = getRollupConfig(
+ reactEntrypoint.filepath,
+ reactEntrypoint.rootDir,
+ outputDirectory
+ );
+ const reactBundle = await rollup(reactInputConfig);
+
+ await reactBundle.write({
+ dir: outputDirectory,
+ format: format.type,
+ preserveModules: true,
+ preserveModulesRoot: path.dirname(reactEntrypoint.filepath),
+ banner,
+ exports: 'named',
+ });
+ }
+}
+
+const banner = `/**
+ * Copyright IBM Corp. 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.
+ */
+`;
+
+// Base babel config for js and ts
+const babelConfig = {
+ babelrc: false,
+ exclude: ['node_modules/**'],
+ presets: [
+ [
+ '@babel/preset-env',
+ {
+ modules: false,
+ targets: {
+ browsers: ['extends browserslist-config-carbon'],
+ },
+ },
+ ],
+ '@babel/preset-react',
+ '@babel/preset-typescript',
+ ],
+ plugins: [
+ 'dev-expression',
+ '@babel/plugin-proposal-export-default-from',
+ '@babel/plugin-transform-class-properties',
+ '@babel/plugin-transform-export-namespace-from',
+ '@babel/plugin-transform-react-constant-elements',
+ ],
+ babelHelpers: 'bundled',
+ extensions: ['.ts', '.tsx', '.js', '.jsx'],
+};
+
+/**
+ *
+ * @returns
+ */
+function getTsCompilerOptions() {
+ const baseOpts = loadBaseTsCompilerOpts();
+ const projectTsConfigPath = path.resolve(__dirname, '../tsconfig.json');
+ const overrideOpts = loadTsCompilerOpts(projectTsConfigPath);
+ return { ...baseOpts, ...overrideOpts };
+}
+
+/**
+ *
+ * Rollup config
+ * @param {*} input input path of file
+ * @param {*} rootDir root directory of package
+ * @param {*} outDir output directory
+ * @returns
+ */
+function getRollupConfig(input, rootDir, outDir) {
+ return {
+ input,
+ // Mark dependencies listed in `package.json` as external so that they are
+ // not included in the output bundle.
+ external: [
+ ...Object.keys(packageJson.default.peerDependencies),
+ ...Object.keys(packageJson.default.dependencies),
+ ...Object.keys(packageJson.default.devDependencies),
+ ].map((name) => {
+ // Transform the name of each dependency into a regex so that imports from
+ // nested paths are correctly marked as external.
+ //
+ // Example:
+ // import 'module-name';
+ // import 'module-name/path/to/nested/module';
+ return new RegExp(`^${name}(/.*)?`);
+ }),
+ plugins: [
+ nodeResolve({
+ extensions: ['.mjs', '.js', '.json', '.node', '.ts', '.tsx'],
+ }),
+ commonjs({
+ include: /node_modules/,
+ }),
+ copy({
+ targets: [
+ {
+ src: 'components/**/*.scss',
+ dest: 'scss',
+ },
+ ],
+ flatten: false,
+ }),
+ // postcss(postcssOptions()),
+ typescript({
+ noEmitOnError: true,
+ noForceEmit: true,
+ outputToFilesystem: false,
+ compilerOptions: {
+ ...getTsCompilerOptions(),
+ rootDir,
+ outDir,
+ },
+ }),
+ babel(babelConfig),
+ stripBanner(),
+ ],
+ };
+}
+
+build().catch((error) => {
+ console.log(error);
+ process.exit(1);
+});
diff --git a/packages/react/tsconfig.json b/packages/react/tsconfig.json
index c9b2e64d..7575188f 100644
--- a/packages/react/tsconfig.json
+++ b/packages/react/tsconfig.json
@@ -1,21 +1,8 @@
{
+ "extends": "typescript-config-carbon/tsconfig.base.json",
"compilerOptions": {
- "target": "es5",
- "lib": ["dom", "dom.iterable", "esnext"],
- "allowJs": true,
- "skipLibCheck": true,
- "types": ["jest", "@testing-library/jest-dom"],
- "esModuleInterop": true,
- "allowSyntheticDefaultImports": true,
- "strict": true,
- "forceConsistentCasingInFileNames": true,
- "noFallthroughCasesInSwitch": true,
- "module": "esnext",
- "moduleResolution": "node",
- "resolveJsonModule": true,
- "isolatedModules": true,
- "noEmit": true,
- "jsx": "react-jsx"
+ // TODO: Turn back on once stricter typings for internal utitlies are complete
+ "noImplicitAny": false
},
- "include": ["src", "__tests__/**/*"]
+ "include": ["src/**/*"]
}
diff --git a/yarn.lock b/yarn.lock
index e3a2f81a..aea118fb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -709,6 +709,17 @@ __metadata:
languageName: node
linkType: hard
+"@babel/plugin-proposal-export-default-from@npm:^7.25.9":
+ version: 7.25.9
+ resolution: "@babel/plugin-proposal-export-default-from@npm:7.25.9"
+ dependencies:
+ "@babel/helper-plugin-utils": "npm:^7.25.9"
+ peerDependencies:
+ "@babel/core": ^7.0.0-0
+ checksum: 10c0/6d7ca2d8179d97c38cbcc327129c70103b95797a048c6d244fa8f3eb35b8aebc8122957dc25f20d9923fe6e75f16e2a4d649f1d80a63a9fed2d8b9eda85bd650
+ languageName: node
+ linkType: hard
+
"@babel/plugin-proposal-export-namespace-from@npm:7.0.0-rc.0":
version: 7.0.0-rc.0
resolution: "@babel/plugin-proposal-export-namespace-from@npm:7.0.0-rc.0"
@@ -1860,6 +1871,17 @@ __metadata:
languageName: node
linkType: hard
+"@babel/plugin-transform-react-constant-elements@npm:^7.25.9":
+ version: 7.25.9
+ resolution: "@babel/plugin-transform-react-constant-elements@npm:7.25.9"
+ dependencies:
+ "@babel/helper-plugin-utils": "npm:^7.25.9"
+ peerDependencies:
+ "@babel/core": ^7.0.0-0
+ checksum: 10c0/50aca3df122cf801abd251cc2507ef3011ead8f047d31d8f35b10627dd722f6a165245b09e81b3c6876515fd266a97aed0052f6b409aa1fe961fb36dd7cc0822
+ languageName: node
+ linkType: hard
+
"@babel/plugin-transform-react-display-name@npm:7.0.0-rc.0":
version: 7.0.0-rc.0
resolution: "@babel/plugin-transform-react-display-name@npm:7.0.0-rc.0"
@@ -2656,6 +2678,10 @@ __metadata:
resolution: "@carbon/labs-react@workspace:packages/react"
dependencies:
"@babel/core": "npm:^7.26.0"
+ "@babel/plugin-proposal-export-default-from": "npm:^7.25.9"
+ "@babel/plugin-transform-class-properties": "npm:^7.25.9"
+ "@babel/plugin-transform-export-namespace-from": "npm:^7.25.9"
+ "@babel/plugin-transform-react-constant-elements": "npm:^7.25.9"
"@babel/preset-env": "npm:^7.26.0"
"@babel/preset-react": "npm:^7.26.3"
"@babel/preset-typescript": "npm:^7.26.0"
@@ -2663,6 +2689,10 @@ __metadata:
"@carbon/styles": "npm:^1.70.0"
"@chromatic-com/storybook": "npm:^3.2.2"
"@mdx-js/react": "npm:^3.1.0"
+ "@rollup/plugin-babel": "npm:^6.0.0"
+ "@rollup/plugin-commonjs": "npm:^28.0.0"
+ "@rollup/plugin-node-resolve": "npm:^15.0.0"
+ "@rollup/plugin-typescript": "npm:^11.0.0"
"@storybook/addon-docs": "npm:^8.4.7"
"@storybook/addon-essentials": "npm:^8.4.7"
"@storybook/addon-interactions": "npm:^8.4.7"
@@ -2685,6 +2715,8 @@ __metadata:
"@types/react-dom": "npm:^18.3.1"
autoprefixer: "npm:^10.4.20"
babel-jest: "npm:^29.7.0"
+ babel-plugin-dev-expression: "npm:^0.2.3"
+ browserslist-config-carbon: "npm:^11.2.0"
css-loader: "npm:^7.1.2"
jest: "npm:^29.7.0"
jest-environment-jsdom: "npm:^29.7.0"
@@ -2695,6 +2727,8 @@ __metadata:
react: "npm:^18.3.1"
react-dom: "npm:^18.3.1"
remark-gfm: "npm:^4.0.0"
+ rollup-plugin-copy: "npm:^3.5.0"
+ rollup-plugin-strip-banner: "npm:^3.0.0"
sass-loader: "npm:^16.0.4"
storybook: "npm:^8.4.7"
storybook-addon-accessibility-checker: "npm:^3.1.61-rc.3"
@@ -2703,6 +2737,9 @@ __metadata:
typescript: "npm:^5.2.2"
typescript-config-carbon: "npm:^0.3.0"
webpack: "npm:^5.97.0"
+ peerDependencies:
+ react: ^16.8.6 || ^17.0.1 || ^18.2.0
+ react-dom: ^16.8.6 || ^17.0.1 || ^18.2.0
languageName: unknown
linkType: soft
@@ -4266,7 +4303,7 @@ __metadata:
languageName: node
linkType: hard
-"@jridgewell/sourcemap-codec@npm:^1.4.10, @jridgewell/sourcemap-codec@npm:^1.4.14, @jridgewell/sourcemap-codec@npm:^1.5.0":
+"@jridgewell/sourcemap-codec@npm:^1.4.10, @jridgewell/sourcemap-codec@npm:^1.4.14, @jridgewell/sourcemap-codec@npm:^1.4.15, @jridgewell/sourcemap-codec@npm:^1.5.0":
version: 1.5.0
resolution: "@jridgewell/sourcemap-codec@npm:1.5.0"
checksum: 10c0/2eb864f276eb1096c3c11da3e9bb518f6d9fc0023c78344cdc037abadc725172c70314bdb360f2d4b7bffec7f5d657ce006816bc5d4ecb35e61b66132db00c18
@@ -5633,7 +5670,7 @@ __metadata:
languageName: node
linkType: hard
-"@rollup/plugin-babel@npm:^6.0.4":
+"@rollup/plugin-babel@npm:^6.0.0, @rollup/plugin-babel@npm:^6.0.4":
version: 6.0.4
resolution: "@rollup/plugin-babel@npm:6.0.4"
dependencies:
@@ -5686,6 +5723,24 @@ __metadata:
languageName: node
linkType: hard
+"@rollup/plugin-node-resolve@npm:^15.0.0":
+ version: 15.3.1
+ resolution: "@rollup/plugin-node-resolve@npm:15.3.1"
+ dependencies:
+ "@rollup/pluginutils": "npm:^5.0.1"
+ "@types/resolve": "npm:1.20.2"
+ deepmerge: "npm:^4.2.2"
+ is-module: "npm:^1.0.0"
+ resolve: "npm:^1.22.1"
+ peerDependencies:
+ rollup: ^2.78.0||^3.0.0||^4.0.0
+ peerDependenciesMeta:
+ rollup:
+ optional: true
+ checksum: 10c0/ecf3abe890fc98ad665fdbfb1ea245253e0d1f2bc6d9f4e8f496f212c76a2ce7cd4b9bc0abd21e6bcaa16f72d1c67cc6b322ea12a6ec68e8a8834df8242a5ecd
+ languageName: node
+ linkType: hard
+
"@rollup/plugin-node-resolve@npm:^15.0.1, @rollup/plugin-node-resolve@npm:^15.2.3":
version: 15.2.3
resolution: "@rollup/plugin-node-resolve@npm:15.2.3"
@@ -5736,6 +5791,25 @@ __metadata:
languageName: node
linkType: hard
+"@rollup/plugin-typescript@npm:^11.0.0":
+ version: 11.1.6
+ resolution: "@rollup/plugin-typescript@npm:11.1.6"
+ dependencies:
+ "@rollup/pluginutils": "npm:^5.1.0"
+ resolve: "npm:^1.22.1"
+ peerDependencies:
+ rollup: ^2.14.0||^3.0.0||^4.0.0
+ tslib: "*"
+ typescript: ">=3.7.0"
+ peerDependenciesMeta:
+ rollup:
+ optional: true
+ tslib:
+ optional: true
+ checksum: 10c0/5347cd73ac28d4cf2401a3e689864a1a0df8f3ae029abd9c38525cbc84bcfa16c3a32a0ac5698dac65ec531ba7cf8332e14f5fc7f8fa501193da23320a134c5c
+ languageName: node
+ linkType: hard
+
"@rollup/plugin-typescript@npm:^12.1.1":
version: 12.1.1
resolution: "@rollup/plugin-typescript@npm:12.1.1"
@@ -5755,6 +5829,22 @@ __metadata:
languageName: node
linkType: hard
+"@rollup/pluginutils@npm:5.0.5":
+ version: 5.0.5
+ resolution: "@rollup/pluginutils@npm:5.0.5"
+ dependencies:
+ "@types/estree": "npm:^1.0.0"
+ estree-walker: "npm:^2.0.2"
+ picomatch: "npm:^2.3.1"
+ peerDependencies:
+ rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+ peerDependenciesMeta:
+ rollup:
+ optional: true
+ checksum: 10c0/18a1f5a9afa993a76663cc2102169cd546786b39a3e92bdc8a2a0b408b509d070a02b20970a30daa9d5d0b1b591b5e7734add84b3aaf263178aef5a26cfab2cf
+ languageName: node
+ linkType: hard
+
"@rollup/pluginutils@npm:^5.0.1, @rollup/pluginutils@npm:^5.0.2, @rollup/pluginutils@npm:^5.0.5, @rollup/pluginutils@npm:^5.1.0":
version: 5.1.0
resolution: "@rollup/pluginutils@npm:5.1.0"
@@ -7793,6 +7883,15 @@ __metadata:
languageName: node
linkType: hard
+"@types/fs-extra@npm:^8.0.1":
+ version: 8.1.5
+ resolution: "@types/fs-extra@npm:8.1.5"
+ dependencies:
+ "@types/node": "npm:*"
+ checksum: 10c0/c9f7965bc499a6cc1cadb37a4e9002c0f33810867a0a47a132c4165cbe3b49c6ea52e26c3c38f07720540dd5c470619254c0ef00a2e14a8bf4971ec5d478ba69
+ languageName: node
+ linkType: hard
+
"@types/geojson@npm:*":
version: 7946.0.14
resolution: "@types/geojson@npm:7946.0.14"
@@ -7807,6 +7906,16 @@ __metadata:
languageName: node
linkType: hard
+"@types/glob@npm:^7.1.1":
+ version: 7.2.0
+ resolution: "@types/glob@npm:7.2.0"
+ dependencies:
+ "@types/minimatch": "npm:*"
+ "@types/node": "npm:*"
+ checksum: 10c0/a8eb5d5cb5c48fc58c7ca3ff1e1ddf771ee07ca5043da6e4871e6757b4472e2e73b4cfef2644c38983174a4bc728c73f8da02845c28a1212f98cabd293ecae98
+ languageName: node
+ linkType: hard
+
"@types/graceful-fs@npm:^4.1.3":
version: 4.1.9
resolution: "@types/graceful-fs@npm:4.1.9"
@@ -7985,6 +8094,13 @@ __metadata:
languageName: node
linkType: hard
+"@types/minimatch@npm:*":
+ version: 5.1.2
+ resolution: "@types/minimatch@npm:5.1.2"
+ checksum: 10c0/83cf1c11748891b714e129de0585af4c55dd4c2cafb1f1d5233d79246e5e1e19d1b5ad9e8db449667b3ffa2b6c80125c429dbee1054e9efb45758dbc4e118562
+ languageName: node
+ linkType: hard
+
"@types/minimatch@npm:^3.0.3":
version: 3.0.5
resolution: "@types/minimatch@npm:3.0.5"
@@ -9897,6 +10013,15 @@ __metadata:
languageName: node
linkType: hard
+"babel-plugin-dev-expression@npm:^0.2.3":
+ version: 0.2.3
+ resolution: "babel-plugin-dev-expression@npm:0.2.3"
+ peerDependencies:
+ "@babel/core": ^7.0.0
+ checksum: 10c0/b55fa2a5187c8242bcc9c035b5ef03539e92738644b2af2e5148db7e2a3f337a46e0f4b2a3f1d008fbb095d61356b725cc60330282a7ec30b055885af961aaf9
+ languageName: node
+ linkType: hard
+
"babel-plugin-istanbul@npm:^6.1.1":
version: 6.1.1
resolution: "babel-plugin-istanbul@npm:6.1.1"
@@ -11314,6 +11439,13 @@ __metadata:
languageName: node
linkType: hard
+"colorette@npm:^1.1.0":
+ version: 1.4.0
+ resolution: "colorette@npm:1.4.0"
+ checksum: 10c0/4955c8f7daafca8ae7081d672e4bd89d553bd5782b5846d5a7e05effe93c2f15f7e9c0cb46f341b59f579a39fcf436241ff79594899d75d5f3460c03d607fe9e
+ languageName: node
+ linkType: hard
+
"colorette@npm:^2.0.10, colorette@npm:^2.0.20":
version: 2.0.20
resolution: "colorette@npm:2.0.20"
@@ -14729,6 +14861,16 @@ __metadata:
languageName: node
linkType: hard
+"extract-banner@npm:0.1.2":
+ version: 0.1.2
+ resolution: "extract-banner@npm:0.1.2"
+ dependencies:
+ strip-bom-string: "npm:^0.1.2"
+ strip-use-strict: "npm:^0.1.0"
+ checksum: 10c0/6367fcf3f1e354ea6e511d1c8085f82af89032a2d006e6be6c3f00717ecaae7a9b365072137077a11bf9cce3f3abe21ccc0355f5260a7b1c10d811f179aa316c
+ languageName: node
+ linkType: hard
+
"extract-zip@npm:^2.0.1":
version: 2.0.1
resolution: "extract-zip@npm:2.0.1"
@@ -14776,7 +14918,7 @@ __metadata:
languageName: node
linkType: hard
-"fast-glob@npm:^3.1.1, fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.1, fast-glob@npm:^3.3.2":
+"fast-glob@npm:^3.0.3, fast-glob@npm:^3.1.1, fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.1, fast-glob@npm:^3.3.2":
version: 3.3.2
resolution: "fast-glob@npm:3.3.2"
dependencies:
@@ -15325,6 +15467,17 @@ __metadata:
languageName: node
linkType: hard
+"fs-extra@npm:^8.1.0":
+ version: 8.1.0
+ resolution: "fs-extra@npm:8.1.0"
+ dependencies:
+ graceful-fs: "npm:^4.2.0"
+ jsonfile: "npm:^4.0.0"
+ universalify: "npm:^0.1.0"
+ checksum: 10c0/259f7b814d9e50d686899550c4f9ded85c46c643f7fe19be69504888e007fcbc08f306fae8ec495b8b998635e997c9e3e175ff2eeed230524ef1c1684cc96423
+ languageName: node
+ linkType: hard
+
"fs-minipass@npm:^2.0.0":
version: 2.1.0
resolution: "fs-minipass@npm:2.1.0"
@@ -15954,6 +16107,22 @@ __metadata:
languageName: node
linkType: hard
+"globby@npm:10.0.1":
+ version: 10.0.1
+ resolution: "globby@npm:10.0.1"
+ dependencies:
+ "@types/glob": "npm:^7.1.1"
+ array-union: "npm:^2.1.0"
+ dir-glob: "npm:^3.0.1"
+ fast-glob: "npm:^3.0.3"
+ glob: "npm:^7.1.3"
+ ignore: "npm:^5.1.1"
+ merge2: "npm:^1.2.3"
+ slash: "npm:^3.0.0"
+ checksum: 10c0/048f8e19a5ff1b3d565372e66ac22050fcc9225ccf931ce7b0971bf264fd31ea19cdd8b8ba71e4af68d8264789c1534c23939bd56b3a5b0092c52d315ecc5f1b
+ languageName: node
+ linkType: hard
+
"globby@npm:11.0.4":
version: 11.0.4
resolution: "globby@npm:11.0.4"
@@ -16722,6 +16891,13 @@ __metadata:
languageName: node
linkType: hard
+"ignore@npm:^5.1.1":
+ version: 5.3.2
+ resolution: "ignore@npm:5.3.2"
+ checksum: 10c0/f9f652c957983634ded1e7f02da3b559a0d4cc210fca3792cb67f1b153623c9c42efdc1c4121af171e295444459fc4a9201101fb041b1104a3c000bccb188337
+ languageName: node
+ linkType: hard
+
"immutable@npm:^5.0.2":
version: 5.0.3
resolution: "immutable@npm:5.0.3"
@@ -17446,6 +17622,13 @@ __metadata:
languageName: node
linkType: hard
+"is-plain-object@npm:^3.0.0":
+ version: 3.0.1
+ resolution: "is-plain-object@npm:3.0.1"
+ checksum: 10c0/eac88599d3f030b313aa5a12d09bd3c52ce3b8cd975b2fdda6bb3bb69ac0bc1b93cd292123769eb480b914d1dd1fed7633cdeb490458d41294eb32efdedec230
+ languageName: node
+ linkType: hard
+
"is-plain-object@npm:^5.0.0":
version: 5.0.0
resolution: "is-plain-object@npm:5.0.0"
@@ -18585,6 +18768,18 @@ __metadata:
languageName: node
linkType: hard
+"jsonfile@npm:^4.0.0":
+ version: 4.0.0
+ resolution: "jsonfile@npm:4.0.0"
+ dependencies:
+ graceful-fs: "npm:^4.1.6"
+ dependenciesMeta:
+ graceful-fs:
+ optional: true
+ checksum: 10c0/7dc94b628d57a66b71fb1b79510d460d662eb975b5f876d723f81549c2e9cd316d58a2ddf742b2b93a4fa6b17b2accaf1a738a0e2ea114bdfb13a32e5377e480
+ languageName: node
+ linkType: hard
+
"jsonfile@npm:^6.0.1, jsonfile@npm:^6.1.0":
version: 6.1.0
resolution: "jsonfile@npm:6.1.0"
@@ -19539,6 +19734,15 @@ __metadata:
languageName: node
linkType: hard
+"magic-string@npm:0.30.5":
+ version: 0.30.5
+ resolution: "magic-string@npm:0.30.5"
+ dependencies:
+ "@jridgewell/sourcemap-codec": "npm:^1.4.15"
+ checksum: 10c0/38ac220ca7539e96da7ea2f38d85796bdf5c69b6bcae728c4bc2565084e6dc326b9174ee9770bea345cf6c9b3a24041b767167874fab5beca874d2356a9d1520
+ languageName: node
+ linkType: hard
+
"magic-string@npm:^0.23.2":
version: 0.23.2
resolution: "magic-string@npm:0.23.2"
@@ -20125,7 +20329,7 @@ __metadata:
languageName: node
linkType: hard
-"merge2@npm:^1.3.0, merge2@npm:^1.4.1":
+"merge2@npm:^1.2.3, merge2@npm:^1.3.0, merge2@npm:^1.4.1":
version: 1.4.1
resolution: "merge2@npm:1.4.1"
checksum: 10c0/254a8a4605b58f450308fc474c82ac9a094848081bf4c06778200207820e5193726dc563a0d2c16468810516a5c97d9d3ea0ca6585d23c58ccfff2403e8dbbeb
@@ -24788,6 +24992,19 @@ __metadata:
languageName: node
linkType: hard
+"rollup-plugin-copy@npm:^3.5.0":
+ version: 3.5.0
+ resolution: "rollup-plugin-copy@npm:3.5.0"
+ dependencies:
+ "@types/fs-extra": "npm:^8.0.1"
+ colorette: "npm:^1.1.0"
+ fs-extra: "npm:^8.1.0"
+ globby: "npm:10.0.1"
+ is-plain-object: "npm:^3.0.0"
+ checksum: 10c0/163a27756fa2dd1cf50e5b05c82c530fce05c58f11d4f400797e3c6ff3fc6787426f781d71749e15d90fa98917fe5b8caf70d88e08a574fe52574c835ba15e84
+ languageName: node
+ linkType: hard
+
"rollup-plugin-esbuild@npm:^6.1.0":
version: 6.1.1
resolution: "rollup-plugin-esbuild@npm:6.1.1"
@@ -24836,6 +25053,19 @@ __metadata:
languageName: node
linkType: hard
+"rollup-plugin-strip-banner@npm:^3.0.0":
+ version: 3.1.0
+ resolution: "rollup-plugin-strip-banner@npm:3.1.0"
+ dependencies:
+ "@rollup/pluginutils": "npm:5.0.5"
+ extract-banner: "npm:0.1.2"
+ magic-string: "npm:0.30.5"
+ peerDependencies:
+ rollup: ^1.0.0 || ^2.0.0 || ^3.0.0 || ^4.0.0
+ checksum: 10c0/10ef4d45e7827c9b24f4e506a904d3caac8096e06b323ded7d00880ca122fb841833a68198af5002ee18a52444908c972c487fd1dbc5cb8a7e62b5d8a1f89a97
+ languageName: node
+ linkType: hard
+
"rollup-pluginutils@npm:^2.8.2":
version: 2.8.2
resolution: "rollup-pluginutils@npm:2.8.2"
@@ -26029,6 +26259,13 @@ __metadata:
languageName: node
linkType: hard
+"strip-bom-string@npm:^0.1.2":
+ version: 0.1.2
+ resolution: "strip-bom-string@npm:0.1.2"
+ checksum: 10c0/73daa13517a496bd43f59f7a6b80dcef6463f74feb0c4cfe3fc640564f0cb3affc016088256e6d5326309efed919946d8ce9c1e93363612a972a1dfc8e67c0b9
+ languageName: node
+ linkType: hard
+
"strip-bom-string@npm:^1.0.0":
version: 1.0.0
resolution: "strip-bom-string@npm:1.0.0"
@@ -26096,6 +26333,13 @@ __metadata:
languageName: node
linkType: hard
+"strip-use-strict@npm:^0.1.0":
+ version: 0.1.0
+ resolution: "strip-use-strict@npm:0.1.0"
+ checksum: 10c0/1ebea63de7a3920cf51169d765eb9cc36b3b145e90705f8876f481c449a6a8b8653b20c0b300726383fd1d4b51101d9d2142b06b58895842e109446828f95f87
+ languageName: node
+ linkType: hard
+
"strong-log-transformer@npm:2.1.0, strong-log-transformer@npm:^2.1.0":
version: 2.1.0
resolution: "strong-log-transformer@npm:2.1.0"
@@ -27697,6 +27941,13 @@ __metadata:
languageName: node
linkType: hard
+"universalify@npm:^0.1.0":
+ version: 0.1.2
+ resolution: "universalify@npm:0.1.2"
+ checksum: 10c0/e70e0339f6b36f34c9816f6bf9662372bd241714dc77508d231d08386d94f2c4aa1ba1318614f92015f40d45aae1b9075cd30bd490efbe39387b60a76ca3f045
+ languageName: node
+ linkType: hard
+
"universalify@npm:^0.2.0":
version: 0.2.0
resolution: "universalify@npm:0.2.0"
From 713d564af5e58081c6a074ffef4e436001a35fe9 Mon Sep 17 00:00:00 2001
From: Anna Wen <54281166+annawen1@users.noreply.github.com>
Date: Fri, 20 Dec 2024 15:02:14 -0500
Subject: [PATCH 02/11] chore: remove unused imports
---
packages/react/tasks/build.js | 9 +++------
1 file changed, 3 insertions(+), 6 deletions(-)
diff --git a/packages/react/tasks/build.js b/packages/react/tasks/build.js
index 2a5d7df0..5f258f5f 100644
--- a/packages/react/tasks/build.js
+++ b/packages/react/tasks/build.js
@@ -1,16 +1,14 @@
/**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 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 autoprefixer from 'autoprefixer';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import path from 'path';
import stripBanner from 'rollup-plugin-strip-banner';
-import postcss from 'rollup-plugin-postcss';
import copy from 'rollup-plugin-copy';
import { babel } from '@rollup/plugin-babel';
import { nodeResolve } from '@rollup/plugin-node-resolve';
@@ -107,8 +105,8 @@ const babelConfig = {
};
/**
- *
- * @returns
+ * Gets tsconfig options
+ * @returns tsconfig options object
*/
function getTsCompilerOptions() {
const baseOpts = loadBaseTsCompilerOpts();
@@ -159,7 +157,6 @@ function getRollupConfig(input, rootDir, outDir) {
],
flatten: false,
}),
- // postcss(postcssOptions()),
typescript({
noEmitOnError: true,
noForceEmit: true,
From 8dd74b561e442f2ea1c9c4ba8f25c0c306f954de Mon Sep 17 00:00:00 2001
From: Anna Wen <54281166+annawen1@users.noreply.github.com>
Date: Fri, 20 Dec 2024 15:31:24 -0500
Subject: [PATCH 03/11] chore: change package name
---
.../react/src/components/ExampleButton/package.json | 2 +-
yarn.lock | 13 +++++++------
2 files changed, 8 insertions(+), 7 deletions(-)
diff --git a/packages/react/src/components/ExampleButton/package.json b/packages/react/src/components/ExampleButton/package.json
index 92d33412..6972b4a5 100644
--- a/packages/react/src/components/ExampleButton/package.json
+++ b/packages/react/src/components/ExampleButton/package.json
@@ -1,5 +1,5 @@
{
- "name": "@carbon-labs/example-button",
+ "name": "@carbon-labs/react-example-button",
"version": "0.0.0",
"publishConfig": {
"access": "public",
diff --git a/yarn.lock b/yarn.lock
index aea118fb..303e69f8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2569,12 +2569,6 @@ __metadata:
languageName: unknown
linkType: soft
-"@carbon-labs/example-button@workspace:packages/react/src/components/ExampleButton":
- version: 0.0.0-use.local
- resolution: "@carbon-labs/example-button@workspace:packages/react/src/components/ExampleButton"
- languageName: unknown
- linkType: soft
-
"@carbon-labs/network-graph@workspace:packages/web-components/src/components/network-graph":
version: 0.0.0-use.local
resolution: "@carbon-labs/network-graph@workspace:packages/web-components/src/components/network-graph"
@@ -2588,6 +2582,12 @@ __metadata:
languageName: unknown
linkType: soft
+"@carbon-labs/react-example-button@workspace:packages/react/src/components/ExampleButton":
+ version: 0.0.0-use.local
+ resolution: "@carbon-labs/react-example-button@workspace:packages/react/src/components/ExampleButton"
+ languageName: unknown
+ linkType: soft
+
"@carbon-labs/utilities@npm:0.14.0, @carbon-labs/utilities@workspace:packages/utilities":
version: 0.0.0-use.local
resolution: "@carbon-labs/utilities@workspace:packages/utilities"
@@ -2720,6 +2720,7 @@ __metadata:
css-loader: "npm:^7.1.2"
jest: "npm:^29.7.0"
jest-environment-jsdom: "npm:^29.7.0"
+ lerna: "npm:^8.0.0"
mini-css-extract-plugin: "npm:^2.9.2"
postcss: "npm:^8.4.49"
postcss-loader: "npm:^8.1.1"
From b02adc789a2bfe1403996c9326a9b39091764a03 Mon Sep 17 00:00:00 2001
From: Anna Wen <54281166+annawen1@users.noreply.github.com>
Date: Fri, 20 Dec 2024 15:33:47 -0500
Subject: [PATCH 04/11] chore: example stackblitz
---
examples/react/example-button/.gitignore | 24 +++++++++++++++++
examples/react/example-button/index.html | 13 ++++++++++
examples/react/example-button/package.json | 26 +++++++++++++++++++
examples/react/example-button/src/App.tsx | 7 +++++
examples/react/example-button/src/index.scss | 2 ++
examples/react/example-button/src/main.tsx | 10 +++++++
.../react/example-button/src/vite-env.d.ts | 1 +
examples/react/example-button/tsconfig.json | 25 ++++++++++++++++++
.../react/example-button/tsconfig.node.json | 10 +++++++
examples/react/example-button/vite.config.ts | 7 +++++
10 files changed, 125 insertions(+)
create mode 100644 examples/react/example-button/.gitignore
create mode 100644 examples/react/example-button/index.html
create mode 100644 examples/react/example-button/package.json
create mode 100644 examples/react/example-button/src/App.tsx
create mode 100644 examples/react/example-button/src/index.scss
create mode 100644 examples/react/example-button/src/main.tsx
create mode 100644 examples/react/example-button/src/vite-env.d.ts
create mode 100644 examples/react/example-button/tsconfig.json
create mode 100644 examples/react/example-button/tsconfig.node.json
create mode 100644 examples/react/example-button/vite.config.ts
diff --git a/examples/react/example-button/.gitignore b/examples/react/example-button/.gitignore
new file mode 100644
index 00000000..a547bf36
--- /dev/null
+++ b/examples/react/example-button/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/react/example-button/index.html b/examples/react/example-button/index.html
new file mode 100644
index 00000000..6d6c8e8b
--- /dev/null
+++ b/examples/react/example-button/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+ @carbon-labs/example-button stackblitz
+
+
+
+
+
+
diff --git a/examples/react/example-button/package.json b/examples/react/example-button/package.json
new file mode 100644
index 00000000..1611147c
--- /dev/null
+++ b/examples/react/example-button/package.json
@@ -0,0 +1,26 @@
+{
+ "name": "carbon-labs-react-example-button",
+ "private": true,
+ "version": "0.0.0",
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "tsc && vite build",
+ "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "@carbon/react": "^1.72.0",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0"
+ },
+ "devDependencies": {
+ "@carbon-labs/react-example-button": "latest",
+ "@types/react": "^18.2.43",
+ "@types/react-dom": "^18.2.17",
+ "@vitejs/plugin-react": "^4.2.1",
+ "sass": "~1.83.0",
+ "typescript": "^5.2.2",
+ "vite": "^5.0.8"
+ }
+}
diff --git a/examples/react/example-button/src/App.tsx b/examples/react/example-button/src/App.tsx
new file mode 100644
index 00000000..9db6ff42
--- /dev/null
+++ b/examples/react/example-button/src/App.tsx
@@ -0,0 +1,7 @@
+import { ExampleButton } from "@carbon-labs/example-button/es/index";
+
+function App() {
+ return ;
+}
+
+export default App;
diff --git a/examples/react/example-button/src/index.scss b/examples/react/example-button/src/index.scss
new file mode 100644
index 00000000..268293ea
--- /dev/null
+++ b/examples/react/example-button/src/index.scss
@@ -0,0 +1,2 @@
+@use '@carbon/react';
+@use '@carbon-labs/example-button/scss/example-button';
diff --git a/examples/react/example-button/src/main.tsx b/examples/react/example-button/src/main.tsx
new file mode 100644
index 00000000..e13afb7a
--- /dev/null
+++ b/examples/react/example-button/src/main.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import "./index.scss";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+
+
+
+);
diff --git a/examples/react/example-button/src/vite-env.d.ts b/examples/react/example-button/src/vite-env.d.ts
new file mode 100644
index 00000000..11f02fe2
--- /dev/null
+++ b/examples/react/example-button/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
diff --git a/examples/react/example-button/tsconfig.json b/examples/react/example-button/tsconfig.json
new file mode 100644
index 00000000..a7fc6fbf
--- /dev/null
+++ b/examples/react/example-button/tsconfig.json
@@ -0,0 +1,25 @@
+{
+ "compilerOptions": {
+ "target": "ES2020",
+ "useDefineForClassFields": true,
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src"],
+ "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/examples/react/example-button/tsconfig.node.json b/examples/react/example-button/tsconfig.node.json
new file mode 100644
index 00000000..42872c59
--- /dev/null
+++ b/examples/react/example-button/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+ "compilerOptions": {
+ "composite": true,
+ "skipLibCheck": true,
+ "module": "ESNext",
+ "moduleResolution": "bundler",
+ "allowSyntheticDefaultImports": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/examples/react/example-button/vite.config.ts b/examples/react/example-button/vite.config.ts
new file mode 100644
index 00000000..5a33944a
--- /dev/null
+++ b/examples/react/example-button/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [react()],
+})
From b3182e563377d9f9e2352ac6da1d2802978bdec6 Mon Sep 17 00:00:00 2001
From: Anna Wen <54281166+annawen1@users.noreply.github.com>
Date: Fri, 20 Dec 2024 15:52:49 -0500
Subject: [PATCH 05/11] chore: fix cdn publish jobs
---
.github/workflows/publish-canary-cdn.yml | 6 ++----
.github/workflows/publish-cdn.yml | 6 ++----
2 files changed, 4 insertions(+), 8 deletions(-)
diff --git a/.github/workflows/publish-canary-cdn.yml b/.github/workflows/publish-canary-cdn.yml
index b18cf0e9..48f77a13 100644
--- a/.github/workflows/publish-canary-cdn.yml
+++ b/.github/workflows/publish-canary-cdn.yml
@@ -9,12 +9,9 @@ concurrency:
cancel-in-progress: true
jobs:
- web-components:
+ deploy-canary-cdn:
if: github.repository == 'carbon-design-system/carbon-labs'
runs-on: ubuntu-latest
- defaults:
- run:
- working-directory: 'packages/web-components'
steps:
- uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
with:
@@ -34,6 +31,7 @@ jobs:
- name: Build dist folders in each package
run: yarn build:dist:canary
- name: Create one folder with dist contents from each package
+ working-directory: 'packages/web-components'
run: |
mkdir dist
cp -r src/components/**/dist/. dist/
diff --git a/.github/workflows/publish-cdn.yml b/.github/workflows/publish-cdn.yml
index 56e32ea0..dbbdfe40 100644
--- a/.github/workflows/publish-cdn.yml
+++ b/.github/workflows/publish-cdn.yml
@@ -11,13 +11,10 @@ concurrency:
cancel-in-progress: true
jobs:
- web-components:
+ deploy-cdn:
if: |
github.repository == 'carbon-design-system/carbon-labs'
runs-on: ubuntu-latest
- defaults:
- run:
- working-directory: 'packages/web-components'
steps:
- uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
with:
@@ -34,6 +31,7 @@ jobs:
- name: Build dist folders in each package
run: yarn build:dist
- name: Create one folder with dist contents from each package
+ working-directory: 'packages/web-components'
run: |
mkdir dist
cp -r src/components/**/dist/. dist/
From ff3f061369b466933e9998e15e58d1a38f807248 Mon Sep 17 00:00:00 2001
From: Anna Wen <54281166+annawen1@users.noreply.github.com>
Date: Fri, 20 Dec 2024 15:55:33 -0500
Subject: [PATCH 06/11] fix: fix yarn.lock file
---
yarn.lock | 1 -
1 file changed, 1 deletion(-)
diff --git a/yarn.lock b/yarn.lock
index 303e69f8..55f34e93 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2720,7 +2720,6 @@ __metadata:
css-loader: "npm:^7.1.2"
jest: "npm:^29.7.0"
jest-environment-jsdom: "npm:^29.7.0"
- lerna: "npm:^8.0.0"
mini-css-extract-plugin: "npm:^2.9.2"
postcss: "npm:^8.4.49"
postcss-loader: "npm:^8.1.1"
From 368319e03007c1d0e6695de0a5249ef74dc408fb Mon Sep 17 00:00:00 2001
From: Anna Wen <54281166+annawen1@users.noreply.github.com>
Date: Fri, 20 Dec 2024 16:12:37 -0500
Subject: [PATCH 07/11] chore: format
---
examples/react/example-button/src/App.tsx | 2 +-
examples/react/example-button/src/main.tsx | 10 +++++-----
examples/react/example-button/vite.config.ts | 6 +++---
3 files changed, 9 insertions(+), 9 deletions(-)
diff --git a/examples/react/example-button/src/App.tsx b/examples/react/example-button/src/App.tsx
index 9db6ff42..63577a74 100644
--- a/examples/react/example-button/src/App.tsx
+++ b/examples/react/example-button/src/App.tsx
@@ -1,4 +1,4 @@
-import { ExampleButton } from "@carbon-labs/example-button/es/index";
+import { ExampleButton } from '@carbon-labs/example-button/es/index';
function App() {
return ;
diff --git a/examples/react/example-button/src/main.tsx b/examples/react/example-button/src/main.tsx
index e13afb7a..780490e3 100644
--- a/examples/react/example-button/src/main.tsx
+++ b/examples/react/example-button/src/main.tsx
@@ -1,9 +1,9 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./App.tsx";
-import "./index.scss";
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
+import './index.scss';
-ReactDOM.createRoot(document.getElementById("root")!).render(
+ReactDOM.createRoot(document.getElementById('root')!).render(
diff --git a/examples/react/example-button/vite.config.ts b/examples/react/example-button/vite.config.ts
index 5a33944a..627a3196 100644
--- a/examples/react/example-button/vite.config.ts
+++ b/examples/react/example-button/vite.config.ts
@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
-})
+});
From 4e088d6e0c76a5088f3cbe8938ab23aa58d6453d Mon Sep 17 00:00:00 2001
From: Anna Wen <54281166+annawen1@users.noreply.github.com>
Date: Fri, 20 Dec 2024 16:36:37 -0500
Subject: [PATCH 08/11] chore: ci-check
---
.github/workflows/publish-canary-cdn.yml | 2 +-
.github/workflows/release-canary.yml | 2 +-
.github/workflows/release.yml | 2 +-
examples/react/example-button/src/App.tsx | 9 +++
examples/react/example-button/src/index.scss | 7 ++
examples/react/example-button/src/main.tsx | 9 +++
.../react/example-button/src/vite-env.d.ts | 9 +++
examples/react/example-button/vite.config.ts | 9 +++
package.json | 2 +-
packages/react/jest.config.js | 2 +-
packages/react/package.json | 3 +-
.../__tests__/ExampleButton-test.js | 2 +-
.../__snapshots__/ExampleButton-test.js.snap | 14 ++--
packages/react/tasks/build.js | 2 +-
yarn.lock | 65 +------------------
15 files changed, 62 insertions(+), 77 deletions(-)
diff --git a/.github/workflows/publish-canary-cdn.yml b/.github/workflows/publish-canary-cdn.yml
index 48f77a13..8c19dabb 100644
--- a/.github/workflows/publish-canary-cdn.yml
+++ b/.github/workflows/publish-canary-cdn.yml
@@ -22,7 +22,7 @@ jobs:
- name: Use Node.js 18.x
uses: actions/setup-node@v4
with:
- node-version: '18.x'
+ node-version: '20.x'
cache: 'yarn'
- name: Install dependencies
run: yarn install
diff --git a/.github/workflows/release-canary.yml b/.github/workflows/release-canary.yml
index e38a5279..7a9cac80 100644
--- a/.github/workflows/release-canary.yml
+++ b/.github/workflows/release-canary.yml
@@ -28,7 +28,7 @@ jobs:
- name: Use Node.js 18.x
uses: actions/setup-node@v4
with:
- node-version: '18.x'
+ node-version: '20.x'
cache: 'yarn'
- name: Install dependencies
run: yarn install
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index a5df3af4..358edb93 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -47,7 +47,7 @@ jobs:
- name: Use Node.js 18.x
uses: actions/setup-node@v4
with:
- node-version: '18.x'
+ node-version: '20.x'
cache: 'yarn'
- name: Install dependencies
run: yarn install
diff --git a/examples/react/example-button/src/App.tsx b/examples/react/example-button/src/App.tsx
index 63577a74..6803d3ff 100644
--- a/examples/react/example-button/src/App.tsx
+++ b/examples/react/example-button/src/App.tsx
@@ -1,3 +1,12 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 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 { ExampleButton } from '@carbon-labs/example-button/es/index';
function App() {
diff --git a/examples/react/example-button/src/index.scss b/examples/react/example-button/src/index.scss
index 268293ea..cda8ec18 100644
--- a/examples/react/example-button/src/index.scss
+++ b/examples/react/example-button/src/index.scss
@@ -1,2 +1,9 @@
+/**
+ * Copyright IBM Corp. 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.
+ */
+
@use '@carbon/react';
@use '@carbon-labs/example-button/scss/example-button';
diff --git a/examples/react/example-button/src/main.tsx b/examples/react/example-button/src/main.tsx
index 780490e3..3c6f3869 100644
--- a/examples/react/example-button/src/main.tsx
+++ b/examples/react/example-button/src/main.tsx
@@ -1,3 +1,12 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 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 React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';
diff --git a/examples/react/example-button/src/vite-env.d.ts b/examples/react/example-button/src/vite-env.d.ts
index 11f02fe2..29944375 100644
--- a/examples/react/example-button/src/vite-env.d.ts
+++ b/examples/react/example-button/src/vite-env.d.ts
@@ -1 +1,10 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 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.
+ */
+
///
diff --git a/examples/react/example-button/vite.config.ts b/examples/react/example-button/vite.config.ts
index 627a3196..6752cbb6 100644
--- a/examples/react/example-button/vite.config.ts
+++ b/examples/react/example-button/vite.config.ts
@@ -1,3 +1,12 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 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 { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
diff --git a/package.json b/package.json
index cf1c1e4f..a13f8196 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
"license": "Apache-2.0",
"repository": "https://github.com/carbon-design-system/carbon-labs",
"engines": {
- "node": ">=18.x"
+ "node": ">=20.x"
},
"workspaces": [
"packages/*",
diff --git a/packages/react/jest.config.js b/packages/react/jest.config.js
index d5251fdb..1df201b5 100644
--- a/packages/react/jest.config.js
+++ b/packages/react/jest.config.js
@@ -7,7 +7,7 @@
* LICENSE file in the root directory of this source tree.
*/
-module.exports = {
+export default {
testEnvironment: 'jsdom',
preset: 'ts-jest',
moduleNameMapper: {
diff --git a/packages/react/package.json b/packages/react/package.json
index 0b86f1bd..8bb75185 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -35,12 +35,11 @@
"@babel/preset-env": "^7.26.0",
"@babel/preset-react": "^7.26.3",
"@babel/preset-typescript": "^7.26.0",
- "@chromatic-com/storybook": "^3.2.2",
"@mdx-js/react": "^3.1.0",
"@rollup/plugin-babel": "^6.0.0",
"@rollup/plugin-commonjs": "^28.0.0",
"@rollup/plugin-node-resolve": "^15.0.0",
- "@rollup/plugin-typescript": "^11.0.0",
+ "@rollup/plugin-typescript": "^12.1.1",
"@storybook/addon-docs": "^8.4.7",
"@storybook/addon-essentials": "^8.4.7",
"@storybook/addon-interactions": "^8.4.7",
diff --git a/packages/react/src/components/ExampleButton/__tests__/ExampleButton-test.js b/packages/react/src/components/ExampleButton/__tests__/ExampleButton-test.js
index 53aee7b1..38fbda0b 100644
--- a/packages/react/src/components/ExampleButton/__tests__/ExampleButton-test.js
+++ b/packages/react/src/components/ExampleButton/__tests__/ExampleButton-test.js
@@ -33,7 +33,7 @@ describe('ExampleButton', () => {
it('supports a custom class name', () => {
const { container } = render();
- expect(container.firstChild).toHaveClass('test');
+ expect(container.firstChild.firstChild).toHaveClass('test');
});
it('supports additional props', () => {
diff --git a/packages/react/src/components/ExampleButton/__tests__/__snapshots__/ExampleButton-test.js.snap b/packages/react/src/components/ExampleButton/__tests__/__snapshots__/ExampleButton-test.js.snap
index 498a0607..48462ba4 100644
--- a/packages/react/src/components/ExampleButton/__tests__/__snapshots__/ExampleButton-test.js.snap
+++ b/packages/react/src/components/ExampleButton/__tests__/__snapshots__/ExampleButton-test.js.snap
@@ -2,11 +2,15 @@
exports[`ExampleButton renders as expected - Component API should match snapshot 1`] = `
-
+
+