From 05aeef7e06ed0dc7a1f58ee9b8374f2c6d4ac2a5 Mon Sep 17 00:00:00 2001 From: Mert <70555833+mmy753@users.noreply.github.com> Date: Tue, 10 May 2022 18:36:58 +0300 Subject: [PATCH] Synce --- .../molecules/Synce/Synce.stories.tsx | 35 +++++++++ .../components/molecules/Synce/Synce.test.tsx | 31 ++++++++ .../src/components/molecules/Synce/Synce.tsx | 74 +++++++++++++++++++ .../Synce/__snapshots__/Synce.test.tsx.snap | 18 +++++ .../src/components/molecules/Synce/index.ts | 17 +++++ .../components/organisms/Sidebar/Sidebar.tsx | 8 +- .../__snapshots__/Sidebar.test.tsx.snap | 22 +++++- .../templates/NavbarLayout/index.tsx | 2 +- 8 files changed, 204 insertions(+), 3 deletions(-) create mode 100644 packages/renderer/src/components/molecules/Synce/Synce.stories.tsx create mode 100644 packages/renderer/src/components/molecules/Synce/Synce.test.tsx create mode 100644 packages/renderer/src/components/molecules/Synce/Synce.tsx create mode 100644 packages/renderer/src/components/molecules/Synce/__snapshots__/Synce.test.tsx.snap create mode 100644 packages/renderer/src/components/molecules/Synce/index.ts diff --git a/packages/renderer/src/components/molecules/Synce/Synce.stories.tsx b/packages/renderer/src/components/molecules/Synce/Synce.stories.tsx new file mode 100644 index 0000000..399e005 --- /dev/null +++ b/packages/renderer/src/components/molecules/Synce/Synce.stories.tsx @@ -0,0 +1,35 @@ +// ============================================================================= +// Copyright 2022 Haveno +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// ============================================================================= + +import { Stack } from "@mantine/core"; +import type { ComponentStory, ComponentMeta } from "@storybook/react"; +import { Synce } from "."; + +export default { + title: "molecules/Synce", + component: Synce, +} as ComponentMeta; + +const Template: ComponentStory = () => { + return ( + + + + ); +}; + +export const Default = Template.bind({}); +Default.args = {}; diff --git a/packages/renderer/src/components/molecules/Synce/Synce.test.tsx b/packages/renderer/src/components/molecules/Synce/Synce.test.tsx new file mode 100644 index 0000000..58ff096 --- /dev/null +++ b/packages/renderer/src/components/molecules/Synce/Synce.test.tsx @@ -0,0 +1,31 @@ +// ============================================================================= +// Copyright 2022 Haveno +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// ============================================================================= + +import { describe, expect, it } from "vitest"; +import { render } from "@testing-library/react"; +import { AppProviders } from "@atoms/AppProviders"; +import { Synce } from "."; + +describe("molecules::Synce", () => { + it("renders without exploding", () => { + const { asFragment } = render( + + + + ); + expect(asFragment()).toMatchSnapshot(); + }); +}); diff --git a/packages/renderer/src/components/molecules/Synce/Synce.tsx b/packages/renderer/src/components/molecules/Synce/Synce.tsx new file mode 100644 index 0000000..eb1e71b --- /dev/null +++ b/packages/renderer/src/components/molecules/Synce/Synce.tsx @@ -0,0 +1,74 @@ +// ============================================================================= +// Copyright 2022 Haveno +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// ============================================================================= + +import { useState } from "react"; +import { createStyles, Stack, Text } from "@mantine/core"; + +export function Synce() { + const [isOpen, setOpen] = useState(false); + const { classes } = useStyles({ isOpen }); + const [isSynce, setSynec] = useState("false"); + return ( + + + + {isSynce ? "Fully Synced" : "Not Synced"} + + + ); +} + +const useStyles = createStyles( + (theme, params) => ({ + synced: { + bottom: 5, + display: "block", + fontSize: "0.725rem", + fontWeight: 600, + marginBottom: 5, + marginLeft: 40, + position: "absolute", + }, + notSynced: { + bottom: 5, + color: theme.colors.gray[9], + display: "block", + fontSize: "0.725rem", + fontWeight: 600, + marginBottom: 5, + marginLeft: 40, + position: "absolute", + }, + syncedot: { + backgroundColor: theme.colors.green[4], + borderRadius: 50, + bottom: 16, + height: 8, + marginLeft: 20, + position: "absolute", + width: 8, + }, + notSyncedot: { + backgroundColor: theme.colors.red[4], + borderRadius: 50, + bottom: 16, + height: 8, + marginLeft: 20, + position: "absolute", + width: 8, + }, + }) +); diff --git a/packages/renderer/src/components/molecules/Synce/__snapshots__/Synce.test.tsx.snap b/packages/renderer/src/components/molecules/Synce/__snapshots__/Synce.test.tsx.snap new file mode 100644 index 0000000..e67f191 --- /dev/null +++ b/packages/renderer/src/components/molecules/Synce/__snapshots__/Synce.test.tsx.snap @@ -0,0 +1,18 @@ +// Vitest Snapshot v1 + +exports[`molecules::Synce > renders without exploding 1`] = ` + +
+ +
+ Fully Synced +
+
+ +`; diff --git a/packages/renderer/src/components/molecules/Synce/index.ts b/packages/renderer/src/components/molecules/Synce/index.ts new file mode 100644 index 0000000..e7a18a3 --- /dev/null +++ b/packages/renderer/src/components/molecules/Synce/index.ts @@ -0,0 +1,17 @@ +// ============================================================================= +// Copyright 2022 Haveno +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// ============================================================================= + +export * from "./Synce"; diff --git a/packages/renderer/src/components/organisms/Sidebar/Sidebar.tsx b/packages/renderer/src/components/organisms/Sidebar/Sidebar.tsx index 3ee1c0b..3629d4a 100644 --- a/packages/renderer/src/components/organisms/Sidebar/Sidebar.tsx +++ b/packages/renderer/src/components/organisms/Sidebar/Sidebar.tsx @@ -19,7 +19,7 @@ import { WalletBalance } from "@molecules/WalletBalance"; import { ReactComponent as Logo } from "@assets/logo-icon.svg"; import { NavLink } from "./_NavLink"; import { NAV_LINKS, WIDTH } from "./_constants"; - +import { Synce } from "@molecules/Synce"; export function Sidebar() { const { classes } = useStyles(); return ( @@ -38,6 +38,11 @@ export function Sidebar() { + + + + + ); @@ -50,5 +55,6 @@ const useStyles = createStyles((theme) => ({ }, container: { width: WIDTH, + position: "relative", }, })); diff --git a/packages/renderer/src/components/organisms/Sidebar/__snapshots__/Sidebar.test.tsx.snap b/packages/renderer/src/components/organisms/Sidebar/__snapshots__/Sidebar.test.tsx.snap index 105e07a..bc50ca7 100644 --- a/packages/renderer/src/components/organisms/Sidebar/__snapshots__/Sidebar.test.tsx.snap +++ b/packages/renderer/src/components/organisms/Sidebar/__snapshots__/Sidebar.test.tsx.snap @@ -3,7 +3,7 @@ exports[`molecules::Sidebar > renders without exploding 1`] = `
+
+
+
+ +
+ Fully Synced +
+
+
+
diff --git a/packages/renderer/src/components/templates/NavbarLayout/index.tsx b/packages/renderer/src/components/templates/NavbarLayout/index.tsx index 76dfa32..22511af 100644 --- a/packages/renderer/src/components/templates/NavbarLayout/index.tsx +++ b/packages/renderer/src/components/templates/NavbarLayout/index.tsx @@ -17,7 +17,7 @@ import type { FC } from "react"; import { Box, createStyles, Group } from "@mantine/core"; import { Sidebar } from "@organisms/Sidebar"; - +import { Synce } from "@molecules/Synce"; export const NavbarLayout: FC = (props) => { const { children } = props; const { classes } = useStyles();