@mui/icons-material#GitHub TypeScript Examples

function Code(params: CodeParams) {
  return (
    <div>
      {params.codeGistUrl && (
        <CodeBlock url={params.codeGistUrl} height="50vh" />
      )}

      {params.fullCodeUrl && (
        <Grid
          container
          direction="row"
          justifyContent="center"
          alignItems="center"
          style={{
            height: params.codeGistUrl ? "100%" : "70vh",
          }}
        >
          <Grid item>
            <a
              aria-label="Download Code"
              href={params.fullCodeUrl}
              target="_blank"
              rel="noopener noreferrer"
            >
              <CustomContainedButton
                label="Full Source Code"
                endIcon={<GitHub />}
              />
            </a>
          </Grid>
        </Grid>
      )}
    </div>
  );
}

export default function ImproveThisPageTag({ githubUrl, figmaUrl }: Props) {
  const { t } = useTranslation()
  if (!githubUrl && !figmaUrl) return null
  return (
    <Container maxWidth="sm">
      <Box mt={8}>
        <Alert variant="outlined" color="info" severity="info">
          <AlertTitle>{t('improve-this-page')}</AlertTitle>
          {githubUrl && (
            <Button
              href={githubUrl}
              size="small"
              variant="text"
              target="_blank"
              rel="noreferrer noopener"
              startIcon={<GitHub fontSize="small" />}>
              {t('github-link-text')}
            </Button>
          )}
          {figmaUrl && (
            <Button
              href={figmaUrl}
              size="small"
              variant="text"
              target="_blank"
              rel="noreferrer noopener"
              startIcon={<Web fontSize="small" />}>
              {t('figma-link-text')}
            </Button>
          )}
        </Alert>
      </Box>
    </Container>
  )
}

