@dtdot/lego 0.14.0

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare type ContentSize = 'sm' | 'md' | 'lg' | 'full';
+export interface ContentContentActions {
+    children: React.ReactNode;
+    size?: ContentSize;
+}
+declare const ContentContent: ({ children, size }: ContentContentActions) => JSX.Element;
+export default ContentContent;

package/build/layouts/Content/_ContentContent.component.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import styled from 'styled-components';
+import responsive from '../../responsive/responsive';
+const getWidth = (size) => {
+    switch (size) {
+        case 'sm':
+            return responsive.getWidthFor('mobile');
+        case 'md':
+            return responsive.getWidthFor('tablet');
+        case 'lg':
+            return responsive.getWidthFor('desktop');
+        case 'full':
+        default:
+            return 'calc(100% - 32px)';
+    }
+};
+const ContentOuter = styled.div `
+  display: flex;
+  justify-content: center;
+  padding: 16px;
+`;
+const ContentInner = styled.div `
+  width: ${(props) => getWidth(props.size)};
+`;
+const ContentContent = ({ children, size = 'full' }) => {
+    return (React.createElement(ContentOuter, null,
+        React.createElement(ContentInner, { size: size }, children)));
+};
+export default ContentContent;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface ContentHeaderActions {
+    children: React.ReactNode;
+    actions?: React.ReactNode;
+}
+declare const ContentHeader: ({ children, actions }: ContentHeaderActions) => JSX.Element;
+export default ContentHeader;

package/build/layouts/Content/_ContentHeader.component.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import styled from 'styled-components';
+const HeaderContainer = styled.div `
+  display: flex;
+  justify-content: space-between;
+  padding: 16px;
+`;
+const ActionsContainer = styled.div `
+  display: flex;
+  align-items: center;
+`;
+const ContentHeader = ({ children, actions }) => {
+    return (React.createElement(HeaderContainer, null,
+        React.createElement("div", null, children),
+        actions && React.createElement(ActionsContainer, null, actions)));
+};
+export default ContentHeader;

package/build/layouts/Emphasis/Emphasis.layout.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface EmphasisLayoutProps {
+    children: React.ReactNode;
+}
+declare const EmphasisLayout: ({ children }: EmphasisLayoutProps) => JSX.Element;
+export default EmphasisLayout;

package/build/layouts/Emphasis/Emphasis.layout.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import styled from 'styled-components';
+import responsive from '../../responsive/responsive';
+const EmphasisOuter = styled.div `
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  background-color: ${(props) => props.theme.colours.overlayBackground};
+`;
+const EmphasisInner = styled.div `
+  background-color: ${(props) => props.theme.colours.background};
+
+  width: 600px;
+  padding: 48px;
+
+  ${responsive.useStylesFor('mobile').andSmaller(`
+    width: 100%;
+    height: 100%;
+    padding: 16px;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding-bottom: 128px;
+  `)};
+`;
+const EmphasisLayout = ({ children }) => {
+    return (React.createElement(EmphasisOuter, null,
+        React.createElement(EmphasisInner, null, children)));
+};
+export default EmphasisLayout;

package/build/layouts/Focus/Focus.layout.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface FocusLayoutProps {
+    children: React.ReactNode;
+}
+declare const FocusLayout: ({ children }: FocusLayoutProps) => JSX.Element;
+export default FocusLayout;

package/build/layouts/Focus/Focus.layout.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from 'styled-components';
+import responsive from '../../responsive/responsive';
+const FocusOuter = styled.div `
+  width: 100%;
+
+  background-color: ${(props) => props.theme.colours.background};
+  padding: 32px 16px;
+
+  display: flex;
+  justify-content: center;
+
+  ${responsive.useStylesFor('mobile').andSmaller(`
+    padding-top: 64px;
+  `)};
+`;
+const FocusInner = styled.div `
+  width: ${responsive.getWidthFor('mobile')};
+
+  ${responsive.useStylesFor('mobile').andSmaller(`
+    width: 100%;
+  `)};
+`;
+const FocusLayout = ({ children }) => {
+    return (React.createElement(FocusOuter, null,
+        React.createElement(FocusInner, null, children)));
+};
+export default FocusLayout;

package/build/layouts/Focus/Focus.stories.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react/types-6-0';
+export declare const Standard: () => JSX.Element;
+declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
+export default _default;

