feat: migration examples prefix selectors (#13264)

* feat(ContentSwitcher): preliminary unstable refactor * feat: added prefix and id prefix examples * fix: delete content switcher directory * feat: update demos * Update examples/id-prefix/src/App.jsx Co-authored-by: Francine Lucca <[email protected]> * Update packages/react/src/components/IdPrefix/index.js * feat: added docs * fix: update context * fix: yarn install * fix: update context 2 * chore: update yarn packages * chore: udpate yarn carbon/react --------- Co-authored-by: Francine Lucca <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Mar 8, 2023 · 0c9b4fd · 0c9b4fd
1 parent 21536a5
commit 0c9b4fd
Show file tree

Hide file tree

Showing 18 changed files with 351 additions and 2 deletions.
diff --git a/examples/class-prefix/.gitignore b/examples/class-prefix/.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/class-prefix/README.md b/examples/class-prefix/README.md
@@ -0,0 +1,52 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with
+[`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Class Prefix
+
+By default, the prefix used by components is cds. However, you can change this
+prefix in Sass and coordinate that change to React using the ClassPrefix
+component.
+
+## Getting Started
+
+First, run `yarn` or `npm install` and then run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the
+result.
+
+## Sass
+
+First and foremost, if you want to use v11 styles in any capacity, you'll have
+to migrate to use `dart-sass`. `node-sass` has been deprecated and we migrated
+to `dart-sass` in v11. For more information about migrating, visit our docs
+[here](https://github.com/carbon-design-system/carbon/blob/main/docs/migration/v11.md#changing-from-node-sass-to-sass).
+
+In Sass, you can customize this prefix by writing the following:
+
+`@use '@carbon/react' with ( $prefix: 'custom' );`
+
+Similarly, you can configure scss/config directly:
+
+`@use '@carbon/react/scss/config' with ( $prefix: 'custom' );`
+
+## V11
+
+This example is of how to use ClassPrefix from v11 🎉.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js
+  features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out
+[the Next.js GitHub repository](https://github.com/vercel/next.js/) - your
+feedback and contributions are welcome!
diff --git a/examples/class-prefix/index.html b/examples/class-prefix/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/examples/class-prefix/package.json b/examples/class-prefix/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "class-prefix",
+  "private": true,
+  "version": "0.21.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@carbon/react": "^1.24.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@vitejs/plugin-react": "1.1.3",
+    "sass": "^1.51.0",
+    "vite": "^2.9.5"
+  }
+}
diff --git a/examples/class-prefix/src/App.jsx b/examples/class-prefix/src/App.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { usePrefix } from '@carbon/react';
+import { ClassPrefix } from '@carbon/react';
+
+function ExampleComponent() {
+  const prefix = usePrefix();
+
+  return (
+    <p>The current prefix is: {prefix}</p>
+  )
+}
+
+function App() {
+  return (
+    <>
+      <ExampleComponent />
+        <ClassPrefix prefix="custom">
+          <ExampleComponent />
+        </ClassPrefix>
+    </>
+  );
+}
+
+export default App
diff --git a/examples/class-prefix/src/index.scss b/examples/class-prefix/src/index.scss
@@ -0,0 +1,3 @@
+@use '@carbon/react' with (
+  $prefix: 'custom'
+);
diff --git a/examples/class-prefix/src/main.jsx b/examples/class-prefix/src/main.jsx
@@ -0,0 +1,12 @@
+import './index.scss'
+
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);
diff --git a/examples/class-prefix/vite.config.js b/examples/class-prefix/vite.config.js
@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    react({
+      jsxRuntime: 'classic',
+    }),
+  ],
+});
diff --git a/examples/id-prefix/.gitignore b/examples/id-prefix/.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/id-prefix/README.md b/examples/id-prefix/README.md
@@ -0,0 +1,49 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with
+[`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Id Prefix
+
+This component is intended to be used in limited cases, primarily only if you
+have id conflicts when using v10 and v11 packages at the same time during
+migration.
+
+In React, you can use IdPrefix anywhere in your component tree and specify the
+prefix with the prefix prop. Most often it's used in the project root wrapping
+the entire project
+
+## Getting Started
+
+First, run `yarn` or `npm install` and then run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the
+result.
+
+## Sass
+
+First and foremost, if you want to use v11 styles in any capacity, you'll have
+to migrate to use `dart-sass`. `node-sass` has been deprecated and we migrated
+to `dart-sass` in v11. For more information about migrating, visit our docs
+[here](https://github.com/carbon-design-system/carbon/blob/main/docs/migration/v11.md#changing-from-node-sass-to-sass).
+
+## V10 and V11
+
+This example is a v11 feature using the IdPrefix 🎉. As mentioned above, it will
+help with any id conflicts as you migrate over to v11.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js
+  features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out
+[the Next.js GitHub repository](https://github.com/vercel/next.js/) - your
+feedback and contributions are welcome!
diff --git a/examples/id-prefix/index.html b/examples/id-prefix/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/examples/id-prefix/package.json b/examples/id-prefix/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "id-prefix",
+  "private": true,
+  "version": "0.21.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@carbon/react": "^1.24.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@vitejs/plugin-react": "1.1.3",
+    "sass": "^1.51.0",
+    "vite": "^2.9.5"
+  }
+}
diff --git a/examples/id-prefix/src/App.jsx b/examples/id-prefix/src/App.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { useIdPrefix } from '@carbon/react';
+import { IdPrefix } from '@carbon/react';
+
+function ExampleComponent() {
+  const idPrefix = useIdPrefix();
+
+  return (
+    <p>The current id prefix is: {idPrefix}</p>
+  )
+}
+
+function App() {
+  return (
+    <>
+      <ExampleComponent />
+        <IdPrefix prefix="custom">
+          <ExampleComponent />
+        </IdPrefix>
+    </>
+  );
+}
+
+export default App
diff --git a/examples/id-prefix/src/index.scss b/examples/id-prefix/src/index.scss
@@ -0,0 +1,3 @@
+@use '@carbon/react' with (
+  $prefix: 'custom'
+);
diff --git a/examples/id-prefix/src/main.jsx b/examples/id-prefix/src/main.jsx
@@ -0,0 +1,12 @@
+import './index.scss'
+
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);
diff --git a/examples/id-prefix/vite.config.js b/examples/id-prefix/vite.config.js
@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    react({
+      jsxRuntime: 'classic',
+    }),
+  ],
+});
diff --git a/packages/react/src/components/IdPrefix/IdPrefix.mdx b/packages/react/src/components/IdPrefix/IdPrefix.mdx
@@ -25,8 +25,8 @@ automatically generated `id` attributes placed on certain DOM elements.
   <Story id="components-idprefix--default" />
 </Preview>
 
