Merge pull request #100 from sibelius/feat/chrome

feat(chrome): chrome extension

apps/chrome-ext/babel.config.js

@@ -1,6 +1,19 @@
 module.exports = {
   presets: [
-    ['@babel/preset-env', { targets: { node: 'current' } }],
-    '@babel/preset-typescript'
-  ]
+    [
+      '@babel/preset-react',
+      {
+        runtime: 'automatic',
+      },
+    ],
+    '@babel/preset-typescript',
+    [
+      '@babel/preset-env',
+      {
+        corejs: 3,
+        modules: false,
+        useBuiltIns: 'usage',
+      },
+    ],
+  ],
 };

apps/chrome-ext/dist/manifest.json

@@ -10,17 +10,6 @@
     "scripts": ["js/backgroundPage.js"],
     "persistent": true
   },
-  "content_scripts": [
-    {
-      "js": [
-        "js/content.js"
-      ],
-      "matches": [
-      ],
-      "exclude_matches": [],
-      "run_at": "document_end"
-    }
-  ],
   "icons": {
     "16": "icon-16.png",
     "48": "icon-48.png",

apps/chrome-ext/package.json

@@ -8,13 +8,21 @@
     "prettier": "prettier --write --single-quote true --trailing-comma all --print-width 120"
   },
   "dependencies": {
+    "@ccsseraphini/ui": "0.0.1",
+    "@chakra-ui/react": "1.8.0",
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
+    "core-js": "3.20.3",
+    "framer-motion": "^5",
     "react": "16.14.0",
-    "react-dom": "16.14.0"
+    "react-dom": "16.14.0",
+    "regenerator-runtime": "0.13.9"
   },
   "devDependencies": {
     "@babel/core": "7.16.12",
     "@babel/preset-env": "7.16.11",
     "@babel/preset-typescript": "7.16.7",
+    "@types/react-dom": "17.0.11",
     "babel-loader": "8.2.3",
     "css-loader": "6.5.1",
     "style-loader": "3.3.1",

apps/chrome-ext/src/popup/App.tsx

@@ -1,8 +1,54 @@
 import React from 'react';
+import {ChakraProvider, Flex, Image} from '@chakra-ui/react';
+import {TweetComposer} from './TweetComposer';
+
+// fix monorepo shared packages
+// import {TweetComposer} from '@ccsseraphini/ui';
 
 const App = () => {
   return (
-    <span>cc @sseraphini</span>
+    <ChakraProvider>
+      <Flex
+        flex={1}
+        // height="100vh"
+        alignItems="center"
+        // justifyContent="center"
+        flexDirection="column"
+        // bg="gray.400"
+        p="20px"
+        style={{
+          backgroundColor: '#e5e5f7',
+          opacity: '0.8',
+          backgroundImage:
+            'linear-gradient(#444cf7 1px, transparent 1px), linear-gradient(to right, #444cf7 1px, #e5e5f7 1px)',
+          backgroundSize: '20px 20px',
+        }}
+        minWidth="500px"
+      >
+        <Image
+          borderRadius="full"
+          boxSize="100px"
+          objectFit="cover"
+          src="https://unavatar.io/twitter/sseraphini"
+          alt="Sibelius Seraphini"
+          m="4"
+        />
+
+        <Flex
+          minW={{ base: '98%', md: 'sm' }}
+          maxW="98%"
+          borderWidth="1px"
+          borderColor="gray.500"
+          borderRadius="lg"
+          overflow="hidden"
+          p="8"
+          flexDirection="column"
+          bg="white"
+        >
+          <TweetComposer />
+        </Flex>
+      </Flex>
+    </ChakraProvider>
   );
 };
 

apps/chrome-ext/src/popup/TweetComposer.tsx

@@ -0,0 +1,39 @@
+import { useState } from 'react';
+import { Box, Button, Textarea, Badge } from '@chakra-ui/react';
+import { FaTwitter } from 'react-icons/fa';
+
+export const TweetComposer = () => {
+  const [text, setText] = useState('');
+  const suffix = '\ncc @sseraphini';
+  const counter = 279 - suffix.length - text.length;
+  const tweet = encodeURIComponent(`${text}${suffix}`);
+
+  return (
+    <>
+      <Textarea
+        size="sm"
+        resize="none"
+        minHeight="10.8rem"
+        placeholder="Write your tweet concept/question here"
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+      />
+
+      <Badge maxW="fit-content" colorScheme={counter < 0 ? 'red' : ''}>
+        {counter}
+      </Badge>
+      <Box as="span">cc @sseraphini</Box>
+
+      <Button
+        colorScheme="twitter"
+        leftIcon={<FaTwitter />}
+        mt="10px"
+        as={'a'}
+        href={`https://twitter.com/intent/tweet?text=${tweet}`}
+        target="_blank"
+      >
+        Tweet
+      </Button>
+    </>
+  );
+};

apps/chrome-ext/src/popup/index.tsx

@@ -1,4 +1,7 @@
 // import 'isomorphic-fetch';
+import 'core-js/stable';
+import 'regenerator-runtime/runtime';
+
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { browser } from 'webextension-polyfill-ts';

apps/chrome-ext/webpack.common.js

@@ -1,5 +1,7 @@
 const path = require('path');
 
+const cwd = process.cwd();
+
 module.exports = {
   entry: {
     backgroundPage: path.join(__dirname, 'src/backgroundPage.ts'),
@@ -12,23 +14,35 @@ module.exports = {
   },
   module: {
     rules: [
-      // {
-      //   test: /\.(js|jsx|ts|tsx)?$/,
-      //   exclude: [/node_modules/],
-      //   use: [
-      //     {
-      //       loader: 'babel-loader?cacheDirectory',
-      //     },
-      //   ],
-      // },
       {
-        exclude: /node_modules/,
-        test: /\.tsx?$/,
-        loader: 'ts-loader',
-        options: {
-          transpileOnly: true
-        }
-      }
+        test: /\.(js|jsx|ts|tsx)?$/,
+        exclude: [/node_modules/],
+        use: [
+          {
+            loader: 'babel-loader?cacheDirectory',
+          },
+        ],
+        include: [
+          path.join(cwd, 'src'),
+          path.join(cwd, '../'),
+        ],
+      },
+      {
+        test: /\.(jpe?g|png|gif|svg|pdf|csv|xlsx|ttf|woff(2)?)$/i,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: '[name].[ext]',
+              outputPath: 'img/',
+            },
+          },
+        ],
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader'],
+      },
     ]
   },
   resolve: {

apps/ui/package.json

@@ -0,0 +1,7 @@
+{
+  "private": true,
+  "name": "@ccsseraphini/ui",
+  "version": "0.0.1",
+  "main": "./src/index.tsx",
+  "module": "./src/index.tsx"
+}

apps/ui/src/TweetComposer.tsx

@@ -0,0 +1,39 @@
+import { useState } from 'react';
+import { Box, Button, Textarea, Badge } from '@chakra-ui/react';
+import { FaTwitter } from 'react-icons/fa';
+
+export const TweetComposer = () => {
+  const [text, setText] = useState('');
+  const suffix = '\ncc @sseraphini';
+  const counter = 279 - suffix.length - text.length;
+  const tweet = encodeURIComponent(`${text}${suffix}`);
+
+  return (
+    <>
+      <Textarea
+        size="sm"
+        resize="none"
+        minHeight="10.8rem"
+        placeholder="Write your tweet concept/question here"
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+      />
+
+      <Badge maxW="fit-content" colorScheme={counter < 0 ? 'red' : ''}>
+        {counter}
+      </Badge>
+      <Box as="span">cc @sseraphini</Box>
+
+      <Button
+        colorScheme="twitter"
+        leftIcon={<FaTwitter />}
+        mt="10px"
+        as={'a'}
+        href={`https://twitter.com/intent/tweet?text=${tweet}`}
+        target="_blank"
+      >
+        Tweet
+      </Button>
+    </>
+  );
+};

apps/ui/src/index.tsx

@@ -0,0 +1 @@
+export { TweetComposer } from './TweetComposer';

apps/web/package.json

@@ -11,6 +11,7 @@
     "test": "jest"
   },
   "dependencies": {
+    "@ccsseraphini/ui": "0.0.1",
     "@chakra-ui/react": "1.8.0",
     "@emotion/react": "11",
     "@emotion/styled": "11",