Safaricom SUI

@safaricom/sui

A React Component Library (Typescript | React | MUI)

Getting Started

Peer dependencies

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.

Installation

// with npm

npm install @safaricom/sui

// with yarn

yarn add @safaricom/sui

Usage

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

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

export default Layout;

Usage with Nextjs

⚠️ 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"],
};

Changelog

Go to Version Releases

TypeScript

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

🐛 Bugs

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

💡 Feature Requests

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

---

Contributors Section

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.

LICENSE

MIT