add NativeSelect

.vscode/settings.json

@@ -10,6 +10,7 @@
     "buildin",
     "clsx",
     "dashify",
+    "devicons",
     "docgen",
     "flowtype",
     "focusring",

docsComponents/CodeBlock/scope.ts

@@ -1,3 +1,4 @@
+import { code } from 'icon-packs/devicons';
 import {
   alignCenterSolid,
   alignLeftSolid,
@@ -58,6 +59,7 @@ export const scope = {
   check,
   checkCircle,
   circleSolid,
+  code,
   fileRegular,
   helpCircle,
   italicSolid,

pages/docs/components/Form/NativeSelect.mdx

@@ -0,0 +1,214 @@
+import { Description, Meta, Props } from 'docsComponents';
+
+<Meta title="NativeSelect" />
+
+# NativeSelect
+
+<Description of="NativeSelect" />
+
+## Props
+
+<Props of="NativeSelect" />
+
+## Examples
+
+### Basic
+
+A basic usage of NativeSelect.
+
+```js live withRender
+const options = [
+  { value: 'JavaScript' },
+  { value: 'Java' },
+  { value: 'PHP' },
+  { value: 'Perl' },
+  { value: 'C' },
+  { value: 'Lua' },
+  { value: 'C++' },
+  { value: 'Rust' }
+];
+
+render(
+  <NativeSelect options={options} placeholder="Select something...">
+    Children are placed under the select.
+  </NativeSelect>
+);
+```
+
+### Controlled
+
+A controlled select.
+
+```js live withRender
+const options = [
+  { value: 'js', text: 'JavaScript' },
+  { value: 'java', text: 'Java' },
+  { value: 'php', text: 'PHP' },
+  { value: 'pl', text: 'Perl' },
+  { value: 'c', text: 'C' },
+  { value: 'lua', text: 'Lua' },
+  { value: 'cpp', text: 'C++' },
+  { value: 'rs', text: 'Rust' }
+];
+
+const Controlled = (props) => {
+  const [value, setValue] = useState('cpp');
+  return (
+    <NativeSelect
+      {...props}
+      value={value}
+      onChange={(ev) => setValue(ev.target.value)}
+    >
+      Value: <i>{value}</i>
+    </NativeSelect>
+  );
+};
+
+render(<Controlled options={options} placeholder="Select something..." />);
+```
+
+### Disabled
+
+Selects can be disabled.
+
+```js live withRender
+const options = [
+  { value: 'JavaScript' },
+  { value: 'Java' },
+  { value: 'PHP' },
+  { value: 'Perl' },
+  { value: 'C' },
+  { value: 'Lua' },
+  { value: 'C++' },
+  { value: 'Rust' }
+];
+
+render(<NativeSelect disabled options={options} placeholder="Disabled" />);
+```
+
+### Loading
+
+Select can have a loading state.
+
+```js live withRender
+const options = [
+  { value: 'JavaScript' },
+  { value: 'Java' },
+  { value: 'PHP' },
+  { value: 'Perl' },
+  { value: 'C' },
+  { value: 'Lua' },
+  { value: 'C++' },
+  { value: 'Rust' }
+];
+
+render(
+  <NativeSelect loading options={options} placeholder="Select something..." />
+);
+```
+
+### Icon
+
+Select can have an icon.
+
+```js live withRender
+// import { code } from 'icon-packs/devicons';
+
+const options = [
+  { value: 'JavaScript' },
+  { value: 'Java' },
+  { value: 'PHP' },
+  { value: 'Perl' },
+  { value: 'C' },
+  { value: 'Lua' },
+  { value: 'C++' },
+  { value: 'Rust' }
+];
+
+render(
+  <NativeSelect
+    icon={code}
+    options={options}
+    placeholder="Select something..."
+  />
+);
+```
+
+### Size
+
+Selects can have different sizes.
+
+```js live withRender
+// import { code } from 'icon-packs/devicons';
+
+const options = [
+  { value: 'JavaScript' },
+  { value: 'Java' },
+  { value: 'PHP' },
+  { value: 'Perl' },
+  { value: 'C' },
+  { value: 'Lua' },
+  { value: 'C++' },
+  { value: 'Rust' }
+];
+
+render(
+  <Row gutter={1}>
+    <Col span={12}>
+      <NativeSelect icon={code} options={options} size="sm" placeholder="sm" />
+    </Col>
+    <Col span={12}>
+      <NativeSelect options={options} size="sm" placeholder="sm" />
+    </Col>
+    <Col span={12}>
+      <NativeSelect icon={code} options={options} size="md" placeholder="md" />
+    </Col>
+    <Col span={12}>
+      <NativeSelect options={options} size="md" placeholder="md" />
+    </Col>
+    <Col span={12}>
+      <NativeSelect icon={code} options={options} size="lg" placeholder="lg" />
+    </Col>
+    <Col span={12}>
+      <NativeSelect options={options} size="lg" placeholder="lg" />
+    </Col>
+  </Row>
+);
+```
+
+### Error
+
+A Select can indicate it has an error.
+
+```js live withRender
+// import { x } from 'icon-packs/feather';
+
+const options = [
+  { value: 'JavaScript' },
+  { value: 'Java' },
+  { value: 'PHP' },
+  { value: 'Perl' },
+  { value: 'C' },
+  { value: 'Lua' },
+  { value: 'C++' },
+  { value: 'Rust' }
+];
+
+render(
+  <Row gutter={1}>
+    <Col span={12}>
+      <NativeSelect
+        hasError
+        icon={x}
+        options={options}
+        placeholder="error..."
+      />
+    </Col>
+    <Col span={12}>
+      <NativeSelect hasError options={options} placeholder="error...">
+        Text indicating error
+      </NativeSelect>
+    </Col>
+  </Row>
+);
+```

pages/docs/nav.json

@@ -25,6 +25,7 @@
           "Form": "/docs/components/Form/Form",
           "CheckBox": "/docs/components/Form/CheckBox",
           "FormField": "/docs/components/Form/FormField",
+          "NativeSelect": "/docs/components/Form/NativeSelect",
           "PasswordInput": "/docs/components/Form/PasswordInput",
           "TextArea": "/docs/components/Form/TextArea",
           "TextInput": "/docs/components/Form/TextInput",

src/common/defaultIcons.ts

@@ -3,8 +3,8 @@ import { MaevenIcon } from '../types';
 /**
  * Default Icons used for components.
  *
- * check, minus, passwordShow, passwordHide icons
- * are licensed under the MIT License by Feather
+ * check, chevronDown, minus, passwordShow, passwordHide
+ * icons are licensed under the MIT License by Feather
  * Icons: https://feathericons.com
  */
 
@@ -31,6 +31,29 @@ export const check: MaevenIcon = {
   ]
 };
 
+export const chevronDown: MaevenIcon = {
+  tag: 'svg',
+  attrs: {
+    xmlns: 'http://www.w3.org/2000/svg',
+    width: 24,
+    height: 24,
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    stroke: 'currentColor',
+    strokeWidth: 2,
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round'
+  },
+  children: [
+    {
+      tag: 'polyline',
+      attrs: {
+        points: '6 9 12 15 18 9'
+      }
+    }
+  ]
+};
+
 export const minus: MaevenIcon = {
   tag: 'svg',
   attrs: {