@pixelated-tech/components 3.3.0 → 3.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (60) hide show
  1. package/README.COMPONENTS.md +232 -2
  2. package/README.md +133 -27
  3. package/dist/components/cms/cloudinary.image.js +1 -0
  4. package/dist/components/cms/wordpress.components.js +1 -0
  5. package/dist/components/general/sidepanel.js +1 -1
  6. package/dist/components/menu/menu-accordion.css +10 -0
  7. package/dist/components/menu/menu-accordion.js +2 -1
  8. package/dist/components/menu/menu-simple.css +0 -7
  9. package/dist/components/sitebuilder/config/CompoundFontSelector.css +25 -0
  10. package/dist/components/sitebuilder/config/CompoundFontSelector.js +41 -0
  11. package/dist/components/sitebuilder/config/ConfigBuilder.css +11 -0
  12. package/dist/components/sitebuilder/config/ConfigBuilder.js +188 -29
  13. package/dist/components/sitebuilder/config/ConfigEngine.js +82 -0
  14. package/dist/components/sitebuilder/config/FontSelector.css +82 -0
  15. package/dist/components/sitebuilder/config/FontSelector.js +115 -0
  16. package/dist/components/sitebuilder/config/google-fonts.js +112 -0
  17. package/dist/components/sitebuilder/form/formbuilder.js +1 -0
  18. package/dist/components/sitebuilder/form/formcomponents.js +28 -4
  19. package/dist/components/structured/markdown.js +1 -0
  20. package/dist/components/structured/recipe.js +1 -0
  21. package/dist/components/structured/timeline.js +1 -0
  22. package/dist/css/pixelated.global.css +0 -35
  23. package/dist/css/pixelated.grid.scss +4 -0
  24. package/dist/css/pixelated.visualdesign.scss +88 -0
  25. package/dist/data/routes.json +32 -1
  26. package/dist/data/visualdesignform.json +244 -0
  27. package/dist/index.js +4 -0
  28. package/dist/index.server.js +3 -3
  29. package/dist/types/components/cms/cloudinary.image.d.ts.map +1 -1
  30. package/dist/types/components/cms/wordpress.components.d.ts.map +1 -1
  31. package/dist/types/components/menu/menu-accordion.d.ts.map +1 -1
  32. package/dist/types/components/sitebuilder/config/CompoundFontSelector.d.ts +23 -0
  33. package/dist/types/components/sitebuilder/config/CompoundFontSelector.d.ts.map +1 -0
  34. package/dist/types/components/sitebuilder/config/ConfigBuilder.d.ts +270 -2
  35. package/dist/types/components/sitebuilder/config/ConfigBuilder.d.ts.map +1 -1
  36. package/dist/types/components/sitebuilder/config/ConfigEngine.d.ts +10 -0
  37. package/dist/types/components/sitebuilder/config/ConfigEngine.d.ts.map +1 -0
  38. package/dist/types/components/sitebuilder/config/FontSelector.d.ts +27 -0
  39. package/dist/types/components/sitebuilder/config/FontSelector.d.ts.map +1 -0
  40. package/dist/types/components/sitebuilder/config/google-fonts.d.ts +41 -0
  41. package/dist/types/components/sitebuilder/config/google-fonts.d.ts.map +1 -0
  42. package/dist/types/components/sitebuilder/form/formbuilder.d.ts.map +1 -1
  43. package/dist/types/components/sitebuilder/form/formcomponents.d.ts +3 -1
  44. package/dist/types/components/sitebuilder/form/formcomponents.d.ts.map +1 -1
  45. package/dist/types/components/structured/markdown.d.ts.map +1 -1
  46. package/dist/types/components/structured/recipe.d.ts.map +1 -1
  47. package/dist/types/components/structured/timeline.d.ts.map +1 -1
  48. package/dist/types/index.d.ts +4 -0
  49. package/dist/types/index.server.d.ts +3 -3
  50. package/dist/types/stories/sitebuilder/compoundfontselector.stories.d.ts +51 -0
  51. package/dist/types/stories/sitebuilder/compoundfontselector.stories.d.ts.map +1 -0
  52. package/dist/types/stories/sitebuilder/configbuilder.stories.d.ts +55 -0
  53. package/dist/types/stories/sitebuilder/configbuilder.stories.d.ts.map +1 -1
  54. package/dist/types/tests/compoundfontselector.test.d.ts +2 -0
  55. package/dist/types/tests/compoundfontselector.test.d.ts.map +1 -0
  56. package/dist/types/tests/configengine.test.d.ts +2 -0
  57. package/dist/types/tests/configengine.test.d.ts.map +1 -0
  58. package/dist/types/tests/fontselector.test.d.ts +2 -0
  59. package/dist/types/tests/fontselector.test.d.ts.map +1 -0
  60. package/package.json +11 -9
