docs(element-storybook): expand migration docs

apps/element-storybook/src/bs4-migration/MigrationExamples.tsx

@@ -0,0 +1,134 @@
+import { useEffect, useRef, useState } from 'react';
+import {
+  Badge,
+  Button,
+  Chip,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Grid,
+  IconButton,
+  MailIcon,
+  Menu,
+  MenuItem,
+  MoreVerticalIcon,
+  Tab,
+  Tabs,
+  ThemeProvider,
+} from '@availity/element';
+
+export const BadgeExample = () => (
+  <ThemeProvider>
+    <Badge color="primary" badgeContent={5} variant="dot">
+      <MailIcon fontSize="large" />
+    </Badge>
+  </ThemeProvider>
+);
+
+export const ChipExample = () => (
+  <ThemeProvider>
+    <Chip label="New" />
+  </ThemeProvider>
+);
+
+export const GridExample = () => (
+  <Grid container spacing={0.5}>
+    <Grid xs={8}>8</Grid>
+    <Grid xs={4}>4</Grid>
+    <Grid xs={4}>4</Grid>
+    <Grid xs={8}>8</Grid>
+  </Grid>
+);
+
+export const MenuExample = () => {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <ThemeProvider>
+      <IconButton
+        title="Actions"
+        id="long-button"
+        aria-controls={open ? 'long-menu' : undefined}
+        aria-expanded={open ? 'true' : undefined}
+        aria-haspopup="true"
+        onClick={handleClick}
+      >
+        <MoreVerticalIcon />
+      </IconButton>
+      <Menu
+        id="long-menu"
+        MenuListProps={{
+          'aria-labelledby': 'long-button',
+        }}
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+      >
+        <MenuItem onClick={handleClose}>Action 1</MenuItem>
+        <MenuItem onClick={handleClose}>Action 2</MenuItem>
+        <MenuItem onClick={handleClose}>Action 3</MenuItem>
+      </Menu>
+    </ThemeProvider>
+  );
+};
+
+export const DialogExample = () => {
+  const [open, setOpen] = useState(false);
+
+  const handleOpen = () => {
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  return (
+    <ThemeProvider>
+      <Button onClick={handleOpen}>Open Dialog</Button>
+      <Dialog open={open} onClose={handleClose} aria-labelledby="alert-dialog-title">
+        <DialogTitle id="alert-dialog-title" component="h1">
+          Availity Dialog
+        </DialogTitle>
+        <DialogContent>
+          <DialogContentText>Dialog Text</DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClose} color="secondary">
+            Disagree
+          </Button>
+          <Button onClick={handleClose} autoFocus>
+            Agree
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </ThemeProvider>
+  );
+};
+
+export const TabExample = () => {
+  const [value, setValue] = useState(0);
+
+  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+    setValue(newValue);
+  };
+
+  return (
+    <ThemeProvider>
+      <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
+        <Tab label="Item One" />
+        <Tab label="Item Two" />
+        <Tab label="Item Three" />
+      </Tabs>
+    </ThemeProvider>
+  );
+};