From 2661cf6a1bfc55456bc6ef4c2429cab9aea26d48 Mon Sep 17 00:00:00 2001 From: guidari Date: Tue, 1 Aug 2023 10:04:29 -0300 Subject: [PATCH 1/5] feat: added a new example using vite --- .../incremental-migration-vite/.gitignore | 24 +++ examples/incremental-migration-vite/README.md | 51 +++++ .../incremental-migration-vite/index.html | 13 ++ .../incremental-migration-vite/package.json | 25 +++ .../incremental-migration-vite/src/App.jsx | 186 ++++++++++++++++++ .../incremental-migration-vite/src/index.scss | 7 + .../incremental-migration-vite/src/main.jsx | 13 ++ .../src/scss/App.module.css | 14 ++ .../incremental-migration-vite/vite.config.js | 7 + 9 files changed, 340 insertions(+) create mode 100644 examples/incremental-migration-vite/.gitignore create mode 100644 examples/incremental-migration-vite/README.md create mode 100644 examples/incremental-migration-vite/index.html create mode 100644 examples/incremental-migration-vite/package.json create mode 100644 examples/incremental-migration-vite/src/App.jsx create mode 100644 examples/incremental-migration-vite/src/index.scss create mode 100644 examples/incremental-migration-vite/src/main.jsx create mode 100644 examples/incremental-migration-vite/src/scss/App.module.css create mode 100644 examples/incremental-migration-vite/vite.config.js 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. + + + + + + + +