Add example

Author: Lewis Llobera

README.md

@@ -0,0 +1 @@
+declare module '*.svg';

example/.gitignore renamed to examples/example-reach-router/.gitignore

@@ -0,0 +1,19 @@
+{
+  "name": "react-netlify-identity-example",
+  "version": "1.0.0",
+  "author": "Lewis Llobera <[email protected]>",
+  "license": "MIT",
+  "dependencies": {
+    "react": "^16.10.1",
+    "react-dom": "^16.10.1",
+    "react-netlify-identity": "^0.1.9",
+    "react-router-dom": "^5.1.2"
+  },
+  "devDependencies": {
+    "@types/react": "^16.9.4",
+    "@types/react-dom": "^16.9.1",
+    "@types/react-router-dom": "^5.1.0",
+    "styled-components": "^4.4.0",
+    "typescript": "^3.6.2"
+  }
+}

example/README.md renamed to examples/example-reach-router/README.md

@@ -0,0 +1,46 @@
+import React from 'react';
+import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom';
+import {
+  IdentityContextProvider,
+  useIdentityContext,
+} from 'react-netlify-identity';
+
+import { GlobalStyles } from './components';
+import { CreateAccount, Home, LogIn, Welcome } from './views';
+
+interface Props {
+  component: React.FunctionComponent;
+  exact?: boolean;
+  path: string;
+}
+
+const PublicRoute: React.FunctionComponent<Props> = (props: Props) => {
+  const { isLoggedIn } = useIdentityContext();
+  return isLoggedIn ? <Redirect to="/home" /> : <Route {...props} />;
+};
+
+const PrivateRoute: React.FunctionComponent<Props> = (props: Props) => {
+  const { isLoggedIn } = useIdentityContext();
+  return isLoggedIn ? <Route {...props} /> : <Redirect to="/welcome" />;
+};
+
+export const App: React.FunctionComponent = () => {
+  const url = 'https://react-netlify-identity-example.netlify.com';
+
+  return (
+    <>
+      <GlobalStyles />
+      <IdentityContextProvider url={url}>
+        <BrowserRouter>
+          <Switch>
+            <PublicRoute exact path="/" component={Welcome} />
+            <PublicRoute path="/welcome" component={Welcome} />
+            <PublicRoute path="/createaccount" component={CreateAccount} />
+            <PublicRoute path="/login" component={LogIn} />
+            <PrivateRoute path="/home" component={Home} />
+          </Switch>
+        </BrowserRouter>
+      </IdentityContextProvider>
+    </>
+  );
+};

example/functions/async-dadjoke/async-dadjoke.js renamed to examples/example-reach-router/functions/async-dadjoke/async-dadjoke.js

@@ -0,0 +1,3 @@
+import googleLogo from './googleLogo.svg';
+
+export { googleLogo };

