@dtdot/lego 1.0.0 → 1.1.0

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Status } from '../../theme/theme.types';
-export declare type AlertVariant = Status;
+export type AlertVariant = Status;
 export interface AlertProps {
     variant: AlertVariant;
     message: string;

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

@@ -4,7 +4,7 @@ interface BadgeSpanProps {
     variant: BadgeVariant;
 }
 export declare const BadgeSpan: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, BadgeSpanProps, never>;
-export declare type BadgeVariant = Status;
+export type BadgeVariant = Status;
 export interface BadgeProps {
     children: React.ReactNode;
     variant: BadgeVariant;

package/build/components/Card/Card.context.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare type CardSize = 'fill' | 'xs' | 'sm' | 'md' | 'lg';
+export type CardSize = 'fill' | 'xs' | 'sm' | 'md' | 'lg';
 interface CardContextProps {
     size: CardSize;
     actionsRef?: HTMLDivElement;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare type ControlGroupVariation = 'focus' | 'submission' | 'comfortable';
+export type ControlGroupVariation = 'focus' | 'submission' | 'comfortable';
 export interface ControlGroupProps {
     children: React.ReactNode;
     variation?: ControlGroupVariation;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare type ImageUploadMode = 'fill' | 'form';
+export type ImageUploadMode = 'fill' | 'form';
 interface ImageUploadProps {
     'name': string;
     'value'?: string;

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { Status } from '../../theme/theme.types';
-export declare type InlineCardSize = 'fill' | 'xs' | 'sm' | 'md' | 'lg';
-export declare type DragVariant = Status;
+export type InlineCardSize = 'fill' | 'xs' | 'sm' | 'md' | 'lg';
+export type DragVariant = Status;
 export interface InlineCardProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     size?: InlineCardSize;

package/build/components/InlineCard/InlineCardSelection.component.d.ts

@@ -5,5 +5,5 @@ export interface InlineCardSelectionProps {
     value?: string[];
     onChange?: (value: string[]) => void;
 }
-declare const InlineCardSelection: ({ children, name, value, onChange, }: InlineCardSelectionProps) => JSX.Element;
+declare const InlineCardSelection: ({ children, name, value: propsValue, onChange: propsOnChange, }: InlineCardSelectionProps) => JSX.Element;
 export default InlineCardSelection;

package/build/components/InlineCard/_InlineCardSelection.context.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare type CardSize = 'fill' | 'xs' | 'sm' | 'md' | 'lg';
+export type CardSize = 'fill' | 'xs' | 'sm' | 'md' | 'lg';
 interface InlineCardSelectionContextProps {
     value?: string[];
     onToggle?: (value: string) => void;

package/build/components/Menu/_MenuPanel.component.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare type PanelSize = 'sm' | 'md';
+export type PanelSize = 'sm' | 'md';
 export interface MenuPanelProps {
     children: React.ReactNode;
     scrollable?: boolean;

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

@@ -5,6 +5,6 @@ export interface MinimalMenuProps {
 declare const MinimalMenu: {
     ({ children }: MinimalMenuProps): JSX.Element;
     Item: ({ icon, active, onClick, "data-cy": dataCy }: import("./_MinimalMenuItem.component").MinimalMenuItemProps) => JSX.Element;
-    Page: ({ children }: import("./_MinimalMenuPage.component").MinimalMenuPageProps) => JSX.Element;
+    Page: ({ children, hiddenMenu }: import("./_MinimalMenuPage.component").MinimalMenuPageProps) => JSX.Element;
 };
 export default MinimalMenu;

package/build/components/MinimalMenu/_MinimalMenuPage.component.d.ts

@@ -1,6 +1,10 @@
 import React from 'react';
 export interface MinimalMenuPageProps {
     children: React.ReactNode;
+    /** Set the page to be in hidden menu mode.
+     * This is useful for rendering your app and preventing re-renders between a un-authenticated no-menu mode and the regular authenticated mode
+     **/
+    hiddenMenu?: boolean;
 }
-declare const MinimalMenuPage: ({ children }: MinimalMenuPageProps) => JSX.Element;
+declare const MinimalMenuPage: ({ children, hiddenMenu }: MinimalMenuPageProps) => JSX.Element;
 export default MinimalMenuPage;

package/build/components/MinimalMenu/_MinimalMenuPage.component.js

@@ -9,8 +9,14 @@ const MinimalMenuPageContainer = styled.div `
   ${responsive.useStylesFor('mobile').andSmaller(`
     padding-bottom: 64px;
   `)}
+
+  ${(props) => props.hiddenMenu &&
+    `
+    padding-left: 0 !important;
+    padding-bottom: 0 !important;
+  `}
 `;
-const MinimalMenuPage = ({ children }) => {
-    return React.createElement(MinimalMenuPageContainer, null, children);
+const MinimalMenuPage = ({ children, hiddenMenu }) => {
+    return React.createElement(MinimalMenuPageContainer, { hiddenMenu: !!hiddenMenu }, children);
 };
 export default MinimalMenuPage;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare type ModalSize = 'sm' | 'md' | 'lg';
+export type ModalSize = 'sm' | 'md' | 'lg';
 export interface ModalProps {
     children: React.ReactNode;
     size?: ModalSize;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare type NotificationVariant = 'info' | 'success' | 'warn' | 'danger';
+export type NotificationVariant = 'info' | 'success' | 'warn' | 'danger';
 export interface INotification {
     id: string;
     variant: NotificationVariant;

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

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

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TableVariant } from './_Table.context';
-export declare type TableCellVariant = 'tight';
+export type TableCellVariant = 'tight';
 export interface TableProps {
     children: React.ReactNode;
     variant?: TableVariant;

package/build/components/Table/_Table.context.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare type TableVariant = 'regular' | 'soft';
+export type TableVariant = 'regular' | 'soft';
 export interface TableContextProps {
     variant: TableVariant;
 }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare type TextVariant = 'primary' | 'secondary';
+export type TextVariant = 'primary' | 'secondary';
 export interface TextProps {
     children: React.ReactNode;
     variant?: TextVariant;

package/build/layouts/Content/_ContentContent.component.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare type ContentSize = 'sm' | 'md' | 'lg' | 'full';
+export type ContentSize = 'sm' | 'md' | 'lg' | 'full';
 export interface ContentContentActions {
     children: React.ReactNode;
     size?: ContentSize;

package/build/responsive/responsive.d.ts

@@ -1,4 +1,4 @@
-export declare type ScreenSize = 'mobile' | 'tablet' | 'desktop' | 'wide';
+export type ScreenSize = 'mobile' | 'tablet' | 'desktop' | 'wide';
 export interface IStyleBoundFunctions {
     andSmaller: (styled: string | TemplateStringsArray, ...templateArgs: any) => string;
     andLarger: (styled: string | TemplateStringsArray, ...templateArgs: any) => string;

package/build/storyHelpers/LoremIpsum.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const LoremIpsum: () => JSX.Element;
+export default LoremIpsum;

package/build/storyHelpers/LoremIpsum.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import Text from '../components/Text/Text.component';
+const LoremIpsum = () => (React.createElement(Text, null,
+    "Suspendisse sit amet pellentesque nisi. Quisque eget velit sit amet mauris tincidunt dictum id et ex. Integer pulvinar tellus id viverra finibus. Cras dapibus diam a ante eleifend, ac ultrices ligula vestibulum. Nulla gravida ante nec mi tristique, vel elementum arcu volutpat. Nunc in lorem id ligula sodales tincidunt non ut ipsum. Fusce risus eros, dapibus sed lacus et, faucibus auctor purus. Nulla sed rhoncus ligula, at porttitor tellus. Aliquam vitae gravida quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque quis tempus risus.",
+    React.createElement("br", null),
+    React.createElement("br", null),
+    "Nullam tincidunt mauris ut lectus auctor aliquam. Aenean ornare mi et sollicitudin suscipit. Integer eu nulla at turpis molestie malesuada. Maecenas non consectetur massa. Nunc dui magna, imperdiet placerat bibendum ac, accumsan non lorem. Proin vulputate magna nisl, vel convallis elit iaculis quis. Proin maximus ante non ante vehicula sodales. Aliquam dui nisi, posuere vitae urna in, porta aliquet tellus. Curabitur commodo diam nec erat luctus, quis pharetra diam ultricies. Fusce sagittis libero lorem, convallis tristique mi egestas fermentum. Sed eu erat ut eros porttitor sollicitudin. Vivamus facilisis felis odio, ac tristique enim blandit a. Aliquam tincidunt iaculis sapien, sed vulputate mauris luctus ac. Donec aliquet ullamcorper orci quis tempor. Curabitur ac felis nulla.",
+    React.createElement("br", null),
+    React.createElement("br", null),
+    "Aenean vestibulum aliquam purus ut fringilla. Maecenas aliquet a nunc eget scelerisque. Mauris varius dignissim velit, vitae faucibus massa posuere sit amet. Nulla rutrum enim tellus, eget interdum massa ultricies sed. Proin pulvinar odio non lectus scelerisque, et varius nisl blandit. Donec nisl ante, ultricies eu volutpat ut, dapibus sed ex. Aliquam risus ex, porttitor vel commodo in, convallis laoreet dolor. Proin pretium neque pretium, laoreet dolor ultrices, vulputate sapien. Aenean rutrum lorem non mauris egestas accumsan.",
+    React.createElement("br", null),
+    React.createElement("br", null),
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh lorem, mattis sed dolor ac, malesuada maximus lorem. Proin hendrerit maximus ipsum, eu laoreet erat congue a. Duis pellentesque leo sed nisi mattis, a sollicitudin sapien ornare. Mauris efficitur nulla metus. Etiam felis velit, mollis eget fringilla nec, venenatis non libero. Suspendisse at arcu rhoncus, tristique ex nec, blandit enim. Vivamus rutrum, felis faucibus vulputate vulputate, lacus quam sollicitudin eros, non consequat velit neque in lorem. Ut hendrerit lectus vel quam placerat tincidunt. Ut auctor tortor elit, ac aliquam orci pellentesque efficitur. Morbi eget sollicitudin est. Donec ullamcorper velit ipsum, non dapibus nisi vulputate ac. Proin dapibus, mi ac scelerisque sollicitudin, turpis augue hendrerit metus, eget dignissim justo lectus id urna. Vivamus massa ipsum, posuere eu risus non, ultrices convallis tellus. Mauris et egestas erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec sagittis porttitor nisi a gravida.",
+    React.createElement("br", null),
+    React.createElement("br", null),
+    "Donec mollis nisl quis scelerisque suscipit. Suspendisse eget risus ornare lorem convallis gravida sit amet id nisi. Duis venenatis tortor vitae facilisis auctor. Nulla in pretium odio, et aliquet dui. Sed non venenatis ex. Praesent felis sem, tincidunt et ligula sit amet, vulputate tincidunt tellus. Nam quis eros quis justo aliquet tempus. Nulla imperdiet bibendum velit, eu elementum felis cursus ut. Curabitur eget dui et urna vehicula porttitor sit amet vitae risus. Nulla vitae lacus id quam gravida volutpat at eu elit. Quisque efficitur hendrerit purus, sed viverra elit cursus non. Nunc at scelerisque eros, ut posuere erat. Suspendisse egestas volutpat orci, id ornare nisi aliquet vel.",
+    React.createElement("br", null),
+    React.createElement("br", null),
+    "Donec ultrices lectus lectus, eget mollis nisi venenatis vitae. Morbi cursus quis sapien ut ultrices. Quisque placerat, massa ut accumsan tempor, purus leo sollicitudin leo, eu auctor mauris quam nec nisl. Donec eu dignissim erat. Aenean bibendum blandit leo, sed posuere risus euismod eu. Ut dignissim nisl ex, eget condimentum turpis auctor in. Fusce tristique neque accumsan diam suscipit, vel blandit lorem sodales. Etiam ut tincidunt nisi, ut aliquet felis. Suspendisse vestibulum, velit imperdiet tempor varius, lectus massa consectetur lacus, sagittis scelerisque ante enim non metus. Donec nunc nisl, fermentum scelerisque ornare nec, congue id velit. Praesent vehicula dolor nisl, vel sollicitudin nisl ullamcorper sit amet. Maecenas nec ante eu dui interdum mollis. Maecenas urna enim, maximus et ligula at, aliquet varius arcu. Ut justo arcu, commodo iaculis est ut, ornare posuere arcu.",
+    React.createElement("br", null),
+    React.createElement("br", null),
+    "Curabitur at nunc et erat placerat laoreet aliquet in eros. Proin sagittis dolor libero, ut ultrices elit euismod vitae. Phasellus non tellus tellus. Morbi sit amet auctor lacus. Maecenas commodo sagittis ex nec eleifend. Mauris sit amet augue a sapien vulputate rhoncus. Donec dignissim finibus erat, sit amet suscipit arcu blandit non. Sed pulvinar tincidunt volutpat. Proin pretium leo non enim pretium, vitae porttitor felis pellentesque. Nam tincidunt euismod arcu quis aliquam. Maecenas in lorem et tortor sagittis efficitur. Vestibulum est odio, tristique eget massa vitae, porta tincidunt magna. Curabitur tempus velit ut auctor auctor. Integer ultricies lorem vitae nibh convallis, ac placerat tellus rutrum.",
+    React.createElement("br", null),
+    React.createElement("br", null),
+    "Curabitur ac lorem vitae lorem convallis tincidunt. Aenean luctus, dolor et blandit consectetur, odio risus lacinia ante, non auctor libero turpis accumsan metus. Donec accumsan vitae lacus a varius. Aliquam ac ultricies massa. Praesent vel lacus tempus, interdum nisi eget, varius justo. Pellentesque nec mauris ac dolor fringilla pulvinar. Sed sollicitudin nec lectus nec condimentum. Maecenas molestie blandit ipsum ut finibus. Cras eu nibh congue, porta metus vel, pellentesque tellus.",
+    React.createElement("br", null),
+    React.createElement("br", null),
+    "Morbi feugiat, arcu vel ultricies ultrices, justo odio faucibus purus, vel pharetra augue metus nec purus. Suspendisse sit amet leo ipsum. Vivamus ut velit ut ante consectetur vehicula ut at mi. Nam et ex at nisl ullamcorper maximus nec vel est. Fusce ut est neque. Vivamus dictum, ipsum porta varius tempus, arcu diam sollicitudin risus, in vulputate est orci sit amet ligula. Donec a est vel lacus consectetur dictum."));
+export default LoremIpsum;

package/build/theme/theme.types.d.ts

@@ -1,5 +1,5 @@
-export declare type ColourVariant = 'primary' | 'secondary' | 'tertiary';
-export declare type Status = 'info' | 'success' | 'warn' | 'danger';
+export type ColourVariant = 'primary' | 'secondary' | 'tertiary';
+export type Status = 'info' | 'success' | 'warn' | 'danger';
 export interface IPalette {
     main: string;
     hover: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dtdot/lego",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Some reusable components for building my applications",
   "main": "build/index.js",
   "scripts": {
@@ -18,8 +18,8 @@
     "build"
   ],
   "devDependencies": {
-    "@babel/cli": "^7.18.10",
-    "@babel/core": "^7.19.0",
+    "@babel/cli": "^7.20.7",
+    "@babel/core": "^7.20.7",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@dtdot/eslint-config": "^0.0.6",
@@ -34,14 +34,14 @@
     "@trivago/prettier-plugin-sort-imports": "^4.0.0",
     "@types/identicon.js": "^2.3.1",
     "@types/qrcode": "^1.5.0",
-    "@types/react": "^18.0.20",
-    "@types/react-dom": "^18.0.6",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
     "@types/spark-md5": "^3.0.2",
     "@types/styled-components": "^5.1.26",
-    "@types/uuid": "^8.3.4",
+    "@types/uuid": "^9.0.0",
     "@typescript-eslint/eslint-plugin": "^5.47.0",
     "@typescript-eslint/parser": "^5.47.0",
-    "babel-loader": "^8.2.5",
+    "babel-loader": "^9.1.0",
     "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
@@ -51,19 +51,19 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "styled-components": "^5.3.5",
-    "typescript": "^4.8.3"
+    "typescript": "^4.9.4"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "styled-components": "^5.3.5"
+    "react": "16 - 18",
+    "react-dom": "16 - 18",
+    "styled-components": "5.x"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.2.0",
-    "@fortawesome/free-solid-svg-icons": "^6.2.0",
+    "@fortawesome/fontawesome-svg-core": "^6.2.1",
+    "@fortawesome/free-solid-svg-icons": "^6.2.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@popperjs/core": "^2.11.6",
-    "framer-motion": "^7.3.4",
+    "framer-motion": "^8.0.2",
     "identicon.js": "^2.3.3",
     "qrcode": "^1.5.1",
     "react-popper": "^2.2.5",