diff --git a/docs/docs/components/nativeSelect.mdx b/docs/docs/components/nativeSelect.mdx new file mode 100644 index 0000000..0eb3e12 --- /dev/null +++ b/docs/docs/components/nativeSelect.mdx @@ -0,0 +1,155 @@ +# Native Select + +### Quick start + +Here's a quick start guide to get started with the nativeSelect component + +### Importing Component + +import "@hover-design/react/dist/style.css"; +import { NativeSelect } from "@hover-design/react"; +import { useState } from "react"; + +```jsx +import { NativeSelect } from "@hover-design/react"; +``` + +### Code Snippets and Examples + +##### NativeSelect Default + +```jsx +const options = [ + { label: "First", value: "first" }, + { label: "Second", value: "second", disabled: true }, + { label: "Third", value: "third" }, + { label: "Fourth", value: "fourth" }, +]; + +
+ +
; +``` + + + +##### NativeSelect Controlled + +```jsx +const [value, setValue] = useState("first"); + +const options = [ + { label: "First", value: "first" }, + { label: "Second", value: "second" }, + { label: "Third", value: "third" }, + { label: "Fourth", value: "fourth" }, +]; + +
+ { + setValue(event.target.value); + }} + options={options} + /> +
; +``` + +export const App = () => { + const [value, setValue] = useState("first"); + const options = [ + { label: "First", value: "first" }, + { label: "Second", value: "second" }, + { label: "Third", value: "third" }, + { label: "Fourth", value: "fourth" }, + ]; + return ( + { + setValue(event.target.value); + }} + options={options} + /> + ); +}; + + + +##### NativeSelect Error + +```jsx +const options = [ + { label: "First", value: "first" }, + { label: "Second", value: "second" }, + { label: "Third", value: "third" }, + { label: "Fourth", value: "fourth" }, +]; + +
+ +
; +``` + +> Note: **error** can also be passed as a boolean. + + + +##### NativeSelect Rounded + +```jsx +const options = [ + { label: "First", value: "first" }, + { label: "Second", value: "second" }, + { label: "Third", value: "third" }, + { label: "Fourth", value: "fourth" }, +]; + +
+ +
; +``` + +> Note: **error** can also be passed as a boolean. + + + +### Props Reference + +| Attributes | Values | Default Value | Optional ? | +| :----------- | :------------------------------------------------------------------: | :-----------: | ---------: | +| options | ` Array of`
{ label:string ,
value:string | number } | | No | +| height | `string` | `fit-content` | Yes | +| width | `string` | `fit-content` | Yes | +| borderRadius | `string` | `0` | Yes | +| error | `string` | `boolean` | false | Yes | + +> NativeSelect extends the props of **select tag** https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select diff --git a/lib/src/components/NativeSelect/NativeSelect.tsx b/lib/src/components/NativeSelect/NativeSelect.tsx new file mode 100644 index 0000000..17810ab --- /dev/null +++ b/lib/src/components/NativeSelect/NativeSelect.tsx @@ -0,0 +1,63 @@ +import { assignInlineVars } from "@vanilla-extract/dynamic"; +import { FC, useEffect } from "react"; +import { Flex } from "../Flex"; +import { ArrowDown } from "../_internal/Icons/ArrowDown"; +import { + nativeSelectContainerStyles, + nativeSelectErrorMsg, + nativeSelectIconStyle, + nativeSelectRecipe, + nativeSelectVars, +} from "./nativeSelect.css"; +import { NativeSelectPropsType } from "./nativeSelect.types"; + +export const NativeSelect: FC = ({ + height = "fit-content", + width = "fit-content", + borderRadius = "0", + options, + error = false, + className, + style = {}, + multiple, + ...nativeProps +}) => { + const nativeSelectClass = nativeSelectRecipe({ + error: error ? true : false, + isMulti: multiple ? true : false, + }); + + return ( + +
+ + {!multiple && ( + + + + )} +
+ {error && typeof error !== "boolean" && ( + {error} + )} + + ); +}; diff --git a/lib/src/components/NativeSelect/index.ts b/lib/src/components/NativeSelect/index.ts new file mode 100644 index 0000000..d6a8d2a --- /dev/null +++ b/lib/src/components/NativeSelect/index.ts @@ -0,0 +1,2 @@ +export * from "./NativeSelect"; +export * from "./nativeSelect.css"; diff --git a/lib/src/components/NativeSelect/nativeSelect.css.ts b/lib/src/components/NativeSelect/nativeSelect.css.ts new file mode 100644 index 0000000..c5e136d --- /dev/null +++ b/lib/src/components/NativeSelect/nativeSelect.css.ts @@ -0,0 +1,53 @@ +import { createTheme, style } from "@vanilla-extract/css"; +import { recipe } from "@vanilla-extract/recipes"; +import { NativeSelectThemeType } from "./nativeSelect.types"; + +export const [nativeSelectThemeClass, nativeSelectVars]: NativeSelectThemeType = + createTheme({ + height: "fit-content", + borderRadius: "0", + width: "fit-content", + }); + +export const nativeSelectRecipe = recipe({ + base: { + appearance: "none", + height: "100%", + padding: "8px 32px 8px 16px", + width: "100%", + borderRadius: nativeSelectVars.borderRadius, + }, + variants: { + error: { + true: { + border: "1px solid #DA2C2C", + color: "#DA2C2C", + }, + }, + isMulti: { + true: { + padding: "8px 16px", + }, + }, + }, +}); + +export const nativeSelectContainerStyles = style({ + height: nativeSelectVars.height, + width: nativeSelectVars.width, + position: "relative", +}); + +export const nativeSelectIconStyle = style({ + pointerEvents: "none", + position: "absolute", + height: "100%", + top: 0, + right: "10px", +}); + +export const nativeSelectErrorMsg = style({ + fontSize: "12px", + color: "#DA2C2C", + margin: "4px 0", +}); diff --git a/lib/src/components/NativeSelect/nativeSelect.types.ts b/lib/src/components/NativeSelect/nativeSelect.types.ts new file mode 100644 index 0000000..79c3c37 --- /dev/null +++ b/lib/src/components/NativeSelect/nativeSelect.types.ts @@ -0,0 +1,22 @@ +export type NativeSelectPropsType = JSX.IntrinsicElements["select"] & { + height?: string; + width?: string; + borderRadius?: string; + options: OptionsType[]; + error?: boolean | string; +}; + +export type OptionsType = { + label: string; + value: string | number; + disabled?: boolean | undefined; +}; + +export type NativeSelectThemeType = [ + string, + { + height: string; + width: string; + borderRadius: string; + } +]; diff --git a/lib/src/index.ts b/lib/src/index.ts index b1f739e..ae2edbe 100644 --- a/lib/src/index.ts +++ b/lib/src/index.ts @@ -18,3 +18,4 @@ export * from "./components/Modal"; export * from "./components/Table"; export * from "./components/Dialog"; export * from "./components/Select"; +export * from "./components/NativeSelect";