@nolwenture/formik-jsonschema-form 1.0.0-beta.2 → 1.0.0-beta.3

package/dist/cjs/Form/components/FieldInfo.js

@@ -63,8 +63,8 @@ exports.FieldInfoBoxArrowElement = styled_components_1.styled.div `
   margin-left: -5px;
 `;
 exports.FieldInfoBoxInnerElement = styled_components_1.styled.div `
-  background: ${(props) => props.theme.intent.none};
-  border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.intent.none}`};
+  background: ${(props) => props.theme.color.intent.default.none};
+  border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.color.intent.default.none}`};
   border-radius: ${(props) => props.theme.borderRadius.none};
   color: ${(props) => (0, polished_1.readableColor)(props.theme.text.default)};
   cursor: default;

package/dist/cjs/Form/fields/FileUploadField/styledComponents.js

@@ -7,8 +7,8 @@ exports.FileUploadFieldContainer = exports.FileUploadFieldFileInfoText = exports
 const styled_components_1 = __importDefault(require("styled-components"));
 const polished_1 = require("polished");
 exports.FileUploadFieldFileUploadButton = styled_components_1.default.button `
-  background-color: ${(props) => props.theme.intent.none};
-  color: ${(props) => (0, polished_1.readableColor)(props.theme.intent.none)};
+  background-color: ${(props) => props.theme.color.intent.default.none};
+  color: ${(props) => (0, polished_1.readableColor)(props.theme.color.intent.default.none)};
   padding: ${(props) => `${props.theme.spacing.s} ${props.theme.spacing.xl}`};
   border: none;
   border-radius: ${(props) => props.theme.borderRadius.none};

package/dist/cjs/Form/fields/ObjectField/styledComponents.js

@@ -16,7 +16,7 @@ exports.ObjectFieldItemButtons = styled_components_1.styled.div `
   margin: ${(props) => props.theme.spacing.s};
 `;
 exports.ObjectFieldButton = styled_components_1.styled.a `
-  background-color: ${(props) => props.theme.intent.none};
+  background-color: ${(props) => props.theme.color.intent.default.none};
   border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.border.default}`};
   color: ${(props) => props.theme.neutral[900]};
   cursor: pointer;

package/dist/cjs/Form/fields/SearchableMultiTagSelectField/styledComponents.js

@@ -35,7 +35,7 @@ exports.SearchableMultiTagSelectFieldBadge = styled_components_1.styled.span `
 exports.SearchableMultiTagSelectFieldBadgeCloseElement = styled_components_1.styled.span `
   cursor: pointer;
   margin-left: ${(props) => props.theme.spacing.s};
-  font-size: ${(props) => props.theme.typography.size.s};
+  font-size: ${(props) => props.theme.typography.size.small};
   align-self: baseline;
   font-family: ${(props) => props.theme.typography.fontFamily.base};
 `;

package/dist/cjs/Form/fields/ToggleField/styledComponents.js

@@ -10,7 +10,7 @@ exports.ToggleFieldToggle = styled_components_1.styled.span `
   left: 0;
   right: 0;
   bottom: 0;
