.circleci/comment.js

@@ -51,11 +51,13 @@ async function run() {
       [CRA Test App](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/build/index.html)
       [NextJS Test App](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/next/index.html)
       [RAC Tailwind Example](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/rac-tailwind/index.html)
+      [RAC Spectrum + Tailwind Example](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/rac-tailwind/index.html)
       [CRA Test App Size](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/publish-stats/build-stats.txt)
       [NextJS App Size](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/publish-stats/next-build-stats.txt)
       [Publish stats](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/publish-stats/publish.json)
       [Size diff since last release](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/publish-stats/size-diff.txt)
-      [Docs](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/docs/index.html)`
+      [Docs](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/docs/index.html)
+      [Storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook/index.html)`
         });
       }
     } catch (error) {

.storybook/test-runner.js

@@ -0,0 +1,39 @@
+const {configureAxe, checkA11y, injectAxe} = require('axe-playwright');
+const {getStoryContext} = require('@storybook/test-runner');
+
+
+/*
+* See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api-experimental
+* to learn more about the test-runner hooks API.
+*/
+module.exports = {
+  async preRender(page) {
+    await injectAxe(page);
+  },
+  async postRender(page, context) {
+    // Grab accessibility settings from the story itself
+    const storyContext = await getStoryContext(page, context);
+    if (storyContext.parameters?.a11y?.disable) {
+      return;
+    }
+
+    await configureAxe(page, {
+      // TODO: Ideally would have a selector target for the storybook's sb main body element
+      rules: [
+        {
+          id: 'aria-hidden-focus',
+          selector: 'body *:not([data-a11y-ignore="aria-hidden-focus"])',
+        },
+        ...(storyContext.parameters?.a11y?.config?.rules ?? [])
+      ]
+    });
+
+    await checkA11y(page, '#root', {
+      detailedReport: true,
+      detailedReportOptions: {
+        html: true,
+      },
+      axeOptions: storyContext.parameters?.a11y?.options,
+    });
+  },
+};

examples/rac-spectrum-tailwind/.parcelrc

@@ -0,0 +1,7 @@
+{
+  "extends": "@parcel/config-default",
+  "resolvers": ["@parcel/resolver-glob", "..."],
+  "transformers": {
+    "../../packages/*/*/intl/*.json": ["parcel-transformer-intl"]
+  }
+}

examples/rac-spectrum-tailwind/.postcssrc

@@ -0,0 +1,5 @@
+{
+  "plugins": {
+    "tailwindcss": {}
+  }
+}

examples/rac-spectrum-tailwind/README.md

@@ -0,0 +1,24 @@
+# React Aria Components + Spectrum + Tailwind CSS
+
+A Tailwind CSS template for creating React Aria Components using common Spectrum styles.
+
+## Overview
+
+### Includes
+
+- `Theme`: a preset that includes Spectrum values for colors, scale and more
+- `Plugin`: for easier styling based on React Aria Component's selectors for states
+
+### When to use this
+
+- You need a component that matches an ARIA pattern, but doesn't exist in React Spectrum
+- You are prototyping a component that might be a good fit for a future addition to React Spectrum, but isn't available yet
+
+### When not to use this
+
+- There is an existing React Spectrum component that matches your needs
+- You are trying to override Spectrum guidelines or create a slight variation of an existing React Spectrum component
+
+### Note
+
+This is not a library you can install and consume, but rather a template that you can copy into your own project and maintain yourself. Keep in mind that you are still responsible for ensuring the experiences you create are accessible and meet Spectrum guidelines.

examples/rac-spectrum-tailwind/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "rac-spectrum-tailwind-example",
+  "private": true,
+  "scripts": {
+    "start": "parcel src/index.html",
+    "build": "parcel build src/index.html",
+    "install-17": "yarn add -W react@^17 react-dom@^17"
+  },
+  "dependencies": {
+    "@adobe/react-spectrum": "^3.28.0",
+    "@spectrum-icons/illustrations": "^3.6.3",
+    "@spectrum-icons/workflow": "^4.2.2",
+    "parcel": "^2.9.1",
+    "postcss": "^8.2.1",
+    "react": "^18.2.0",
+    "react-aria-components": "^1.0.0-alpha.4",
+    "react-dom": "^18.2.0",
+    "react-stately": "^3.23.0",
+    "tailwindcss": "^3.3.0",
+    "tailwindcss-animate": "^1.0.5"
+  },
+  "devDependencies": {
+    "process": "^0.11.10"
+  }
+}

examples/rac-spectrum-tailwind/src/App.js

