diff --git a/examples/s2-webpack-5-typescript-example/.gitignore b/examples/s2-webpack-5-typescript-example/.gitignore new file mode 100644 index 00000000000..911108854aa --- /dev/null +++ b/examples/s2-webpack-5-typescript-example/.gitignore @@ -0,0 +1,9 @@ +node_modules +build +.DS_Store +npm-debug.log +yarn-error.log +.yarnclean +.vscode +.idea +dist \ No newline at end of file diff --git a/examples/s2-webpack-5-typescript-example/README.md b/examples/s2-webpack-5-typescript-example/README.md new file mode 100644 index 00000000000..13525dc3e29 --- /dev/null +++ b/examples/s2-webpack-5-typescript-example/README.md @@ -0,0 +1,55 @@ +# Webpack 5 example + +This is a [Webpack](https://webpack.js.org/) project with a minimal React configuration. + +## Getting Started + +First, run the development server: + +```bash +yarn install +yarn dev +``` + +Open [http://localhost:8080](http://localhost:8080) with your browser to see the result. + +style-macro and React Spectrum - Spectrum 2 have been added to `src/App.js` to show an example of a Spectrum 2 styled component. This file does client side rendering. The page auto-updates as you edit the file. + +## Macros config + +Edit the webpack.config.js to add an import for the plugin and add a webpack config that adds the webpack version of the macros plugin. An empty config file would be updated to look like the following. + +``` +const macros = require("unplugin-parcel-macros"); + +module.exports = { + // ... + plugins: [ + // ... + macros.webpack(), + // ... + ], +}; +``` + +To use the spectrum-theme via macros, pass your styles object to the style() macro and set the result as a new function. This new function or style() should be used within a `className` prop to style your html elements. Use the `styles` prop on React Spectrum components. + +```jsx +
+ Hello Spectrum 2! +
+``` + +```jsx + +``` + +## Application setup + +Please include the page level CSS in the root of your application to configure and support the light and dark themes. + +``` +import "@react-spectrum/s2/page.css"; +``` diff --git a/examples/s2-webpack-5-typescript-example/package.json b/examples/s2-webpack-5-typescript-example/package.json new file mode 100644 index 00000000000..b89f287aad5 --- /dev/null +++ b/examples/s2-webpack-5-typescript-example/package.json @@ -0,0 +1,34 @@ +{ + "name": "webpack-5-typescript-example", + "version": "1.0.0", + "description": "", + "main": "./src/index.tsx", + "packageManager": "yarn@4.2.2", + "scripts": { + "dev": "webpack serve", + "build": "webpack --mode production" + }, + "dependencies": { + "@react-spectrum/s2": "latest", + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@swc/core": "^1.11.13", + "@types/react": "^19.0.12", + "@types/react-dom": "^19.0.4", + "css-loader": "^6.10.0", + "css-minimizer-webpack-plugin": "^7.0.0", + "html-webpack-plugin": "^5.6.0", + "lightningcss": "^1.27.0", + "mini-css-extract-plugin": "^2.9.1", + "style-loader": "^3.3.4", + "swc-loader": "^0.2.6", + "swc-minify-webpack-plugin": "^2.1.3", + "typescript": "^5.8.2", + "unplugin-parcel-macros": "0.0.3", + "webpack": "^5.91.0", + "webpack-cli": "^5.1.4", + "webpack-dev-server": "^5.0.4" + } +} diff --git a/examples/s2-webpack-5-typescript-example/src/App.tsx b/examples/s2-webpack-5-typescript-example/src/App.tsx new file mode 100644 index 00000000000..dd380117008 --- /dev/null +++ b/examples/s2-webpack-5-typescript-example/src/App.tsx @@ -0,0 +1,263 @@ +/* + * Copyright 2024 Adobe. All rights reserved. + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +import "@react-spectrum/s2/page.css"; +import { + ActionButton, + ActionButtonGroup, + ActionMenu, + Button, + ButtonGroup, + Cell, + Column, + Divider, + Heading, + LinkButton, + Menu, + MenuItem, + MenuTrigger, + Picker, + PickerItem, + Row, + SubmenuTrigger, + TableBody, + TableHeader, + TableView, + Text, + ToggleButton, + ToggleButtonGroup, + TreeView, + TreeViewItem, + TreeViewItemContent +} from "@react-spectrum/s2"; +import {CardViewExample} from "./components/CardViewExample"; +import {CollectionCardsExample} from "./components/CollectionCardsExample"; +import Edit from "@react-spectrum/s2/icons/Edit"; +import FileTxt from "@react-spectrum/s2/icons/FileText"; +import Folder from "@react-spectrum/s2/icons/Folder"; +import {LoadingState} from '@react-types/shared' +import React, {useState} from "react"; +import Section from "./components/Section"; +import {style} from "@react-spectrum/s2/style" with { type: "macro" }; + +const Lazy = React.lazy(() => import('./Lazy')); + +function App() { + let [isLazyLoaded, setLazyLoaded] = useState(false); + let [cardViewState, setCardViewState] = useState<{layout?: 'grid' | 'waterfall' , loadingState: LoadingState}>({ + layout: 'grid', + loadingState: 'idle', + }); + let cardViewLoadingOptions = [ + {id: 'idle', label: 'Idle'}, + {id: 'loading', label: 'Loading'}, + {id: 'sorting', label: 'Sorting'}, + {id: 'loadingMore', label: 'Loading More'}, + {id: 'error', label: 'Error'}, + ]; + let cardViewLayoutOptions = [ + {id: 'grid', label: 'Grid'}, + {id: 'waterfall', label: 'Waterfall'} + ]; + return ( +
+ + Spectrum 2 + Webpack + Typescript + +
+ +
+
+
+ + + + + + Action Button + + Toggle Button + + Link Button + + + Cut + Copy + Paste + + + Bold + Italic + Underline + + +
+ +
+ + Action Menu Item 1 + Action Menu Item 2 + Action Menu Item 3 + + setCardViewState({...cardViewState, loadingState} as any)}> + {item => {item.label}} + + setCardViewState({...cardViewState, layout} as any)}> + {item => {item.label}} + + + + + + Menu + alert(key.toString())}> + Cut + Copy + Paste + Replace + + Share + alert(key.toString())}> + Copy Link + + Email + alert(key.toString())}> + Email as Attachment + Email as Link + + + SMS + + + Delete + + + + Menu Trigger + + + Link to /foo + + Cut + Copy + Paste + + + + + Name + Type + Date Modified + A + B + + + + Games + File folder + 6/7/2020 + Dummy content + Long long long long long long long cell + + + Program Files + File folder + 4/7/2021 + Dummy content + Long long long long long long long cell + + + bootmgr + System file + 11/20/2010 + Dummy content + Long long long long long long long cell + + + + + + + Photos + + + + + + Projects + + + + + Projects-1 + + + + + Projects-1A + + + + + + + Projects-2 + + + + + + Projects-3 + + + + + +
+ + {!isLazyLoaded && setLazyLoaded(true)}>Load more} + {isLazyLoaded && Loading}> + + } +
+
+ ); +} + +export default App; diff --git a/examples/s2-webpack-5-typescript-example/src/Lazy.tsx b/examples/s2-webpack-5-typescript-example/src/Lazy.tsx new file mode 100644 index 00000000000..2a3d4a41dce --- /dev/null +++ b/examples/s2-webpack-5-typescript-example/src/Lazy.tsx @@ -0,0 +1,385 @@ +import "@react-spectrum/s2/page.css"; +import { + Accordion, + ActionButton, + AlertDialog, + Avatar, + AvatarGroup, + Badge, + Breadcrumb, + Breadcrumbs, + Button, + ButtonGroup, + Checkbox, + CheckboxGroup, + CloseButton, + ColorArea, + ColorField, + ColorSlider, + ColorSwatch, + ColorSwatchPicker, + ColorWheel, + ComboBox, + ComboBoxItem, + Content, + ContextualHelp, + CustomDialog, + Dialog, + DialogContainer, + DialogTrigger, + Disclosure, + DisclosureHeader, + DisclosurePanel, + DisclosureTitle, + DropZone, + Footer, + Form, + Header, + Heading, + IllustratedMessage, + Image, + InlineAlert, + Keyboard, + Link, + Meter, + NumberField, + Picker, + PickerItem, + Popover, + ProgressBar, + ProgressCircle, + Radio, + RadioGroup, + RangeSlider, + SearchField, + SegmentedControl, + SegmentedControlItem, + Slider, + StatusLight, + Switch, + Tab, + TabList, + TabPanel, + Tabs, + Tag, + TagGroup, + Text, + TextArea, + TextField, + Tooltip, + TooltipTrigger, +} from "@react-spectrum/s2"; +import Checkmark from '@react-spectrum/s2/illustrations/gradient/generic1/Checkmark'; +import Cloud from "@react-spectrum/s2/illustrations/linear/Cloud"; +import DropToUpload from "@react-spectrum/s2/illustrations/linear/DropToUpload"; +import Edit from "@react-spectrum/s2/icons/Edit"; +import Section from "./components/Section"; +import {style} from "@react-spectrum/s2/style" with { type: "macro" }; +import {useState} from "react"; + +export default function Lazy() { + let [isDialogOpen, setIsDialogOpen] = useState(false); + return ( + <> +
+ + + + + + + + + + + + +
+ +
+ + + + Drag and drop your file + Or, select a file from your computer + + +
+ +
+
+ + Soccer + Baseball + Basketball + + + + Dogs + Cats + + + Low power mode +