From 17f2f4dbc7f0a18a6a1c2eb6ee6627f01914b134 Mon Sep 17 00:00:00 2001
From: Rohan <45748283+r100-stack@users.noreply.github.com>
Date: Mon, 16 Dec 2024 08:24:59 -0500
Subject: [PATCH 01/48] =?UTF-8?q?=F0=9F=9B=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
apps/css-workshop/astro.config.mjs | 3 +-
apps/css-workshop/package.json | 10 +-
apps/css-workshop/src/components/theme.js | 16 +
apps/css-workshop/src/pages/_layout.astro | 13 +-
.../src/pages/expandable-block.astro | 4 +-
apps/css-workshop/tsconfig.json | 7 +
apps/react-workshop/.ladle/components.tsx | 12 +-
.../src/Breadcrumbs.stories.tsx | 12 +-
packages/itwinui-css/src/all.scss | 9 +
.../src/breadcrumbs/breadcrumbs.scss | 11 +-
packages/itwinui-css/src/bridge.scss | 650 ++++++++++
packages/itwinui-css/src/menu/menu.scss | 4 +-
.../progress-indicator.scss | 8 +-
.../src/radio-tile/radio-tile.scss | 23 +-
packages/itwinui-css/src/tabs/base.scss | 32 +-
packages/itwinui-css/src/tabs/default.scss | 2 +-
packages/itwinui-css/src/utils/icon.scss | 5 +-
packages/itwinui-react/package.json | 3 +-
.../src/core/ThemeProvider/ThemeProvider.tsx | 186 ++-
.../itwinui-react/src/styles.js/bridge.scss | 696 +++++++++++
.../itwinui-react/src/styles.js/package.json | 3 +
.../src/styles.js/styles.module.css | 5 +-
pnpm-lock.yaml | 1081 ++++++++++++++++-
23 files changed, 2682 insertions(+), 113 deletions(-)
create mode 100644 apps/css-workshop/tsconfig.json
create mode 100644 packages/itwinui-css/src/bridge.scss
create mode 100644 packages/itwinui-react/src/styles.js/bridge.scss
diff --git a/apps/css-workshop/astro.config.mjs b/apps/css-workshop/astro.config.mjs
index 4893ea3aaf8..c1942d5ebeb 100644
--- a/apps/css-workshop/astro.config.mjs
+++ b/apps/css-workshop/astro.config.mjs
@@ -1,5 +1,6 @@
import { defineConfig } from 'astro/config';
import relativeLinks from 'astro-relative-links';
+import react from '@astrojs/react';
// https://astro.build/config
export default defineConfig({
@@ -13,5 +14,5 @@ export default defineConfig({
server: {
port: 3050,
},
- integrations: [relativeLinks()],
+ integrations: [relativeLinks(), react()],
});
diff --git a/apps/css-workshop/package.json b/apps/css-workshop/package.json
index 45f5577d27d..b9fe6044546 100644
--- a/apps/css-workshop/package.json
+++ b/apps/css-workshop/package.json
@@ -8,6 +8,7 @@
"@fontsource/noto-sans": "5",
"@fontsource/noto-sans-mono": "5",
"@itwin/itwinui-icons-elements": "0.20.0",
+ "@itwin/itwinui-react-v5": "npm:@itwin/itwinui-react@5.0.0-alpha.0",
"astro": "^4",
"astro-relative-links": "^0.3.7",
"backstopjs": "~6.2.1",
@@ -23,5 +24,12 @@
"test:only": "backstop --config=./backstop/backstop.cjs test --docker",
"test": "npm-run-all -p -r \"preview\" \"test:only {1}\" --"
},
- "prettier": "configs/prettier-astro-config.js"
+ "prettier": "configs/prettier-astro-config.js",
+ "dependencies": {
+ "@astrojs/react": "^4.1.0",
+ "@types/react": "^18",
+ "@types/react-dom": "^18",
+ "react": "^18",
+ "react-dom": "^18"
+ }
}
diff --git a/apps/css-workshop/src/components/theme.js b/apps/css-workshop/src/components/theme.js
index e9bfb539c57..3087abef70d 100644
--- a/apps/css-workshop/src/components/theme.js
+++ b/apps/css-workshop/src/components/theme.js
@@ -19,6 +19,8 @@ class ThemeButton extends HTMLElement {
+
+
+
`;
@@ -162,6 +165,11 @@ class ThemeButton extends HTMLElement {
}
};
+ changeBridge = ({ target: { checked } }) => {
+ const root = document.querySelectorAll('.iui-root')[1];
+ root.dataset.iuiBridge = checked ? 'true' : 'false';
+ };
+
connectedCallback() {
this.shadowRoot.querySelectorAll('input[name="theme"]').forEach((radio) => {
radio.addEventListener('change', this.changeTheme);
@@ -170,6 +178,10 @@ class ThemeButton extends HTMLElement {
this.shadowRoot.querySelectorAll('input[name="background"]').forEach((radio) => {
radio.addEventListener('change', this.changeBackground);
});
+
+ this.shadowRoot
+ .querySelector('input[name="bridge"]')
+ .addEventListener('change', this.changeBridge);
}
disconnectedCallback() {
@@ -180,6 +192,10 @@ class ThemeButton extends HTMLElement {
this.shadowRoot.querySelectorAll('input[name="background"]').forEach((radio) => {
radio.removeEventListener('change', this.changeBackground);
});
+
+ this.shadowRoot
+ .querySelector('input[name="bridge"]')
+ .removeEventListener('change', this.changeBridge);
}
}
customElements.define('theme-button', ThemeButton);
diff --git a/apps/css-workshop/src/pages/_layout.astro b/apps/css-workshop/src/pages/_layout.astro
index f1c1b5c4428..e4a6405a168 100644
--- a/apps/css-workshop/src/pages/_layout.astro
+++ b/apps/css-workshop/src/pages/_layout.astro
@@ -1,4 +1,6 @@
---
+import { Root as ITwinUIV5Root } from '@itwin/itwinui-react-v5/bricks';
+
type Props = { title?: string };
const { title } = Astro.props;
@@ -39,6 +41,7 @@ const slug = Astro.url.pathname.replace('/', '');
-
+
+
-
-
+
+
+
+
-
-