share more between components and simplify, review comments

Author: snowystinger

packages/react-aria-components/stories/Autocomplete.stories.tsx

@@ -11,7 +11,8 @@
  */
 
 import {action} from '@storybook/addon-actions';
-import {Autocomplete, Button, Collection, DialogTrigger, Header, Input, Keyboard, Label, ListBox, ListBoxSection, ListLayout, Menu, MenuItem, MenuSection, MenuTrigger, Popover, SearchField, Select, SelectValue, Separator, SubmenuTrigger, Text, TextField, Virtualizer} from 'react-aria-components';
+import {Autocomplete, Button, Collection, DialogTrigger, Header, Input, Keyboard, Label, ListBox, ListBoxSection, ListLayout,Popover, SearchField, Select, SelectValue, Separator, SubmenuTrigger, Text, TextField, Virtualizer} from 'react-aria-components';
+import {Menu, MenuItem, MenuSection, MenuTrigger} from '../src/Menu';
 import {MyListBoxItem, MyMenuItem} from './utils';
 import React from 'react';
 import styles from '../example/index.css';

starters/docs/package.json

@@ -15,6 +15,7 @@
     "@storybook/test": "^8.6.14",
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
+    "clsx": "^2.1.1",
     "lightningcss-loader": "^2.1.0",
     "lucide-react": "^0.292.0",
     "prop-types": "^15.8.1",

starters/docs/src/Autocomplete.css

@@ -1,6 +1,3 @@
-@import './Menu.css';
-@import './Button.css';
-@import './SearchField.css';
 @import "./theme.css";
 
 .my-autocomplete {

starters/docs/src/Autocomplete.tsx

@@ -3,10 +3,9 @@ import {
   Autocomplete as AriaAutocomplete,
   AutocompleteProps as AriaAutocompleteProps,
   Key,
-  Menu,
   useFilter
 } from 'react-aria-components';
-
+import {Menu} from './Menu';
 import {SearchField} from './SearchField';
 
 import './Autocomplete.css';

starters/docs/src/Breadcrumbs.tsx

@@ -1,7 +1,11 @@
 'use client';
-import {Breadcrumbs as RACBreadcrumbs, BreadcrumbsProps} from 'react-aria-components';
+import {Breadcrumbs as RACBreadcrumbs, BreadcrumbsProps, Breadcrumb as RACBreadcrumb, BreadcrumbProps} from 'react-aria-components';
 import './Breadcrumbs.css';
 
 export function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>) {
   return <RACBreadcrumbs {...props} />;
 }
+
+export function Breadcrumb(props: BreadcrumbProps) {
+  return <RACBreadcrumb {...props} />;
+}

starters/docs/src/Button.css

@@ -34,13 +34,3 @@
     color: var(--text-color-disabled);
   }
 }
-
-@keyframes toggle {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}

starters/docs/src/Calendar.css

@@ -1,4 +1,3 @@
-@import './Button.css';
 @import "./theme.css";
 
 .react-aria-Calendar {
@@ -25,57 +24,50 @@
     padding: 0;
   }
 
-  .react-aria-CalendarCell {
-    width: 1.75rem;
-    line-height: 1.75rem;
-    text-align: center;
-    border-radius: 6px;
-    cursor: default;
-    outline: none;
-    margin: 1px;
-    forced-color-adjust: none;
-
-    &[data-outside-month] {
-      display: none;
-    }
+  [slot=errorMessage] {
+    font-size: 12px;
+    color: var(--invalid-color);
+  }
+}
 
-    &[data-pressed] {
-      background: var(--gray-100);
-    }
+.react-aria-CalendarCell {
+  width: 2.00025rem;
+  line-height: 2.00025rem;
+  text-align: center;
+  border-radius: 6px;
+  cursor: default;
+  outline: none;
+  forced-color-adjust: none;
 
-    &[data-focus-visible] {
-      outline: 2px solid var(--focus-ring-color);
-      outline-offset: 2px;
-    }
+  &[data-outside-month] {
+    display: none;
+  }
 
-    &[data-selected] {
-      background: var(--highlight-background);
-      color: var(--highlight-foreground);
-    }
+  &[data-pressed] {
+    background: var(--gray-100);
   }
 
-  .react-aria-CalendarCell {
-    &[data-disabled] {
-      color: var(--text-color-disabled);
-    }
+  &[data-focus-visible] {
+    outline: 2px solid var(--focus-ring-color);
+    outline-offset: 2px;
   }
 
-  .react-aria-CalendarCell {
-    &[data-unavailable] {
-      text-decoration: line-through;
-      color: var(--invalid-color);
-    }
+  &[data-selected] {
+    background: var(--highlight-background);
+    color: var(--highlight-foreground);
   }
 
-  .react-aria-CalendarCell {
-    &[data-invalid] {
-      background: var(--invalid-color);
-      color: var(--highlight-foreground);
-    }
+  &[data-disabled] {
+    color: var(--text-color-disabled);
   }
 
-  [slot=errorMessage] {
-    font-size: 12px;
+  &[data-unavailable] {
+    text-decoration: line-through;
     color: var(--invalid-color);
   }
-}
+
+  &[data-invalid] {
+    background: var(--invalid-color);
+    color: var(--highlight-foreground);
+  }
+}

starters/docs/src/Calendar.tsx

@@ -1,13 +1,14 @@
 'use client';
 import {
   Calendar as AriaCalendar,
-  CalendarCell,
-  CalendarGrid,
+  CalendarCell as AriaCalendarCell,
+  CalendarGrid as AriaCalendarGrid,
   CalendarProps as AriaCalendarProps,
   DateValue,
-  Heading,
-  Text
+  CalendarCellProps,
+  CalendarGridProps
 } from 'react-aria-components';
+import {Heading, Text} from './Content';
 import {ChevronLeft, ChevronRight} from 'lucide-react';
 
 import {Button} from './Button';
@@ -38,3 +39,11 @@ export function Calendar<T extends DateValue>(
     )
   );
 }
+
+export function CalendarCell(props: CalendarCellProps) {
+  return <AriaCalendarCell {...props} />;
+}
+
+export function CalendarGrid(props: CalendarGridProps) {
+  return <AriaCalendarGrid {...props} />;
+}

starters/docs/src/CheckboxGroup.css

@@ -1,6 +1,3 @@
-@import './Checkbox.css';
-@import './Form.css';
-@import './Button.css';
 @import "./theme.css";
 
 .react-aria-CheckboxGroup {
@@ -9,11 +6,6 @@
   gap: 0.499625rem;
   color: var(--text-color);
 
-  .react-aria-FieldError {
-    font-size: 12px;
-    color: var(--invalid-color);
-  }
-
   [slot=description] {
     font-size: 12px;
   }

starters/docs/src/CheckboxGroup.tsx

@@ -2,11 +2,10 @@
 import {
   CheckboxGroup as AriaCheckboxGroup,
   CheckboxGroupProps as AriaCheckboxGroupProps,
-  FieldError,
-  Label,
-  Text,
   ValidationResult
 } from 'react-aria-components';
+import {Text} from './Content';
+import {Label, FieldError} from './Form';
 
 import './CheckboxGroup.css';
 
@@ -38,5 +37,3 @@ export function CheckboxGroup(
     )
   );
 }
-
-export { CheckboxGroup as MyCheckboxGroup };