@strapi/admin 4.0.0-next.12 → 4.0.0-next.16

package/admin/src/pages/HomePage/HomeHeader.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { Subtitle, H1 } from '@strapi/parts/Text';
+import { Link } from '@strapi/parts/Link';
+import { Stack } from '@strapi/parts/Stack';
+import { Box } from '@strapi/parts/Box';
+import { Button } from '@strapi/parts/Button';
+import NextIcon from '@strapi/icons/NextIcon';
+
+const WordWrap = styled(Subtitle)`
+  word-break: break-word;
+`;
+
+const StackCustom = styled(Stack)`
+  align-items: flex-start;
+`;
+
+const HomeHeader = ({ hasCreatedContentType, onCreateCT }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <div>
+      <Box paddingLeft={6} paddingBottom={10}>
+        <StackCustom size={5}>
+          <H1>
+            {hasCreatedContentType
+              ? formatMessage({
+                  id: 'app.components.HomePage.welcome.again',
+                  defaultMessage: 'Welcome 👋',
+                })
+              : formatMessage({
+                  id: 'app.components.HomePage.welcome',
+                  defaultMessage: 'Welcome on board!',
+                })}
+          </H1>
+          <WordWrap textColor="neutral600">
+            {hasCreatedContentType
+              ? formatMessage({
+                  id: 'app.components.HomePage.welcomeBlock.content.again',
+                  defaultMessage:
+                    'We hope you are making progress on your project! Feel free to read the latest news about Strapi. We are giving our best to improve the product based on your feedback.',
+                })
+              : formatMessage({
+                  id: 'app.components.HomePage.welcomeBlock.content',
+                  defaultMessage:
+                    'Congrats! You are logged as the first administrator. To discover the powerful features provided by Strapi, we recommend you to create your first Content type!',
+                })}
+          </WordWrap>
+          {hasCreatedContentType ? (
+            <Link href="https://strapi.io/blog">
+              {formatMessage({
+                id: 'app.components.HomePage.button.blog',
+                defaultMessage: 'See more on the blog',
+              })}
+            </Link>
+          ) : (
+            <Button size="L" onClick={onCreateCT} endIcon={<NextIcon />}>
+              {formatMessage({
+                id: 'app.components.HomePage.create',
+                defaultMessage: 'Create your first Content type',
+              })}
+            </Button>
+          )}
+        </StackCustom>
+      </Box>
+    </div>
+  );
+};
+
+HomeHeader.defaultProps = {
+  hasCreatedContentType: undefined,
+  onCreateCT: undefined,
+};
+
+HomeHeader.propTypes = {
+  hasCreatedContentType: PropTypes.bool,
+  onCreateCT: PropTypes.func,
+};
+
+export default HomeHeader;

package/admin/src/pages/HomePage/SocialLinks.js

