feat: add best plugins modal

src/domains/plugins/components/BestPlugins/BestPlugins.stories.tsx

@@ -0,0 +1,8 @@
+import { boolean } from "@storybook/addon-knobs";
+import React from "react";
+
+import { BestPlugins } from "./BestPlugins";
+
+export default { title: "Plugins / Components / Best Plugins" };
+
+export const Default = () => <BestPlugins isOpen={boolean("Is Open", true)} onClose={() => alert("closed")} />;

src/domains/plugins/components/BestPlugins/BestPlugins.test.tsx

@@ -0,0 +1,32 @@
+import { render } from "@testing-library/react";
+import { i18n } from "app/i18n";
+import React from "react";
+import { I18nextProvider } from "react-i18next";
+
+import { translations } from "../../i18n";
+import { BestPlugins } from "./BestPlugins";
+
+describe("BestPlugins", () => {
+	it("should not render if not open", () => {
+		const { asFragment, getByTestId } = render(
+			<I18nextProvider i18n={i18n}>
+				<BestPlugins isOpen={false} />
+			</I18nextProvider>,
+		);
+
+		expect(() => getByTestId("modal__inner")).toThrow(/Unable to find an element by/);
+		expect(asFragment()).toMatchSnapshot();
+	});
+
+	it("should render a modal", () => {
+		const { asFragment, getByTestId } = render(
+			<I18nextProvider i18n={i18n}>
+				<BestPlugins isOpen={true} />
+			</I18nextProvider>,
+		);
+
+		expect(getByTestId("modal__inner")).toHaveTextContent(translations.MODAL_BEST_PLUGINS.TITLE);
+		expect(getByTestId("modal__inner")).toHaveTextContent(translations.MODAL_BEST_PLUGINS.DESCRIPTION);
+		expect(asFragment()).toMatchSnapshot();
+	});
+});

src/domains/plugins/components/BestPlugins/BestPlugins.tsx

@@ -0,0 +1,127 @@
+import { images } from "app/assets/images";
+import { Button } from "app/components/Button";
+import { Icon } from "app/components/Icon";
+import { Modal } from "app/components/Modal";
+import { ReviewRating } from "app/components/ReviewRating";
+import { Table } from "app/components/Table";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+type BestPluginsProps = {
+	isOpen: boolean;
+	onClose?: any;
+};
+
+const { ChangeNowLogo } = images.exchange.components.AddExchange;
+
+export const BestPlugins = (props: BestPluginsProps) => {
+	const { t } = useTranslation();
+	const data = [
+		{
+			name: "ARK Explorer",
+			description: "ARK Ecosystem",
+			category: "Utility",
+			rating: 4.6,
+			version: "1.3.8",
+			isOfficial: true,
+		},
+		{
+			name: "Animal Avatars",
+			description: "Breno Polanski",
+			category: "Utility",
+			rating: 4.6,
+			version: "1.3.8",
+		},
+		{
+			name: "ChangeNOW Plugin",
+			description: "ChangeNOW",
+			category: "Other",
+			rating: 4.8,
+			version: "1.3.8",
+		},
+		{
+			name: "Bold Ninja",
+			description: "Delegate Fun",
+			category: "Game",
+			rating: 4.9,
+			version: "2.0.0",
+			isGrant: true,
+		},
+	];
+
+	const columns = [
+		{
+			Header: " ",
+			disableSortBy: true,
+		},
+		{
+			Header: t("COMMON.NAME"),
+			accessor: "name",
+		},
+		{
+			Header: t("COMMON.CATEGORY"),
+			accessor: "category",
+		},
+		{
+			Header: t("COMMON.RATING"),
+			accessor: "rating",
+		},
+		{
+			Header: t("COMMON.VERSION"),
+			accessor: "version",
+		},
+		{
+			Header: "  ",
+			disableSortBy: true,
+		},
+	];
+
+	return (
+		<Modal
+			title={t("PLUGINS.MODAL_BEST_PLUGINS.TITLE")}
+			description={t("PLUGINS.MODAL_BEST_PLUGINS.DESCRIPTION")}
+			size="3xl"
+			isOpen={props.isOpen}
+			onClose={props.onClose}
+		>
+			<div className="mt-8 -mb-6">
+				<Table columns={columns} data={data}>
+					{(rowData: any) => (
+						<tr className="border-b border-dashed border-theme-neutral-200">
+							<td className="text-center w-18">
+								<ChangeNowLogo />
+							</td>
+
+							<td>
+								<div className="font-semibold text-theme-primary-500 hover:text-theme-primary-400">
+									{rowData.name}
+								</div>
+								<div className="inline-flex items-center space-x-2">
+									<span>{rowData.description}</span>
+									{rowData.isOfficial && <Icon name="OfficialArkPlugin" width={15} height={15} />}
+									{rowData.isGrant && <Icon name="Grant" width={16} height={16} />}
+								</div>
+							</td>
+
+							<td className="py-10">{rowData.category}</td>
+
+							<td className="py-10">
+								<ReviewRating rating={rowData.rating} />
+							</td>
+
+							<td className="py-10">v {rowData.version}</td>
+
+							<td className="w-16">
+								<Button variant="plain">{t("COMMON.INSTALL")}</Button>
+							</td>
+						</tr>
+					)}
+				</Table>
+			</div>
+		</Modal>
+	);
+};
+
+BestPlugins.defaultProps = {
+	isOpen: false,
+};