@@ -0,0 +1,119 @@
+import { useState } from "react";
+import { defaultTheme, Provider } from "@adobe/react-spectrum";
+import { Label, Radio, RadioGroup } from "react-aria-components";
+import User from "@spectrum-icons/workflow/User";
+import UserGroup from "@spectrum-icons/workflow/UserGroup";
+import Building from "@spectrum-icons/workflow/Building";
+import CheckmarkCircle from "@spectrum-icons/workflow/CheckmarkCircle";
+import ThemeSwitcher from "./ThemeSwitcher";
+
+export function App() {
+  let [colorScheme, setColorScheme] = useState(undefined);
+
+  return (
+    <Provider theme={defaultTheme} colorScheme={colorScheme}>
+      <ThemeSwitcher setColorScheme={setColorScheme} />
+      <div className="grid justify-center grid-cols-1 gap-160 auto-rows-fr">
+        <SelectBoxExample />
+        <SentimentRatingGroup />
+        <div className="flex justify-center">
+          <div className="flex flex-col max-w-sm">
+            <label for="test-input">Native input</label>
+            <input id="test-input" className="border focus:bg-gray-200 focus:outline-none focus:border-blue-600 hover:border-blue-300" />
+            <p>For the purpose of ensuring Tailwind's default selectors still work for non-RAC elements when using the plugin.</p>
+          </div>
+        </div>
+      </div>
+    </Provider>
+  );
+}
+
+function SelectBoxExample() {
+  return (
+    <RadioGroup
+      data-rac
+      className="flex flex-col space-y-2 text-center"
+      defaultValue="Team"
+    >
+      <Label className="text-xl font-semibold">Select Boxes</Label>
+      <div className="flex justify-center">
+        <SelectBox
+          name="Individual"
+          icon={<User size="XL" />}
+          description="For 1 person"
+        />
+        <SelectBox
+          name="Team"
+          icon={<UserGroup size="XL" />}
+          description="For teams of 9 or less"
+        />
+        <SelectBox
+          name="Enterprise"
+          icon={<Building size="XL" />}
+          description="For of 10 or more"
+        />
+      </div>
+    </RadioGroup>
+  );
+}
+
+function SelectBox({ name, icon, description }) {
+  return (
+    <Radio
+      data-rac
+      value={name}
+      className={({ isFocusVisible, isSelected, isPressed }) => `
+      flex justify-center p-160 m-160 h-2000 w-2000 focus:outline-none border rounded
+      ${isFocusVisible ? "ring-half ring-offset-0" : ""}
+      ${isSelected ? "bg-accent-100 border-accent-700" : ""}
+      ${isPressed && !isSelected ? "bg-gray-200" : ""}
+      ${!isSelected && !isPressed ? "bg-white dark:bg-black" : ""}
+    `}
+    >
+      {({ isSelected }) => (
+        <div className="relative flex flex-col items-center justify-center w-full h-full gap-150">
+          {isSelected && (
+            <div className="absolute top-0 left-0 text-accent-800 -mt-125 -ml-75">
+              <CheckmarkCircle size="S" />
+            </div>
+          )}
+          {icon && <div className="text-gray-500">{icon}</div>}
+          <div>
+            <div className={`font-semibold`}>{name}</div>
+            {description && <div className="text-sm">{description}</div>}
+          </div>
+        </div>
+      )}
+    </Radio>
+  );
+}
+
+function SentimentRatingGroup() {
+  let ratings = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
+  return (
+    <RadioGroup className="flex flex-col m-auto space-y-10 text-center">
+      <Label className="text-xl font-semibold">Sentiment Rating</Label>
+      <div className="flex justify-between">
+        <span>Least Likely</span>
+        <span>Most Likely</span>
+      </div>
+      <div className="flex justify-evenly">
+        {ratings.map((rating) => (
+          <SentimentRating key={rating} rating={rating} />
+        ))}
+      </div>
+    </RadioGroup>
+  );
+}
+
+function SentimentRating({ rating }) {
+  return (
+    <Radio
+      data-rac
+      value={rating}
+      className="flex items-center justify-center bg-white border rounded-full p-160 m-75 h-200 w-200 focus:outline-none focus-visible:ring dark:bg-black selected:bg-accent-800 dark:selected:bg-accent-800 selected:border-accent-800 selected:text-white pressed:bg-gray-200 dark:pressed:bg-gray-200 hover:border-gray-300"
+    >
+      {rating}
+    </Radio>
+  );
+}

examples/rac-spectrum-tailwind/src/ThemeSwitcher.js

@@ -0,0 +1,21 @@
+import { useProvider, ActionButton } from "@adobe/react-spectrum";
+import Moon from "@spectrum-icons/workflow/Moon";
+import Light from "@spectrum-icons/workflow/Light";
+
+export default function ThemeSwitcher({ setColorScheme }) {
+  let { colorScheme } = useProvider();
+  let label =
+    colorScheme === "dark" ? "Switch to light theme" : "Switch to dark theme";
+  let otherScheme = colorScheme === "light" ? "dark" : "light";
+
+  return (
+    <div className="float-right m-50">
+      <ActionButton
+        aria-label={label}
+        onPress={() => setColorScheme(otherScheme)}
+      >
+        {colorScheme === "dark" ? <Light /> : <Moon />}
+      </ActionButton>
+    </div>
+  );
+}

examples/rac-spectrum-tailwind/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>React Aria Components + Spectrum + Tailwind</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="stylesheet" href="style.css">
+</head>
+<body class="bg-white text-gray-800">
+  <div id="root"></div>
+  <script type="module" src="index.js"></script>
+</body>
+</html>

examples/rac-spectrum-tailwind/src/index.js

@@ -0,0 +1,6 @@
+import { createRoot } from "react-dom/client";
+import { App } from './App';
+
+let root = createRoot(document.getElementById('root'));
+root.render(<App />);
+