@@ -0,0 +1,202 @@
+/**
+ *
+ * SocialLink
+ */
+
+import React from 'react';
+import styled from 'styled-components';
+import { useIntl } from 'react-intl';
+import { H3, Text } from '@strapi/parts/Text';
+import { Box } from '@strapi/parts/Box';
+import { Stack } from '@strapi/parts/Stack';
+import { Grid, GridItem } from '@strapi/parts/Grid';
+import { LinkButton } from '@strapi/parts/LinkButton';
+import { Link } from '@strapi/parts/Link';
+import ExternalLink from '@strapi/icons/ExternalLink';
+import Github from '@strapi/icons/Github';
+import Slack from '@strapi/icons/Slack';
+import Reddit from '@strapi/icons/Reddit';
+import Strapi from '@strapi/icons/Strapi';
+import Twitter from '@strapi/icons/Twitter';
+import Discourse from '@strapi/icons/Discourse';
+
+const StyledReddit = styled(Reddit)`
+  > path:first-child {
+    fill: #ff4500;
+  }
+  > path:last-child {
+    fill: ${({ theme }) => theme.colors.neutral0};
+  }
+`;
+const StyledStrapi = styled(Strapi)`
+  > path:first-child {
+    fill: #8e75ff;
+  }
+  > path:nth-child(2) {
+    fill: #8e75ff;
+  }
+  > path:nth-child(3) {
+    fill: #8e75ff;
+  }
+`;
+
+const StyledTwitter = styled(Twitter)`
+  path {
+    fill: #1da1f2 !important;
+  }
+`;
+
+const StyledDiscourse = styled(Discourse)`
+  > path:first-child {
+    fill: #231f20;
+  }
+  > path:nth-child(2) {
+    fill: #fff9ae;
+  }
+  > path:nth-child(3) {
+    fill: #00aeef;
+  }
+  > path:nth-child(4) {
+    fill: #00a94f;
+  }
+  > path:nth-child(5) {
+    fill: #f15d22;
+  }
+  > path:nth-child(6) {
+    fill: #e31b23;
+  }
+`;
+
+const socialLinks = [
+  {
+    name: 'Github',
+    link: 'https://github.com/strapi/strapi/',
+    icon: <Github fill="#7289DA" />,
+    alt: 'github',
+  },
+  {
+    name: 'Discord',
+    link: 'https://slack.strapi.io/',
+    icon: <Slack />,
+    alt: 'slack',
+  },
+  {
+    name: 'Reddit',
+    link: 'https://www.reddit.com/r/Strapi/',
+    icon: <StyledReddit />,
+    alt: 'reddit',
+  },
+  {
+    name: 'Twitter',
+    link: 'https://twitter.com/strapijs',
+    icon: <StyledTwitter />,
+    alt: 'twitter',
+  },
+  {
+    name: 'Medium',
+    link: 'https://medium.com/@strapi',
+    icon: <StyledStrapi />,
+    alt: 'medium',
+  },
+  {
+    name: 'Forum',
+    link: 'https://forum.strapi.io',
+    icon: <StyledDiscourse />,
+    alt: 'forum',
+  },
+  {
+    name: 'Career',
+    link: 'https://strapi.io/careers',
+    icon: <StyledStrapi />,
+    alt: 'career',
+  },
+];
+
+const LinkCustom = styled(LinkButton)`
+  display: flex;
+  align-items: center;
+  border: none;
+
+  svg {
+    width: ${({ theme }) => theme.spaces[6]};
+    height: ${({ theme }) => theme.spaces[6]};
+  }
+
+  span {
+    word-break: keep-all;
+  }
+`;
+
+const GridGap = styled(Grid)`
+  row-gap: ${({ theme }) => theme.spaces[2]};
+  column-gap: ${({ theme }) => theme.spaces[4]};
+`;
+
+const WordWrap = styled(Text)`
+  word-break: break-word;
+`;
+
+const SocialLinks = () => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Box
+      as="aside"
+      aria-labelledby="join-the-community"
+      background="neutral0"
+      hasRadius
+      paddingRight={5}
+      paddingLeft={5}
+      paddingTop={6}
+      paddingBottom={6}
+      shadow="tableShadow"
+    >
+      <Box paddingBottom={7}>
+        <Stack size={5}>
+          <Stack size={3}>
+            <H3 as="h2" id="join-the-community">
+              {formatMessage({
+                id: 'app.components.HomePage.community',
+                defaultMessage: 'Join the community',
+              })}
+            </H3>
+            <WordWrap textColor="neutral600">
+              {formatMessage({
+                id: 'app.components.HomePage.community.content',
+                defaultMessage:
+                  'Discuss with team members, contributors and developers on different channels',
+              })}
+            </WordWrap>
+          </Stack>
+          <Link
+            href="https://portal.productboard.com/strapi/1-roadmap/tabs/2-under-consideration"
+            endIcon={<ExternalLink />}
+          >
+            {formatMessage({
+              id: 'app.components.HomePage.roadmap',
+              defaultMessage: 'See our road map',
+            })}
+          </Link>
+        </Stack>
+      </Box>
+      <GridGap>
+        {socialLinks.map(socialLink => {
+          return (
+            <GridItem col={6} s={12} key={socialLink.name}>
+              <LinkCustom
+                size="L"
+                startIcon={socialLink.icon}
+                variant="tertiary"
+                href={socialLink.link}
+              >
+                {socialLink.name}
+              </LinkCustom>
+            </GridItem>
+          );
+        })}
+      </GridGap>
+    </Box>
+  );
+};
+
+export default SocialLinks;

package/admin/src/pages/HomePage/index.js

@@ -1,76 +1,43 @@
 /*
- *
  * HomePage
  *
  */
