@dtdot/lego 0.19.12 → 1.0.0

package/build/components/ActionMenu/ActionMenu.component.js

@@ -1,9 +1,9 @@
-import { faEllipsisV } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { useCallback, useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
-import styled from 'styled-components';
 import { usePopper } from 'react-popper';
+import { faEllipsisV } from '@fortawesome/free-solid-svg-icons';
+import styled from 'styled-components';
 import Button from '../Button/Button.component';
 import ActionMenuPanel from './_ActionMenuPanel.component';
 const StyledIcon = styled(FontAwesomeIcon) `

package/build/components/ActionMenu/_ActionMenuItem.component.js

@@ -1,5 +1,5 @@
-import { motion } from 'framer-motion';
 import React from 'react';
+import { motion } from 'framer-motion';
 import styled, { useTheme } from 'styled-components';
 const ActionMenuItemOuter = styled(motion.div) `
   padding: 12px 16px;

package/build/components/Card/Card.component.js

@@ -1,5 +1,5 @@
-import { motion } from 'framer-motion';
 import React, { useEffect, useRef, useState } from 'react';
+import { motion } from 'framer-motion';
 import styled, { useTheme } from 'styled-components';
 import responsive from '../../responsive/responsive';
 import CardContext from './Card.context';

package/build/components/Card/_CardActions.component.js

@@ -1,6 +1,6 @@
-import { AnimatePresence, motion } from 'framer-motion';
 import React, { useContext, useEffect } from 'react';
 import { createPortal } from 'react-dom';
+import { AnimatePresence, motion } from 'framer-motion';
 import styled from 'styled-components';
 import CardContext from './Card.context';
 const actionsHeight = 32;

package/build/components/Checklist/Checklist.component.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
 import { motion, LayoutGroup } from 'framer-motion';
+import styled from 'styled-components';
 import ChecklistItem from './_ChecklistItem.component';
 const ListDivider = styled.div `
   width: 100%;

package/build/components/Checklist/_ChecklistItem.component.js

@@ -1,5 +1,5 @@
-import { motion } from 'framer-motion';
 import React from 'react';
+import { motion } from 'framer-motion';
 import styled, { useTheme } from 'styled-components';
 const Outerlabel = styled(motion.label) `
   position: relative;

package/build/components/ImageUpload/ImageUpload.component.js

@@ -1,8 +1,8 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { useContext, useRef, useState } from 'react';
 import { faCloudUploadAlt, faExclamationCircle, faSearch } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import styled from 'styled-components';
 import { motion } from 'framer-motion';
+import styled from 'styled-components';
 import FileContext from '../../contexts/File.context';
 import useFormNode from '../Form/useFormNode.hook';
 import Loader from '../Loader/Loader.component';

package/build/components/InlineCard/InlineCard.component.js

@@ -1,15 +1,15 @@
-import { motion, useMotionValue, useTransform } from 'framer-motion';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { useContext, useState } from 'react';
-import styled, { useTheme } from 'styled-components';
 import useMeasure from 'react-use-measure';
+import { faCheck } from '@fortawesome/free-solid-svg-icons';
+import { motion, useMotionValue, useTransform } from 'framer-motion';
+import styled, { useTheme } from 'styled-components';
 import { responsive } from '../..';
 import getThemeStatusColour from '../../theme/helpers/getThemeStatusColour';
 import InlineCardContent from './_InlineCardContent.component';
 import InlineCardMedia from './_InlineCardMedia.component';
 import InlineCardMeta from './_InlineCardMeta.component';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import InlineCardSelectionContext from './_InlineCardSelection.context';
-import { faCheck } from '@fortawesome/free-solid-svg-icons';
 const CardWrapper = styled.div `
   position: relative;
   height: 64px;

package/build/components/Input/Input.component.js

@@ -1,8 +1,8 @@
 // eslint-disable-next-line @typescript-eslint/no-use-before-define
-import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { motion } from 'framer-motion';
 import React, { useState } from 'react';
+import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
+import { motion } from 'framer-motion';
 import styled, { css } from 'styled-components';
 import getThemeControlColours from '../../theme/helpers/getThemeControlColours';
 import useFormNode, { getValue } from '../Form/useFormNode.hook';

package/build/components/LiveList/LiveList.component.js

@@ -1,7 +1,7 @@
-import { faPlusCircle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { motion } from 'framer-motion';
 import React, { useCallback, useContext, useEffect } from 'react';
+import { faPlusCircle } from '@fortawesome/free-solid-svg-icons';
+import { motion } from 'framer-motion';
 import styled from 'styled-components';
 import { v4 as uuidv4 } from 'uuid';
 import useKeypress from '../../hooks/useKeyPress';

package/build/components/LiveList/_LiveListRow.js

@@ -1,10 +1,10 @@
-import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { motion } from 'framer-motion';
 import React, { useContext, useEffect, useRef, useState } from 'react';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import { motion } from 'framer-motion';
 import styled from 'styled-components';
-import { FocusContext } from './_FocusContext';
 import Input from '../Input/Input.component';
+import { FocusContext } from './_FocusContext';
 const InputContainer = styled(motion.div) `
   position: relative;
   margin: 2px 0;

package/build/components/Menu/Menu.component.js

@@ -1,5 +1,5 @@
-import { AnimatePresence, motion } from 'framer-motion';
 import React, { useState } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
 import styled from 'styled-components';
 import responsive from '../../responsive/responsive';
 import MenuContent from './_MenuContent.component';

package/build/components/Menu/_MenuHeading.component.js

@@ -1,6 +1,6 @@
-import { faBars } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
+import { faBars } from '@fortawesome/free-solid-svg-icons';
 import styled from 'styled-components';
 import responsive from '../../responsive/responsive';
 const MenuHeadingDiv = styled.div `

package/build/components/Menu/_MenuItem.component.js

@@ -1,6 +1,6 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
 import styled from 'styled-components';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 const MenuItemOuter = styled.div `
   display: flex;
 `;

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import { useIsScreenSize } from '../../responsive/responsive';
-import DesktopMinimalMenuContainer from './desktop/_DesktopMinimalMenuContainer.component';
-import MobileMinimalMenuContainer from './mobile/_MobileMinimalMenuContainer.component';
 import MinimalMenuItem from './_MinimalMenuItem.component';
 import MinimalMenuPage from './_MinimalMenuPage.component';
+import DesktopMinimalMenuContainer from './desktop/_DesktopMinimalMenuContainer.component';
+import MobileMinimalMenuContainer from './mobile/_MobileMinimalMenuContainer.component';
 const MinimalMenu = ({ children }) => {
     const isMobile = useIsScreenSize('mobile');
     if (isMobile) {

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useIsScreenSize } from '../../responsive/responsive';
-import MobileMinimalMenuItem from './mobile/_MobileMinimalMenuItem.component';
 import DesktopMinimalMenuItem from './desktop/_DesktopMinimalMenuItem.component';
+import MobileMinimalMenuItem from './mobile/_MobileMinimalMenuItem.component';
 const MinimalMenuItem = ({ icon, active, onClick, 'data-cy': dataCy }) => {
     const isMobile = useIsScreenSize('mobile');
     if (isMobile) {

package/build/components/MinimalMenu/desktop/_DesktopMinimalMenuItem.component.js

@@ -1,6 +1,6 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { motion } from 'framer-motion';
 import React, { useMemo } from 'react';
+import { motion } from 'framer-motion';
 import styled, { useTheme } from 'styled-components';
 const ItemContainer = styled(motion.div) `
   position: relative;

package/build/components/MinimalMenu/mobile/_MobileMinimalMenuContainer.component.js

@@ -1,5 +1,5 @@
-import { motion } from 'framer-motion';
 import React, { useState } from 'react';
+import { motion } from 'framer-motion';
 import styled from 'styled-components';
 import { mobileMenuDefaultTransition } from './_MobileMenu.constants';
 import MobileMenuBump from './_MobileMenuBump.component';

package/build/components/MinimalMenu/mobile/_MobileMinimalMenuItem.component.js

@@ -1,10 +1,10 @@
-import React, { useContext, useEffect, useRef } from 'react';
-import styled from 'styled-components';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React, { useContext, useEffect, useRef } from 'react';
 import { motion } from 'framer-motion';
-import MobileMenuBumpContext from './_MobileMenuBump.context';
-import { mobileMenuDefaultTransition } from './_MobileMenu.constants';
+import styled from 'styled-components';
 import useWindowDimensions from '../../../hooks/useWindowDimensions';
+import { mobileMenuDefaultTransition } from './_MobileMenu.constants';
+import MobileMenuBumpContext from './_MobileMenuBump.context';
 const ItemContainer = styled.div `
   position: relative;
 

package/build/components/Modal/Modal.component.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import styled from 'styled-components';
 import { motion, AnimatePresence } from 'framer-motion';
+import styled from 'styled-components';
 import { Loader } from '../..';
+import zIndexConstants from '../../constants/zIndex.constants';
 import responsive from '../../responsive/responsive';
 import ModalContext from './_Modal.context';
 import ModalBody from './_ModalBody.component';
 import ModalHeader from './_ModalHeader.component';
-import zIndexConstants from '../../constants/zIndex.constants';
 const getResponsiveSize = (size) => {
     switch (size) {
         case 'sm':

package/build/components/Modal/_ModalHeader.component.js

@@ -1,7 +1,7 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { useContext } from 'react';
-import styled from 'styled-components';
 import { faTimes } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import styled from 'styled-components';
 import ModalContext from './_Modal.context';
 const HeaderContainer = styled.div `
   display: flex;

package/build/components/Notifications/Notifications.component.js

@@ -1,10 +1,10 @@
 // eslint-disable-next-line @typescript-eslint/no-use-before-define
 import React from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
 import styled from 'styled-components';
 import { Notification, Spacer } from '../..';
-import responsive from '../../responsive/responsive';
 import zIndexConstants from '../../constants/zIndex.constants';
-import { AnimatePresence, motion } from 'framer-motion';
+import responsive from '../../responsive/responsive';
 const NotificationContainer = styled.div `
   position: fixed;
   bottom: 20px;

package/build/components/ProfileImage/ProfileImage.component.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import styled from 'styled-components';
 import IdenticonObj from 'identicon.js';
-import colours from '../../colours/colours';
 import SparkMD5 from 'spark-md5';
+import styled from 'styled-components';
+import colours from '../../colours/colours';
 const ImageContainer = styled.div `
   height: 36px;
   width: 36px;

package/build/contexts/File.context.js

@@ -1,8 +1,12 @@
 import { createContext } from 'react';
 const FileContext = createContext({
     // eslint-disable-next-line
-    upload: (file) => { throw new Error('ERROR: Upload function must be bound in a context'); },
+    upload: (file) => {
+        throw new Error('ERROR: Upload function must be bound in a context');
+    },
     // eslint-disable-next-line
-    getUrl: (key) => { throw new Error('ERROR: Get URL function must be bound in a context'); },
+    getUrl: (key) => {
+        throw new Error('ERROR: Get URL function must be bound in a context');
+    },
 });
 export default FileContext;

package/build/layouts/Content/Content.layout.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
-import ContentHeader from './_ContentHeader.component';
 import ContentContent from './_ContentContent.component';
+import ContentHeader from './_ContentHeader.component';
 const ContentContainer = styled.div ``;
 const ContentLayout = ({ children }) => {
     return React.createElement(ContentContainer, null, children);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dtdot/lego",
-  "version": "0.19.12",
+  "version": "1.0.0",
   "description": "Some reusable components for building my applications",
   "main": "build/index.js",
   "scripts": {
@@ -9,7 +9,8 @@
     "watch": "npm run build -- --watch",
     "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook",
+    "pretty": "prettier --write \"./**/*.{js,jsx,ts,tsx,json}\""
   },
   "author": "Simon Pratt <19920260+simonpratt@users.noreply.github.com>",
   "license": "ISC",
@@ -21,9 +22,16 @@
     "@babel/core": "^7.19.0",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@storybook/addon-actions": "^6.4.19",
-    "@storybook/addon-essentials": "^6.4.19",
-    "@storybook/react": "^6.1.21",
+    "@dtdot/eslint-config": "^0.0.6",
+    "@storybook/addon-actions": "^6.5.15",
+    "@storybook/addon-essentials": "^6.5.15",
+    "@storybook/addon-interactions": "^6.5.15",
+    "@storybook/addon-links": "^6.5.15",
+    "@storybook/builder-webpack5": "^6.5.15",
+    "@storybook/manager-webpack5": "^6.5.15",
+    "@storybook/react": "^6.5.15",
+    "@storybook/testing-library": "^0.0.13",
+    "@trivago/prettier-plugin-sort-imports": "^4.0.0",
     "@types/identicon.js": "^2.3.1",
     "@types/qrcode": "^1.5.0",
     "@types/react": "^18.0.20",
@@ -31,19 +39,17 @@
     "@types/spark-md5": "^3.0.2",
     "@types/styled-components": "^5.1.26",
     "@types/uuid": "^8.3.4",
-    "@typescript-eslint/eslint-plugin": "^5.37.0",
-    "@typescript-eslint/parser": "^5.37.0",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
+    "@typescript-eslint/parser": "^5.47.0",
     "babel-loader": "^8.2.5",
-    "eslint": "^8.23.1",
+    "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.8",
+    "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "prettier": "^2.7.1",
-    "prettier-eslint": "^15.0.1",
+    "prettier": "^2.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook-addon-styled-component-theme": "^2.0.0",
     "styled-components": "^5.3.5",
     "typescript": "^4.8.3"
   },