Tailwind CSS starter kit (#5666)

Author: devongovett

.circleci/comment.js

@@ -57,8 +57,7 @@ async function run() {
       [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)
-      [Storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook/index.html)
-      [RAC Starter Storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/starter-storybook/index.html)`
+      [Storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook/index.html)`
         });
       }
     } catch (error) {

Makefile

@@ -113,9 +113,8 @@ website:
 website-production:
 	node scripts/buildWebsite.js $$PUBLIC_URL
 	cp packages/dev/docs/pages/robots.txt dist/production/docs/robots.txt
-	$(MAKE) starter
-	cd starters/docs && zip -r react-aria-starter.zip . -x .gitignore .DS_Store "node_modules/*" "storybook-static/*"
-	mv starters/docs/react-aria-starter.zip dist/production/docs/react-aria-starter.$$(git rev-parse --short HEAD).zip
+	$(MAKE) starter-zip
+	$(MAKE) tailwind-starter
 
 check-examples:
 	node scripts/extractExamples.mjs
@@ -124,3 +123,18 @@ check-examples:
 starter:
 	node scripts/extractStarter.mjs
 	cd starters/docs && yarn && yarn tsc
+
+starter-zip: starter
+	cp LICENSE starters/docs/.
+	cd starters/docs && zip -r react-aria-starter.zip . -x .gitignore .DS_Store "node_modules/*" "storybook-static/*"
+	mv starters/docs/react-aria-starter.zip dist/production/docs/react-aria-starter.$$(git rev-parse --short HEAD).zip
+	cd starters/docs && yarn build-storybook
+	mv starters/docs/storybook-static dist/production/docs/react-aria-starter
+
+tailwind-starter:
+	cp LICENSE starters/tailwind/.
+	cd starters/tailwind && yarn && yarn tsc
+	cd starters/tailwind && zip -r react-aria-tailwind-starter.zip . -x .gitignore .DS_Store "node_modules/*" "storybook-static/*"
+	mv starters/tailwind/react-aria-tailwind-starter.zip dist/production/docs/react-aria-tailwind-starter.$$(git rev-parse --short HEAD).zip
+	cd starters/tailwind && yarn build-storybook
+	mv starters/tailwind/storybook-static dist/production/docs/react-aria-tailwind-starter

package.json

@@ -168,7 +168,7 @@
     "sinon": "^7.3.1",
     "storybook-dark-mode": "^1.1.1-canary.120.3843.0",
     "tailwind-variants": "^0.1.18",
-    "tailwindcss": "^3.2.2",
+    "tailwindcss": "^3.4.0",
     "tailwindcss-animate": "^1.0.7",
     "tempy": "^0.5.0",
     "typescript": "5.2.2",

packages/dev/docs/pages/react-aria/getting-started.mdx

@@ -12,8 +12,7 @@ export default Layout;
 
 import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
 import styles from '@react-spectrum/docs/src/docs.css';
-import {ResourceCard} from '@react-spectrum/docs/src/ResourceCard';
-import {spawnSync} from 'child_process';
+import {StarterKits} from '@react-spectrum/docs/src/StarterKits';
 
 ---
 category: Introduction
@@ -220,14 +219,11 @@ This is a quick way to get started, but you can also create your own custom clas
 
 Check out our [styling guide](styling.html) to learn more about styling, states, render props, working with Tailwind CSS, and animation.
 
-## Starter kit
+## Starter kits
 
-To help kick-start your project, we offer a starter kit that includes example implementations of all React Aria components, along with styles from the docs. It also comes with a pre-configured [Storybook](https://storybook.js.org/) that you can experiment with, or use as a starting point for your own component library.
+To help kick-start your project, we offer starter kits that include example implementations of all React Aria components with various styling solutions. All components are fully styled, including support for dark mode, high contrast mode, and all UI states. Each starter comes with a pre-configured [Storybook](https://storybook.js.org/) that you can experiment with, or use as a starting point for your own component library.
 
-<ResourceCard
-  type="Storybook"
-  url={`../react-aria-starter.${process.env.GIT_HASH || spawnSync('git', ['rev-parse', '--short', 'HEAD']).stdout.toString().trim()}.zip`}
-  style={{marginTop: 36}} />
+<StarterKits />
 
 ## Hooks
 

packages/dev/docs/pages/react-aria/home.global.css

@@ -16,7 +16,7 @@
 
 @layer utilities {
   .focus-ring {
-    @apply outline outline-0 outline-blue-600 focus-visible:outline-2;
+    @apply outline outline-0 outline-blue-600 dark:outline-blue-500 focus-visible:outline-2;
   }
 }
 

packages/dev/docs/pages/react-aria/home/A11y.tsx

@@ -207,7 +207,7 @@ export function A11y() {
         ), document.body)}
         <Select className="group flex flex-col gap-1" selectedKey={selectedKey} onSelectionChange={cursorRect ? undefined : setSelectedKey} isOpen={isOpen} onOpenChange={cursorRect ? undefined : setOpen}>
           <Label>Permissions</Label>
-          <Button className="flex items-center text-start gap-4 w-full cursor-default border border-black/10 dark:border-white/10 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)] dark:shadow-none rounded-lg pl-3 pr-2 py-2 min-w-[150px] transition bg-gray-50 hover:bg-gray-100 pressed:bg-gray-200 dark:bg-zinc-700 dark:hover:bg-zinc-600 dark:pressed:bg-zinc-500 group-invalid:border-red-600 disabled:text-gray-200 dark:disabled:text-zinc-600 outline-none focus-visible:outline-blue-600 outline-offset-2">
+          <Button className="flex items-center text-start gap-4 w-full cursor-default border border-black/10 dark:border-white/10 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)] dark:shadow-none rounded-lg pl-3 pr-2 py-2 min-w-[150px] transition bg-gray-50 hover:bg-gray-100 pressed:bg-gray-200 dark:bg-zinc-700 dark:hover:bg-zinc-600 dark:pressed:bg-zinc-500 group-invalid:border-red-600 disabled:text-gray-200 dark:disabled:text-zinc-600 outline-none focus-visible:outline-blue-600 dark:focus-visible:outline-blue-500 outline-offset-2">
             <SelectValue className="flex-1 text-sm text-gray-800 dark:text-zinc-300 placeholder-shown:italic" />
             <ChevronDown className="w-4 h-4 text-gray-600 dark:text-zinc-400" />
           </Button>

packages/dev/docs/pages/react-aria/home/Styles.tsx

@@ -113,7 +113,7 @@ export function Styles() {
             </Window>
             <Window toolbar={<AddressBar>https://your-app.com</AddressBar>}>
               <div className="flex-1 flex items-center justify-center bg-gray-50 dark:bg-zinc-800 py-20">
-                <Button className="bg-blue-600 text-white pressed:bg-blue-700 border border-white/10 rounded-lg px-4 py-2 cursor-default outline outline-0 focus-visible:outline-2 outline-blue-600 outline-offset-2">
+                <Button className="bg-blue-600 text-white pressed:bg-blue-700 border border-white/10 rounded-lg px-4 py-2 cursor-default outline outline-0 focus-visible:outline-2 outline-blue-600 dark:outline-blue-500 outline-offset-2">
                   Initiate launch sequence…
                 </Button>
               </div>

packages/dev/docs/pages/react-aria/home/SwitchAnimation.tsx

@@ -56,7 +56,7 @@ export function SwitchAnimation() {
         isSelected={isSelected}
         onChange={isAnimating ? undefined : setSelected}
         className="group inline-flex touch-none">
-        <span className="[--bg:theme(colors.slate.300)] dark:[--bg:theme(colors.zinc.600)] forced-colors:![--bg:ButtonFace] bg-[--bg] [--bg-selected:theme(colors.green.500)] forced-colors:![--bg-selected:Highlight] group-selected:bg-[--bg-selected] group-focus-visible:outline outline-2 outline-blue-600 forced-colors:outline-[Highlight] outline-offset-2 mr-4 h-10 w-16 rounded-full border border-black/[5%] dark:border-white/10 p-[3px] transition duration-200" style={{animation: isAnimating ? 'switch-background-animation 12s ease-in-out 500ms' : null}}>
+        <span className="[--bg:theme(colors.slate.300)] dark:[--bg:theme(colors.zinc.600)] forced-colors:![--bg:ButtonFace] bg-[--bg] [--bg-selected:theme(colors.green.500)] forced-colors:![--bg-selected:Highlight] group-selected:bg-[--bg-selected] group-focus-visible:outline outline-2 outline-blue-600 dark:outline-blue-500 forced-colors:outline-[Highlight] outline-offset-2 mr-4 h-10 w-16 rounded-full border border-black/[5%] dark:border-white/10 p-[3px] transition duration-200" style={{animation: isAnimating ? 'switch-background-animation 12s ease-in-out 500ms' : null}}>
           <span className="group-selected:ml-6 group-selected:group-pressed:ml-4 group-pressed:w-10 block h-8 w-8 origin-right rounded-full bg-white forced-colors:bg-[ButtonText] forced-colors:group-selected:bg-[HighlightText] border border-transparent shadow transition-all duration-200" style={{animation: isAnimating ? 'switch-animation 12s ease-in-out 500ms' : null, contain: 'layout'}} />
         </span>
       </Switch>

packages/dev/docs/pages/react-aria/home/components.tsx

@@ -71,7 +71,7 @@ export function Arrow({href, children, textX, x1, x2, points, y, marker = 'marke
         ? <polyline points={points} {...markerProps} className="stroke-slate-800 dark:stroke-white fill-none" />
         : <line x1={x1} y1={y} x2={x2} y2={y} {...markerProps} className="stroke-slate-800 dark:stroke-white" />
       }
-      <a href={href} target="_blank" className="pointer-events-auto outline-none rounded-sm focus:outline-blue-600 outline-offset-2"><text x={textX} y={y + 3} className="text-xs fill-slate-900 dark:fill-white underline">{children}</text></a>
+      <a href={href} target="_blank" className="pointer-events-auto outline-none rounded-sm focus:outline-blue-600 dark:focus:outline-blue-500 outline-offset-2"><text x={textX} y={y + 3} className="text-xs fill-slate-900 dark:fill-white underline">{children}</text></a>
     </>
   );
 }

packages/dev/docs/pages/react-aria/tailwind.config.js

@@ -9,7 +9,6 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-const plugin = require('tailwindcss/plugin');
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -25,15 +24,6 @@ module.exports = {
   },
   plugins: [
     require('tailwindcss-react-aria-components'),
-    require('tailwindcss-animate'),
-    plugin(({addVariant, addUtilities}) => {
-      // https://github.com/tailwindlabs/tailwindcss/pull/11694
-      addVariant('forced-colors', '@media (forced-colors: active)');
-      // https://github.com/tailwindlabs/tailwindcss/pull/11931
-      addUtilities({
-        '.forced-color-adjust-auto': {'forced-color-adjust': 'auto'},
-        '.forced-color-adjust-none': {'forced-color-adjust': 'none'}
-      });
-    })
+    require('tailwindcss-animate')
   ]
 };