Los-Crackitos · rbaraffe · May 19, 2020 · Jun 11, 2020 · Jun 11, 2020 · Jun 12, 2020
@@ -0,0 +1,13 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [
+    [
+      "import",
+      {
+        "libraryName": "antd",
+        "style": true
+      }
+    ],
+    "inline-react-svg"
+  ]
+}
@@ -0,0 +1,8 @@
+import React from 'react';
+import '../../styles/logo.module.scss';
+
+const Logo = () => {
+  return <div className="logo" title="Excelante Logo" />;
+};
+
+export default Logo;
@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Head from 'next/head';
+
+const PageHead = ({ currentPageName }) => {
+  return (
+    <Head>
+      <title>Excelante - {currentPageName}</title>
+      <link rel="icon" href="/favicon.ico" />
+    </Head>
+  );
+};
+Head.propTypes = {
+  currentPageName: PropTypes.string.isRequired,
+};
+
+export default PageHead;
@@ -0,0 +1,44 @@
+import React from 'react';
+import { Upload, Steps, message } from 'antd';
+import { InboxOutlined } from '@ant-design/icons';
+import '../styles/converter.module.scss';
+
+const { Dragger } = Upload;
+
+const Converter = () => {
+  const { Step } = Steps;
+
+  return (
+    <div className="converter-container">
+      <Steps className="steps">
+        <Step title="Upload your file" />
+        <Step title="Select extraction method" />
+        <Step title="Download your JSON file" />
+      </Steps>
+      <Dragger
+        accept=".xlsx, .xls"
+        name="file"
+        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+        onChange={(info) => {
+          const { status } = info.file;
+          if (status !== 'uploading') {
+            console.log(info.file, info.fileList);
+          }
+          if (status === 'done') {
+            message.success(`${info.file.name} file uploaded successfully.`);
+          } else if (status === 'error') {
+            message.error(`${info.file.name} file upload failed.`);
+          }
+        }}
+        className="dragger"
+      >
+        <p className="ant-upload-drag-icon">
+          <InboxOutlined />
+        </p>
+        <p className="ant-upload-text">Click or drag your XLSX file to this area to upload</p>
+      </Dragger>
+    </div>
+  );
+};
+
+export default Converter;
@@ -0,0 +1,59 @@
+import React from 'react';
+import Link from 'next/link';
+import { Button, Col, Layout, Row } from 'antd';
+import { GithubOutlined, HeartOutlined } from '@ant-design/icons';
+import Logo from './_shared/logo.jsx';
+import '../styles/footer.module.scss';
+
+const { Footer } = Layout;
+
+export default () => {
+  const currentYear = new Date().getFullYear();
+
+  return (
+    <Footer>
+      <Row justify="space-around">
+        <Col span={8} className="text">
+          <Logo />
+        </Col>
+        <Col span={8} className="text">
+          <p>
+            Made with
+            <HeartOutlined />
+            by Los Crackitos
+          </p>
+        </Col>
+        <Col span={8} className="text">
+          <Button
+            type="link"
+            shape="circle"
+            icon={<GithubOutlined />}
+            size="large"
+            title="Fork me on GitHub"
+            href="https://github.com/Los-Crackitos/Excelante"
+            className="links"
+          >
+            Fork me
+          </Button>
+        </Col>
+      </Row>
+      <Row justify="center">
+        <Col span={6} offset={3}>
+          <p>© {currentYear} Los Crackitos</p>
+        </Col>
+        <Col span={6}>
+          <p>
+            See{' '}
+            <Link href="/privacy">
+              <a>privacy</a>
+            </Link>{' '}
+            and{' '}
+            <Link href="/terms">
+              <a>terms</a>
+            </Link>
+          </p>
+        </Col>
+      </Row>
+    </Footer>
+  );
+};
@@ -0,0 +1,31 @@
+import React from 'react';
+import AceEditor from "react-ace";
+
+
+import "ace-builds/src-noconflict/mode-json";
+import "ace-builds/src-noconflict/theme-textmate";
+
+const JsonEditor = ({value, onValueChange}) => {
+  return (
+    <AceEditor
+      placeholder="Insert your json here"
+      mode="json"
+      theme="textmate"
+      name="blah2"
+      fontSize={12}
+      showPrintMargin={true}
+      showGutter={true}
+      onChange={onValueChange}
+      highlightActiveLine={true}
+      value={value}
+      setOptions={{
+        enableBasicAutocompletion: false,
+        enableLiveAutocompletion: false,
+        enableSnippets: false,
+        showLineNumbers: true,
+        tabSize: 2,
+      }}/>
+  )
+}
+
+export default JsonEditor
@@ -0,0 +1,45 @@
+import React from 'react';
+import Link from 'next/link';
+import { Layout, Menu, Row, Select, Switch } from 'antd';
+import { InfoCircleOutlined, ToolOutlined } from '@ant-design/icons';
+import Logo from './_shared/logo.jsx';
+
+const { Header } = Layout;
+const { Option } = Select;
+
+const handleChange = (value) => {
+  console.log(`selected ${value}`);
+};
+
+const Navbar = () => {
+  return (
+    <Header style={{ background: '#00cba9' }}>
+      <Logo />
+      <Row justify="end">
+        <Menu mode="horizontal" style={{ background: '#00cba9', color: '#fff' }}>
+          <Menu.Item key="tools" title="Tools" icon={<ToolOutlined />}>
+            <Link href="#tools">
+              <a>Tools</a>
+            </Link>
+          </Menu.Item>
+          <Menu.Item key="about" title="About" icon={<InfoCircleOutlined />}>
+            <Link href="/about">
+              <a>About</a>
+            </Link>
+          </Menu.Item>
+          <Menu.Item>
+            <Select defaultValue="en" style={{ width: 120 }} onChange={handleChange}>
+              <Option value="en">English</Option>
+              <Option value="fr">Français</Option>
+            </Select>
+          </Menu.Item>
+          <Menu.Item key="toggle-theme" title="Change Theme">
+            <Switch checkedChildren="🌞" unCheckedChildren="🌜" defaultChecked />
+          </Menu.Item>
+        </Menu>
+      </Row>
+    </Header>
+  );
+};
+
+export default Navbar;
@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import { Button } from 'antd';
+import JsonEditor from './jsonEditor.jsx'
+
+const Writer = () => {
+  const [state, setState] = useState({
+    jsonEditorValue: `
+    {
+      "sheets": [
+        {
+          "name":"Test",
+          "orientation":"OrientationLandscape",
+          "items": [
+            {
+              "mode":"table",
+              "starting_cell_coordinates":"C05",
+              "tables": [
+                {
+                  "orientation":"column",
+                  "cells": [
+                    {
+                      "value":"avril",
+                      "style":{}
+                    },
+                    {
+                      "value":"Mai",
+                      "style":{}
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }`,
+  });
+
+  const SendJson = () => {
+     fetch('http://localhost:7900/api/v1/write', {
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type':'application/json'
+      },
+      body: state.jsonEditorValue
+    })
+    .then((res) => res.blob())
+    .then((blob) => {
+      const url = window.URL.createObjectURL(new Blob([blob]));
+      const link = document.createElement('a');
+      link.href = url;
+      link.setAttribute('download', `jsonToExcel.xlsx`);
+      document.body.appendChild(link);
+      link.click();
+      link.parentNode.removeChild(link);
+    })
+  }
+
+  return (
+    <div>
+      <JsonEditor
+        value={state.jsonEditorValue}
+        onValueChange={(e) => setState({ jsonEditorValue: e })}
+      />
+      <Button
+        type="primary"
+        value={state.jsonEditorValue}
+        onClick={() => SendJson()}>
+          Send Json
+        </Button>
+    </div>
+  )
+}
+
+export default Writer;
@@ -0,0 +1,5 @@
+const prod = process.env.NODE_ENV === 'production'
+
+module.exports = {
+  'process.env.BACKEND_URL': prod ? '/excelante' : '',
+}
@@ -0,0 +1,44 @@
+const withLess = require('@zeit/next-less');
+const withSass = require('@zeit/next-sass');
+const lessToJS = require('less-vars-to-js');
+// const fs = require('fs')
+// const path = require('path');
+const withPlugins = require('next-compose-plugins');
+
+// Where your antd-custom.less file lives
+// const themeVariables = lessToJS(fs.readFileSync(path.resolve(__dirname, './styles/antd-custom.less'), 'utf8'));
+
+const plugins = [
+  withLess({
+    lessLoaderOptions: {
+      javascriptEnabled: true,
+      // modifyVars: themeVariables,
+    },
+    webpack: (config, { isServer }) => {
+      if (isServer) {
+        const antStyles = /antd\/.*?\/style.*?/;
+        const origExternals = [...config.externals];
+        config.externals = [
+          (context, request, callback) => {
+            if (request.match(antStyles)) return callback();
+            if (typeof origExternals[0] === 'function') {
+              origExternals[0](context, request, callback);
+            } else {
+              callback();
+            }
+          },
+          ...(typeof origExternals[0] === 'function' ? [] : origExternals),
+        ];
+
+        config.module.rules.unshift({
+          test: antStyles,
+          use: 'null-loader',
+        });
+      }
+      return config;
+    },
+  }),
+  withSass,
+];
+
+module.exports = withPlugins(plugins);