Skip to content

Commit

Permalink
Creating the project
Browse files Browse the repository at this point in the history
  • Loading branch information
Aslemammad committed Jun 25, 2020
1 parent d75dc94 commit 48e0f65
Show file tree
Hide file tree
Showing 20 changed files with 3,079 additions and 3,341 deletions.
21 changes: 21 additions & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
module.exports = {
parser : '@typescript-eslint/parser',
extends : [
'plugin:react/recommended',
'plugin:@typescript-eslint/recommended',
'prettier/@typescript-eslint',
'plugin:prettier/recommended'
],
parserOptions : {
ecmaVersion : 2018,
sourceType : 'module',
ecmaFeatures : {
jsx : true
}
},
settings : {
react : {
version : 'detect'
}
}
};
7 changes: 7 additions & 0 deletions .prettierrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
module.exports = {
semi : true,
trailingComma : 'all',
singleQuote : true,
printWidth : 120,
tabWidth : 2
};
24 changes: 24 additions & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
{
"typescript.tsdk": "node_modules/typescript/lib",
,
"editor.formatOnSave": true,
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "typescript",
"autoFix": true
},
{
"language": "typescriptreact",
"autoFix": true
}
],
"editor.renderWhitespace": "boundary",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}


}
1 change: 1 addition & 0 deletions libtest.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
console.log(process.version);
4 changes: 0 additions & 4 deletions lite-server.json

This file was deleted.

5,392 changes: 2,146 additions & 3,246 deletions package-lock.json

Large diffs are not rendered by default.

22 changes: 18 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,25 @@
"homepage": "./",
"author": "Forsythe-jones (bagher.codes or Aslemammad)",
"dependencies": {
"@material-ui/core": "^4.10.2",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"@types/emoji-mart": "^3.0.2",
"@types/jest": "^24.0.0",
"@types/react-dom": "^16.9.0",
"concurrently": "^5.2.0",
"electron-is-dev": "^1.2.0",
"electron-store": "^5.2.0",
"emoji-mart": "^3.0.0",
"node-gyp": "^6.1.0",
"node-hid": "^1.2.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1",
"robotjs": "^0.6.0",
"typescript": "~3.7.2",
"use-clipboard-copy": "^0.1.2",
"wait-on": "^5.0.1"
},
"scripts": {
Expand All @@ -25,7 +32,7 @@
"ts-build": "tsc -p nodeTsconfig.json",
"server": "lite-server -c lite-server.json",
"electron": "npm run electron-build && electron ./build/electron.js",
"dev": "concurrently \"npm run start\" \"tsc -w -p nodeTsconfig.json\" \"wait-on http://localhost:5006 && ELECTRON_ENV=development electron ./build/electron.js\"",
"dev": "concurrently \"BROWSER=none PORT=5006 yarn start\" \"wait-on http://localhost:5006 && tsc -w -p nodeTsconfig.json\" \"wait-on http://localhost:5006 && ELECTRON_ENV=development electron ./build/electron.js\"",
"preelectron-pack": "yarn build",
"electron-dev": "npm run ts-build && concurrently \"BROWSER=none PORT=5006 yarn start \" \"wait-on http://localhost:5006 && electron ./build/electron.js\"",
"full-build": "npm-run-all build ts-build",
Expand Down Expand Up @@ -59,10 +66,17 @@
"devDependencies": {
"@types/node": "^12.12.47",
"@types/react": "^16.9.38",
"electron": "^9.0.4",
"@types/react-router-dom": "^5.1.5",
"@typescript-eslint/eslint-plugin": "^3.3.0",
"@typescript-eslint/parser": "^3.3.0",
"electron": "^9.0.5",
"electron-builder": "^22.7.0",
"eslint-config-prettier": "^6.11.0",
"eslint-config-react": "^1.1.7",
"eslint-plugin-prettier": "^3.1.4",
"foreman": "^3.0.1",
"lite-server": "^2.5.4",
"npm-run-all": "^4.1.5"
"npm-run-all": "^4.1.5",
"prettier": "^2.0.5"
}
}
20 changes: 11 additions & 9 deletions public/index.html
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>

<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />

<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
Expand All @@ -25,8 +25,9 @@
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
</head>

<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
Expand All @@ -39,5 +40,6 @@
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
</body>

</html>
86 changes: 67 additions & 19 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,25 +1,73 @@
import React from 'react';
import logo from './logo.svg';

