@biom3/react

@biom3/react

This package publishes via CICD to the public npm component: @biom3/react.

What's inside?

All react based design system components.

Component based maturity status

We have designed and implemented a grqanular status system where each BIOME design system component has it's own maturity status. Information on these component statuses can be found in confluence.

Each status update should be accompanied by a timestamp (format: ddd mm yyyy, eg: '2nd Dec 2022'). We will use these timestamps to move components through the status levels, as technical debt.

How to provide for all BIOME components

BIOME react components are all theme-aware. This means that they all need to sit underneath the <BiomeThemeProvider />. Please ensure you wrap your whole application in the BiomeThemeProvider, so that components at all levels in the tree, have access to BIOME design tokens.

@NOTE For those planning to consume biom3/react inside a nextjs application, please be aware that the BiomeThemeProvider inserts a rudimentary amount of global css, which simply implements some very basic css resets. This means that ideally, the BiomeThemeProvider should to be used inside of the _app.tsx file. For example:

// pages/_app.tsx
export default function NextJsApp({ Component, pageProps }) {
  return (
    <BiomeThemeProvider theme={{ base, ui }}>
      <Component {...pageProps} />
    </BiomeThemeProvider>
  );
}

If you want to dynamically change the color theme, you simply create a custom provider, which might look something like this:

import { base, ui, onDarkBase } from "@biom3/design-tokens";
export const LightOrDarkThemeProvider = ({
  children,
}: {
  children: ReactNode;
}) => {
  const [themeBrightness, setThemeBrightness] = useState<"light" | "dark">(
    "light"
  );
  const [theme, setTheme] = useState<DesignTokens>({ base, ui });

  useEffect(() => {
    if (themeBrightness === "light") {
      setTheme({ base, ui });
    } else {
      setTheme({ base: onDarkBase, ui });
    }
  }, [themeBrightness]);

  return <BiomeThemeProvider theme={theme}>{children}</BiomeThemeProvider>;
};