-  background: ${(props) => props.theme.intent.none};
+  background: ${(props) => props.theme.color.intent.default.none};
   border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.border.default}`};
   -webkit-transition: 0.4s;
   transition: 0.4s;

package/dist/cjs/Form/styles/common.js

@@ -5,12 +5,12 @@ const styled_components_1 = require("styled-components");
 const polished_1 = require("polished");
 exports.commonButtonStyles = (0, styled_components_1.css) `
   button {
-    background-color: ${(props) => props.theme.intent.none};
+    background-color: ${(props) => props.theme.color.intent.default.none};
     border: none;
     font-size: ${(props) => props.theme.typography.size.base};
     &:hover {
-      background: ${(props) => (0, polished_1.darken)(0.1, props.theme.intent.none)};
-      color: ${(props) => (0, polished_1.readableColor)((0, polished_1.darken)(0.1, props.theme.intent.none))};
+      background: ${(props) => (0, polished_1.darken)(0.1, props.theme.color.intent.default.none)};
+      color: ${(props) => (0, polished_1.readableColor)((0, polished_1.darken)(0.1, props.theme.color.intent.default.none))};
     }
     padding: ${(props) => `${props.theme.spacing.m} ${props.theme.spacing.l}`};
 
@@ -136,7 +136,7 @@ exports.commonCheckboxStyles = (0, styled_components_1.css) `
     }
 
     &:checked {
-      background-color: ${(props) => props.theme.intent.none};
+      background-color: ${(props) => props.theme.color.intent.default.none};
 
       &:before {
         transform: scale(1);
@@ -177,7 +177,7 @@ exports.commonRadioStyles = (0, styled_components_1.css) `
     }
 
     &:checked {
-      background-color: ${(props) => props.theme.intent.none};
+      background-color: ${(props) => props.theme.color.intent.default.none};
 
       &:before {
         transform: scale(1);
@@ -194,7 +194,7 @@ exports.commonSelectStyles = (0, styled_components_1.css) `
     color: ${(props) => props.theme.text.default};
     font-family: ${(props) => props.theme.typography.fontFamily.base};
     font-size: ${(props) => props.theme.typography.size.base};
-    font-weight: ${(props) => props.theme.typography.weight.base};
+    font-weight: ${(props) => props.theme.typography.weight.normal};
     padding: ${(props) => `${props.theme.spacing.s}`};
 
     &:focus {
@@ -203,9 +203,10 @@ exports.commonSelectStyles = (0, styled_components_1.css) `
   }
 `;
 exports.datePickerIconStyles = (0, styled_components_1.css) `
-    ::-webkit-calendar-picker-indicator {
-        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 24 24"><path fill="${(props) => props.theme.text.default}" d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/></svg>');
+  ::-webkit-calendar-picker-indicator {
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 24 24"><path fill="${(props) => props.theme.text
+    .default}" d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/></svg>');
 
-        cursor: pointer;
-    }
+    cursor: pointer;
+  }
 `;

package/dist/cjs/styles/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/esm/Form/components/FieldInfo.js

@@ -60,8 +60,8 @@ export const FieldInfoBoxArrowElement = styled.div `
   margin-left: -5px;
 `;
 export const FieldInfoBoxInnerElement = styled.div `
-  background: ${(props) => props.theme.intent.none};
-  border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.intent.none}`};
+  background: ${(props) => props.theme.color.intent.default.none};
+  border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.color.intent.default.none}`};
   border-radius: ${(props) => props.theme.borderRadius.none};
   color: ${(props) => readableColor(props.theme.text.default)};
   cursor: default;

package/dist/esm/Form/fields/FileUploadField/styledComponents.js

@@ -1,8 +1,8 @@
 import styled from "styled-components";
 import { readableColor } from "polished";
 export const FileUploadFieldFileUploadButton = styled.button `
-  background-color: ${(props) => props.theme.intent.none};
-  color: ${(props) => readableColor(props.theme.intent.none)};
+  background-color: ${(props) => props.theme.color.intent.default.none};
+  color: ${(props) => readableColor(props.theme.color.intent.default.none)};
   padding: ${(props) => `${props.theme.spacing.s} ${props.theme.spacing.xl}`};
   border: none;
   border-radius: ${(props) => props.theme.borderRadius.none};

package/dist/esm/Form/fields/ObjectField/styledComponents.js

@@ -13,7 +13,7 @@ export const ObjectFieldItemButtons = styled.div `
   margin: ${(props) => props.theme.spacing.s};
 `;
 export const ObjectFieldButton = styled.a `
-  background-color: ${(props) => props.theme.intent.none};
+  background-color: ${(props) => props.theme.color.intent.default.none};
   border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.border.default}`};
   color: ${(props) => props.theme.neutral[900]};
   cursor: pointer;

package/dist/esm/Form/fields/SearchableMultiTagSelectField/styledComponents.js

@@ -32,7 +32,7 @@ export const SearchableMultiTagSelectFieldBadge = styled.span `
 export const SearchableMultiTagSelectFieldBadgeCloseElement = styled.span `
   cursor: pointer;
   margin-left: ${(props) => props.theme.spacing.s};
-  font-size: ${(props) => props.theme.typography.size.s};
+  font-size: ${(props) => props.theme.typography.size.small};
   align-self: baseline;
   font-family: ${(props) => props.theme.typography.fontFamily.base};
 `;