function App() {
import logo from './logo.jpg';
import { useGlobalState, useSetGlobaleState } from './Store';

import {
Grid,
Typography,
createMuiTheme,
Card,
CardActionArea,
CardMedia,
CardContent,
CardActions,
Checkbox,
FormControlLabel,
FormControl,
InputLabel,
Select,
MenuItem,
} from '@material-ui/core';

const App = () => {
const [state, setState] = [useGlobalState(), useSetGlobaleState()];
const handleCheckbox = (event: React.ChangeEvent<HTMLInputElement>) => {
setState({ ...state, [`${event.target.name}`]: event.target.checked });
};
const handleSelect = (event: React.ChangeEvent<{ value: unknown }>) => {
setState({ ...state, set: event.target.value || 'apple' });
};
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
<Card className="App">
<CardActionArea>
<CardMedia
component="img"
alt="Contemplative Reptile"
height="300"
image={logo}
title="Contemplative Reptile"
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
Xmoji
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
You can open the Emoji picker tab with shortcut <code>Ctrl + Win(Command) + Space</code>
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<FormControlLabel
control={<Checkbox checked={state.darkMode} name="darkMode" color="primary" onChange={handleCheckbox} />}
label="Dark Mode"
/>{' '}
<FormControlLabel
control={<Checkbox checked={state.startup} name="startup" color="primary" onChange={handleCheckbox} />}
label="Run in startup"
/>
<FormControl>
<InputLabel id="demo-simple-select-label">Set</InputLabel>
<Select labelId="demo-simple-select-label" id="demo-simple-select" onChange={handleSelect} value={state.set}>
<MenuItem value={'apple'}>Apple</MenuItem>
<MenuItem value={'google'}>Google</MenuItem>
<MenuItem value={'twitter'}>Twitter</MenuItem>
<MenuItem value={'facebook'}>Facebook</MenuItem>
</Select>
</FormControl>
</CardActions>
</Card>
);
}
};

export default App;
43 changes: 43 additions & 0 deletions src/Components/EmojiTab.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import React, { useEffect, useState } from 'react';
import 'emoji-mart/css/emoji-mart.css';
import { Picker } from 'emoji-mart';
import { useGlobalState, useSetGlobaleState } from '../Store';
import { useClipboard } from 'use-clipboard-copy';
const { remote } = window.require('electron');
const EmojiTab = () => {
const [state, setState] = [useGlobalState(), useSetGlobaleState()];
const [emojis, setEmojis] = useState<any>([]);
const clipboard = useClipboard();
const handleEsc = (event: any) => {
if (event.keyCode === 27) {
const currentWindow = remote.getCurrentWindow();

currentWindow.close();
}
};
const handleSelect = (emoji: any) => {
setEmojis([...emojis, emoji.native]);
clipboard.copy(emojis.join(''));
};

useEffect(() => {
document.addEventListener('keydown', handleEsc, false);

return () => {
document.removeEventListener('keydown', handleEsc, false);
};
}, []);

return (
<div className="">
<Picker
set={state.set}
theme={state.darkMode ? 'dark' : 'light'}
style={{ position: 'absolute', width: '100%', height: '100%' }}
onSelect={handleSelect}
/>
</div>
);
};

export default EmojiTab;
34 changes: 34 additions & 0 deletions src/Store.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import React from 'react';
import GlobalInterface from './interfaces/GlobalInterface';
const electronStore = window.require('electron-store');
const config = new electronStore();
const StateContext = React.createContext<GlobalInterface | undefined>(undefined);
const SetStateContext = React.createContext<any | undefined>(undefined);

if (!config.get('xmoji')) config.set('xmoji', { set: 'apple', darkMode: true, startup: true });

export const useGlobalState = () => {
const context = React.useContext(StateContext);
if (context === undefined) {
throw new Error('useCountState must be used within a CountProvider');
}
return context;
};
export const useSetGlobaleState = () => {
const context = React.useContext(SetStateContext);
if (context === undefined) {
throw new Error('useCountState must be used within a CountProvider');
}
return context;
};
export const StateProvider = ({ children }: { children: React.ReactNode }) => {
const [state, setState] = React.useState(config.get('xmoji'));
React.useEffect(() => {
config.set('xmoji', state);
}, [state]);
return (
<StateContext.Provider value={state}>
<SetStateContext.Provider value={setState}>{children}</SetStateContext.Provider>
</StateContext.Provider>
);
};
Loading

0 comments on commit 48e0f65

Please sign in to comment.