@basic-ui/material 1.0.0-alpha.49 → 1.0.0-alpha.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basic-ui/material",
-  "version": "1.0.0-alpha.49",
+  "version": "1.0.0-alpha.50",
   "description": "Accessible React Components used as building blocks for UI patterns",
   "author": "Lucas Terra <lucasterra7@gmail.com>",
   "license": "MIT",
@@ -61,6 +61,5 @@
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0",
     "tailwindcss": "^3.0.0"
-  },
-  "gitHead": "82de3b448289214052d402b2fae13ad5ca635808"
+  }
 }

package/src/Combobox/Combobox.story.tsx

@@ -1,157 +1,157 @@
-import type { ChangeEvent } from 'react';
-import { useMemo, useState } from 'react';
-
-import {
-  Combobox,
-  ComboboxOption,
-  ComboboxList,
-  ComboboxPopover,
-  ComboboxInput,
-  ComboboxButton,
-} from './Combobox';
-import { Box } from '../Box';
-import cities from '../../../core/src/ComboBox/cities';
-
-export default {
-  title: 'components/Combobox',
-};
-
-function useCityMatch(searchTerm: string) {
-  return useMemo(() => {
-    const term = searchTerm.trim().toLowerCase();
-    return term === ''
-      ? cities
-      : cities.filter(
-          (city) =>
-            city.city.toLowerCase().indexOf(term) !== -1 ||
-            city.state.toLowerCase().indexOf(term) !== -1
-        );
-  }, [searchTerm]);
-}
-
-function UncontrolledClientSideExample({ initialValue = '' }) {
-  const [term, setTerm] = useState(initialValue);
-  const [selected, setSelected] = useState(initialValue);
-  const results = useCityMatch(term);
-
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    setTerm(event.target.value);
-  };
-
-  const handleSelect = (value: string) => {
-    setSelected(value);
-  };
-
-  return (
-    <div>
-      <h2>Clientside Search</h2>
-      <p>Selection: {selected}</p>
-      <p>Term: {term}</p>
-      <Combobox onSelect={handleSelect} selectOnBlur>
-        <Box position="relative">
-          <ComboboxInput
-            onChange={handleChange}
-            defaultValue={initialValue}
-            label="Enter a city name"
-          />
-          <Box
-            height={56}
-            width={56}
-            position="absolute"
-            justifyContent="center"
-            alignItems="center"
-            display="flex"
-            top={0}
-            right={0}
-            bottom={0}
-          >
-            <ComboboxButton />
-          </Box>
-        </Box>
-        {results.length > 0 && (
-          <ComboboxPopover>
-            <ComboboxList persistSelection={true}>
-              {results.slice(0, 10).map((result, index) => (
-                <ComboboxOption
-                  key={`${result.city}, ${result.state}, ${index}`}
-                  id={`${result.city}, ${result.state}, ${index}`}
-                  text={`${result.city}, ${result.state}`}
-                  value={result}
-                />
-              ))}
-            </ComboboxList>
-          </ComboboxPopover>
-        )}
-      </Combobox>
-    </div>
-  );
-}
-
-function ControlledClientSideExample({ initialValue = '' }) {
-  const [term, setTerm] = useState(initialValue);
-  const [selected, setSelected] = useState(initialValue);
-  const results = useCityMatch(term);
-
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    setTerm(event.target.value);
-    setSelected('');
-  };
-
-  const handleSelect = (value: string) => {
-    setSelected(value);
-  };
-
-  return (
-    <div>
-      <h2>Clientside Search</h2>
-      <p>Selection: {selected}</p>
-      <p>Term: {term}</p>
-      <Combobox onSelect={handleSelect} selectOnBlur>
-        <Box position="relative">
-          <ComboboxInput
-            onChange={handleChange}
-            value={selected || term}
-            label="Enter a city name"
-          />
-          <Box
-            height={56}
-            width={56}
-            position="absolute"
-            justifyContent="center"
-            alignItems="center"
-            display="flex"
-            top={0}
-            right={0}
-            bottom={0}
-          >
-            <ComboboxButton />
-          </Box>
-        </Box>
-        {results.length > 0 && (
-          <ComboboxPopover>
-            <ComboboxList persistSelection={true}>
-              {results.slice(0, 10).map((result, index) => (
-                <ComboboxOption
-                  key={`${result.city}, ${result.state}, ${index}`}
-                  id={`${result.city}, ${result.state}, ${index}`}
-                  text={`${result.city}, ${result.state}`}
-                  value={result}
-                />
-              ))}
-            </ComboboxList>
-          </ComboboxPopover>
-        )}
-      </Combobox>
-    </div>
-  );
-}
-
-export const UncontrolledClientSide = () => <UncontrolledClientSideExample />;
-export const UncontrolledClientSideInitial = () => (
-  <UncontrolledClientSideExample initialValue="Aberdeen" />
-);
-
-export const ControlledClientSide = () => <ControlledClientSideExample />;
-export const ControlledClientSideInitial = () => (
-  <ControlledClientSideExample initialValue="Aberdeen" />
-);
+import type { ChangeEvent } from 'react';
+import { useMemo, useState } from 'react';
+
+import {
+  Combobox,
+  ComboboxOption,
+  ComboboxList,
+  ComboboxPopover,
+  ComboboxInput,
+  ComboboxButton,
+} from './Combobox';
+import { Box } from '../Box';
+import cities from '../../../core/src/ComboBox/cities';
+
+export default {
+  title: 'components/Combobox',
+};
+
+function useCityMatch(searchTerm: string) {
+  return useMemo(() => {
+    const term = searchTerm.trim().toLowerCase();
+    return term === ''
+      ? cities
+      : cities.filter(
+          (city) =>
+            city.city.toLowerCase().indexOf(term) !== -1 ||
+            city.state.toLowerCase().indexOf(term) !== -1
+        );
+  }, [searchTerm]);
+}
+
+function UncontrolledClientSideExample({ initialValue = '' }) {
+  const [term, setTerm] = useState(initialValue);
+  const [selected, setSelected] = useState(initialValue);
+  const results = useCityMatch(term);
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setTerm(event.target.value);
+  };
+
+  const handleSelect = (value: string) => {
+    setSelected(value);
+  };
+
+  return (
+    <div>
+      <h2>Clientside Search</h2>
+      <p>Selection: {selected}</p>
+      <p>Term: {term}</p>
+      <Combobox onSelect={handleSelect} selectOnBlur>
+        <Box position="relative">
+          <ComboboxInput
+            onChange={handleChange}
+            defaultValue={initialValue}
+            label="Enter a city name"
+          />
+          <Box
+            height={56}
+            width={56}
+            position="absolute"
+            justifyContent="center"
+            alignItems="center"
+            display="flex"
+            top={0}
+            right={0}
+            bottom={0}
+          >
+            <ComboboxButton />
+          </Box>
+        </Box>
+        {results.length > 0 && (
+          <ComboboxPopover>
+            <ComboboxList persistSelection={true}>
+              {results.slice(0, 10).map((result, index) => (
+                <ComboboxOption
+                  key={`${result.city}, ${result.state}, ${index}`}
+                  id={`${result.city}, ${result.state}, ${index}`}
+                  text={`${result.city}, ${result.state}`}
+                  value={result}
+                />
+              ))}
+            </ComboboxList>
+          </ComboboxPopover>
+        )}
+      </Combobox>
+    </div>
+  );
+}
+
+function ControlledClientSideExample({ initialValue = '' }) {
+  const [term, setTerm] = useState(initialValue);
+  const [selected, setSelected] = useState(initialValue);
+  const results = useCityMatch(term);
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setTerm(event.target.value);
+    setSelected('');
+  };
+
+  const handleSelect = (value: string) => {
+    setSelected(value);
+  };
+
+  return (
+    <div>
+      <h2>Clientside Search</h2>
+      <p>Selection: {selected}</p>
+      <p>Term: {term}</p>
+      <Combobox onSelect={handleSelect} selectOnBlur>
+        <Box position="relative">
+          <ComboboxInput
+            onChange={handleChange}
+            value={selected || term}
+            label="Enter a city name"
+          />
+          <Box
+            height={56}
+            width={56}
+            position="absolute"
+            justifyContent="center"
+            alignItems="center"
+            display="flex"
+            top={0}
+            right={0}
+            bottom={0}
+          >
+            <ComboboxButton />
+          </Box>
+        </Box>
+        {results.length > 0 && (
+          <ComboboxPopover>
+            <ComboboxList persistSelection={true}>
+              {results.slice(0, 10).map((result, index) => (
+                <ComboboxOption
+                  key={`${result.city}, ${result.state}, ${index}`}
+                  id={`${result.city}, ${result.state}, ${index}`}
+                  text={`${result.city}, ${result.state}`}
+                  value={result}
+                />
+              ))}
+            </ComboboxList>
+          </ComboboxPopover>
+        )}
+      </Combobox>
+    </div>
+  );
+}
+
+export const UncontrolledClientSide = () => <UncontrolledClientSideExample />;
+export const UncontrolledClientSideInitial = () => (
+  <UncontrolledClientSideExample initialValue="Aberdeen" />
+);
+
+export const ControlledClientSide = () => <ControlledClientSideExample />;
+export const ControlledClientSideInitial = () => (
+  <ControlledClientSideExample initialValue="Aberdeen" />
+);

