Feat: Change the old Webinar promote bar to the new one and update so…

…me eslint rules (#232)

* feat: add react-hook plugin to eslint

* ref: change take a tour structure and labels

* ESLint formatting

* Adding a space at the end

---------

Co-authored-by: Travis Jenkins <[email protected]>

.eslintrc.js

@@ -1,9 +1,14 @@
 /* eslint-env node */
 
 module.exports = {
-    extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended'],
+    extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:prettier/recommended',
+        'plugin:react-hooks/recommended',
+    ],
     parser: '@typescript-eslint/parser',
-    plugins: ['@typescript-eslint'],
+    plugins: ['@typescript-eslint', 'react-hooks'],
     root: true,
     rules: {
         '@typescript-eslint/no-unused-vars': 'error',
@@ -28,6 +33,7 @@ module.exports = {
         'react/display-name': 'off',
         'react/prop-types': 'off',
         'react/react-in-jsx-scope': 'off',
+        'react-hooks/rules-of-hooks': 'error',
         'react-hooks/exhaustive-deps': 'error',
     },
 };

.prettierrc.json

@@ -2,5 +2,6 @@
   "endOfLine": "auto",
   "singleQuote": true,
   "bracketSpacing": true,
-  "printWidth": 120
+  "printWidth": 120,
+  "tabWidth": 2
 }

package.json

@@ -85,6 +85,7 @@
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.30",
     "prettier": "3.2.5",
     "typescript": "^5.4.2"

src/components/TakeATour/index.tsx

@@ -0,0 +1,35 @@
+import React, { useCallback, useEffect, useState } from 'react';
+
+import CloseIcon from '@mui/icons-material/Close';
+
+import { Button, Container, Link } from './styles';
+
+const STORAGE_NAME = '@estuary/closeTour';
+
+const TakeATour = () => {
+  const [closeTour, setCloseTour] = useState(true);
+
+  const onClick = useCallback(() => {
+    localStorage.setItem(STORAGE_NAME, '1');
+    setCloseTour(true);
+  }, []);
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') setCloseTour(!!localStorage.getItem(STORAGE_NAME));
+  }, []);
+
+  if (closeTour) return null;
+
+  return (
+    <Container>
+      <Link target="_blank" href="https://try.estuary.dev/how-to-build-an-ai-pipeline/">
+        "How to Build Pipelines for Gen AI" - Join our April 10th webinar
+      </Link>
+      <Button onClick={onClick}>
+        <CloseIcon color="inherit" fontSize="small" />
+      </Button>
+    </Container>
+  );
+};
+
+export default TakeATour;

src/components/TakeATour/styles.ts

@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+
+import IconButton from '@mui/material/IconButton';
+import { OutboundLink } from '../OutboundLink';
+
+export const Container = styled.div`
+  background-color: #5072eb;
+  height: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 99999;
+  display: none;
+  font-weight: 700;
+
+  @media (min-width: 1024px) {
+    display: flex;
+  }
+`;
+
+export const Link = styled(OutboundLink)`
+  font-size: 12px;
+  text-decoration-line: underline;
+  color: #fff;
+`;
+
+export const Button = styled(IconButton)`
+  color: #fff;
+  position: absolute;
+  right: 5px;
+`;

src/style.less

@@ -624,36 +624,6 @@ input {
 
 /* SECTION ONE */
 
-.take-a-tour {
-    background-color: #5072eb;
-    height: 24px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: fixed;
-    top: 0;
-    width: 100%;
-    z-index: 99999;
-    display: none;
-    font-weight: 700;
-
-    & a {
-        font-size: 12px;
-        text-decoration-line: underline;
-        color: #fff;
-    }
-
-    & button {
-        color: #fff;
-        position: absolute;
-        right: 5px;
-    }
-
-    @media (min-width: 1024px) {
-        display: flex;
-    }
-}
-
 .section-one {
     padding-left: ~"calc(min(9%, 146px))";
     display: flex;