How to use @chakra-ui/system - 10 common examples

import { storiesOf } from "@storybook/react";
import * as React from "react";
import useTabbable from "./useTabbable";
import { createChakra } from "@chakra-ui/system";

const stories = storiesOf("useTabbable", module);

const Button = createChakra("div", { hook: useTabbable });

stories.add("Button", () => (
  <>
    <Button
      // isDisabled
      // isFocusable
      onClick={event => {
        alert("clicked");
      }}
      onMouseOver={() => {
        console.log("over");
      }}
      onMouseEnter={() => {
        console.log("enter");
      }}
      display="inline-flex"

const Submenu2 = forwardRef((props, ref) => {
  return (
    <MenuProvider>
      <MenuDisclosure ref={ref} {...props}>
        Open submenu 2
      </MenuDisclosure>
      <Menu>
        <MenuItem>Menu 1</MenuItem>
        <MenuItem>Menu 2</MenuItem>
      </Menu>
    </MenuProvider>
  );
});

const Submenu = forwardRef((props, ref) => {
  return (
    <MenuProvider>
      <MenuDisclosure ref={ref} {...props}>
        Open submenu
      </MenuDisclosure>
      <Menu>
        <MenuItem onClick={() => console.log("submenu")}>Submenu 1</MenuItem>
        <MenuItem as={Submenu2} />
      </Menu>
    </MenuProvider>
  );
});

function SampleMenu() {
  return (
    <MenuProvider>

import React from "react";
import {
  TabsProvider,
  useTab,
  useTabIndicator,
  useTabList,
  useTabPanel,
  useTabPanels,
} from "./useTabs";
import { createChakra } from "@chakra-ui/system";

const stories = storiesOf("useTabs", module).addDecorator(story => (
  <ThemeProvider>{story()}</ThemeProvider>
));

const Tab = createChakra("button", { hook: useTab });
const TabList = createChakra("div", { hook: useTabList });
const TabPanel = createChakra("div", { hook: useTabPanel });

function TabPanels(props: any) {
  const tabpanels = useTabPanels(props);
  return <React.Fragment>{tabpanels}</React.Fragment>;
}

function TabIndicator(props: any) {
  const styles = useTabIndicator();
  return <div style={{ ...styles, height: 2, background: "red" }} {...props} />;
}

stories.add("useTabs", () => (
  <TabsProvider orientation="horizontal">
    <TabList>

import {
  TabsProvider,
  useTab,
  useTabIndicator,
  useTabList,
  useTabPanel,
  useTabPanels,
} from "./useTabs";
import { createChakra } from "@chakra-ui/system";

const stories = storiesOf("useTabs", module).addDecorator(story => (
  <ThemeProvider>{story()}</ThemeProvider>
));

const Tab = createChakra("button", { hook: useTab });
const TabList = createChakra("div", { hook: useTabList });
const TabPanel = createChakra("div", { hook: useTabPanel });

function TabPanels(props: any) {
  const tabpanels = useTabPanels(props);
  return <React.Fragment>{tabpanels}</React.Fragment>;
}

function TabIndicator(props: any) {
  const styles = useTabIndicator();
  return <div style={{ ...styles, height: 2, background: "red" }} {...props} />;
}

stories.add("useTabs", () => (
  <TabsProvider orientation="horizontal">
    <TabList>
      <Tab>Settings</Tab>

import { createChakra } from "@chakra-ui/system";
import { storiesOf } from "@storybook/react";
import React from "react";
import {
  Accordion,
  AccordionItem,
  useAccordionButton,
  useAccordionPanel,
} from "./useAccordion";

const stories = storiesOf("useAccordion", module);

const AccordionButton = createChakra("button", {
  hook: useAccordionButton,
});

AccordionButton.defaultProps = {
  display: "block",
  width: "100%",
  border: 0,
  borderBottom: "1px solid #e2e2e2",
  padding: "16px 20px",
  fontWeight: 600,
  textAlign: "left",
  fontSize: "16px",
  _expanded: {
    bg: "lightgray",
  },
};

const Menu = createChakra("div", {
  hook: useMenu,
});

Menu.defaultProps = {
  color: "#212121",
  bg: "white",
  p: "0.25rem",
  rounded: "0.25rem",
  border: "1px solid rgba(33, 33, 33, 0.25)",
  outline: 0,
  width: "240px",
};

const MenuItem = createChakra("button", {
  hook: useMenuItem,
});

MenuItem.defaultProps = {
  border: 0,
  width: "100%",
  padding: "0.5em 0.24em",
  color: "#212121",
  _focus: {
    bg: "#006DFF",
    color: "white",
  },
  _expanded: {
    bg: "#006DFF",
    color: "white",
  },

import React from "react";
import {
  MenuProvider,
  useMenu,
  useMenuDisclosure,
  useMenuItem,
} from "./useMenu";

const stories = storiesOf("useMenu v2", module);

//@ts-ignore
const MenuDisclosure = createChakra("button", {
  hook: useMenuDisclosure,
});

const Menu = createChakra("div", {
  hook: useMenu,
});

Menu.defaultProps = {
  color: "#212121",
  bg: "white",
  p: "0.25rem",
  rounded: "0.25rem",
  border: "1px solid rgba(33, 33, 33, 0.25)",
  outline: 0,
  width: "240px",
};

const MenuItem = createChakra("button", {
  hook: useMenuItem,
});

AccordionButton.defaultProps = {
  display: "block",
  width: "100%",
  border: 0,
  borderBottom: "1px solid #e2e2e2",
  padding: "16px 20px",
  fontWeight: 600,
  textAlign: "left",
  fontSize: "16px",
  _expanded: {
    bg: "lightgray",
  },
};

const AccordionPanel = createChakra("div", {
  hook: useAccordionPanel,
});

AccordionPanel.defaultProps = {
  padding: "16px",
  fontFamily: "system-ui",
};

stories.add("default", () => (
  <Accordion>
    <AccordionItem>
      <AccordionButton>Toggle 1</AccordionButton>
      <AccordionPanel>Panel 1</AccordionPanel>
    </AccordionItem>

    <AccordionItem>

import { createChakra, forwardRef } from "@chakra-ui/system";
import { storiesOf } from "@storybook/react";
import React from "react";
import {
  MenuProvider,
  useMenu,
  useMenuDisclosure,
  useMenuItem,
} from "./useMenu";

const stories = storiesOf("useMenu v2", module);

//@ts-ignore
const MenuDisclosure = createChakra("button", {
  hook: useMenuDisclosure,
});

const Menu = createChakra("div", {
  hook: useMenu,
});

Menu.defaultProps = {
  color: "#212121",
  bg: "white",
  p: "0.25rem",
  rounded: "0.25rem",
  border: "1px solid rgba(33, 33, 33, 0.25)",
  outline: 0,
  width: "240px",
};

TabsProvider,
  useTab,
  useTabIndicator,
  useTabList,
  useTabPanel,
  useTabPanels,
} from "./useTabs";
import { createChakra } from "@chakra-ui/system";

const stories = storiesOf("useTabs", module).addDecorator(story => (
  <ThemeProvider>{story()}</ThemeProvider>
));

const Tab = createChakra("button", { hook: useTab });
const TabList = createChakra("div", { hook: useTabList });
const TabPanel = createChakra("div", { hook: useTabPanel });

function TabPanels(props: any) {
  const tabpanels = useTabPanels(props);
  return <React.Fragment>{tabpanels}</React.Fragment>;
}

function TabIndicator(props: any) {
  const styles = useTabIndicator();
  return <div style={{ ...styles, height: 2, background: "red" }} {...props} />;
}

stories.add("useTabs", () => (
  <TabsProvider orientation="horizontal">
    <TabList>
      <Tab>Settings</Tab>
      <Tab isDisabled isFocusable>