Merge pull request #25 from hhimanshu/hhimanshu/dev-21-main-page

feat(DEV-21): Create Project Page

declaration.d.ts

@@ -1 +1,6 @@
 declare module '*.css';
+declare module '*.svg' {
+  import { ReactElement, SVGProps } from 'react';
+  const content: (props: SVGProps<SVGElement>) => ReactElement;
+  export default content;
+}

package.json

@@ -33,6 +33,7 @@
     "@storybook/addon-essentials": "6.3.2",
     "@storybook/addon-links": "6.3.2",
     "@storybook/react": "6.3.2",
+    "@svgr/webpack": "^5.5.0",
     "@testing-library/react": "12.0.0",
     "@types/enzyme": "3.10.8",
     "@types/enzyme-adapter-react-16": "1.0.6",
@@ -57,15 +58,17 @@
     "ts-loader": "9.2.3",
     "ts-node": "10.0.0",
     "typescript": "4.3.5",
+    "url-loader": "^4.1.1",
     "webpack": "5.42.1",
     "webpack-cli": "4.7.2",
     "webpack-dev-server": "3.11.2",
     "webpack-merge": "5.8.0"
   },
   "dependencies": {
+    "@fontsource/poppins": "^4.4.5",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-router-dom": "5.2.0"
+    "react-router-dom": "^5.2.0"
   },
   "release": {
     "branches": [

src/__mocks__/fileMock.js

@@ -1 +1 @@
-module.exports = 'test-file-stub'
+module.exports = 'test-file-stub';

src/components/App.test.tsx

@@ -12,9 +12,7 @@ describe('A test', () => {
 describe('Test App Component', () => {
   it('should display h1', () => {
     render(<App />);
-    const h1 = screen.getByRole('heading');
-    expect(h1.innerHTML).toEqual(
-      'Hello React in TypeScript + Jest + React Testing Library + Storybook'
-    );
+    const headings = screen.getAllByRole('heading');
+    expect(headings[0].innerHTML).toEqual('React TypeScript Starter');
   });
 });

src/components/Home/Button/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import './styles.css';
+
+interface ButtonProps {
+  title: string;
+  onClick: () => void;
+}
+
+export const Button = ({ title, onClick }: ButtonProps) => {
+  return (
+    <div className={'btnContainer'}>
+      <button className={'primaryButton'} onClick={onClick}>
+        <p>{title}</p>
+      </button>
+    </div>
+  );
+};

src/components/Home/Button/styles.css

@@ -0,0 +1,20 @@
+.btnContainer {
+  border: 0px solid black;
+  padding: 20px 0;
+}
+
+.primaryButton {
+  background-color: #000000;
+  text-align: center;
+  border-radius: 4px;
+  cursor: pointer;
+  border: none;
+}
+
+.primaryButton > p {
+  font-family: 'Poppins', serif;
+  font-size: 16px;
+  font-weight: 700;
+  padding: 0 20px;
+  color: #ffffff;
+}

src/components/Home/Discussion/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Section } from '../Section';
+import { Button } from '../Button';
+
+export const Discussion = () => {
+  const openDiscussion = () =>
+    window.open(
+      'https://github.com/hhimanshu/create-react-ts-starter/discussions'
+    );
+
+  return (
+    <Section title={'Have ideas?'} bgColor={'#F9F8F8'}>
+      <Button title={'Start a discussion'} onClick={openDiscussion} />
+    </Section>
+  );
+};

src/components/Home/ExternalLink/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import './styles.css';
+
+interface LinkProps {
+  title: string;
+  url: string;
+}
+
+export const ExternalLink = ({ title, url }: LinkProps) => {
+  return (
+    <a href={url} target={'_blank'} className={'link'}>
+      {title}
+    </a>
+  );
+};

src/components/Home/ExternalLink/styles.css

@@ -0,0 +1,4 @@
+.link {
+  padding: 0 4px;
+  color: #000000;
+}

src/components/Home/Feature/index.tsx

@@ -0,0 +1,26 @@
+import React, { ReactNode } from 'react';
+import Check from '../../../assets/check.svg';
+import './styles.css';
+
+interface FeatureProps {
+  title: string;
+  children: ReactNode;
+}
+
+export const Feature = ({ title, children }: FeatureProps) => {
+  return (
+    <div className={'featureContainer'}>
+      <Check />
+      <FeatureDetails title={title} children={children} />
+    </div>
+  );
+};
+
+const FeatureDetails = ({ title, children }: FeatureProps) => {
+  return (
+    <div className={'feature'}>
+      <h3>{title}</h3>
+      {children}
+    </div>
+  );
+};

src/components/Home/Feature/styles.css

@@ -0,0 +1,15 @@
+.featureContainer {
+  display: flex;
+}
+
+.feature {
+  padding-left: 10px;
+}
+
+.feature > h3 {
+  margin: 0;
+}
+
+.feature > p {
+  margin-top: 10px;
+}

src/components/Home/Features/index.tsx

@@ -0,0 +1,151 @@
+import React from 'react';
+import { Section } from '../Section';
+import { Feature } from '../Feature';
+import './styles.css';
+import { ExternalLink } from '../ExternalLink';
+
+export const Features = () => {
+  return (
+    <Section title={'Features'} bgColor={'#F9F8F8'}>
+      <div className={'features'}>
+        <TypeScriptSupport />
+        <TestingSupport />
+        <StorybookSupport />
+        <LintingSupport />
+        <CISupport />
+        <CDSupport />
+        <RoutingSupport />
+        <ReleaseSupport />
+        <DependenciesUpdateSupport />
+      </div>
+    </Section>
+  );
+};
+
+const TypeScriptSupport = () => {
+  return (
+    <Feature title={'TypeScript Support'}>
+      <p>Write your project code, tests, all in TypeScript</p>
+    </Feature>
+  );
+};
+
+const TestingSupport = () => {
+  return (
+    <Feature title={'Testing Support'}>
+      <p>
+        Write your tests using the
+        <ExternalLink title={'Jest'} url={'https://jestjs.io/'} /> and
+        <ExternalLink
+          title={'React Testing Library'}
+          url={'https://testing-library.com/docs/react-testing-library/intro/'}
+        />
+      </p>
+      <p>Code coverage available using Jest</p>
+    </Feature>
+  );
+};
+
+const StorybookSupport = () => {
+  return (
+    <Feature title={'Storybook Support'}>
+      <p>
+        Start with components-only and view them in
+        <ExternalLink
+          title={'Storybook'}
+          url={'https://storybook.js.org/docs/react/get-started/introduction'}
+        />
+        locally
+      </p>
+    </Feature>
+  );
+};
+
+const LintingSupport = () => {
+  return (
+    <Feature title={'Formatting & Linting support'}>
+      <p>
+        Format your code using
+        <ExternalLink title={'Prettier'} url={'https://prettier.io/'} /> and
+        analyze your code using
+        <ExternalLink title={'ESLint'} url={'https://eslint.org/'} />
+      </p>
+    </Feature>
+  );
+};
+
+const CISupport = () => {
+  return (
+    <Feature title={'CI Support'}>
+      <p>
+        Build and test your project using
+        <ExternalLink
+          title={'Github Actions'}
+          url={'https://github.com/features/actions'}
+        />
+      </p>
+    </Feature>
+  );
+};
+
+const CDSupport = () => {
+  return (
+    <Feature title={'CD Support'}>
+      <p>
+        Ability to deploy your project on
+        <ExternalLink
+          title={'Vercel'}
+          url={'https://vercel.com/docs#deploy-an-existing-project'}
+        />
+        once pull request is merged to main.
+      </p>
+      <p>
+        Additionally, preview your project when you open pull requests using
+        preview URLs
+      </p>
+    </Feature>
+  );
+};
+
+const RoutingSupport = () => {
+  return (
+    <Feature title={'Bundled with React-Router'}>
+      <p>Create your components and hook them up with routes</p>
+      <div className={'routingLinks'}>
+        <ExternalLink title={'Visit Page 1'} url={'/page1'} />
+        <ExternalLink title={'Visit Page 2'} url={'/page2'} />
+      </div>
+    </Feature>
+  );
+};
+
+const ReleaseSupport = () => {
+  return (
+    <Feature title={'Automated Release support'}>
+      <p>
+        Follows
+        <ExternalLink
+          title={'semantic-release'}
+          url={'https://semantic-release.gitbook.io/semantic-release/'}
+        />
+        to automatically release your project once code is merged to main
+      </p>
+    </Feature>
+  );
+};
+
+const DependenciesUpdateSupport = () => {
+  return (
+    <Feature title={'Up-to date dependencies'}>
+      <p>
+        Using{' '}
+        <ExternalLink
+          title={'renovate'}
+          url={'https://docs.renovatebot.com/install-github-app/'}
+        />
+        , you do not have to remember or manually fiddle with dependency version
+        changes
+      </p>
+    </Feature>
+  );
+};

src/components/Home/Features/styles.css

@@ -0,0 +1,9 @@
+.features > * {
+  padding-bottom: 15px;
+}
+
+.routingLinks {
+  display: flex;
+  flex-direction: column;
+  padding: 10px 0;
+}

src/components/Home/GetStarted/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Section } from '../Section';
+import { Button } from '../Button';
+
+export const GetStarted = () => {
+  const openReadMe = () =>
+    window.open('https://github.com/hhimanshu/create-react-ts-starter#readme');
+
+  return (
+    <Section title={'Ready to get started?'}>
+      <Button title={'Follow README.md'} onClick={openReadMe} />
+    </Section>
+  );
+};

src/components/Home/Header/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import './styles.css';
+
+export const Header = () => {
+  return (
+    <div className={'header'}>
+      <h1>React TypeScript Starter</h1>
+      <iframe
+        src='https://ghbtns.com/github-btn.html?user=hhimanshu&repo=create-react-ts-starter&type=star&count=true&size=large'
+        frameBorder='0'
+        scrolling='0'
+        width='170'
+        height='30'
+        title='GitHub'
+      />
+    </div>
+  );
+};

src/components/Home/Header/styles.css

@@ -0,0 +1,6 @@
+.header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 50px 0;
+}

src/components/Home/Section/index.tsx

@@ -0,0 +1,21 @@
+import React, { ReactElement } from 'react';
+import './styles.css';
+
+interface SectionProps {
+  title: string;
+  children: ReactElement | ReactElement[];
+  bgColor?: string;
+}
+
+export const Section = ({
+  title,
+  children,
+  bgColor = '#FFFFFF',
+}: SectionProps) => {
+  return (
+    <section className={'section'} style={{ backgroundColor: `${bgColor}` }}>
+      <h2>{title}</h2>
+      {children}
+    </section>
+  );
+};