feat(select): migrate selects

blocks/select-border/SelectBorder.stories.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import googleFont from "../../.storybook/decorators/googleFont";
+import storyDialog from "../../.storybook/decorators/storyDialog";
+import { SelectBorder } from "./index";
+import Usage from "./usage.mdx";
+
+const meta = {
+  title: "Select/Border",
+  component: SelectBorder,
+  parameters: {
+    layout: "centered",
+    githubUsername: "pacurtin", // (optional) Your github username. If provided, your avatar will be displayed in the story toolbar
+  },
+  decorators: [storyDialog(Usage), googleFont([])],
+} satisfies Meta<typeof SelectBorder>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Border: Story = {
+  render: () => <SelectBorder />,
+};

blocks/select-border/SelectBorder.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import FormControl from "@mui/material/FormControl";
+import InputLabel from "@mui/material/InputLabel";
+import MenuItem from "@mui/material/MenuItem";
+import { outlinedInputClasses } from "@mui/material/OutlinedInput";
+import Select, { selectClasses } from "@mui/material/Select";
+
+export function SelectBorder() {
+  const [val, setVal] = React.useState(1);
+
+  return (
+    <FormControl>
+      <InputLabel
+        id="inputLabel"
+        sx={{
+          marginLeft: "4px",
+          color: "grey.500",
+          transform: "none",
+          fontSize: "0.875rem",
+          fontWeight: 500,
+          letterSpacing: "1px",
+          "&.Mui-focused": {
+            color: "grey.500", // to overwrite the default behaviour
+          },
+        }}
+      >
+        LABEL
+      </InputLabel>
+      <Select
+        disableUnderline
+        labelId="inputLabel"
+        IconComponent={ExpandMoreIcon}
+        MenuProps={{
+          anchorOrigin: {
+            vertical: "bottom",
+            horizontal: "left",
+          },
+          transformOrigin: {
+            vertical: "top",
+            horizontal: "left",
+          },
+        }}
+        value={val}
+        onChange={(event) => setVal(event.target.value as number)}
+        sx={{
+          mt: 2.5,
+          [`& .${selectClasses.select}`]: {
+            minWidth: "200px",
+            background: "white",
+            color: "grey.700",
+            borderRadius: "4px",
+            paddingLeft: "12px",
+            paddingTop: "14px",
+            paddingBottom: "15px",
+          },
+          [`& .${outlinedInputClasses.notchedOutline}`]: {
+            borderColor: "grey.300",
+            borderStyle: "solid",
+            borderWidth: "2px",
+          },
+          "&:hover": {
+            [`& .${outlinedInputClasses.notchedOutline}`]: {
+              borderColor: "grey.400",
+            },
+          },
+        }}
+      >
+        <MenuItem value={0}>None</MenuItem>
+        <MenuItem value={1}>One</MenuItem>
+        <MenuItem value={2}>Two</MenuItem>
+        <MenuItem value={3}>Three</MenuItem>
+      </Select>
+    </FormControl>
+  );
+}

blocks/select-border/index.ts

@@ -0,0 +1 @@
+export * from "./SelectBorder";

blocks/select-border/usage.mdx

@@ -0,0 +1,14 @@
+import { Meta, Source } from "@storybook/blocks";
+import raw from "./SelectBorder?raw";
+
+<Meta title="Select/Border" />
+
+## CLI
+
+```sh
+npx mui-treasury@latest clone select-border
+```
+
+## SelectBorder
+
+<Source code={raw} language="tsx" />

blocks/select-minimal/SelectMinimal.stories.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import googleFont from "../../.storybook/decorators/googleFont";
+import storyDialog from "../../.storybook/decorators/storyDialog";
+import Usage from "./usage.mdx";
+import { SelectMinimal } from "./index";
+
+const meta = {
+  title: "Select/Minimal",
+  component: SelectMinimal,
+  parameters: {
+    layout: "centered",
+    githubUsername: "siriwatknp", // (optional) Your github username. If provided, your avatar will be displayed in the story toolbar
+  },
+  decorators: [storyDialog(Usage), googleFont([])],
+} satisfies Meta<typeof SelectMinimal>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Minimal: Story = {
+  render: () => <SelectMinimal />,
+};
+
+

blocks/select-minimal/SelectMinimal.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import { deepPurple } from "@mui/material/colors";
+import FormControl from "@mui/material/FormControl";
+import { menuClasses } from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import Select, { selectClasses } from "@mui/material/Select";
+
+export function SelectMinimal() {
+  const [val, setVal] = React.useState(1);
+  return (
+    <FormControl>
+      <Select
+        disableUnderline
+        variant="standard"
+        MenuProps={{
+          anchorOrigin: {
+            vertical: "bottom",
+            horizontal: "left",
+          },
+          transformOrigin: {
+            vertical: "top",
+            horizontal: "left",
+          },
+          sx: {
+            marginBlock: "0.5rem",
+            [`& .${menuClasses.paper}`]: {
+              borderRadius: "12px",
+            },
+            [`& .${menuClasses.list}`]: {
+              paddingTop: 0,
+              paddingBottom: 0,
+              background: "white",
+              "& li": {
+                paddingTop: "12px",
+                paddingBottom: "12px",
+              },
+              "& li:hover": {
+                background: deepPurple[50],
+              },
+              "& li.Mui-selected": {
+                color: "white",
+                background: deepPurple[400],
+              },
+              "& li.Mui-selected:hover": {
+                background: deepPurple[500],
+              },
+            },
+          },
+        }}
+        IconComponent={ExpandMoreIcon}
+        value={val}
+        onChange={(event) => setVal(event.target.value as number)}
+        sx={{
+          minWidth: 200,
+          [`& .${selectClasses.select}`]: {
+            background: "white",
+            color: deepPurple[500],
+            borderRadius: "12px",
+            paddingLeft: "24px",
+            paddingRight: "24px",
+            paddingTop: "14px",
+            paddingBottom: "15px",
+            boxShadow: "0px 5px 8px -3px rgba(0,0,0,0.14)",
+            "&:focus": {
+              borderRadius: "12px",
+              background: "white",
+              borderColor: deepPurple[100],
+            },
+          },
+          [`& .${selectClasses.icon}`]: {
+            right: "12px",
+          },
+        }}
+      >
+        <MenuItem value={0}>Principle</MenuItem>
+        <MenuItem value={1}>Sketch</MenuItem>
+        <MenuItem value={2}>Photoshop</MenuItem>
+        <MenuItem value={3}>Framer</MenuItem>
+      </Select>
+    </FormControl>
+  );
+}

blocks/select-minimal/index.ts

@@ -0,0 +1 @@
+export * from "./SelectMinimal";

blocks/select-minimal/usage.mdx

@@ -0,0 +1,14 @@
+import { Meta, Source } from "@storybook/blocks";
+import raw from "./SelectMinimal?raw";
+
+<Meta title="Select/Minimal" />
+
+## CLI
+
+```sh
+npx mui-treasury@latest clone select-minimal
+```
+
+## SelectMinimal
+
+<Source code={raw} language="tsx" />