Upgrade @czi-sds/components on ZeroHeight and refactor component recipes for the latest SDS package

To document the new Panel component, all ZeroHeight packages need to be updated to the latest version. This update will break existing code examples and component recipes, so all examples will need to be refactored to align with the latest SDS changes.

1. Update Packages and Refactor Components

Update ZeroHeight packages to the latest version and refactor the Panel component and related examples.

The new code setting for ZeroHeight:

{
  "react": "^18.2.0",
  "@mui/lab": "^5.0.0-alpha.159",
  "@mui/base": "^5.0.0-beta.30",
  "react-dom": "^18.2.0",
  "@emotion/css": "^11.11.2",
  "@mui/material": "^5.15.3",
  "react-virtual": "^2.10.4",
  "@emotion/react": "11.10.4",
  "@emotion/styled": "11.10.4",
  "@faker-js/faker": "8.1.0",
  "@czi-sds/components": "^21.7.0",
  "@mui/icons-material": "^5.15.3",
  "@tanstack/react-query": "^4.35.7",
  "@tanstack/react-table": "8.10.3"
}

The new structure for code examples and component recipes:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SDS Component Name</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

style.css

body {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.08px;
  line-height: 20px;
  text-transform: none;
  font-family: "Inter", sans-serif;
}

h1 {
  font-size: 1.5rem;
}

.app {
  padding: 20px;
}

index.tsx (Supports dark mode)

import React from "react";
import { createRoot } from "react-dom/client";
import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles";
import { Theme } from "@czi-sds/components";
import CssBaseline from "@mui/material/CssBaseline";
import useMediaQuery from "@mui/material/useMediaQuery";

import App from "./App";

const container = document.getElementById("root");
const root = createRoot(container!);

const RootApp = () => {
  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
  const theme = prefersDarkMode ? Theme("dark") : Theme("light");

  return (
    <StyledEngineProvider injectFirst>
      <ThemeProvider theme={theme}>
        <EmotionThemeProvider theme={theme}>
          <CssBaseline />
          <App />
        </EmotionThemeProvider>
      </ThemeProvider>
    </StyledEngineProvider>
  );
};

root.render(
  <React.StrictMode>
    <RootApp />
  </React.StrictMode>
);

App.tsx

import { LoadingIndicator } from "@czi-sds/components";
import "./styles.css";

function App() {
  return (
    <div className="app">
      // Code examples goes here
    </div>
  );
}

export default App;

SDS Components to Refactor:

[x] Accordions
[x] Button
[x] Callout
[x] Control Inputs
[x] Dialog
[x] Dropdown Input
[x] Dropdown Menu
[x] Field Inputs
[x] Filters
[x] Link
[x] Lists
[x] Loading Indicator
[x] Navigation
[x] Notification
[x] Panel
[x] Segmented Control
[x] Tables
[x] Tabs
[x] Tags
[x] Theming
[x] Tooltips

2. Update Code Examples for Dark Mode

Modify code examples to support dark mode, adjusting automatically based on the browser’s color scheme.

SDS Components to Refactor:

[x] Accordions
[x] Button
[x] Callout
[x] Control Inputs
[x] Dialog
[x] Dropdown Input
[x] Dropdown Menu
[x] Field Inputs
[x] Filters
[x] Link
[x] Lists
[x] Loading Indicator
[x] Navigation
[x] Notification
[x] Panel
[x] Segmented Control
[x] Tables
[x] Tabs
[x] Tags
[x] Theming
[x] Tooltips

3. Update Descriptions and Prop Tables

Revise component descriptions and prop tables to reflect the new version of the Panel component and SDS.

SDS Components to Refactor:

[x] Accordions
[x] Banner
[x] Button
[x] ButtonIcon
[x] ButtonDropdown
[x] ButtonToggle
[x] Callout
[x] Control Inputs
[x] Dialog
[x] Dropdown Input
[x] Dropdown Menu
[x] Field Inputs
[x] Filters
[x] Link
[x] Lists
[x] Loading Indicator
[x] Navigation
[x] Notification
[x] Panel
[x] Segmented Control
[x] Tables
[x] Tabs
[x] Tags
[x] Theming
[x] Tooltips

4. Add documentation for new Components

New SDS components to document:

[x] ButtonToggle
[x] Breakpoints

chanzuckerberg / sci-components