@@ -0,0 +1,112 @@
1
+ /**
2
+ * Google Fonts Integration
3
+ * Fetches and caches Google Fonts data for use in visual design forms
4
+ */
5
+ // Cache for Google Fonts data
6
+ let fontsCache = null;
7
+ let cacheTimestamp = 0;
8
+ const CACHE_DURATION = 24 * 60 * 60 * 1000; // 24 hours
9
+ // Fallback Google fonts for when API is unavailable (sorted alphabetically)
10
+ const FALLBACK_GOOGLE_FONTS = [
11
+ { family: 'Cairo', category: 'sans-serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
12
+ { family: 'Crimson Text', category: 'serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
13
+ { family: 'Fira Sans', category: 'sans-serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
14
+ { family: 'Inter', category: 'sans-serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
15
+ { family: 'Lato', category: 'sans-serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
16
+ { family: 'Libre Baskerville', category: 'serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
17
+ { family: 'Lora', category: 'serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
18
+ { family: 'Merriweather', category: 'serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
19
+ { family: 'Montserrat', category: 'sans-serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
20
+ { family: 'Nunito', category: 'sans-serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
21
+ { family: 'Open Sans', category: 'sans-serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
22
+ { family: 'Oswald', category: 'sans-serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
23
+ { family: 'Playfair Display', category: 'serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
24
+ { family: 'Poppins', category: 'sans-serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
25
+ { family: 'PT Sans', category: 'sans-serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
26
+ { family: 'Raleway', category: 'sans-serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
27
+ { family: 'Roboto', category: 'sans-serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
28
+ { family: 'Source Sans Pro', category: 'sans-serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
29
+ { family: 'Ubuntu', category: 'sans-serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
30
+ { family: 'Work Sans', category: 'sans-serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
31
+ ];
32
+ /**
33
+ * Fetch Google Fonts list from API
34
+ * Note: Requires GOOGLE_FONTS_API_KEY environment variable
35
+ */
36
+ export async function fetchGoogleFonts() {
37
+ // Check cache first
38
+ if (fontsCache && (Date.now() - cacheTimestamp) < CACHE_DURATION) {
39
+ return fontsCache;
40
+ }
41
+ const apiKey = process.env.GOOGLE_FONTS_API_KEY;
42
+ if (!apiKey) {
43
+ console.warn('GOOGLE_FONTS_API_KEY not set, returning empty fonts list');
44
+ return [];
45
+ }
46
+ try {
47
+ const response = await fetch(`https://www.googleapis.com/webfonts/v1/webfonts?key=${apiKey}&sort=popularity`);
48
+ if (!response.ok) {
49
+ throw new Error(`Google Fonts API error: ${response.status}`);
50
+ }
51
+ const data = await response.json();
52
+ // Cache the results
53
+ fontsCache = data.items;
54
+ cacheTimestamp = Date.now();
55
+ return data.items;
56
+ }
57
+ catch (error) {
58
+ console.error('Failed to fetch Google Fonts:', error);
59
+ return [];
60
+ }
61
+ }
62
+ /**
63
+ * Get font options for form dropdowns
64
+ */
65
+ export async function getFontOptions() {
66
+ const fonts = await fetchGoogleFonts();
67
+ // If no fonts loaded from API, use fallback popular fonts
68
+ if (!fonts || fonts.length === 0) {
69
+ return FALLBACK_GOOGLE_FONTS
70
+ .sort((a, b) => a.family.localeCompare(b.family))
71
+ .map((font) => ({
72
+ value: font.family,
73
+ label: `${font.family} (${font.category})`,
74
+ category: font.category
75
+ }));
76
+ }
77
+ return fonts
78
+ .sort((a, b) => a.family.localeCompare(b.family))
79
+ .map((font) => ({
80
+ value: font.family,
81
+ label: `${font.family} (${font.category})`,
82
+ category: font.category
83
+ }));
84
+ }
85
+ /**
86
+ * Generate Google Fonts CSS import URL for given fonts
87
+ */
88
+ export function generateGoogleFontsUrl(fonts) {
89
+ if (!fonts.length)
90
+ return '';
91
+ // Clean font names and create URL
92
+ const cleanFonts = fonts
93
+ .map(font => font.replace(/['"]/g, '').trim())
94
+ .filter(font => font.length > 0);
95
+ if (!cleanFonts.length)
96
+ return '';
97
+ const fontParam = cleanFonts
98
+ .map(font => font.replace(/\s+/g, '+'))
99
+ .join('|');
100
+ return `https://fonts.googleapis.com/css2?family=${fontParam}&display=swap`;
101
+ }
102
+ /**
103
+ * Generate HTML link tag for Google Fonts
104
+ */
105
+ export function generateGoogleFontsLink(fonts) {
106
+ const url = generateGoogleFontsUrl(fonts);
107
+ if (!url)
108
+ return '';
109
+ return `<link rel="preconnect" href="https://fonts.googleapis.com">
110
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
111
+ <link href="${url}" rel="stylesheet">`;
112
+ }
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
3
  import { useState } from 'react';
3
4
  import PropTypes from 'prop-types';
@@ -1,9 +1,12 @@
1
+ 'use client';
1
2
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
3
  import React, { useState } from "react";
3
4
  import PropTypes from "prop-types";
4
5
  import { validateField } from "./formvalidator";
5
6
  import { useFormValidation } from "./formvalidator";
6
7
  import * as FVF from "./formfieldvalidations";
8
+ import { FontSelector } from "../config/FontSelector";
9
+ import { CompoundFontSelector } from "../config/CompoundFontSelector";
7
10
  import "./form.css";
8
11
  /*
9
12
  InferProps to generate Types
@@ -288,9 +291,14 @@ FormRadioOption.propTypes = {
288
291
  };
289
292
  function FormRadioOption(props) {
290
293
  const inputProps = setupInputProps(props);
291
- return (_jsxs("span", { className: props.parent.display == "vertical" ? "displayVertical" : "", children: [_jsx("input", { type: "radio", id: `${props.parent.name}-${props.value}`, name: props.parent.name, value: props.value,
292
- // defaultChecked={!!props.checked}
293
- defaultChecked: props.checked, required: !!props.parent.required, ...inputProps }), _jsx("label", { htmlFor: `${props.parent.name}-${props.value}`, children: props.text })] }));
294
+ const isChecked = props.parent.checked === props.value;
295
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
296
+ const handleChange = (e) => {
297
+ if (props.parent.onChange) {
298
+ props.parent.onChange(props.value);
299
+ }
300
+ };
301
+ return (_jsxs("span", { className: props.parent.display == "vertical" ? "displayVertical" : "", children: [_jsx("input", { type: "radio", id: `${props.parent.name}-${props.value}`, name: props.parent.name, value: props.value, checked: isChecked, onChange: handleChange, required: !!props.parent.required, ...inputProps }), _jsx("label", { htmlFor: `${props.parent.name}-${props.value}`, children: props.text })] }));
294
302
  }
295
303
  FormCheckbox.propTypes = {
296
304
  id: PropTypes.string.isRequired,
@@ -323,7 +331,21 @@ FormCheckboxOption.propTypes = {
323
331
  };
324
332
  function FormCheckboxOption(props) {
325
333
  const inputProps = setupInputProps(props);
326
- return (_jsxs("span", { className: props.parent.display == "vertical" ? "displayVertical" : "", children: [_jsx("input", { type: "checkbox", id: props.parent.name + "_" + props.text, name: props.text, value: props.value, ...inputProps }), _jsx("label", { htmlFor: props.text, children: props.text })] }));
334
+ const isChecked = props.parent.checked ? props.parent.checked.includes(props.value) : false;
335
+ const handleChange = (e) => {
336
+ if (props.parent.onChange) {
337
+ const currentChecked = props.parent.checked || [];
338
+ let newChecked;
339
+ if (e.target.checked) {
340
+ newChecked = [...currentChecked, props.value];
341
+ }
342
+ else {
343
+ newChecked = currentChecked.filter((val) => val !== props.value);
344
+ }
345
+ props.parent.onChange(newChecked);
346
+ }
347
+ };
348
+ return (_jsxs("span", { className: props.parent.display == "vertical" ? "displayVertical" : "", children: [_jsx("input", { type: "checkbox", id: props.parent.name + "_" + props.text, name: props.text, value: props.value, checked: isChecked, onChange: handleChange, ...inputProps }), _jsx("label", { htmlFor: props.parent.name + "_" + props.text, children: props.text })] }));
327
349
  }
328
350
  FormButton.propTypes = {
329
351
  type: PropTypes.string,
@@ -354,3 +376,5 @@ FormFieldset.propTypes = {};
354
376
  export function FormFieldset() {
355
377
  return (_jsx(_Fragment, {}));
356
378
  }
379
+ // Re-export FontSelector for use in forms
380
+ export { FontSelector, CompoundFontSelector };
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  import { jsx as _jsx } from "react/jsx-runtime";
2
3
  import PropTypes from "prop-types";
3
4
  import { SmartImage } from "../cms/cloudinary.image";
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
3
  import { useState, useEffect } from 'react';
3
4
  import PropTypes from 'prop-types';
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
3
  import PropTypes from "prop-types";
3
4
  import { usePixelatedConfig } from '../config/config.client';
@@ -1,39 +1,4 @@
1
1
 
2
- /* ========================================
3
- ======== DEFAULT COLOR STYLES ==========
4
- ======================================== */
5
-
6
- :root {
7
- --primary-color: #369;
8
- --secondary-color: #BCD;
9
- --accent1-color: #CCC;
10
- --accent2-color: #EEE;
11
- --bg-color: #fff;
12
- --font-color: #000;
13
- }
14
- body{
15
- background-color: var(--bg-color) !important;
16
- color: var(--font-color);
17
- }
18
-
19
-
20
- /* ========================================
21
- ======== DEFAULT FONT STYLES ===========
22
- ======================================== */
23
-
24
- :root {
25
- --header-font: "Montserrat", Verdana, sans-serif;
26
- --body-font: "Roboto", Arial, sans-serif;
27
- }
28
- body {
29
- font-family: var(--body-font);
30
- }
31
- h1, h2, h3, h4, h5, h6 {
32
- line-height: 1.1;
33
- }
34
- html { font-size: 1.0rem; /* 16px; */ }
35
-
36
-
37
2
  /* ========================================
38
3
  =========== DEFAULT STYLES =============
39
4
  ======================================== */
@@ -1,4 +1,8 @@
1
1
 
2
+ /* ========================================
3
+ ============= GRID STYLES ==============
4
+ ======================================== */
5
+
2
6
  @mixin rowBase {
3
7
  display: grid ;
4
8
  gap: 10px; /* Spacing between grid items */
@@ -0,0 +1,88 @@
1
+ /* ========================================
2
+ ======== DEFAULT COLOR STYLES ==========
3
+ ======================================== */
4
+
5
+ :root {
6
+ --primary-color: #369;
7
+ --secondary-color: #BCD;
8
+ --accent1-color: #CCC;
9
+ --accent2-color: #EEE;
10
+ --bg-color: #fff;
11
+ --text-color: #000;
12
+ }
13
+ body{
14
+ background-color: var(--bg-color) !important;
15
+ color: var(--text-color);
16
+ }
17
+
18
+ /* ========================================
19
+ ====== DEFAULT FONT FACE STYLES ========
20
+ ======================================== */
21
+
22
+ :root {
23
+ --header-font: "Montserrat", Verdana, sans-serif;
24
+ --body-font: "Roboto", Arial, sans-serif;
25
+ }
26
+ body {
27
+ font-family: var(--body-font);
28
+ }
29
+ h1, h2, h3, h4, h5, h6 {
30
+ line-height: 1.1;
31
+ }
32
+ html { font-size: 1.0rem; /* 16px; */ }
33
+
34
+ /* ========================================
35
+ ======= DEFAULT FONT SIZE STYLES =======
36
+ ======================================== */
37
+
38
+ /*
39
+ https://hanjing.medium.com/font-sizing-4259801c04c1
40
+ https://www.learnui.design/blog/mobile-desktop-website-font-size-guidelines.html
41
+ https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/
42
+ https://robertcelt95.medium.com/responsive-typography-that-actually-works-beyond-font-size-clamp-acf592b79774
43
+ https://medium.com/better-web-type/the-state-of-fluid-web-typography-135cd26e0612
44
+ */
45
+
46
+ /* --font-size1: font-size: 32px;
47
+ --font-size2: font-size: 24px;
48
+ --font-size3: font-size: 18.75px;
49
+ --font-size4: font-size: 16px;
50
+ --font-size5: font-size: 13.25px;
51
+ --font-size6: font-size: 10.75px; */
52
+
53
+ :root {
54
+ --font-size1-min: 2.00rem;
55
+ --font-size1-max: 3.00rem;
56
+
57
+ --font-size2-min: 1.35rem;
58
+ --font-size2-max: 1.75rem;
59
+
60
+ --font-size3-min: 1.17rem;
61
+ --font-size3-max: 1.35rem;
62
+
63
+ --font-size4-min: 1.00rem;
64
+ --font-size4-max: 1.25rem;
65
+
66
+ --font-size5-min: 0.83rem;
67
+ --font-size5-max: 1.00rem;
68
+
69
+ --font-size6-min: 0.67rem;
70
+ --font-size6-max: 0.85rem;
71
+
72
+ --font-min-screen: 375px;
73
+ --font-max-screen: 1440px;
74
+ }
75
+
76
+ $minScreen: var(--font-min-screen);
77
+ $maxScreen: var(--font-max-screen);
78
+ :root {
79
+ @for $i from 1 through 6 {
80
+ $min: var(--font-size#{$i}-min);
81
+ $max: var(--font-size#{$i}-max);
82
+ $preferred: calc(#{$min} + ((#{$max} - #{$min}) * ((100vw - #{$minScreen}) / #{($maxScreen - $minScreen)})));
83
+ --font-size#{$i}: clamp(#{$min}, #{$preferred}, #{$max});
84
+ }
85
+ }
86
+ @for $i from 1 through 6 {
87
+ h#{$i} { font-size: var(--font-size#{$i}); }
88
+ }
@@ -1,13 +1,20 @@
1
1
  {
2
2
  "siteInfo": {
3
3
  "name": "Pixelated Technologies",
4
+ "author": "Brian Whaley",
4
5
  "description": "Custom web development and digital design agency specializing in React, Next.js, and modern web technologies",
5
6
  "url": "https://pixelated.tech",
6
7
  "email": "info@pixelated.tech",
8
+ "favicon": "/favicon.ico",
9
+ "favicon_sizes": "64x64 32x32 24x24 16x16",
10
+ "favicon_type": "image/x-icon",
11
+ "theme_color": "#369",
12
+ "background_color": "#ffffff",
13
+ "default_locale": "en",
14
+ "display": "standalone",
7
15
  "image": "/images/pix/pix-bg-512.gif",
8
16
  "image_height": "512",
9
17
  "image_width": "512",
10
- "favicon": "/favicon.ico",
11
18
  "telephone": "+1-973-710-8008",
12
19
  "address": {
13
20
  "streetAddress": "10 Jade Circle",
@@ -24,6 +31,30 @@
24
31
  ],
25
32
  "keywords": "pixelated, web development, react, next.js, custom websites, digital design, small business"
26
33
  },
34
+ "visualdesign": {
35
+ "primary-color": { "value": "#369", "type": "color", "group": "palette", "label": "Primary color" },
36
+ "secondary-color": { "value": "#BCD", "type": "color", "group": "palette", "label": "Secondary color" },
37
+ "accent1-color": { "value": "#CCC", "type": "color", "group": "palette", "label": "Accent color 1" },
38
+ "accent2-color": { "value": "#EEE", "type": "color", "group": "palette", "label": "Accent color 2" },
39
+ "bg-color": { "value": "#ffffff", "type": "color", "group": "palette", "label": "Background color" },
40
+ "text-color": { "value": "#000000", "type": "color", "group": "palette", "label": "Font color" },
41
+ "header-font": { "value": "\"Montserrat\", Verdana, sans-serif", "type": "font", "group": "typography", "label": "Header font" },
42
+ "body-font": { "value": "\"Roboto\", Arial, sans-serif", "type": "font", "group": "typography", "label": "Body font" },
43
+ "font-size1-min": { "value": "2.00rem", "type": "size", "group": "typography", "label": "Font size 1 min" },
44
+ "font-size1-max": { "value": "3.00rem", "type": "size", "group": "typography", "label": "Font size 1 max" },
45
+ "font-size2-min": { "value": "1.35rem", "type": "size", "group": "typography", "label": "Font size 2 min" },
46
+ "font-size2-max": { "value": "1.75rem", "type": "size", "group": "typography", "label": "Font size 2 max" },
47
+ "font-size3-min": { "value": "1.17rem", "type": "size", "group": "typography", "label": "Font size 3 min" },
48
+ "font-size3-max": { "value": "1.35rem", "type": "size", "group": "typography", "label": "Font size 3 max" },
49
+ "font-size4-min": { "value": "1.00rem", "type": "size", "group": "typography", "label": "Font size 4 min" },
50
+ "font-size4-max": { "value": "1.25rem", "type": "size", "group": "typography", "label": "Font size 4 max" },
51
+ "font-size5-min": { "value": "0.83rem", "type": "size", "group": "typography", "label": "Font size 5 min" },
52
+ "font-size5-max": { "value": "1.00rem", "type": "size", "group": "typography", "label": "Font size 5 max" },
53
+ "font-size6-min": { "value": "0.67rem", "type": "size", "group": "typography", "label": "Font size 6 min" },
54
+ "font-size6-max": { "value": "0.85rem", "type": "size", "group": "typography", "label": "Font size 6 max" },
55
+ "font-min-screen": { "value": "375px", "type": "size", "group": "typography", "label": "Font min screen" },
56
+ "font-max-screen": { "value": "1440px", "type": "size", "group": "typography", "label": "Font max screen" }
57
+ },
27
58
  "routes": [
28
59
  {
29
60
  "name": "Home",
@@ -0,0 +1,244 @@
1
+ {
2
+ "fields": [
3
+ {
4
+ "component": "FormInput",
5
+ "props": {
6
+ "type": "color",
7
+ "id": "primary-color",
8
+ "name": "primary-color",
9
+ "label": "Primary color",
10
+ "required": true,
11
+ "placeholder": "#369"
12
+ }
13
+ },
14
+ {
15
+ "component": "FormInput",
16
+ "props": {
17
+ "type": "color",
18
+ "id": "secondary-color",
19
+ "name": "secondary-color",
20
+ "label": "Secondary color",
21
+ "required": true,
22
+ "placeholder": "#BCD"
23
+ }
24
+ },
25
+ {
26
+ "component": "FormInput",
27
+ "props": {
28
+ "type": "color",
29
+ "id": "accent1-color",
30
+ "name": "accent1-color",
31
+ "label": "Accent color 1",
32
+ "required": true,
33
+ "placeholder": "#CCC"
34
+ }
35
+ },
36
+ {
37
+ "component": "FormInput",
38
+ "props": {
39
+ "type": "color",
40
+ "id": "accent2-color",
41
+ "name": "accent2-color",
42
+ "label": "Accent color 2",
43
+ "required": true,
44
+ "placeholder": "#EEE"
45
+ }
46
+ },
47
+ {
48
+ "component": "FormInput",
49
+ "props": {
50
+ "type": "color",
51
+ "id": "bg-color",
52
+ "name": "bg-color",
53
+ "label": "Background color",
54
+ "required": true,
55
+ "placeholder": "#ffffff"
56
+ }
57
+ },
58
+ {
59
+ "component": "FormInput",
60
+ "props": {
61
+ "type": "color",
62
+ "id": "text-color",
63
+ "name": "text-color",
64
+ "label": "Font color",
65
+ "required": true,
66
+ "placeholder": "#000000"
67
+ }
68
+ },
69
+ {
70
+ "component": "CompoundFontSelector",
71
+ "props": {
72
+ "id": "header-font",
73
+ "name": "header-font",
74
+ "label": "Header Font Stack",
75
+ "required": true,
76
+ "value": "\"Montserrat\", Arial, sans-serif"
77
+ }
78
+ },
79
+ {
80
+ "component": "CompoundFontSelector",
81
+ "props": {
82
+ "id": "body-font",
83
+ "name": "body-font",
84
+ "label": "Body Font Stack",
85
+ "required": true,
86
+ "value": "\"Roboto\", Helvetica, sans-serif"
87
+ }
88
+ },
89
+ {
90
+ "component": "FormInput",
91
+ "props": {
92
+ "type": "text",
93
+ "id": "font-size1-min",
94
+ "name": "font-size1-min",
95
+ "label": "Font size 1 min",
96
+ "required": true,
97
+ "placeholder": "2.00rem"
98
+ }
99
+ },
100
+ {
101
+ "component": "FormInput",
102
+ "props": {
103
+ "type": "text",
104
+ "id": "font-size1-max",
105
+ "name": "font-size1-max",
106
+ "label": "Font size 1 max",
107
+ "required": true,
108
+ "placeholder": "3.00rem"
109
+ }
110
+ },
111
+ {
112
+ "component": "FormInput",
113
+ "props": {
114
+ "type": "text",
115
+ "id": "font-size2-min",
116
+ "name": "font-size2-min",
117
+ "label": "Font size 2 min",
118
+ "required": true,
119
+ "placeholder": "1.35rem"
120
+ }
121
+ },
122
+ {
123
+ "component": "FormInput",
124
+ "props": {
125
+ "type": "text",
126
+ "id": "font-size2-max",
127
+ "name": "font-size2-max",
128
+ "label": "Font size 2 max",
129
+ "required": true,
130
+ "placeholder": "1.75rem"
131
+ }
132
+ },
133
+ {
134
+ "component": "FormInput",
135
+ "props": {
136
+ "type": "text",
137
+ "id": "font-size3-min",
138
+ "name": "font-size3-min",
139
+ "label": "Font size 3 min",
140
+ "required": true,
141
+ "placeholder": "1.17rem"
142
+ }
143
+ },
144
+ {
145
+ "component": "FormInput",
146
+ "props": {
147
+ "type": "text",
148
+ "id": "font-size3-max",
149
+ "name": "font-size3-max",
150
+ "label": "Font size 3 max",
151
+ "required": true,
152
+ "placeholder": "1.35rem"
153
+ }
154
+ },
155
+ {
156
+ "component": "FormInput",
157
+ "props": {
158
+ "type": "text",
159
+ "id": "font-size4-min",
160
+ "name": "font-size4-min",
161
+ "label": "Font size 4 min",
162
+ "required": true,
163
+ "placeholder": "1.00rem"
164
+ }
165
+ },
166
+ {
167
+ "component": "FormInput",
168
+ "props": {
169
+ "type": "text",
170
+ "id": "font-size4-max",
171
+ "name": "font-size4-max",
172
+ "label": "Font size 4 max",
173
+ "required": true,
174
+ "placeholder": "1.25rem"
175
+ }
176
+ },
177
+ {
178
+ "component": "FormInput",
179
+ "props": {
180
+ "type": "text",
181
+ "id": "font-size5-min",
182
+ "name": "font-size5-min",
183
+ "label": "Font size 5 min",
184
+ "required": true,
185
+ "placeholder": "0.83rem"
186
+ }
187
+ },
188
+ {
189
+ "component": "FormInput",
190
+ "props": {
191
+ "type": "text",
192
+ "id": "font-size5-max",
193
+ "name": "font-size5-max",
194
+ "label": "Font size 5 max",
195
+ "required": true,
196
+ "placeholder": "1.00rem"
197
+ }
198
+ },
199
+ {
200
+ "component": "FormInput",
201
+ "props": {
202
+ "type": "text",
203
+ "id": "font-size6-min",
204
+ "name": "font-size6-min",
205
+ "label": "Font size 6 min",
206
+ "required": true,
207
+ "placeholder": "0.67rem"
208
+ }
209
+ },
210
+ {
211
+ "component": "FormInput",
212
+ "props": {
213
+ "type": "text",
214
+ "id": "font-size6-max",
215
+ "name": "font-size6-max",
216
+ "label": "Font size 6 max",
217
+ "required": true,
218
+ "placeholder": "0.85rem"
219
+ }
220
+ },
221
+ {
222
+ "component": "FormInput",
223
+ "props": {
224
+ "type": "text",
225
+ "id": "font-min-screen",
226
+ "name": "font-min-screen",
227
+ "label": "Font min screen",
228
+ "required": true,
229
+ "placeholder": "375px"
230
+ }
231
+ },
232
+ {
233
+ "component": "FormInput",
234
+ "props": {
235
+ "type": "text",
236
+ "id": "font-max-screen",
237
+ "name": "font-max-screen",
238
+ "label": "Font max screen",
239
+ "required": true,
240
+ "placeholder": "1440px"
241
+ }
242
+ }
243
+ ]
244
+ }
package/dist/index.js CHANGED
@@ -45,6 +45,10 @@ export * from './components/sitebuilder/page/components/PageBuilderUI';
45
45
  export * from './components/sitebuilder/page/components/PageEngine';
46
46
  export * from './components/sitebuilder/page/components/SaveLoadSection';
47
47
  export * from './components/sitebuilder/config/ConfigBuilder';
48
+ export * from './components/sitebuilder/config/ConfigEngine';
49
+ export * from './components/sitebuilder/config/FontSelector';
50
+ export * from './components/sitebuilder/config/CompoundFontSelector';
51
+ export * from './components/sitebuilder/config/google-fonts';
48
52
  export * from './components/sitebuilder/form/formcomponents';
49
53
  export * from './components/sitebuilder/form/formtypes';
50
54
  export * from './components/sitebuilder/form/formutils';
@@ -11,8 +11,10 @@ export * from './components/cms/instagram.functions';
11
11
  export * from './components/cms/wordpress.functions';
12
12
  export * from './components/config/config';
13
13
  export * from './components/config/config.types';
14
- export * from './components/sitebuilder/form/formtypes';
14
+ export * from './components/sitebuilder/config/ConfigEngine';
15
+ export * from './components/sitebuilder/config/google-fonts';
15
16
  export * from './components/sitebuilder/form/formutils';
17
+ export * from './components/sitebuilder/form/formtypes';
16
18
  export * from './components/sitebuilder/page/lib/componentGeneration';
17
19
  export * from './components/sitebuilder/page/lib/componentMap';
18
20
  export * from './components/sitebuilder/page/lib/componentMetadata';
@@ -36,6 +38,4 @@ export * from './components/config/config.server';
36
38
  // Added missing server-safe components
37
39
  export * from './components/carousel/tiles';
38
40
  export * from './components/seo/googlemap';
39
- export * from './components/structured/markdown';
40
41
  export * from './components/structured/resume';
41
- export * from './components/structured/timeline';