New homepage

home/App.tsx

@@ -1,28 +1,87 @@
+import './assets/main.css';
+
 import React from 'react';
-import GlobalStyle from './components/GlobalStyle';
-import Home from "./Home";
-import DynamicRoute from "./DynamicRoute";
-import Polygons from "./Polygons";
-import Element from "./Element";
-import RouteInfo from './RouteInfo'
-import MapElement from './MapElement'
+import Box from './components/Box'
+import GitHubButton from 'react-github-btn'
+import BashSyntaxHighlighter from './components/BashSyntaxHighlighter'
+import { CustomMap } from './components/CustomMap'
+// import Home from "./Home";
+// import DynamicRoute from "./DynamicRoute";
+// import Polygons from "./Polygons";
+// import Element from "./Element";
+// import RouteInfo from './RouteInfo'
+// import MapElement from './MapElement'
 
 declare global {
   interface Window {
     SMap: any;
   }
 }
 
+//
+// const Title = styled.div`
+//   font-size: 40px;
+//   font-weight: 700;
+//   text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+// `
+//
+// const Header = styled.div`
+//   padding: 40px;
+//   text-align: center;
+// `
+
+// const Content = styled.div`
+//   display: flex;
+//   flex-flow: column;
+//   row-gap: 40px;
+// `
+
 const App = () => {
   return (
     <>
-      <GlobalStyle />
-      <Home />
-      <MapElement />
-      <Element />
-      <DynamicRoute />
-      <Polygons />
-      <RouteInfo />
+      <div className="p-10 text-center">
+        <div className="font-bold text-2xl">react-mapycz</div>
+        <p className="p-1">Easy to use integration of Mapy.cz into React using Mapy.cz API.</p>
+        <GitHubButton href="https://github.com/flsy/react-mapycz" data-icon="octicon-star" data-size="large" data-show-count={true} aria-label="Star flsy/react-mapycz on GitHub">Star</GitHubButton>
+      </div>
+      <div className="flex flex-col gap-y-5 px-5 lg:px-10 xl:px-20 items-center">
+        <Box
+          title="Installation"
+          buttonLabel="Getting started"
+          description={<>
+            <div className="py-2">Install library and peer dependencies. Both React and React-DOM versions are restricted to <span className="font-semibold">{'>'}=16.13.1</span> so feel free to choose any version that fits this range and your needs.</div>
+            <p className="py-1">NPM:</p>
+            <BashSyntaxHighlighter>npm i react-mapycz react-dom@16.13.1 react@16.13.1</BashSyntaxHighlighter>
+            <p className="py-1">Yarn:</p>
+            <BashSyntaxHighlighter>yarn add react-mapycz react-dom@16.13.1 react@16.13.1</BashSyntaxHighlighter>
+          </>}
+        />
+
+        <Box
+          title="Getting started"
+          buttonLabel="Controls"
+          map={<CustomMap />}
+          description={<>
+            <p>Map is a main element of react-mapycz library.</p>
+            <p>Available properties:</p>
+            <ul>
+              <li>center: <i>optional</i> Center coords</li>
+              <li>width: <i>optional</i> Element width, defaults to 100%</li>
+              <li>height: <i>optional</i> Element height, defaults to 300px</li>
+              <li>zoom: <i>optional</i> Default map zoom, defaults to 13</li>
+              <li>minZoom: <i>optional</i> Minimal map zoom, defaults to 1</li>
+              <li>maxZoom: <i>optional</i> Max map zoom, defaults to 21</li>
+              <li>baseLayers: <i>optional</i> Map layers, array of values from <a target="_blank" href="https://github.com/flsy/react-mapycz/blob/master/src/BaseLayers.tsx">BaseLayers</a></li>
+            </ul>
+          </>}
+        />
+      </div>
+      {/*<Home />*/}
+      {/*<MapElement />*/}
+      {/*<Element />*/}
+      {/*<DynamicRoute />*/}
+      {/*<Polygons />*/}
+      {/*<RouteInfo />*/}
     </>
   )
 }

home/assets/main.css

@@ -0,0 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;500;600;700&display=swap');
+
+@tailwind base;
+@tailwind utilities;
+@tailwind components;

home/components/BashSyntaxHighlighter.tsx

@@ -0,0 +1,17 @@
+import SyntaxHighlighter from 'react-syntax-highlighter'
+import { githubGist } from 'react-syntax-highlighter/dist/esm/styles/hljs'
+import React from 'react'
+
+interface Props {
+  children: string;
+}
+
+const BashSyntaxHighlighter = ({ children }: Props) => {
+  return  (
+    <SyntaxHighlighter  customStyle={{ border: '1px solid #D2D2D2', borderRadius: '2px', fontSize: '13px' }} language="bash" style={githubGist}>
+      {children}
+    </SyntaxHighlighter>
+  )
+}
+
+export default BashSyntaxHighlighter;

home/components/Box.tsx