function SampleApp() {

    const localeCollection: EntityCollection<Locale> =
        buildCollection({
            name: "Locales",
            path: "locales",
            schema: localeSchema,
            defaultSize: "m"
        });

    const productsCollection = buildCollection<Product>({
        path: "products",
        schema: productSchema,
        // inlineEditing: false,
        callbacks: productCallbacks,
        name: "Products",
        group: "Main",
        description: "List of the products currently sold in our shop",
        textSearchEnabled: true,
        additionalColumns: [productAdditionalColumn],
        filterCombinations: [
            { category: "desc", currency: "asc" },
            { category: "desc", currency: "desc" },
            { category: "asc", currency: "asc" },
            { category: "asc", currency: "desc" }
        ],
        permissions: ({ authController }) => ({
            edit: true,
            create: true,
            // we use some custom logic by storing user data in the `extra`
            // field of the user
            delete: authController.extra?.roles.includes("admin")
        }),
        extraActions: productExtraActionBuilder,
        subcollections: [localeCollection],
        excludedProperties: ["images"]
    });

    const usersCollection = buildCollection({
        path: "users",
        schema: usersSchema,
        name: "Users",
        group: "Main",
        description: "Registered users",
        textSearchEnabled: true,
        additionalColumns: [
            {
                id: "sample_additional",
                title: "Sample additional",
                builder: ({entity}) => `Generated column: ${entity.values.first_name}`,
                dependencies: ["first_name"]
            }
        ],
        properties: ["first_name", "last_name", "email", "liked_products", "picture", "phone", "sample_additional"]
    });

    const blogCollection = buildCollection({
        path: "blog",
        schema: blogSchema,
        name: "Blog",
        group: "Content",
        exportable: {
            additionalColumns: [sampleAdditionalExportColumn]
        },
        defaultSize: "l",
        properties: ["name", "header_image", "status", "content", "reviewed", "gold_text"],
        description: "Collection of blog entries included in our [awesome blog](https://www.google.com)",
        textSearchEnabled: true,
        initialFilter: {
            "status": ["==", "published"]
        }
    });

    const testCollection = buildCollection({
        path: "test_entity",
        schema: testEntitySchema,
        callbacks: testCallbacks,
        name: "Test entity",
        permissions: ({ authController }) => ({
            edit: false,
            create: false,
        }),
        additionalColumns: [
            {
                id: "full_name",
                title: "Full Name",
                builder: ({entity}) => {
                    let values = entity.values;
                    return typeof values.name === "string" ? values.name.toUpperCase() : "Nope";
                },
                dependencies: ["name"]
            }
            ]
    });

    const githubLink = (
        <Tooltip
            title="See this project on GitHub. This button is only present in this demo">
            <IconButton
                href={"https://github.com/Camberi/firecms"}
                rel="noopener noreferrer"
                target="_blank"
                component={"a"}
                size="large">
                <GitHub/>
            </IconButton>
        </Tooltip>
    );

    const customViews: CMSView[] = [{
        path: ["additional", "additional/:id"],
        name: "Additional",
        group: "Content",
        description: "This is an example of an additional view that is defined by the user",
        view: <ExampleCMSView path={"users"} collection={usersCollection}/>
    }];


    const onFirebaseInit = (config: Object) => {
        // Just calling analytics enables screen tracking
        getAnalytics();
    };

    const myAuthenticator: Authenticator<FirebaseUser> = async ({
                                                                    user,
                                                                    authController
                                                                }) => {

        if(user?.email?.includes("flanders")){
            throw Error("Stupid Flanders!");
        }

        // This is an example of retrieving async data related to the user
        // and storing it in the user extra field
        const sampleUserData = await Promise.resolve({
            roles: ["admin"]
        });

        authController.setExtra(sampleUserData);
        console.log("Allowing access to", user);
        return true;
    };

    const navigation: NavigationBuilder<FirebaseUser> = async ({
                                                                   user,
                                                                   authController
                                                               }: NavigationBuilderProps) => {
        if (authController.extra)
            console.log("Custom data stored in the authController", authController.extra);

        const navigation: Navigation = {
            collections: [
                productsCollection,
                usersCollection,
                blogCollection
            ],
            views: customViews
        };

        if (process.env.NODE_ENV !== "production") {
            navigation.collections.push(buildCollection(testCollection));
        }

        return navigation;
    };

    return <FirebaseCMSApp
        name={"My Online Shop"}
        authentication={myAuthenticator}
        signInOptions={[
            'password',
            'google.com',
            // 'phone',
            // 'anonymous',
            // 'facebook.com',
            // 'github.com',
            // 'twitter.com',
            // 'microsoft.com',
            // 'apple.com'
        ]}
        textSearchController={textSearchController}
        allowSkipLogin={true}
        logo={logo}
        navigation={navigation}
        schemaOverrideHandler={customSchemaOverrideHandler}
        firebaseConfig={firebaseConfig}
        onFirebaseInit={onFirebaseInit}
        toolbarExtraWidget={githubLink}
        LoginViewProps={{
            NoUserComponent: <>Sample custom message when no user exists</>,
            disableSignupScreen: false,
        }}
    />;
}

