A React Component Library (Typescript | React | MUI)

Please note that @mui/material, @emotion/react, @emotion/styled, @mui/icons-material, @mui/x-date-pickers, and dayjs are peer dependencies that should be installed before installing @safaricom/sui.

// with npm

npm install @safaricom/sui

// with yarn

yarn add @safaricom/sui

import { CssBaseline, ThemeProvider } from "@mui/material";
import theme from "@safaricom/sui";

const Layout = ({ children }) => {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      {children}
    </ThemeProvider>
  );
};

export default Layout;

⚠️ If you're using @safaricom/sui with Next.js, you might face the following error:

...Doesn't build due to require() of ES Module (ERR_REQUIRE_ESM)

To solve it, transpile the package by adding transpilePackages: ['@safaricom/sui'] to your next.config.js/ts file.

/* Your Next.js config */
module.exports = {
  transpilePackages: ["@safaricom/sui"],
};

Go to Version Releases

This library comes with TypeScript "typings". If you happen to find any bugs in those, create an issue.

Please file an issue for bugs, missing documentation, or unexpected behavior.

Please file an issue to suggest new features. Vote on feature requests by adding a 👍. This helps maintainers prioritize what to work on.

Here are some available commands/scripts and what they do.

• build: Runs linting, builds the project using Vite`.
• lint: Compiles TypeScript files and lints all TypeScript and TypeScript React files using ESLint.
• lint:fix: Runs the lint command with the --fix flag to automatically fix linting errors.
• storybook: Starts the Storybook development server on port 6006.
• build-storybook: Builds the Storybook project.
• test:generate-output: Runs Jest tests and outputs the results in JSON format to a file named .jest-test-results.json. If the Jest command fails, it exits with a status code of 0 (success).
• test: Runs Jest tests.
• start-and-test: Executes a Node.js script called startAndRunTestsWithOutput.js.
• test:coverage: Runs tests for Storybook components with coverage enabled, generates coverage reports in the coverage/storybook directory, and outputs an lcov report.
• test:coverage:generate-lcov: Same as test:coverage, but explicitly generates an lcov report.
• release: Runs the standard-version package, which automatically increments the project version based on commit messages and generates a changelog.
• test:vitestcoverage: Runs Vite tests with coverage enabled.
• prepare: Installs Husky, a Git hooks manager, during the preparation step of installing dependencies.

MIT