@spesia/ui 1.0.1-21

package/README.md

@@ -0,0 +1,155 @@
+# 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
+
+[![UI Build and Push npm Package](https://github.com/Spesia/spesia/actions/workflows/sp-ui-build-push.yml/badge.svg)](https://github.com/Spesia/spesia/actions/workflows/sp-ui-build-push.yml)
+
+[![Storybook build and push](https://github.com/Spesia/spesia/actions/workflows/sp-ui-storybook-build-push.yml/badge.svg)](https://github.com/Spesia/spesia/actions/workflows/sp-ui-storybook-build-push.yml)
+
+## Installation
+
+```
+pnpm install @spesia/ui
+```
+
+## Usage
+
+Create your own provider file, i.e. SpesiaThemeProvider in your app:
+
+```javascript
+'use client';
+
+import { theme } from '@spesia/ui';
+import { CssBaseline, ThemeProvider } from '@mui/material';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'
+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:
+
+```javascript
+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:
+
+```javascript
+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:
+
+```javascript
+import { color } from '@spesia/ui';
+
+const chartColor = colors.primary.blue[400];
+
+```
+
+### CSS
+
+You can also import the colors in your scss file as scss variables:
+
+```css
+@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
+```

package/dist/colors.scss

@@ -0,0 +1,82 @@
+@use "sass:color";
+
+// Primary colors
+
+$blue50: #f3f7f8;
+$blue100: #ecf2f4;
+$blue200: #cfdfe3;
+$blue400: #3d7e8f;
+$blue500: #0d5e73;
+$blue600: #0a4959;
+
+$coral50: color.scale(#FFE6DC, $lightness: 10%);
+$coral100: #FFE6DC;
+$coral200: color.scale(#fea381, $lightness: 10%);
+$coral400: #fea381;
+$coral500: #fd7c4b;
+$coarl600: #fa581a;
+
+$cream: #f5ebe8;
+$peach: #d7af9f;
+$green: #587650;
+
+// Semantic Colors - TODO: Get semantic colors from Tara
+
+//warning
+
+$semanticYellow50: rgba(255, 192, 46, 0.05);
+$semanticYellow100: rgba(255, 192, 46, 0.1);
+$semanticYellow200: rgba(255, 192, 26, 0.1);
+$semanticYellow400: rgba(143, 108, 26, 0.8);
+$semanticYellow500: rgba(143, 108, 26, 1);
+$semanticYellow600: rgba(114, 86, 21, 1);
+
+//danger
+
+$semanticRed50: rgba(255,74,74,0.05);
+$semanticRed100: rgba(255,74,74,0.1);
+$semanticRed200: rgba(199,58,58,0.14);
+$semanticRed400: rgba(199,58,58,0.8);
+$semanticRed500: rgba(199,58,58,1);
+$semanticRed600: rgba(159, 46, 46, 1);
+
+//success
+
+$semanticGreen50: rgba(24,128,56,0.05);
+$semanticGreen100: rgba(24,128,56,0.1);
+$semanticGreen200: rgba(24,128,56,0.14);
+$semanticGreen400: rgba(24,128,56,0.8);
+$semanticGreen500: rgba(24,128,56,1);
+$semanticGreen600: rgba(19, 102, 45, 1);
+
+//info
+
+$semanticBlue50: rgba(26,116,168,0.08);
+$semanticBlue100: rgba(26,116,168,0.1);
+$semanticBlue200: rgba(26,116,168,0.2);
+$semanticBlue400: rgba(70,143,186,0.8);
+$semanticBlue500: rgba(26,116,168,1);
+$semanticBlue600: rgba(21, 93, 134, 1);
+
+$neutral50: #f5f5f5;
+$neutral100: #e5e5e5;
+$neutral200: #d6d6d6;
+$neutral400: #737373;
+$neutral500: color.scale(#737373, $lightness: -5%);
+$neutral600: color.scale(#737373, $lightness: -10%);
+
+// Text and background colors
+
+$gray0: rgba(2,0,0,0.02);
+$gray25: #fafafa;
+$gray50: #f5f5f5;
+$gray100: #e5e5e5;
+$gray200: #d6d6d6;
+$gray300: #a3a3a3;
+$gray400: #737373;
+$gray700: #424242;
+$gray900: #141414;
+$gray950: #0f0f0f;
+
+$black: #141414;
+$white: #fff;

package/dist/fonts.scss

@@ -0,0 +1,31 @@
+@font-face {
+    font-family: 'Montserrat';
+    src: url('/fonts/Montserrat/Montserrat-VariableFont_wght.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Montserrat';
+    src: url('/fonts/Montserrat/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
+    font-weight: normal;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Montserrat Fallback';
+    src: local("Arial");
+    ascent-override: 85.79%;
+    descent-override: 22.25%;
+    line-gap-override: 0.00%;
+    size-adjust: 112.83%;
+}
+
+.montserrat-font {
+    font-family: 'Montserrat', 'Montserrat Fallback';
+    font-style: normal;
+}
+
+.montserrat-font-variable {
+    --font-spesia: 'Montserrat', 'Montserrat Fallback';
+}