Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
69 tasks done
masoudmanson opened this issue Oct 4, 2024 · 1 comment
Open
69 tasks done

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

masoudmanson opened this issue Oct 4, 2024 · 1 comment
Assignees
@masoudmanson
Labels
Documentation Improvements or additions to documentation Eng P0

Comments

@masoudmanson
Copy link
Contributor

masoudmanson commented Oct 4, 2024 •
edited
Loading

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:

  • Accordions
  • Button
  • Callout
  • Control Inputs
  • Dialog
  • Dropdown Input
  • Dropdown Menu
  • Field Inputs
  • Filters
  • Link
  • Lists
  • Loading Indicator
  • Navigation
  • Notification
  • Panel
  • Segmented Control
  • Tables
  • Tabs
  • Tags
  • Theming
  • 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:

  • Accordions
  • Button
  • Callout
  • Control Inputs
  • Dialog
  • Dropdown Input
  • Dropdown Menu
  • Field Inputs
  • Filters
  • Link
  • Lists
  • Loading Indicator
  • Navigation
  • Notification
  • Panel
  • Segmented Control
  • Tables
  • Tabs
  • Tags
  • Theming
  • 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:

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

4. Add documentation for new Components

New SDS components to document:

  • ButtonToggle
  • Breakpoints
@masoudmanson masoudmanson self-assigned this Oct 4, 2024
@masoudmanson masoudmanson added Documentation Improvements or additions to documentation P0 Eng labels Oct 4, 2024
@masoudmanson
Copy link
Contributor Author

ZeroHeight docs v1.4.3 published!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@masoudmanson masoudmanson

Labels
Documentation Improvements or additions to documentation Eng P0
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@masoudmanson