feat: Notification system update (#73)

* Create globalHooks folder. Move notification code into globalHooks. Remove duplicate code. Update types. * Update typings. Add transition to notifBanner. * Remove duplicate code in settings. Update project creation notifications. Clean up code. * Update notification system. WIP: Add missing notifications. * Add notifications for workspaces. Move useEffects into hooks. * Remove useError in state. Use notifications for errors directly(when possible). Update some text. * Add notifications to Account and workspace settings. Fix gql error handling. Fix where gql errors were overwritten by other notifications. * Update some notification text. Add notifications for dataset import. Add better notif handling for archiving projects. Add notif for plugin installation. Add notif for adding assets. * Add Delete modal to dataset deletion. * Update gen:i18n script to include hooks files. Update translations. Fix wording. * remove old notification code making errors * Add success notifications to assets. * Move notificationbanner to organisms. Update all imports. Remove notifications README. * Update colors * Fix code so components aren't using the NotificationBanner's hooks * Fix Notifications stories file, fix TopPages import error * Fix error messages showing on project delete even though successful * Add unit tests * Update type names * Move dataset notifications to organisms * Move copy to clipboard notification to organisms * Update Notification type name * Remove unneeded onNotify func and use setNotification directly * Cleanup publicationModal. Add useError for apollo error special case * add approriate error message * update translations * Update src/components/molecules/Common/Notification/index.test.tsx Co-authored-by: rot1024 <aayhrot@gmail.com> * Add dataset delete notification. Regen translations. * Change notification type for dataset delete. Remove silly message from sync. * Move NotificationBanner to atoms. Co-authored-by: KaWaite <flippindaisy@gmail.com> Co-authored-by: rot1024 <aayhrot@gmail.com>
reearth · Sep 22, 2021 · 92cdbb4 · 92cdbb4
1 parent 8e78f94
commit 92cdbb4
Show file tree

Hide file tree

Showing 42 changed files with 984 additions and 469 deletions.
diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
         "cypress:run": "cypress run",
         "gen": "run-p gen:*",
         "gen:gql": "graphql-codegen --config codegen.yml",
-        "gen:i18n": "extract-messages -d en -l=en,ja -o translations -f yaml 'src/**/*.tsx' --extractFromFormatMessageCall",
+        "gen:i18n": "extract-messages -d en -l=en,ja -o translations -f yaml 'src/**/*.ts*' --extractFromFormatMessageCall",
         "gen:doc:plugin": "ts-node -O '{\"module\":\"CommonJS\"}' ./bin/pluginDoc"
     },
     "engines": {
@@ -204,4 +204,4 @@
         "use-debounce": "^5.2.0",
         "use-file-input": "^1.0.0"
     }
-}
+}
diff --git a/src/app.tsx b/src/app.tsx
@@ -2,6 +2,7 @@ import { Router, Redirect } from "@reach/router";
 import React, { Suspense } from "react";
 
 import Loading from "@reearth/components/atoms/Loading";
+import NotificationBanner from "@reearth/components/organisms/Notification";
 import NotFound from "@reearth/components/pages/NotFound";
 import AccountSettings from "@reearth/components/pages/Settings/Account";
 import ProjectSettings from "@reearth/components/pages/Settings/Project";