package/build/layouts/Focus/Focus.stories.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Button, ControlGroup, FocusLayout, Heading, Input, Spacer, Text } from '../..';
+/* eslint-disable @typescript-eslint/no-empty-function */
+export const Standard = () => (React.createElement(FocusLayout, null,
+    React.createElement(Heading, null, "Lets get setup.."),
+    React.createElement(Spacer, { size: '4x' }),
+    React.createElement(ControlGroup, { variation: 'submission' },
+        React.createElement(Text, null, "Enter your name here. This will be used to identify you when connecting with friends."),
+        React.createElement(ControlGroup.Spacer, null),
+        React.createElement(Input, { name: 'name', placeholder: 'name' }),
+        React.createElement(ControlGroup.Spacer, null),
+        React.createElement(Button, null, "Next"))));
+export default {
+    title: 'Layouts/Focus',
+    component: FocusLayout,
+};

package/build/layouts/Padded/Padded.layout.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface PaddedLayoutProps {
+    children: React.ReactNode;
+}
+declare const PaddedLayout: {
+    ({ children }: PaddedLayoutProps): JSX.Element;
+    Small: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+};
+export default PaddedLayout;

package/build/layouts/Padded/Padded.layout.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import styled from 'styled-components';
+const SmallPaddedLayout = styled.div `
+  padding: 8px;
+`;
+const PaddedLayoutDiv = styled.div `
+  padding: 16px;
+`;
+const PaddedLayout = ({ children }) => React.createElement(PaddedLayoutDiv, null, children);
+PaddedLayout.Small = SmallPaddedLayout;
+export default PaddedLayout;

package/build/layouts/Padded/Padded.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react/types-6-0';
+export declare const Standard: () => JSX.Element;
+export declare const Small: () => JSX.Element;
+declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
+export default _default;

package/build/layouts/Padded/Padded.stories.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { PaddedLayout } from '../..';
+export const Standard = () => (React.createElement("div", { style: { backgroundColor: 'white' } },
+    React.createElement(PaddedLayout, null, "some content....")));
+export const Small = () => (React.createElement("div", { style: { backgroundColor: 'white' } },
+    React.createElement(PaddedLayout.Small, null, "some content....")));
+export default {
+    title: 'Layouts/Padded',
+    component: PaddedLayout,
+};

package/build/responsive/responsive.d.ts

@@ -0,0 +1,13 @@
+export declare type ScreenSize = 'mobile' | 'tablet' | 'desktop' | 'wide';
+export interface IStyleBoundFunctions {
+    andSmaller: (styled: string | TemplateStringsArray, ...templateArgs: any) => string;
+    andLarger: (styled: string | TemplateStringsArray, ...templateArgs: any) => string;
+    only: (styled: string | TemplateStringsArray, ...templateArgs: any) => string;
+}
+declare function useStylesFor(screenSize: ScreenSize): IStyleBoundFunctions;
+declare function getWidthFor(screenSize: ScreenSize): string;
+declare const _default: {
+    useStylesFor: typeof useStylesFor;
+    getWidthFor: typeof getWidthFor;
+};
+export default _default;

package/build/responsive/responsive.js

@@ -0,0 +1,63 @@
+const responsiveScreens = {
+    mobile: {
+        min: 0,
+        max: 480,
+    },
+    tablet: {
+        min: 481,
+        max: 768,
+    },
+    desktop: {
+        min: 769,
+        max: 1200,
+    },
+    wide: {
+        min: 1201,
+        max: 3840,
+    },
+};
+function useStylesFor(screenSize) {
+    if (!screenSize) {
+        return {
+            andSmaller: () => '',
+            andLarger: () => '',
+            only: () => '',
+        };
+    }
+    const screenDefinition = responsiveScreens[screenSize];
+    if (!screenDefinition) {
+        return {
+            andSmaller: () => '',
+            andLarger: () => '',
+            only: () => '',
+        };
+    }
+    return {
+        andSmaller: (styles) => `
+      @media only screen and (max-width: ${screenDefinition.max}px) {
+        ${styles}
+      }
+    `,
+        andLarger: (styles) => `
+      @media only screen and (min-width: ${screenDefinition.min}px) {
+        ${styles}
+      }
+    `,
+        only: (styles) => `
+      @media only screen and (min-width: ${screenDefinition.min}px) and (max-width: ${screenDefinition.max}px) {
+        ${styles}
+      }
+    `,
+    };
+}
+function getWidthFor(screenSize) {
+    if (!screenSize) {
+        return '';
+    }
+    const screenDefinition = responsiveScreens[screenSize];
+    if (!screenDefinition) {
+        return '';
+    }
+    return `${screenDefinition.max}px`;
+}
+export default { useStylesFor, getWidthFor };