-/* eslint-disable */
+
 import React, { memo, useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { get, upperFirst } from 'lodash';
-import { auth, LoadingIndicatorPage } from '@strapi/helper-plugin';
-import PageTitle from '../../components/PageTitle';
+import styled from 'styled-components';
+import { Helmet } from 'react-helmet';
+import { useHistory } from 'react-router-dom';
+import { LoadingIndicatorPage } from '@strapi/helper-plugin';
+import { Layout } from '@strapi/parts/Layout';
+import { Main } from '@strapi/parts/Main';
+import { Box } from '@strapi/parts/Box';
+import { Grid, GridItem } from '@strapi/parts/Grid';
+import Logo from '../../assets/images/homepage-logo.png';
 import { useModels } from '../../hooks';
+import SocialLinks from './SocialLinks';
+import HomeHeader from './HomeHeader';
+import ContentBlocks from './ContentBlocks';
 
-import useFetch from './hooks';
-import { ALink, Block, Container, LinkWrapper, P, Wave, Separator } from './components';
-import BlogPost from './BlogPost';
-import SocialLink from './SocialLink';
-
-const FIRST_BLOCK_LINKS = [
-  {
-    link:
-      'https://strapi.io/documentation/developer-docs/latest/getting-started/quick-start.html#_4-create-a-category-content-type',
-    contentId: 'app.components.BlockLink.documentation.content',
-    titleId: 'app.components.BlockLink.documentation',
-  },
-  {
-    link: 'https://github.com/strapi/foodadvisor',
-    contentId: 'app.components.BlockLink.code.content',
-    titleId: 'app.components.BlockLink.code',
-  },
-];
-
-const SOCIAL_LINKS = [
-  {
-    name: 'GitHub',
-    link: 'https://github.com/strapi/strapi/',
-  },
-  {
-    name: 'Discord',
-    link: 'https://discord.strapi.io/',
-  },
-  {
-    name: 'Reddit',
-    link: 'https://www.reddit.com/r/Strapi/',
-  },
-  {
-    name: 'Twitter',
-    link: 'https://twitter.com/strapijs',
-  },
-  {
-    name: 'Blog',
-    link: 'https://strapi.io/blog',
-  },
-  {
-    name: 'Forum',
-    link: 'https://forum.strapi.io',
-  },
-  {
-    name: 'Careers',
-    link: 'https://strapi.io/careers',
-  },
-];
+const LogoContainer = styled(Box)`
+  position: absolute;
+  top: 0;
+  right: 0;
+  img {
+    width: ${150 / 16}rem;
+  }
+`;
 
-const HomePage = ({ history: { push } }) => {
-  const { error, isLoading, posts } = useFetch();
-  // Temporary until we develop the menu API
+const HomePage = () => {
+  // // Temporary until we develop the menu API
   const { collectionTypes, singleTypes, isLoading: isLoadingForModels } = useModels();
 
+  const { push } = useHistory();
   const handleClick = e => {
     e.preventDefault();
 
     push(
-      '/plugins/content-type-builder/content-types/plugin::users-permissions.user?modalType=contentType&kind=collectionType&actionType=create&settingType=base&forTarget=contentType&headerId=content-type-builder.modalForm.contentType.header-create&header_icon_isCustom_1=false&header_icon_name_1=contentType&header_label_1=null'
+      '/plugins/content-type-builder/content-types/plugins::users-permissions.user?modalType=contentType&kind=collectionType&actionType=create&settingType=base&forTarget=contentType&headerId=content-type-builder.modalForm.contentType.header-create&header_icon_isCustom_1=false&header_icon_name_1=contentType&header_label_1=null'
     );
   };
 
@@ -86,153 +53,35 @@ const HomePage = ({ history: { push } }) => {
     return <LoadingIndicatorPage />;
   }
 
-  const headerId = hasAlreadyCreatedContentTypes
-    ? 'HomePage.greetings'
-    : 'app.components.HomePage.welcome';
-  const username = get(auth.getUserInfo(), 'firstname', '');
-  const linkProps = hasAlreadyCreatedContentTypes
-    ? {
-        id: 'app.components.HomePage.button.blog',
-        href: 'https://strapi.io/blog/',
-        onClick: () => {},
-        type: 'blog',
-        target: '_blank',
-      }
-    : {
-        id: 'app.components.HomePage.create',
-        href: '',
-        onClick: handleClick,
-        type: 'documentation',
-      };
-
   return (
-    <>
-      <FormattedMessage id="HomePage.helmet.title">
-        {title => <PageTitle title={title[0]} />}
+    <Layout>
+      <FormattedMessage id="HomePage.helmet.title" defaultMessage="Homepage">
+        {title => <Helmet title={title[0]} />}
       </FormattedMessage>
-      <Container className="container-fluid">
-        <div className="row">
-          <div className="col-lg-8 col-md-12">
-            <Block>
-              <Wave />
-              <FormattedMessage
-                id={headerId}
-                values={{
-                  name: upperFirst(username),
-                }}
-              >
-                {msg => <h2 id="mainHeader">{msg}</h2>}
-              </FormattedMessage>
-              {hasAlreadyCreatedContentTypes ? (
-                <FormattedMessage id="app.components.HomePage.welcomeBlock.content.again">
-                  {msg => <P>{msg}</P>}
-                </FormattedMessage>
-              ) : (
-                <FormattedMessage id="HomePage.welcome.congrats">
-                  {congrats => {
-                    return (
-                      <FormattedMessage id="HomePage.welcome.congrats.content">
-                        {content => {
-                          return (
-                            <FormattedMessage id="HomePage.welcome.congrats.content.bold">
-                              {boldContent => {
-                                return (
-                                  <P>
-                                    <b>{congrats}</b>&nbsp;
-                                    {content}&nbsp;
-                                    <b>{boldContent}</b>
-                                  </P>
-                                );
-                              }}
-                            </FormattedMessage>
-                          );
-                        }}
-                      </FormattedMessage>
-                    );
-                  }}
-                </FormattedMessage>
-              )}
-              {hasAlreadyCreatedContentTypes && (
-                <div style={{ marginTop: isLoading ? 60 : 50 }}>
-                  {posts.map((post, index) => (
-                    <BlogPost
-                      {...post}
-                      key={post.link}
-                      isFirst={index === 0}
-                      isLoading={isLoading}
-                      error={error}
-                    />
-                  ))}
-                </div>
-              )}
-              <FormattedMessage id={linkProps.id}>
-                {msg => (
-                  <ALink
-                    rel="noopener noreferrer"
-                    {...linkProps}
-                    style={{ verticalAlign: ' bottom', marginBottom: 5 }}
-                  >
-                    {msg}
-                  </ALink>
-                )}
-              </FormattedMessage>
-              <Separator style={{ marginTop: 37, marginBottom: 36 }} />
-              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-                {FIRST_BLOCK_LINKS.map((data, index) => {
-                  const type = index === 0 ? 'doc' : 'code';
-
-                  return (
-                    <LinkWrapper href={data.link} target="_blank" key={data.link} type={type}>
-                      <FormattedMessage id={data.titleId}>
-                        {title => <p className="bold">{title}</p>}
-                      </FormattedMessage>
-                      <FormattedMessage id={data.contentId}>
-                        {content => <p>{content}</p>}
-                      </FormattedMessage>
-                    </LinkWrapper>
-                  );
-                })}
-              </div>
-            </Block>
-          </div>
-
-          <div className="col-md-12 col-lg-4">
-            <Block style={{ paddingRight: 30, paddingBottom: 0 }}>
-              <FormattedMessage id="HomePage.community">{msg => <h2>{msg}</h2>}</FormattedMessage>
-              <FormattedMessage id="app.components.HomePage.community.content">
-                {content => <P style={{ marginTop: 7, marginBottom: 0 }}>{content}</P>}
-              </FormattedMessage>
-              <FormattedMessage id="HomePage.roadmap">
-                {msg => (
-                  <ALink
-                    rel="noopener noreferrer"
-                    href="https://portal.productboard.com/strapi/1-public-roadmap/tabs/2-under-consideration"
-                    target="_blank"
-                  >
-                    {msg}
-                  </ALink>
-                )}
-              </FormattedMessage>
-
-              <Separator style={{ marginTop: 18 }} />
-              <div
-                className="row social-wrapper"
-                style={{
-                  display: 'flex',
-                  margin: 0,
-                  marginTop: 36,
-                  marginLeft: -15,
-                }}
-              >
-                {SOCIAL_LINKS.map((value, key) => (
-                  <SocialLink key={key} {...value} />
-                ))}
-              </div>
-            </Block>
-          </div>
-        </div>
-      </Container>
-    </>
+      <Main>
+        <LogoContainer>
+          <img alt="" aria-hidden src={Logo} />
+        </LogoContainer>
+        <Box padding={10}>
+          <Grid>
+            <GridItem col={8} s={12}>
+              <HomeHeader
+                onCreateCT={handleClick}
+                hasCreatedContentType={hasAlreadyCreatedContentTypes}
+              />
+            </GridItem>
+          </Grid>
+          <Grid gap={6}>
+            <GridItem col={8} s={12}>
+              <ContentBlocks />
+            </GridItem>
+            <GridItem col={4} s={12}>
+              <SocialLinks />
+            </GridItem>
+          </Grid>
+        </Box>
+      </Main>
+    </Layout>
   );
 };