@dtdot/lego 2.0.0-7 → 2.0.0-9

package/build/components/Form/Form.component.d.ts

@@ -6,5 +6,8 @@ interface FormProps {
     onSubmit?: () => void;
     children: React.ReactNode;
 }
-declare const Form: ({ value, errors, onChange, onSubmit, children }: FormProps) => JSX.Element;
+declare const Form: {
+    ({ value, errors, onChange, onSubmit, children }: FormProps): JSX.Element;
+    NestedFormArray: ({ name, index, children }: import("./_NestedFormArray").NestedFormArrayProps) => JSX.Element;
+};
 export default Form;

package/build/components/Form/Form.component.js

@@ -1,6 +1,7 @@
 // eslint-disable-next-line @typescript-eslint/no-use-before-define
 import React from 'react';
 import FormStateContext from './FormState.context';
+import NestedFormArray from './_NestedFormArray';
 const Form = ({ value, errors = {}, onChange, onSubmit, children }) => {
     const onChangeFn = (key, fieldValue) => {
         onChange({
@@ -22,4 +23,5 @@ const Form = ({ value, errors = {}, onChange, onSubmit, children }) => {
     return (React.createElement(FormStateContext.Provider, { value: contextValue },
         React.createElement("form", { onSubmit: onSubmitFn }, children)));
 };
+Form.NestedFormArray = NestedFormArray;
 export default Form;

package/build/components/Form/_NestedFormArray.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface NestedFormArrayProps {
+    name: string;
+    index: number;
+    children: React.ReactNode;
+}
+declare const NestedFormArray: ({ name, index, children }: NestedFormArrayProps) => JSX.Element;
+export default NestedFormArray;

package/build/components/Form/_NestedFormArray.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import FormStateContext from './FormState.context';
+import useFormNode from './useFormNode.hook';
+const NestedFormArray = ({ name, index, children }) => {
+    const { value, error, onChange } = useFormNode(name);
+    const safeValue = Array.from(Array(Math.max(index + 1, value?.length || 0))).map((_, i) => value?.[i] || {});
+    const safeError = Array.from(Array(Math.max(index + 1, value?.length || 0))).map((_, i) => error?.[i] || {});
+    const nestedValue = safeValue[index];
+    const nestedErrors = safeError[index];
+    console.log('safe', safeValue);
+    const onChangeFn = (key, fieldValue) => {
+        const newValue = [
+            ...safeValue.map((item, i) => (i === index ? { ...item, [key]: fieldValue } : item)),
+        ];
+        console.log(newValue);
+        onChange && onChange(newValue);
+    };
+    const contextValue = {
+        value: nestedValue,
+        errors: nestedErrors,
+        onChange: onChangeFn,
+    };
+    return React.createElement(FormStateContext.Provider, { value: contextValue }, children);
+};
+export default NestedFormArray;

package/build/components/Loader/Loader.component.d.ts

@@ -1,3 +1,6 @@
 /// <reference types="react" />
-declare const Loader: () => JSX.Element;
+export interface LoaderProps {
+    variant?: 'page-loader' | 'default';
+}
+declare const Loader: ({ variant }: LoaderProps) => JSX.Element;
 export default Loader;

package/build/components/Loader/Loader.component.js

@@ -1,6 +1,13 @@
 import React from 'react';
 import { motion } from 'framer-motion';
+import styled from 'styled-components';
 import colours from '../../colours/colours';
+const PageLoaderContainer = styled.div `
+  display: flex;
+  height: 300px;
+  justify-content: center;
+  align-items: center;
+`;
 const loadingContainer = {
     width: '40px',
     height: '26px',
@@ -40,10 +47,15 @@ const loadingCircleTransition = {
     repeatType: 'reverse',
     ease: 'easeInOut',
 }; // Framer motion isn't accepting 'repeatType' but animation breaks without it
-const Loader = () => {
-    return (React.createElement(motion.div, { style: loadingContainer, variants: loadingContainerVariants, initial: 'start', animate: 'end', "data-cy": 'loader' },
-        React.createElement(motion.span, { style: loadingCircle, variants: loadingCircleVariants, transition: loadingCircleTransition }),
-        React.createElement(motion.span, { style: loadingCircle, variants: loadingCircleVariants, transition: loadingCircleTransition }),
-        React.createElement(motion.span, { style: loadingCircle, variants: loadingCircleVariants, transition: loadingCircleTransition })));
+const BaseLoader = () => (React.createElement(motion.div, { style: loadingContainer, variants: loadingContainerVariants, initial: 'start', animate: 'end', "data-cy": 'loader' },
+    React.createElement(motion.span, { style: loadingCircle, variants: loadingCircleVariants, transition: loadingCircleTransition }),
+    React.createElement(motion.span, { style: loadingCircle, variants: loadingCircleVariants, transition: loadingCircleTransition }),
+    React.createElement(motion.span, { style: loadingCircle, variants: loadingCircleVariants, transition: loadingCircleTransition })));
+const Loader = ({ variant = 'default' }) => {
+    if (variant === 'page-loader') {
+        return (React.createElement(PageLoaderContainer, null,
+            React.createElement(BaseLoader, null)));
+    }
+    return React.createElement(BaseLoader, null);
 };
 export default Loader;

package/build/components/Spacer/Spacer.component.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export type SpacerSize = '0.5x' | '1x' | '2x' | '4x' | '6x';
+export type SpacerSize = '0.5x' | '1x' | '2x' | '4x' | '6x' | '8x';
 export interface SpacerProps {
     size: SpacerSize;
 }

package/build/components/Spacer/Spacer.component.js

@@ -12,6 +12,8 @@ const getSpacing = (size) => {
             return '32px';
         case '6x':
             return '48px';
+        case '8x':
+            return '64px';
         default:
             return 0;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dtdot/lego",
-  "version": "2.0.0-7",
+  "version": "2.0.0-9",
   "description": "Some reusable components for building my applications",
   "main": "build/index.js",
   "scripts": {