package/build/screens/Login/Login.screen.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export interface LoginData {
+    email?: string;
+    password?: string;
+}
+export interface LoginScreenProps {
+    handleLogin: (data: LoginData) => void;
+    onRegisterClicked: () => void;
+    loading?: boolean;
+    error?: string;
+}
+declare const LoginScreen: ({ loading, error, handleLogin, onRegisterClicked }: LoginScreenProps) => JSX.Element;
+export default LoginScreen;

package/build/screens/Login/Login.screen.js

@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import Button from '../../components/Button/Button.component';
+import ControlGroup from '../../components/ControlGroup/ControlGroup.component';
+import Form from '../../components/Form/Form.component';
+import Heading from '../../components/Heading/Heading.component';
+import Input from '../../components/Input/Input.component';
+import Spacer from '../../components/Spacer/Spacer.component';
+import EmphasisLayout from '../../layouts/Emphasis/Emphasis.layout';
+const ErrorText = styled.div `
+  font-family: ${(props) => props.theme.fonts.default.family};
+  font-size: ${(props) => props.theme.fonts.default.size};
+
+  line-height: ${(props) => props.theme.fonts.default.size};
+  min-height: ${(props) => props.theme.fonts.default.size};
+
+  color: ${(props) => props.theme.colours.statusDanger.main};
+`;
+const CreateAccountMessage = styled.div `
+  font-family: ${(props) => props.theme.fonts.default.family};
+  font-size: ${(props) => props.theme.fonts.default.size};
+
+  color: ${(props) => props.theme.colours.defaultFont};
+`;
+const CreateAccountButton = styled.button `
+  font-family: ${(props) => props.theme.fonts.default.family};
+  font-size: ${(props) => props.theme.fonts.default.size};
+  color: ${(props) => props.theme.colours.defaultFont};
+
+  outline: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  background-color: transparent;
+
+  font-weight: normal;
+
+  box-shadow: none;
+  text-decoration: underline;
+  cursor: pointer;
+`;
+const LoginScreen = ({ loading, error, handleLogin, onRegisterClicked }) => {
+    const [value, setValue] = useState({ email: '', password: '' });
+    return (React.createElement(EmphasisLayout, null,
+        React.createElement(Heading, null, "Welcome"),
+        React.createElement(Spacer, { size: '4x' }),
+        React.createElement(Form, { value: value, onChange: setValue, onSubmit: () => handleLogin(value) },
+            React.createElement(ControlGroup, null,
+                React.createElement(ErrorText, null, error),
+                React.createElement(Input, { name: 'email', placeholder: 'Email', type: 'text' }),
+                React.createElement(Input, { name: 'password', placeholder: 'Password', type: 'password' }),
+                React.createElement(ControlGroup.Spacer, null),
+                React.createElement(Button, { type: 'submit', loading: loading }, "Login"))),
+        React.createElement(Spacer, { size: '6x' }),
+        React.createElement(CreateAccountMessage, null,
+            `Don't have an account?`,
+            " ",
+            React.createElement(CreateAccountButton, { onClick: onRegisterClicked }, "sign up now"))));
+};
+export default LoginScreen;

package/build/screens/Register/Register.screen.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export interface RegisterData {
+    email?: string;
+    password?: string;
+}
+export interface RegisterScreenProps {
+    handleRegister: (data: RegisterData) => void;
+    loading?: boolean;
+    error?: string;
+}
+declare const RegisterScreen: ({ loading, error, handleRegister }: RegisterScreenProps) => JSX.Element;
+export default RegisterScreen;

package/build/screens/Register/Register.screen.js

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import Button from '../../components/Button/Button.component';
+import ControlGroup from '../../components/ControlGroup/ControlGroup.component';
+import Form from '../../components/Form/Form.component';
+import Heading from '../../components/Heading/Heading.component';
+import Input from '../../components/Input/Input.component';
+import Spacer from '../../components/Spacer/Spacer.component';
+import EmphasisLayout from '../../layouts/Emphasis/Emphasis.layout';
+const ErrorText = styled.div `
+  font-family: ${(props) => props.theme.fonts.default.family};
+  font-size: ${(props) => props.theme.fonts.default.size};
+
+  line-height: ${(props) => props.theme.fonts.default.size};
+  min-height: ${(props) => props.theme.fonts.default.size};
+
+  color: ${(props) => props.theme.colours.statusDanger.main};
+`;
+const RegisterScreen = ({ loading, error, handleRegister }) => {
+    const [value, setValue] = useState({ email: '', password: '' });
+    return (React.createElement(EmphasisLayout, null,
+        React.createElement(Heading, null, "Register"),
+        React.createElement(Spacer, { size: '4x' }),
+        React.createElement(Form, { value: value, onChange: setValue, onSubmit: () => handleRegister(value) },
+            React.createElement(ControlGroup, null,
+                React.createElement(ErrorText, null, error),
+                React.createElement(Input, { name: 'email', placeholder: 'Email', type: 'text' }),
+                React.createElement(Input, { name: 'password', placeholder: 'Password', type: 'password' }),
+                React.createElement(ControlGroup.Spacer, null),
+                React.createElement(Button, { type: 'submit', loading: loading }, "Create Account")))));
+};
+export default RegisterScreen;

