@spesia/ui 1.0.1-24 → 1.0.1-27

package/README.md

@@ -43,6 +43,7 @@ export default function SpesiaThemeProvider ( { children }: Props ) {
 	);
 }
 ```
+
 and reference it in your main App.tsx file or providers file:
 
 ```javascript
@@ -57,19 +58,18 @@ import SpesiaThemeProvider from '../path-to-provider';
 </App>
 ```
 
-
 ## Available components
 
 These Material UI components have been themed so far:
 
-* Alert
-* Button
-* Card
-* Chip
-* Dialog
-* TextField
-* Typography
-* Tooltip
+- Alert
+- Button
+- Card
+- Chip
+- Dialog
+- TextField
+- Typography
+- Tooltip
 
 We also have custom components that you can import, example:
 
@@ -102,8 +102,8 @@ When that is building correct, create a folder under `stories/components/[Compon
 
 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.
+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
 
@@ -114,15 +114,15 @@ 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';
+import { color } from "@spesia/ui";
 
 const chartColor = colors.primary.blue[400];
-
 ```
 
 ### CSS
@@ -130,10 +130,10 @@ const chartColor = colors.primary.blue[400];
 You can also import the colors in your scss file as scss variables:
 
 ```css
-@use '@spesia/ui/dist/colors.scss';
+@use "@spesia/ui/dist/colors.scss";
 
 .MyContainer {
-	background: $gray100;
+  background: $gray100;
 }
 ```
 
@@ -152,4 +152,4 @@ When you are ready to push your commits to remote, remember to push the tags as
 ```
 git push
 git push --tags
-```
+```

package/dist/colors.scss

@@ -9,8 +9,8 @@ $blue400: #3d7e8f;
 $blue500: #0d5e73;
 $blue600: #0a4959;
 
-$coral50: color.scale(#FFE6DC, $lightness: 10%);
-$coral100: #FFE6DC;
+$coral50: color.scale(#ffe6dc, $lightness: 10%);
+$coral100: #ffe6dc;
 $coral200: color.scale(#fea381, $lightness: 10%);
 $coral400: #fea381;
 $coral500: #fd7c4b;
@@ -33,29 +33,29 @@ $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);
+$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);
+$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);
+$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;
@@ -67,7 +67,7 @@ $neutral600: color.scale(#737373, $lightness: -10%);
 
 // Text and background colors
 
-$gray0: rgba(2,0,0,0.02);
+$gray0: rgba(2, 0, 0, 0.02);
 $gray25: #fafafa;
 $gray50: #f5f5f5;
 $gray100: #e5e5e5;

package/dist/components/Logo/Logo.d.ts

@@ -3,7 +3,7 @@ export interface LogoProps {
     alt?: string;
     height?: number;
     width?: number;
-    color?: 'blue' | 'black' | 'white';
+    color?: "blue" | "black" | "white";
 }
 declare const Logo: ({ withText, color, height, width, ...rest }: LogoProps) => import("react/jsx-runtime").JSX.Element | null;
 export default Logo;

package/dist/fonts.scss

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

package/dist/index.js

@@ -3470,11 +3470,19 @@ const bo = io({
       }
     }
   }
-}, So = "spesiaTheme", Co = ({ withText: e, color: r = "black", height: t, width: n, ...o }) => {
+}, So = "spesiaTheme", Co = ({
+  withText: e,
+  color: r = "black",
+  height: t,
+  width: n,
+  ...o
+}) => {
   const a = e ? 4.272388059701493 : 1.3432835820895523;
   let c = t, l = n;
   const f = r === "blue" ? $.primary.blue[500] : r === "white" ? $.neutral.white : $.neutral.black;
-  return n || t ? (n && t && (console.warn("Logo: Both width and height are specified. Width will be ignored in order to maintain correct aspect ratio."), l = void 0), c && !l ? l = c * a : l && !t && (c = l / a), /* @__PURE__ */ ie(
+  return n || t ? (n && t && (console.warn(
+    "Logo: Both width and height are specified. Width will be ignored in order to maintain correct aspect ratio."
+  ), l = void 0), c && !l ? l = c * a : l && !t && (c = l / a), /* @__PURE__ */ ie(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -3488,14 +3496,7 @@ const bo = io({
         /* @__PURE__ */ er("g", { children: [
           /* @__PURE__ */ ie("path", { d: "M31.39714478,122.66193447C31.39714478,60.23646992,78.03020523,8.70349147,138.3606424.99608211,133.22022503.33939701,127.9809798.00000134,122.66207001.00000134,54.91762723.00000134,0,54.91762857,0,122.66193447c0,67.74423746,54.91762723,122.66186469,122.66207001,122.66186469,5.31890979,0,10.55815502-.33939567,15.69857239-.99608077-60.33043717-7.70740936-106.96349762-59.24038781-106.96349762-121.66578392Z" }),
           /* @__PURE__ */ ie("path", { d: "M82.97816835,122.66193447c0-62.42546455,46.63306045-113.958443,106.96349762-121.66585236C184.8012486.33939701,179.56200337.00000134,174.24309358.00000134,106.4986508.00000134,51.58102357,54.91762857,51.58102357,122.66193447c0,67.74423746,54.91762723,122.66186469,122.66207001,122.66186469,5.31890979,0,10.55815502-.33939567,15.69857239-.99608077-60.33043717-7.70740936-106.96349762-59.24038781-106.96349762-121.66578392Z" }),
-          /* @__PURE__ */ ie(
-            "circle",
-            {
-              cx: "225.82401894",
-              cy: "122.66190085",
-              r: "122.66190085"
-            }
-          )
+          /* @__PURE__ */ ie("circle", { cx: "225.82401894", cy: "122.66190085", r: "122.66190085" })
         ] }),
         e && /* @__PURE__ */ er("g", { children: [
           /* @__PURE__ */ ie(
@@ -3543,7 +3544,9 @@ const bo = io({
         ] })
       ] }) })
     }
-  )) : (console.error("Logo: You need to specify either a width or a height for the logo."), null);
+  )) : (console.error(
+    "Logo: You need to specify either a width or a height for the logo."
+  ), null);
 };
 export {
   Co as Logo,

package/dist/styles/alert/alert.d.ts

@@ -1,6 +1,6 @@
 import { ComponentStyles } from '..';
 declare const alertStyles: ComponentStyles;
-declare module '@mui/material/Alert' {
+declare module "@mui/material/Alert" {
     interface AlertPropsSeverityOverrides {
         neutral: true;
     }

package/dist/styles/button/button.d.ts

@@ -1,6 +1,6 @@
 import { ComponentStyles } from '..';
 declare const buttonStyles: ComponentStyles;
-declare module '@mui/material/Button' {
+declare module "@mui/material/Button" {
     interface ButtonSizeVariantProps {
         extraSmall: true;
     }

package/dist/styles/chip/chip.d.ts

@@ -1,6 +1,6 @@
 import { ComponentStyles } from '..';
 declare const chipStyles: ComponentStyles;
-declare module '@mui/material/Chip' {
+declare module "@mui/material/Chip" {
     interface ChipPropsColorOverrides {
         default: false;
     }

package/dist/styles/index.d.ts

@@ -1,7 +1,7 @@
 import { ThemeOptions } from '@mui/material';
-export type ComponentStyles = ThemeOptions['components'];
+export type ComponentStyles = ThemeOptions["components"];
 declare const theme: import('@mui/material').Theme;
-declare module '@mui/material/styles' {
+declare module "@mui/material/styles" {
     interface Theme {
         transparent: {
             primary: string;

package/dist/styles/palette.d.ts

@@ -1,6 +1,6 @@
 import { PaletteOptions } from '@mui/material';
 declare const palette: PaletteOptions;
-declare module '@mui/material/styles' {
+declare module "@mui/material/styles" {
     interface Palette {
         inherit: PaletteColor;
         neutral: PaletteColor;

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@spesia/ui",
-  "version": "1.0.1-24",
+  "version": "1.0.1-27",
   "description": "The Spesia UI toolkit for React",
   "files": [
     "dist"
   ],
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -15,6 +15,14 @@
   },
   "type": "module",
   "private": false,
+  "lint-staged": {
+    "**/*.(js|jsx|ts|tsx)": [
+      "npx eslint --fix"
+    ],
+    "**/*.(js|jsx|ts|tsx|css|less|scss|md|json|yml|yaml)": [
+      "pnpm run format:fix"
+    ]
+  },
   "keywords": [],
   "author": "tinna@spesia.is",
   "license": "ISC",
@@ -39,6 +47,9 @@
     "@types/react": "^19.0.10",
     "@vitest/browser": "^3.0.8",
     "@vitest/coverage-v8": "^3.0.8",
+    "eslint": "^9.23.0",
+    "eslint-config-next": "^15.2.2",
+    "eslint-config-prettier": "^9.1.0",
     "playwright": "^1.51.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
@@ -72,6 +83,10 @@
     "test:ci": "vitest run",
     "test:watch": "vitest",
     "test-storybook": "test-storybook",
+    "lint": "eslint",
+    "lint:fix": "eslint --fix",
+    "format": "prettier --check --ignore-path .gitignore .",
+    "format:fix": "prettier --write --ignore-path .gitignore .",
     "dev": "storybook dev -p 6006",
     "storybook": "storybook build",
     "check-types": "tsc --noEmit"