diff --git a/.yarn/cache/@carbon-colors-npm-11.18.1-8cd1916123-e27de1b09e.zip b/.yarn/cache/@carbon-colors-npm-11.18.1-8cd1916123-e27de1b09e.zip new file mode 100644 index 000000000000..1739e7d1036f Binary files /dev/null and b/.yarn/cache/@carbon-colors-npm-11.18.1-8cd1916123-e27de1b09e.zip differ diff --git a/.yarn/cache/@carbon-feature-flags-npm-0.15.0-4a32745220-211827fec1.zip b/.yarn/cache/@carbon-feature-flags-npm-0.15.0-4a32745220-211827fec1.zip new file mode 100644 index 000000000000..6145df828321 Binary files /dev/null and b/.yarn/cache/@carbon-feature-flags-npm-0.15.0-4a32745220-211827fec1.zip differ diff --git a/.yarn/cache/@carbon-grid-npm-11.17.1-89a18b0e50-d4c898f972.zip b/.yarn/cache/@carbon-grid-npm-11.17.1-89a18b0e50-d4c898f972.zip new file mode 100644 index 000000000000..e9443a41424c Binary files /dev/null and b/.yarn/cache/@carbon-grid-npm-11.17.1-89a18b0e50-d4c898f972.zip differ diff --git a/.yarn/cache/@carbon-icons-react-npm-11.23.1-6c94871e22-21cf57c410.zip b/.yarn/cache/@carbon-icons-react-npm-11.23.1-6c94871e22-21cf57c410.zip new file mode 100644 index 000000000000..200e0c224eea Binary files /dev/null and b/.yarn/cache/@carbon-icons-react-npm-11.23.1-6c94871e22-21cf57c410.zip differ diff --git a/.yarn/cache/@carbon-layout-npm-11.17.1-7d99d6a19e-ebf5d3173a.zip b/.yarn/cache/@carbon-layout-npm-11.17.1-7d99d6a19e-ebf5d3173a.zip new file mode 100644 index 000000000000..ca6133daf10b Binary files /dev/null and b/.yarn/cache/@carbon-layout-npm-11.17.1-7d99d6a19e-ebf5d3173a.zip differ diff --git a/.yarn/cache/@carbon-motion-npm-11.14.1-69a917befc-640650f85c.zip b/.yarn/cache/@carbon-motion-npm-11.14.1-69a917befc-640650f85c.zip new file mode 100644 index 000000000000..db8d8805c673 Binary files /dev/null and b/.yarn/cache/@carbon-motion-npm-11.14.1-69a917befc-640650f85c.zip differ diff --git a/.yarn/cache/@carbon-react-npm-1.34.1-c4b64e560d-366fdb22c0.zip b/.yarn/cache/@carbon-react-npm-1.34.1-c4b64e560d-366fdb22c0.zip new file mode 100644 index 000000000000..928a8c4deaf4 Binary files /dev/null and b/.yarn/cache/@carbon-react-npm-1.34.1-c4b64e560d-366fdb22c0.zip differ diff --git a/.yarn/cache/@carbon-styles-npm-1.34.1-0398442aaf-a33281dc7c.zip b/.yarn/cache/@carbon-styles-npm-1.34.1-0398442aaf-a33281dc7c.zip new file mode 100644 index 000000000000..06badcdf115c Binary files /dev/null and b/.yarn/cache/@carbon-styles-npm-1.34.1-0398442aaf-a33281dc7c.zip differ diff --git a/.yarn/cache/@carbon-themes-npm-11.22.1-68d80a0565-373971bfcf.zip b/.yarn/cache/@carbon-themes-npm-11.22.1-68d80a0565-373971bfcf.zip new file mode 100644 index 000000000000..10a8caf84fa7 Binary files /dev/null and b/.yarn/cache/@carbon-themes-npm-11.22.1-68d80a0565-373971bfcf.zip differ diff --git a/.yarn/cache/@carbon-type-npm-11.21.1-6bc478d907-190ab4f37c.zip b/.yarn/cache/@carbon-type-npm-11.21.1-6bc478d907-190ab4f37c.zip new file mode 100644 index 000000000000..216cc7ca17ac Binary files /dev/null and b/.yarn/cache/@carbon-type-npm-11.21.1-6bc478d907-190ab4f37c.zip differ diff --git a/examples/incremental-migration-vite/.gitignore b/examples/incremental-migration-vite/.gitignore new file mode 100644 index 000000000000..a547bf36d8d1 --- /dev/null +++ b/examples/incremental-migration-vite/.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/incremental-migration-vite/README.md b/examples/incremental-migration-vite/README.md new file mode 100644 index 000000000000..0f3f81fa4250 --- /dev/null +++ b/examples/incremental-migration-vite/README.md @@ -0,0 +1,51 @@ +## Incremental migration + +We have recently released a new version, v11, of our component library and a +common question we receive is if users can adopt v11 incrementally and the +answer is yes! If the burden of migrating to v11 is too big to take on all at +once, but there are features of our latest release you want to take advantage +of, it is likely that you can pull in just the parts you are wanting to use +while keeping the rest of your Carbon usage the same. + +This example illustrates how v11 and v10 work together. + +## Getting Started + +First, run `yarn build` in the root of the `carbon` repository. + +```sh +yarn install && yarn build +``` + +Now, all you need to do is `cd` into the directory and run: + +```sh +yarn install +# or +npm install + + +yarn dev +# or +npm run dev +``` + +This example only takes a little bit of time to start, once it's up and running, +it's very fast. + +Open [http://localhost:5173](http://localhost:5173) 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 mainly v10, but it takes advantage of the new Stack component +from v11 and uses v11's StructuredList component 🎉. StructuredList had a major +accessibilty revamp in v11 that you might want to use and this examples shows +you how. diff --git a/examples/incremental-migration-vite/index.html b/examples/incremental-migration-vite/index.html new file mode 100644 index 000000000000..b46ab83364e3 --- /dev/null +++ b/examples/incremental-migration-vite/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/examples/incremental-migration-vite/package.json b/examples/incremental-migration-vite/package.json new file mode 100644 index 000000000000..910b270acf7b --- /dev/null +++ b/examples/incremental-migration-vite/package.json @@ -0,0 +1,25 @@ +{ + "name": "incremental-migration-vite", + "private": true, + "version": "0.1.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview" + }, + "dependencies": { + "@carbon/icons-react": "^10.49.0", + "@carbon/react": "^1.34.0", + "carbon-components": "^10.57.0", + "carbon-components-react": "^7.57.0", + "carbon-icons": "^7.0.7", + "react": "18.2.0", + "react-dom": "18.2.0" + }, + "devDependencies": { + "@vitejs/plugin-react": "4.0.0", + "sass": "^1.51.0", + "vite": "^4.3.8" + } +} diff --git a/examples/incremental-migration-vite/src/App.jsx b/examples/incremental-migration-vite/src/App.jsx new file mode 100644 index 000000000000..53b373b867a7 --- /dev/null +++ b/examples/incremental-migration-vite/src/App.jsx @@ -0,0 +1,186 @@ +import React from 'react'; +import { + Button, + Content, + Header, + SkipToContent, + HeaderName, + Toggle, + NumberInput, + RadioButtonGroup, + RadioButton, + Search, + Select, + SelectItem, + TextInput, + TextArea, +} from 'carbon-components-react'; +import { + StructuredListBody, + StructuredListWrapper, + StructuredListHead, + StructuredListRow, + StructuredListCell, + Stack, +} from '@carbon/react'; +import Head from 'next/head'; +import styles from './scss/App.module.css'; + +export default function App() { + const numberInputProps = { + className: 'some-class', + id: 'number-input-1', + label: 'Number Input', + min: 0, + max: 100, + value: 50, + step: 10, + }; + + const toggleProps = { + className: 'some-class', + }; + + const radioProps = { + className: 'some-class', + }; + + const searchProps = { + className: 'some-class', + }; + + const selectProps = { + className: 'some-class', + }; + + const TextInputProps = { + className: 'some-class', + id: 'test2', + labelText: 'Text Input label', + placeholder: 'Placeholder text', + }; + + const textareaProps = { + labelText: 'Text Area label', + className: 'some-class', + placeholder: 'Placeholder text', + id: 'test5', + cols: 50, + rows: 4, + }; + + const buttonEvents = { + className: 'some-class', + }; + + return ( +
+ + Create Next App + + + + +
+ + + [Platform] + +
+ + + + + {}} + name="radio-button-group" + defaultSelected="default-selected"> + + + + + + + + + ColumnA + ColumnB + ColumnC + + + + + Row 1 + Row 1 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc + dui magna, finibus id tortor sed, aliquet bibendum augue. + Aenean posuere sem vel euismod dignissim. Nulla ut cursus + dolor. Pellentesque vulputate nisl a porttitor interdum. + + + + Row 2 + Row 2 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc + dui magna, finibus id tortor sed, aliquet bibendum augue. + Aenean posuere sem vel euismod dignissim. Nulla ut cursus + dolor. Pellentesque vulputate nisl a porttitor interdum. + + + + + + + +