package/build/screens/Verification/Verification.screen.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export interface VerificationData {
+    code?: string;
+}
+export interface VerificationScreenProps {
+    handleVerification: (data: VerificationData) => void;
+    message?: string;
+    loading?: boolean;
+    error?: string;
+}
+declare const VerificationScreen: ({ message, loading, error, handleVerification }: VerificationScreenProps) => JSX.Element;
+export default VerificationScreen;

package/build/screens/Verification/Verification.screen.js

@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import Button from '../../components/Button/Button.component';
+import ControlGroup from '../../components/ControlGroup/ControlGroup.component';
+import Form from '../../components/Form/Form.component';
+import Heading from '../../components/Heading/Heading.component';
+import Input from '../../components/Input/Input.component';
+import Spacer from '../../components/Spacer/Spacer.component';
+import EmphasisLayout from '../../layouts/Emphasis/Emphasis.layout';
+const ErrorText = styled.div `
+  font-family: ${(props) => props.theme.fonts.default.family};
+  font-size: ${(props) => props.theme.fonts.default.size};
+
+  line-height: ${(props) => props.theme.fonts.default.size};
+  min-height: ${(props) => props.theme.fonts.default.size};
+
+  color: ${(props) => props.theme.colours.statusDanger.main};
+`;
+const MessageContainer = styled.div `
+  font-family: ${(props) => props.theme.fonts.default.family};
+  font-size: ${(props) => props.theme.fonts.default.size};
+
+  color: ${(props) => props.theme.colours.defaultFont};
+`;
+const VerificationScreen = ({ message, loading, error, handleVerification }) => {
+    const [value, setValue] = useState({ code: '' });
+    return (React.createElement(EmphasisLayout, null,
+        React.createElement(Heading, null, "Verification"),
+        React.createElement(Spacer, { size: '1x' }),
+        React.createElement(MessageContainer, null, message),
+        React.createElement(Spacer, { size: '2x' }),
+        React.createElement(Form, { value: value, onChange: setValue, onSubmit: () => handleVerification(value) },
+            React.createElement(ControlGroup, null,
+                React.createElement(ErrorText, null, error),
+                React.createElement(Input, { name: 'code', placeholder: 'code', type: 'text' }),
+                React.createElement(ControlGroup.Spacer, null),
+                React.createElement(Button, { type: 'submit', loading: loading }, "Verify")))));
+};
+export default VerificationScreen;

package/build/theme/dark.theme.d.ts

@@ -0,0 +1,3 @@
+import { DefaultTheme } from 'styled-components';
+declare const darkTheme: DefaultTheme;
+export default darkTheme;

package/build/theme/dark.theme.js

@@ -0,0 +1,73 @@
+const darkTheme = {
+    name: 'dark',
+    colours: {
+        background: '#424448',
+        overlayBackground: '#a4caf9',
+        primary: {
+            main: '#61a4f5',
+            hover: '#83b7f7',
+            contrastText: '#191919',
+        },
+        secondary: {
+            main: '#424448',
+            hover: '#4b4e54',
+            contrastText: '#e2e2e2',
+        },
+        tertiary: {
+            main: '#4b4e54',
+            hover: '#575b63',
+            contrastText: '#e2e2e2',
+        },
+        defaultFont: '#e2e2e2',
+        secondaryFont: '#adabab',
+        secondaryFontHover: '##989898',
+        defaultBorder: '#989898',
+        faintBorder: '#cccccc1f',
+        controlBackground: '#5e6167',
+        controlBorder: '#565656',
+        controlBorderFocus: '#4289de',
+        controlBorderHover: '#4a4949',
+        controlPlaceholder: '#949494',
+        uploadBackground: '#5e6167',
+        uploadIcon: '#e2e2e2',
+        cardBackground: '#494b50',
+        statusInfo: {
+            main: '#83bfff',
+            contrast: '#191919',
+        },
+        statusSuccess: {
+            main: '#8ddaa9',
+            contrast: '#191919',
+        },
+        statusWarn: {
+            main: '#f1a374',
+            contrast: '#191919',
+        },
+        statusDanger: {
+            main: '#e87a7a',
+            contrast: '#191919',
+        },
+    },
+    fonts: {
+        default: {
+            family: `'Roboto', sans-serif`,
+            size: '16px',
+            weight: '400',
+        },
+        heading: {
+            family: `'Roboto', sans-serif`,
+            size: '36px',
+            weight: '500',
+        },
+        subHeading: {
+            family: `'Roboto', sans-serif`,
+            size: '24px',
+            weight: '400',
+        },
+    },
+    shadows: {
+        small: '0px 0px 2px rgba(0, 0, 0, 0.15)',
+        medium: '0px 0px 4px rgba(0, 0, 0, 0.15)',
+    },
+};
+export default darkTheme;