export default function Layout({ group = null, children, ...props }) {
    const authenticated = useRecoilValue(isAuthenticated);
    const [anchorEl, setAnchorEl] = useState(null);
    const theme: Theme = useTheme();
    const dotsMenuOpen = Boolean(anchorEl);
    const cfg = useRecoilValue(config);
    const location = useLocation();

    const [mobileOpen, setMobileOpen] = useState(true);

    const { window } = props;

    const handleProfileMenuOpen = (event) => {
        setAnchorEl(event.currentTarget);
    };

    const handleDotsMenuClose = (event) => {
        setAnchorEl(null);
    };

    const handleDrawerToggle = () => {
        setMobileOpen(!mobileOpen);
    };

    const drawer = (
        <div style={{ height: "100%" }}>
            <Toolbar />
            <Divider />
            {group != null && (
                <List sx={{ pb: 0 }}>
                    <ListItemLink
                        to={`/groups/${group.id}/`}
                        selected={
                            location.pathname === `/groups/${group.id}/` || location.pathname === `/groups/${group.id}`
                        }
                    >
                        <ListItemIcon>
                            <Paid />
                        </ListItemIcon>
                        <ListItemText primary="Transactions" />
                    </ListItemLink>
                    <ListItemLink
                        to={`/groups/${group.id}/balances`}
                        selected={location.pathname.startsWith(`/groups/${group.id}/balances`)}
                    >
                        <ListItemIcon>
                            <BarChart />
                        </ListItemIcon>
                        <ListItemText primary="Balances" />
                    </ListItemLink>
                    <ListItemLink
                        to={`/groups/${group.id}/accounts`}
                        selected={location.pathname.startsWith(`/groups/${group.id}/accounts`)}
                    >
                        <ListItemIcon>
                            <AccountBalance />
                        </ListItemIcon>
                        <ListItemText primary="Accounts" />
                    </ListItemLink>
                    <ListItemLink
                        to={`/groups/${group.id}/detail`}
                        selected={location.pathname.startsWith(`/groups/${group.id}/detail`)}
                    >
                        <ListItemIcon>
                            <AdminPanelSettings />
                        </ListItemIcon>
                        <ListItemText primary="Group Settings" />
                    </ListItemLink>
                    <ListItemLink
                        to={`/groups/${group.id}/members`}
                        selected={location.pathname.startsWith(`/groups/${group.id}/members`)}
                    >
                        <ListItemIcon>
                            <People />
                        </ListItemIcon>
                        <ListItemText primary="Group Members" />
                    </ListItemLink>
                    <ListItemLink
                        to={`/groups/${group.id}/invites`}
                        selected={location.pathname.startsWith(`/groups/${group.id}/invites`)}
                    >
                        <ListItemIcon>
                            <Mail />
                        </ListItemIcon>
                        <ListItemText primary="Group Invites" />
                    </ListItemLink>
                    <ListItemLink
                        to={`/groups/${group.id}/log`}
                        selected={location.pathname.startsWith(`/groups/${group.id}/log`)}
                    >
                        <ListItemIcon>
                            <Message />
                        </ListItemIcon>
                        <ListItemText primary="Group Log" />
                    </ListItemLink>
                    <Divider />
                </List>
            )}
            <SidebarGroupList group={group} />

            <Box
                sx={{
                    display: "flex",
                    position: "absolute",
                    width: "100%",
                    justifyContent: "center",
                    bottom: 0,
                    padding: 1,
                    borderTop: 1,
                    borderColor: theme.palette.divider,
                }}
            >
                {cfg.imprintURL && (
                    <Link href={cfg.imprintURL} target="_blank" sx={{ mr: 2 }}>
                        imprint
                    </Link>
                )}
                <Tooltip title="Source Code">
                    <Link sx={{ ml: 1 }} target="_blank" href={cfg.sourceCodeURL}>
                        <GitHub />
                    </Link>
                </Tooltip>
                {cfg.issueTrackerURL && (
                    <Tooltip title="Bug reports">
                        <Link sx={{ ml: 1 }} target="_blank" href={cfg.issueTrackerURL}>
                            <BugReport />
                        </Link>
                    </Tooltip>
                )}
            </Box>
        </div>
    );

    const container = window !== undefined ? () => window().document.body : undefined;

    return (
        <Box sx={{ display: "flex" }}>
            <CssBaseline />
            <AppBar
                position="fixed"
                sx={{
                    // width: {sm: `calc(100% - ${drawerWidth}px)`},
                    // ml: {sm: `${drawerWidth}px`},
                    zIndex: (theme) => theme.zIndex.drawer + 1,
                }}
            >
                <Toolbar>
                    <IconButton
                        color="inherit"
                        aria-label="open drawer"
                        onClick={handleDrawerToggle}
                        edge="start"
                        sx={{ mr: 2, display: { sm: "none" } }}
                    >
                        <MenuIcon />
                    </IconButton>
                    <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
                        Abrechnung
                    </Typography>
                    {authenticated ? (
                        <div>
                            <IconButton
                                aria-label="account of current user"
                                aria-controls="menu-appbar"
                                aria-haspopup="true"
                                onClick={handleProfileMenuOpen}
                                color="inherit"
                            >
                                <AccountCircleIcon />
                            </IconButton>
                            <Menu
                                id="menu-appbar"
                                open={dotsMenuOpen}
                                anchorOrigin={{
                                    vertical: "top",
                                    horizontal: "right",
                                }}
                                keepMounted
                                anchorEl={anchorEl}
                                transformOrigin={{
                                    vertical: "top",
                                    horizontal: "right",
                                }}
                                onClose={handleDotsMenuClose}
                            >
                                <MenuItem component={RouterLink} to="/profile">
                                    Profile
                                </MenuItem>
                                <MenuItem component={RouterLink} to="/profile/settings">
                                    Settings
                                </MenuItem>
                                <MenuItem component={RouterLink} to="/profile/sessions">
                                    Sessions
                                </MenuItem>
                                <MenuItem component={RouterLink} to="/profile/change-email">
                                    Change E-Mail
                                </MenuItem>
                                <MenuItem component={RouterLink} to="/profile/change-password">
                                    Change Password
                                </MenuItem>
                                <Divider />
                                <MenuItem component={RouterLink} to="/logout">
                                    <ListItemIcon>
                                        <Logout fontSize="small" />
                                    </ListItemIcon>
                                    <ListItemText>Sign out</ListItemText>
                                </MenuItem>
                            </Menu>
                        </div>
                    ) : (
                        <Button component={RouterLink} color="inherit" to="/login">
                            Login
                        </Button>
                    )}
                </Toolbar>
            </AppBar>

            {authenticated ? (
                <Box component="nav" sx={{ width: { sm: drawerWidth }, flexShrink: { sm: 0 } }}>
                    <Drawer
                        container={container}
                        variant="temporary"
                        open={mobileOpen}
                        onClose={handleDrawerToggle}
                        ModalProps={{
                            keepMounted: true, // Better open performance on mobile.
                        }}
                        sx={{
                            display: { xs: "block", sm: "none" },
                            "& .MuiDrawer-paper": {
                                boxSizing: "border-box",
                                width: drawerWidth,
                            },
                        }}
                    >
                        {drawer}
                    </Drawer>
                    <Drawer
                        variant="permanent"
                        sx={{
                            flexShrink: 0,
                            display: { xs: "none", sm: "block" },
                            "& .MuiDrawer-paper": {
                                boxSizing: "border-box",
                                width: drawerWidth,
                            },
                        }}
                        open
                    >
                        {drawer}
                    </Drawer>
                </Box>
            ) : null}
            <Box
                component="main"
                sx={{
                    flexGrow: 1,
                    width: { sm: `calc(100% - ${drawerWidth}px)` },
                }}
            >
                <Toolbar />
                <Banner />
                <Container maxWidth="lg" sx={{ padding: { xs: 0, md: 1, lg: 3 } }}>
                    {children}
                </Container>
            </Box>
        </Box>
    );
}