-This component is used intended to be used in limited cases, primarily only if
-you have id conflics when using v10 and v11 packages at the same time during
+This component is intended to be used in limited cases, primarily only if
+you have id conflicts when using v10 and v11 packages at the same time during
 migration.
 
 In React, you can use `IdPrefix` anywhere in your component tree and specify the

diff --git a/yarn.lock b/yarn.lock
@@ -11695,6 +11695,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"class-prefix@workspace:examples/class-prefix":
+  version: 0.0.0-use.local
+  resolution: "class-prefix@workspace:examples/class-prefix"
+  dependencies:
+    "@carbon/react": ^1.24.0
+    "@types/react": ^18.0.0
+    "@types/react-dom": ^18.0.0
+    "@vitejs/plugin-react": 1.1.3
+    react: ^17.0.0
+    react-dom: ^17.0.0
+    sass: ^1.51.0
+    vite: ^2.9.5
+  languageName: unknown
+  linkType: soft
+
 "class-utils@npm:^0.3.5":
   version: 0.3.6
   resolution: "class-utils@npm:0.3.6"
@@ -18508,6 +18523,21 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"id-prefix@workspace:examples/id-prefix":
+  version: 0.0.0-use.local
+  resolution: "id-prefix@workspace:examples/id-prefix"
+  dependencies:
+    "@carbon/react": ^1.24.0
+    "@types/react": ^18.0.0
+    "@types/react-dom": ^18.0.0
+    "@vitejs/plugin-react": 1.1.3
+    react: ^17.0.0
+    react-dom: ^17.0.0
+    sass: ^1.51.0
+    vite: ^2.9.5
+  languageName: unknown
+  linkType: soft
+
 "idb@npm:^6.1.4":
   version: 6.1.5
   resolution: "idb@npm:6.1.5"