chore: rollup build for react packages (#338)

* chore: rollup build for react components * chore: remove unused imports * chore: change package name * chore: example stackblitz * chore: fix cdn publish jobs * fix: fix yarn.lock file * chore: format * chore: ci-check * chore: address node with issue * chore: styles lint * chore: stylelint fix
carbon-design-system · Dec 23, 2024 · 06ad818 · 06ad818
1 parent 5f9c364
commit 06ad818
Show file tree

Hide file tree

Showing 31 changed files with 710 additions and 121 deletions.
diff --git a/.github/workflows/publish-canary-cdn.yml b/.github/workflows/publish-canary-cdn.yml
@@ -9,23 +9,20 @@ 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:
           fetch-depth: '0'
       - uses: fkirc/[email protected]
         with:
           github_token: ${{ github.token }}
-      - name: Use Node.js 18.x
+      - name: Use Node.js 20.x
         uses: actions/setup-node@v4
         with:
-          node-version: '18.x'
+          node-version: '20.x'
           cache: 'yarn'
       - name: Install dependencies
         run: yarn install
@@ -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
@@ -11,21 +11,18 @@ 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:
           fetch-depth: '0'
-      - name: Use Node.js 18.x
+      - name: Use Node.js 20.x
         uses: actions/setup-node@v4
         with:
-          node-version: '18.x'
+          node-version: '20.x'
           cache: 'yarn'
       - name: Install dependencies
         run: yarn install
@@ -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/

diff --git 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
@@ -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/.gitignore b/.gitignore
@@ -10,6 +10,7 @@ lerna-debug.log*
 node_modules
 dist
 es
+scss
 dist-ssr
 lib
 *.local

diff --git a/.stylelintignore b/.stylelintignore
@@ -1 +1,2 @@
-**/storybook-static/**
+**/storybook-static/**
+scss
diff --git a/examples/react/example-button/.gitignore 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
@@ -0,0 +1,22 @@
+<!--
+@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.
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>@carbon-labs/example-button stackblitz</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/react/example-button/package.json 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
@@ -0,0 +1,16 @@
+/**
+ * @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() {
+  return <ExampleButton />;
+}
+
+export default App;
diff --git a/examples/react/example-button/src/index.scss b/examples/react/example-button/src/index.scss
@@ -0,0 +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
@@ -0,0 +1,19 @@
+/**
+ * @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';
+import './index.scss';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/examples/react/example-button/src/vite-env.d.ts b/examples/react/example-button/src/vite-env.d.ts
@@ -0,0 +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.
+ */
+
+/// <reference types="vite/client" />
diff --git a/examples/react/example-button/tsconfig.json 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
@@ -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
@@ -0,0 +1,16 @@
+/**
+ * @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';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+});
diff --git 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
@@ -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/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: {
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,6 +10,7 @@ lerna-debug.log* @@
     node_modules
     dist
     es
+    scss
     dist-ssr
     lib
     *.local
@@ Expand Down @@