@@ -42,6 +43,7 @@ const App: React.FC = () => {
           <DndProvider>
             <IntlProvider>
               <Suspense fallback={<Loading />}>
+                <NotificationBanner />
                 <StyledRouter>
                   <TopPage path="/" />
                   <Dashboard path="/dashboard/:teamId" />

diff --git a/src/components/atoms/Notification/index.stories.tsx b/src/components/atoms/Notification/index.stories.tsx
@@ -0,0 +1,50 @@
+import { Meta } from "@storybook/react";
+import React from "react";
+
+import Notification from ".";
+
+export default {
+  title: "atoms/NotificationBanner",
+  component: Notification,
+} as Meta;
+
+export const Success = () => (
+  <Notification
+    visible={true}
+    notification={{
+      type: "success",
+      heading: "Notice",
+      text: "This is a notice of successful completion of a task.",
+    }}
+  />
+);
+export const Error = () => (
+  <Notification
+    visible={true}
+    notification={{
+      type: "error",
+      heading: "Error",
+      text: "This is telling you that there is an error, hence the scary red color.",
+    }}
+  />
+);
+export const Warning = () => (
+  <Notification
+    visible={true}
+    notification={{
+      type: "warning",
+      heading: "Warning",
+      text: "This is a warning that something isn't quite right.",
+    }}
+  />
+);
+export const Info = () => (
+  <Notification
+    visible={true}
+    notification={{
+      type: "info",
+      heading: "Notice",
+      text: "This is a neutral message. Could be an update or some general information.",
+    }}
+  />
+);
diff --git a/src/components/atoms/Notification/index.test.tsx b/src/components/atoms/Notification/index.test.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+
+import { render, screen } from "@reearth/test/utils";
+
+import NotificationBanner, { Notification } from ".";
+
+const sampleNotification: Notification = {
+  type: "info",
+  heading: "Notice",
+  text: "This is a notification for something super cool.",
+};
+
+test("Notification component should be rendered", () => {
+  render(<NotificationBanner />);
+});
+
+test("Notification component should display notification heading", () => {
+  render(<NotificationBanner visible notification={sampleNotification} />);
+  expect(screen.getByText(/Notice/)).toBeInTheDocument();
+});
+
+test("Notification component should display notification text", () => {
+  render(<NotificationBanner visible notification={sampleNotification} />);
+  expect(screen.getByText(/This is a notification/)).toBeInTheDocument();
+});
+
+test("Notification component should not display anything", () => {
+  render(<NotificationBanner notification={sampleNotification} />);
+  expect(screen.getByText(/This is a notification/)).not.toBeVisible();
+});
diff --git a/src/components/atoms/Notification/index.tsx b/src/components/atoms/Notification/index.tsx
@@ -0,0 +1,88 @@
+import React from "react";
+
+import Flex from "@reearth/components/atoms/Flex";
+import Icon from "@reearth/components/atoms/Icon";
+import Text from "@reearth/components/atoms/Text";
+import { styled, metrics, useTheme } from "@reearth/theme";
+
+export type NotificationType = "error" | "warning" | "info" | "success";
+export type Notification = {
+  type: NotificationType;
+  heading?: string;
+  text: string;
+};
+
+export type Props = {
+  visible?: boolean;
+  setModal?: (show: boolean) => void;
+  notification?: Notification;
+  resetNotification?: () => void;
+};
+
+const NotificationBanner: React.FC<Props> = ({
+  visible,
+  setModal,
+  notification,
+  resetNotification,
+}) => {
+  const theme = useTheme();
+
+  return (
+    <StyledNotificationBanner visible={visible} type={notification?.type} direction="column">
+      <HeadingArea justify="space-between">
+        <Text
+          size="m"
+          color={theme.notification.text}
+          weight="bold"
+          otherProperties={{ padding: "0 0 8px 0" }}>
+          {notification?.heading}
+        </Text>
+        <CloseBtn
+          icon="cancel"
+          size={20}
+          onClick={() => {
+            setModal?.(false);
+            resetNotification?.();
+          }}
+        />
+      </HeadingArea>
+      <Text size="s" color={theme.notification.text}>
+        {notification?.text}
+      </Text>
+    </StyledNotificationBanner>
+  );
+};
+
+const StyledNotificationBanner = styled(Flex)<{
+  type?: NotificationType;
+  visible?: boolean;
+}>`
+  position: absolute;
+  top: ${metrics.headerHeight}px;
+  right: 0;
+  width: 312px;
+  padding: 8px 12px;
+  background-color: ${({ type, theme }) =>
+    type === "error"
+      ? theme.notification.errorBg
+      : type === "warning"
+      ? theme.notification.warningBg
+      : type === "success"
+      ? theme.notification.successBg
+      : theme.notification.infoBg};
+  color: ${({ theme }) => theme.notification.text};
+  z-index: ${({ theme, visible }) => (visible ? theme.zIndexes.notificationBar : 0)};
+  opacity: ${({ visible }) => (visible ? "1" : "0")};
+  transition: all 0.5s;
+  pointer-event: ${({ visible }) => (visible ? "auto" : "none")};
+`;
+
+const HeadingArea = styled(Flex)`
+  width: 100%;
+`;
+
+const CloseBtn = styled(Icon)`
+  cursor: pointer;
+`;
+
+export default NotificationBanner;
diff --git a/src/components/atoms/NotificationBar/README.md b/src/components/atoms/NotificationBar/README.md
diff --git a/src/components/atoms/NotificationBar/index.stories.tsx b/src/components/atoms/NotificationBar/index.stories.tsx
diff --git a/src/components/atoms/NotificationBar/index.tsx b/src/components/atoms/NotificationBar/index.tsx