@basic-ui/material 1.0.0-alpha.45 → 1.0.0-alpha.47

package/src/Select/Select.story.tsx

@@ -1,225 +1,225 @@
-import { useState } from 'react';
-
-import type { SelectProps } from './';
-import { Select } from './';
-import { SelectItem } from '../SelectItem';
-import { Box } from '../Box';
-import { CheckBox } from '../CheckBox';
-import { CustomContainer as CustomContainerExample } from './CustomContainerExample';
-// import './styles.css';
-
-export default {
-  title: 'components/Select',
-};
-
-const SearchIcon = (props: any) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    height={24}
-    width={24}
-    viewBox="0 0 48 48"
-    fill="currentColor"
-    {...props}
-  >
-    <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>
-);
-
-type OptionType =
-  | ''
-  | '10'
-  | '20'
-  | '30'
-  | '40'
-  | '50'
-  | '60'
-  | '70'
-  | '80'
-  | '90'
-  | '100'
-  | '110'
-  | '120'
-  | '130';
-
-const Example = ({
-  variant,
-  native = false,
-  CustomContainer: Container = undefined,
-}: {
-  variant?: 'outlined' | 'filled';
-  native?: boolean;
-  CustomContainer?: SelectProps<OptionType>['CustomContainer'];
-}) => {
-  const [error, setError] = useState<boolean | string>(false);
-  const [color, setColor] = useState<'primary' | 'secondary'>('primary');
-
-  /* eslint-disable react/no-children-prop */
-  const children = [
-    <SelectItem<OptionType> key={0} aria-label="None" value=""></SelectItem>,
-    <SelectItem<OptionType> key={1} value={'10'}>
-      Ten
-    </SelectItem>,
-    <SelectItem<OptionType> key={2} value={'20'}>
-      Twenty
-    </SelectItem>,
-    <SelectItem<OptionType> key={3} value={'30'}>
-      Thirty
-    </SelectItem>,
-    <SelectItem<OptionType> key={4} value={'40'}>
-      Fourty
-    </SelectItem>,
-    <SelectItem<OptionType> key={5} value={'50'}>
-      Fifty
-    </SelectItem>,
-    <SelectItem<OptionType> key={6} value={'60'}>
-      Sixty
-    </SelectItem>,
-    <SelectItem<OptionType> key={7} value={'70'}>
-      Seventy
-    </SelectItem>,
-    <SelectItem<OptionType> key={8} value={'80'}>
-      Eighty
-    </SelectItem>,
-    <SelectItem<OptionType> key={9} value={'90'}>
-      Ninety
-    </SelectItem>,
-    <SelectItem<OptionType> key={10} value={'100'}>
-      One Hundred
-    </SelectItem>,
-    <SelectItem<OptionType> key={11} value={'110'}>
-      One Hundred Ten
-    </SelectItem>,
-    <SelectItem<OptionType> key={12} value={'120'}>
-      One Hundred Twenty
-    </SelectItem>,
-    <SelectItem<OptionType> key={13} value={'130'}>
-      One Hundred Thirty
-    </SelectItem>,
-  ];
-
-  return (
-    <Box p={3}>
-      <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<'primary' | 'secondary'>
-          value={color}
-          onChange={(e, value) => setColor(value)}
-          label="Color"
-          CustomContainer={Container}
-        >
-          <SelectItem<'primary' | 'secondary'> value="primary">
-            Primary
-          </SelectItem>
-          <SelectItem<'primary' | 'secondary'> value="secondary">
-            Secondary
-          </SelectItem>
-        </Select>
-      </Box>
-      <Box m={3} bg="surface">
-        <Box mb={3} width={230}>
-          <Select<OptionType>
-            error={error}
-            color={color}
-            native={native}
-            variant={variant}
-            label="Standard"
-            helperText="Helper text"
-            children={children}
-            placeholder="Empty"
-            CustomContainer={Container}
-          />
-        </Box>
-        <Box mb={3} width={230}>
-          <Select<OptionType>
-            error={error}
-            color={color}
-            native={native}
-            variant={variant}
-            label="Standard"
-            defaultValue="20"
-            helperText="Helper text"
-            children={children}
-            CustomContainer={Container}
-          />
-        </Box>
-        <Box mb={3} width={230}>
-          <Select<OptionType>
-            error={error}
-            color={color}
-            native={native}
-            variant={variant}
-            label="Standard"
-            children={children}
-            CustomContainer={Container}
-          />
-        </Box>
-        <Box mb={3} width={230}>
-          <Select<OptionType>
-            error={error}
-            color={color}
-            native={native}
-            variant={variant}
-            label="Disabled"
-            helperText="Helper text"
-            disabled
-            children={children}
-            CustomContainer={Container}
-          />
-        </Box>
-        <Box mb={3} width={230}>
-          <Select<OptionType>
-            error={error}
-            color={color}
-            native={native}
-            variant={variant}
-            label=""
-            helperText="Helper text"
-            children={children}
-            CustomContainer={Container}
-          />
-        </Box>
-        <Box mb={3} width={230}>
-          <Select<OptionType>
-            error={error}
-            color={color}
-            native={native}
-            variant={variant}
-            label=""
-            helperText="Helper text"
-            children={children}
-            leadingIcon={<SearchIcon />}
-            CustomContainer={Container}
-          />
-        </Box>
-        <Box mb={3} width={230}>
-          <Select<OptionType>
-            error={error}
-            color={color}
-            native={native}
-            variant={variant}
-            label="Standard"
-            helperText="Helper text"
-            children={children}
-            leadingIcon={<SearchIcon />}
-            CustomContainer={Container}
-          />
-        </Box>
-      </Box>
-    </Box>
-  );
-};
-
-export const Filled = () => <Example variant="filled" />;
-export const CustomContainer = () => (
-  <Example CustomContainer={CustomContainerExample} />
-);
-export const Outlined = () => <Example variant="outlined" />;
-export const FilledNative = () => <Example variant="filled" native />;
-export const OutlinedNative = () => <Example variant="outlined" native />;
+import { useState } from 'react';
+
+import type { SelectProps } from './';
+import { Select } from './';
+import { SelectItem } from '../SelectItem';
+import { Box } from '../Box';
+import { CheckBox } from '../CheckBox';
+import { CustomContainer as CustomContainerExample } from './CustomContainerExample';
+// import './styles.css';
+
+export default {
+  title: 'components/Select',
+};
+
+const SearchIcon = (props: any) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height={24}
+    width={24}
+    viewBox="0 0 48 48"
+    fill="currentColor"
+    {...props}
+  >
+    <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>
+);
+
+type OptionType =
+  | ''
+  | '10'
+  | '20'
+  | '30'
+  | '40'
+  | '50'
+  | '60'
+  | '70'
+  | '80'
+  | '90'
+  | '100'
+  | '110'
+  | '120'
+  | '130';
+
+const Example = ({
+  variant,
+  native = false,
+  CustomContainer: Container = undefined,
+}: {
+  variant?: 'outlined' | 'filled';
+  native?: boolean;
+  CustomContainer?: SelectProps<OptionType>['CustomContainer'];
+}) => {
+  const [error, setError] = useState<boolean | string>(false);
+  const [color, setColor] = useState<'primary' | 'secondary'>('primary');
+
+  /* eslint-disable react/no-children-prop */
+  const children = [
+    <SelectItem<OptionType> key={0} aria-label="None" value=""></SelectItem>,
+    <SelectItem<OptionType> key={1} value={'10'}>
+      Ten
+    </SelectItem>,
+    <SelectItem<OptionType> key={2} value={'20'}>
+      Twenty
+    </SelectItem>,
+    <SelectItem<OptionType> key={3} value={'30'}>
+      Thirty
+    </SelectItem>,
+    <SelectItem<OptionType> key={4} value={'40'}>
+      Fourty
+    </SelectItem>,
+    <SelectItem<OptionType> key={5} value={'50'}>
+      Fifty
+    </SelectItem>,
+    <SelectItem<OptionType> key={6} value={'60'}>
+      Sixty
+    </SelectItem>,
+    <SelectItem<OptionType> key={7} value={'70'}>
+      Seventy
+    </SelectItem>,
+    <SelectItem<OptionType> key={8} value={'80'}>
+      Eighty
+    </SelectItem>,
+    <SelectItem<OptionType> key={9} value={'90'}>
+      Ninety
+    </SelectItem>,
+    <SelectItem<OptionType> key={10} value={'100'}>
+      One Hundred
+    </SelectItem>,
+    <SelectItem<OptionType> key={11} value={'110'}>
+      One Hundred Ten
+    </SelectItem>,
+    <SelectItem<OptionType> key={12} value={'120'}>
+      One Hundred Twenty
+    </SelectItem>,
+    <SelectItem<OptionType> key={13} value={'130'}>
+      One Hundred Thirty
+    </SelectItem>,
+  ];
+
+  return (
+    <Box p={3}>
+      <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<'primary' | 'secondary'>
+          value={color}
+          onChange={(e, value) => setColor(value)}
+          label="Color"
+          CustomContainer={Container}
+        >
+          <SelectItem<'primary' | 'secondary'> value="primary">
+            Primary
+          </SelectItem>
+          <SelectItem<'primary' | 'secondary'> value="secondary">
+            Secondary
+          </SelectItem>
+        </Select>
+      </Box>
+      <Box m={3} bg="surface">
+        <Box mb={3} width={230}>
+          <Select<OptionType>
+            error={error}
+            color={color}
+            native={native}
+            variant={variant}
+            label="Standard"
+            helperText="Helper text"
+            children={children}
+            placeholder="Empty"
+            CustomContainer={Container}
+          />
+        </Box>
+        <Box mb={3} width={230}>
+          <Select<OptionType>
+            error={error}
+            color={color}
+            native={native}
+            variant={variant}
+            label="Standard"
+            defaultValue="20"
+            helperText="Helper text"
+            children={children}
+            CustomContainer={Container}
+          />
+        </Box>
+        <Box mb={3} width={230}>
+          <Select<OptionType>
+            error={error}
+            color={color}
+            native={native}
+            variant={variant}
+            label="Standard"
+            children={children}
+            CustomContainer={Container}
+          />
+        </Box>
+        <Box mb={3} width={230}>
+          <Select<OptionType>
+            error={error}
+            color={color}
+            native={native}
+            variant={variant}
+            label="Disabled"
+            helperText="Helper text"
+            disabled
+            children={children}
+            CustomContainer={Container}
+          />
+        </Box>
+        <Box mb={3} width={230}>
+          <Select<OptionType>
+            error={error}
+            color={color}
+            native={native}
+            variant={variant}
+            label=""
+            helperText="Helper text"
+            children={children}
+            CustomContainer={Container}
+          />
+        </Box>
+        <Box mb={3} width={230}>
+          <Select<OptionType>
+            error={error}
+            color={color}
+            native={native}
+            variant={variant}
+            label=""
+            helperText="Helper text"
+            children={children}
+            leadingIcon={<SearchIcon />}
+            CustomContainer={Container}
+          />
+        </Box>
+        <Box mb={3} width={230}>
+          <Select<OptionType>
+            error={error}
+            color={color}
+            native={native}
+            variant={variant}
+            label="Standard"
+            helperText="Helper text"
+            children={children}
+            leadingIcon={<SearchIcon />}
+            CustomContainer={Container}
+          />
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export const Filled = () => <Example variant="filled" />;
+export const CustomContainer = () => (
+  <Example CustomContainer={CustomContainerExample} />
+);
+export const Outlined = () => <Example variant="outlined" />;
+export const FilledNative = () => <Example variant="filled" native />;
+export const OutlinedNative = () => <Example variant="outlined" native />;