package/build/theme/default.theme.d.ts

@@ -0,0 +1,3 @@
+import { DefaultTheme } from 'styled-components';
+declare const defaultTheme: DefaultTheme;
+export default defaultTheme;

package/build/theme/default.theme.js

@@ -0,0 +1,74 @@
+import colours from '../colours/colours';
+const defaultTheme = {
+    name: 'default',
+    colours: {
+        background: colours.grey10,
+        overlayBackground: colours.grey50,
+        primary: {
+            main: colours.grey70,
+            hover: 'red',
+            contrastText: colours.grey10,
+        },
+        secondary: {
+            main: colours.yellow,
+            hover: 'red',
+            contrastText: colours.grey90,
+        },
+        tertiary: {
+            main: colours.yellow,
+            hover: 'red',
+            contrastText: colours.grey90,
+        },
+        defaultFont: colours.grey90,
+        secondaryFont: colours.grey35,
+        secondaryFontHover: colours.grey40,
+        defaultBorder: colours.grey20,
+        faintBorder: colours.grey20,
+        controlBackground: colours.white,
+        controlBorder: colours.grey20,
+        controlBorderFocus: colours.grey50,
+        controlBorderHover: colours.grey30,
+        controlPlaceholder: colours.grey30,
+        uploadBackground: colours.grey20,
+        uploadIcon: colours.grey10,
+        cardBackground: colours.white,
+        statusInfo: {
+            main: colours.blue,
+            contrast: colours.blue,
+        },
+        statusSuccess: {
+            main: colours.green,
+            contrast: colours.green,
+        },
+        statusWarn: {
+            main: colours.yellow,
+            contrast: colours.yellow,
+        },
+        statusDanger: {
+            main: colours.red,
+            contrast: colours.red,
+        },
+    },
+    fonts: {
+        default: {
+            family: `'Roboto', sans-serif`,
+            size: '16px',
+            weight: '400',
+        },
+        heading: {
+            family: `'Roboto', sans-serif`,
+            size: '36px',
+            weight: '400',
+        },
+        subHeading: {
+            family: `'Roboto', sans-serif`,
+            size: '24px',
+            weight: '400',
+        },
+    },
+    shadows: {
+        small: '0px 0px 2px rgba(0, 0, 0, 0.15)',
+        medium: '0px 0px 4px rgba(0, 0, 0, 0.15)',
+    },
+};
+export default defaultTheme;

package/build/theme/helpers/getThemeControlColours.d.ts

@@ -0,0 +1,10 @@
+import { DefaultTheme } from 'styled-components';
+declare const _default: (theme: DefaultTheme) => {
+    font: string;
+    background: string;
+    border: string;
+    borderFocus: string;
+    borderHover: string;
+    placeholder: string;
+};
+export default _default;

package/build/theme/helpers/getThemeControlColours.js

@@ -0,0 +1,10 @@
+export default (theme) => {
+    return {
+        font: theme.colours.defaultFont,
+        background: theme.colours.controlBackground,
+        border: theme.colours.controlBorder,
+        borderFocus: theme.colours.controlBorderFocus,
+        borderHover: theme.colours.controlBorderHover,
+        placeholder: theme.colours.controlPlaceholder,
+    };
+};

package/build/theme/helpers/getThemeStatusColour.d.ts

@@ -0,0 +1,4 @@
+import { DefaultTheme } from 'styled-components';
+import { Status } from '../theme.types';
+declare const _default: (status: Status, theme: DefaultTheme) => import("../../types/styled").IStatus;
+export default _default;