@@ -0,0 +1,80 @@
+import styled from 'styled-components'
+import React, { ReactNode } from 'react'
+// import { Map } from '../../src'
+import { FiArrowDown } from "react-icons/fi";
+//
+// const Wrapper = styled.div`
+//   background-color: #fff;
+//   border-radius: 10px;
+//   padding: 40px;
+//   margin: auto;
+//   width: 1000px;
+// `
+//
+// const Col = styled.div`
+//   display: flex;
+//   column-gap: 40px;
+// `
+//
+// const StyledMap = styled(Map)`
+//   border-radius: 4px;
+// `
+
+
+const Button = styled.div`
+  color: #3EC564;
+  border: 1px solid #3EC564;
+  border-radius: 4px;
+  padding: 5px 10px;
+  bottom: 0;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  column-gap: 10px;
+
+  &:hover {
+    background: #3EC564;
+    color: #fff;
+  }
+`
+
+// const Content = styled.div`
+//   display: flex;
+//   flex-flow: column;
+//   justify-content: space-between;
+//   align-items: flex-start;
+// `
+//
+// const Loader = styled.div`
+//   width: 500px;
+//   height: 300px;
+//   display: flex;
+//   align-items: center;
+//   justify-content: center;
+// `
+
+interface Props {
+  title: string;
+  map?: ReactNode;
+  description: ReactNode;
+  buttonLabel?: string;
+}
+
+const Box = ({ buttonLabel, title, description, map }: Props) =>  {
+  return (
+    <>
+      <div className="rounded-xl flex flex-col md:flex-row gap-x-3 w-full max-w-7xl">
+        <div className="w-full flex flex-col justify-center">
+          <div>
+            <div className="bold text-primary text-xl pb-1 border-b-2">{title}</div>
+            {description}
+          </div>
+        </div>
+        {!!map && <div className="w-full">{map}</div>}
+      </div>
+      <div className="flex justify-center">{buttonLabel && <Button>{buttonLabel} <FiArrowDown /></Button>}</div>
+    </>
+  )
+}
+
+export default Box;

home/components/CustomMap.tsx

@@ -0,0 +1,12 @@
+import { FiLoader } from 'react-icons/fi'
+import React, { ReactNode } from 'react'
+import { Map } from '../../src'
+
+type Props = {
+  children?: ReactNode;
+}
+
+export const CustomMap = ({ children }: Props) => {
+  return <Map className="rounded-md" loadingElement={<div className="rounded-md w-full h-[300px] bg-[#efefef] flex justify-center items-center"><FiLoader /></div>}>{children}</Map>
+}
+

home/index.html

@@ -4,7 +4,6 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;lang=en" />
     <title>react-mapycz library</title>
 
     <!-- Google tag (gtag.js) -->

home/index.tsx

@@ -2,4 +2,4 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 
-ReactDOM.render(<App />, document.querySelector('#root'));
+ReactDOM.render(<App />, document.querySelector('#root'));

package.json

@@ -10,6 +10,7 @@
     "start": "webpack serve --mode development",
     "build": "rm -rf ./lib && tsc -p tsconfig.build.json",
     "build:home": "webpack --mode production",
+    "serve": "serve home-static",
     "predeploy": "yarn build:home",
     "deploy": "NODE_DEBUG=gh-pages gh-pages -d home-static"
   },
@@ -33,18 +34,25 @@
     "@types/react-syntax-highlighter": "^13.5.0",
     "@types/styled-components": "^5.1.4",
     "@types/webpack": "^5.0.0",
+    "css-loader": "^6.7.3",
     "fork-ts-checker-webpack-plugin": "^7.2.13",
     "gh-pages": "^3.0.0",
     "html-webpack-plugin": "^5.0.0",
+    "postcss-loader": "^7.2.4",
+    "postcss-preset-env": "^8.3.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-github-btn": "^1.2.0",
+    "react-icons": "^4.4.0",
     "react-syntax-highlighter": "^15.2.1",
+    "serve": "^14.2.0",
+    "style-loader": "^3.3.2",
+    "tailwindcss": "^3.3.2",
     "ts-loader": "^9.2.6",
     "typescript": "4.4.2",
-    "webpack": "^5.64.0",
-    "webpack-cli": "^4.9.1",
-    "webpack-dev-server": "^4.5.0"
+    "webpack": "^5.81.0",
+    "webpack-cli": "^5.0.2",
+    "webpack-dev-server": "^4.13.3"
   },
   "peerDependencies": {
     "react": ">=16.13.1",

postcss.config.js

@@ -0,0 +1,7 @@
+const tailwindcss = require('tailwindcss');
+module.exports = {
+    plugins: [
+        'postcss-preset-env',
+        tailwindcss
+    ],
+};

src/Map.tsx

@@ -21,6 +21,7 @@ export interface MapProps {
   eventNameListener?: string;
   animateCenterZoom?: boolean;
   mapRef?: React.RefObject<SMap>;
+  className?: string;
 }
 
 // Override PreflightCSS presets
@@ -73,7 +74,7 @@ const Map = (props: MapProps) => {
 
   return (
       <MapContext.Provider value={map}>
-        <StyledMap style={{width, height}} ref={mapNode}>
+        <StyledMap style={{width, height}} className={props.className} ref={mapNode}>
           {map && children}
         </StyledMap>
       </MapContext.Provider>