HomePage

jest.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  preset: 'ts-jest',
+  snapshotSerializers: ['enzyme-to-json/serializer'],
+  testEnvironment: 'node',
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+    '.+\\.(css|styl|less|sass|scss)$': 'jest-transform-css',
+  },
+  testRegex: '/src/__tests__/.*\\.test.(ts|tsx)$',
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+  setupFiles: ['<rootDir>/src/__tests__/setupTests.ts'],
+  collectCoverage: false,
+};

modules.d.ts

@@ -0,0 +1,4 @@
+declare module '@storybook/react';
+declare module 'markdown-to-jsx';
+declare module 'react-element-to-jsx-string';
+declare module 'react-router-dom';

package.json

@@ -3,19 +3,21 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@types/jest": "24.0.15",
+    "@types/jest": "^24.0.15",
     "@types/node": "12.0.10",
-    "@types/react": "16.8.22",
-    "@types/react-dom": "16.8.4",
+    "@types/react": "^16.8.23",
+    "@types/react-dom": "^16.8.4",
+    "markdown-to-jsx": "^6.10.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-router-dom": "^5.0.1",
     "react-scripts": "3.0.1",
     "typescript": "3.5.2"
   },
   "scripts": {
     "start": "webpack-dev-server --mode development --open --hot",
     "build": "webpack --mode production",
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "jest --watch",
     "check-types": "tsc",
     "lint:ts": "tslint 'src/**/*.{ts,tsx,js}'",
     "storybook": "start-storybook -p 9009 -s public",
@@ -46,18 +48,36 @@
     "@storybook/addon-links": "^5.1.9",
     "@storybook/addons": "^5.1.9",
     "@storybook/react": "^5.1.9",
+    "@types/enzyme": "^3.10.1",
+    "@types/enzyme-adapter-react-16": "^1.0.5",
+    "@types/react-test-renderer": "^16.8.2",
     "babel-loader": "^8.0.6",
     "css-loader": "^3.0.0",
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.14.0",
+    "enzyme-to-json": "^3.3.5",
     "html-webpack-plugin": "^3.2.0",
     "image-webpack-loader": "^5.0.0",
+    "jest": "^24.8.0",
+    "jest-transform-css": "^2.0.0",
+    "node-sass": "^4.12.0",
     "prettier": "1.18.2",
+    "react-element-to-jsx-string": "^14.0.2",
+    "react-test-renderer": "^16.8.6",
+    "sass-loader": "^7.1.0",
     "style-loader": "^0.23.1",
+    "ts-jest": "^24.0.2",
     "tslint": "^5.18.0",
     "tslint-config-prettier": "^1.18.0",
     "tslint-immutable": "^6.0.0",
     "tslint-react": "^4.0.0",
     "webpack": "^4.35.0",
     "webpack-cli": "^3.3.5",
     "webpack-dev-server": "^3.7.2"
+  },
+  "jest": {
+    "moduleNameMapper": {
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/__mocks__/fileMock.js"
+    }
   }
 }

src/App.tsx

@@ -1,12 +1,14 @@
 import React from 'react';
 
+import Routes from './routes';
+
 import './App.css';
 
 function App() {
   return (
-    <div className="App">
-      content
-    </div>
+    <Routes>
+      <div className="App"></div>
+    </Routes>
   );
 }
 

src/__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

src/__tests__/Logo.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import Logo from '../components/Logo';
+
+describe('Logo', () => {
+  it('should render correctly', () => {
+    const mounted = shallow(<Logo image="" />);
+    const result = mounted.contains(
+      <div className="header-home menu logo">
+        <img src="" alt="Logo" height="35px" width="35px" />
+        <p className="header-home menu logo title">
+          <span id="span-title-1">React Pure</span>
+          <span id="span-title-2">Loaders</span>
+        </p>
+      </div>
+    );
+    expect(result).toBeTruthy();
+  });
+});

src/__tests__/MenuItem.test.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+
+import MenuItem from '../components/MenuItem';
+
+describe('Menu Item', () => {
+  it('should render correctly', () => {
+    const result = shallow(<MenuItem name="Home" />).contains(
+      <p className="menu-item">Home</p>
+    );
+    expect(result).toBeTruthy();
+  });
+});

src/__tests__/Section.test.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import Section from '../components/Section';
+
+describe('Section', () => {
+  it('should render correctly given a title', () => {
+    const mounted = shallow(<Section title="What" />);
+    const result = mounted.contains(
+      <div className="section">
+        <h2 className="section-title">What</h2>
+      </div>
+    );
+    expect(result).toBeTruthy();
+  });
+  it('should render a title and a description', () => {
+    const mounted = shallow(<Section title="Greeting" description="Hello" />);
+    const result = mounted.contains(
+      <div className="section">
+        <h2 className="section-title">Greeting</h2>
+        <p className="section-description">Hello</p>
+      </div>
+    );
+    expect(result).toBeTruthy();
+  });
+  it('should render a children', () => {
+    const mounted = shallow(
+      <Section title="Greeting">
+        <h3>Hello</h3>
+      </Section>
+    );
+    const result = mounted.contains(
+      <div className="section">
+        <h2 className="section-title">Greeting</h2>
+        <div className="section-home-children">
+          <h3>Hello</h3>
+        </div>
+      </div>
+    );
+    expect(result).toBeTruthy();
+  });
+});