example/functions/async-dadjoke/package.json renamed to examples/example-reach-router/functions/async-dadjoke/package.json

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+export const AuthOption = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto 10vh auto;
+  width: 100%;
+`;

example/functions/authEndPoint/authEndPoint.js renamed to examples/example-reach-router/functions/authEndPoint/authEndPoint.js

@@ -0,0 +1 @@
+export { AuthOption } from './AuthOption.styles';

example/functions/authEndPoint/package.json renamed to examples/example-reach-router/functions/authEndPoint/package.json

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+export const AuthText = styled.p`
+  border-bottom: 1px solid lightgray;
+  display: block;
+  font-weight: 700;
+  line-height: 1.4;
+  margin-bottom: 3vh;
+  text-align: center;
+  width: 100%;
+`;

example/index.html renamed to examples/example-reach-router/index.html

@@ -0,0 +1 @@
+export { AuthText } from './AuthText.styles';

example/package.json renamed to examples/example-reach-router/package.json

@@ -0,0 +1,44 @@
+import styled, { keyframes } from 'styled-components';
+
+import { BREAKPOINT } from '../../constants/constants';
+
+const animation = keyframes`
+  from {
+    transform: scale(1);
+  }
+  to {
+    transform: scale(0.9);
+  }
+`;
+
+interface Props {
+  secondary?: boolean;
+}
+
+export const Button = styled.button`
+  align-items: center;
+  background-color: ${(props: Props): string =>
+    props.secondary ? 'transparent' : 'var(--color-accent)'};
+  border-radius: var(--radius-l);
+  color: var(--color-dark);
+  display: flex;
+  font-weight: 700;
+  height: 52px;
+  justify-content: center;
+  margin: 0 auto;
+  transition: 0.5s;
+  width: 300px;
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  :active {
+    animation: ${animation} 0.3s cubic-bezier(0.19, 1, 0.22, 1);
+  }
+
+  @media (max-width: ${BREAKPOINT}px) {
+    width: 280px;
+  }
+`;

example/public/_redirects renamed to examples/example-reach-router/public/_redirects

@@ -0,0 +1 @@
+export { Button } from './Button.styles';

example/public/favicon.ico renamed to examples/example-reach-router/public/favicon.ico

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+import { Button } from '../../components';
+
+export const Logo = styled.img`
+  margin-right: 24px;
+`;
+
+export const StyledButton = styled(Button)`
+  background-color: #4285f4;
+  background-image: none;
+  color: #ffffff;
+`;

example/public/index.html renamed to examples/example-reach-router/public/index.html

@@ -0,0 +1,24 @@
+import React from 'react';
+import { useIdentityContext } from 'react-netlify-identity';
+
+import { Logo, StyledButton } from './ButtonGoogle.styles';
+import { googleLogo } from '../../assets';
+
+interface Props {
+  children: string;
+}
+
+export const ButtonGoogle: React.FunctionComponent<Props> = (props: Props) => {
+  const { loginProvider } = useIdentityContext();
+
+  const logInWithGoogle = (): void => {
+    loginProvider('google');
+  };
+
+  return (
+    <StyledButton onClick={logInWithGoogle}>
+      <Logo src={googleLogo} />
+      {props.children}
+    </StyledButton>
+  );
+};

example/public/manifest.json renamed to examples/example-reach-router/public/manifest.json

@@ -0,0 +1 @@
+export { ButtonGoogle } from './ButtonGoogle';

example/src/App.css renamed to examples/example-reach-router/src/App.css

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+
+import { PAGE_WIDTH } from '../../constants/constants';
+
+interface Props {
+  between?: boolean;
+  paddingBottom?: string;
+  partial?: boolean;
+  row?: boolean;
+}
+
+export const Container = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: ${(props: Props): string => (props.row ? 'row' : 'column')};
+  justify-content: ${(props: Props): string =>
+    props.between ? 'space-between' : 'center'};
+  height: ${(props: Props): string => (props.partial ? '80vh' : '100%')};
+  margin-left: auto;
+  margin-right: auto;
+  max-width: ${PAGE_WIDTH}px;
+  padding-bottom: ${(props: Props): string => {
+    switch (props.paddingBottom) {
+      case 'large':
+        return '200px';
+      case 'medium':
+        return '120px';
+      default:
+        return 'auto';
+    }
+  }};
+  padding-left: var(--padding);
+  padding-right: var(--padding);
+  width: 100%;
+`;

example/src/App.tsx renamed to examples/example-reach-router/src/App.tsx

@@ -0,0 +1 @@
+export { Container } from './Container.styles';

example/src/index.css renamed to examples/example-reach-router/src/index.css

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+import { BREAKPOINT } from '../../constants/constants';
+
+interface Props {
+  narrow?: boolean;
+}
+
+export const Form = styled.form`
+  backdrop-filter: blur(2px);
+  background-color: var(--color-background-translucent);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: ${(props: Props): string => (props.narrow ? '60%' : '100%')};
+
+  @media (max-width: ${BREAKPOINT}px) {
+    width: 100%;
+  }
+`;

example/src/index.tsx renamed to examples/example-reach-router/src/index.tsx

@@ -0,0 +1 @@
+export { Form } from './Form.styles';