Spesia UI kit

The Spesia UI kit is a Material UI theme that you can use in your React or NextJS applications, by passing it to a Material UI ThemeProvider.

The Material UI theme is based on the Spesia UI kit in Figma: https://www.figma.com/design/7jKUIGyakP6GevxGk4pc6s/Spesía-UI-Kit

Build status

Installation

pnpm install @spesia/ui

Usage

Create your own provider file, i.e. SpesiaThemeProvider in your app:

'use client';

import { theme } from '@spesia/ui/client';
import { CssBaseline, ThemeProvider } from '@mui/material';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';

import { ReactNode } from 'react';

type Props = {
	children?: ReactNode;
};

export default function SpesiaThemeProvider ( { children }: Props ) {
	return (
		<ThemeProvider theme={ theme }>
			<CssBaseline />
			<LocalizationProvider dateAdapter={ AdapterDateFns }>{ children }</LocalizationProvider>
		</ThemeProvider>
	);
}

and reference it in your main App.tsx file or providers file:

import SpesiaThemeProvider from '../path-to-provider';

...

<App>
	<SpesiaThemeProvider>
		{ ...rest of the application }
	</SpesiaThemeProvider>
</App>

Available components

These Material UI components have been themed so far:

• Alert
• Button
• Card
• Chip
• Dialog
• TextField
• Typography
• Tooltip

We also have custom components that you can import, example:

import { Logo } from '@spesia/ui';

...
<App>
	<Logo withText color="blue" height={ 150 } alt="Spesía logo" />
</App>

Development

To run storybook in development mode, run:

pnpm dev

The storybook dev server should now be available on localhost:6006

Adding components

When creating a theme for a component, start with creating the style folder, under styles/[componenentName] folder. Then import the style in styles/index.ts and include it to the components list.

When that is building correct, create a folder under stories/components/[ComponentName] and create a file called [ComponentName].stories.tsx and create some stories to show-case the theme in Storybook.

Building

There are two build scripts:

1. pnpm build > This builds the theme as a ui library so that it can be published as an npm registry.
2. pnpm storybook > This builds a static storybook website for demonstration purposes.

Dockerfile

The repo includes a Dockerfile that containerizes the storybook build.

Use docker build . -t spesia-ui-kit to build it.

Spesia colors

Typescript/javascript

The @spesia/ui package also exports a colors file, in case you need to reference colors in the theme directly.

Example:

import { color } from "@spesia/ui";

const chartColor = colors.primary.brown[70];

CSS

You can also import the colors in your scss file as scss variables:

@use "@spesia/ui/dist/colors.scss";

.MyContainer {
  background: $gray100;
}

Inspect the colors.scss file to see which variables are available.

Creating a release

A new version of @spesia/ui is published in github actions whenever we tag a release.

We are using git precommit hooks to update the version.

For each commit, whenever a change is detected in this package, the git hook will create a new prerelease version and commit the tag.

When you are ready to push your commits to remote, remember to push the tags as well:

git push
git push --tags