src/__tests__/SocialMedia.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import SocialMedia from '../components/SocialMedia';
+
+describe('Social Media', () => {
+  it('should render correctly', () => {
+    const mounted = shallow(<SocialMedia path="" desc="" link="" title="" />);
+    const result = mounted.contains(
+      <div className="social-media">
+        <a href="" title="">
+          <img src="" alt="" />
+        </a>
+      </div>
+    );
+    expect(result).toBeTruthy();
+  });
+});

src/__tests__/setupTests.ts

@@ -0,0 +1,4 @@
+import enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+enzyme.configure({ adapter: new Adapter() });

src/components/ContributingSection/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+const Contributing = () => (
+  <>
+    <p>
+      To Contributing to this project, you can access the{' '}
+      <a
+        href="https://github.com/jameswlane/react-pure-loaders"
+        title="Loaders Repo"
+      >
+        repository
+      </a>{' '}
+      and check the source code. To contribute to this website,{' '}
+      <a
+        href="https://github.com/jameswlane/reactpureloaders.io"
+        title="Website Repo"
+      >
+        {' '}
+        check this repository
+      </a>
+      .
+    </p>
+  </>
+);
+
+export default Contributing;

src/components/DescriptionSection/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+const Description = () => (
+  <>
+    <p>
+      React Pure Loaders is a package that disponibilizes loaders for your
+      Project. Those loaders are used as components, using color and a loading
+      variables as properties.
+    </p>
+    <p>
+      The component expects the to receive the color as a string with the
+      hexadecimal code and the loading as a boolean, that is true by default.
+    </p>
+  </>
+);
+
+export default Description;

src/components/GettingStartedSection/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import Markdown from 'markdown-to-jsx';
+import reactElementToJSXString from 'react-element-to-jsx-string';
+
+import code from '../../utils/code';
+import BallBeat from '../../utils/FakeLoader';
+
+const GettingStarted = () => (
+  <>
+    <Markdown children={code} />
+    <p className="code-snippet">{reactElementToJSXString(<BallBeat />)}</p>
+    <p>
+      As no props are passed, the component will use the default values for the
+      color and loading state.If you want to personalize,use a string for the
+      color and a boolean for loading.
+    </p>
+    <p className="code-snippet">
+      {reactElementToJSXString(<BallBeat color={'#123abc'} loading />)}
+    </p>
+  </>
+);
+
+export default GettingStarted;

src/components/Logo/index.tsx

@@ -0,0 +1,17 @@
+import React, { FunctionComponent } from 'react';
+
+interface OwnProps {
+  image: any;
+}
+
+const Logo: FunctionComponent<OwnProps> = ({ image }) => (
+  <div className="header-home menu logo">
+    <img src={image} alt="Logo" height="35px" width="35px" />
+    <p className="header-home menu logo title">
+      <span id="span-title-1">React Pure</span>
+      <span id="span-title-2">Loaders</span>
+    </p>
+  </div>
+);
+
+export default Logo;

src/components/Menu/index.tsx

@@ -0,0 +1,27 @@
+import React, { FunctionComponent } from 'react';
+
+import { Link } from 'react-router-dom';
+
+import MenuItem from '../MenuItem';
+
+import './style.scss';
+
+const Menu: FunctionComponent = () => {
+  return (
+    <div className="menu-items">
+      <MenuItem name="Home" />
+      <a
+        href="https://reactpureloaders.io/?path=/story/"
+        title="Demo on Storybook"
+        target="_blank"
+      >
+        <MenuItem name="Demo" />
+      </a>
+      <Link to="/docs">
+        <MenuItem name="Docs" />
+      </Link>
+    </div>
+  );
+};
+
+export default Menu;

src/components/Menu/style.scss

@@ -0,0 +1,19 @@
+.menu-items {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 20%;
+  min-width: 300px;
+  height: 40px;
+  margin-right: 5%;
+  a {
+    text-decoration: none;
+  }
+  @media screen and (max-width: 350px) {
+    min-width: 50%;
+  }
+  @media screen and (min-width: 350px) and (max-width: 576px) {
+    min-width: 50%;
+    margin-right: 15%;
+  }
+}

src/components/MenuItem/index.tsx

@@ -0,0 +1,13 @@
+import React, { FunctionComponent } from 'react';
+
+import './style.scss';
+
+interface OwnProps {
+  name: string;
+}
+
+const MenuItem: FunctionComponent<OwnProps> = ({ name }) => (
+  <p className="menu-item">{name}</p>
+);
+
+export default MenuItem;

src/components/MenuItem/style.scss

@@ -0,0 +1,21 @@
+$gray: #191b1f;
+$bg-hover: #34009a;
+$color-hover: #fff;
+
+.menu-item {
+  color: $gray;
+  padding: 10px;
+  font-size: 18px;
+  &:hover {
+    background: $bg-hover;
+    color: $color-hover;
+    cursor: pointer;
+    border-radius: 5px;
+  }
+  @media screen and (max-width: 350px) {
+    font-size: 12px;
+  }
+  @media screen and (min-width: 350px) and (max-width: 500px) {
+    font-size: 14px;
+  }
+}

src/components/Section/index.tsx

@@ -0,0 +1,23 @@
+import React, { FunctionComponent } from 'react';
+
+import './style.scss';
+
+interface OwnProps {
+  title: string;
+  description?: string;
+  children?: any;
+}
+
+const Section: FunctionComponent<OwnProps> = ({
+  title,
+  description,
+  children,
+}) => (
+  <div className="section">
+    <h2 className="section-title">{title}</h2>
+    {description && <p className="section-description">{description}</p>}
+    {children && <div className="section-home-children">{children}</div>}
+  </div>
+);
+
+export default Section;