package/src/SearchBar/SearchBar.story.tsx

@@ -0,0 +1,98 @@
+import { useState } from 'react';
+
+import { Box } from '../Box';
+import { CheckBox } from '../CheckBox';
+import { Select, SelectItem } from '..';
+import { SearchBar } from './SearchBar';
+
+export default {
+  title: 'components/SearchBar',
+};
+
+const SearchIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height={20}
+    width={20}
+    viewBox="0 0 48 48"
+    fill="currentColor"
+  >
+    <path d="M39.8 41.95 26.65 28.8q-1.5 1.3-3.5 2.025-2 .725-4.25.725-5.4 0-9.15-3.75T6 18.75q0-5.3 3.75-9.05 3.75-3.75 9.1-3.75 5.3 0 9.025 3.75 3.725 3.75 3.725 9.05 0 2.15-.7 4.15-.7 2-2.1 3.75L42 39.75Zm-20.95-13.4q4.05 0 6.9-2.875Q28.6 22.8 28.6 18.75t-2.85-6.925Q22.9 8.95 18.85 8.95q-4.1 0-6.975 2.875T9 18.75q0 4.05 2.875 6.925t6.975 2.875Z" />
+  </svg>
+);
+
+const Example = () => {
+  const [error, setError] = useState<boolean | string>(false);
+  const [color, setColor] = useState<'primary' | 'secondary'>('primary');
+
+  return (
+    <Box p={3} display="flex" alignItems="center" flexDirection="column">
+      <Box>
+        <CheckBox
+          checked={Boolean(error)}
+          onChange={(e) =>
+            setError(e.target.checked ? 'This field is required' : false)
+          }
+        >
+          Has Error
+        </CheckBox>
+        <Box width={230} display="inline-block">
+          <Select
+            value={color}
+            onChange={(e, value: 'primary' | 'secondary') => setColor(value)}
+            label="Color"
+          >
+            <SelectItem value="primary">Primary</SelectItem>
+            <SelectItem value="secondary">Secondary</SelectItem>
+          </Select>
+        </Box>
+      </Box>
+      <Box
+        py={3}
+        backgroundColor="surface"
+        display="inline-flex"
+        flexWrap="wrap"
+        flexDirection="column"
+      >
+        <Box m={2} width={230} display="inline-block">
+          <SearchBar error={error} color={color} />
+        </Box>
+        <Box m={2} width={230} display="inline-block">
+          <SearchBar error={error} color={color} leadingIcon={<SearchIcon />} />
+        </Box>
+        <Box m={2} width={230} display="inline-block">
+          <SearchBar
+            error={error}
+            color={color}
+            trailingIcon={<SearchIcon />}
+          />
+        </Box>
+        <Box m={2} width={230} display="inline-block">
+          <SearchBar
+            error={error}
+            color={color}
+            placeholder="Search your messages..."
+          />
+        </Box>
+        <Box m={2} width={230} display="inline-block">
+          <SearchBar
+            error={error}
+            color={color}
+            placeholder="Search your messages..."
+            leadingIcon={<SearchIcon />}
+          />
+        </Box>
+        <Box m={2} width={230} display="inline-block">
+          <SearchBar
+            error={error}
+            color={color}
+            placeholder="Search your messages..."
+            trailingIcon={<SearchIcon />}
+          />
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export const Default = () => <Example />;

package/src/SearchBar/SearchBar.tsx

@@ -0,0 +1,105 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+import { forwardRef, useId } from 'react';
+import { useControlledState } from '@basic-ui/core';
+import { rem } from 'polished';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import { Input } from '../TextField/Input';
+import { IconContainer } from '../TextField/IconContainer';
+import { EASING_STANDARD } from '../motion';
+
+interface InputProps
+  extends BoxProps<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>> {
+  as?: 'input';
+}
+
+export type SearchBarProps = InputProps & {
+  containerProps?: Omit<BoxProps, 'color'>;
+  defaultValue?: string;
+  value?: string;
+  error?: boolean | string;
+  leadingIcon?: ReactNode;
+  trailingIcon?: ReactNode;
+};
+
+export const SearchBar = forwardRef<HTMLInputElement, SearchBarProps>(
+  function SearchBar(props, forwardedRef) {
+    const {
+      type = 'text',
+      id: idProp,
+      color = 'primary',
+      value: valueProp,
+      defaultValue = '',
+      error,
+      onChange: onChangeProp,
+      leadingIcon = null,
+      trailingIcon = null,
+      containerProps,
+      variant,
+      __css,
+      ...otherProps
+    } = props;
+    const { __css: __containerCss, ...otherContainerProps } =
+      containerProps || {};
+    const [value, onChange] = useControlledState(
+      valueProp,
+      onChangeProp,
+      defaultValue,
+      (setState) => (e) => {
+        setState(e.target.value);
+      }
+    );
+
+    const fallbackId = useId();
+
+    const hasError = Boolean(error);
+
+    const id = idProp || fallbackId;
+    const inputId = `${id}-search-bar`;
+
+    return (
+      <Box
+        __css={{
+          display: 'inline-flex',
+          position: 'relative',
+          ...__containerCss,
+        }}
+        {...otherContainerProps}
+      >
+        <Input
+          __css={{
+            borderRadius: 'full',
+            backgroundColor: 'surface-container-high',
+            height: rem(56),
+            pl: leadingIcon ? rem(48) : rem(24),
+            pr: trailingIcon ? rem(48) : rem(24),
+            py: 0,
+            transition: `outline-color .2s ${EASING_STANDARD}`,
+            outlineStyle: 'solid',
+            outlineWidth: rem(2),
+            outlineColor: 'transparent',
+            outlineOffset: rem(-1),
+            '&:focus': {
+              outlineColor: hasError ? ('error' as const) : (color as any),
+            },
+            ...__css,
+          }}
+          type={type}
+          ref={forwardedRef}
+          hasLabel={false}
+          id={inputId}
+          value={value}
+          onChange={onChange}
+          {...otherProps}
+        />
+        {leadingIcon && (
+          <IconContainer position="start">{leadingIcon}</IconContainer>
+        )}
+        {trailingIcon && (
+          <IconContainer position="end">{trailingIcon}</IconContainer>
+        )}
+      </Box>
+    );
+  }
+);

package/src/SearchBar/index.ts

@@ -0,0 +1 @@
+export * from './SearchBar';

package/src/TextField/IconContainer.tsx

@@ -1,33 +1,33 @@
-import { rem } from 'polished';
-import type { FC, ReactNode } from 'react';
-
-import { Box } from '../Box';
-import { alpha } from '../color';
-import { ICON_WIDTH, PADDING_LEFT_WITH_ICON } from './consts';
-
-export const IconContainer: FC<{
-  children?: ReactNode;
-  position: 'start' | 'end';
-}> = ({ position, children }) => (
-  <Box
-    position="absolute"
-    __css={{
-      top: 0,
-      [position === 'start' ? 'left' : 'right']: rem(PADDING_LEFT_WITH_ICON),
-      minWidth: rem(ICON_WIDTH),
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      height: '100%',
-      pointerEvents: 'none',
-      color: alpha('on.surface', 0.54),
-      zIndex: 1,
-      fontFamily: 'body',
-      lineHeight: 'body',
-      fontWeight: 'regular',
-      fontSize: 3,
-    }}
-  >
-    {children}
-  </Box>
-);
+import { rem } from 'polished';
+import type { FC, ReactNode } from 'react';
+
+import { Box } from '../Box';
+import { alpha } from '../color';
+import { ICON_WIDTH, PADDING_LEFT_WITH_ICON } from './consts';
+
+export const IconContainer: FC<{
+  children?: ReactNode;
+  position: 'start' | 'end';
+}> = ({ position, children }) => (
+  <Box
+    position="absolute"
+    __css={{
+      top: 0,
+      [position === 'start' ? 'left' : 'right']: rem(PADDING_LEFT_WITH_ICON),
+      minWidth: rem(ICON_WIDTH),
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: '100%',
+      pointerEvents: 'none',
+      color: alpha('on.surface', 0.54),
+      zIndex: 1,
+      fontFamily: 'body',
+      lineHeight: 'body',
+      fontWeight: 'regular',
+      fontSize: 3,
+    }}
+  >
+    {children}
+  </Box>
+);