function WidgetDemoBlock(props: Widget) {
  const theme = useTheme();
  const classes = useStyles();
  const [responsiveSize, setResponsiveSize] = React.useState(
    _responsiveValues[0]
  );
  const [selectedTab, setSelectedTab] = React.useState(0);

  function renderTabs(selectedTab: number) {
    return (
      <div
        style={{
          position: "relative",
          width: "100%",
          height: "100%",
          marginTop: "-2rem",
        }}
      >
        <div
          style={{
            height: "100%",
            width: "100%",
            display: "flex",
            justifyContent: "center",
            borderRadius: "0.5rem",
            padding: "1rem",
            position: "absolute",
            opacity: selectedTab === 0 ? 1 : 0,
            pointerEvents: selectedTab === 0 ? "all" : "none",
            backgroundColor:
              selectedTab === 0
                ? theme.palette.background.paper
                : "transparent",
          }}
        >
          <motion.div
            animate={{
              maxWidth: responsiveSize.value,
            }}
            style={{
              height: "100%",
              width: "100%",
            }}
          >
            <CustomIframe url={props.demoUrl} showLoadingIndicator={false} />
          </motion.div>
        </div>
        <div
          style={{
            opacity: selectedTab === 0 ? 0 : 1,
            zIndex: selectedTab === 0 ? -1 : 0,
            width: "100%",
            height: "100%",
            position: "absolute",
            marginTop: "-1rem",
          }}
        >
          <CodeBlock url={props.rawCodeUrl} height="70vh" />
        </div>
      </div>
    );
  }

  return (
    <div
      id={props.id}
      style={{
        scrollMargin: "70px 0 0 0",
      }}
    >
      <Grid
        spacing={2}
        container
        direction="column"
        style={{
          borderRadius: "10px",
        }}
      >
        <Grid item>
          <div
            style={{
              border: "1px solid #cccccc50",
              borderRadius: "0.5rem",
              padding: "1rem",
            }}
          >
            <Grid
              container
              direction="row"
              justifyContent="center"
              alignItems="center"
              style={{
                height: "100%",
              }}
            >
              <Grid item xs={12} md={4}>
                <Typography
                  variant="h6"
                  style={{
                    fontWeight: "bold",
                  }}
                >
                  {props.title}
                </Typography>
              </Grid>
              <Grid
                item
                xs={12}
                md={4}
                style={{
                  display: "flex",
                  justifyContent: "center",
                }}
              >
                {renderResponsiveSelector()}
              </Grid>

              <Grid item xs={12} md={4}>
                <Grid
                  container
                  direction="row"
                  justifyContent="flex-end"
                  alignItems="center"
                >
                  {[0, 1].map((item) => (
                    <Grid item>
                      <Button
                        variant={selectedTab == item ? "contained" : "text"}
                        color={selectedTab == item ? "secondary" : "inherit"}
                        disableElevation
                        style={{
                          borderRadius: "10rem",
                          textTransform: "capitalize",
                          backgroundColor: `${
                            selectedTab == item
                              ? `${theme.palette.secondary.main}`
                              : ""
                          }`,
                        }}
                        onClick={() => {
                          setSelectedTab(item);
                        }}
                      >
                        {item === 0 ? "Demo" : "Code"}
                      </Button>
                    </Grid>
                  ))}
                  <Grid item>
                    <a
                      href={props.codeUrl}
                      target="_blank"
                      rel="noopener noreferrer"
                    >
                      <IconButton>
                        <GitHub />
                      </IconButton>
                    </a>
                  </Grid>
                </Grid>
              </Grid>
            </Grid>
          </div>
        </Grid>

        <Grid item>
          <div
            style={{
              display: "flex",
              flexDirection: "row",
              justifyContent: "center",
              height: "70vh",
              minHeight: "500px",
            }}
          >
            {renderTabs(selectedTab)}
          </div>
        </Grid>
      </Grid>
    </div>
  );

  function renderResponsiveSelector() {
    return (
      <motion.div
        animate={{
          scale: selectedTab == 0 ? 1 : 0,
        }}
      >
        <>
          {_responsiveValues.map((item) => (
            <Button
              disableElevation
              classes={{ startIcon: classes.startIcon }}
              area-label={item.label}
              size="small"
              variant={
                item.value === responsiveSize.value ? "contained" : "outlined"
              }
              color="secondary"
              style={{
                maxWidth: "40px",
                minWidth: "40px",
                minHeight: "40px",
                maxHeight: "40px",
                borderRadius: "0.5rem",
                marginRight: "0.5rem",
                fontSize: "0.5rem",
              }}
              onClick={() => {
                setResponsiveSize(item);
              }}
              startIcon={item.icon}
            ></Button>
          ))}
        </>
      </motion.div>
    );
  }
}