feat: migrate Tabs 1st batch

blocks/tabs-apple/TabsApple.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 { TabsApple } from "./index";
+import Usage from "./usage.mdx";
+
+const meta = {
+  title: "Tabs/Apple",
+  component: TabsApple,
+  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 TabsApple>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Apple: Story = {
+  render: () => <TabsApple />,
+};

blocks/tabs-apple/TabsApple.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+import { SxProps, Theme } from "@mui/material/styles";
+import Tab, { tabClasses } from "@mui/material/Tab";
+import Tabs, { tabsClasses, TabsProps } from "@mui/material/Tabs";
+
+export const tabsStyles = () => ({
+  root: {
+    backgroundColor: "#eee",
+    borderRadius: "10px",
+    minHeight: 44,
+  },
+  flexContainer: {
+    position: "relative",
+    padding: "0 3px",
+    zIndex: 1,
+  },
+  indicator: {
+    top: 3,
+    bottom: 3,
+    right: 3,
+    height: "auto",
+    borderRadius: "8px",
+    backgroundColor: "#fff",
+    boxShadow: "0 4px 12px 0 rgba(0,0,0,0.16)",
+  },
+});
+
+export const tabItemStyles = (theme: Theme) => ({
+  root: {
+    fontWeight: 500,
+    minHeight: 44,
+    minWidth: 96,
+    opacity: 0.7,
+    color: (theme.vars || theme).palette.text.primary,
+    textTransform: "initial",
+    "&:hover": {
+      opacity: 1,
+    },
+    [`&.${tabClasses.selected}`]: {
+      color: (theme.vars || theme).palette.text.primary,
+      opacity: 1,
+    },
+    [theme.breakpoints.up("md")]: {
+      minWidth: 120,
+    },
+  },
+});
+
+function toSx<ClassKey extends string>(
+  styles: (theme: Theme) => Partial<Record<ClassKey, any>>,
+  classes: Record<ClassKey, string>
+) {
+  return function sxCallback(theme: Theme) {
+    let sx = {};
+    Object.entries<any>(styles(theme)).forEach(([key, value]) => {
+      if (key === "root") {
+        sx = { ...sx, ...value };
+      } else {
+        sx[`& .${classes[key]}`] = value;
+      }
+    });
+    return sx;
+  } as SxProps<Theme>;
+}
+
+export function TabsApple({ sx }: TabsProps) {
+  const [tabIndex, setTabIndex] = React.useState(0);
+  const tabItemSx = toSx(tabItemStyles, tabClasses);
+  return (
+    <Tabs
+      value={tabIndex}
+      onChange={(e, index) => setTabIndex(index)}
+      sx={[toSx(tabsStyles, tabsClasses), ...(Array.isArray(sx) ? sx : [sx])]}
+    >
+      <Tab disableRipple label={"All"} sx={tabItemSx} />
+      <Tab disableRipple label={"Missed"} sx={tabItemSx} />
+      <Tab disableRipple label={"Calls"} sx={tabItemSx} />
+    </Tabs>
+  );
+}

blocks/tabs-apple/index.ts

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

blocks/tabs-apple/usage.mdx

@@ -0,0 +1,14 @@
+import { Meta, Source } from "@storybook/blocks";
+import raw from "./TabsApple?raw";
+
+<Meta title="Tabs/Apple" />
+
+## CLI
+
+```sh
+npx mui-treasury@latest clone tabs-apple
+```
+
+## TabsApple
+
+<Source code={raw} language="tsx" />

blocks/tabs-chrome/TabsChrome.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 { TabsChrome } from "./index";
+import Usage from "./usage.mdx";
+
+const meta = {
+  title: "Tabs/Chrome",
+  component: TabsChrome,
+  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 TabsChrome>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Chrome: Story = {
+  render: () => <TabsChrome />,
+};

blocks/tabs-chrome/TabsChrome.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import { styled } from "@mui/material/styles";
+import Tab, { tabClasses } from "@mui/material/Tab";
+import Tabs, { tabsClasses, TabsProps } from "@mui/material/Tabs";
+
+const TabItem = styled(Tab)(({ theme }) => ({
+  opacity: 1,
+  overflow: "initial",
+  paddingLeft: theme.spacing(2),
+  paddingRight: theme.spacing(2),
+  borderTopLeftRadius: theme.spacing(1),
+  borderTopRightRadius: theme.spacing(1),
+  color: (theme.vars || theme).palette.text.primary,
+  backgroundColor: (theme.vars || theme).palette.grey[300],
+  transition: "0.2s",
+  zIndex: 2,
+  marginTop: theme.spacing(0.5),
+  textTransform: "initial",
+  [theme.breakpoints.up("md")]: {
+    minWidth: 160,
+  },
+  "&:before": {
+    transition: "0.2s",
+  },
+  "&:not(:first-of-type)": {
+    "&:before": {
+      content: '" "',
+      position: "absolute",
+      left: 0,
+      display: "block",
+      height: 20,
+      width: "1px",
+      zIndex: 1,
+      marginTop: theme.spacing(0.5),
+      backgroundColor: (theme.vars || theme).palette.grey[500],
+    },
+  },
+  [`& + .${tabClasses.selected}::before`]: {
+    opacity: 0,
+  },
+  "&:hover": {
+    [`&:not(.${tabClasses.selected})`]: {
+      backgroundColor: "rgba(0 0 0 / 0.2)",
+    },
+    "&::before": {
+      opacity: 0,
+    },
+    [`& + .${tabClasses.root}::before`]: {
+      opacity: 0,
+    },
+  },
+  [`&.${tabClasses.selected}`]: {
+    backgroundColor: (theme.vars || theme).palette.grey[900],
+    color: (theme.vars || theme).palette.common.white,
+  },
+  [`&.${tabClasses.selected} + .${tabClasses.root}`]: {
+    zIndex: 1,
+  },
+  [`&.${tabClasses.selected} + .${tabClasses.root}::before`]: {
+    opacity: 0,
+  },
+}));
+
+export function TabsChrome({ sx }: TabsProps) {
+  const [tabIndex, setTabIndex] = React.useState(0);
+  return (
+    <Tabs
+      value={tabIndex}
+      onChange={(e, index) => setTabIndex(index)}
+      sx={{
+        [`& .${tabsClasses.indicator}`]: {
+          display: "none",
+        },
+      }}
+    >
+      <TabItem label={"Label 1"} />
+      <TabItem label={"Label 2"} />
+      <TabItem label={"Label 3"} />
+      <TabItem label={"Label 4"} />
+    </Tabs>
+  );
+}

blocks/tabs-chrome/index.ts

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

blocks/tabs-chrome/usage.mdx

@@ -0,0 +1,14 @@
+import { Meta, Source } from "@storybook/blocks";
+import raw from "./TabsChrome?raw";
+
+<Meta title="Tabs/Chrome" />
+
+## CLI
+
+```sh
+npx mui-treasury@latest clone tabs-chrome
+```
+
+## TabsChrome
+
+<Source code={raw} language="tsx" />

blocks/tabs-contained/TabsContained.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 { TabsContained } from "./index";
+import Usage from "./usage.mdx";
+
+const meta = {
+  title: "Tabs/Contained",
+  component: TabsContained,
+  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 TabsContained>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Contained: Story = {
+  render: () => <TabsContained />,
+};

blocks/tabs-contained/TabsContained.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+import { styled } from "@mui/material/styles";
+import Tab, { tabClasses } from "@mui/material/Tab";
+import Tabs, { tabsClasses, TabsProps } from "@mui/material/Tabs";
+
+const TabItem = styled(Tab)(({ theme }) => ({
+  opacity: 1,
+  overflow: "initial",
+  zIndex: 2,
+  textTransform: "initial",
+  color: (theme.vars || theme).palette.text.primary,
+  backgroundColor: (theme.vars || theme).palette.background.paper,
+  transition: "0.2s",
+  [theme.breakpoints.up("sm")]: {
+    minWidth: 120,
+  },
+  "&:before": {
+    transition: "0.2s",
+  },
+  "&:not(:first-of-type)": {
+    "&:before": {
+      content: '" "',
+      position: "absolute",
+      left: 0,
+      display: "block",
+      height: 20,
+      width: 1,
+      zIndex: 1,
+      backgroundColor: (theme.vars || theme).palette.grey[300],
+    },
+  },
+  [`& + .${tabClasses.selected}::before`]: {
+    opacity: 0,
+  },
+  "&:hover": {
+    [`&:not(.${tabClasses.selected})`]: {
+      backgroundColor: "rgba(0 0 0 / 0.1)",
+    },
+    "&::before": {
+      opacity: 0,
+    },
+    [`& + .${tabClasses.root}::before`]: {
+      opacity: 0,
+    },
+  },
+  [`&.${tabClasses.selected}`]: {
+    backgroundColor: (theme.vars || theme).palette.secondary.main,
+    color: (theme.vars || theme).palette.common.white,
+  },
+  [`&.${tabClasses.selected} + .${tabClasses.root}`]: {
+    zIndex: 1,
+  },
+  [`&.${tabClasses.selected} + .${tabClasses.root}::before`]: {
+    opacity: 0,
+  },
+}));
+
+export function TabsContained({ sx }: TabsProps) {
+  const [tabIndex, setTabIndex] = React.useState(0);
+  return (
+    <Tabs
+      value={tabIndex}
+      onChange={(e, index) => setTabIndex(index)}
+      sx={{
+        [`& .${tabsClasses.indicator}`]: {
+          display: "none",
+        },
+      }}
+    >
+      <TabItem label={"Specs"} />
+      <TabItem label={"Comparison"} />
+      <TabItem label={"Reviews"} />
+      <TabItem label={"Return Policy"} />
+    </Tabs>
+  );
+}

blocks/tabs-contained/index.ts

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

blocks/tabs-contained/usage.mdx

@@ -0,0 +1,14 @@
+import { Meta, Source } from "@storybook/blocks";
+import raw from "./TabsContained?raw";
+
+<Meta title="Tabs/Contained" />
+
+## CLI
+
+```sh
+npx mui-treasury@latest clone tabs-contained
+```
+
+## TabsContained
+
+<Source code={raw} language="tsx" />