package/dist/esm/Form/fields/ToggleField/styledComponents.js

@@ -7,7 +7,7 @@ export const ToggleFieldToggle = styled.span `
   left: 0;
   right: 0;
   bottom: 0;
-  background: ${(props) => props.theme.intent.none};
+  background: ${(props) => props.theme.color.intent.default.none};
   border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.border.default}`};
   -webkit-transition: 0.4s;
   transition: 0.4s;

package/dist/esm/Form/styles/common.js

@@ -2,12 +2,12 @@ import { css } from "styled-components";
 import { darken, readableColor } from "polished";
 export const commonButtonStyles = css `
   button {
-    background-color: ${(props) => props.theme.intent.none};
+    background-color: ${(props) => props.theme.color.intent.default.none};
     border: none;
     font-size: ${(props) => props.theme.typography.size.base};
     &:hover {
-      background: ${(props) => darken(0.1, props.theme.intent.none)};
-      color: ${(props) => readableColor(darken(0.1, props.theme.intent.none))};
+      background: ${(props) => darken(0.1, props.theme.color.intent.default.none)};
+      color: ${(props) => readableColor(darken(0.1, props.theme.color.intent.default.none))};
     }
     padding: ${(props) => `${props.theme.spacing.m} ${props.theme.spacing.l}`};
 
@@ -133,7 +133,7 @@ export const commonCheckboxStyles = css `
     }
 
     &:checked {
-      background-color: ${(props) => props.theme.intent.none};
+      background-color: ${(props) => props.theme.color.intent.default.none};
 
       &:before {
         transform: scale(1);
@@ -174,7 +174,7 @@ export const commonRadioStyles = css `
     }
 
     &:checked {
-      background-color: ${(props) => props.theme.intent.none};
+      background-color: ${(props) => props.theme.color.intent.default.none};
 
       &:before {
         transform: scale(1);
@@ -191,7 +191,7 @@ export const commonSelectStyles = css `
     color: ${(props) => props.theme.text.default};
     font-family: ${(props) => props.theme.typography.fontFamily.base};
     font-size: ${(props) => props.theme.typography.size.base};
-    font-weight: ${(props) => props.theme.typography.weight.base};
+    font-weight: ${(props) => props.theme.typography.weight.normal};
     padding: ${(props) => `${props.theme.spacing.s}`};
 
     &:focus {
@@ -200,9 +200,10 @@ export const commonSelectStyles = css `
   }
 `;
 export const datePickerIconStyles = css `
-    ::-webkit-calendar-picker-indicator {
-        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 24 24"><path fill="${(props) => props.theme.text.default}" d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/></svg>');
+  ::-webkit-calendar-picker-indicator {
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 24 24"><path fill="${(props) => props.theme.text
+    .default}" d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/></svg>');
 
-        cursor: pointer;
-    }
+    cursor: pointer;
+  }
 `;

package/dist/esm/styles/types.js

@@ -0,0 +1 @@
+export {};

package/dist/types/styles/types.d.ts

@@ -0,0 +1,215 @@
+export type ThemeType = {
+    color: {
+        palette: {
+            primary: {
+                900: string;
+                800: string;
+                700: string;
+                600: string;
+                500: string;
+                400: string;
+                300: string;
+                200: string;
+                100: string;
+            };
+            secondary: {
+                900: string;
+                800: string;
+                700: string;
+                600: string;
+                500: string;
+                400: string;
+                300: string;
+                200: string;
+                100: string;
+            };
+            success: {
+                900: string;
+                800: string;
+                700: string;
+                600: string;
+                500: string;
+                400: string;
+                300: string;
+                200: string;
+                100: string;
+            };
+            warning: {
+                900: string;
+                800: string;
+                700: string;
+                600: string;
+                500: string;
+                400: string;
+                300: string;
+                200: string;
+                100: string;
+            };
+            danger: {
+                900: string;
+                800: string;
+                700: string;
+                600: string;
+                500: string;
+                400: string;
+                300: string;
+                200: string;
+                100: string;
+            };
+            neutral: {
+                900: string;
+                800: string;
+                700: string;
+                600: string;
+                500: string;
+                400: string;
+                300: string;
+                200: string;
+                100: string;
+            };
+        };
+        background: {
+            default: string;
+            input: string;
+        };
+        border: {
+            default: string;
+            muted: string;
+        };
+        text: {
+            muted: string;
+            default: string;
+            dark: string;
+            secondary: string;
+            selected: string;
+            success: string;
+            info: string;
+            warning: string;
+            danger: string;
+        };
+        intent: {
+            default: {
+                none: string;
+                primary: string;
+                link: string;
+                info: string;
+                secondary: string;
+                tertiary: string;
+                success: string;
+                warning: string;
+                danger: string;
+            };
+            raised: {
+                none: string;
+                primary: string;
+                link: string;
+                info: string;
+                secondary: string;
+                tertiary: string;
+                success: string;
+                warning: string;
+                danger: string;
+            };
+            overlay: {
+                none: string;
+                primary: string;
+                link: string;
+                info: string;
+                secondary: string;
+                tertiary: string;
+                success: string;
+                warning: string;
+                danger: string;
+            };
+            sunken: {
+                none: string;
+                primary: string;
+                link: string;
+                info: string;
+                secondary: string;
+                tertiary: string;
+                success: string;
+                warning: string;
+                danger: string;
+            };
+        };
+        overlay: {
+            10: string;
+            20: string;
+            30: string;
+            40: string;
+            50: string;
+            60: string;
+            70: string;
+            80: string;
+            90: string;
+        };
+    };
+    elevation: {
+        default: string;
+        raised: string;
+        overlay: string;
+        sunken: string;
+    };
+    focus: {
+        default: string;
+        danger: string;
+    };
+    spacing: {
+        none: string;
+        xxs: string;
+        xs: string;
+        s: string;
+        m: string;
+        l: string;
+        xl: string;
+        xxl: string;
+        xxxl: string;
+        xxxxl: string;
+        xxxxxl: string;
+    };
+    borderRadius: {
+        none: string;
+        s: string;
+        m: string;
+        l: string;
+        xl: string;
+        circle: string;
+    };
+    strokeWidth: {
+        thin: string;
+        thick: string;
+        thicker: string;
+        thickest: string;
+    };
+    typography: {
+        fontFamily: {
+            base: string;
+            monospace: string;
+        };
+        weight: {
+            normal: string;
+            medium: string;
+            bold: string;
+            extrabold: string;
+        };
+        size: {
+            small: string;
+            base: string;
+            large: string;
+            h1: string;
+            h2: string;
+            h3: string;
+            h4: string;
+        };
+        lineHeight: {
+            small: string;
+            base: string;
+            large: string;
+            h1: string;
+            h2: string;
+            h3: string;
+            h4: string;
+        };
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nolwenture/formik-jsonschema-form",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.3",
   "description": "Formik form generation from json schema",
   "author": "Antti Vikman <antti.vikman@nolwenture.com>",
   "contributors": [
@@ -68,7 +68,7 @@
     "@babel/preset-env": "^7.25.4",
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.24.1",
-    "@nolwenture/component-library": "^1.0.3",
+    "@nolwenture/component-library": "^1.0.4",
     "@storybook/addon-essentials": "^8.0.5",
     "@storybook/addon-interactions": "^8.0.5",
     "@storybook/addon-links": "^8.0.5",
@@ -91,6 +91,9 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router": "^7.0.1",
+    "react-router-dom": "^7.0.1",
     "rimraf": "^6.0.1",
     "storybook": "^8.0.5",
     "styled-components": "^6.1.8",