,
- init(): void;
-}
-
-export type { AuthStore };
diff --git a/src/auth/hoc/withAuth.tsx b/src/auth/hoc/withAuth.tsx
deleted file mode 100644
index 242699f..0000000
--- a/src/auth/hoc/withAuth.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-/* -------------------------------------------------------------------------- */
-/* Libraries */
-/* -------------------------------------------------------------------------- */
-import React, { useEffect } from "react";
-/* -------------------------------------------------------------------------- */
-/* Types */
-/* -------------------------------------------------------------------------- */
-/* -------------------------------------------------------------------------- */
-/* Misc */
-/* -------------------------------------------------------------------------- */
-import { useAuthViewModel } from "auth/controller/useAuthViewModel";
-import { useAuthStore } from "auth/data/authSlice";
-/* -------------------------------------------------------------------------- */
-/* Helpers */
-/* -------------------------------------------------------------------------- */
-/* -------------------------------------------------------------------------- */
-/* Components */
-/* -------------------------------------------------------------------------- */
-import AppLoader from "components/parts/Loader";
-import { useLocation, useNavigate, useSearchParams } from "react-router-dom";
-import AuthFailure from "pages/AuthFailure";
-/* -------------------------------------------------------------------------- */
-/* Authentication logic HOC component */
-/* -------------------------------------------------------------------------- */
-
-const withAuth = (
- Component: React.ComponentType
,
- componentName = Component.displayName ?? Component.name
-): {
- (props: P): JSX.Element;
- displayName: string;
-} => {
- function WithAuthComponent(props: P) {
- const store = useAuthStore();
- const [searchParams] = useSearchParams();
- const navigate = useNavigate();
- const location = useLocation();
- const { init, isLoading, isFailed, isLogedIn, authenticate } =
- useAuthViewModel(store);
- const code = searchParams.get("code");
- useEffect(() => {
- if(isFailed) {
- return;
- }
- if (code) {
- authenticate(code);
- navigate(location.pathname, {
- replace: true,
- });
- return;
- }
- if (!isLogedIn) {
- init();
- navigate(location.pathname, {
- replace: true,
- });
- }
- }, [isFailed, isLogedIn, code, authenticate, init, navigate, location]);
-
- if (isLoading) {
- return ;
-
-const authInitUseCase = (store: AuthInitStore) => {
- store.init();
-}
-
-export {authInitUseCase};
\ No newline at end of file
diff --git a/src/auth/useCases/authenticationUseCase.ts b/src/auth/useCases/authenticationUseCase.ts
deleted file mode 100644
index 6ed7e63..0000000
--- a/src/auth/useCases/authenticationUseCase.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { AuthStore } from "auth/domain/authStore";
-
-type AuthenticationStore = Pick
-
-const authenticationUseCase = (store: AuthenticationStore, code: string) => {
- store.authenticate(code);
-};
-
-export { authenticationUseCase };
diff --git a/src/auth/useCases/signoutUseCase.ts b/src/auth/useCases/signoutUseCase.ts
deleted file mode 100644
index fdeb14a..0000000
--- a/src/auth/useCases/signoutUseCase.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { AuthStore } from "auth/domain/authStore";
-import { is } from "immer/dist/internal";
-
-type LogoutStore = Pick;
-
-const signOutUseCase = (store: LogoutStore) => {
- store.signOut();
-};
-
-export { signOutUseCase as signoutUseCase };
diff --git a/src/components/AcceptCookies.tsx b/src/components/AcceptCookies.tsx
old mode 100644
new mode 100755
index b2fc1dd..2c6301d
--- a/src/components/AcceptCookies.tsx
+++ b/src/components/AcceptCookies.tsx
@@ -1,41 +1,41 @@
-import React from "react";
-import { Button } from "./Button/Button";
-import Typography from "./typography/Typography";
-
-type AcceptCookiesProps = {
- onClickAccept?: () => void;
- onClickCustomise?: () => void;
-};
-
-export function AcceptCookies({
- onClickAccept,
- onClickCustomise,
-}: AcceptCookiesProps) {
- return (
-
-
-
- By clicking “Accept All Cookies”, you agree to the storing of cookies
- on your device to enhance site navigation, analyze site usage, and
- assist in our marketing efforts.
-
-
-
-
- Customize settings
-
-
- Accept all cookies
-
-
-
+
+
+ By clicking “Accept All Cookies”, you agree to the storing of cookies
+ on your device to enhance site navigation, analyze site usage, and
+ assist in our marketing efforts.
+
+
+
+
+ Customize settings
+
+
+ Accept all cookies
+
+
+
{children}
;
-}
-
-Article.Title = ArticleTitle;
-Article.Breadcumbs = ArticleBreadcumbs;
-Article.Authors = ArticleAuthors;
-Article.Keywords = ArticleKeywords;
-Article.InteractionButtons = ArticleInteractionButtons;
-Article.Description = ArticleDescription;
-Article.SubscriptionsButtons = ArticleSubscriptionsButtons;
+import React, { useState } from "react";
+/* -------------------------------------------------------------------------- */
+/* imports Article parts */
+/* -------------------------------------------------------------------------- */
+import { ArticleTitle } from "./ArticleParts/ArticleTitle";
+import { ArticleBreadcumbs } from "./ArticleParts/ArticleBreadcumbs";
+import { ArticleAuthors } from "./ArticleParts/ArticleAuthors";
+import { ArticleKeywords } from "./ArticleParts/ArticleKeywords";
+import { ArticleInteractionButtons } from "./ArticleParts/InteractionButtons/ArticleInteractionButtons";
+import { ArticleDescription } from "./ArticleParts/ArticleDescription";
+import { ArticleSubscriptionsButtons } from "./ArticleParts/ArticleSubscriptionsButton";
+import classNames from "classnames";
+
+/**
+ * Reduces a sequence of names to initials.
+ * @param {String} name Space Delimited sequence of names.
+ * @param {String} sep A period separating the initials.
+ * @param {String} trail A period ending the initials.
+ * @param {String} hyph A hypen separating double names.
+ * @return {String} Properly formatted initials.
+ */
+type ArticleTileExtentions = {
+ Title?: {
+ children?: string;
+ className?: string;
+ };
+ Breadcumbs?: {
+ children?: string[];
+ highlightLAstChild?: boolean;
+ };
+ Authors?: {
+ children: React.ReactNode;
+ className?: string;
+ emphasis?: "low" | "high";
+ };
+ Keywords?: {
+ children?: React.ReactNode;
+ className?: string;
+ emphasis?: "low" | "high";
+ };
+ Description?: {
+ children?: React.ReactNode;
+ emphasis?: "low" | "high";
+ isShowing?: boolean;
+ };
+ InteractionButtons?: {
+ children?: React.ReactNode;
+ className?: string;
+ emphasis?: "high" | "low";
+ };
+ SubscriptionButtons?: {
+ className?: string;
+ };
+};
+
+type ArticleTileProps = {
+ className?: string;
+ children?: React.ReactNode;
+};
+
+export function Article({
+ className,
+ children,
+}: ArticleTileProps & ArticleTileExtentions) {
+ const [isShowing, setIsShowing] = useState(false);
+
+ return {children}
;
+}
+
+Article.Title = ArticleTitle;
+Article.Breadcumbs = ArticleBreadcumbs;
+Article.Authors = ArticleAuthors;
+Article.Keywords = ArticleKeywords;
+Article.InteractionButtons = ArticleInteractionButtons;
+Article.Description = ArticleDescription;
+Article.SubscriptionsButtons = ArticleSubscriptionsButtons;
diff --git a/src/components/Article/ArticleParts/ArticleAuthors.tsx b/src/components/Article/ArticleParts/ArticleAuthors.tsx
old mode 100644
new mode 100755
index 5e2e16d..3b749b8
--- a/src/components/Article/ArticleParts/ArticleAuthors.tsx
+++ b/src/components/Article/ArticleParts/ArticleAuthors.tsx
@@ -1,53 +1,53 @@
-import React, { useMemo } from "react";
-import { RouterLink } from "components/typography/RouterLink";
-import Typography from "components/typography/Typography";
-import classNames from "classnames";
-import { SVGUser } from "components/icons";
-
-type AuthorsProps = {
- children: React.ReactNode;
- className?: string;
- emphasis?: "low" | "high";
- linkTo?: string;
-};
-
-export function ArticleAuthors({
- children,
-
- className,
- emphasis = "high",
- linkTo = "#",
-}: AuthorsProps) {
- const authors = React.Children.map(children, (author, i) => {
- return (
-
-
- {author}
- {i != React.Children.count(children) - 1 ? "," : null}
-
-
- );
- });
-
- return (
-
- );
-}
-
-ArticleAuthors.displayName = "ArticleAuthors";
+import React, { useMemo } from "react";
+import { RouterLink } from "components/typography/RouterLink";
+import Typography from "components/typography/Typography";
+import classNames from "classnames";
+import { SVGUser } from "components/icons";
+
+type AuthorsProps = {
+ children: React.ReactNode;
+ className?: string;
+ emphasis?: "low" | "high";
+ linkTo?: string;
+};
+
+export function ArticleAuthors({
+ children,
+
+ className,
+ emphasis = "high",
+ linkTo = "#",
+}: AuthorsProps) {
+ const authors = React.Children.map(children, (author, i) => {
+ return (
+
+
+ {author}
+ {i != React.Children.count(children) - 1 ? "," : null}
+
+
+ );
+ });
+
+ return (
+
+ );
+}
+
+ArticleAuthors.displayName = "ArticleAuthors";
diff --git a/src/components/Article/ArticleParts/ArticleBreadcumbs.tsx b/src/components/Article/ArticleParts/ArticleBreadcumbs.tsx
old mode 100644
new mode 100755
index e52881e..ad451c1
--- a/src/components/Article/ArticleParts/ArticleBreadcumbs.tsx
+++ b/src/components/Article/ArticleParts/ArticleBreadcumbs.tsx
@@ -1,4 +1,3 @@
-import React from "react";
import Breadcrumbs from "components/breadcrumbs";
import Logo from "components/Logo";
import classNames from "classnames";
@@ -6,20 +5,23 @@ import classNames from "classnames";
type ArticleBreadcumbsProps = {
emphasis?: "high" | "low";
children?: string[];
+ className?: string;
};
export function ArticleBreadcumbs({
children,
- emphasis = "high", //Emphasis high uses when we display article page
+ emphasis = "high",
+ className, //Emphasis high uses when we display article page
}: ArticleBreadcumbsProps) {
return (
{emphasis === "high" ?
-
- {children}
-
-
- ) : (
-
- {children}
-
- );
-}
-
-ArticleDescription.displayName = "ArticleDescription";
+import React from "react";
+import Typography from "components/typography/Typography";
+import { Transition } from "@headlessui/react";
+import classNames from "classnames";
+
+type ArticleDescriptionProps = {
+ children?: React.ReactNode;
+ emphasis?: "low" | "high";
+ isShowing?: boolean;
+ className?: string;
+};
+
+export function ArticleDescription({
+ children,
+ className,
+ emphasis = "high",
+ isShowing = false,
+}: ArticleDescriptionProps) {
+ return emphasis === "low" ? (
+
+
+ {children}
+
+
+ ) : (
+
+ {children}
+
+ );
+}
+
+ArticleDescription.displayName = "ArticleDescription";
diff --git a/src/components/Article/ArticleParts/ArticleKeywords.tsx b/src/components/Article/ArticleParts/ArticleKeywords.tsx
old mode 100644
new mode 100755
index 01b5546..5cc1ef8
--- a/src/components/Article/ArticleParts/ArticleKeywords.tsx
+++ b/src/components/Article/ArticleParts/ArticleKeywords.tsx
@@ -26,7 +26,7 @@ export function ArticleKeywords({
"hover:text-blue-600",
{
"text-xs text-gray-500 leading-5": emphasis === "low",
- "text-base text-gray-900 px-2 border rounded hover:border-blue-600 border-gray-900":
+ "text-base text-gray-900 px-2 border rounded hover:border-blue-600 border-gray-200":
emphasis === "high",
},
className
@@ -47,7 +47,13 @@ export function ArticleKeywords({
{emphasis === "low" ? (
{keywords}
+
+ {keywords}
+
);
}
diff --git a/src/components/Article/ArticleParts/ArticleSubscriptionsButton.tsx b/src/components/Article/ArticleParts/ArticleSubscriptionsButton.tsx
old mode 100644
new mode 100755
index ad6dd09..24c9c8b
--- a/src/components/Article/ArticleParts/ArticleSubscriptionsButton.tsx
+++ b/src/components/Article/ArticleParts/ArticleSubscriptionsButton.tsx
@@ -1,39 +1,39 @@
-import React, { useState } from "react";
-import { Button } from "components/Button/Button";
-import {
- SVGFavoriteFilled,
- SVGFavoriteOutlined,
- SVGFolder,
-} from "components/icons";
-
-const subscriptionStyles = "fill-gray-500 stroke-gray-500 w-6";
-
-type ArticleSubscriptionsButtonsProps = {
- className?: string;
- favorite?: boolean;
- //Todo create tracking subscriptions and onClick props
-} & Omit, "">;
-
-export function ArticleSubscriptionsButtons({
- className,
- favorite = false,
-}: ArticleSubscriptionsButtonsProps) {
- return (
-
-
-
-
-
- {}}>
-
- {!favorite ? (
-
-
-
- );
-}
+import React, { useState } from "react";
+import { Button } from "components/Button/Button";
+import {
+ SVGFavoriteFilled,
+ SVGFavoriteOutlined,
+ SVGFolder,
+} from "components/icons";
+
+const subscriptionStyles = "fill-gray-500 stroke-gray-500 w-6";
+
+type ArticleSubscriptionsButtonsProps = {
+ className?: string;
+ favorite?: boolean;
+ //Todo create tracking subscriptions and onClick props
+} & Omit, "">;
+
+export function ArticleSubscriptionsButtons({
+ className,
+ favorite = false,
+}: ArticleSubscriptionsButtonsProps) {
+ return (
+
+
+
+
+
+ {}}>
+
+ {!favorite ? (
+
+
+
+ );
+}
diff --git a/src/components/Article/ArticleParts/ArticleTitle.tsx b/src/components/Article/ArticleParts/ArticleTitle.tsx
old mode 100644
new mode 100755
index 7a5ae89..939d848
--- a/src/components/Article/ArticleParts/ArticleTitle.tsx
+++ b/src/components/Article/ArticleParts/ArticleTitle.tsx
@@ -1,24 +1,24 @@
-import React from "react";
-import Typography from "components/typography/Typography";
-import { RouterLink } from "components/typography/RouterLink";
-type ArticleTitleProps = {
- className?: string;
- children?: string;
- linkTo?: string;
-};
-
-export function ArticleTitle({
- className,
- children,
- linkTo = "#",
-}: ArticleTitleProps) {
- return (
-
-
- {children}
-
-
- );
-}
-
-ArticleTitle.displayName = "ArticleTitle";
+import React from "react";
+import Typography from "components/typography/Typography";
+import { RouterLink } from "components/typography/RouterLink";
+type ArticleTitleProps = {
+ className?: string;
+ children?: string;
+ linkTo?: string;
+};
+
+export function ArticleTitle({
+ className,
+ children,
+ linkTo = "#",
+}: ArticleTitleProps) {
+ return (
+
+
+ {children}
+
+
+ );
+}
+
+ArticleTitle.displayName = "ArticleTitle";
diff --git a/src/components/Article/ArticleParts/ArticleInteractionButtons.tsx b/src/components/Article/ArticleParts/InteractionButtons/ArticleInteractionButtons.tsx
old mode 100644
new mode 100755
similarity index 77%
rename from src/components/Article/ArticleParts/ArticleInteractionButtons.tsx
rename to src/components/Article/ArticleParts/InteractionButtons/ArticleInteractionButtons.tsx
index ef69869..f2435e8
--- a/src/components/Article/ArticleParts/ArticleInteractionButtons.tsx
+++ b/src/components/Article/ArticleParts/InteractionButtons/ArticleInteractionButtons.tsx
@@ -11,6 +11,7 @@ import {
SVGFolder,
} from "components/icons";
import classNames from "classnames";
+import { Transition } from "@headlessui/react";
const interactionButtonsStore = [
{
@@ -40,24 +41,32 @@ const interactionButtonsStore = [
];
type ArticleButtonProps = {
+ isAbstractOpen: boolean;
+ openAbstract: () => void;
children?: React.ReactNode;
className?: string;
emphasis?: "high" | "low";
} & Omit, "">;
export function ArticleInteractionButtons({
+ isAbstractOpen = false,
children,
+ openAbstract = () => { },
className,
- emphasis, //to change displaying of component
+ emphasis = "high", //to change displaying of component
...props
}: ArticleButtonProps) {
const abstractButton = (
-
+
Abstract
-
);
@@ -66,7 +75,7 @@ export function ArticleInteractionButtons({
return (
{React.cloneElement(button.icon, { className: button.iconClassName })}
diff --git a/src/components/Article/ArticleSearch.tsx b/src/components/Article/ArticleSearch.tsx
deleted file mode 100644
index 8b0e397..0000000
--- a/src/components/Article/ArticleSearch.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from "react";
-import { Article } from "./Article";
-
-export function ArticleSearch() {
- return (
-
-
-
- {["Yoda", "Lallalla", "Maxim"]}
-
-
-
- {["Reavap", "aldjfoa", "dkfjaoif"]}
-
-
- {["porn", "development", "frontend"]}
-
-
-
- low
-
-
- {" "}
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere quidem
- provident temporibus! Fuga dolores placeat at voluptatem quia, vero
- molestiae animi et itaque a, officia ullam expedita temporibus cum
- deserunt.Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere
- quidem provident temporibus! Fuga dolores placeat at voluptatem quia,
- vero molestiae animi et itaque a, officia ullam expedita temporibus cum
- deserunt.Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere
- quidem provident temporibus! Fuga dolores placeat at voluptatem quia,
- vero molestiae animi et itaque a, officia ullam expedita temporibus cum
- deserunt.Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere
- quidem provident temporibus! Fuga dolores placeat at voluptatem quia,
- vero molestiae animi et itaque a, officia ullam expedita temporibus cum
- deserunt.
-
-
- );
-}
diff --git a/src/components/ArticleSearchResult.tsx b/src/components/ArticleSearchResult.tsx
new file mode 100644
index 0000000..e0c5f49
--- /dev/null
+++ b/src/components/ArticleSearchResult.tsx
@@ -0,0 +1,64 @@
+import { useState } from "react";
+import { Article } from "components/Article/Article";
+import { Article as ArticleTypes } from "article/domain/ArticleEntity";
+import classNames from "classnames";
+import { debounce } from "lodash";
+import { useSearchStoreImplementation } from "searchResults/data/searchStoreImplementation";
+import { useSearchViewModel } from "searchResults/controller/searchResultsViewModel";
+import { Loader } from "./Loader/Loader";
+
+type Props = {
+ searchItem: ArticleTypes;
+};
+
+export const ArticleSearchResult = ({ searchItem }: Props) => {
+ const store = useSearchStoreImplementation();
+ const { isLoading } = useSearchViewModel(store);
+
+ const [openAbstract, setOpenAbstract] = useState(false);
+
+ const debouncedTask = debounce((task) => Promise.resolve(task()), 200);
+
+ function open() {
+ debouncedTask(() => setOpenAbstract(!openAbstract));
+ }
+
+ return (
+
+
+
+ {[
+ `${searchItem.topic}`,
+ `${searchItem.topic}`,
+ `${searchItem.topic}`,
+ `${searchItem.topic}`,
+ ]}
+
+
+
+ {searchItem.title}
+
+
+ {searchItem.authors}
+
+
+ {searchItem.tags}
+
+
+ {searchItem.summary}
+
+
+ );
+};
diff --git a/src/components/AspectRatio.tsx b/src/components/AspectRatio.tsx
old mode 100644
new mode 100755
index be6a1b8..ba3f290
--- a/src/components/AspectRatio.tsx
+++ b/src/components/AspectRatio.tsx
@@ -1,38 +1,38 @@
-import classNames from "classnames";
-import React from "react";
-
-export type Props = {
- /**
- * The style of component
- */
- className?: string;
- /**
- * The optional child
- */
- children?: React.ReactNode;
-};
-const AspectRatio = ({ className, children }: Props) => {
- return (
-
- {children}
-
- );
-};
-
-AspectRatio.Content = function AspectRatioContent({
- className,
- children,
-}: Props) {
- return (
-
- {children}
-
- );
-};
-
-export default AspectRatio;
+import classNames from "classnames";
+import React from "react";
+
+export type Props = {
+ /**
+ * The style of component
+ */
+ className?: string;
+ /**
+ * The optional child
+ */
+ children?: React.ReactNode;
+};
+const AspectRatio = ({ className, children }: Props) => {
+ return (
+
+ {children}
+
+ );
+};
+
+AspectRatio.Content = function AspectRatioContent({
+ className,
+ children,
+}: Props) {
+ return (
+
+ {children}
+
+ );
+};
+
+export default AspectRatio;
diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
old mode 100644
new mode 100755
index 7678fce..7de6456
--- a/src/components/Avatar.tsx
+++ b/src/components/Avatar.tsx
@@ -1,83 +1,83 @@
-import classNames from "classnames";
-import React from "react";
-
-export type Props = {
- /**
- * The style avatar
- */
- className?: string;
- /**
- * The path of image
- */
- src?: string;
- /**
- * The alternative text in case the image is not valid
- */
- alt?: string;
- /**
- * The text inside avatar as a child
- */
- children?: React.ReactNode;
-};
-
-// Choosing random color for the avatar background
-function getRandomInt(max: number) {
- return Math.floor(Math.random() * max);
-}
-let colors: string[] = [
- "bg-red-400",
- "bg-orange-400",
- "bg-green-400",
- "bg-amber-400",
- "bg-yellow-400",
- "bg-lime-400",
- "bg-emerald-400",
- "bg-teal-400",
- "bg-cyan-400",
- "bg-sky-400",
- "bg-blue-400",
- "bg-indigo-400",
- "bg-violet-400",
- "bg-purple-400",
- "bg-fuchsia-400",
-];
-
-const Avatar = ({ className, src, alt, children }: Props) => {
- const wrapperClasses = src ? "" : colors[getRandomInt(colors.length)];
- const position = src ? "relative pt-[100%]" : "";
- return (
-
- {/* In case the src is valid, it will show the image */}
- {src && (
-
- )}
- {/* The text will be shown in case it is valid */}
- {children && (
-
- {children}
-
- )}
-
+ {/* In case the src is valid, it will show the image */}
+ {src && (
+
+ )}
+ {/* The text will be shown in case it is valid */}
+ {children && (
+
+ {children}
+
+ )}
+
;
-
-const Template: ComponentStory = (args) => ;
+
+const Template: ComponentStory = (args) => , "">;
-
-/* -------------------------------------------------------------------------- */
-/* Component implementation */
-/* -------------------------------------------------------------------------- */
-
-function Badge({
- className,
- children,
- onClick,
- emphasis = "low",
- ...props
-}: Props): JSX.Element {
- return (
-
- {children}
-
- );
-}
-export default Badge;
+/* -------------------------------------------------------------------------- */
+/* Imports */
+/* -------------------------------------------------------------------------- */
+
+import classNames from "classnames";
+import { StyleType } from "core/_variants";
+import React from "react";
+
+/* -------------------------------------------------------------------------- */
+/* Component props */
+/* -------------------------------------------------------------------------- */
+
+type Props = {
+ emphasis?: StyleType;
+ children: React.ReactNode;
+ className?: string;
+ iconed?: boolean;
+ onClick?: () => void;
+} & Omit, "">;
+
+/* -------------------------------------------------------------------------- */
+/* Component implementation */
+/* -------------------------------------------------------------------------- */
+
+function Badge({
+ className,
+ children,
+ onClick,
+ emphasis = "low",
+ ...props
+}: Props): JSX.Element {
+ return (
+
+ {children}
+
+ );
+}
+export default Badge;
diff --git a/src/components/BaseLayout.tsx b/src/components/BaseLayout.tsx
old mode 100644
new mode 100755
diff --git a/src/components/BottomSheetBar.tsx b/src/components/BottomSheetBar.tsx
old mode 100644
new mode 100755
index 6e25743..03e7f61
--- a/src/components/BottomSheetBar.tsx
+++ b/src/components/BottomSheetBar.tsx
@@ -1,58 +1,58 @@
-import { useState } from "react";
-import { Dialog } from "@headlessui/react";
-import { Button } from "./Button/Button";
-import Typography from "components/typography/Typography";
-
-export function BottomSheetBar() {
- // The open/closed state lives outside of the Dialog and is managed by you
- let [isOpen, setIsOpen] = useState(true);
-
- function handleDeactivate() {
- alert("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA");
- }
-
- return (
- /*
- Pass `isOpen` to the `open` prop, and use `onClose` to set
- the state back to `false` when the user clicks outside of
- the dialog or presses the escape key.
- */
- {}}
- className="absolute bottom-0 bg-blue-900 text-white w-full"
- >
-
-
- By clicking “Accept All Cookies”, you agree to the storing of cookies
- on your device to enhance site navigation, analyze site usage, and
- assist in our marketing efforts.
-
- {/*
- You can render additional buttons to dismiss your dialog by setting
- `isOpen` to `false`.
- */}
-
-
-
- Customize settings
-
-
- setIsOpen(false)}
- >
-
- Accept all cookies
-
-
-
-
-
- );
-}
+import { useState } from "react";
+import { Dialog } from "@headlessui/react";
+import { Button } from "./Button/Button";
+import Typography from "components/typography/Typography";
+
+export function BottomSheetBar() {
+ // The open/closed state lives outside of the Dialog and is managed by you
+ let [isOpen, setIsOpen] = useState(true);
+
+ function handleDeactivate() {
+ alert("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA");
+ }
+
+ return (
+ /*
+ Pass `isOpen` to the `open` prop, and use `onClose` to set
+ the state back to `false` when the user clicks outside of
+ the dialog or presses the escape key.
+ */
+ {}}
+ className="absolute bottom-0 bg-blue-900 text-white w-full"
+ >
+
+
+ By clicking “Accept All Cookies”, you agree to the storing of cookies
+ on your device to enhance site navigation, analyze site usage, and
+ assist in our marketing efforts.
+
+ {/*
+ You can render additional buttons to dismiss your dialog by setting
+ `isOpen` to `false`.
+ */}
+
+
+
+ Customize settings
+
+
+ setIsOpen(false)}
+ >
+
+ Accept all cookies
+
+
+
+
+
+ );
+}
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
old mode 100644
new mode 100755
index 474d8e3..36b3b8c
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -1,92 +1,92 @@
-/* -------------------------------------------------------------------------- */
-/* Imports */
-/* -------------------------------------------------------------------------- */
-import React from "react";
-import classNames from "classnames";
-import { StyleType } from "core/_variants";
-import * as btnEmphasis from "./_btnEmphasis";
-import IconButton from "./IconButton";
-
-/* -------------------------------------------------------------------------- */
-/* Extention for component */
-/* -------------------------------------------------------------------------- */
-
-type ButtonExtentions = {
- Icon: React.FC<{
- children: Required;
- className?: string;
- }>;
-};
-
-/* -------------------------------------------------------------------------- */
-/* Component props */
-/* -------------------------------------------------------------------------- */
-type ButtonProps = {
- defaultStyle?: boolean;
- emphasis?: StyleType | undefined; //Choose one of three variants of button. By default it will be "high"
- disabled?: boolean;
-} & Omit, "">;
-
-/* -------------------------------------------------------------------------- */
-/* Component implementation */
-/* -------------------------------------------------------------------------- */
-export const Button: React.FC & ButtonExtentions = ({
- defaultStyle = true,
- emphasis = "high",
- disabled = false,
- className,
- children,
- ...props
-}) => {
- const isOnlyIcon =
- children &&
- React.isValidElement(children) &&
- React.Children.only(children).type == IconButton;
-
- const padding = isOnlyIcon ? "px-2.5 py-2" : "px-4 py-2";
-
- return (
- {} : undefined}
- className={classNames([
- "flex content-center justify-between",
- "text-center",
- padding,
- "rounded",
- {
- "!cursor-default": disabled,
- "transition-all": !disabled,
- "transition duration-200": !disabled,
- },
- {
- // Define high emphasis
- [`${btnEmphasis.EnableHigh}`]:
- defaultStyle && !disabled && emphasis === "high",
- [`${btnEmphasis.DisabledHigh}`]:
- defaultStyle && disabled && emphasis === "high",
- [`${btnEmphasis.GeneralHigh}`]: defaultStyle && emphasis === "high",
- // Define medium emphasis
- [`${btnEmphasis.EnabledMedium}`]:
- defaultStyle && !disabled && emphasis === "medium",
- [`${btnEmphasis.DisabledMedium}`]:
- defaultStyle && disabled && emphasis === "medium",
- [`${btnEmphasis.GeneralMedium}`]:
- defaultStyle && emphasis === "medium",
- // Define low emphasis
- [`${btnEmphasis.EnabledLow}`]:
- defaultStyle && !disabled && emphasis === "low",
- [`${btnEmphasis.DisabledLow}`]:
- defaultStyle && disabled && emphasis === "low",
- [`${btnEmphasis.GenerealLow}`]: defaultStyle && emphasis === "low",
- },
- className,
- ])}
- {...props}
- >
- {children}
-
- );
-};
-
-Button.Icon = IconButton;
+/* -------------------------------------------------------------------------- */
+/* Imports */
+/* -------------------------------------------------------------------------- */
+import React from "react";
+import classNames from "classnames";
+import { StyleType } from "core/_variants";
+import * as btnEmphasis from "./_btnEmphasis";
+import IconButton from "./IconButton";
+
+/* -------------------------------------------------------------------------- */
+/* Extention for component */
+/* -------------------------------------------------------------------------- */
+
+type ButtonExtentions = {
+ Icon: React.FC<{
+ children: Required;
+ className?: string;
+ }>;
+};
+
+/* -------------------------------------------------------------------------- */
+/* Component props */
+/* -------------------------------------------------------------------------- */
+type ButtonProps = {
+ defaultStyle?: boolean;
+ emphasis?: StyleType | undefined; //Choose one of three variants of button. By default it will be "high"
+ disabled?: boolean;
+} & Omit, "">;
+
+/* -------------------------------------------------------------------------- */
+/* Component implementation */
+/* -------------------------------------------------------------------------- */
+export const Button: React.FC & ButtonExtentions = ({
+ defaultStyle = true,
+ emphasis = "high",
+ disabled = false,
+ className,
+ children,
+ ...props
+}) => {
+ const isOnlyIcon =
+ children &&
+ React.isValidElement(children) &&
+ React.Children.only(children).type == IconButton;
+
+ const padding = isOnlyIcon ? "px-2.5 py-2" : "px-4 py-2";
+
+ return (
+ {} : undefined}
+ className={classNames([
+ "flex content-center justify-between",
+ "text-center",
+ padding,
+ "rounded",
+ {
+ "!cursor-default": disabled,
+ "transition-all": !disabled,
+ "transition duration-200": !disabled,
+ },
+ {
+ // Define high emphasis
+ [`${btnEmphasis.EnableHigh}`]:
+ defaultStyle && !disabled && emphasis === "high",
+ [`${btnEmphasis.DisabledHigh}`]:
+ defaultStyle && disabled && emphasis === "high",
+ [`${btnEmphasis.GeneralHigh}`]: defaultStyle && emphasis === "high",
+ // Define medium emphasis
+ [`${btnEmphasis.EnabledMedium}`]:
+ defaultStyle && !disabled && emphasis === "medium",
+ [`${btnEmphasis.DisabledMedium}`]:
+ defaultStyle && disabled && emphasis === "medium",
+ [`${btnEmphasis.GeneralMedium}`]:
+ defaultStyle && emphasis === "medium",
+ // Define low emphasis
+ [`${btnEmphasis.EnabledLow}`]:
+ defaultStyle && !disabled && emphasis === "low",
+ [`${btnEmphasis.DisabledLow}`]:
+ defaultStyle && disabled && emphasis === "low",
+ [`${btnEmphasis.GenerealLow}`]: defaultStyle && emphasis === "low",
+ },
+ className,
+ ])}
+ {...props}
+ >
+ {children}
+
+ );
+};
+
+Button.Icon = IconButton;
diff --git a/src/components/Button/IconButton.tsx b/src/components/Button/IconButton.tsx
old mode 100644
new mode 100755
index ac44982..09c7ae4
--- a/src/components/Button/IconButton.tsx
+++ b/src/components/Button/IconButton.tsx
@@ -1,21 +1,21 @@
-import classNames from "classnames";
-import React, { FunctionComponent as FC } from "react";
-import { SVGSearch } from "../icons";
-
-type IconButtonProps = {
- children: Required;
- className?: string;
-} & Omit, "">;
-
-const IconButton: React.FC = ({
- children,
- className,
-}): JSX.Element => {
- return className
- ? React.cloneElement(children, {
- className: classNames(className),
- })
- : children;
-};
-IconButton.displayName = "ButtonIcon";
-export default IconButton;
+import classNames from "classnames";
+import React, { FunctionComponent as FC } from "react";
+import { SVGSearch } from "../icons";
+
+type IconButtonProps = {
+ children: Required;
+ className?: string;
+} & Omit, "">;
+
+const IconButton: React.FC = ({
+ children,
+ className,
+}): JSX.Element => {
+ return className
+ ? React.cloneElement(children, {
+ className: classNames(className),
+ })
+ : children;
+};
+IconButton.displayName = "ButtonIcon";
+export default IconButton;
diff --git a/src/components/Button/_btnEmphasis.tsx b/src/components/Button/_btnEmphasis.tsx
old mode 100644
new mode 100755
index 37422e6..cbb43b8
--- a/src/components/Button/_btnEmphasis.tsx
+++ b/src/components/Button/_btnEmphasis.tsx
@@ -1,65 +1,65 @@
-/* -------------------------------------------------------------------------- */
-/* styles */
-/* -------------------------------------------------------------------------- */
-
-export const EnableHigh = `bg-blue-600
- hover:bg-blue-500
- active:bg-blue-700
- focus:shadow-lg shadow-blue-500
- focus:outline outline-blue-400/10 outline-8
-`;
-
-export const DisabledHigh = `bg-gray-200
- focus:outline-none`;
-
-export const GeneralHigh = `
- text-white
- fill-white
- stroke-white
- `;
-
-export const EnabledMedium = `text-blue-600
- border-gray-500
- active:border-blue-700
- active:text-blue-700
- hover:border-blue-500
- hover:text-blue-500
- focus:outline outline-blue-400/10 outline-8
- focus:border-blue-700/70
- fill-blue-600
- hover:fill-blue-500
- active:fill-blue-700
- focus:fill-blue-700
- stroke-blue-600
- hover:stroke-blue-500
- active:stroke-blue-700
- focus:stroke-blue-700
-`;
-
-export const DisabledMedium = `text-gray-200
- border-gray-200
- fill-gray-200
- stroke-gray-200
- focus:outline-none`;
-
-export const GeneralMedium = `bg-white
- border`;
-
-export const EnabledLow = ` text-gray-900
- hover:bg-gray-100
- active:text-blue-700
- active:bg-blue-100
- focus:bg-blue-100
- fill-gray-900
- stroke-gray-900
- active:fill-blue-600
- active:stroke-blue-600
- `;
-
-export const DisabledLow = `text-gray-200
- fill-gray-200
- stroke-gray-200`;
-
-export const GenerealLow = `focus:outline-none
- bg-transparent
-`;
+/* -------------------------------------------------------------------------- */
+/* styles */
+/* -------------------------------------------------------------------------- */
+
+export const EnableHigh = `bg-blue-600
+ hover:bg-blue-500
+ active:bg-blue-700
+ focus:shadow-lg shadow-blue-500
+ focus:outline outline-blue-400/10 outline-8
+`;
+
+export const DisabledHigh = `bg-gray-200
+ focus:outline-none`;
+
+export const GeneralHigh = `
+ text-white
+ fill-white
+ stroke-white
+ `;
+
+export const EnabledMedium = `text-blue-600
+ border-gray-500
+ active:border-blue-700
+ active:text-blue-700
+ hover:border-blue-500
+ hover:text-blue-500
+ focus:outline outline-blue-400/10 outline-8
+ focus:border-blue-700/70
+ fill-blue-600
+ hover:fill-blue-500
+ active:fill-blue-700
+ focus:fill-blue-700
+ stroke-blue-600
+ hover:stroke-blue-500
+ active:stroke-blue-700
+ focus:stroke-blue-700
+`;
+
+export const DisabledMedium = `text-gray-200
+ border-gray-200
+ fill-gray-200
+ stroke-gray-200
+ focus:outline-none`;
+
+export const GeneralMedium = `bg-white
+ border`;
+
+export const EnabledLow = ` text-gray-900
+ hover:bg-gray-100
+ active:text-blue-700
+ active:bg-blue-100
+ focus:bg-blue-100
+ fill-gray-900
+ stroke-gray-900
+ active:fill-blue-600
+ active:stroke-blue-600
+ `;
+
+export const DisabledLow = `text-gray-200
+ fill-gray-200
+ stroke-gray-200`;
+
+export const GenerealLow = `focus:outline-none
+ bg-transparent
+`;
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
old mode 100644
new mode 100755
index 39cabd7..3fbc9d4
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -1,127 +1,127 @@
-import classNames from "classnames";
-import React from "react";
-
-/* -------------------------------------------------------------------------- */
-/* Components */
-/* -------------------------------------------------------------------------- */
-import Typography from "./typography/Typography";
-import Heading from "./typography/Heading";
-import Link from "./typography/Link";
-/* -------------------------------------------------------------------------- */
-/* Props */
-/* -------------------------------------------------------------------------- */
-type Props = {
- /**
- * Card component accept children
- */
- children: React.ReactNode;
- /**
- * Styling the card component
- */
- className?: string | undefined;
-};
-
-const Card = ({ children, className }: Props) => {
- return (
-
- {children}
-
- );
-};
-
-// Avatar function
-type AvatarProps = {
- children?: React.ReactNode;
-};
-Card.Avatar = function CardAvatar({ children }: AvatarProps) {
- return {children}
;
-};
-
-// Title function
-Card.Title = function CardTitle({ children, className }: Props) {
- return (
-
- {children}
-
- );
-};
-
-// SubTitle function
-Card.SubTitle = function CardSubTitle({ children, className }: Props) {
- return (
- {children}
- );
-};
-
-// Body function
-Card.Body = function CardTitle({ children, className }: Props) {
- return (
-
- {children}
-
- );
-};
-
-// Cardheader function
-Card.CardHeader = function CardCardHeader({ children, className }: Props) {
- return (
-
- {children}
-
- );
-};
-
-// Cardcontent function
-Card.CardContent = function CardCardContent({ children, className }: Props) {
- return (
-
- {children}
-
- );
-};
-
-// Cardaction function
-type CardActionProps = {
- children: React.ReactNode;
- className?: string | undefined;
- href?: string;
-};
-Card.CardAction = function CardCardAction({
- children,
- className,
- href = "#",
-}: CardActionProps) {
- return (
-
+ {children}
+
+ );
+};
+
+// Avatar function
+type AvatarProps = {
+ children?: React.ReactNode;
+};
+Card.Avatar = function CardAvatar({ children }: AvatarProps) {
+ return {children}
;
+};
+
+// Title function
+Card.Title = function CardTitle({ children, className }: Props) {
+ return (
+
+ {children}
+
+ );
+};
+
+// SubTitle function
+Card.SubTitle = function CardSubTitle({ children, className }: Props) {
+ return (
+ {children}
+ );
+};
+
+// Body function
+Card.Body = function CardTitle({ children, className }: Props) {
+ return (
+
+ {children}
+
+ );
+};
+
+// Cardheader function
+Card.CardHeader = function CardCardHeader({ children, className }: Props) {
+ return (
+
+ {children}
+
+ );
+};
+
+// Cardcontent function
+Card.CardContent = function CardCardContent({ children, className }: Props) {
+ return (
+
+ {children}
+
+ );
+};
+
+// Cardaction function
+type CardActionProps = {
+ children: React.ReactNode;
+ className?: string | undefined;
+ href?: string;
+};
+Card.CardAction = function CardCardAction({
+ children,
+ className,
+ href = "#",
+}: CardActionProps) {
+ return (
+ ;
-} & Omit, "">;
-
-function CategoryCard({ count, title, iconChild, className, ...props }: Props) {
- const iconChildStyle =
- "h-7 fill-gray-500 stroke-gray-500 group-focus:fill-blue-600 group-active:fill-blue-600 group-focus:stroke-blue-600 group-active:stroke-blue-600";
-
- return (
-
-
-
-
- {React.cloneElement(iconChild, {
- className: classNames(iconChildStyle, className),
- })}
-
-
-
-
- {title}
-
-
-
-
- {count} Items
-
-
-
-
-
;
+} & Omit, "">;
+
+function CategoryCard({ count, title, iconChild, className, ...props }: Props) {
+ const iconChildStyle =
+ "h-7 fill-gray-500 stroke-gray-500 group-focus:fill-blue-600 group-active:fill-blue-600 group-focus:stroke-blue-600 group-active:stroke-blue-600";
+
+ return (
+
+
+
+
+ {React.cloneElement(iconChild, {
+ className: classNames(iconChildStyle, className),
+ })}
+
+
+
+
+ {title}
+
+
+
+
+ {count} Items
+
+
+
+
+
;
-
-const Template: ComponentStory = (args) => (
- ;
+
+const Template: ComponentStory = (args) => (
+ , "type">;
-
-const Checkbox = ({ children, className, isChecked, ...props }: Props) => {
- return (
-
-
- {children}
-
- );
-};
-export default Checkbox;
+import React from "react";
+import classNames from "classnames";
+import { ReactComponent as Checkmark } from "assets/svg/check.svg";
+
+export type Props = {
+ /**
+ * Control the state of checkbox
+ */
+ isChecked: boolean;
+ /**
+ * An Element next to the checkbox
+ */
+ children?: React.ReactNode;
+} & Omit, "type">;
+
+const Checkbox = ({ children, className, isChecked, ...props }: Props) => {
+ return (
+
+
+ {children}
+
+ );
+};
+export default Checkbox;
diff --git a/src/components/CircleLoader.tsx b/src/components/CircleLoader.tsx
old mode 100644
new mode 100755
index b3a9586..958c731
--- a/src/components/CircleLoader.tsx
+++ b/src/components/CircleLoader.tsx
@@ -1,30 +1,30 @@
-import React from "react";
-
-
-export default function CircleLoader() {
- return (
-
-
-
-
-
-
- );
-}
+import React from "react";
+
+
+export default function CircleLoader() {
+ return (
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/Container.stories.tsx b/src/components/Container.stories.tsx
old mode 100644
new mode 100755
index 83c312c..ecaab15
--- a/src/components/Container.stories.tsx
+++ b/src/components/Container.stories.tsx
@@ -1,88 +1,88 @@
-import React from 'react';
-
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-
-import Container from './Container';
-
-export default {
- // Title inside navigation bar
- title: 'Container',
- // Component to test
- component: Container,
- // Clarifying the way how to process specific
- // properties of your component and which values
- // it can accept.
-} as ComponentMeta;
-
-/**
- * This is a way to define a tempalte for your component.
- *
- * This template should cover all the states.
- *
- * In most cases you should just distruct args attribute
- * on a returning component.
- */
-const Template: ComponentStory = (args) => (
- = Template.bind({});
-Desktop.args = {
- className: 'bg-blue-500 w-840 block',
- children: 840px
,
-
-}
-
-Desktop.parameters = {
- viewport: {
- defaultViewport: 'desktop',
-
- viewports: {
-
- desktop: {
- name: 'main_container',
- styles: {
- width: '840px',
- height: '100%',
- paddingLeft: '0.5rem',
- paddingRight: '0.5rem',
- },
- type: 'desktop',
- },
-
- screen_sm: {
- name: 'screen_sm',
- styles: {
- width: 'calc(100% - 30px)',
- height: '100%',
- },
- type: 'tablet',
- },
-
- screen_md: {
- name: 'screen_md',
- styles: {
- width: 'calc(100% - 30px)',
- height: '100%',
- },
- type: 'tablet',
- },
-
- screen_lg_xl_2xl: {
- name: 'lg-xl-2xl',
- styles: {
- width: '840px',
- height: '100%',
- },
- type: 'desktop',
- },
- }
- }
-}
-
-
+import React from 'react';
+
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import Container from './Container';
+
+export default {
+ // Title inside navigation bar
+ title: 'Container',
+ // Component to test
+ component: Container,
+ // Clarifying the way how to process specific
+ // properties of your component and which values
+ // it can accept.
+} as ComponentMeta;
+
+/**
+ * This is a way to define a tempalte for your component.
+ *
+ * This template should cover all the states.
+ *
+ * In most cases you should just distruct args attribute
+ * on a returning component.
+ */
+const Template: ComponentStory = (args) => (
+ = Template.bind({});
+Desktop.args = {
+ className: 'bg-blue-500 w-840 block',
+ children: 840px
,
+
+}
+
+Desktop.parameters = {
+ viewport: {
+ defaultViewport: 'desktop',
+
+ viewports: {
+
+ desktop: {
+ name: 'main_container',
+ styles: {
+ width: '840px',
+ height: '100%',
+ paddingLeft: '0.5rem',
+ paddingRight: '0.5rem',
+ },
+ type: 'desktop',
+ },
+
+ screen_sm: {
+ name: 'screen_sm',
+ styles: {
+ width: 'calc(100% - 30px)',
+ height: '100%',
+ },
+ type: 'tablet',
+ },
+
+ screen_md: {
+ name: 'screen_md',
+ styles: {
+ width: 'calc(100% - 30px)',
+ height: '100%',
+ },
+ type: 'tablet',
+ },
+
+ screen_lg_xl_2xl: {
+ name: 'lg-xl-2xl',
+ styles: {
+ width: '840px',
+ height: '100%',
+ },
+ type: 'desktop',
+ },
+ }
+ }
+}
+
+
\ No newline at end of file
diff --git a/src/components/Container.tsx b/src/components/Container.tsx
old mode 100644
new mode 100755
index f0f2c67..9d913b3
--- a/src/components/Container.tsx
+++ b/src/components/Container.tsx
@@ -1,28 +1,28 @@
-import classNames from "classnames";
-import React from "react";
-type Props = {
- /**
- * Content of component
- */
- children: React.ReactNode;
- /**
- * Display variants of container
- */
- variant?: "straight" | "wide";
- /**
- * Component styling
- */
- className?: string;
-};
-/**
- * Main container to handle page content max-width on
- * different screen sizes
- */
-export default function Container({ children, variant, className }: Props) {
- const wideClass = variant == "straight" ? "container" : "container-wide";
- return (
-
- {children}
-
- );
-}
+import classNames from "classnames";
+import React from "react";
+type Props = {
+ /**
+ * Content of component
+ */
+ children: React.ReactNode;
+ /**
+ * Display variants of container
+ */
+ variant?: "straight" | "wide";
+ /**
+ * Component styling
+ */
+ className?: string;
+};
+/**
+ * Main container to handle page content max-width on
+ * different screen sizes
+ */
+export default function Container({ children, variant, className }: Props) {
+ const wideClass = variant == "straight" ? "container" : "container-wide";
+ return (
+
+ {children}
+
+ );
+}
diff --git a/src/components/Hexagon.tsx b/src/components/Hexagon.tsx
old mode 100644
new mode 100755
index f0cf640..a0e758a
--- a/src/components/Hexagon.tsx
+++ b/src/components/Hexagon.tsx
@@ -1,69 +1,69 @@
-import classNames from "classnames";
-import { StyleColorVariants, StyleColorVariantsMap } from "core/_variants";
-import React from "react";
-
-type Props = {
- className?: string | undefined;
- children: string;
- fontSize?: number;
- variant?: StyleColorVariants | undefined;
-};
-
-const hexagonStyles: StyleColorVariantsMap = {
- gray: "fill-gray-500",
- pink: "fill-pink-500",
- blue: "fill-blue-500",
- purple: "fill-purple-500",
- red: "fill-red-500",
- yellow: "fill-yellow-600",
- emerald: "fill-emerald-500",
- sky: "fill-sky-500",
- "dark-coral": "fill-dark-coral-500"
-};
-
-/**
- * Hexagon sign
- * @param {string} children Characters to exclude from svg figure
- * @param {string|undefined} className Classes used to customize svg element
- * @param {number} fontSize Font size for excluding characters
- * @return {JSX.Element}
- */
-export default function Hexagon({
- className,
- children,
- fontSize = 24,
- variant = "blue",
-}: Props): JSX.Element {
- const classes = hexagonStyles[variant];
- return (
-
- {fontSize && (
-
-
-
- {children}
-
-
-
- )}
-
- );
-}
+import classNames from "classnames";
+import { StyleColorVariants, StyleColorVariantsMap } from "core/_variants";
+import React from "react";
+
+type Props = {
+ className?: string | undefined;
+ children: string;
+ fontSize?: number;
+ variant?: StyleColorVariants | undefined;
+};
+
+const hexagonStyles: StyleColorVariantsMap = {
+ gray: "fill-gray-500",
+ pink: "fill-pink-500",
+ blue: "fill-blue-500",
+ purple: "fill-purple-500",
+ red: "fill-red-500",
+ yellow: "fill-yellow-600",
+ emerald: "fill-emerald-500",
+ sky: "fill-sky-500",
+ "dark-coral": "fill-dark-coral-500"
+};
+
+/**
+ * Hexagon sign
+ * @param {string} children Characters to exclude from svg figure
+ * @param {string|undefined} className Classes used to customize svg element
+ * @param {number} fontSize Font size for excluding characters
+ * @return {JSX.Element}
+ */
+export default function Hexagon({
+ className,
+ children,
+ fontSize = 24,
+ variant = "blue",
+}: Props): JSX.Element {
+ const classes = hexagonStyles[variant];
+ return (
+
+ {fontSize && (
+
+
+
+ {children}
+
+
+
+ )}
+
+ );
+}
diff --git a/src/components/HexagonOutlined.tsx b/src/components/HexagonOutlined.tsx
old mode 100644
new mode 100755
index 9aa7f35..d64a7ba
--- a/src/components/HexagonOutlined.tsx
+++ b/src/components/HexagonOutlined.tsx
@@ -1,65 +1,65 @@
-import classNames from "classnames";
-import { StyleColorVariants, StyleColorVariantsMap } from "core/_variants";
-import React from "react";
-
-type Props = {
- className?: string | undefined;
- children: string;
- fontSize?: number;
- variant?: StyleColorVariants | undefined;
-};
-
-const hexagonStyles: StyleColorVariantsMap = {
- gray: "stroke-gray-500",
- pink: "stroke-pink-500",
- blue: "stroke-blue-500",
- purple: "stroke-purple-500",
- red: "stroke-red-500",
- yellow: "stroke-yellow-600",
- emerald: "stroke-emerald-500",
- sky: "stroke-sky-500",
- "dark-coral": "stroke-dark-coral-500",
-};
-
-/**
- * Hexagon sign
- * @param {string} children Characters to exclude from svg figure
- * @param {string|undefined} className Classes used to customize svg element
- * @param {number} fontSize Font size for excluding characters
- * @return {JSX.Element}
- */
-export default function HexagonOutlined({
- className,
- children,
- fontSize = 24,
- variant,
-}: Props): JSX.Element {
- const classes = variant ? hexagonStyles[variant] : "stroke-white";
- return (
-
-
- {children}
-
-
- );
-}
+import classNames from "classnames";
+import { StyleColorVariants, StyleColorVariantsMap } from "core/_variants";
+import React from "react";
+
+type Props = {
+ className?: string | undefined;
+ children: string;
+ fontSize?: number;
+ variant?: StyleColorVariants | undefined;
+};
+
+const hexagonStyles: StyleColorVariantsMap = {
+ gray: "stroke-gray-500",
+ pink: "stroke-pink-500",
+ blue: "stroke-blue-500",
+ purple: "stroke-purple-500",
+ red: "stroke-red-500",
+ yellow: "stroke-yellow-600",
+ emerald: "stroke-emerald-500",
+ sky: "stroke-sky-500",
+ "dark-coral": "stroke-dark-coral-500",
+};
+
+/**
+ * Hexagon sign
+ * @param {string} children Characters to exclude from svg figure
+ * @param {string|undefined} className Classes used to customize svg element
+ * @param {number} fontSize Font size for excluding characters
+ * @return {JSX.Element}
+ */
+export default function HexagonOutlined({
+ className,
+ children,
+ fontSize = 24,
+ variant,
+}: Props): JSX.Element {
+ const classes = variant ? hexagonStyles[variant] : "stroke-white";
+ return (
+
+
+ {children}
+
+
+ );
+}
diff --git a/src/components/Icons.stories.tsx b/src/components/Icons.stories.tsx
old mode 100644
new mode 100755
index b4bfd62..e516cfd
--- a/src/components/Icons.stories.tsx
+++ b/src/components/Icons.stories.tsx
@@ -1,37 +1,37 @@
-import React from 'react';
-
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-
-import {
- SVGBookmark
-} from "./icons";
-
-
-type Props = {
- item: React.FunctionComponent>
-}& React.SVGProps;
-
-const Icon = ({item, ...props}: Props) => {
- const Item = item;
- return ;
-
-
-const Template: ComponentStory = (args) => (
- >
+}& React.SVGProps;
+
+const Icon = ({item, ...props}: Props) => {
+ const Item = item;
+ return ;
+
+
+const Template: ComponentStory = (args) => (
+
)
+}
\ No newline at end of file
diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx
old mode 100644
new mode 100755
index 0619745..c7c7dd1
--- a/src/components/Logo.tsx
+++ b/src/components/Logo.tsx
@@ -7,30 +7,53 @@ export type Props = {
const Logo = ({ className, fillColors = "blue" }: Props) => {
return (
-
+
+
);
};
diff --git a/src/components/Logofreeland.tsx b/src/components/Logofreeland.tsx
old mode 100644
new mode 100755
index 88e6cdf..2fbcb29
--- a/src/components/Logofreeland.tsx
+++ b/src/components/Logofreeland.tsx
@@ -1,39 +1,39 @@
-import React from "react";
-import classNames from "classnames";
-export type Props = {
- className?: string;
-};
-
-const Logofreeland = ({ className }: Props) => {
- return (
-
- );
-};
-
-export default Logofreeland;
+import React from "react";
+import classNames from "classnames";
+export type Props = {
+ className?: string;
+};
+
+const Logofreeland = ({ className }: Props) => {
+ return (
+
+ );
+};
+
+export default Logofreeland;
diff --git a/src/components/FeaturedArticlesCards.tsx b/src/components/MainPage/sections/FeaturedArticlesCards.tsx
old mode 100644
new mode 100755
similarity index 94%
rename from src/components/FeaturedArticlesCards.tsx
rename to src/components/MainPage/sections/FeaturedArticlesCards.tsx
index 753fa1b..890add1
--- a/src/components/FeaturedArticlesCards.tsx
+++ b/src/components/MainPage/sections/FeaturedArticlesCards.tsx
@@ -1,230 +1,230 @@
-import { useRef } from "react";
-
-/* -------------------------------------------------------------------------- */
-/* Skeleton */
-/* -------------------------------------------------------------------------- */
-import "react-loading-skeleton/dist/skeleton.css";
-
-/* -------------------------------------------------------------------------- */
-/* Components */
-/* -------------------------------------------------------------------------- */
-import Typography from "./typography/Typography";
-import SkeletonCard from "./SkeletonCard";
-import AspectRatio from "./AspectRatio";
-import Card from "./Card";
-import Link from "./typography/Link";
-
-/* -------------------------------------------------------------------------- */
-/* Icons */
-/* -------------------------------------------------------------------------- */
-import { ReactComponent as SVGArrowRight } from "assets/svg/arrow-right.svg";
-import { ReactComponent as SVGCaretRight } from "assets/svg/caret-right.svg";
-import { ReactComponent as SVGArrowLeft } from "assets/svg/arrow-left.svg";
-
-/* -------------------------------------------------------------------------- */
-/* Swiper */
-/* -------------------------------------------------------------------------- */
-import { Swiper, SwiperSlide } from "swiper/react";
-import SwiperCore, { Navigation } from "swiper";
-import { Pagination } from "swiper";
-import "swiper/css/pagination";
-import "swiper/css/navigation";
-// import "./styles.css";
-import "swiper/css";
-/* -------------------------------------------------------------------------- */
-/* Article mock data */
-/* -------------------------------------------------------------------------- */
-
-const articles = [
- {
- CoverImg:
- "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png",
- Body: "1 ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.sit amet consectetur adipisicing elit.Consequuntur ma",
- Link: "http://pinterest.com",
- },
- {
- CoverImg:
- "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png",
- Body: "2 ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.",
- Link: "http://pinterest.com",
- },
- {
- CoverImg:
- "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png",
- Body: "2 ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.",
- Link: "http://pinterest.com",
- },
- {
- CoverImg:
- "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png",
- Body: "2 ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.",
- Link: "http://pinterest.com",
- },
- {
- CoverImg:
- "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png",
- Body: "2 ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.",
- Link: "http://pinterest.com",
- },
- {
- CoverImg:
- "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png",
- Body: "2 ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.",
- Link: "http://pinterest.com",
- },
- {
- CoverImg:
- "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png",
- Body: "2 ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.",
- Link: "http://pinterest.com",
- },
-];
-/* -------------------------------------------------------------------------- */
-/* How many Skeleton cards should be added to the design */
-/* -------------------------------------------------------------------------- */
-let twoCards: boolean = false;
-let threeCards: boolean = false;
-console.log(`Number of cards ${articles.length}`);
-if (articles.length == 2) {
- twoCards = true;
-} else if (articles.length == 3) {
- threeCards = true;
-}
-
-SwiperCore.use([Navigation]);
-
-const FeaturedArticlesCards = () => {
- const navigationPrevRef = useRef(null);
- const navigationNextRef = useRef(null);
- const paginationRef = useRef(null);
-
- return (
-
-
-
-
4 ? true : false}
- pagination={{ el: ".pagination", clickable: true }}
- navigation={{
- prevEl: ".prev",
- nextEl: ".next",
- }}
- breakpoints={{
- 768: {
- slidesPerView: 2,
- slidesPerGroup: 2,
- },
- 1024: {
- slidesPerView: 2,
- slidesPerGroup: 2,
- },
- 1280: {
- slidesPerView: 4,
- slidesPerGroup: 4,
- },
- 1580: {
- slidesPerView: 4,
- slidesPerGroup: 4,
- },
- }}
- spaceBetween={25}
- loopFillGroupWithBlank={true}
- modules={[Pagination, Navigation]}
- >
- {articles.map((Articale) => (
-
-
-
-
-
-
-
-
-
- {Articale.Body}
-
-
-
-
-
- Read More
-
-
-
-
-
- ))}
-
- {twoCards && [
-
-
-
-
-
-
-
- ,
-
-
-
-
-
-
-
-
- ,
- ]}
-
- {threeCards && [
-
-
-
-
-
-
-
- ,
- ]}
-
-
-
-
+
+
+
4 ? true : false}
+ pagination={{ el: ".pagination", clickable: true }}
+ navigation={{
+ prevEl: ".prev",
+ nextEl: ".next",
+ }}
+ breakpoints={{
+ 768: {
+ slidesPerView: 2,
+ slidesPerGroup: 2,
+ },
+ 1024: {
+ slidesPerView: 2,
+ slidesPerGroup: 2,
+ },
+ 1280: {
+ slidesPerView: 4,
+ slidesPerGroup: 4,
+ },
+ 1580: {
+ slidesPerView: 4,
+ slidesPerGroup: 4,
+ },
+ }}
+ spaceBetween={25}
+ loopFillGroupWithBlank={true}
+ modules={[Pagination, Navigation]}
+ >
+ {articles.map((Articale) => (
+
+
+
+
+
+
+
+
+
+ {Articale.Body}
+
+
+
+
+
+ Read More
+
+
+
+
+
+ ))}
+
+ {twoCards && [
+
+
+
+
+
+
+
+ ,
+
+
+
+
+
+
+
+
+ ,
+ ]}
+
+ {threeCards && [
+
+
+
+
+
+
+
+ ,
+ ]}
+
+
+
+
-
-
- Featured articles
-
-
- Select the category of science
-
-
- {categoryCards}
-
-
- );
-}
+import React, { useMemo } from "react";
+import Typography from "components/typography/Typography";
+import CategoryCard from "components/Cards/CategoryCard";
+import {
+ SVGMedicine,
+ SVGAgricultural,
+ SVGHumanitarian,
+ SVGSocials,
+ SVGTechnicsAndTechology,
+ SVGFundamental,
+} from "components/icons";
+
+const categories = [
+ { id: 1, title: "Medical", count: 5617813, icon:
+
+
+ Featured articles
+
+
+ Select the category of science
+
+
+ {categoryCards}
+
+
+ );
+}
diff --git a/src/components/FeaturedAuthorsCards.tsx b/src/components/MainPage/sections/FeaturedAuthorsCards.tsx
old mode 100644
new mode 100755
similarity index 94%
rename from src/components/FeaturedAuthorsCards.tsx
rename to src/components/MainPage/sections/FeaturedAuthorsCards.tsx
index e639ecf..91acd31
--- a/src/components/FeaturedAuthorsCards.tsx
+++ b/src/components/MainPage/sections/FeaturedAuthorsCards.tsx
@@ -1,195 +1,195 @@
-/* -------------------------------------------------------------------------- */
-/* Components */
-/* -------------------------------------------------------------------------- */
-import Heading from "./typography/Heading";
-import SkeletonCard from "./SkeletonCard";
-import { Button } from "./Button/Button";
-import Avatar from "./Avatar";
-import Card from "./Card";
-
-/* -------------------------------------------------------------------------- */
-/* Swiper */
-/* -------------------------------------------------------------------------- */
-import { Swiper, SwiperSlide } from "swiper/react";
-import SwiperCore, { Navigation } from "swiper";
-import "swiper/css/pagination";
-import "swiper/css/navigation";
-// import "./styles.css";
-import "swiper/css";
-
-/* -------------------------------------------------------------------------- */
-/* Icons */
-/* -------------------------------------------------------------------------- */
-import { ReactComponent as SVGCaretRight } from "assets/svg/caret-right.svg";
-import Link from "./typography/Link";
-
-/* -------------------------------------------------------------------------- */
-/* Variables */
-/* -------------------------------------------------------------------------- */
-SwiperCore.use([Navigation]);
-
-/* -------------------------------------------------------------------------- */
-/* Authors data mock */
-/* -------------------------------------------------------------------------- */
-const authors = [
- {
- Title: "JSON Three",
- Body: "Lorem ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.am elit.Consequuntur maxime, adipisicing elit.",
- Link: "http://pinterest.com",
- },
- {
- Title: "JSON Two",
- Body: "Lorem ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.am elit.Consequuntur maxime, libero est unde sapiente repellendus quam",
- Link: "http://pinterest.com",
- img: "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png",
- },
- {
- Title: "JSON Two",
- Body: "Lorem ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.am elit.Consequuntur maxime, libero est unde sapiente repellendus quam",
- Link: "http://pinterest.com",
- img: "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png",
- },
- {
- Title: "JSON Two",
- Body: "Lorem ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.am elit.Consequuntur maxime, libero est unde sapiente repellendus quam",
- Link: "http://pinterest.com",
- img: "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png",
- },
-];
-
-/* -------------------------------------------------------------------------- */
-/* Number of Cards */
-/* -------------------------------------------------------------------------- */
-let twoCards: boolean = false;
-let threeCards: boolean = false;
-console.log(`Number of cards ${authors.length}`);
-if (authors.length == 2) {
- twoCards = true;
-} else if (authors.length == 3) {
- threeCards = true;
-}
-
-/**
- * Featured authors component to display ...
- */
-export default function FeaturedAuthorsCards(): JSX.Element {
- return (
-
- {/* The Title of Featured Authors section */}
-
Featured Authors
-
- {/* Featured Authors section */}
-
-
4 ? true : false}
- loopFillGroupWithBlank={false}
- breakpoints={{
- 768: {
- slidesPerView: 2,
- slidesPerGroup: 2,
- },
- 1024: {
- slidesPerView: 2,
- slidesPerGroup: 2,
- },
- 1280: {
- slidesPerView: 4,
- slidesPerGroup: 4,
- },
- 1580: {
- slidesPerView: 4,
- slidesPerGroup: 4,
- },
- }}
- >
- {authors.map((card) => (
-
-
-
-
-
- {card.img ? (
-
- {card.Title[0]}
-
- )}
-
- {card.Title}
-
- {card.Body}
-
-
-
-
-
-
- ))}
-
- {twoCards && [
-
-
-
-
-
-
-
- ,
-
-
-
-
-
-
-
-
- ,
- ]}
-
- {threeCards && [
-
-
-
-
-
-
-
- ,
- ]}
-
-
-
-
- Show All
-
-
+ {/* The Title of Featured Authors section */}
+
Featured Authors
+
+ {/* Featured Authors section */}
+
+
4 ? true : false}
+ loopFillGroupWithBlank={false}
+ breakpoints={{
+ 768: {
+ slidesPerView: 2,
+ slidesPerGroup: 2,
+ },
+ 1024: {
+ slidesPerView: 2,
+ slidesPerGroup: 2,
+ },
+ 1280: {
+ slidesPerView: 4,
+ slidesPerGroup: 4,
+ },
+ 1580: {
+ slidesPerView: 4,
+ slidesPerGroup: 4,
+ },
+ }}
+ >
+ {authors.map((card) => (
+
+
+
+
+
+ {card.img ? (
+
+ {card.Title[0]}
+
+ )}
+
+ {card.Title}
+
+ {card.Body}
+
+
+
+
+
+
+ ))}
+
+ {twoCards && [
+
+
+
+
+
+
+
+ ,
+
+
+
+
+
+
+
+
+ ,
+ ]}
+
+ {threeCards && [
+
+
+
+
+
+
+
+ ,
+ ]}
+
+
+
+
+ Show All
+
+
+
+
+ Scientific Library with Free Access
+
+
+
Search
+
320 455
+
Items
+
+
+
+
+ Advanced Search
+
+
+
+ );
+}
diff --git a/src/components/MainSection.tsx b/src/components/MainSection.tsx
deleted file mode 100644
index 8c76507..0000000
--- a/src/components/MainSection.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-/* -------------------------------------------------------------------------- */
-/* Imports */
-/* -------------------------------------------------------------------------- */
-import React from "react";
-import Inputgroup from "./Inputgroup";
-import Select from "./Select";
-import { useState } from "react";
-import { Button } from "./Button/Button";
-import { SVGSearch } from "../components/icons";
-import SearchBar from "components/SearchBar";
-
-type Props = {
- className?: string;
- options: T[];
- hintsValues: H[];
- displayValueResolver?: (element: T) => any;
-};
-
-/* -------------------------------------------------------------------------- */
-/* Component implementation */
-/* -------------------------------------------------------------------------- */
-
-export default function MainSection({
- className,
- options,
- hintsValues,
- displayValueResolver,
- ...props
-}: Props) {
- const [value, setValue] = useState(options[0]); // Category
-
- const [hints, setHints] = useState([]); //Response list
- const [onSelected, setOnSelected] = useState(""); // Selected item from response list
- const [query, setQuery] = useState(""); // Query
-
- const onChange = (query: string) => {
- console.log(query)
- setQuery(query);
- setHints(hintsValues);
- };
- const onClick = () => {
- console.log(displayValueResolver ? displayValueResolver(value) : value);
- console.log(onSelected);
- console.log(query);
- };
- const searchResolver = (item: any) => {
- setOnSelected(item.caption);
- console.log(onSelected);
- };
- //empty items message
- const IsEmptyItems = () => {
- return Nothing Found
;
- };
-
- return (
-
-
- Scientific Library with Free Access
-
-
-
Search
-
320 455
-
Items
-
-
-
-
- value?.name ?? ""}
- />
-
-
- value.caption}
- />
-
-
-
-
-
-
-
-
-
- Advanced Search
-
-
- );
-}
diff --git a/src/components/Markdown.tsx b/src/components/Markdown.tsx
index 5c5e4b9..8adbc9b 100644
--- a/src/components/Markdown.tsx
+++ b/src/components/Markdown.tsx
@@ -11,15 +11,13 @@ import remarkGfm from "remark-gfm";
/* -------------------------------------------------------------------------- */
import Typography from "./typography/Typography";
import Heading from "./typography/Heading";
-import Link from "./Link";
/* -------------------------------------------------------------------------- */
/* Code */
/* -------------------------------------------------------------------------- */
-import vsc from "react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus";
-import { darcula } from "react-syntax-highlighter/dist/esm/styles/prism";
-import docco from "react-syntax-highlighter/dist/esm/styles/prism";
-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { dark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import Link from "./typography/Link";
export type Props = {
markdown: string;
@@ -50,10 +48,9 @@ const Markdown = ({ markdown }: Props) => {
return !inline && match ? (
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
old mode 100644
new mode 100755
index 12da354..23a21f8
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,147 +1,147 @@
-import { Menu, Transition } from "@headlessui/react";
-import React, { Fragment } from "react";
-import classNames from "classnames";
-
-/* -------------------------------------------------------------------------- */
-/* Components */
-/* -------------------------------------------------------------------------- */
-import ContextMenuAction from "./drop-down-menu/ContextMenuAction";
-import ContextMenu from "./drop-down-menu/ContextMenu";
-import { Button } from "./Button/Button";
-
-/* -------------------------------------------------------------------------- */
-/* Icons */
-/* -------------------------------------------------------------------------- */
-import { ReactComponent as SVGFavoriteOutlined } from "assets/svg/favorite-outlined.svg";
-import { ReactComponent as SVGHamburger } from "assets/svg/hamburger.svg";
-import { ReactComponent as SVGFolder } from "assets/svg/folder.svg";
-import { ReactComponent as SVGFile } from "assets/svg/file.svg";
-import { ReactComponent as SVGEye } from "assets/svg/eye.svg";
-
-type Props = React.ComponentPropsWithoutRef<"div">;
-
-const Navbar = (props: Props) => {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
;
-} & WithRouteProps;
-
-const Page = ({ title, withOutlet, children, activePath }: Props) => {
- const uiStore = useUIStore();
- const { isDrawerCollapsed, initDrawer } = useUIViewModel(uiStore);
-
- useLayoutEffect(() => {
- initDrawer();
- }, [initDrawer]);
-
- return (
-
-
-
-
-
-
-
- {children}
-
-
-
, "type">;
-
-const Radio = ({ children, className, ...props }: Props) => {
- return (
-
-
- {children}
-
- );
-};
-export default Radio;
+import classNames from "classnames";
+import React from "react";
+import { ReactComponent as Checkmark } from "assets/svg/check.svg";
+
+export type Props = {
+ /**
+ * An Element next to the Radio
+ */
+ children?: React.ReactNode;
+} & Omit, "type">;
+
+const Radio = ({ children, className, ...props }: Props) => {
+ return (
+
+
+ {children}
+
+ );
+};
+export default Radio;
diff --git a/src/components/RoutesRenderer.tsx b/src/components/RoutesRenderer.tsx
deleted file mode 100644
index ee12e1c..0000000
--- a/src/components/RoutesRenderer.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { withAuth } from "auth/hoc/withAuth";
-import React from "react";
-import { RouteObject, useRoutes } from "react-router-dom";
-import { RoutePathDefinition } from "routes";
-import { mapDefinitionToRoute } from "routes/mapDefinitionToRoute";
-
-type Props = {
- routes: RoutePathDefinition[];
-};
-
-
-const RoutesRenderer = ({ routes }: Props) => {
-
- const mappedRoutes = React.useMemo( () => {
- return routes.map((props) => mapDefinitionToRoute(props));
- }, [routes]);
-
- const Renderer = useRoutes(mappedRoutes);
- return Renderer;
-}
-
-export default withAuth(RoutesRenderer);
diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
deleted file mode 100644
index 182d2d3..0000000
--- a/src/components/SearchBar.tsx
+++ /dev/null
@@ -1,162 +0,0 @@
-/* -------------------------------------------------------------------------- */
-/* Imports */
-/* -------------------------------------------------------------------------- */
-import React from "react";
-import classNames from "classnames";
-import "../index.css";
-import { Combobox, Transition } from "@headlessui/react";
-import { Fragment, useEffect, useState } from "react";
-
-/* -------------------------------------------------------------------------- */
-/* Component props */
-/* -------------------------------------------------------------------------- */
-type Hint = {
- id: string;
- caption: string;
-};
-
-type Props = {
- onChange: (query: string) => void;
- onSelected: (value: Hint) => void;
- IsEmptyItems: () => React.ReactNode;
- hints: Hint[];
- displayValueResolver?: (element: T) => any;
- disabled?: boolean;
- inGroup?: boolean;
- className?: string;
- maxScrollSize?: number;
- elementScrollSize?: number;
- placeHolder?: string;
-};
-/* -------------------------------------------------------------------------- */
-/* styles */
-/* -------------------------------------------------------------------------- */
-const inputStyle = `
- w-full
- cursor-default
- rounded
- overflow-hidden
- border
- border-solid
- shadow-none
- border-gray-100
- focus:outline-none
- focus:border-gray-200
- hover:border-gray-200
- py-2 pl-3
- text-sm
- text-gray-900
-`;
-
-const inputList = `
- absolute z-10 mt-1 w-full max-h-56
- bg-white shadow-lg
- rounded py-1
- overflow-hidden
- focus:outline-none
- text-base
- sm:text-sm`;
-
-const inputInGroup = [
- `border-none
- hover:none
- active:none
- focus:none
- `,
-];
-
-/* -------------------------------------------------------------------------- */
-/* Component implementation */
-/* -------------------------------------------------------------------------- */
-
-export default function SearchBar({
- onChange,
- onSelected,
- hints,
- displayValueResolver,
- disabled,
- inGroup = false,
- className,
- maxScrollSize = 140,
- elementScrollSize = 36,
- placeHolder = "Search...",
- IsEmptyItems,
- ...props
-}: Props) {
- const [selected, setSelected] = useState(hints);
- const [query, setQuery] = useState("");
-
- useEffect(() => {
- onChange(query);
- }, [query, onChange]);
-
- const handleSelected = (value: Hint) => {
- setSelected(value);
- onSelected && onSelected(value);
- };
- return (
-
-
-
-
- setQuery(event.target.value)}
- placeholder={placeHolder}
- displayValue={(value: T) =>
- displayValueResolver ? displayValueResolver(value) : value
- }
- />
-
-
- {query.length > 0 && (
-
-
setQuery("")}
- >
-
- {hints.length === 0 && query !== "" ? IsEmptyItems() : null}
- {/* */}
- {hints.map((item: any, id: number) => (
-
- classNames(
- active
- ? "text-gray-900 bg-blue-50"
- : "font-normal ",
- "cursor-default select-none relative py-2 pl-3 pr-9",
- selected
- ? "text-gray-900 bg-blue-100"
- : "font-normal "
- )
- }
- value={item}
- >
- {item.caption}
-
- ))}
- {/* */}
-
-
-
- )}
-
-
-
+ Nothing found.
+
+ );
+ } else {
+ const results = searchResults.data.map((searchItem) => (
+
+
+
+ Search Results
+
+
+ Total results: {searchResults?.meta.total}
+
+
+
+
{ getResults()}
+
+
+
+
+
+ Advanced Search
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/Select.stories.tsx b/src/components/Select.stories.tsx
old mode 100644
new mode 100755
index fe42885..78ff682
--- a/src/components/Select.stories.tsx
+++ b/src/components/Select.stories.tsx
@@ -1,57 +1,57 @@
-import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import { useState } from "react";
-
-import Select from "./Select";
-
-export default {
- // Title inside navigation bar
- title: "Select",
- // Component to test
- component: Select,
- // Clarifying the way how to process specific
- // properties of your component and which values
- // it can accept.
- argTypes: {},
-} as ComponentMeta;
-
-/**
- * This is a way to define a tempalte for your component.
- *
- * This template should cover all the states.
- *
- * In most cases you should just distruct args attribute
- * on a returning component.
- */
-
-const Template: ComponentStory = (args) => {
- const { options = [{ name: String }] } = args;
- const [selected, setSelected] = useState(options[0]);
- return (
-
-
- options={options}
- value={selected}
- onChange={setSelected}
- displayValueResolver={(options) => options.name}
- />
- ;
+
+/**
+ * This is a way to define a tempalte for your component.
+ *
+ * This template should cover all the states.
+ *
+ * In most cases you should just distruct args attribute
+ * on a returning component.
+ */
+
+const Template: ComponentStory = (args) => {
+ const { options = [{ name: String }] } = args;
+ const [selected, setSelected] = useState(options[0]);
+ return (
+
+
+ options={options}
+ value={selected}
+ onChange={setSelected}
+ displayValueResolver={(options) => options.name}
+ />
+ = {
- inGroup?: boolean;
- options?: T[];
- disabled?: boolean;
- className?: string;
- value: T;
- displayValueResolver?: (element: T) => any;
- onChange: (element: T) => void;
- maxScrollSize?: number;
- elementScrollSize?: number;
-} & Omit, "value" | "onChange">;
-
-/* -------------------------------------------------------------------------- */
-/* styles */
-/* -------------------------------------------------------------------------- */
-
-const SelectButtonStyle = `
- relative w-full
- cursor-default
- rounded
- border border-gray-50
- outline-8
- bg-white
- py-2 pl-3 pr-10 text-left
- hover:border-gray-300
- focus:outline-1
- focus-visible:border-gray-500
- sm:text-sm
- `;
-
-const SelectOptionsStyle = `
- absolute z-10 mt-1 w-full max-h-56
- bg-white shadow-lg
- rounded py-1
- overflow-hidden
- focus:outline-none
- text-base
- sm:text-sm
- `;
-
-const SelectIconStyle = `
- pointer-events-none
- absolute inset-y-0 right-0
- flex items-center pr-2
- `;
-
-const inputInGroup = [
- ` border-none
- hover:none
- active:none
- focus:none
- `,
-];
-/* -------------------------------------------------------------------------- */
-/* Component implementation */
-/* -------------------------------------------------------------------------- */
-function Select({
- inGroup = false, // We should use this flag to choose how we will style our component
- className,
- options = [],
- value,
- onChange,
- displayValueResolver,
- disabled,
- maxScrollSize = 140,
- elementScrollSize = 36,
- ...props
-}: Props): JSX.Element {
- return (
-
-
-
-
- {({ open }) => (
- <>
- {`${
- displayValueResolver ? displayValueResolver(value) : value
- }`}
-
-
-
- )}
-
-
-
- {/* */}
- {options.map((option, id) => (
-
- classNames(
- active ? "text-gray-900 bg-blue-50" : "font-normal ",
- "cursor-default select-none relative py-2 pl-3 pr-9",
- selected ? "text-gray-900 bg-blue-100" : "font-normal "
- )
- }
- value={option}
- >
- {`${
- displayValueResolver
- ? displayValueResolver(option)
- : option
- }`}
-
- ))}
- {/* */}
-
-
-
-
-
= {
+ inGroup?: boolean;
+ options?: T[];
+ disabled?: boolean;
+ className?: string;
+ value: T;
+ displayValueResolver?: (element: T) => any;
+ onChange: (element: T) => void;
+ maxScrollSize?: number;
+ elementScrollSize?: number;
+} & Omit, "value" | "onChange">;
+
+/* -------------------------------------------------------------------------- */
+/* styles */
+/* -------------------------------------------------------------------------- */
+
+const SelectButtonStyle = `
+ relative w-full
+ cursor-default
+ rounded
+ border border-gray-50
+ outline-8
+ bg-white
+ py-2 pl-3 pr-10 text-left
+ hover:border-gray-300
+ focus:outline-1
+ focus-visible:border-gray-500
+ sm:text-sm
+ `;
+
+const SelectOptionsStyle = `
+ absolute z-10 mt-1 w-full max-h-56
+ bg-white shadow-lg
+ rounded py-1
+ overflow-hidden
+ focus:outline-none
+ text-base
+ sm:text-sm
+ `;
+
+const SelectIconStyle = `
+ pointer-events-none
+ absolute inset-y-0 right-0
+ flex items-center pr-2
+ `;
+
+const inputInGroup = [
+ ` border-none
+ hover:none
+ active:none
+ focus:none
+ `,
+];
+/* -------------------------------------------------------------------------- */
+/* Component implementation */
+/* -------------------------------------------------------------------------- */
+function Select({
+ inGroup = false, // We should use this flag to choose how we will style our component
+ className,
+ options = [],
+ value,
+ onChange,
+ displayValueResolver,
+ disabled,
+ maxScrollSize = 140,
+ elementScrollSize = 36,
+ ...props
+}: Props): JSX.Element {
+ return (
+
+
+
+
+ {({ open }) => (
+ <>
+ {`${
+ displayValueResolver ? displayValueResolver(value) : value
+ }`}
+
+
+
+ )}
+
+
+
+ {/* */}
+ {options.map((option, id) => (
+
+ classNames(
+ active ? "text-gray-900 bg-blue-50" : "font-normal ",
+ "cursor-default select-none relative py-2 pl-3 pr-9",
+ selected ? "text-gray-900 bg-blue-100" : "font-normal "
+ )
+ }
+ value={option}
+ >
+ {`${
+ displayValueResolver
+ ? displayValueResolver(option)
+ : option
+ }`}
+
+ ))}
+ {/* */}
+
+
+
+
+
-
- {service.name}
- {disabled ? (
- soon
- ) : (
- {service.href}
- )}
-
-
- );
-}
diff --git a/src/components/SkeletonCard.tsx b/src/components/SkeletonCard.tsx
old mode 100644
new mode 100755
index 98bc621..7bacec2
--- a/src/components/SkeletonCard.tsx
+++ b/src/components/SkeletonCard.tsx
@@ -1,94 +1,94 @@
-import Skeleton from "react-loading-skeleton";
-import AspectRatio from "./AspectRatio";
-import classNames from "classnames";
-
-/* -------------------------------------------------------------------------- */
-/* Props */
-/* -------------------------------------------------------------------------- */
-type Props = {
- /**
- * Card component accept children
- */
- children?: React.ReactNode;
- /**
- * Styling the card component
- */
- className?: string | undefined;
-};
-
-const SkeletonCard = ({ className, children }: Props) => {
- return (
-
- {children}
-
- );
-};
-
-// Media
-SkeletonCard.Media = function SkeletonCardCardMedia() {
- return (
-
-
-
-
- );
-};
-
-// Content
-SkeletonCard.Content = function SkeletonCardCardContent({
- children,
- className,
-}: Props) {
- return (
-
- {children}
-
- );
-};
-
-// Header
-SkeletonCard.Header = function SkeletonCardCardHeader({
- children,
- className,
-}: Props) {
- return (
-
- {children}
-
- );
-};
-
-// Avatar
-SkeletonCard.Avatar = function SkeletonCardCardAvatar() {
- return
-
- );
-};
-
-export default SkeletonCard;
+import Skeleton from "react-loading-skeleton";
+import AspectRatio from "./AspectRatio";
+import classNames from "classnames";
+
+/* -------------------------------------------------------------------------- */
+/* Props */
+/* -------------------------------------------------------------------------- */
+type Props = {
+ /**
+ * Card component accept children
+ */
+ children?: React.ReactNode;
+ /**
+ * Styling the card component
+ */
+ className?: string | undefined;
+};
+
+const SkeletonCard = ({ className, children }: Props) => {
+ return (
+
+ {children}
+
+ );
+};
+
+// Media
+SkeletonCard.Media = function SkeletonCardCardMedia() {
+ return (
+
+
+
+
+ );
+};
+
+// Content
+SkeletonCard.Content = function SkeletonCardCardContent({
+ children,
+ className,
+}: Props) {
+ return (
+
+ {children}
+
+ );
+};
+
+// Header
+SkeletonCard.Header = function SkeletonCardCardHeader({
+ children,
+ className,
+}: Props) {
+ return (
+
+ {children}
+
+ );
+};
+
+// Avatar
+SkeletonCard.Avatar = function SkeletonCardCardAvatar() {
+ return
+
+ );
+};
+
+export default SkeletonCard;
diff --git a/src/components/StandalonePage.tsx b/src/components/StandalonePage.tsx
deleted file mode 100644
index c34997a..0000000
--- a/src/components/StandalonePage.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-import { WithRouteProps } from "routes";
-
-type Props = {
- children: React.ReactElement;
-};
-
-export default function StandalonePage({ children }: Props) {
- return (
-
-
- {children}
-
-
- );
-}
diff --git a/src/components/TextInput.tsx b/src/components/TextInput.tsx
old mode 100644
new mode 100755
index 45dbe29..a4c9610
--- a/src/components/TextInput.tsx
+++ b/src/components/TextInput.tsx
@@ -1,56 +1,56 @@
-import classNames from "classnames";
-import { initial, isEmpty, omit } from "lodash";
-import React from "react";
-import "../index.css";
-
-type Props = {
- inGroup?: boolean,
- placeholder?: string | undefined;
- className?: string | undefined;
-} & Omit, "">;
-
-const inputNotInGroup = [
- `border
- border-2
- border-solid
- border-gray-200
- hover:border-gray-500
- active:border-gray-500
- focus:border-gray-500`
-]
-
-const inputInGroup = [
- `border-none
- hover:none
- active:none
- focus:none
- `
-]
-
-export const TextInput = ({
- inGroup = false, // We should use this flag to choose how we will style our text input component
- placeholder,
- className,
- ...props
-}: Props) => {
-
- return (
- , "">;
+
+const inputNotInGroup = [
+ `border
+ border-2
+ border-solid
+ border-gray-200
+ hover:border-gray-500
+ active:border-gray-500
+ focus:border-gray-500`
+]
+
+const inputInGroup = [
+ `border-none
+ hover:none
+ active:none
+ focus:none
+ `
+]
+
+export const TextInput = ({
+ inGroup = false, // We should use this flag to choose how we will style our text input component
+ placeholder,
+ className,
+ ...props
+}: Props) => {
+
+ return (
+
- {/* Tooltip will be shown under the component(children) when the children is onHover */}
- {children}
- {/* Creating the tooltip and give it a postion */}
-
- {tooltipMessage}
-
-
+ {/* Tooltip will be shown under the component(children) when the children is onHover */}
+ {children}
+ {/* Creating the tooltip and give it a postion */}
+
+ {tooltipMessage}
+
+
/ ,
- }
- return ( symbol === 'dotted') ? dividers.dotted : dividers.slash
-}
-
-export default function Breadcrumbs( { divider ,children, className }: Props ) {
-
- /* -------------- Convert the children into an array and insert ------------- */
- /* ------------------the elements with the divider into it ------------------ */
-
- let childrenToArray = React.Children.toArray(children)
- let LinkAndDivider: any
- LinkAndDivider = [];
-
- for( let i = 0; i < childrenToArray.length; i++ ) {
-
- let dividerComponent = GetDivider( divider )
- LinkAndDivider = LinkAndDivider.concat( childrenToArray[i] ).concat( dividerComponent )
- }
- LinkAndDivider.pop();
-
- return(
-
- { LinkAndDivider }
-
-
- )
+import React, { Children, ReactElement } from "react";
+
+type Props = {
+ divider: "dotted" | "slash";
+ children: React.ReactNode;
+ className?: string;
+} ;
+
+/* ---------- a random number for a unique key (react requirement) ---------- */
+
+function randomInteger( min: number, max: number ) {
+ let rand = min + Math.random() * (max + 1 - min);
+ return Math.floor(rand);
+ }
+
+/* ----------------------- get the divider as designed ---------------------- */
+
+function GetDivider( symbol: string ) {
+ const dividers = {
+ 'dotted' : / ,
+ }
+ return ( symbol === 'dotted') ? dividers.dotted : dividers.slash
+}
+
+export default function Breadcrumbs( { divider ,children, className }: Props ) {
+
+ /* -------------- Convert the children into an array and insert ------------- */
+ /* ------------------the elements with the divider into it ------------------ */
+
+ let childrenToArray = React.Children.toArray(children)
+ let LinkAndDivider: any
+ LinkAndDivider = [];
+
+ for( let i = 0; i < childrenToArray.length; i++ ) {
+
+ let dividerComponent = GetDivider( divider )
+ LinkAndDivider = LinkAndDivider.concat( {childrenToArray[i]}
).concat( dividerComponent )
+ }
+ LinkAndDivider.pop();
+
+ return(
+
+ { LinkAndDivider }
+
+
+ )
}
\ No newline at end of file
diff --git a/src/components/containers/Avatar.tsx b/src/components/containers/Avatar.tsx
old mode 100644
new mode 100755
index 5c2bd46..e7a12a9
--- a/src/components/containers/Avatar.tsx
+++ b/src/components/containers/Avatar.tsx
@@ -1,35 +1,35 @@
-/* -------------------------------------------------------------------------- */
-/* Libraries */
-/* -------------------------------------------------------------------------- */
-import React from "react";
-/* -------------------------------------------------------------------------- */
-/* SVG */
-/* -------------------------------------------------------------------------- */
-import { ReactComponent as SVGUserIcon } from "assets/svg/user.svg";
-import classNames from "classnames";
-/* -------------------------------------------------------------------------- */
-/* Avatar container */
-/* -------------------------------------------------------------------------- */
-
-type Props = {
- children?: React.ReactNode;
- width?: string;
- className?:string |undefined;
-};
-
-export default function Avatar({ children, width, className }: Props) {
- return (
-
-
- {children ? (
- children
- ) : (
-
-
+
+ {children ? (
+ children
+ ) : (
+
+
= {
- blue: "bg-blue-500",
- emerald: "bg-emerald-500",
- gray: "bg-gray-800",
- pink: "bg-pink-500",
- purple: "bg-purple-500",
- red: "bg-red-500",
- sky: "bg-sky-500",
- yellow: "bg-yellow-500",
- "dark-coral": "bg-dark-coral-500",
-};
-
-/**
- * Card component
- * @param {string|undefined} className Card customization classes
- * @param {React.ReactNode} children Children to paste inside Card component
- * @return {JSX.Element}
- */
-export default function Card({ children, className, variant }: Props) {
- return (
-
- {children}
-
- );
-}
+import classNames from "classnames";
+import { StyleColorVariants, StyleColorVariantsMap } from "core/_variants";
+import React from "react";
+
+type Props = {
+ children: React.ReactNode;
+ className?: string;
+ variant?: StyleColorVariants;
+};
+
+const backgrounds: StyleColorVariantsMap = {
+ blue: "bg-blue-500",
+ emerald: "bg-emerald-500",
+ gray: "bg-gray-800",
+ pink: "bg-pink-500",
+ purple: "bg-purple-500",
+ red: "bg-red-500",
+ sky: "bg-sky-500",
+ yellow: "bg-yellow-500",
+ "dark-coral": "bg-dark-coral-500",
+};
+
+/**
+ * Card component
+ * @param {string|undefined} className Card customization classes
+ * @param {React.ReactNode} children Children to paste inside Card component
+ * @return {JSX.Element}
+ */
+export default function Card({ children, className, variant }: Props) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/src/components/containers/CircleMarker.tsx b/src/components/containers/CircleMarker.tsx
old mode 100644
new mode 100755
index 0f8e56b..d3ca38b
--- a/src/components/containers/CircleMarker.tsx
+++ b/src/components/containers/CircleMarker.tsx
@@ -1,39 +1,39 @@
-import classNames from 'classnames';
-import {StyleColorVariants, StyleColorVariantsMap} from 'core/_variants';
-import React from 'react';
-
-type Props = {
- variant: StyleColorVariants;
- children: React.ReactNode;
-};
-
-const markerVariant: StyleColorVariantsMap = {
- gray: 'bg-gray-500 shadow-gray-500',
- blue: 'bg-blue-500 shadow-blue-500',
- pink: 'bg-pink-500 shadow-pink-500',
- red: 'bg-red-500 shadow-red-500',
- purple: 'bg-purple-500 shadow-purple-500',
- yellow: 'bg-yellow-500 shadow-yellow-500',
- emerald: 'bg-emerald-500 shadow-emerald-500',
- sky: 'bg-sky-500 shadow-sky-500',
- "dark-coral": "bg-dark-coral-500 shadow-dark-coral-500",
-};
-
-/**
- * Cirlce shape to wrap [children]
- * @param {React.ReactNode} children Children to paste inside circle shape
- * @param {StyleColorVariants} variant Varant of marker
- * @return {JSX.Element}
- */
-export default function CircleMarker({variant, children}: Props) {
- return (
-
- {children}
-
- );
-}
+import classNames from 'classnames';
+import {StyleColorVariants, StyleColorVariantsMap} from 'core/_variants';
+import React from 'react';
+
+type Props = {
+ variant: StyleColorVariants;
+ children: React.ReactNode;
+};
+
+const markerVariant: StyleColorVariantsMap = {
+ gray: 'bg-gray-500 shadow-gray-500',
+ blue: 'bg-blue-500 shadow-blue-500',
+ pink: 'bg-pink-500 shadow-pink-500',
+ red: 'bg-red-500 shadow-red-500',
+ purple: 'bg-purple-500 shadow-purple-500',
+ yellow: 'bg-yellow-500 shadow-yellow-500',
+ emerald: 'bg-emerald-500 shadow-emerald-500',
+ sky: 'bg-sky-500 shadow-sky-500',
+ "dark-coral": "bg-dark-coral-500 shadow-dark-coral-500",
+};
+
+/**
+ * Cirlce shape to wrap [children]
+ * @param {React.ReactNode} children Children to paste inside circle shape
+ * @param {StyleColorVariants} variant Varant of marker
+ * @return {JSX.Element}
+ */
+export default function CircleMarker({variant, children}: Props) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/src/components/containers/MarkedItem.tsx b/src/components/containers/MarkedItem.tsx
old mode 100644
new mode 100755
index fa9e7e0..e31ca51
--- a/src/components/containers/MarkedItem.tsx
+++ b/src/components/containers/MarkedItem.tsx
@@ -1,32 +1,32 @@
-import classNames from 'classnames';
-import React from 'react';
-
-type Props = {
- marker: React.ReactNode;
- children: React.ReactNode;
- className?: string | undefined;
-};
-
-/**
- * Marked children
- * @param {React.ReactNode} marker Marker component
- * @return {React.ReactNode}
- */
-export default function MarkedItem({
- marker,
- children,
- className,
-}: Props): JSX.Element {
- return (
-
-
{marker}
-
{children}
-
+
{marker}
+
{children}
+
-
-
- {clipText}
-
-
-
- {children}
-
-
+
+
+ {clipText}
+
+
+
+ {children}
+
+
{children}
- )
+import classNames from 'classnames';
+import React from 'react'
+
+type Props = {
+ className?: string | undefined;
+ children?: string | undefined;
+ secondary?: boolean;
+}
+
+export default function AreaCaption({children, className, secondary}: Props) {
+ return (
+ {children}
+ )
}
\ No newline at end of file
diff --git a/src/components/containers/area/AreaDescription.tsx b/src/components/containers/area/AreaDescription.tsx
old mode 100644
new mode 100755
index 3499752..1948d9c
--- a/src/components/containers/area/AreaDescription.tsx
+++ b/src/components/containers/area/AreaDescription.tsx
@@ -1,13 +1,13 @@
-import React from 'react'
-
-type Props = {
- children?: React.ReactNode;
-}
-
-export default function AreaDescription({children}: Props) {
- return (
-
- {children}
-
- )
+import React from 'react'
+
+type Props = {
+ children?: React.ReactNode;
+}
+
+export default function AreaDescription({children}: Props) {
+ return (
+
+ {children}
+
+ )
}
\ No newline at end of file
diff --git a/src/components/containers/area/AreaValue.tsx b/src/components/containers/area/AreaValue.tsx
old mode 100644
new mode 100755
index 801e3f6..0800718
--- a/src/components/containers/area/AreaValue.tsx
+++ b/src/components/containers/area/AreaValue.tsx
@@ -1,11 +1,11 @@
-import React from 'react'
-
-type Props = {
- children: React.ReactNode;
-}
-
-export default function AreaValue({children}: Props) {
- return (
- {children}
- );
+import React from 'react'
+
+type Props = {
+ children: React.ReactNode;
+}
+
+export default function AreaValue({children}: Props) {
+ return (
+ {children}
+ );
}
\ No newline at end of file
diff --git a/src/components/containers/area/IconedAreaCaption.tsx b/src/components/containers/area/IconedAreaCaption.tsx
old mode 100644
new mode 100755
index 09af9ef..5828bc3
--- a/src/components/containers/area/IconedAreaCaption.tsx
+++ b/src/components/containers/area/IconedAreaCaption.tsx
@@ -1,23 +1,23 @@
-import React from 'react'
-import AreaCaption from './AreaCaption';
-
-type Props = {
- caption: string;
- icon?: React.ReactNode;
-}
-
-export default function IconedAreaCaption({icon, caption}: Props) {
- if(icon) {
- return (
-
-
- {icon}
-
-
{caption}
-
{caption}
- )
+import React from 'react'
+import AreaCaption from './AreaCaption';
+
+type Props = {
+ caption: string;
+ icon?: React.ReactNode;
+}
+
+export default function IconedAreaCaption({icon, caption}: Props) {
+ if(icon) {
+ return (
+
+
+ {icon}
+
+
{caption}
+
{caption}
+ )
}
\ No newline at end of file
diff --git a/src/components/containers/contextmenu/ContextMenu.tsx b/src/components/containers/contextmenu/ContextMenu.tsx
old mode 100644
new mode 100755
index 6b54e80..1998f17
--- a/src/components/containers/contextmenu/ContextMenu.tsx
+++ b/src/components/containers/contextmenu/ContextMenu.tsx
@@ -1,57 +1,57 @@
-import React, { Fragment } from "react";
-import { Menu, Transition } from "@headlessui/react";
-import { PropsPartion } from "./ContextMenuItem";
-import classNames from "classnames";
-
-type ChildType = React.ReactElement;
-type ChildrenType = ChildType[] | ChildType;
-
-type MenuProps = {
- className?: string | undefined;
- button: React.ReactNode;
- children: ChildrenType;
-};
-
-/**
- * Context menu component
- * @param {React.ReactNode} children
- * @return {JSX.Element}
- */
-export default function ContextMenu({
- button,
- children,
- className,
-}: MenuProps) {
- return (
-
- {({ open }) => (
- <>
-
- {button}
-
-
-
- {children}
-
-
-
- )}
-
- );
-}
+import React, { Fragment } from "react";
+import { Menu, Transition } from "@headlessui/react";
+import { PropsPartion } from "./ContextMenuItem";
+import classNames from "classnames";
+
+type ChildType = React.ReactElement;
+type ChildrenType = ChildType[] | ChildType;
+
+type MenuProps = {
+ className?: string | undefined;
+ button: React.ReactNode;
+ children: ChildrenType;
+};
+
+/**
+ * Context menu component
+ * @param {React.ReactNode} children
+ * @return {JSX.Element}
+ */
+export default function ContextMenu({
+ button,
+ children,
+ className,
+}: MenuProps) {
+ return (
+
+ {({ open }) => (
+ <>
+
+ {button}
+
+
+
+ {children}
+
+
+
+ )}
+
+ );
+}
diff --git a/src/components/containers/contextmenu/ContextMenuAction.tsx b/src/components/containers/contextmenu/ContextMenuAction.tsx
old mode 100644
new mode 100755
index 68afe5d..d0f2e34
--- a/src/components/containers/contextmenu/ContextMenuAction.tsx
+++ b/src/components/containers/contextmenu/ContextMenuAction.tsx
@@ -1,33 +1,33 @@
-import classNames from "classnames";
-import React from "react";
-
-type Props = {
- action: Function;
- caption: string;
- disabled?: boolean;
- icon?: React.ReactNode;
- className?: string | undefined;
-};
-
-export default function ContextMenuAction({
- action,
- caption,
- disabled,
- icon,
- className,
-}: Props) {
- return (
- action(e)}
- disabled={disabled}
- className={classNames([
- "flex space-x-3 items-center text-left",
- { "opacity-50": disabled, "cursor-pointer": !disabled },
- className,
- ])}
- >
- {icon && {icon}
}
- {caption}
-
- );
-}
+import classNames from "classnames";
+import React from "react";
+
+type Props = {
+ action: Function;
+ caption: string;
+ disabled?: boolean;
+ icon?: React.ReactNode;
+ className?: string | undefined;
+};
+
+export default function ContextMenuAction({
+ action,
+ caption,
+ disabled,
+ icon,
+ className,
+}: Props) {
+ return (
+ action(e)}
+ disabled={disabled}
+ className={classNames([
+ "flex space-x-3 items-center text-left",
+ { "opacity-50": disabled, "cursor-pointer": !disabled },
+ className,
+ ])}
+ >
+ {icon && {icon}
}
+ {caption}
+
+ );
+}
diff --git a/src/components/containers/contextmenu/ContextMenuItem.tsx b/src/components/containers/contextmenu/ContextMenuItem.tsx
old mode 100644
new mode 100755
index eb444b6..f06e8b2
--- a/src/components/containers/contextmenu/ContextMenuItem.tsx
+++ b/src/components/containers/contextmenu/ContextMenuItem.tsx
@@ -1,27 +1,27 @@
-import {Menu} from '@headlessui/react';
-import React from 'react';
-
-export type PropsPartion = {
- disabled?: boolean | undefined;
- active?: boolean | undefined;
-};
-
-type Props = {
- children: React.ReactElement<
- any & PropsPartion
- >;
-} & PropsPartion;
-
-/**
- * Context menu item component
- * @return {JSX.Element}
- */
-export default function ContextMenuItem({children, ...props}: Props) {
- return (
-
- {(params) => {
- return React.cloneElement(children, params);
- }}
-
- );
-}
+import {Menu} from '@headlessui/react';
+import React from 'react';
+
+export type PropsPartion = {
+ disabled?: boolean | undefined;
+ active?: boolean | undefined;
+};
+
+type Props = {
+ children: React.ReactElement<
+ any & PropsPartion
+ >;
+} & PropsPartion;
+
+/**
+ * Context menu item component
+ * @return {JSX.Element}
+ */
+export default function ContextMenuItem({children, ...props}: Props) {
+ return (
+
+ {(params) => {
+ return React.cloneElement(children, params);
+ }}
+
+ );
+}
diff --git a/src/components/containers/modal/BottomBarAcceptCookies.tsx b/src/components/containers/modal/BottomBarAcceptCookies.tsx
old mode 100644
new mode 100755
index 886ab5a..afef6a6
--- a/src/components/containers/modal/BottomBarAcceptCookies.tsx
+++ b/src/components/containers/modal/BottomBarAcceptCookies.tsx
@@ -1,17 +1,17 @@
-import { AcceptCookies } from "components/AcceptCookies";
-import { BottomSheetModal } from "components/containers/modal/BottomSheetModal";
-import { useState } from "react";
-
-export function BottomBarAcceptCookies() {
- let [isShowing, setIsShowing] = useState(true);
-
- function closeModal() {
- setIsShowing(false);
- }
-
- return (
-
-
- );
-}
+import { AcceptCookies } from "components/AcceptCookies";
+import { BottomSheetModal } from "components/containers/modal/BottomSheetModal";
+import { useState } from "react";
+
+export function BottomBarAcceptCookies() {
+ let [isShowing, setIsShowing] = useState(true);
+
+ function closeModal() {
+ setIsShowing(false);
+ }
+
+ return (
+
+
+ );
+}
diff --git a/src/components/containers/modal/BottomSheetModal.tsx b/src/components/containers/modal/BottomSheetModal.tsx
old mode 100644
new mode 100755
index 5248d17..51e7195
--- a/src/components/containers/modal/BottomSheetModal.tsx
+++ b/src/components/containers/modal/BottomSheetModal.tsx
@@ -1,39 +1,39 @@
-import React, { Fragment, useState } from "react";
-import { Dialog, Transition } from "@headlessui/react";
-import { AcceptCookies } from "components/AcceptCookies";
-
-type ButtonSheetBarProps = {
- isShowing: boolean;
- onClose: () => void;
- children?: React.ReactNode;
-} & Omit, "">;
-
-export function BottomSheetModal({
- isShowing,
- onClose,
- children,
-}: ButtonSheetBarProps) {
- return (
-
- {}}
- >
- {children}
-
-
- );
-}
+import React, { Fragment, useState } from "react";
+import { Dialog, Transition } from "@headlessui/react";
+import { AcceptCookies } from "components/AcceptCookies";
+
+type ButtonSheetBarProps = {
+ isShowing: boolean;
+ onClose: () => void;
+ children?: React.ReactNode;
+} & Omit, "">;
+
+export function BottomSheetModal({
+ isShowing,
+ onClose,
+ children,
+}: ButtonSheetBarProps) {
+ return (
+
+ {}}
+ >
+ {children}
+
+
+ );
+}
diff --git a/src/components/containers/modal/Modal.tsx b/src/components/containers/modal/Modal.tsx
old mode 100644
new mode 100755
index a066b0d..55fb7d1
--- a/src/components/containers/modal/Modal.tsx
+++ b/src/components/containers/modal/Modal.tsx
@@ -1,60 +1,60 @@
-import { Dialog, Transition } from "@headlessui/react";
-import React, { Fragment } from "react";
-
-import _ModalTitle from "./_ModalTitle";
-import _ModalFooter from "./_ModalFooter";
-import classNames from "classnames";
-
-type Props = {
- children: React.ReactNode;
- isOpen: boolean;
- onClose: () => void;
- className?: string;
-};
-
-function Modal ({
- className,
- isOpen,
- onClose,
- children,
-}: Props) {
- return (
-
-
-
-
-
-
-
-
-
-
-
- {children}
-
-
-
-
- );
-}
-
-Modal.Header = _ModalTitle;
-Modal.Footer = _ModalFooter;
-
-export default Modal;
+import { Dialog, Transition } from "@headlessui/react";
+import React, { Fragment } from "react";
+
+import _ModalTitle from "./_ModalTitle";
+import _ModalFooter from "./_ModalFooter";
+import classNames from "classnames";
+
+type Props = {
+ children: React.ReactNode;
+ isOpen: boolean;
+ onClose: () => void;
+ className?: string;
+};
+
+function Modal ({
+ className,
+ isOpen,
+ onClose,
+ children,
+}: Props) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ {children}
+
+
+
+
+ );
+}
+
+Modal.Header = _ModalTitle;
+Modal.Footer = _ModalFooter;
+
+export default Modal;
diff --git a/src/components/containers/modal/_ModalFooter.tsx b/src/components/containers/modal/_ModalFooter.tsx
old mode 100644
new mode 100755
index 7da09df..c93dac0
--- a/src/components/containers/modal/_ModalFooter.tsx
+++ b/src/components/containers/modal/_ModalFooter.tsx
@@ -1,15 +1,15 @@
-import classNames from 'classnames';
-import React from 'react'
-
-type Props = {
- children: React.ReactNode;
- className?: string | undefined;
-}
-
-export default function _ModalFooter({children, className}: Props) {
- return (
-
- {children}
-
- );
+import classNames from 'classnames';
+import React from 'react'
+
+type Props = {
+ children: React.ReactNode;
+ className?: string | undefined;
+}
+
+export default function _ModalFooter({children, className}: Props) {
+ return (
+
+ {children}
+
+ );
}
\ No newline at end of file
diff --git a/src/components/containers/modal/_ModalTitle.tsx b/src/components/containers/modal/_ModalTitle.tsx
old mode 100644
new mode 100755
index 694d5e1..782bb45
--- a/src/components/containers/modal/_ModalTitle.tsx
+++ b/src/components/containers/modal/_ModalTitle.tsx
@@ -1,21 +1,21 @@
-import { Dialog } from "@headlessui/react";
-import React from "react";
-
-type Props = {
- children: React.ReactNode;
-};
-
-const _ModalTitle: React.FC = ({ children }: Props) => {
- if (typeof children === "string") {
- return (
-
- {children}
-
- );
- }
- return = ({ children }: Props) => {
+ if (typeof children === "string") {
+ return (
+
+ {children}
+
+ );
+ }
+ return = {
- gray: 'bg-gray-500',
- blue: 'bg-blue-500',
- emerald: 'bg-emerald-600',
- pink: 'bg-pink-500',
- purple: 'bg-purple-500',
- red: 'bg-red-500',
- sky: 'bg-sky-500',
- yellow: 'bg-yellow-500',
- "dark-coral": "bg-dark-coral-500",
-};
-
-const buttonBgDisabledVariants: StyleColorVariantsMap = {
- gray: 'bg-gray-200',
- blue: 'bg-blue-100/10',
- emerald: 'bg-emerald-200/50',
- pink: 'bg-pink-200/50',
- purple: 'bg-purple-200/50',
- red: 'bg-red-200/50',
- sky: 'bg-sky-200/50',
- yellow: 'bg-yellow-200/50',
- "dark-coral": "bg-dark-coral-200/50",
-};
-
-const buttonBgDisabledHoverVariants: StyleColorVariantsMap = {
- gray: 'hover:bg-gray-500/50',
- blue: 'hover:bg-blue-100/10',
- emerald: 'hover:bg-emerald-500/50',
- pink: 'hover:bg-pink-500/50',
- purple: 'hover:bg-purple-500/50',
- red: 'hover:bg-red-500/50',
- sky: 'hover:bg-sky-500/50',
- yellow: 'hover:bg-yellow-500/50',
- "dark-coral": "hover:bg-dark-coral-500/50",
-};
-
-const buttonHoverBgVariants: StyleColorVariantsMap = {
- gray: 'hover:bg-gray-600',
- blue: 'hover:bg-blue-400',
- emerald: 'hover:bg-emerald-600',
- pink: 'hover:bg-pink-600',
- purple: 'hover:bg-purple-600',
- red: 'hover:bg-red-600',
- sky: 'hover:bg-sky-600',
- yellow: 'hover:bg-yellow-600',
- "dark-coral": "hover:bg-dark-coral-600",
-};
-
-const buttonBorderVariants: StyleColorVariantsMap = {
- gray: 'border-gray-500',
- blue: 'border-blue-500',
- emerald: 'border-emerald-700',
- pink: 'border-pink-300',
- purple: 'border-purple-300',
- red: 'border-red-300',
- sky: 'border-sky-300',
- yellow: 'border-yellow-300',
- "dark-coral": "border-dark-coral-500",
-};
-
-const buttonBorderHoverVariants: StyleColorVariantsMap = {
- gray: 'hover:border-gray-500',
- blue: 'hover:border-blue-400',
- emerald: 'hover:border-emerald-900',
- pink: 'hover:border-pink-400',
- purple: 'hover:border-purple-400',
- red: 'hover:border-red-500',
- sky: 'hover:border-sky-400',
- yellow: 'hover:border-yellow-400',
- "dark-coral": "hover:border-dark-coral-400",
-};
-
-const buttonTextVariants: StyleColorVariantsMap = {
- gray: 'text-white',
- blue: 'text-white',
- emerald: 'text-emerald-300',
- pink: 'text-white',
- purple: 'text-white',
- red: 'text-white',
- sky: 'text-white',
- yellow: 'text-white',
- "dark-coral": "text-white",
-};
-
-const buttonTextHoverVariants: StyleColorVariantsMap = {
- blue: 'hover:text-white',
- emerald: 'hover:text-emerald-900',
- gray: 'hover:text-white',
- pink: 'hover:text-white',
- purple: 'hover:text-white',
- red: 'hover:text-white',
- sky: 'hover:text-white',
- yellow: 'hover:text-white',
- "dark-coral": 'hover:text-white',
-}
-
-const buttonTextMutedVariants: StyleColorVariantsMap = {
- gray: 'text-gray-500',
- blue: 'text-gray-50',
- emerald: 'text-gray-50',
- pink: 'text-gray-50',
- purple: 'text-gray-50',
- red: 'text-gray-50',
- sky: 'text-gray-50',
- yellow: 'text-gray-50',
- "dark-coral": "text-gray-500",
-};
-
-const buttonGlowVariants: StyleColorVariantsMap = {
- gray: 'shadow-gray-300/50',
- blue: 'shadow-blue-500/50',
- emerald: 'shadow-blue-700/50',
- pink: 'shadow-blue-300/50',
- purple: 'shadow-blue-300/50',
- red: 'shadow-blue-300/50',
- sky: 'shadow-blue-300/50',
- yellow: 'shadow-blue-300/50',
- "dark-coral": "shadow-dark-coral-300/50",
-};
-
-const buttonHoverGlowVariants: StyleColorVariantsMap = {
- gray: 'hover:shadow-gray-300/50',
- blue: 'hover:shadow-blue-400/50',
- emerald: 'hover:shadow-blue-300/50',
- pink: 'hover:shadow-blue-300/50',
- purple: 'hover:shadow-blue-300/50',
- red: 'hover:shadow-blue-300/50',
- sky: 'hover:shadow-blue-300/50',
- yellow: 'hover:shadow-blue-300/50',
- "dark-coral": "hover:shadow-dark-coral-300/50",
-};
-
-const isURL = (str: string) =>
- /^(?:\w+:)?\/\/([^\s.]+\.\S{2}|localhost[:?\d]*)\S*$/.test(str);
-
-const isInternalURL = (str: string) => /^\/(\S*\/)*\S*\/?$/.test(str);
-
-/**
- * Common button component
- * @param {string|undefined} href New location link
- * @param {boolean} iconed Flag to process component with icon. Default: `false`
- * @param {StyleGlobalVariants|undefined} variant Button variant.
- * Default: `base`
- * @param {StyleType} type Button type.
- * Default: `fill`
- * @param {boolean|undefined} glowing Enables glowing shadow around
- * button element. Default `false`
- * @param {boolean|undefined} disabled Shows button element as
- * disabled item
- * @return {JSX.Element}
- */
-const Button = ({
- href,
- iconed,
- variant = 'gray',
- type = 'fill',
- glowing = false,
- disabled,
- onClick: onPress,
- children,
- className,
- rel,
- htmlType,
-}: Props) =>{
- const isExternal = isURL(href ?? '');
- const isInternal = isInternalURL(href ?? '');
-
- const As = isExternal || isInternal ? 'a' : 'button';
-
- return (
-
- {children}
-
- );
-};
-
-export default Button;
+import classNames from 'classnames';
+import {
+ StyleColorVariants,
+ StyleColorVariantsMap,
+ StyleType,
+} from 'core/_variants';
+import React from 'react';
+
+type Props = {
+ href?: string;
+ variant?: StyleColorVariants;
+ type?: StyleType;
+ iconed?: boolean | "only";
+ glowing?: boolean;
+ disabled?: boolean;
+ onClick?: (event: React.MouseEvent) => void;
+ children?: React.ReactNode;
+ className?: string | undefined;
+ rel?: string | undefined;
+ htmlType?: 'button' | 'submit' | 'reset' | undefined;
+};
+
+const buttonBgVariants: StyleColorVariantsMap = {
+ gray: 'bg-gray-500',
+ blue: 'bg-blue-500',
+ emerald: 'bg-emerald-600',
+ pink: 'bg-pink-500',
+ purple: 'bg-purple-500',
+ red: 'bg-red-500',
+ sky: 'bg-sky-500',
+ yellow: 'bg-yellow-500',
+ "dark-coral": "bg-dark-coral-500",
+};
+
+const buttonBgDisabledVariants: StyleColorVariantsMap = {
+ gray: 'bg-gray-200',
+ blue: 'bg-blue-100/10',
+ emerald: 'bg-emerald-200/50',
+ pink: 'bg-pink-200/50',
+ purple: 'bg-purple-200/50',
+ red: 'bg-red-200/50',
+ sky: 'bg-sky-200/50',
+ yellow: 'bg-yellow-200/50',
+ "dark-coral": "bg-dark-coral-200/50",
+};
+
+const buttonBgDisabledHoverVariants: StyleColorVariantsMap = {
+ gray: 'hover:bg-gray-500/50',
+ blue: 'hover:bg-blue-100/10',
+ emerald: 'hover:bg-emerald-500/50',
+ pink: 'hover:bg-pink-500/50',
+ purple: 'hover:bg-purple-500/50',
+ red: 'hover:bg-red-500/50',
+ sky: 'hover:bg-sky-500/50',
+ yellow: 'hover:bg-yellow-500/50',
+ "dark-coral": "hover:bg-dark-coral-500/50",
+};
+
+const buttonHoverBgVariants: StyleColorVariantsMap = {
+ gray: 'hover:bg-gray-600',
+ blue: 'hover:bg-blue-400',
+ emerald: 'hover:bg-emerald-600',
+ pink: 'hover:bg-pink-600',
+ purple: 'hover:bg-purple-600',
+ red: 'hover:bg-red-600',
+ sky: 'hover:bg-sky-600',
+ yellow: 'hover:bg-yellow-600',
+ "dark-coral": "hover:bg-dark-coral-600",
+};
+
+const buttonBorderVariants: StyleColorVariantsMap = {
+ gray: 'border-gray-500',
+ blue: 'border-blue-500',
+ emerald: 'border-emerald-700',
+ pink: 'border-pink-300',
+ purple: 'border-purple-300',
+ red: 'border-red-300',
+ sky: 'border-sky-300',
+ yellow: 'border-yellow-300',
+ "dark-coral": "border-dark-coral-500",
+};
+
+const buttonBorderHoverVariants: StyleColorVariantsMap = {
+ gray: 'hover:border-gray-500',
+ blue: 'hover:border-blue-400',
+ emerald: 'hover:border-emerald-900',
+ pink: 'hover:border-pink-400',
+ purple: 'hover:border-purple-400',
+ red: 'hover:border-red-500',
+ sky: 'hover:border-sky-400',
+ yellow: 'hover:border-yellow-400',
+ "dark-coral": "hover:border-dark-coral-400",
+};
+
+const buttonTextVariants: StyleColorVariantsMap = {
+ gray: 'text-white',
+ blue: 'text-white',
+ emerald: 'text-emerald-300',
+ pink: 'text-white',
+ purple: 'text-white',
+ red: 'text-white',
+ sky: 'text-white',
+ yellow: 'text-white',
+ "dark-coral": "text-white",
+};
+
+const buttonTextHoverVariants: StyleColorVariantsMap = {
+ blue: 'hover:text-white',
+ emerald: 'hover:text-emerald-900',
+ gray: 'hover:text-white',
+ pink: 'hover:text-white',
+ purple: 'hover:text-white',
+ red: 'hover:text-white',
+ sky: 'hover:text-white',
+ yellow: 'hover:text-white',
+ "dark-coral": 'hover:text-white',
+}
+
+const buttonTextMutedVariants: StyleColorVariantsMap = {
+ gray: 'text-gray-500',
+ blue: 'text-gray-50',
+ emerald: 'text-gray-50',
+ pink: 'text-gray-50',
+ purple: 'text-gray-50',
+ red: 'text-gray-50',
+ sky: 'text-gray-50',
+ yellow: 'text-gray-50',
+ "dark-coral": "text-gray-500",
+};
+
+const buttonGlowVariants: StyleColorVariantsMap = {
+ gray: 'shadow-gray-300/50',
+ blue: 'shadow-blue-500/50',
+ emerald: 'shadow-blue-700/50',
+ pink: 'shadow-blue-300/50',
+ purple: 'shadow-blue-300/50',
+ red: 'shadow-blue-300/50',
+ sky: 'shadow-blue-300/50',
+ yellow: 'shadow-blue-300/50',
+ "dark-coral": "shadow-dark-coral-300/50",
+};
+
+const buttonHoverGlowVariants: StyleColorVariantsMap = {
+ gray: 'hover:shadow-gray-300/50',
+ blue: 'hover:shadow-blue-400/50',
+ emerald: 'hover:shadow-blue-300/50',
+ pink: 'hover:shadow-blue-300/50',
+ purple: 'hover:shadow-blue-300/50',
+ red: 'hover:shadow-blue-300/50',
+ sky: 'hover:shadow-blue-300/50',
+ yellow: 'hover:shadow-blue-300/50',
+ "dark-coral": "hover:shadow-dark-coral-300/50",
+};
+
+const isURL = (str: string) =>
+ /^(?:\w+:)?\/\/([^\s.]+\.\S{2}|localhost[:?\d]*)\S*$/.test(str);
+
+const isInternalURL = (str: string) => /^\/(\S*\/)*\S*\/?$/.test(str);
+
+/**
+ * Common button component
+ * @param {string|undefined} href New location link
+ * @param {boolean} iconed Flag to process component with icon. Default: `false`
+ * @param {StyleGlobalVariants|undefined} variant Button variant.
+ * Default: `base`
+ * @param {StyleType} type Button type.
+ * Default: `fill`
+ * @param {boolean|undefined} glowing Enables glowing shadow around
+ * button element. Default `false`
+ * @param {boolean|undefined} disabled Shows button element as
+ * disabled item
+ * @return {JSX.Element}
+ */
+const Button = ({
+ href,
+ iconed,
+ variant = 'gray',
+ type = 'fill',
+ glowing = false,
+ disabled,
+ onClick: onPress,
+ children,
+ className,
+ rel,
+ htmlType,
+}: Props) =>{
+ const isExternal = isURL(href ?? '');
+ const isInternal = isInternalURL(href ?? '');
+
+ const As = isExternal || isInternal ? 'a' : 'button';
+
+ return (
+
+ {children}
+
+ );
+};
+
+export default Button;
diff --git a/src/components/controls/Combox.tsx b/src/components/controls/Combox.tsx
old mode 100644
new mode 100755
index a465a26..34a5e57
--- a/src/components/controls/Combox.tsx
+++ b/src/components/controls/Combox.tsx
@@ -1,83 +1,83 @@
-import { Combobox } from "@headlessui/react";
-import { useState } from "react";
-import classNames from "classnames";
-
-type OptionPropsArg = {
- selected: boolean;
- active: boolean;
- disabled: boolean;
-};
-type Props = {
- options: T[];
- selected: T;
- setSelected: (item: T) => void;
- filterRule: (query: string, item: T) => boolean;
- displayValue: (item: T) => string;
- keyMaper: (item: T) => string;
- valueMaper?: (item: T) => any;
- itemBuilder: (props: OptionPropsArg, item: T) => React.ReactNode;
-};
-
-export default function Combox({
- options,
- selected,
- setSelected,
- filterRule,
- displayValue,
- keyMaper,
- valueMaper,
- itemBuilder,
-}: Props) {
- const [query, setQuery] = useState("");
-
- const filtered =
- query === "" ? options : options.filter((item) => filterRule(query, item));
-
- return (
-
-
-
- setQuery(event.target.value)}
- />
-
-
-
-
- {filtered.length === 0 && query !== "" ? (
-
- Nothing found.
-
- ) : (
- filtered.map((option) => (
- classNames(
- "p-2 py-4 space-x-5",
- "rounded-md hover:bg-gray-300/5 transition-colors cursor-pointer",
- { "bg-gray-300/5": active }
- )
- }
- value={valueMaper ? valueMaper(option) : option}
- >
-
-
- ))
- )}
-
-
- );
-}
+import { Combobox } from "@headlessui/react";
+import { useState } from "react";
+import classNames from "classnames";
+
+type OptionPropsArg = {
+ selected: boolean;
+ active: boolean;
+ disabled: boolean;
+};
+type Props = {
+ options: T[];
+ selected: T;
+ setSelected: (item: T) => void;
+ filterRule: (query: string, item: T) => boolean;
+ displayValue: (item: T) => string;
+ keyMaper: (item: T) => string;
+ valueMaper?: (item: T) => any;
+ itemBuilder: (props: OptionPropsArg, item: T) => React.ReactNode;
+};
+
+export default function Combox({
+ options,
+ selected,
+ setSelected,
+ filterRule,
+ displayValue,
+ keyMaper,
+ valueMaper,
+ itemBuilder,
+}: Props) {
+ const [query, setQuery] = useState("");
+
+ const filtered =
+ query === "" ? options : options.filter((item) => filterRule(query, item));
+
+ return (
+
+
+
+ setQuery(event.target.value)}
+ />
+
+
+
+
+ {filtered.length === 0 && query !== "" ? (
+
+ Nothing found.
+
+ ) : (
+ filtered.map((option) => (
+ classNames(
+ "p-2 py-4 space-x-5",
+ "rounded-md hover:bg-gray-300/5 transition-colors cursor-pointer",
+ { "bg-gray-300/5": active }
+ )
+ }
+ value={valueMaper ? valueMaper(option) : option}
+ >
+
+
+ ))
+ )}
+
+
+ );
+}
diff --git a/src/components/controls/ControlLabel.tsx b/src/components/controls/ControlLabel.tsx
old mode 100644
new mode 100755
index 7e5ff37..7eecfc4
--- a/src/components/controls/ControlLabel.tsx
+++ b/src/components/controls/ControlLabel.tsx
@@ -1,21 +1,21 @@
-import classNames from "classnames";
-import React from "react";
-
-type Props = {
- children?: React.ReactNode;
- label: string;
- className?: string | undefined;
-};
-
-export default function ControlLabel({
- label,
- children,
- className,
-}: Props): JSX.Element {
- return (
-
- );
-}
+import classNames from "classnames";
+import React from "react";
+
+type Props = {
+ children?: React.ReactNode;
+ label: string;
+ className?: string | undefined;
+};
+
+export default function ControlLabel({
+ label,
+ children,
+ className,
+}: Props): JSX.Element {
+ return (
+
+ );
+}
diff --git a/src/components/controls/IconControl.tsx b/src/components/controls/IconControl.tsx
old mode 100644
new mode 100755
index 595e67c..781ce6e
--- a/src/components/controls/IconControl.tsx
+++ b/src/components/controls/IconControl.tsx
@@ -1,9 +1,9 @@
-import React from "react";
-
-type Props = {
- children: React.ReactNode;
-};
-
-export default function IconControl({ children }: Props) {
- return {children}
;
-}
+import React from "react";
+
+type Props = {
+ children: React.ReactNode;
+};
+
+export default function IconControl({ children }: Props) {
+ return {children}
;
+}
diff --git a/src/components/controls/InputField.tsx b/src/components/controls/InputField.tsx
old mode 100644
new mode 100755
index f73c5b6..bc2e855
--- a/src/components/controls/InputField.tsx
+++ b/src/components/controls/InputField.tsx
@@ -1,44 +1,44 @@
-import { Transition } from "@headlessui/react";
-import classNames from "classnames";
-import React from "react";
-
-type Props = React.DetailedHTMLProps<
- React.InputHTMLAttributes,
- HTMLInputElement
-> & {
- error?: string;
- touched?: boolean;
- label?: string;
-};
-
-export default function InputField({ label, touched, error, ...props }: Props) {
- return (
-
- {label &&
{label} }
-
-
-
- {error}
-
-
-
,
+ HTMLInputElement
+> & {
+ error?: string;
+ touched?: boolean;
+ label?: string;
+};
+
+export default function InputField({ label, touched, error, ...props }: Props) {
+ return (
+
+ {label &&
{label} }
+
+
+
+ {error}
+
+
+
- {alterText}
-
- );
-}
+/* -------------------------------------------------------------------------- */
+/* Libraries */
+/* -------------------------------------------------------------------------- */
+import React from "react";
+import { Switch as RawSwitch } from "@headlessui/react";
+import classNames from "classnames";
+/* -------------------------------------------------------------------------- */
+/* Properties type */
+/* -------------------------------------------------------------------------- */
+type Props = {
+ alterText?: string;
+ enabled: boolean;
+ onChange: () => void;
+};
+
+export default function Switch({ alterText, enabled, onChange }: Props) {
+ return (
+
+ {alterText}
+
+ );
+}
diff --git a/src/components/controls/TextAction.tsx b/src/components/controls/TextAction.tsx
old mode 100644
new mode 100755
index a9155fa..8770df6
--- a/src/components/controls/TextAction.tsx
+++ b/src/components/controls/TextAction.tsx
@@ -1,48 +1,48 @@
-import classNames from "classnames";
-import { StyleColorVariants, StyleColorVariantsMap } from "core/_variants";
-import React from "react";
-
-type Props = {
- children: React.ReactNode;
- variant?: StyleColorVariants;
- href?: string;
- className?: string;
- onClick?: (
- event: React.MouseEvent
- ) => void;
-};
-
-const textColorsMap: StyleColorVariantsMap = {
- blue: "text-blue-500",
- emerald: "text-emerald-500",
- gray: "text-gray-500",
- pink: "text-pink-500",
- red: "text-red-500",
- purple: "text-purple-500",
- yellow: "text-yellow-500",
- sky: "text-sky-500",
- "dark-coral": "text-dark-coral-500",
-};
-
-export default function TextAction({
- children,
- onClick,
- href,
- variant,
- className,
-}: Props) {
- const Component = href ? "a" : "button";
- return (
-
- {children}
-
- );
-}
+import classNames from "classnames";
+import { StyleColorVariants, StyleColorVariantsMap } from "core/_variants";
+import React from "react";
+
+type Props = {
+ children: React.ReactNode;
+ variant?: StyleColorVariants;
+ href?: string;
+ className?: string;
+ onClick?: (
+ event: React.MouseEvent
+ ) => void;
+};
+
+const textColorsMap: StyleColorVariantsMap = {
+ blue: "text-blue-500",
+ emerald: "text-emerald-500",
+ gray: "text-gray-500",
+ pink: "text-pink-500",
+ red: "text-red-500",
+ purple: "text-purple-500",
+ yellow: "text-yellow-500",
+ sky: "text-sky-500",
+ "dark-coral": "text-dark-coral-500",
+};
+
+export default function TextAction({
+ children,
+ onClick,
+ href,
+ variant,
+ className,
+}: Props) {
+ const Component = href ? "a" : "button";
+ return (
+
+ {children}
+
+ );
+}
diff --git a/src/components/drop-down-menu/ContextMenu.tsx b/src/components/drop-down-menu/ContextMenu.tsx
old mode 100644
new mode 100755
index e3c7866..f960634
--- a/src/components/drop-down-menu/ContextMenu.tsx
+++ b/src/components/drop-down-menu/ContextMenu.tsx
@@ -1,118 +1,118 @@
-/* -------------------------------------------------------------------------- */
-/* Imports */
-/* -------------------------------------------------------------------------- */
-import React, { Fragment } from "react";
-import { Menu, Transition } from "@headlessui/react";
-import { PropsPartion } from "./ContextMenuItem";
-import classNames from "classnames";
-import { SVGCaretDown } from "components/icons";
-type ChildType = React.ReactElement;
-type ChildrenType = ChildType[] | ChildType;
-
-/* -------------------------------------------------------------------------- */
-/* Component props */
-/* -------------------------------------------------------------------------- */
-
-type MenuProps = {
- emphasis?: "high" | "low";
- disabled?: boolean;
- className?: string | undefined;
- button: React.ReactNode;
- children: ChildrenType;
-};
-/* -------------------------------------------------------------------------- */
-/* Styles */
-/* -------------------------------------------------------------------------- */
-
-const MenuButtonStyle = `
-items-center
-inline-flex
-justify-center w-full
-cursor-default
-rounded
-border border-gray-100
-outline-8
-py-2
-pl-4
-pr-1
-text-base`;
-
-const MenuItemStyle = `
-absolute
-left-0
-mt-2 w-60
-origin-top-left
-rounded
-bg-white
-shadow-lg
-focus:outline-none
-py-2 px-4 sm:text-sm`;
-
-/* -------------------------------------------------------------------------- */
-/* Component implementation */
-/* -------------------------------------------------------------------------- */
-/**
- * Use width ContextMenuAction.tsx , for example:
- *
- * alert('click')}
- * >
- * ...
- *
- */
-export default function ContextMenu({
- button,
- children,
- className,
- emphasis = "low",
-}: MenuProps) {
- return (
-
- {({ open }) => (
- <>
-
- {button}
-
-
-
-
- {children}
-
-
-
- )}
-
- );
-}
+/* -------------------------------------------------------------------------- */
+/* Imports */
+/* -------------------------------------------------------------------------- */
+import React, { Fragment } from "react";
+import { Menu, Transition } from "@headlessui/react";
+import { PropsPartion } from "./ContextMenuItem";
+import classNames from "classnames";
+import { SVGCaretDown } from "components/icons";
+type ChildType = React.ReactElement;
+type ChildrenType = ChildType[] | ChildType;
+
+/* -------------------------------------------------------------------------- */
+/* Component props */
+/* -------------------------------------------------------------------------- */
+
+type MenuProps = {
+ emphasis?: "high" | "low";
+ disabled?: boolean;
+ className?: string | undefined;
+ button: React.ReactNode;
+ children: ChildrenType;
+};
+/* -------------------------------------------------------------------------- */
+/* Styles */
+/* -------------------------------------------------------------------------- */
+
+const MenuButtonStyle = `
+items-center
+inline-flex
+justify-center w-full
+cursor-default
+rounded
+border border-gray-100
+outline-8
+py-2
+pl-4
+pr-1
+text-base`;
+
+const MenuItemStyle = `
+absolute
+left-0
+mt-2 w-60
+origin-top-left
+rounded
+bg-white
+shadow-lg
+focus:outline-none
+py-2 px-4 sm:text-sm`;
+
+/* -------------------------------------------------------------------------- */
+/* Component implementation */
+/* -------------------------------------------------------------------------- */
+/**
+ * Use width ContextMenuAction.tsx , for example:
+ *
+ * alert('click')}
+ * >
+ * ...
+ *
+ */
+export default function ContextMenu({
+ button,
+ children,
+ className,
+ emphasis = "low",
+}: MenuProps) {
+ return (
+
+ {({ open }) => (
+ <>
+
+ {button}
+
+
+
+
+ {children}
+
+
+
+ )}
+
+ );
+}
diff --git a/src/components/drop-down-menu/ContextMenuAction.tsx b/src/components/drop-down-menu/ContextMenuAction.tsx
old mode 100644
new mode 100755
index 8d1e653..356a0f3
--- a/src/components/drop-down-menu/ContextMenuAction.tsx
+++ b/src/components/drop-down-menu/ContextMenuAction.tsx
@@ -1,32 +1,32 @@
-import classNames from "classnames";
-import React from "react";
-
-type Props = {
- action: Function;
- caption: string;
- disabled?: boolean;
- icon?: React.ReactNode;
- className?: string | undefined;
-};
-
-export default function ContextMenuAction({
- action,
- caption,
- disabled,
- icon,
- className,
-}: Props) {
- return (
- action(e)}
- className={classNames([
- "group flex px-2 rounded items-center text-base hover:bg-gray-100",
- className,
- ])}
- >
- {icon && {icon}
}
- {caption}
-
- );
-}
+import classNames from "classnames";
+import React from "react";
+
+type Props = {
+ action: Function;
+ caption: string;
+ disabled?: boolean;
+ icon?: React.ReactNode;
+ className?: string | undefined;
+};
+
+export default function ContextMenuAction({
+ action,
+ caption,
+ disabled,
+ icon,
+ className,
+}: Props) {
+ return (
+ action(e)}
+ className={classNames([
+ "group flex px-2 rounded items-center text-base hover:bg-gray-100",
+ className,
+ ])}
+ >
+ {icon && {icon}
}
+ {caption}
+
+ );
+}
diff --git a/src/components/drop-down-menu/ContextMenuItem.tsx b/src/components/drop-down-menu/ContextMenuItem.tsx
old mode 100644
new mode 100755
index eb444b6..f06e8b2
--- a/src/components/drop-down-menu/ContextMenuItem.tsx
+++ b/src/components/drop-down-menu/ContextMenuItem.tsx
@@ -1,27 +1,27 @@
-import {Menu} from '@headlessui/react';
-import React from 'react';
-
-export type PropsPartion = {
- disabled?: boolean | undefined;
- active?: boolean | undefined;
-};
-
-type Props = {
- children: React.ReactElement<
- any & PropsPartion
- >;
-} & PropsPartion;
-
-/**
- * Context menu item component
- * @return {JSX.Element}
- */
-export default function ContextMenuItem({children, ...props}: Props) {
- return (
-
- {(params) => {
- return React.cloneElement(children, params);
- }}
-
- );
-}
+import {Menu} from '@headlessui/react';
+import React from 'react';
+
+export type PropsPartion = {
+ disabled?: boolean | undefined;
+ active?: boolean | undefined;
+};
+
+type Props = {
+ children: React.ReactElement<
+ any & PropsPartion
+ >;
+} & PropsPartion;
+
+/**
+ * Context menu item component
+ * @return {JSX.Element}
+ */
+export default function ContextMenuItem({children, ...props}: Props) {
+ return (
+
+ {(params) => {
+ return React.cloneElement(children, params);
+ }}
+
+ );
+}
diff --git a/src/components/drop-down-menu/MenuIcons.tsx b/src/components/drop-down-menu/MenuIcons.tsx
old mode 100644
new mode 100755
index 5a1c794..d4b7f06
--- a/src/components/drop-down-menu/MenuIcons.tsx
+++ b/src/components/drop-down-menu/MenuIcons.tsx
@@ -1,101 +1,101 @@
-import React from "react";
-
-
-/* -------------------------------------------------------------------------- */
-/* Icons for header menu as our disign */
-/* -------------------------------------------------------------------------- */
-
-
-export const Publications = (
-
-
-);
-
-export const MyFavorite = (
-
-
-);
-export const MyCollection = (
-
-
-);
-
-export const RecentViewed = (
-
-
-);
+import React from "react";
+
+
+/* -------------------------------------------------------------------------- */
+/* Icons for header menu as our disign */
+/* -------------------------------------------------------------------------- */
+
+
+export const Publications = (
+
+
+);
+
+export const MyFavorite = (
+
+
+);
+export const MyCollection = (
+
+
+);
+
+export const RecentViewed = (
+
+
+);
diff --git a/src/components/icons.tsx b/src/components/icons.tsx
old mode 100644
new mode 100755
index 7dd54ab..1975632
--- a/src/components/icons.tsx
+++ b/src/components/icons.tsx
@@ -1,76 +1,76 @@
-export { ReactComponent as SVGAgricultural } from "assets/svg/agricultural.svg";
-export { ReactComponent as SVGArrowBigRight } from "assets/svg/arrow-big-right.svg";
-export { ReactComponent as SVGArrowDown } from "assets/svg/arrow-down.svg";
-export { ReactComponent as SVGArrowLeft } from "assets/svg/arrow-left.svg";
-export { ReactComponent as SVGArrowRight } from "assets/svg/arrow-right.svg";
-export { ReactComponent as SVGArrowUp } from "assets/svg/arrow-up.svg";
-export { ReactComponent as SVGBell } from "assets/svg/bell.svg";
-export { ReactComponent as SVGBellNotification } from "assets/svg/bell-notification.svg";
-export { ReactComponent as SVGBookmarkFilled } from "assets/svg/bookmark-filled.svg";
-export { ReactComponent as SVGBookmarkOutlined } from "assets/svg/bookmark-outlined.svg";
-export { ReactComponent as SVGCaretDown } from "assets/svg/caret-down.svg";
-export { ReactComponent as SVGCaretLeft } from "assets/svg/caret-left.svg";
-export { ReactComponent as SVGCaretRight } from "assets/svg/caret-right.svg";
-export { ReactComponent as SVGCaretUp } from "assets/svg/caret-up.svg";
-export { ReactComponent as SVGChart } from "assets/svg/chart.svg";
-export { ReactComponent as SVGChevronesLeft } from "assets/svg/chevrones-left.svg";
-export { ReactComponent as SVGChevronesRight } from "assets/svg/chevrones-right.svg";
-export { ReactComponent as SVGCircle } from "assets/svg/circle.svg";
-export { ReactComponent as SVGCite } from "assets/svg/cite.svg";
-export { ReactComponent as SVGCopy } from "assets/svg/copy.svg";
-export { ReactComponent as SVGDelete } from "assets/svg/delete.svg";
-export { ReactComponent as SVGDownload } from "assets/svg/download.svg";
-export { ReactComponent as SVGDuplicate } from "assets/svg/duplicate.svg";
-export { ReactComponent as SVGEdit1 } from "assets/svg/edit1.svg";
-export { ReactComponent as SVGEdit2 } from "assets/svg/edit2.svg";
-export { ReactComponent as SVGError } from "assets/svg/error.svg";
-export { ReactComponent as SVGEye } from "assets/svg/eye.svg";
-export { ReactComponent as SVGFacebook } from "assets/svg/facebook.svg";
-export { ReactComponent as SVGFavoriteFilled } from "assets/svg/favorite-filled.svg";
-export { ReactComponent as SVGFavoriteOutlined } from "assets/svg/favorite-outlined.svg";
-export { ReactComponent as SVGFile } from "assets/svg/file.svg";
-export { ReactComponent as SVGFiletext } from "assets/svg/filetext.svg";
-export { ReactComponent as SVGFilter } from "assets/svg/filter.svg";
-export { ReactComponent as SVGFlag } from "assets/svg/flag.svg";
-export { ReactComponent as SVGFolder } from "assets/svg/folder.svg";
-export { ReactComponent as SVGFormula } from "assets/svg/formula.svg";
-export { ReactComponent as SVGFundamental } from "assets/svg/fundamental.svg";
-export { ReactComponent as SVGGrid } from "assets/svg/grid.svg";
-export { ReactComponent as SVGHamburger } from "assets/svg/hamburger.svg";
-export { ReactComponent as SVGHelp } from "assets/svg/help.svg";
-export { ReactComponent as SVGHorizontal } from "assets/svg/horizontal.svg";
-export { ReactComponent as SVGHumanitarian } from "assets/svg/humanitarian.svg";
-export { ReactComponent as SVGImage } from "assets/svg/image.svg";
-export { ReactComponent as SVGInfo } from "assets/svg/info.svg";
-export { ReactComponent as SVGInstagram } from "assets/svg/instagram.svg";
-export { ReactComponent as SVGKey } from "assets/svg/key.svg";
-export { ReactComponent as SVGLeftMenu } from "assets/svg/left-menu.svg";
-export { ReactComponent as SVGLink } from "assets/svg/link.svg";
-export { ReactComponent as SVGList } from "assets/svg/list.svg";
-export { ReactComponent as SVGLogo } from "assets/svg/logo.svg";
-export { ReactComponent as SVGMedicine } from "assets/svg/medicine.svg";
-export { ReactComponent as SVGMinus } from "assets/svg/minus.svg";
-export { ReactComponent as SVGMore } from "assets/svg/more.svg";
-export { ReactComponent as SVGPages } from "assets/svg/pages.svg";
-export { ReactComponent as SVGPalete } from "assets/svg/palete.svg";
-export { ReactComponent as SVGPlot } from "assets/svg/plot.svg";
-export { ReactComponent as SVGPlus } from "assets/svg/plus.svg";
-export { ReactComponent as SVGPrinter } from "assets/svg/printer.svg";
-export { ReactComponent as SVGRightMenu } from "assets/svg/right-menu.svg";
-export { ReactComponent as SVGRotate } from "assets/svg/rotate.svg";
-export { ReactComponent as SVGSearch } from "assets/svg/search.svg";
-export { ReactComponent as SVGSelection } from "assets/svg/selection.svg";
-export { ReactComponent as SVGSend } from "assets/svg/send.svg";
-export { ReactComponent as SVGSettings } from "assets/svg/settings.svg";
-export { ReactComponent as SVGShape } from "assets/svg/shape.svg";
-export { ReactComponent as SVGShare } from "assets/svg/share.svg";
-export { ReactComponent as SVGSmile } from "assets/svg/smile.svg";
-export { ReactComponent as SVGSocials } from "assets/svg/socials.svg";
-export { ReactComponent as SVGTable } from "assets/svg/table.svg";
-export { ReactComponent as SVGTechnicsAndTechology } from "assets/svg/technics-and-techology.svg";
-export { ReactComponent as SVGText } from "assets/svg/text.svg";
-export { ReactComponent as SVGTextTransition } from "assets/svg/text-transition.svg";
-export { ReactComponent as SVGUser } from "assets/svg/user.svg";
-export { ReactComponent as SVGVertical } from "assets/svg/vertical.svg";
-export { ReactComponent as SVGVideo } from "assets/svg/video.svg";
-export { ReactComponent as SVGXmark } from "assets/svg/xmark.svg";
+export { ReactComponent as SVGAgricultural } from "assets/svg/agricultural.svg";
+export { ReactComponent as SVGArrowBigRight } from "assets/svg/arrow-big-right.svg";
+export { ReactComponent as SVGArrowDown } from "assets/svg/arrow-down.svg";
+export { ReactComponent as SVGArrowLeft } from "assets/svg/arrow-left.svg";
+export { ReactComponent as SVGArrowRight } from "assets/svg/arrow-right.svg";
+export { ReactComponent as SVGArrowUp } from "assets/svg/arrow-up.svg";
+export { ReactComponent as SVGBell } from "assets/svg/bell.svg";
+export { ReactComponent as SVGBellNotification } from "assets/svg/bell-notification.svg";
+export { ReactComponent as SVGBookmarkFilled } from "assets/svg/bookmark-filled.svg";
+export { ReactComponent as SVGBookmarkOutlined } from "assets/svg/bookmark-outlined.svg";
+export { ReactComponent as SVGCaretDown } from "assets/svg/caret-down.svg";
+export { ReactComponent as SVGCaretLeft } from "assets/svg/caret-left.svg";
+export { ReactComponent as SVGCaretRight } from "assets/svg/caret-right.svg";
+export { ReactComponent as SVGCaretUp } from "assets/svg/caret-up.svg";
+export { ReactComponent as SVGChart } from "assets/svg/chart.svg";
+export { ReactComponent as SVGChevronesLeft } from "assets/svg/chevrones-left.svg";
+export { ReactComponent as SVGChevronesRight } from "assets/svg/chevrones-right.svg";
+export { ReactComponent as SVGCircle } from "assets/svg/circle.svg";
+export { ReactComponent as SVGCite } from "assets/svg/cite.svg";
+export { ReactComponent as SVGCopy } from "assets/svg/copy.svg";
+export { ReactComponent as SVGDelete } from "assets/svg/delete.svg";
+export { ReactComponent as SVGDownload } from "assets/svg/download.svg";
+export { ReactComponent as SVGDuplicate } from "assets/svg/duplicate.svg";
+export { ReactComponent as SVGEdit1 } from "assets/svg/edit1.svg";
+export { ReactComponent as SVGEdit2 } from "assets/svg/edit2.svg";
+export { ReactComponent as SVGError } from "assets/svg/error.svg";
+export { ReactComponent as SVGEye } from "assets/svg/eye.svg";
+export { ReactComponent as SVGFacebook } from "assets/svg/facebook.svg";
+export { ReactComponent as SVGFavoriteFilled } from "assets/svg/favorite-filled.svg";
+export { ReactComponent as SVGFavoriteOutlined } from "assets/svg/favorite-outlined.svg";
+export { ReactComponent as SVGFile } from "assets/svg/file.svg";
+export { ReactComponent as SVGFiletext } from "assets/svg/filetext.svg";
+export { ReactComponent as SVGFilter } from "assets/svg/filter.svg";
+export { ReactComponent as SVGFlag } from "assets/svg/flag.svg";
+export { ReactComponent as SVGFolder } from "assets/svg/folder.svg";
+export { ReactComponent as SVGFormula } from "assets/svg/formula.svg";
+export { ReactComponent as SVGFundamental } from "assets/svg/fundamental.svg";
+export { ReactComponent as SVGGrid } from "assets/svg/grid.svg";
+export { ReactComponent as SVGHamburger } from "assets/svg/hamburger.svg";
+export { ReactComponent as SVGHelp } from "assets/svg/help.svg";
+export { ReactComponent as SVGHorizontal } from "assets/svg/horizontal.svg";
+export { ReactComponent as SVGHumanitarian } from "assets/svg/humanitarian.svg";
+export { ReactComponent as SVGImage } from "assets/svg/image.svg";
+export { ReactComponent as SVGInfo } from "assets/svg/info.svg";
+export { ReactComponent as SVGInstagram } from "assets/svg/instagram.svg";
+export { ReactComponent as SVGKey } from "assets/svg/key.svg";
+export { ReactComponent as SVGLeftMenu } from "assets/svg/left-menu.svg";
+export { ReactComponent as SVGLink } from "assets/svg/link.svg";
+export { ReactComponent as SVGList } from "assets/svg/list.svg";
+export { ReactComponent as SVGLogo } from "assets/svg/logo.svg";
+export { ReactComponent as SVGMedicine } from "assets/svg/medicine.svg";
+export { ReactComponent as SVGMinus } from "assets/svg/minus.svg";
+export { ReactComponent as SVGMore } from "assets/svg/more.svg";
+export { ReactComponent as SVGPages } from "assets/svg/pages.svg";
+export { ReactComponent as SVGPalete } from "assets/svg/palete.svg";
+export { ReactComponent as SVGPlot } from "assets/svg/plot.svg";
+export { ReactComponent as SVGPlus } from "assets/svg/plus.svg";
+export { ReactComponent as SVGPrinter } from "assets/svg/printer.svg";
+export { ReactComponent as SVGRightMenu } from "assets/svg/right-menu.svg";
+export { ReactComponent as SVGRotate } from "assets/svg/rotate.svg";
+export { ReactComponent as SVGSearch } from "assets/svg/search.svg";
+export { ReactComponent as SVGSelection } from "assets/svg/selection.svg";
+export { ReactComponent as SVGSend } from "assets/svg/send.svg";
+export { ReactComponent as SVGSettings } from "assets/svg/settings.svg";
+export { ReactComponent as SVGShape } from "assets/svg/shape.svg";
+export { ReactComponent as SVGShare } from "assets/svg/share.svg";
+export { ReactComponent as SVGSmile } from "assets/svg/smile.svg";
+export { ReactComponent as SVGSocials } from "assets/svg/socials.svg";
+export { ReactComponent as SVGTable } from "assets/svg/table.svg";
+export { ReactComponent as SVGTechnicsAndTechology } from "assets/svg/technics-and-techology.svg";
+export { ReactComponent as SVGText } from "assets/svg/text.svg";
+export { ReactComponent as SVGTextTransition } from "assets/svg/text-transition.svg";
+export { ReactComponent as SVGUser } from "assets/svg/user.svg";
+export { ReactComponent as SVGVertical } from "assets/svg/vertical.svg";
+export { ReactComponent as SVGVideo } from "assets/svg/video.svg";
+export { ReactComponent as SVGXmark } from "assets/svg/xmark.svg";
diff --git a/src/components/indicators/AvailabilityIndicator.tsx b/src/components/indicators/AvailabilityIndicator.tsx
old mode 100644
new mode 100755
index 4fa2cd2..04f51c9
--- a/src/components/indicators/AvailabilityIndicator.tsx
+++ b/src/components/indicators/AvailabilityIndicator.tsx
@@ -1,21 +1,21 @@
-import classNames from 'classnames';
-import React from 'react'
-
-type Props = {
- children: React.ReactNode,
- active: boolean,
-}
-
-export default function AvailabilityIndicator({ active, children }: Props) {
- const statusClass = active ? "bg-green-400" : "bg-gray-500";
- return (
-
- )
+import classNames from 'classnames';
+import React from 'react'
+
+type Props = {
+ children: React.ReactNode,
+ active: boolean,
+}
+
+export default function AvailabilityIndicator({ active, children }: Props) {
+ const statusClass = active ? "bg-green-400" : "bg-gray-500";
+ return (
+
+ )
}
\ No newline at end of file
diff --git a/src/components/layouts/FullWideColumn.tsx b/src/components/layouts/FullWideColumn.tsx
old mode 100644
new mode 100755
index e82804a..314a727
--- a/src/components/layouts/FullWideColumn.tsx
+++ b/src/components/layouts/FullWideColumn.tsx
@@ -1,13 +1,13 @@
-import React from 'react'
-
-type Props = {
- children: React.ReactNode;
-}
-
-export default function FullWideColumn({children}: Props) {
- return (
-
- {children}
-
- )
+import React from 'react'
+
+type Props = {
+ children: React.ReactNode;
+}
+
+export default function FullWideColumn({children}: Props) {
+ return (
+
+ {children}
+
+ )
}
\ No newline at end of file
diff --git a/src/components/layouts/ThinSingleColumn.tsx b/src/components/layouts/ThinSingleColumn.tsx
old mode 100644
new mode 100755
index 6f4a1fd..4ba09aa
--- a/src/components/layouts/ThinSingleColumn.tsx
+++ b/src/components/layouts/ThinSingleColumn.tsx
@@ -1,13 +1,13 @@
-import React from 'react'
-
-type Props = {
- children: React.ReactNode;
-}
-
-export default function ThinSingleColumn({children}: Props) {
- return (
-
- {children}
-
- )
+import React from 'react'
+
+type Props = {
+ children: React.ReactNode;
+}
+
+export default function ThinSingleColumn({children}: Props) {
+ return (
+
+ {children}
+
+ )
}
\ No newline at end of file
diff --git a/src/components/layouts/ThreeColumn/ColumnLayout.css b/src/components/layouts/ThreeColumn/ColumnLayout.css
old mode 100644
new mode 100755
index b096e2a..b23243a
--- a/src/components/layouts/ThreeColumn/ColumnLayout.css
+++ b/src/components/layouts/ThreeColumn/ColumnLayout.css
@@ -1,40 +1,41 @@
-.left-bar {
- grid-area: lb;
- max-width: 300px;
-}
-
-.main-bar {
- grid-area: main;
-}
-
-.right-bar {
- grid-area: rb;
- max-width: 300px;
-}
-
-.column-layout-grid {
- display: grid;
- grid-template-columns: 1fr;
- grid-template-areas: "main" "rb";
-}
-
-@media (min-width: 768px) {
- .right-bar {
- max-width: 100%;
- }
- .column-layout-grid {
- display: grid;
- grid-template-columns: minmax(300px, 1fr);
- grid-template-areas:
- "lb main"
- "lb rb";
- }
-}
-
-@media (min-width: 1280px) {
- .column-layout-grid {
- display: grid;
- grid-template-columns: auto 1fr auto;
- grid-template-areas: "lb main rb";
- }
-}
+.left-bar {
+ grid-area: lb;
+ max-width: 300px;
+ overflow: hidden;
+}
+
+.main-bar {
+ grid-area: main;
+}
+
+.right-bar {
+ grid-area: rb;
+ max-width: 300px;
+}
+
+.column-layout-grid {
+ display: grid;
+ grid-template-columns: 1fr;
+ grid-template-areas: "main" "rb";
+}
+
+@media (min-width: 768px) {
+ .right-bar {
+ max-width: 100%;
+ }
+ .column-layout-grid {
+ display: grid;
+ grid-template-columns: minmax(300px, 1fr);
+ grid-template-areas:
+ "lb main"
+ "lb rb";
+ }
+}
+
+@media (min-width: 1280px) {
+ .column-layout-grid {
+ display: grid;
+ grid-template-columns: auto 1fr auto;
+ grid-template-areas: "lb main rb";
+ }
+}
diff --git a/src/components/layouts/ThreeColumn/ColumnLayout.tsx b/src/components/layouts/ThreeColumn/ColumnLayout.tsx
old mode 100644
new mode 100755
index 2b0c11e..663abd0
--- a/src/components/layouts/ThreeColumn/ColumnLayout.tsx
+++ b/src/components/layouts/ThreeColumn/ColumnLayout.tsx
@@ -1,123 +1,113 @@
-import React, {
- Fragment,
- useState,
- useRef,
- useEffect,
- FC,
- isValidElement,
-} from "react";
-import { Dialog, Transition } from "@headlessui/react";
-import { BottomSheetModal } from "components/containers/modal/BottomSheetModal";
-import { BottomBarAcceptCookies } from "components/containers/modal/BottomBarAcceptCookies";
-import { Button } from "components/Button/Button";
-import classNames from "classnames";
-import "./ColumnLayout.css";
-import { Children } from "react";
-import MainColumn from "./Maincolumn";
-import LeftColumn from "./LeftColumn";
-import RightColumn from "./RightColumn";
-/* -------------------------------------------------------------------------- */
-/* Custom hook to track container width */
-/* -------------------------------------------------------------------------- */
-const useScreenWidth = () => {
- const ref: any = useRef();
- const [width, setWidth] = useState(null);
-
- const observer = useRef(
- new ResizeObserver((entries) => {
- const { width } = entries[0].contentRect;
- setWidth(width);
- })
- );
-
- useEffect(() => {
- observer.current.observe(ref.current);
- }, [ref, observer]);
-
- return [ref, width];
-};
-
-/* -------------------------------------------------------------------------- */
-/* Component extentions */
-/* -------------------------------------------------------------------------- */
-
-type ColumnExtentions = {
- Left: React.FC<{
- children: React.ReactNode;
- openLeftBar?: boolean;
- widthElement?: number;
- className?: string;
- }>;
- Main: React.FC<{
- children: React.ReactNode;
- className?: string;
- }>;
- Right: React.FC<{
- children: React.ReactNode;
- className?: string;
- }>;
-};
-
-/* -------------------------------------------------------------------------- */
-/* Component properties */
-/* -------------------------------------------------------------------------- */
-
-type ColumnLayoutProps = {
- children: React.ReactNode; //Column layout gets as children not more than three children
-} & Omit, "">;
-
-/* -------------------------------------------------------------------------- */
-/* Component function */
-/* -------------------------------------------------------------------------- */
-export const ColumnLayout: React.FC & ColumnExtentions = ({
- children,
-}) => {
- const mdScreen = 768;
-
- //Hooks
- const [ref, widthElement] = useScreenWidth(); // to track width of screen
- const [openLeftBar, setOpenLeftBar] = useState(false); //to open or close left bar
- function leftBar() {
- return setOpenLeftBar(!openLeftBar);
- }
-
- // Change openLeftBar when width of screen > 768
- useEffect(() => {
- if (widthElement > mdScreen) {
- setOpenLeftBar(false);
- }
- });
-
- // TODO
- const amountChildren = React.Children.count(children);
- if (amountChildren > 3) {
- alert("Layout gets only 3 or lesser children");
- }
-
- const columns = React.Children.map(children, (child) => {
- if (
- child &&
- React.isValidElement(child) &&
- React.Children.only(child).type === LeftColumn
- ) {
- return React.cloneElement(child, {
- openLeftBar: openLeftBar,
- widthElement: widthElement,
- });
- } else {
- return child;
- }
- });
-
- return (
-
-
- {amountChildren <= 3 ? columns : undefined}
-
-
(null);
+
+ const observer = useRef(
+ new ResizeObserver((entries) => {
+ const { width } = entries[0].contentRect;
+ setWidth(width);
+ })
+ );
+
+ useEffect(() => {
+ observer.current.observe(ref.current);
+ }, [ref, observer]);
+
+ return [ref, width];
+};
+
+/* -------------------------------------------------------------------------- */
+/* Component extentions */
+/* -------------------------------------------------------------------------- */
+
+type ColumnExtentions = {
+ Left: React.FC<{
+ children: React.ReactNode;
+ openLeftBar?: boolean;
+ widthElement?: number;
+ className?: string;
+ }>;
+ Main: React.FC<{
+ children: React.ReactNode;
+ className?: string;
+ }>;
+ Right: React.FC<{
+ children: React.ReactNode;
+ className?: string;
+ }>;
+};
+
+/* -------------------------------------------------------------------------- */
+/* Component properties */
+/* -------------------------------------------------------------------------- */
+
+type ColumnLayoutProps = {
+ children: React.ReactNode; //Column layout gets as children not more than three children
+} & Omit, "">;
+
+/* -------------------------------------------------------------------------- */
+/* Component function */
+/* -------------------------------------------------------------------------- */
+export const ColumnLayout: React.FC & ColumnExtentions = ({
+ children,
+}) => {
+ const mdScreen = 768;
+
+ //Hooks
+ const [ref, widthElement] = useScreenWidth(); // to track width of screen
+ const [openLeftBar, setOpenLeftBar] = useState(false); //to open or close left bar
+ function leftBar() {
+ return setOpenLeftBar(!openLeftBar);
+ }
+
+ // Change openLeftBar when width of screen > 768
+ useEffect(() => {
+ if (widthElement > mdScreen) {
+ setOpenLeftBar(false);
+ }
+ });
+
+ // TODO
+ const amountChildren = React.Children.count(children);
+ if (amountChildren > 3) {
+ alert("Layout gets only 3 or lesser children");
+ }
+
+ const columns = React.Children.map(children, (child) => {
+ if (
+ child &&
+ React.isValidElement(child) &&
+ React.Children.only(child).type === LeftColumn
+ ) {
+ return React.cloneElement(child as React.ReactElement,
+ { openLeftBar: openLeftBar, widthElement: widthElement },
+ );
+ } else {
+ return child;
+ }
+ });
+
+ return (
+
+
+ {amountChildren <= 3 ? columns : undefined}
+
+
, "">;
-
-const LeftColumn: React.FC = ({
- className,
- children,
- widthElement = 0,
- openLeftBar = false,
-}): JSX.Element => {
- const mdScreen = 768;
- return (
-
-
- {children}
-
-
- );
-};
-
-LeftColumn.displayName = "LeftColumn";
-export default LeftColumn;
+import React, { Fragment, FunctionComponent as FC } from "react";
+import { Transition } from "@headlessui/react";
+import classNames from "classnames";
+
+export type LeftColumnProps = {
+ children: React.ReactNode;
+ openLeftBar?: boolean;
+ widthElement?: number;
+ className?: string;
+} & Omit, "">;
+
+const LeftColumn: React.FC = ({
+ className,
+ children,
+ widthElement = 0,
+ openLeftBar = false,
+}): JSX.Element => {
+ const mdScreen = 768;
+ return (
+
+
+ {children}
+
+
+ );
+};
+
+LeftColumn.displayName = "LeftColumn";
+export default LeftColumn;
diff --git a/src/components/layouts/ThreeColumn/Maincolumn.tsx b/src/components/layouts/ThreeColumn/Maincolumn.tsx
old mode 100644
new mode 100755
index 1c81441..01ada11
--- a/src/components/layouts/ThreeColumn/Maincolumn.tsx
+++ b/src/components/layouts/ThreeColumn/Maincolumn.tsx
@@ -1,18 +1,18 @@
-import classNames from "classnames";
-import React from "react";
-
-type MainColumnProps = {
- children: React.ReactNode;
- className?: string;
-};
-
-function MainColumn({ children, className }: MainColumnProps) {
- return (
-
- {children}
-
- );
-}
-
-export default MainColumn;
-MainColumn.displayName = "MainColumn";
+import classNames from "classnames";
+import React from "react";
+
+type MainColumnProps = {
+ children: React.ReactNode;
+ className?: string;
+};
+
+function MainColumn({ children, className }: MainColumnProps) {
+ return (
+
+ {children}
+
+ );
+}
+
+export default MainColumn;
+MainColumn.displayName = "MainColumn";
diff --git a/src/components/layouts/ThreeColumn/RightColumn.tsx b/src/components/layouts/ThreeColumn/RightColumn.tsx
old mode 100644
new mode 100755
index 648b9a0..3026119
--- a/src/components/layouts/ThreeColumn/RightColumn.tsx
+++ b/src/components/layouts/ThreeColumn/RightColumn.tsx
@@ -1,18 +1,18 @@
-import classNames from "classnames";
-import React from "react";
-
-type RightColumnProps = {
- children: React.ReactNode;
- className?: string;
-};
-
-function RightColumn({ children, className }: RightColumnProps) {
- return (
-
- {children}
-
- );
-}
-
-export default RightColumn;
-RightColumn.displayName = "RightColumn";
+import classNames from "classnames";
+import React from "react";
+
+type RightColumnProps = {
+ children: React.ReactNode;
+ className?: string;
+};
+
+function RightColumn({ children, className }: RightColumnProps) {
+ return (
+
+ {children}
+
+ );
+}
+
+export default RightColumn;
+RightColumn.displayName = "RightColumn";
diff --git a/src/components/parts/Footer.tsx b/src/components/parts/Footer.tsx
old mode 100644
new mode 100755
index 06fe488..dda5474
--- a/src/components/parts/Footer.tsx
+++ b/src/components/parts/Footer.tsx
@@ -1,125 +1,125 @@
-import React, { useMemo } from "react";
-/* -------------------------------------------------------------------------- */
-/* Import Components */
-/* -------------------------------------------------------------------------- */
-import Typography from "components/typography/Typography";
-import { SVGFacebook, SVGInstagram, SVGCircle } from "components/icons";
-import { RouterLink } from "components/typography/RouterLink";
-import Link from "components/typography/Link";
-
-/* -------------------------------------------------------------------------- */
-/* Define consts */
-/* -------------------------------------------------------------------------- */
-
-const mainLinks = [
- { label: "account settings", url: "/account/settings", disabled: false },
- { label: "about freeland", url: "/about", disabled: false },
- { label: "help", url: "/help", disabled: false },
- { label: "contact us", url: "/contact-us", disabled: false },
-];
-
-const secondaryLinks = [
- { index: 1, label: "Terms of Use", url: "/terms-of-use", disabled: false },
- {
- index: 2,
- label: "Privacy Policy",
- url: "/privacy-policy",
- disabled: false,
- },
- {
- index: 3,
- label: "Cookies Policy",
- url: "/cookies-policy",
- disabled: false,
- },
-];
-
-/* -------------------------------------------------------------------------- */
-/* Difine parts of footer */
-/* -------------------------------------------------------------------------- */
-
-/* -------------------- Icons with social networks icons -------------------- */
-const circleDivider = (
-
-
- {link.label.toUpperCase()}
-
-
- )),
- mainLinks
- );
- /* ------------------------ Part with secondary links ----------------------- */
- const secondaryLinksPart = useMemo(
- () =>
- secondaryLinks.map((link) => (
-
- {link.index != 1 && circleDivider}
-
- )),
- secondaryLinks
- );
-
- /* -------------------------------------------------------------------------- */
- /* Implement footer component */
- /* -------------------------------------------------------------------------- */
- return (
-
-
-
-
- Freeland
-
-
-
-
- {mainLinksPart}
-
-
-
-
-
-
-
- @ Copyright 2022 Freeland - All rights reserved
-
-
{circleDivider}
-
{secondaryLinksPart}
-
- Supported by
-
- Comfortel
-
-
-
-
+
+ {link.label.toUpperCase()}
+
+
+ )),
+ mainLinks
+ );
+ /* ------------------------ Part with secondary links ----------------------- */
+ const secondaryLinksPart = useMemo(
+ () =>
+ secondaryLinks.map((link) => (
+
+ {link.index != 1 && circleDivider}
+
+ )),
+ secondaryLinks
+ );
+
+ /* -------------------------------------------------------------------------- */
+ /* Implement footer component */
+ /* -------------------------------------------------------------------------- */
+ return (
+
+
+
+
+ Freeland
+
+
+
+
+ {mainLinksPart}
+
+
+
+
+
+
+
+ @ Copyright 2022 Freeland - All rights reserved
+
+
{circleDivider}
+
{secondaryLinksPart}
+
+ Supported by
+
+ Comfortel
+
+
+
+
-
-
- );
-}
+/* -------------------------------------------------------------------------- */
+/* Libraries */
+/* -------------------------------------------------------------------------- */
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import { Transition } from "@headlessui/react";
+/* -------------------------------------------------------------------------- */
+/* Hooks */
+/* -------------------------------------------------------------------------- */
+import { useTranslation } from "react-i18next";
+/* -------------------------------------------------------------------------- */
+/* Components */
+/* -------------------------------------------------------------------------- */
+/* -------------------------------------------------------------------------- */
+/* Icons */
+/* -------------------------------------------------------------------------- */
+/* -------------------------------------------------------------------------- */
+/* Component */
+/* -------------------------------------------------------------------------- */
+
+export default function GlobalControls() {
+ /* ------------------------ // Navigation hook usage ------------------------ */
+ const navigate = useNavigate();
+ const {t} = useTranslation();
+ /* -------------------------------- Component ------------------------------- */
+ return (
+ <>
+
+
+
+ );
+}
diff --git a/src/components/parts/Header.tsx b/src/components/parts/Header.tsx
old mode 100644
new mode 100755
index 12e8a4e..2cdd0f3
--- a/src/components/parts/Header.tsx
+++ b/src/components/parts/Header.tsx
@@ -1,174 +1,174 @@
-import classNames from "classnames";
-import { useState } from "react";
-/* -------------------------------------------------------------------------- */
-/* Components */
-/* -------------------------------------------------------------------------- */
-import ContextMenuAction from "../drop-down-menu/ContextMenuAction";
-import ContextMenu from "../drop-down-menu/ContextMenu";
-import Logofreeland from "../Logofreeland";
-import { Button } from "../Button/Button";
-import Avatar from "../Avatar";
-import Navbar from "../Navbar";
-import Logo from "../Logo";
-import { RouterLink } from "components/typography/RouterLink";
-
-/* -------------------------------------------------------------------------- */
-/* Icons */
-/* -------------------------------------------------------------------------- */
-import {
- SVGBellNotification,
- SVGBell,
- SVGFavoriteOutlined,
- SVGFolder,
- SVGFile,
- SVGEye,
-} from "components/icons";
-
-const Header = () => {
- const [authenticated, setAuthenticated] = useState(false);
- const onClick = () => setAuthenticated(true);
- const [notification, setNotification] = useState(false);
-
- /* -------------------------------------------------------------------------- */
- /* Implement Header Component */
- /* -------------------------------------------------------------------------- */
- return (
-
- {/* Logo and Menu */}
-
- {/* Logo - start - className="w-7 sm:w-10 " /> */}
-
-
- {/* Logo - end - */}
-
- {/* Menu( Create new - My library - About ) Start */}
-
- {/* Link Create now - start - */}
-
- Create new
-
- {/* Link Create now - end - */}
-
- {/* Dropdown Menu My library - start - */}
-
- console.log("My publications")}
- icon={
-
- console.log("My Favorites")}
- icon={
-
- console.log("My Collections")}
- icon={
-
- console.log("Recent Viewed")}
- icon={
-
- {/* Dropdown Menu My library - End - */}
-
- {/* Dropdown Menu About - start - */}
-
- console.log("About Freeland")}
- >
-
- console.log("Contact Us")}
- >
-
- console.log("Help")}
- >
-
- {/* Dropdown Menu About - End - */}
-
- {/* Menu( Create new - My library - About ) End */}
-
- {!authenticated
- ? [
-
- Sign in
- ,
-
- Sign up
- ,
- ]
- : [
-
-
- {!notification ? (
-
- ,
-
-
-
- K
-
- ,
- ]}
- {/* Burger component will be shown for the small screens */}
-
-
- );
-};
-
-export default Header;
+import classNames from "classnames";
+import { useState } from "react";
+/* -------------------------------------------------------------------------- */
+/* Components */
+/* -------------------------------------------------------------------------- */
+import ContextMenuAction from "../drop-down-menu/ContextMenuAction";
+import ContextMenu from "../drop-down-menu/ContextMenu";
+import Logofreeland from "../Logofreeland";
+import { Button } from "../Button/Button";
+import Avatar from "../Avatar";
+import Navbar from "../Navbar";
+import Logo from "../Logo";
+import { RouterLink } from "components/typography/RouterLink";
+
+/* -------------------------------------------------------------------------- */
+/* Icons */
+/* -------------------------------------------------------------------------- */
+import {
+ SVGBellNotification,
+ SVGBell,
+ SVGFavoriteOutlined,
+ SVGFolder,
+ SVGFile,
+ SVGEye,
+} from "components/icons";
+
+const Header = () => {
+ const [authenticated, setAuthenticated] = useState(false);
+ const onClick = () => setAuthenticated(true);
+ const [notification, setNotification] = useState(false);
+
+ /* -------------------------------------------------------------------------- */
+ /* Implement Header Component */
+ /* -------------------------------------------------------------------------- */
+ return (
+
+ {/* Logo and Menu */}
+
+ {/* Logo - start - className="w-7 sm:w-10 " /> */}
+
+
+ {/* Logo - end - */}
+
+ {/* Menu( Create new - My library - About ) Start */}
+
+ {/* Link Create now - start - */}
+
+ Create new
+
+ {/* Link Create now - end - */}
+
+ {/* Dropdown Menu My library - start - */}
+
+ console.log("My publications")}
+ icon={
+
+ console.log("My Favorites")}
+ icon={
+
+ console.log("My Collections")}
+ icon={
+
+ console.log("Recent Viewed")}
+ icon={
+
+ {/* Dropdown Menu My library - End - */}
+
+ {/* Dropdown Menu About - start - */}
+
+ console.log("About Freeland")}
+ >
+
+ console.log("Contact Us")}
+ >
+
+ console.log("Help")}
+ >
+
+ {/* Dropdown Menu About - End - */}
+
+ {/* Menu( Create new - My library - About ) End */}
+
+ {!authenticated
+ ? [
+
+ Sign in
+ ,
+
+ Sign up
+ ,
+ ]
+ : [
+
+
+ {!notification ? (
+
+ ,
+
+
+
+ K
+
+ ,
+ ]}
+ {/* Burger component will be shown for the small screens */}
+
+
+ );
+};
+
+export default Header;
diff --git a/src/components/parts/Loader.tsx b/src/components/parts/Loader.tsx
old mode 100644
new mode 100755
index 1e356c1..794d38a
--- a/src/components/parts/Loader.tsx
+++ b/src/components/parts/Loader.tsx
@@ -1,12 +1,12 @@
-import React from "react";
-import CircleLoader from "components/CircleLoader";
-
-export default function AppLoader() {
- return (
-
- );
-}
+import React from "react";
+import CircleLoader from "components/CircleLoader";
+
+export default function AppLoader() {
+ return (
+
+ );
+}
diff --git a/src/components/parts/sidenav/SideNav.tsx b/src/components/parts/sidenav/SideNav.tsx
old mode 100644
new mode 100755
index b8f1db4..212c6c6
--- a/src/components/parts/sidenav/SideNav.tsx
+++ b/src/components/parts/sidenav/SideNav.tsx
@@ -1,58 +1,58 @@
-/* -------------------------------------------------------------------------- */
-/* Libraries */
-/* -------------------------------------------------------------------------- */
-import React from "react";
-import { useTranslation } from "react-i18next";
-/* -------------------------------------------------------------------------- */
-/* Icons */
-/* -------------------------------------------------------------------------- */
-import { ReactComponent as SVGUserIcon } from "assets/svg/user.svg";
-import { ReactComponent as SVGShieldIcon } from "assets/svg/shield.svg";
-import { ReactComponent as SVGServicesIcon } from "assets/svg/services.svg";
-/* -------------------------------------------------------------------------- */
-/* Types */
-/* -------------------------------------------------------------------------- */
-/* -------------------------------------------------------------------------- */
-/* Components */
-/* -------------------------------------------------------------------------- */
-import SideNavItem from "./SideNavItem";
-
-/* -------------------------------------------------------------------------- */
-/* SideNav top-level component */
-/* -------------------------------------------------------------------------- */
-type Props = {
- collapsed: boolean;
-};
-
-export default function SideNav({ collapsed }: Props) {
- const { t } = useTranslation();
-
- return (
-
-
- );
-}
+/* -------------------------------------------------------------------------- */
+/* Libraries */
+/* -------------------------------------------------------------------------- */
+import React from "react";
+import { useTranslation } from "react-i18next";
+/* -------------------------------------------------------------------------- */
+/* Icons */
+/* -------------------------------------------------------------------------- */
+import { ReactComponent as SVGUserIcon } from "assets/svg/user.svg";
+import { ReactComponent as SVGShieldIcon } from "assets/svg/shield.svg";
+import { ReactComponent as SVGServicesIcon } from "assets/svg/services.svg";
+/* -------------------------------------------------------------------------- */
+/* Types */
+/* -------------------------------------------------------------------------- */
+/* -------------------------------------------------------------------------- */
+/* Components */
+/* -------------------------------------------------------------------------- */
+import SideNavItem from "./SideNavItem";
+
+/* -------------------------------------------------------------------------- */
+/* SideNav top-level component */
+/* -------------------------------------------------------------------------- */
+type Props = {
+ collapsed: boolean;
+};
+
+export default function SideNav({ collapsed }: Props) {
+ const { t } = useTranslation();
+
+ return (
+
+
+ );
+}
diff --git a/src/components/parts/sidenav/SideNavItem.tsx b/src/components/parts/sidenav/SideNavItem.tsx
old mode 100644
new mode 100755
index 84d7dcd..fc2b629
--- a/src/components/parts/sidenav/SideNavItem.tsx
+++ b/src/components/parts/sidenav/SideNavItem.tsx
@@ -1,75 +1,75 @@
-import { Transition } from "@headlessui/react";
-import classNames from "classnames";
-import React from "react";
-import {
- NavLinkProps,
- useHref,
- useLinkClickHandler,
- useMatch,
- useResolvedPath,
-} from "react-router-dom";
-
-type Props = {
- caption: React.ReactNode;
- icon?: React.ReactNode;
- collapsed?: boolean;
-} & NavLinkProps;
-
-export default function SideNavItem({
- caption,
- to,
- icon,
- replace,
- state,
- target,
- onClick,
- reloadDocument,
- collapsed,
-}: Props) {
- let internalOnClick = useLinkClickHandler(to, {
- replace,
- state,
- target,
- });
-
- const href = useHref(to);
- const resolved = useResolvedPath(to);
- const match = useMatch({ path: resolved.pathname, end: true });
-
- function handleClick(event: React.MouseEvent) {
- if (onClick) onClick(event);
-
- if (!event.defaultPrevented && !reloadDocument) {
- internalOnClick(event);
- }
- }
-
- return (
-
- {icon && {icon}
}
-
- {caption}
-
-
- );
-}
+import { Transition } from "@headlessui/react";
+import classNames from "classnames";
+import React from "react";
+import {
+ NavLinkProps,
+ useHref,
+ useLinkClickHandler,
+ useMatch,
+ useResolvedPath,
+} from "react-router-dom";
+
+type Props = {
+ caption: React.ReactNode;
+ icon?: React.ReactNode;
+ collapsed?: boolean;
+} & NavLinkProps;
+
+export default function SideNavItem({
+ caption,
+ to,
+ icon,
+ replace,
+ state,
+ target,
+ onClick,
+ reloadDocument,
+ collapsed,
+}: Props) {
+ let internalOnClick = useLinkClickHandler(to, {
+ replace,
+ state,
+ target,
+ });
+
+ const href = useHref(to);
+ const resolved = useResolvedPath(to);
+ const match = useMatch({ path: resolved.pathname, end: true });
+
+ function handleClick(event: React.MouseEvent) {
+ if (onClick) onClick(event);
+
+ if (!event.defaultPrevented && !reloadDocument) {
+ internalOnClick(event);
+ }
+ }
+
+ return (
+
+ {icon && {icon}
}
+
+ {caption}
+
+
+ );
+}
diff --git a/src/components/Inputgroup.tsx b/src/components/search/Inputgroup.tsx
old mode 100644
new mode 100755
similarity index 94%
rename from src/components/Inputgroup.tsx
rename to src/components/search/Inputgroup.tsx
index eb62bbd..3897f06
--- a/src/components/Inputgroup.tsx
+++ b/src/components/search/Inputgroup.tsx
@@ -1,53 +1,53 @@
-/**
- * A container for components
- * Any component can be a child for this container
- */
-import React, { useEffect, useState, cloneElement } from "react";
-import classNames from "classnames";
-
-const focusable = ["input", "select", "textarea", "button"];
-
-export type Props = {
- /**
- * Container's children
- */
- children?: React.ReactNode | React.ReactNode[];
-} & React.HTMLProps;
-
-const Inputgroup = ({ children, className }: Props) => {
- const [focused, setFocused] = useState(false);
- useEffect(() => {}, [focused]);
- const arrChildren = React.Children.toArray(children);
-
- return (
-
- {arrChildren.map((e) => {
- if (
- React.isValidElement(e) &&
- typeof e.type === "string" &&
- focusable.includes(e.type)
- ) {
- return cloneElement(e as React.ReactComponentElement<"input">, {
- onFocus: (event: any) => {
- setFocused(true);
- e.props.onFocus && e.props.onFocus(event);
- },
- onBlur: (event: any) => {
- setFocused(false);
- e.props.onBlur && e.props.onBlur(event);
- },
- });
- }
- return e;
- })}
-
- );
-};
-
-export default Inputgroup;
+/**
+ * A container for components
+ * Any component can be a child for this container
+ */
+import React, { useEffect, useState, cloneElement } from "react";
+import classNames from "classnames";
+
+const focusable = ["input", "select", "textarea", "button"];
+
+export type Props = {
+ /**
+ * Container's children
+ */
+ children?: React.ReactNode | React.ReactNode[];
+} & React.HTMLProps;
+
+const Inputgroup = ({ children, className }: Props) => {
+ const [focused, setFocused] = useState(false);
+ useEffect(() => {}, [focused]);
+ const arrChildren = React.Children.toArray(children);
+
+ return (
+
+ );
+};
+
+export default Inputgroup;
diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx
new file mode 100644
index 0000000..563d8d6
--- /dev/null
+++ b/src/components/search/SearchBar.tsx
@@ -0,0 +1,47 @@
+import React, { useState, useEffect } from "react";
+import Inputgroup from "./Inputgroup";
+import SearchInput from "./SearchInput";
+import { Button } from "components/Button/Button";
+import { SVGSearch } from "components/icons";
+import Link from "components/typography/Link";
+
+
+type Props = {
+ className?: string;
+};
+
+/* ------------------------------- Categories ------------------------------- */
+
+
+export function SearchBar({ className }: Props) {
+ const [onSelected, setOnSelected] = useState(""); // Selected item from response list
+
+ const searchResolver = (item: any) => {
+ setOnSelected(item.caption);
+ console.log(onSelected);
+ };
+ return (
+ //TOdO Need to add dropdown with categories
+
+
+
+ {}}>
+
+
+
+
+
+ );
+}
diff --git a/src/components/search/SearchInput.tsx b/src/components/search/SearchInput.tsx
new file mode 100755
index 0000000..1e6e0b5
--- /dev/null
+++ b/src/components/search/SearchInput.tsx
@@ -0,0 +1,163 @@
+/* -------------------------------------------------------------------------- */
+/* Imports */
+/* -------------------------------------------------------------------------- */
+import React from "react";
+import classNames from "classnames";
+import { Combobox, Transition } from "@headlessui/react";
+import { Fragment, useEffect, useState } from "react";
+import { useSearchStoreImplementation } from "searchResults/data/searchStoreImplementation";
+import { useSearchViewModel } from "searchResults/controller/searchResultsViewModel";
+import { Loader } from "components/Loader/Loader";
+/* -------------------------------------------------------------------------- */
+/* Component props */
+/* -------------------------------------------------------------------------- */
+type Hint = {
+ id: string;
+ caption: string;
+};
+
+type Props = {
+ onSelected: (value: Hint) => void;
+ disabled?: boolean;
+ inGroup?: boolean;
+ className?: string;
+ maxScrollSize?: number;
+ elementScrollSize?: number;
+ placeHolder?: string;
+};
+/* -------------------------------------------------------------------------- */
+/* styles */
+/* -------------------------------------------------------------------------- */
+const inputStyle = `
+ w-full
+ cursor-default
+ rounded
+ overflow-hidden
+ border
+ border-solid
+ shadow-none
+ border-gray-100
+ focus:outline-none
+ focus:border-gray-200
+ hover:border-gray-200
+ py-2 pl-3
+ text-sm
+ text-gray-900
+`;
+
+const inputList = `
+ absolute z-10 mt-1 w-full max-h-56
+ bg-white shadow-lg
+ rounded
+ overflow-hidden
+ focus:outline-none
+ text-base
+ sm:text-sm
+ overflow-y-scroll
+ shadow-md
+ scrollbar-thin
+ scrollbar-thumb-gray-500
+ scrollbar-track-inherit
+ scrollbar-thumb-rounded`;
+
+const inputInGroup = [
+ `border-none
+ hover:none
+ active:none
+ focus:none
+ `,
+];
+
+/* -------------------------------------------------------------------------- */
+/* Component implementation */
+/* -------------------------------------------------------------------------- */
+
+export default function SearchInput({
+ onSelected,
+ disabled,
+ inGroup = false,
+ className,
+ maxScrollSize = 140,
+ elementScrollSize = 36,
+ placeHolder = "Search...",
+ ...props
+}: Props) {
+ const store = useSearchStoreImplementation();
+ const {
+ changeInputValue,
+ currentSearchState,
+ inputValue,
+ searchResults,
+ isLoading,
+ isFailed,
+ } = useSearchViewModel(store);
+ return (
+
+
+
+
+ changeInputValue(event.target.value)}
+ placeholder={placeHolder}
+ displayValue={() => inputValue}
+ />
+
+
+ {currentSearchState !== "" && !isFailed && !isLoading && (
+
+
+ {searchResults === undefined ||
+ (searchResults.data.length === 0 &&
+ currentSearchState !== "") ? (
+ Nothing found
+ ) : null}
+ {searchResults !== undefined &&
+ searchResults.data.map((result) => (
+
+ classNames(
+ active ? "text-gray-900 bg-blue-50" : "font-normal ",
+ "cursor-default select-none relative py-2 pl-3 pr-9",
+ selected
+ ? "text-gray-900 bg-blue-100"
+ : "font-normal "
+ )
+ }
+ value={result.title}
+ onClick={() => {
+ if (result.title != undefined) {
+ changeInputValue(result.title);
+ }
+ }}
+ >
+ {result.title}
+
+ ))}
+
+
+ )}
+ {isLoading && (
+
+ )}
+
+
- {children}
-
- );
-}
+import React from "react";
+import classNames from "classnames";
+
+type Props = {
+ className?: string | undefined;
+ children: React.ReactNode;
+};
+
+export default function Heading({ children, className }: Props) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/src/components/typography/Link.tsx b/src/components/typography/Link.tsx
old mode 100644
new mode 100755
index d5ac56d..c01bb6b
--- a/src/components/typography/Link.tsx
+++ b/src/components/typography/Link.tsx
@@ -1,60 +1,60 @@
-import React from "react";
-import { NavLink, NavLinkProps, To } from "react-router-dom";
-import classNames from "classnames";
-
-type Props = {
- to?: To;
- children: React.ReactNode;
- disabled?: boolean;
- className?: string;
-} & Omit;
-
-function getURL(to: To): URL {
- if (typeof to !== "string") {
- return getURL(to.pathname ?? "");
- }
- try {
- return new URL(to as string);
- } catch {
- let outurl = `${window.location.origin}${
- to.startsWith("/") ? to : "/" + to
- }`;
- return new URL(outurl);
- }
-}
-
-export default function Link({
- to,
- children,
- disabled,
- className,
- style,
- ...props
-}: Props) {
- const link =
- to && getURL(to).hostname === window.location.hostname ? (
-
- {children}
-
- ) : (
-
- {children}
-
- );
- return {link}
;
-}
+import React from "react";
+import { NavLink, NavLinkProps, To } from "react-router-dom";
+import classNames from "classnames";
+
+type Props = {
+ to?: To;
+ children: React.ReactNode;
+ disabled?: boolean;
+ className?: string;
+} & Omit;
+
+function getURL(to: To): URL {
+ if (typeof to !== "string") {
+ return getURL(to.pathname ?? "");
+ }
+ try {
+ return new URL(to as string);
+ } catch {
+ let outurl = `${window.location.origin}${
+ to.startsWith("/") ? to : "/" + to
+ }`;
+ return new URL(outurl);
+ }
+}
+
+export default function Link({
+ to,
+ children,
+ disabled,
+ className,
+ style,
+ ...props
+}: Props) {
+ const link =
+ to && getURL(to).hostname === window.location.hostname ? (
+
+ {children}
+
+ ) : (
+
+ {children}
+
+ );
+ return {link}
;
+}
diff --git a/src/components/typography/RouterLink.tsx b/src/components/typography/RouterLink.tsx
old mode 100644
new mode 100755
index 0d30c79..94c86d2
--- a/src/components/typography/RouterLink.tsx
+++ b/src/components/typography/RouterLink.tsx
@@ -1,23 +1,23 @@
-import classNames from "classnames";
-import { NavLink, NavLinkProps } from "react-router-dom";
-
-type Props = {
- disabled?: boolean;
- children?: React.ReactNode;
-} & NavLinkProps;
-
-export function RouterLink({
- children,
- disabled = false,
- className,
- to,
-}: Props) {
- return (
-
- {children}
-
- );
-}
+import classNames from "classnames";
+import { NavLink, NavLinkProps } from "react-router-dom";
+
+type Props = {
+ disabled?: boolean;
+ children?: React.ReactNode;
+} & NavLinkProps;
+
+export function RouterLink({
+ children,
+ disabled = false,
+ className,
+ to,
+}: Props) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/src/components/typography/Typography.stories.tsx b/src/components/typography/Typography.stories.tsx
old mode 100644
new mode 100755
index 259e9d6..aa45ed0
--- a/src/components/typography/Typography.stories.tsx
+++ b/src/components/typography/Typography.stories.tsx
@@ -1,17 +1,17 @@
-
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import Typography from './Typography';
-
-export default {
- title: 'Typography',
- component: Typography,
- } as ComponentMeta;
-
- const Template: ComponentStory = (args) => (
- ;
+
+ const Template: ComponentStory = (args) => (
+ = {
- thin: 'font-thin',
- extralight: 'font-extralight',
- light: 'font-light',
- normal: 'font-normal',
- medium: 'font-medium',
- semibold: 'font-semibold',
- bold: 'font-bold',
- extrabold: 'font-extrabold',
- black: 'font-black'
-
-}
-
-const Typography = ({
- children,
- htmlTag,
- fontWeightVariant='normal',
- className
- }: Props) => {
- const As = htmlTag || 'div' ;
- return (
-
- {children}
-
- );
-}
-
-export default Typography
+import React from 'react';
+import classNames from 'classnames';
+import {
+ FontWeightVariants,
+ TypographyHtmlTagVariants,
+ TypographyFontWeightVariantsMap
+} from 'core/_variants'
+
+
+interface Props extends React.ComponentPropsWithoutRef<"div"> {
+ htmlTag?: TypographyHtmlTagVariants | undefined;
+ fontWeightVariant?: FontWeightVariants;
+};
+
+const typographyFontWeightVariants: TypographyFontWeightVariantsMap = {
+ thin: 'font-thin',
+ extralight: 'font-extralight',
+ light: 'font-light',
+ normal: 'font-normal',
+ medium: 'font-medium',
+ semibold: 'font-semibold',
+ bold: 'font-bold',
+ extrabold: 'font-extrabold',
+ black: 'font-black'
+
+}
+
+const Typography = ({
+ children,
+ htmlTag,
+ fontWeightVariant='normal',
+ className
+ }: Props) => {
+ const As = htmlTag || 'div' ;
+ return (
+
+ {children}
+
+ );
+}
+
+export default Typography
diff --git a/src/core/_variants.ts b/src/core/_variants.ts
old mode 100644
new mode 100755
index 8043324..621dff1
--- a/src/core/_variants.ts
+++ b/src/core/_variants.ts
@@ -1,21 +1,21 @@
-export type StyleType = "high" | "medium" | "low";
-
-export type StyleColorVariants = "blue" | "pink" | "red" | "purple" | "yellow" | "sky" | "emerald" | "gray" | "dark-coral";
-
-export type StyleGlobalVariants = "primary" | "base" | "secondary";
-
-export type StyleColorVariantsMap = {
- [Property in StyleColorVariants]: T;
-};
-
-export type StyleGlobalVarinatsMap = {
- [Property in StyleGlobalVariants]: T;
-}
-
-export type FontWeightVariants = 'thin' | 'extralight' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black'
-
-export type TypographyHtmlTagVariants = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p";
-
-export type TypographyFontWeightVariantsMap = {
- [Property in FontWeightVariants]: T;
+export type StyleType = "high" | "medium" | "low";
+
+export type StyleColorVariants = "blue" | "pink" | "red" | "purple" | "yellow" | "sky" | "emerald" | "gray" | "dark-coral";
+
+export type StyleGlobalVariants = "primary" | "base" | "secondary";
+
+export type StyleColorVariantsMap = {
+ [Property in StyleColorVariants]: T;
+};
+
+export type StyleGlobalVarinatsMap = {
+ [Property in StyleGlobalVariants]: T;
+}
+
+export type FontWeightVariants = 'thin' | 'extralight' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black'
+
+export type TypographyHtmlTagVariants = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p";
+
+export type TypographyFontWeightVariantsMap = {
+ [Property in FontWeightVariants]: T;
}
\ No newline at end of file
diff --git a/src/core/dto_model.ts b/src/core/dto_model.ts
old mode 100644
new mode 100755
index 897957d..789b05a
--- a/src/core/dto_model.ts
+++ b/src/core/dto_model.ts
@@ -1,31 +1,31 @@
-import _ from "lodash";
-export interface DTOModel {
- status: number;
- type: string;
- message: string;
- description: string;
- data: T;
-}
-
-export interface FailureDTO {
- statusCode: number;
- message: string;
-}
-
-export interface GraphQLFailureDTO {
- errors: {code: string, message: string, name: string}[]
-}
-
-export function isDTOModel(obj: any): obj is DTOModel {
- return obj !== null && typeof obj === "object" && !!obj.isDTOModel;
-}
-
-export const isDTO = (obj: any): obj is DTOModel => obj.data !== null &&
-_.isObject(obj.data) &&
-_.has(obj.data, "status") &&
-_.has(obj.data, "type") &&
-_.has(obj.data, "message") &&
-_.has(obj.data, "description") &&
-_.has(obj.data, "data")
-
+import _ from "lodash";
+export interface DTOModel {
+ status: number;
+ type: string;
+ message: string;
+ description: string;
+ data: T;
+}
+
+export interface FailureDTO {
+ statusCode: number;
+ message: string;
+}
+
+export interface GraphQLFailureDTO {
+ errors: {code: string, message: string, name: string}[]
+}
+
+export function isDTOModel(obj: any): obj is DTOModel {
+ return obj !== null && typeof obj === "object" && !!obj.isDTOModel;
+}
+
+export const isDTO = (obj: any): obj is DTOModel => obj.data !== null &&
+_.isObject(obj.data) &&
+_.has(obj.data, "status") &&
+_.has(obj.data, "type") &&
+_.has(obj.data, "message") &&
+_.has(obj.data, "description") &&
+_.has(obj.data, "data")
+
export const GRAPHQL_UNAUTHORIZED_KEY = "UNAUTHENTICATED";
\ No newline at end of file
diff --git a/src/core/failure.ts b/src/core/failure.ts
old mode 100644
new mode 100755
index be2627a..52090a4
--- a/src/core/failure.ts
+++ b/src/core/failure.ts
@@ -1,113 +1,113 @@
-import { AxiosError } from "axios";
-import _ from "lodash";
-import { DTOModel, isDTO } from "./dto_model";
-
-export interface FailureI {
- status?: number;
- message: string;
- key?: string;
- meta?: FailureMeta;
-}
-
-interface FailureMeta {
- isRequestFailure?: boolean;
- isNetworkFailure?: boolean;
- isPlainFailure?: boolean;
- data?: any;
- [prop: string]: any | undefined;
-}
-
-class Failure implements FailureI {
- message: string;
- key?: string | undefined;
- status?: number | undefined;
- meta?: FailureMeta;
- static isf = true;
-
- /**
- *
- * @param {Failure} o
- * @returns {boolean}
- */
- static isFailure(o: any): o is Failure {
- if (!_.isObjectLike(o)) return false;
- if (_.has(o, "message")) return true;
- return false;
- }
-
- constructor({ status, message, key, meta }: FailureI) {
- this.status = status;
- this.message = message;
- this.key = key;
- this.meta = meta;
- console.error([key ?? "", message].filter((i) => i.length !== 0).join(":"));
- }
-
- static fromReason(reason: AxiosError, key?: string): Failure {
-
- try {
- if(!Failure.verifyContainsDTO(reason)) {
- throw reason;
- }
- if (reason.response) {
- return new Failure({
- status: reason.response!.status,
- message:
- reason.response!.data.message ?? "Unknown response error model",
- key: key,
- meta: {
- isRequestFailure: true,
- data: reason.response.data,
- },
- });
- }
- if (reason.request) {
- return new Failure({
- message: `Something went wrong while ${reason.config.url} had been called`,
- key: `unreachedResponse(${key})`,
- meta: {
- isNetworkFailure: true,
- },
- });
- }
- throw reason;
- } catch (error) {
- return new Failure({
- message: reason.message,
- key: key,
- meta: { isPlainFailure: true },
- });
- }
- }
-
- /**
- * Verifies that passed object matches [DTOModel] structure
- *
- * Otherwise it will rethrow passed object
- */
- static verifyContainsDTO(
- reason: AxiosError
- ): reason is AxiosError, any> {
- return [reason.response, reason.request].reduce((acc, obj) => {
- if (acc || isDTO(obj)) {
- return true;
- }
- return false;
- }, false);
- }
-
- toString(): string {
- return `${this.message} (${this.key ?? "key unknown"}) ${
- this.status ?? "status unknown"
- }`;
- }
-
- mapKeyWith(transpiler: (key: string) => string) {
- if (!this.key) {
- return this.message;
- }
- return transpiler(this.key);
- }
-}
-
-export default Failure;
+import { AxiosError } from "axios";
+import _ from "lodash";
+import { DTOModel, isDTO } from "./dto_model";
+
+export interface FailureI {
+ status?: number;
+ message: string;
+ key?: string;
+ meta?: FailureMeta;
+}
+
+interface FailureMeta {
+ isRequestFailure?: boolean;
+ isNetworkFailure?: boolean;
+ isPlainFailure?: boolean;
+ data?: any;
+ [prop: string]: any | undefined;
+}
+
+class Failure implements FailureI {
+ message: string;
+ key?: string | undefined;
+ status?: number | undefined;
+ meta?: FailureMeta;
+ static isf = true;
+
+ /**
+ *
+ * @param {Failure} o
+ * @returns {boolean}
+ */
+ static isFailure(o: any): o is Failure {
+ if (!_.isObjectLike(o)) return false;
+ if (_.has(o, "message")) return true;
+ return false;
+ }
+
+ constructor({ status, message, key, meta }: FailureI) {
+ this.status = status;
+ this.message = message;
+ this.key = key;
+ this.meta = meta;
+ console.error([key ?? "", message].filter((i) => i.length !== 0).join(":"));
+ }
+
+ static fromReason(reason: AxiosError, key?: string): Failure {
+
+ try {
+ if(!Failure.verifyContainsDTO(reason)) {
+ throw reason;
+ }
+ if (reason.response) {
+ return new Failure({
+ status: reason.response!.status,
+ message:
+ reason.response!.data.message ?? "Unknown response error model",
+ key: key,
+ meta: {
+ isRequestFailure: true,
+ data: reason.response.data,
+ },
+ });
+ }
+ if (reason.request) {
+ return new Failure({
+ message: `Something went wrong while ${reason.config.url} had been called`,
+ key: `unreachedResponse(${key})`,
+ meta: {
+ isNetworkFailure: true,
+ },
+ });
+ }
+ throw reason;
+ } catch (error) {
+ return new Failure({
+ message: reason.message,
+ key: key,
+ meta: { isPlainFailure: true },
+ });
+ }
+ }
+
+ /**
+ * Verifies that passed object matches [DTOModel] structure
+ *
+ * Otherwise it will rethrow passed object
+ */
+ static verifyContainsDTO(
+ reason: AxiosError
+ ): reason is AxiosError, any> {
+ return [reason.response, reason.request].reduce((acc, obj) => {
+ if (acc || isDTO(obj)) {
+ return true;
+ }
+ return false;
+ }, false);
+ }
+
+ toString(): string {
+ return `${this.message} (${this.key ?? "key unknown"}) ${
+ this.status ?? "status unknown"
+ }`;
+ }
+
+ mapKeyWith(transpiler: (key: string) => string) {
+ if (!this.key) {
+ return this.message;
+ }
+ return transpiler(this.key);
+ }
+}
+
+export default Failure;
diff --git a/src/core/graphql_schemas.ts b/src/core/graphql_schemas.ts
old mode 100644
new mode 100755
index df5d026..4b85416
--- a/src/core/graphql_schemas.ts
+++ b/src/core/graphql_schemas.ts
@@ -1,4 +1,4 @@
-export interface GraphQLRequest {
- query: string,
-
+export interface GraphQLRequest {
+ query: string,
+
}
\ No newline at end of file
diff --git a/src/core/handlers/execOnAnyFailureHandler.ts b/src/core/handlers/execOnAnyFailureHandler.ts
old mode 100644
new mode 100755
index 6674891..e5c360f
--- a/src/core/handlers/execOnAnyFailureHandler.ts
+++ b/src/core/handlers/execOnAnyFailureHandler.ts
@@ -1,26 +1,26 @@
-import Failure from "core/failure";
-import {
- BaseFailureHandler,
- ResponseFailureHandler,
-} from "core/handlers/responseFailureHandler";
-
-class ExecOnAnyHandler
- extends BaseFailureHandler
- implements ResponseFailureHandler
-{
- private callback: (reason: Failure) => void;
-
- constructor(
- callback: (reason: Failure) => void,
- nextHandler?: ResponseFailureHandler
- ) {
- super(nextHandler);
- this.callback = callback;
- }
-
- handle(reason: Failure): void {
- return this.callback(reason);
- }
-}
-
-export default ExecOnAnyHandler;
+import Failure from "core/failure";
+import {
+ BaseFailureHandler,
+ ResponseFailureHandler,
+} from "core/handlers/responseFailureHandler";
+
+class ExecOnAnyHandler
+ extends BaseFailureHandler
+ implements ResponseFailureHandler
+{
+ private callback: (reason: Failure) => void;
+
+ constructor(
+ callback: (reason: Failure) => void,
+ nextHandler?: ResponseFailureHandler
+ ) {
+ super(nextHandler);
+ this.callback = callback;
+ }
+
+ handle(reason: Failure): void {
+ return this.callback(reason);
+ }
+}
+
+export default ExecOnAnyHandler;
diff --git a/src/core/handlers/forbidenFailureHandler.ts b/src/core/handlers/forbidenFailureHandler.ts
old mode 100644
new mode 100755
index 5d28ac5..4a2a0f7
--- a/src/core/handlers/forbidenFailureHandler.ts
+++ b/src/core/handlers/forbidenFailureHandler.ts
@@ -1,27 +1,27 @@
-import Failure from "core/failure";
-import {
- BaseFailureHandler,
- ResponseFailureHandler,
-} from "./responseFailureHandler";
-
-class ForbidenFailureHandler
- extends BaseFailureHandler
- implements ResponseFailureHandler
-{
- private callback: Function;
- constructor(callback: Function, nextHandler?: ResponseFailureHandler) {
- super(nextHandler);
- this.callback = callback;
- }
-
- handle(reason: Failure): void {
- if (reason.meta && reason.meta.isRequestFailure && reason.status === 403) {
- this.callback(reason);
- return;
- }
-
- return super.handle(reason);
- }
-}
-
-export default ForbidenFailureHandler;
+import Failure from "core/failure";
+import {
+ BaseFailureHandler,
+ ResponseFailureHandler,
+} from "./responseFailureHandler";
+
+class ForbidenFailureHandler
+ extends BaseFailureHandler
+ implements ResponseFailureHandler
+{
+ private callback: Function;
+ constructor(callback: Function, nextHandler?: ResponseFailureHandler) {
+ super(nextHandler);
+ this.callback = callback;
+ }
+
+ handle(reason: Failure): void {
+ if (reason.meta && reason.meta.isRequestFailure && reason.status === 403) {
+ this.callback(reason);
+ return;
+ }
+
+ return super.handle(reason);
+ }
+}
+
+export default ForbidenFailureHandler;
diff --git a/src/core/handlers/notFoundFailureHandler.ts b/src/core/handlers/notFoundFailureHandler.ts
old mode 100644
new mode 100755
index 913177c..1d24671
--- a/src/core/handlers/notFoundFailureHandler.ts
+++ b/src/core/handlers/notFoundFailureHandler.ts
@@ -1,27 +1,27 @@
-import Failure from "core/failure";
-import {
- BaseFailureHandler,
- ResponseFailureHandler,
-} from "./responseFailureHandler";
-
-class NotFoundFailureHandler
- extends BaseFailureHandler
- implements ResponseFailureHandler
-{
- private callback: Function;
- constructor(callback: Function, nextHandler?: ResponseFailureHandler) {
- super(nextHandler);
- this.callback = callback;
- }
-
- handle(reason: Failure): void {
- if (reason.meta && reason.meta.isRequestFailure && reason.status === 404) {
- this.callback(reason);
- return;
- }
-
- return super.handle(reason);
- }
-}
-
-export default NotFoundFailureHandler;
+import Failure from "core/failure";
+import {
+ BaseFailureHandler,
+ ResponseFailureHandler,
+} from "./responseFailureHandler";
+
+class NotFoundFailureHandler
+ extends BaseFailureHandler
+ implements ResponseFailureHandler
+{
+ private callback: Function;
+ constructor(callback: Function, nextHandler?: ResponseFailureHandler) {
+ super(nextHandler);
+ this.callback = callback;
+ }
+
+ handle(reason: Failure): void {
+ if (reason.meta && reason.meta.isRequestFailure && reason.status === 404) {
+ this.callback(reason);
+ return;
+ }
+
+ return super.handle(reason);
+ }
+}
+
+export default NotFoundFailureHandler;
diff --git a/src/core/handlers/responseFailureHandler.ts b/src/core/handlers/responseFailureHandler.ts
old mode 100644
new mode 100755
index 6a4a600..6bf5b4b
--- a/src/core/handlers/responseFailureHandler.ts
+++ b/src/core/handlers/responseFailureHandler.ts
@@ -1,30 +1,30 @@
-import Failure from "../failure";
-
-interface ResponseFailureHandler {
- nextHandler?: ResponseFailureHandler;
- handle(reason: Failure): void;
- setNext(next: ResponseFailureHandler): void;
-}
-
-type FailureCallbackFunction = (reason?: Failure) => void;
-
-class BaseFailureHandler implements ResponseFailureHandler {
- nextHandler?: ResponseFailureHandler | undefined;
-
- constructor(nextHandler?: ResponseFailureHandler) {
- this.nextHandler = nextHandler;
- }
-
- handle(reason: Failure) {
- if (this.nextHandler) {
- return this.nextHandler.handle(reason);
- }
- }
-
- setNext(next: ResponseFailureHandler): void {
- this.nextHandler = next;
- }
-}
-
-export { BaseFailureHandler };
-export type { ResponseFailureHandler, FailureCallbackFunction };
+import Failure from "../failure";
+
+interface ResponseFailureHandler {
+ nextHandler?: ResponseFailureHandler;
+ handle(reason: Failure): void;
+ setNext(next: ResponseFailureHandler): void;
+}
+
+type FailureCallbackFunction = (reason?: Failure) => void;
+
+class BaseFailureHandler implements ResponseFailureHandler {
+ nextHandler?: ResponseFailureHandler | undefined;
+
+ constructor(nextHandler?: ResponseFailureHandler) {
+ this.nextHandler = nextHandler;
+ }
+
+ handle(reason: Failure) {
+ if (this.nextHandler) {
+ return this.nextHandler.handle(reason);
+ }
+ }
+
+ setNext(next: ResponseFailureHandler): void {
+ this.nextHandler = next;
+ }
+}
+
+export { BaseFailureHandler };
+export type { ResponseFailureHandler, FailureCallbackFunction };
diff --git a/src/core/handlers/unauthorizedHandler.ts b/src/core/handlers/unauthorizedHandler.ts
old mode 100644
new mode 100755
index 849a82d..f109ace
--- a/src/core/handlers/unauthorizedHandler.ts
+++ b/src/core/handlers/unauthorizedHandler.ts
@@ -1,37 +1,37 @@
-import { GraphQLFailureDTO, GRAPHQL_UNAUTHORIZED_KEY } from "core/dto_model";
-import Failure from "core/failure";
-import {
- BaseFailureHandler,
- FailureCallbackFunction,
- ResponseFailureHandler,
-} from "core/handlers/responseFailureHandler";
-
-class UnauthorizedHandler
- extends BaseFailureHandler
- implements ResponseFailureHandler
-{
- private cb: FailureCallbackFunction;
-
- constructor(callback: FailureCallbackFunction, nextHandler?: ResponseFailureHandler) {
- super(nextHandler);
- this.cb = callback;
- }
-
- handle(reason: Failure): void {
- if (!reason.meta || !reason.meta!.isRequestFailure) {
- return super.handle(reason);
- }
- if (
- reason.status === 401 ||
- (reason.meta.data &&
- Array.isArray(reason.meta.data.erros) &&
- (reason.meta.data as GraphQLFailureDTO).errors.findIndex((error) => {
- return error.code === GRAPHQL_UNAUTHORIZED_KEY;
- }) > -1)
- ) {
- this.cb();
- }
- }
-}
-
-export default UnauthorizedHandler;
+import { GraphQLFailureDTO, GRAPHQL_UNAUTHORIZED_KEY } from "core/dto_model";
+import Failure from "core/failure";
+import {
+ BaseFailureHandler,
+ FailureCallbackFunction,
+ ResponseFailureHandler,
+} from "core/handlers/responseFailureHandler";
+
+class UnauthorizedHandler
+ extends BaseFailureHandler
+ implements ResponseFailureHandler
+{
+ private cb: FailureCallbackFunction;
+
+ constructor(callback: FailureCallbackFunction, nextHandler?: ResponseFailureHandler) {
+ super(nextHandler);
+ this.cb = callback;
+ }
+
+ handle(reason: Failure): void {
+ if (!reason.meta || !reason.meta!.isRequestFailure) {
+ return super.handle(reason);
+ }
+ if (
+ reason.status === 401 ||
+ (reason.meta.data &&
+ Array.isArray(reason.meta.data.erros) &&
+ (reason.meta.data as GraphQLFailureDTO).errors.findIndex((error) => {
+ return error.code === GRAPHQL_UNAUTHORIZED_KEY;
+ }) > -1)
+ ) {
+ this.cb();
+ }
+ }
+}
+
+export default UnauthorizedHandler;
diff --git a/src/core/helpers.ts b/src/core/helpers.ts
old mode 100644
new mode 100755
index 61f41e3..812e24c
--- a/src/core/helpers.ts
+++ b/src/core/helpers.ts
@@ -1,13 +1,13 @@
-export const handleScrollTo = (e: React.MouseEvent) => {
- e.preventDefault();
- const link: HTMLAnchorElement = e.currentTarget;
- if (link.hash && link.hash != "") {
- document
- .getElementById(link.hash.substring(1, undefined))
- ?.scrollIntoView({ behavior: "smooth", block: "start" });
- }
-};
-
-export function capitalization (str: string) {
- return str.substring(0,1).toUpperCase() + str.substring(1);
+export const handleScrollTo = (e: React.MouseEvent) => {
+ e.preventDefault();
+ const link: HTMLAnchorElement = e.currentTarget;
+ if (link.hash && link.hash != "") {
+ document
+ .getElementById(link.hash.substring(1, undefined))
+ ?.scrollIntoView({ behavior: "smooth", block: "start" });
+ }
+};
+
+export function capitalization (str: string) {
+ return str.substring(0,1).toUpperCase() + str.substring(1);
}
\ No newline at end of file
diff --git a/src/core/httpClient.ts b/src/core/httpClient.ts
new file mode 100755
index 0000000..3b4d76b
--- /dev/null
+++ b/src/core/httpClient.ts
@@ -0,0 +1,12 @@
+import axios from "axios";
+const BASE_URL = process.env.REACT_APP_INTEGRATOR_URL;
+export const GRAPHQL_URL = process.env.REACT_APP_GRAPHQL_URL ?? "";
+
+const instance = axios.create({
+ baseURL: BASE_URL + (process.env.REACT_APP_INTEGRATOR_API_VERSION ?? ""),
+});
+export { instance };
+const integratorApiClient = axios.create({
+ baseURL: BASE_URL + (process.env.REACT_APP_INTEGRATOR_API_VERSION ?? ""),
+});
+export { integratorApiClient };
diff --git a/src/gql/gqlQuery.ts b/src/gql/gqlQuery.ts
old mode 100644
new mode 100755
index a0bfa98..9d9e47f
--- a/src/gql/gqlQuery.ts
+++ b/src/gql/gqlQuery.ts
@@ -1,4 +1,4 @@
-export interface GraphQLQueryInterface {
- query: string;
- variables?: T
+export interface GraphQLQueryInterface {
+ query: string;
+ variables?: T
}
\ No newline at end of file
diff --git a/src/gql/updateUserMutation.ts b/src/gql/updateUserMutation.ts
old mode 100644
new mode 100755
index 531c545..76d5f89
--- a/src/gql/updateUserMutation.ts
+++ b/src/gql/updateUserMutation.ts
@@ -1,31 +1,31 @@
-/* -------------------------------------------------------------------------- */
-/* Libraries */
-/* -------------------------------------------------------------------------- */
-import gql from "graphql-tag";
-import { GraphQLQueryInterface } from "./gqlQuery";
-/* -------------------------------------------------------------------------- */
-/* GraphQL */
-/* -------------------------------------------------------------------------- */
-const updateGraphQLQuery = gql`
- mutation UpdateProfile($data: UserProfileInputObject!) {
- updateProfile(data: $data) {
- __typename
- }
- }
-`;
-
-export interface QueryInterface
- extends GraphQLQueryInterface<{
- data: {
- account_id?: String;
- username?: String;
- email?: String;
- locale?: String;
- image_url?: String;
- first_name?: String;
- last_name?: String;
- bio?: String;
- }
- }> {}
-
-export default updateGraphQLQuery;
+/* -------------------------------------------------------------------------- */
+/* Libraries */
+/* -------------------------------------------------------------------------- */
+import gql from "graphql-tag";
+import { GraphQLQueryInterface } from "./gqlQuery";
+/* -------------------------------------------------------------------------- */
+/* GraphQL */
+/* -------------------------------------------------------------------------- */
+const updateGraphQLQuery = gql`
+ mutation UpdateProfile($data: UserProfileInputObject!) {
+ updateProfile(data: $data) {
+ __typename
+ }
+ }
+`;
+
+export interface QueryInterface
+ extends GraphQLQueryInterface<{
+ data: {
+ account_id?: String;
+ username?: String;
+ email?: String;
+ locale?: String;
+ image_url?: String;
+ first_name?: String;
+ last_name?: String;
+ bio?: String;
+ }
+ }> {}
+
+export default updateGraphQLQuery;
diff --git a/src/index.css b/src/index.css
old mode 100644
new mode 100755
index d0ce2d6..f765ccc
--- a/src/index.css
+++ b/src/index.css
@@ -1,207 +1,207 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
- @font-face {
- font-family: "Poppins";
- src: url("assets/fonts/Poppins-Bold.eot");
- src: url("assets/fonts/Poppins-Bold.eot?#iefix") format("embedded-opentype"),
- url("assets/fonts/Poppins-Bold.woff2") format("woff2"),
- url("assets/fonts/Poppins-Bold.ttf") format("truetype");
- font-weight: 700;
- font-style: normal;
- font-display: swap;
- }
-
- @font-face {
- font-family: "Poppins";
- src: url("assets/fonts/Poppins-Medium.eot");
- src: url("assets/fonts/Poppins-Medium.eot?#iefix")
- format("embedded-opentype"),
- url("assets/fonts/Poppins-Medium.woff2") format("woff2"),
- url("assets/fonts/Poppins-Medium.ttf") format("truetype");
- font-weight: 500;
- font-style: normal;
- font-display: swap;
- }
-
- @font-face {
- font-family: "Poppins";
- src: url("assets/fonts/Poppins-Regular.eot");
- src: url("assets/fonts/Poppins-Regular.eot?#iefix")
- format("embedded-opentype"),
- url("assets/fonts/Poppins-Regular.woff2") format("woff2"),
- url("assets/fonts/Poppins-Regular.ttf") format("truetype");
- font-weight: normal;
- font-style: normal;
- font-display: swap;
- }
-
- @font-face {
- font-family: "Poppins";
- src: url("assets/fonts/Poppins-Thin.eot");
- src: url("assets/fonts/Poppins-Thin.eot?#iefix") format("embedded-opentype"),
- url("assets/fonts/Poppins-Thin.woff2") format("woff2"),
- url("assets/fonts/Poppins-Thin.ttf") format("truetype");
- font-weight: 300;
- font-style: normal;
- font-display: swap;
- }
-
- @font-face {
- font-family: "Inter";
- src: url("assets/fonts/Inter-Black.ttf") format("truetype");
- font-weight: 900;
- font-style: normal;
- font-display: swap;
- }
-
- @font-face {
- font-family: "Inter";
- src: url("assets/fonts/Inter-ExtraBold.ttf") format("truetype");
- font-weight: 800;
- font-style: normal;
- font-display: swap;
- }
-
- @font-face {
- font-family: "Inter";
- src: url("assets/fonts/Inter-Bold.ttf") format("truetype");
- font-weight: 700;
- font-style: normal;
- font-display: swap;
- }
-
- @font-face {
- font-family: "Inter";
- src: url("assets/fonts/Inter-SemiBold.ttf") format("truetype");
- font-weight: 600;
- font-style: normal;
- font-display: swap;
- }
-
- @font-face {
- font-family: "Inter";
- src: url("assets/fonts/Inter-Medium.ttf") format("truetype");
- font-weight: 500;
- font-style: normal;
- font-display: swap;
- }
-
- @font-face {
- font-family: "Inter";
- src: url("assets/fonts/Inter-Regular.ttf") format("truetype");
- font-weight: normal;
- font-style: normal;
- font-display: swap;
- }
-
- @font-face {
- font-family: "Inter";
- src: url("assets/fonts/Inter-Light.ttf") format("truetype");
- font-weight: 300;
- font-style: normal;
- font-display: swap;
- }
-
- @font-face {
- font-family: "Inter";
- src: url("assets/fonts/Inter-ExtraLight.ttf") format("truetype");
- font-weight: 200;
- font-style: normal;
- font-display: swap;
- }
-
- @font-face {
- font-family: "Inter";
- src: url("assets/fonts/Inter-Thin.ttf") format("truetype");
- font-weight: 100;
- font-style: normal;
- font-display: swap;
- }
-
- html {
- font-family: "Inter", "Poppins", -apple-system, "Segoe UI", system-ui,
- "Roboto", "Helvetica Neue", "Arial";
- color: var(--color-text);
- }
-
- *,
- ::before,
- ::after,
- .theme-dark *,
- .theme-dark::before,
- .theme-dark::after {
- /* ------------------------------- Body color ------------------------------- */
- --color-aside: #0a0e1a;
- --color-footer: 10 10 10;
- --color-text: rgb(38, 38, 38);
- /* -------------------------------------------------------------------------- */
- --color-serv: 25 29 43;
- --color-serv-50: 227 230 237;
- --color-serv-100: 200 205 223;
- --color-serv-200: 142 152 189;
- --color-serv-300: 90 104 155;
- --color-serv-400: 58 67 100;
- --color-serv-500: 25 29 43;
- --color-serv-600: 21 24 35;
- --color-serv-700: 15 17 26;
- --color-serv-800: 9 11 16;
- --color-serv-900: 6 7 10;
- /* ---------------------------------- Blue ---------------------------------- */
- --color-blue-50: 230 247 255;
- --color-blue-100: 186 231 255;
- --color-blue-200: 145 213 255;
- --color-blue-300: 89 192 255;
- --color-blue-400: 64 169 255;
- --color-blue-500: 24 144 255;
- --color-blue-600: 9 109 217;
- --color-blue-700: 0 80 179;
- --color-blue-800: 0 58 140;
- --color-blue-900: 0 39 102;
- /* ---------------------------------- Gray ---------------------------------- */
- --color-gray-50: 250 250 250;
- --color-gray-75: 240 240 240;
- --color-gray-100: 235 235 235;
- --color-gray-200: 214 214 214;
- --color-gray-300: 191 191 191;
- --color-gray-400: 166 166 166;
- --color-gray-500: 140 140 140;
- --color-gray-600: 115 115 115;
- --color-gray-700: 89 89 89;
- --color-gray-800: 64 64 64;
- --color-gray-900: 38 38 38;
- }
-
- /* Dark theme */
- @media (prefers-color-scheme: dark) {
- :root {
- --bg: hsl(var(--hue), 10%, 10%);
- --fg: hsl(var(--hue), 10%, 90%);
- }
- }
-}
-
-@layer components {
- /* Separate
- ======================================================================== */
-
- .separate {
- @apply flex items-center text-center;
- }
-
- .separate::after,
- .separate::before {
- content: "";
- @apply border-b border-gray-300 flex-1;
- }
-
- .separate:not(:empty)::after {
- @apply ml-2;
- }
-
- .separate:not(:empty)::before {
- @apply mr-2;
- }
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+ @font-face {
+ font-family: "Poppins";
+ src: url("assets/fonts/Poppins-Bold.eot");
+ src: url("assets/fonts/Poppins-Bold.eot?#iefix") format("embedded-opentype"),
+ url("assets/fonts/Poppins-Bold.woff2") format("woff2"),
+ url("assets/fonts/Poppins-Bold.ttf") format("truetype");
+ font-weight: 700;
+ font-style: normal;
+ font-display: swap;
+ }
+
+ @font-face {
+ font-family: "Poppins";
+ src: url("assets/fonts/Poppins-Medium.eot");
+ src: url("assets/fonts/Poppins-Medium.eot?#iefix")
+ format("embedded-opentype"),
+ url("assets/fonts/Poppins-Medium.woff2") format("woff2"),
+ url("assets/fonts/Poppins-Medium.ttf") format("truetype");
+ font-weight: 500;
+ font-style: normal;
+ font-display: swap;
+ }
+
+ @font-face {
+ font-family: "Poppins";
+ src: url("assets/fonts/Poppins-Regular.eot");
+ src: url("assets/fonts/Poppins-Regular.eot?#iefix")
+ format("embedded-opentype"),
+ url("assets/fonts/Poppins-Regular.woff2") format("woff2"),
+ url("assets/fonts/Poppins-Regular.ttf") format("truetype");
+ font-weight: normal;
+ font-style: normal;
+ font-display: swap;
+ }
+
+ @font-face {
+ font-family: "Poppins";
+ src: url("assets/fonts/Poppins-Thin.eot");
+ src: url("assets/fonts/Poppins-Thin.eot?#iefix") format("embedded-opentype"),
+ url("assets/fonts/Poppins-Thin.woff2") format("woff2"),
+ url("assets/fonts/Poppins-Thin.ttf") format("truetype");
+ font-weight: 300;
+ font-style: normal;
+ font-display: swap;
+ }
+
+ @font-face {
+ font-family: "Inter";
+ src: url("assets/fonts/Inter-Black.ttf") format("truetype");
+ font-weight: 900;
+ font-style: normal;
+ font-display: swap;
+ }
+
+ @font-face {
+ font-family: "Inter";
+ src: url("assets/fonts/Inter-ExtraBold.ttf") format("truetype");
+ font-weight: 800;
+ font-style: normal;
+ font-display: swap;
+ }
+
+ @font-face {
+ font-family: "Inter";
+ src: url("assets/fonts/Inter-Bold.ttf") format("truetype");
+ font-weight: 700;
+ font-style: normal;
+ font-display: swap;
+ }
+
+ @font-face {
+ font-family: "Inter";
+ src: url("assets/fonts/Inter-SemiBold.ttf") format("truetype");
+ font-weight: 600;
+ font-style: normal;
+ font-display: swap;
+ }
+
+ @font-face {
+ font-family: "Inter";
+ src: url("assets/fonts/Inter-Medium.ttf") format("truetype");
+ font-weight: 500;
+ font-style: normal;
+ font-display: swap;
+ }
+
+ @font-face {
+ font-family: "Inter";
+ src: url("assets/fonts/Inter-Regular.ttf") format("truetype");
+ font-weight: normal;
+ font-style: normal;
+ font-display: swap;
+ }
+
+ @font-face {
+ font-family: "Inter";
+ src: url("assets/fonts/Inter-Light.ttf") format("truetype");
+ font-weight: 300;
+ font-style: normal;
+ font-display: swap;
+ }
+
+ @font-face {
+ font-family: "Inter";
+ src: url("assets/fonts/Inter-ExtraLight.ttf") format("truetype");
+ font-weight: 200;
+ font-style: normal;
+ font-display: swap;
+ }
+
+ @font-face {
+ font-family: "Inter";
+ src: url("assets/fonts/Inter-Thin.ttf") format("truetype");
+ font-weight: 100;
+ font-style: normal;
+ font-display: swap;
+ }
+
+ html {
+ font-family: "Inter", "Poppins", -apple-system, "Segoe UI", system-ui,
+ "Roboto", "Helvetica Neue", "Arial";
+ color: var(--color-text);
+ }
+
+ *,
+ ::before,
+ ::after,
+ .theme-dark *,
+ .theme-dark::before,
+ .theme-dark::after {
+ /* ------------------------------- Body color ------------------------------- */
+ --color-aside: #0a0e1a;
+ --color-footer: 10 10 10;
+ --color-text: rgb(38, 38, 38);
+ /* -------------------------------------------------------------------------- */
+ --color-serv: 25 29 43;
+ --color-serv-50: 227 230 237;
+ --color-serv-100: 200 205 223;
+ --color-serv-200: 142 152 189;
+ --color-serv-300: 90 104 155;
+ --color-serv-400: 58 67 100;
+ --color-serv-500: 25 29 43;
+ --color-serv-600: 21 24 35;
+ --color-serv-700: 15 17 26;
+ --color-serv-800: 9 11 16;
+ --color-serv-900: 6 7 10;
+ /* ---------------------------------- Blue ---------------------------------- */
+ --color-blue-50: 230 247 255;
+ --color-blue-100: 186 231 255;
+ --color-blue-200: 145 213 255;
+ --color-blue-300: 89 192 255;
+ --color-blue-400: 64 169 255;
+ --color-blue-500: 24 144 255;
+ --color-blue-600: 9 109 217;
+ --color-blue-700: 0 80 179;
+ --color-blue-800: 0 58 140;
+ --color-blue-900: 0 39 102;
+ /* ---------------------------------- Gray ---------------------------------- */
+ --color-gray-50: 250 250 250;
+ --color-gray-75: 240 240 240;
+ --color-gray-100: 235 235 235;
+ --color-gray-200: 214 214 214;
+ --color-gray-300: 191 191 191;
+ --color-gray-400: 166 166 166;
+ --color-gray-500: 140 140 140;
+ --color-gray-600: 115 115 115;
+ --color-gray-700: 89 89 89;
+ --color-gray-800: 64 64 64;
+ --color-gray-900: 38 38 38;
+ }
+
+ /* Dark theme */
+ @media (prefers-color-scheme: dark) {
+ :root {
+ --bg: hsl(var(--hue), 10%, 10%);
+ --fg: hsl(var(--hue), 10%, 90%);
+ }
+ }
+}
+
+@layer components {
+ /* Separate
+ ======================================================================== */
+
+ .separate {
+ @apply flex items-center text-center;
+ }
+
+ .separate::after,
+ .separate::before {
+ content: "";
+ @apply border-b border-gray-300 flex-1;
+ }
+
+ .separate:not(:empty)::after {
+ @apply ml-2;
+ }
+
+ .separate:not(:empty)::before {
+ @apply mr-2;
+ }
+}
diff --git a/src/index.tsx b/src/index.tsx
old mode 100644
new mode 100755
index c390a65..5444a2c
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,42 +1,48 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import { BrowserRouter, Routes, Route } from "react-router-dom";
-import "./index.css";
-import App from "./App";
-import reportWebVitals from "./reportWebVitals";
-
-import "./localization/i18n";
-import About from "pages/Information/About";
-import Help from "pages/Information/Help";
-import ContactUs from "pages/Information/ContactUs";
-import TermsOfUse from "pages/Information/TermsOfUse";
-import PrivacyPolicy from "pages/Information/PrivacyPolicy";
-import CookiesPolicy from "pages/Information/CookiesPolicy";
-import AccountSettings from "pages/Information/AccountSettings";
-
-const rootElement = document.getElementById("root");
-if (!rootElement) throw new Error("Failed to find the root element");
-const root = ReactDOM.createRoot(rootElement);
-root.render(
-
-
-
-
-
-
-
-
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
+
+import "./localization/i18n";
+import About from "pages/Information/About";
+import Help from "pages/Information/Help";
+import ContactUs from "pages/Information/ContactUs";
+import TermsOfUse from "pages/Information/TermsOfUse";
+import PrivacyPolicy from "pages/Information/PrivacyPolicy";
+import CookiesPolicy from "pages/Information/CookiesPolicy";
+import AccountSettings from "pages/Information/AccountSettings";
+import { store } from "store/store";
+import { Provider } from "react-redux";
+import { SearchResultsPage } from "pages/SearchResultsPage";
+
+const rootElement = document.getElementById("root");
+if (!rootElement) throw new Error("Failed to find the root element");
+const root = ReactDOM.createRoot(rootElement);
+root.render(
+
+
+
+
+
+
+
+
+
+
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();
diff --git a/src/localization/controller/langugeViewModel.ts b/src/localization/controller/langugeViewModel.ts
old mode 100644
new mode 100755
index 7674ba3..748effa
--- a/src/localization/controller/langugeViewModel.ts
+++ b/src/localization/controller/langugeViewModel.ts
@@ -1,27 +1,27 @@
-import { Lang, Langs, languages, popularLangKeys } from "localization/i18n";
-import React from "react";
-import { useTranslation } from "react-i18next";
-
-const useLangugeViewModel = () => {
- const { i18n } = useTranslation();
- const switchLang = React.useCallback(
- (lang: string) => i18n.changeLanguage(lang),
- [i18n]
- );
-
- const popularLanguages = Object.keys(languages)
- .filter((k) => popularLangKeys.includes(k))
- .reduce((acc, k) => {
- acc.set(k, languages[k as Langs]);
- return acc;
- }, new Map());
-
- return {
- selected: i18n.resolvedLanguage as Langs,
- languages: languages,
- popularLanguages,
- switchLang,
- };
-};
-
-export { useLangugeViewModel };
+import { Lang, Langs, languages, popularLangKeys } from "localization/i18n";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+const useLangugeViewModel = () => {
+ const { i18n } = useTranslation();
+ const switchLang = React.useCallback(
+ (lang: string) => i18n.changeLanguage(lang),
+ [i18n]
+ );
+
+ const popularLanguages = Object.keys(languages)
+ .filter((k) => popularLangKeys.includes(k))
+ .reduce((acc, k) => {
+ acc.set(k, languages[k as Langs]);
+ return acc;
+ }, new Map());
+
+ return {
+ selected: i18n.resolvedLanguage as Langs,
+ languages: languages,
+ popularLanguages,
+ switchLang,
+ };
+};
+
+export { useLangugeViewModel };
diff --git a/src/localization/i18n.ts b/src/localization/i18n.ts
old mode 100644
new mode 100755
index 603bf62..c97eeb4
--- a/src/localization/i18n.ts
+++ b/src/localization/i18n.ts
@@ -1,35 +1,35 @@
-import i18n from "i18next";
-import { initReactI18next } from "react-i18next";
-import LanguageDetector from "i18next-browser-languagedetector";
-import Backend from "i18next-http-backend";
-
-export type Langs = "ru" | "en";
-
-export interface Lang {
- nativeName: string;
-}
-
-export const languages: Record = {
- ru: {
- nativeName: "Русский",
- },
- en: {
- nativeName: "English",
- },
-};
-export const popularLangKeys = ["ru", "en"];
-const fallbackLng: Langs = "en";
-
-i18n
- .use(Backend)
- .use(LanguageDetector)
- .use(initReactI18next)
- .init({
- debug: process.env.NODE_ENV === "development" ? true : false,
- fallbackLng,
- interpolation: {
- escapeValue: false,
- },
- });
-
-export default i18n;
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+import Backend from "i18next-http-backend";
+
+export type Langs = "ru" | "en";
+
+export interface Lang {
+ nativeName: string;
+}
+
+export const languages: Record = {
+ ru: {
+ nativeName: "Русский",
+ },
+ en: {
+ nativeName: "English",
+ },
+};
+export const popularLangKeys = ["ru", "en"];
+const fallbackLng: Langs = "en";
+
+i18n
+ .use(Backend)
+ .use(LanguageDetector)
+ .use(initReactI18next)
+ .init({
+ debug: process.env.NODE_ENV === "development" ? true : false,
+ fallbackLng,
+ interpolation: {
+ escapeValue: false,
+ },
+ });
+
+export default i18n;
diff --git a/src/localization/views/LanguageSelector.tsx b/src/localization/views/LanguageSelector.tsx
old mode 100644
new mode 100755
index e6b4dc0..afa45fb
--- a/src/localization/views/LanguageSelector.tsx
+++ b/src/localization/views/LanguageSelector.tsx
@@ -1,89 +1,89 @@
-/* -------------------------------------------------------------------------- */
-/* Libraries */
-/* -------------------------------------------------------------------------- */
-import React from "react";
-import { Langs } from "localization/i18n";
-import { useTranslation } from "react-i18next";
-/* -------------------------------------------------------------------------- */
-/* Hooks */
-/* -------------------------------------------------------------------------- */
-import { useLangugeViewModel } from "localization/controller/langugeViewModel";
-/* -------------------------------------------------------------------------- */
-/* Components */
-/* -------------------------------------------------------------------------- */
-import Combox from "components/controls/Combox";
-import Modal from "components/containers/modal/Modal";
-/* -------------------------------------------------------------------------- */
-/* Icons */
-/* -------------------------------------------------------------------------- */
-import classNames from "classnames";
-/* -------------------------------------------------------------------------- */
-/* Properties */
-/* -------------------------------------------------------------------------- */
-type Props = {
- isShown: boolean;
- onClose: VoidFunction;
-};
-/* -------------------------------------------------------------------------- */
-/* Language switcher */
-/* -------------------------------------------------------------------------- */
-function CheckIcon(props: React.SVGProps) {
- return (
-
-
- );
-}
-
-export default function LanguageSelector({ isShown, onClose }: Props) {
- const { t } = useTranslation();
- const { selected, languages, switchLang } = useLangugeViewModel();
-
- return (
-
- {t("selectLanguage")}
- languages[key as Langs].nativeName}
- keyMaper={(key) => key}
- setSelected={switchLang}
- filterRule={(query, item) => {
- if (query === "") {
- return true;
- }
- return languages[item as Langs].nativeName
- .toLowerCase()
- .replace(/\s+/g, "")
- .includes(query.toLowerCase().replace(/\s+/g, ""));
- }}
- selected={selected}
- itemBuilder={({ selected, active }, item) => {
- return (
-
-
- {languages[item as Langs].nativeName}
-
-
- );
- }}
- />
-
- );
-}
+/* -------------------------------------------------------------------------- */
+/* Libraries */
+/* -------------------------------------------------------------------------- */
+import React from "react";
+import { Langs } from "localization/i18n";
+import { useTranslation } from "react-i18next";
+/* -------------------------------------------------------------------------- */
+/* Hooks */
+/* -------------------------------------------------------------------------- */
+import { useLangugeViewModel } from "localization/controller/langugeViewModel";
+/* -------------------------------------------------------------------------- */
+/* Components */
+/* -------------------------------------------------------------------------- */
+import Combox from "components/controls/Combox";
+import Modal from "components/containers/modal/Modal";
+/* -------------------------------------------------------------------------- */
+/* Icons */
+/* -------------------------------------------------------------------------- */
+import classNames from "classnames";
+/* -------------------------------------------------------------------------- */
+/* Properties */
+/* -------------------------------------------------------------------------- */
+type Props = {
+ isShown: boolean;
+ onClose: VoidFunction;
+};
+/* -------------------------------------------------------------------------- */
+/* Language switcher */
+/* -------------------------------------------------------------------------- */
+function CheckIcon(props: React.SVGProps) {
+ return (
+
+
+ );
+}
+
+export default function LanguageSelector({ isShown, onClose }: Props) {
+ const { t } = useTranslation();
+ const { selected, languages, switchLang } = useLangugeViewModel();
+
+ return (
+
+ {t("selectLanguage")}
+ languages[key as Langs].nativeName}
+ keyMaper={(key) => key}
+ setSelected={switchLang}
+ filterRule={(query, item) => {
+ if (query === "") {
+ return true;
+ }
+ return languages[item as Langs].nativeName
+ .toLowerCase()
+ .replace(/\s+/g, "")
+ .includes(query.toLowerCase().replace(/\s+/g, ""));
+ }}
+ selected={selected}
+ itemBuilder={({ selected, active }, item) => {
+ return (
+
+
+ {languages[item as Langs].nativeName}
+
+
+ );
+ }}
+ />
+
+ );
+}
diff --git a/src/logo.svg b/src/logo.svg
old mode 100644
new mode 100755
diff --git a/src/pages/Account.tsx b/src/pages/Account.tsx
deleted file mode 100644
index 572cbec..0000000
--- a/src/pages/Account.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-/* -------------------------------------------------------------------------- */
-/* Libraries */
-/* -------------------------------------------------------------------------- */
-import React, { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-/* -------------------------------------------------------------------------- */
-/* Hooks */
-/* -------------------------------------------------------------------------- */
-import { useUserStore } from "user/data/userSlice";
-import { useUserViewModel } from "user/controller/userViewModel";
-import { useLangugeViewModel } from "localization/controller/langugeViewModel";
-/* -------------------------------------------------------------------------- */
-/* Components */
-/* -------------------------------------------------------------------------- */
-import Area from "components/containers/area/Area";
-import IconedAreaCaption from "components/containers/area/IconedAreaCaption";
-import Avatar from "components/containers/Avatar";
-import AreaCaption from "components/containers/area/AreaCaption";
-import TextAction from "components/controls/TextAction";
-import AreaValue from "components/containers/area/AreaValue";
-import AreaDescription from "components/containers/area/AreaDescription";
-import PersonalInfomrationEditor from "user/views/PersonalInfomrationEditor";
-import LanguageSelector from "localization/views/LanguageSelector";
-/* -------------------------------------------------------------------------- */
-/* Icons */
-/* -------------------------------------------------------------------------- */
-import { ReactComponent as SVGEnvelopeIcon } from "assets/svg/envelope.svg";
-import { ReactComponent as SVGGlobeIcon } from "assets/svg/globe.svg";
-import { ReactComponent as SVGUsersIcon } from "assets/svg/users.svg";
-/* -------------------------------------------------------------------------- */
-/* Account information management page */
-/* -------------------------------------------------------------------------- */
-/**
- * Account information management page
- * @return {JSX.Element}
- */
-const AccountSettings = (): JSX.Element => {
- const store = useUserStore();
-
- const [personalInfoModalShown, setPersonalInfoModalShown] = useState(false);
- const [languageSelecting, setLanguageSelecting] = useState(false);
-
- const { user, getUser } = useUserViewModel(store);
- const { languages, selected } = useLangugeViewModel();
-
- useEffect(() => {
- getUser();
- }, [getUser]);
-
- const { t } = useTranslation();
-
- return (
-
-
-
-
-
- {user?.firstname}
-
-
- {user?.username}
-
-
- setPersonalInfoModalShown(true)}>
- {t("edit")}
-
-
-
-
-
}
- caption={t("account.mail")}
- />
-
{user?.email}
-
-
-
}
- caption={t("language")}
- />
-
{languages[selected].nativeName.toLowerCase()}
-
- setLanguageSelecting(true)}>
- {t("edit")}
-
-
-
-
-
}
- caption={t("account.connectedAccounts", { count: 0 })}
- />
-
nothing)
-
- {t("edit")}
-
-
-
-
setLanguageSelecting(false)}
- />
- setPersonalInfoModalShown(false)}
- />
-
-
-
You have to be authorized
-
to access techpal dashboard
-
- );
-}
diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
deleted file mode 100644
index fd91cc7..0000000
--- a/src/pages/Dashboard.tsx
+++ /dev/null
@@ -1,176 +0,0 @@
-/* -------------------------------------------------------------------------- */
-/* Libraries */
-/* -------------------------------------------------------------------------- */
-import React from "react";
-/* -------------------------------------------------------------------------- */
-/* Misc */
-/* -------------------------------------------------------------------------- */
-/* -------------------------------------------------------------------------- */
-/* Components */
-/* -------------------------------------------------------------------------- */
-import Card from "components/containers/Card";
-import TextAction from "components/controls/TextAction";
-import HexagonOutlined from "components/HexagonOutlined";
-import AvailabilityIndicator from "components/indicators/AvailabilityIndicator";
-/* -------------------------------------------------------------------------- */
-/* Icons */
-/* -------------------------------------------------------------------------- */
-/* -------------------------------------------------------------------------- */
-/* Dashboard page */
-/* -------------------------------------------------------------------------- */
-
-import { useServicesStore } from "services/data/servicesSlice";
-import { useServicesViewModel } from "services/controller/servicesViewModel";
-import CircleLoader from "components/CircleLoader";
-import _ from "lodash";
-import { useUIStore } from "ui/data/uiSlice";
-
-import { useNavigate } from "react-router-dom";
-import { useSubscriptionsStore } from "subscriptions/data/subscriptionsSlice";
-import { useSubscriptionsViewModel } from "subscriptions/controller/subscriptionsViewModel";
-
-export default function Dashboard() {
- const navigate = useNavigate();
- /* --------------------------------- Stores --------------------------------- */
- const servicesStore = useServicesStore();
- const uiStore = useUIStore();
- const subscriptionsStore = useSubscriptionsStore();
- /* ------------------------------- View models ------------------------------ */
- const { services, isLoading: servicesLoading } = useServicesViewModel({
- ...servicesStore,
- notify: uiStore.notify,
- });
- const {
- forkTo,
- isLoading: subscriptionsLoading,
- subscriptions,
- hasSubscription,
- } = useSubscriptionsViewModel(subscriptionsStore, uiStore);
- /* ---------------------------------- Hooks --------------------------------- */
- const Wrapper: React.FC, "">> = React.useMemo(
- () => (props) =>
- (
-
- {props.children}
-
-
-
-
- navigate("/services")}
- className="font-semibold inline-flex items-center space-x-2 hover:space-x-3"
- >
- connect
-
-
-
-
-
- {_.map(subscriptions, (index) => (
-
-
-
-
-
-
- Loading..
-
-
- unknown
-
-
-
-
- open
-
-
-
- ))}
-
- );
- }
- return (
-
- {services
- ?.filter((service) => {
- return hasSubscription(service.id);
- })
- .map((service) => (
-
-
-
-
- {service.shortName}
-
-
-
-
- {service.name}
-
-
- active
-
-
-
- {service.description}
-
-
- {
- e.preventDefault();
- forkTo(service.id, service.href);
- }}
- className="font-semibold inline-flex items-center space-x-2 hover:space-x-3"
- >
- open
-
-
-
- ))}
-
- );
-}
diff --git a/src/pages/Gitpal.tsx b/src/pages/Gitpal.tsx
deleted file mode 100644
index 1625c8f..0000000
--- a/src/pages/Gitpal.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import FullWideColumn from "components/layouts/FullWideColumn";
-import React from "react";
-
-export default function Gitpal() {
- return (
-
-
-
-
- );
-}
diff --git a/src/pages/Information/About.tsx b/src/pages/Information/About.tsx
old mode 100644
new mode 100755
index ce57d7e..2f732ce
--- a/src/pages/Information/About.tsx
+++ b/src/pages/Information/About.tsx
@@ -1,15 +1,15 @@
-import BaseLayout from "components/BaseLayout";
-import { Footer } from "components/parts/Footer";
-import Header from "components/parts/Header";
-import Typography from "components/typography/Typography";
-import React from "react";
-
-type Props = {};
-
-export default function About({}: Props) {
- return (
-
- About page
-
- );
-}
+import BaseLayout from "components/BaseLayout";
+import { Footer } from "components/parts/Footer";
+import Header from "components/parts/Header";
+import Typography from "components/typography/Typography";
+import React from "react";
+
+type Props = {};
+
+export default function About({}: Props) {
+ return (
+
+ About page
+
+ );
+}
diff --git a/src/pages/Information/AccountSettings.tsx b/src/pages/Information/AccountSettings.tsx
old mode 100644
new mode 100755
index 983334f..096b2dc
--- a/src/pages/Information/AccountSettings.tsx
+++ b/src/pages/Information/AccountSettings.tsx
@@ -1,15 +1,15 @@
-import BaseLayout from "components/BaseLayout";
-import { Footer } from "components/parts/Footer";
-import Header from "components/parts/Header";
-import Typography from "components/typography/Typography";
-import React from "react";
-
-type Props = {};
-
-export default function AccountSettings({}: Props) {
- return (
-
- Accont Setting page
-
- );
-}
+import BaseLayout from "components/BaseLayout";
+import { Footer } from "components/parts/Footer";
+import Header from "components/parts/Header";
+import Typography from "components/typography/Typography";
+import React from "react";
+
+type Props = {};
+
+export default function AccountSettings({}: Props) {
+ return (
+
+ Accont Setting page
+
+ );
+}
diff --git a/src/pages/Information/ContactUs.tsx b/src/pages/Information/ContactUs.tsx
old mode 100644
new mode 100755
index 271cfa2..cb3c75e
--- a/src/pages/Information/ContactUs.tsx
+++ b/src/pages/Information/ContactUs.tsx
@@ -1,15 +1,15 @@
-import BaseLayout from "components/BaseLayout";
-import { Footer } from "components/parts/Footer";
-import Header from "components/parts/Header";
-import Typography from "components/typography/Typography";
-import React from "react";
-
-type Props = {};
-
-export default function ContactUs({}: Props) {
- return (
-
- Contact us page
-
- );
-}
+import BaseLayout from "components/BaseLayout";
+import { Footer } from "components/parts/Footer";
+import Header from "components/parts/Header";
+import Typography from "components/typography/Typography";
+import React from "react";
+
+type Props = {};
+
+export default function ContactUs({}: Props) {
+ return (
+
+ Contact us page
+
+ );
+}
diff --git a/src/pages/Information/CookiesPolicy.tsx b/src/pages/Information/CookiesPolicy.tsx
old mode 100644
new mode 100755
index 42c0980..f594591
--- a/src/pages/Information/CookiesPolicy.tsx
+++ b/src/pages/Information/CookiesPolicy.tsx
@@ -1,15 +1,15 @@
-import BaseLayout from "components/BaseLayout";
-import { Footer } from "components/parts/Footer";
-import Header from "components/parts/Header";
-import Typography from "components/typography/Typography";
-import React from "react";
-
-type Props = {};
-
-export default function CookiesPolicy({}: Props) {
- return (
-
- Privacy Cookies page
-
- );
-}
+import BaseLayout from "components/BaseLayout";
+import { Footer } from "components/parts/Footer";
+import Header from "components/parts/Header";
+import Typography from "components/typography/Typography";
+import React from "react";
+
+type Props = {};
+
+export default function CookiesPolicy({}: Props) {
+ return (
+
+ Privacy Cookies page
+
+ );
+}
diff --git a/src/pages/Information/Help.tsx b/src/pages/Information/Help.tsx
old mode 100644
new mode 100755
index 996b488..5974116
--- a/src/pages/Information/Help.tsx
+++ b/src/pages/Information/Help.tsx
@@ -1,15 +1,15 @@
-import BaseLayout from "components/BaseLayout";
-import { Footer } from "components/parts/Footer";
-import Header from "components/parts/Header";
-import Typography from "components/typography/Typography";
-import React from "react";
-
-type Props = {};
-
-export default function Help({}: Props) {
- return (
-
- Help page
-
- );
-}
+import BaseLayout from "components/BaseLayout";
+import { Footer } from "components/parts/Footer";
+import Header from "components/parts/Header";
+import Typography from "components/typography/Typography";
+import React from "react";
+
+type Props = {};
+
+export default function Help({}: Props) {
+ return (
+
+ Help page
+
+ );
+}
diff --git a/src/pages/Information/PrivacyPolicy.tsx b/src/pages/Information/PrivacyPolicy.tsx
old mode 100644
new mode 100755
index fa35eff..55627af
--- a/src/pages/Information/PrivacyPolicy.tsx
+++ b/src/pages/Information/PrivacyPolicy.tsx
@@ -1,15 +1,15 @@
-import BaseLayout from "components/BaseLayout";
-import { Footer } from "components/parts/Footer";
-import Header from "components/parts/Header";
-import Typography from "components/typography/Typography";
-import React from "react";
-
-type Props = {};
-
-export default function PrivacyPolicy({}: Props) {
- return (
-
- Privacy Policy page
-
- );
-}
+import BaseLayout from "components/BaseLayout";
+import { Footer } from "components/parts/Footer";
+import Header from "components/parts/Header";
+import Typography from "components/typography/Typography";
+import React from "react";
+
+type Props = {};
+
+export default function PrivacyPolicy({}: Props) {
+ return (
+
+ Privacy Policy page
+
+ );
+}
diff --git a/src/pages/Information/TermsOfUse.tsx b/src/pages/Information/TermsOfUse.tsx
old mode 100644
new mode 100755
index 6700455..dad0adf
--- a/src/pages/Information/TermsOfUse.tsx
+++ b/src/pages/Information/TermsOfUse.tsx
@@ -1,15 +1,15 @@
-import BaseLayout from "components/BaseLayout";
-import { Footer } from "components/parts/Footer";
-import Header from "components/parts/Header";
-import Typography from "components/typography/Typography";
-import React from "react";
-
-type Props = {};
-
-export default function TermsOfUse({}: Props) {
- return (
-
- Terms of use page
-
- );
-}
+import BaseLayout from "components/BaseLayout";
+import { Footer } from "components/parts/Footer";
+import Header from "components/parts/Header";
+import Typography from "components/typography/Typography";
+import React from "react";
+
+type Props = {};
+
+export default function TermsOfUse({}: Props) {
+ return (
+
+ Terms of use page
+
+ );
+}
diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx
new file mode 100755
index 0000000..83b5614
--- /dev/null
+++ b/src/pages/MainPage.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import BaseLayout from "components/BaseLayout";
+import FeaturedArticlesCards from "components/MainPage/sections/FeaturedArticlesCards";
+import FeaturedAuthorsCards from "components/MainPage/sections/FeaturedAuthorsCards";
+import { FeaturedArticlesCategories } from "components/MainPage/sections/FeaturedArticlesCategories";
+import { BottomBarAcceptCookies } from "components/containers/modal/BottomBarAcceptCookies";
+import MainSection from "components/MainPage/sections/MainSection";
+type Props = {
+ className?: string;
+};
+
+
+
+export default function MainPage({ className }: Props) {
+ return (
+
+
+ {/*
+
+ );
+}
diff --git a/src/pages/NoMatch.tsx b/src/pages/NoMatch.tsx
old mode 100644
new mode 100755
index 895268d..614e47b
--- a/src/pages/NoMatch.tsx
+++ b/src/pages/NoMatch.tsx
@@ -1,39 +1,39 @@
-/* -------------------------------------------------------------------------- */
-/* Libraries */
-/* -------------------------------------------------------------------------- */
-import React from "react";
-/* -------------------------------------------------------------------------- */
-/* Hooks */
-/* -------------------------------------------------------------------------- */
-import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
-/* -------------------------------------------------------------------------- */
-/* Components */
-/* -------------------------------------------------------------------------- */
-/* -------------------------------------------------------------------------- */
-/* Misc */
-/* -------------------------------------------------------------------------- */
-/* -------------------------------------------------------------------------- */
-/* Icons */
-/* -------------------------------------------------------------------------- */
-/* -------------------------------------------------------------------------- */
-/* Account information management page */
-/* -------------------------------------------------------------------------- */
-/**
- * Account information management page
- * @return {JSX.Element}
- */
-const NoMatch = (): JSX.Element => {
- const { t } = useTranslation();
- const navigate = useNavigate();
- return (
-
-
404
-
Page Not Found
-
{t('serv.noSuchPath')}
-
-
+
404
+
Page Not Found
+
{t('serv.noSuchPath')}
+
+
+
+
+ left bar
+
+
+
+
+ right bar
+
+
+
+ );
+};
diff --git a/src/pages/Security.tsx b/src/pages/Security.tsx
deleted file mode 100644
index b48f9ab..0000000
--- a/src/pages/Security.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-/* -------------------------------------------------------------------------- */
-/* Libraries */
-/* -------------------------------------------------------------------------- */
-import React from "react";
-import { useTranslation } from "react-i18next";
-/* -------------------------------------------------------------------------- */
-/* Hooks */
-/* -------------------------------------------------------------------------- */
-import { useUserStore } from "user/data/userSlice";
-import { useUserViewModel } from "user/controller/userViewModel";
-/* -------------------------------------------------------------------------- */
-/* Components */
-/* -------------------------------------------------------------------------- */
-import Area from "components/containers/area/Area";
-import IconedAreaCaption from "components/containers/area/IconedAreaCaption";
-import ThinSingleColumn from "components/layouts/ThinSingleColumn";
-import AreaDescription from "components/containers/area/AreaDescription";
-import ControlLabel from "components/controls/ControlLabel";
-import Switch from "components/controls/Switch";
-import TextAction from 'components/controls/TextAction'
-/* -------------------------------------------------------------------------- */
-/* Icons */
-/* -------------------------------------------------------------------------- */
-import { ReactComponent as SVGLockIcon } from "assets/svg/lock.svg";
-import { ReactComponent as SVGFingerprintIcon } from "assets/svg/fingerprint.svg";
-
-const Security = () => {
- const store = useUserStore();
-
- const {t} = useTranslation();
-
- const {
- getUser,
- twoFactorEnabled,
- toggleTwoFactorAuthenitcation,
- } = useUserViewModel(store);
-
- React.useEffect(() => {
- getUser();
- }, [getUser]);
-
- return (
-
-
- {t('edit')}
-
-
- Last edit month ago
-
-
-
-
- toggleTwoFactorAuthenitcation()}
- alterText="two factor authentication changing"
- />
-
-
- {t('security.password.description')}
-
-
-
- {t('viewHistory')}
-
-
- {t('logOutEverywhere')}
-
-
-
- );
-}
-
-export default Security;
\ No newline at end of file
diff --git a/src/pages/Services.tsx b/src/pages/Services.tsx
deleted file mode 100644
index 760d45e..0000000
--- a/src/pages/Services.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-/* -------------------------------------------------------------------------- */
-/* Libraries */
-/* -------------------------------------------------------------------------- */
-import React, { useEffect, useState } from "react";
-/* -------------------------------------------------------------------------- */
-/* Components */
-/* -------------------------------------------------------------------------- */
-import ServiceComponent from "components/containers/ServiceComponent";
-import Switch from "components/controls/Switch";
-import TextAction from "components/controls/TextAction";
-import ThinSingleColumn from "components/layouts/ThinSingleColumn";
-import { useServicesStore } from "services/data/servicesSlice";
-import { useServicesViewModel } from "services/controller/servicesViewModel";
-import _ from "lodash";
-import { useUIStore } from "ui/data/uiSlice";
-import { useSubscriptionsStore } from "subscriptions/data/subscriptionsSlice";
-import { useSubscriptionsViewModel } from "subscriptions/controller/subscriptionsViewModel";
-import { Service } from "services/domain/serviceEntity";
-import PasswordConfirmation from "user/views/PasswordConfirmation";
-import CircleLoader from "components/CircleLoader";
-import Failure from "core/failure";
-/* -------------------------------------------------------------------------- */
-/* Component */
-/* -------------------------------------------------------------------------- */
-const Services = () => {
- const [password, setPassword] = useState();
- const [confirmShown, toggleConfirm] = useState(false);
- const [selectedService, setSelectedService] = useState<
- Service["id"] | null
- >();
- /* ---------------------------------- Store --------------------------------- */
- const servicesStore = useServicesStore();
- const uiStore = useUIStore();
- const subscriptionsStore = useSubscriptionsStore();
- const { services, isLoading, loadServices } = useServicesViewModel({
- ...servicesStore,
- notify: uiStore.notify,
- });
- const { hasSubscription, subscribe, processingSubscription } =
- useSubscriptionsViewModel(subscriptionsStore, uiStore);
- /* ---------------------------------- Hooks --------------------------------- */
- useEffect(() => {
- loadServices();
- }, [loadServices]);
-
- useEffect(() => {
- if(!selectedService || password) return;
- toggleConfirm(true);
- }, [selectedService, password]);
-
- useEffect(() => {
- if (!selectedService) {
- return;
- }
- if (hasSubscription(selectedService)) {
- return;
- }
- if (!password) {
- return;
- }
- if (password !== null) {
- subscribe(selectedService, password!)?.catch((failure) => {
- if(Failure.isFailure(failure) && failure.status === 403) {
- setPassword(null);
- }
- });
- setSelectedService(null);
- }
- }, [selectedService, hasSubscription, subscribe, password]);
-
- const handleSubscription = (serviceId: Service["id"]) => {
- setSelectedService(serviceId);
- };
- /* --------------------------------- Markup --------------------------------- */
- return (
-
-
- {!services?.length || isLoading
- ? _.times(3, (number) => (
-
-
-
-
Techpal
-
about service
-
-
- null} />
-
-
- ))
- : services!.map((item, index) => {
- return (
-
-
-
-
{item.name}
-
about service
-
-
- {processingSubscription(item.id) ? (
-
-
- ) : (
-
handleSubscription(item.id)}
- />
- )}
-
-
- );
- })}
-
setPassword(p)}
- isShown={true}
- onClose={() => toggleConfirm(false)}
- />
- )}
-
- );
-};
-
-export default Services;
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
old mode 100644
new mode 100755
index 6431bc5..ece12df
--- a/src/react-app-env.d.ts
+++ b/src/react-app-env.d.ts
@@ -1 +1 @@
-///
-
- ),
- },
- {
- path: "/personal-information",
- title: ({ translation }) => translation("sidemenu.account"),
- icon: SVGUserIcon,
- name: "account",
- Component: (props) => (
-
-
- ),
- },
- {
- path: "/security",
- name: "account",
- title: ({ translation }) => translation("sidemenu.security"),
- icon: SVGShieldIcon,
- Component: (props) => (
-
-
- ),
- },
- {
- path: "/services/*",
- name: "account",
- title: ({ translation }) => translation("sidemenu.services"),
- icon: SVGServicesIcon,
- Component: (props) => (
-
-
- ),
- },
- { path: "/auth", name: 'auth', element:
-
- ),
- },
-];
-
-const useRoutesDefinition = function (): RoutePathDefinition[] {
- return routes;
-};
-
-export { useRoutesDefinition };
-export default routes;
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
deleted file mode 100644
index e1bc217..0000000
--- a/src/routes/index.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-
-import routes from "./definition";
-import {RoutePathDefinition, WithRouteProps} from "./types";
-
-export type {RoutePathDefinition, WithRouteProps};
-export default routes;
diff --git a/src/routes/mapDefinitionToRoute.tsx b/src/routes/mapDefinitionToRoute.tsx
deleted file mode 100644
index 45ec230..0000000
--- a/src/routes/mapDefinitionToRoute.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { RouteObject } from "react-router-dom";
-import { RoutePathDefinition } from "./types";
-
-export function mapDefinitionToRoute(props: RoutePathDefinition): RouteObject {
- const { Component, element } = props;
- if(typeof element === "undefined" && typeof Component === "undefined") {
- throw Error("Either `element` or `Component` ")
- }
- return props.element
- ? props
- : Component! && {
- ...props,
- children:
- props.children &&
- props.children.map((props, index) => mapDefinitionToRoute(props)),
- element: = {
- definition: RoutePathDefinition;
- match: PathMatch;
- locationPathname: string;
- translation: (key: string) => string,
-};
-
-export type ActiveRoutePathTitleCallback = (params: ActiveRoutePathTitleCallbackParams) => string;
-
-export interface WithRouteProps {
- name: string;
- pageName?: string;
- path: string;
- activePath: ActiveRoutePath[];
-}
-
-
-export interface RoutePathDefinition<
- K = Pick,
- T extends K = {} & K
-> extends RouteObject {
- name: string;
- title?: string | ActiveRoutePathTitleCallback;
- nav?: boolean;
- children?: RoutePathDefinition[];
- path: string;
- icon?: React.FC>,
- Component?: React.FC | React.ClassicComponentClass;
-}
-
-export type ActiveRoutePath = {
- title?: string;
- match: PathMatch
- definition: RoutePathDefinition;
- siblings: ActiveRoutePath[];
-};
\ No newline at end of file
diff --git a/src/routes/withRoute.tsx b/src/routes/withRoute.tsx
deleted file mode 100644
index 8276bca..0000000
--- a/src/routes/withRoute.tsx
+++ /dev/null
@@ -1,246 +0,0 @@
-import React from "react";
-/* -------------------------------------------------------------------------- */
-/* Libraries */
-/* -------------------------------------------------------------------------- */
-import { useTranslation } from "react-i18next";
-import { matchPath, PathMatch, useLocation } from "react-router-dom";
-import { useRoutesDefinition } from "./definition";
-/* -------------------------------------------------------------------------- */
-/* Types */
-/* -------------------------------------------------------------------------- */
-import {
- ActiveRoutePath,
- ActiveRoutePathTitleCallbackParams,
- RoutePathDefinition,
- WithRouteProps,
-} from "./types";
-/* -------------------------------------------------------------------------- */
-/* Misc */
-/* -------------------------------------------------------------------------- */
-
-/* -------------------------------------------------------------------------- */
-/* Helpers */
-/* -------------------------------------------------------------------------- */
-function joinPaths(paths: string[]): string {
- return paths.join("/").replace(/\/\/+/g, "/");
-}
-
-function concatPaths(parent: string, current: string) {
- const jointPaths = joinPaths([parent, current]);
- return jointPaths;
-}
-
-function addActiveRoutePathIfPossible(
- activeRoutePaths: ActiveRoutePath[],
- activePath: ActiveRoutePath
-) {
- if (canBeAddedToActiveRoutes(activeRoutePaths, activePath.match)) {
- activeRoutePaths.push(activePath);
- }
-}
-
-function isResolvedAsActive(
- toPathname: string,
- locationPathname: string,
- definition: RoutePathDefinition,
-) {
- return (
- isPathActiveForLocation(toPathname, locationPathname) &&
- isNotCatchAll(definition.path || "")
- );
-}
-
-function canBeAddedToActiveRoutes(
- activeRoutePaths: ActiveRoutePath[],
- match: PathMatch
-) {
- return (
- isNotSameAsPreviousMatch(activeRoutePaths, match) &&
- isMoreSpecificThanPreviousMatch(activeRoutePaths, match.pathname)
- );
-}
-
-function getPreviousMatch(
- previousMatches: ActiveRoutePath[]
-): ActiveRoutePath | undefined {
- return previousMatches[previousMatches.length - 1];
-}
-
-function isNotSameAsPreviousMatch(
- previousMatches: ActiveRoutePath[],
- match: PathMatch
-): boolean {
- const previousMatchedPathname =
- getPreviousMatch(previousMatches)?.match.pattern ?? "";
- return previousMatchedPathname !== match.pattern;
-}
-
-function isMoreSpecificThanPreviousMatch(
- previousMatches: ActiveRoutePath[],
- toPathname: string
-): boolean {
- const previousMatchedPathname =
- getPreviousMatch(previousMatches)?.match.pathname ?? "";
- return toPathname.length > previousMatchedPathname.length;
-}
-
-function isNotCatchAll(path: string) {
- return path !== "*";
-}
-
-function isPathActiveForLocation(
- pathName: string,
- locationPathname: string,
-) {
- return (
- locationPathname === pathName ||
- (locationPathname.startsWith(pathName) &&
- locationPathname.charAt(pathName.length) === "/")
- );
-}
-
-function matchPatternInPath(
- pathPattern: string,
- locationPathname: string,
- requireExactMatch: boolean = false
-): PathMatch | null {
- return matchPath(
- { path: pathPattern, end: requireExactMatch },
- locationPathname
- );
-}
-
-export function mapActivePathBranch(
- siblings: RoutePathDefinition[],
- locationPathname: string,
- translation: ActiveRoutePathTitleCallbackParams["translation"],
- parentPath: string = ""
-) {
- if (siblings.length === 0) {
- return [];
- }
- const activeBranch: ActiveRoutePath[] = [];
-
- siblings.forEach((definition) => {
- const pathPatternWithParent = concatPaths(parentPath, definition.path);
-
- if (pathPatternWithParent === "/") return;
-
- const match = matchPatternInPath(pathPatternWithParent, locationPathname);
- if (!match) return;
- const activeRoutePath: ActiveRoutePath = mapRouteDefinitionToActivePath(
- definition,
- [],
- match,
- locationPathname,
- parentPath,
- translation
- );
- addActiveRoutePathIfPossible(activeBranch, activeRoutePath);
- });
-
- return activeBranch;
-}
-
-export function mapRouteDefinitionToActivePath(
- definition: RoutePathDefinition,
- siblings: RoutePathDefinition[],
- match: PathMatch,
- locationPathname: string,
- parentPath: string = "",
- transition: ActiveRoutePathTitleCallbackParams["translation"]
-): ActiveRoutePath {
- return {
- definition: definition,
- title:
- typeof definition.title === "function"
- ? definition.title({
- definition,
- match,
- locationPathname: locationPathname,
- translation: transition,
- })
- : definition.title,
- match: match,
- siblings: mapActivePathBranch(
- siblings,
- locationPathname,
- transition,
- parentPath
- ),
- };
-}
-
-export function mapDefinitionToActivePath(
- definitions: RoutePathDefinition[],
- locationPathname: string,
- translation: ActiveRoutePathTitleCallbackParams["translation"],
- parentPath: string = ""
-): ActiveRoutePath[] {
- const activeRoutePaths: ActiveRoutePath[] = [];
-
- definitions.forEach((definition, index) => {
- const pathPatternWithParent = concatPaths(parentPath, definition.path);
- const match = matchPatternInPath(pathPatternWithParent, locationPathname);
- if (!match) {
- return;
- }
-
- if (isResolvedAsActive(match.pathname, locationPathname, definition)) {
- const activeRoutePath: ActiveRoutePath = mapRouteDefinitionToActivePath(
- definition,
- definitions,
- match,
- locationPathname,
- parentPath,
- translation
- );
- addActiveRoutePathIfPossible(activeRoutePaths, activeRoutePath);
-
- if (definition.children) {
- const nestedMatches = mapDefinitionToActivePath(
- definition.children,
- locationPathname,
- translation,
- pathPatternWithParent
- );
- nestedMatches.forEach((activePath) => {
- addActiveRoutePathIfPossible(activeRoutePaths, activePath);
- });
- }
- }
- });
- return activeRoutePaths;
-}
-
-/* -------------------------------------------------------------------------- */
-/* HOC with route params */
-/* -------------------------------------------------------------------------- */
-const withRouteParams = (
- Component: React.ComponentType,
- componentName = Component.displayName ?? Component.name
-): {
- (props: Omit>): JSX.Element;
- displayName: string;
-} => {
- function WithRouteParams(
- props: Omit>
- ) {
- const { t } = useTranslation();
- const withRouteProps: WithRouteProps = {
- activePath: mapDefinitionToActivePath(
- useRoutesDefinition(),
- useLocation().pathname,
- t
- ),
- path: props.path,
- name: props.name,
- };
- return {
+ try {
+ const response = await integratorApiClient.get(
+ searchEndpoint + `?query=` + request + `&limit=10&offset=0`
+ // "https://run.mocky.io/v3/ea705665-2479-4039-8b81-412e011fc145"
+ );
+ const dto = response.data;
+ return create({ data: dto.data, meta: dto.meta });
+ } catch (reason) {
+ if (axios.isAxiosError(reason)) {
+ throw Failure.fromReason(reason, "failures.services.load");
+ }
+ throw reason;
+ }
+}
+export { search };
diff --git a/src/searchResults/data/searchStoreImplementation.ts b/src/searchResults/data/searchStoreImplementation.ts
new file mode 100755
index 0000000..d43a468
--- /dev/null
+++ b/src/searchResults/data/searchStoreImplementation.ts
@@ -0,0 +1,35 @@
+import React from "react";
+import { SearchResultsStore } from "searchResults/domain/searchStore";
+import { RootState, useAppDispatch, useAppSelector } from "store";
+import { changeSearchRequestAction, SearchAction } from "./actions/searchActions";
+import { SearchStoreState } from "./searchReducer";
+
+const searchSelector = (state: RootState): SearchStoreState =>
+ state.searchResults;
+
+const useSearchStoreImplementation = (): SearchResultsStore => {
+ const { searchResults, failure, isFailed, isLoading, searchRequest} =
+ useAppSelector(searchSelector);
+
+ const dispatch = useAppDispatch();
+
+ const search = React.useCallback(
+ (searchRequest: string) => SearchAction(searchRequest)(dispatch),
+ [dispatch]
+ );
+ const changeSearchRequest = React.useCallback(
+ (searchRequest: string) => changeSearchRequestAction(searchRequest)(dispatch), [dispatch]
+ )
+
+ return {
+ isLoading,
+ isFailed,
+ searchResults,
+ failure,
+ searchRequest,
+ changeSearchRequest: changeSearchRequest,
+ search: search,
+ };
+};
+
+export { useSearchStoreImplementation };
diff --git a/src/searchResults/domain/searchResultsEntity.ts b/src/searchResults/domain/searchResultsEntity.ts
new file mode 100755
index 0000000..516aad8
--- /dev/null
+++ b/src/searchResults/domain/searchResultsEntity.ts
@@ -0,0 +1,10 @@
+import { Article } from "article/domain/ArticleEntity";
+
+export interface SearchResults {
+ data: Article[];
+ meta:SearchResultsMeta ;
+}
+
+export interface SearchResultsMeta {
+ total: string;
+}
\ No newline at end of file
diff --git a/src/searchResults/domain/searchResultsModel.ts b/src/searchResults/domain/searchResultsModel.ts
new file mode 100755
index 0000000..bded5cd
--- /dev/null
+++ b/src/searchResults/domain/searchResultsModel.ts
@@ -0,0 +1,13 @@
+import { SearchResults } from "./searchResultsEntity";
+
+export type CreateSearchResultParams = {
+ data: SearchResults["data"];
+ meta: SearchResults["meta"]
+};
+
+const create = (params: CreateSearchResultParams) => ({
+ data: params.data,
+ meta: params.meta
+});
+
+export { create };
diff --git a/src/searchResults/domain/searchStore.ts b/src/searchResults/domain/searchStore.ts
new file mode 100755
index 0000000..e9588ae
--- /dev/null
+++ b/src/searchResults/domain/searchStore.ts
@@ -0,0 +1,14 @@
+import { SearchResults } from "./searchResultsEntity";
+
+interface SearchResultsStore {
+ searchResults: SearchResults | undefined;
+ isLoading: boolean;
+ isFailed: boolean;
+ failure: undefined;
+ searchRequest: string;
+
+ /* --------------------------------- Actions -------------------------------- */
+ search(request: string): Promise;
+ changeSearchRequest(searchRequest: string): void;
+}
+export type { SearchResultsStore };
diff --git a/src/searchResults/useCases/changeSearchRequestUseCase.ts b/src/searchResults/useCases/changeSearchRequestUseCase.ts
new file mode 100755
index 0000000..30d6121
--- /dev/null
+++ b/src/searchResults/useCases/changeSearchRequestUseCase.ts
@@ -0,0 +1,15 @@
+import { debounce } from "lodash";
+import { SearchResultsStore } from "searchResults/domain/searchStore";
+
+type ChangeRequestStore = Pick<
+ SearchResultsStore,
+ "changeSearchRequest" | "searchRequest"
+>;
+
+const debouncedTask = debounce((task) => Promise.resolve(task()), 200);
+
+const changeSearchRequestUseCase = (store: ChangeRequestStore) => {
+ return debouncedTask(() => store.changeSearchRequest(store.searchRequest));
+};
+
+export { changeSearchRequestUseCase };
diff --git a/src/searchResults/useCases/searchUseCase.ts b/src/searchResults/useCases/searchUseCase.ts
new file mode 100755
index 0000000..0953102
--- /dev/null
+++ b/src/searchResults/useCases/searchUseCase.ts
@@ -0,0 +1,17 @@
+import { debounce } from "lodash";
+import type { SearchResultsStore } from "searchResults/domain/searchStore";
+import { SearchResults } from "searchResults/domain/searchResultsEntity";
+
+type GetSearchResultsStore = Pick<
+ SearchResultsStore,
+ "searchResults" | "search" | "searchRequest"
+>;
+const debouncedTask = debounce((task) => Promise.resolve(task()), 200);
+
+const searchUseCase = (
+ store: GetSearchResultsStore
+): Promise | undefined => {
+ return debouncedTask(() => store.search(store.searchRequest));
+};
+
+export { searchUseCase };
diff --git a/src/services/controller/servicesViewModel.ts b/src/services/controller/servicesViewModel.ts
deleted file mode 100644
index dbdcff0..0000000
--- a/src/services/controller/servicesViewModel.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from "react";
-import { ServicesStore } from "services/domain/servicesStore";
-import { loadServicesUseCase } from "services/useCases/loadServicesUseCase";
-import { UIStore } from "ui/domain/uiStore";
-
-function useServicesViewModel(store: ServicesStore & Pick) {
- const loadServices = React.useCallback(
- function () {
- loadServicesUseCase({
- loadServices: store.loadServices,
- });
- },
- [store.loadServices]
- );
-
- React.useEffect(() => {
- loadServices();
- }, [loadServices]);
-
- return {
- services: store.services,
- failure: store.failure,
- isLoading: store.isLoading,
- isFailed: store.isFailed,
- loadServices,
- };
-}
-
-export { useServicesViewModel };
diff --git a/src/services/data/dto/serviceDTO.ts b/src/services/data/dto/serviceDTO.ts
deleted file mode 100644
index c9aa35f..0000000
--- a/src/services/data/dto/serviceDTO.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { StyleVariantDTO } from "./variantDTO";
-
-export type ServiceDTO = {
- _id: string,
- title: string;
- short_name: string;
- category: string;
- address: string;
- color?: StyleVariantDTO;
-};
\ No newline at end of file
diff --git a/src/services/data/dto/variantDTO.ts b/src/services/data/dto/variantDTO.ts
deleted file mode 100644
index 19ffda0..0000000
--- a/src/services/data/dto/variantDTO.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { StyleColorVariants } from "core/_variants";
-
-export type StyleVariantDTO = StyleColorVariants;
\ No newline at end of file
diff --git a/src/services/data/servicesActionTypes.ts b/src/services/data/servicesActionTypes.ts
deleted file mode 100644
index 805c5e7..0000000
--- a/src/services/data/servicesActionTypes.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-/* ------------------------------ Services list ----------------------------- */
-export const GET_SERVICES = "@services/fetch.all";
-export const GET_SERVICES_SUCCESS = "@services/fetch.all.success";
-export const GET_SERVICES_FAILURE = "@services/fetch.all.failure";
-
-/* --------------------------- Service credentials -------------------------- */
-export const SERVICE_CREDENTIALS = "@services/service.credentials.get"
-export const SERVICE_CREDENTIALS_FETCHED = "@services/service.credentials.success"
-export const SERVICE_CREDENTIALS_FAILURE = "@services/service.credentials.failure"
\ No newline at end of file
diff --git a/src/services/data/servicesActions.ts b/src/services/data/servicesActions.ts
deleted file mode 100644
index a0b72c3..0000000
--- a/src/services/data/servicesActions.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import Failure from "core/failure";
-import { dispatchStatus } from "store";
-import * as actionTypes from "./servicesActionTypes";
-import { loadServices } from "./servicesService";
-
-const getServicesAction = () => (dispatch: any) => {
- dispatch({ type: actionTypes.GET_SERVICES });
-
- return loadServices()
- .then((services) =>
- dispatchStatus(actionTypes.GET_SERVICES, ".success", services)(dispatch)
- )
- .catch((failure: Failure) => {
- dispatchStatus(actionTypes.GET_SERVICES, ".failure", failure)(dispatch);
- });
-};
-
-
-export {
- getServicesAction,
-};
diff --git a/src/services/data/servicesReducer.ts b/src/services/data/servicesReducer.ts
deleted file mode 100644
index b5a00c6..0000000
--- a/src/services/data/servicesReducer.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { AnyAction } from "@reduxjs/toolkit";
-import { ServicesStore } from "services/domain/servicesStore";
-import * as actionTypes from "./servicesActionTypes";
-
-type ServicesStoreState = Omit<
- ServicesStore,
- "loadServices" | "setServices" | "subscribe" | "forkTo"
->;
-
-const INITIAL_STATE: ServicesStoreState = {
- services: undefined,
- failure: undefined,
- isLoading: false,
- isFailed: false,
-};
-
-const servicesReducer = (
- state: ServicesStoreState = INITIAL_STATE,
- action: AnyAction
-): ServicesStoreState => {
- switch (action.type) {
- /* ---------------------------- Services fetching --------------------------- */
- case actionTypes.GET_SERVICES:
- return {
- ...state,
- isLoading: typeof state.services === typeof undefined,
- isFailed: false,
- };
- case actionTypes.GET_SERVICES_SUCCESS:
- return {
- ...state,
- isLoading: false,
- isFailed: false,
- services: action.payload,
- };
- case actionTypes.GET_SERVICES_FAILURE:
- return {
- ...state,
- failure: action.payload,
- isLoading: false,
- isFailed: true,
- };
- /* ------------------------------- Credentials ------------------------------ */
- case actionTypes.SERVICE_CREDENTIALS:
- return {
- ...state,
- };
- /* --------------------------------- Default -------------------------------- */
- default:
- return state;
- }
-};
-
-export { servicesReducer };
-export type { ServicesStoreState };
diff --git a/src/services/data/servicesService.ts b/src/services/data/servicesService.ts
deleted file mode 100644
index 75f8e85..0000000
--- a/src/services/data/servicesService.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { integratorApiClient } from "auth/data/authService";
-import axios from "axios";
-import { DTOModel } from "core/dto_model";
-import Failure from "core/failure";
-import { Service } from "services/domain/serviceEntity";
-import { create } from "services/domain/serviceModel";
-import { ServiceDTO } from "./dto/serviceDTO";
-
-async function loadServices(): Promise {
- try {
- const response = await integratorApiClient
- .get>("/service");
- const content = response.data.data;
- return content.map((dto) => {
- return create({
- id: dto._id,
- name: dto.title,
- shortName: dto.short_name,
- href: dto.address,
- category: dto.category,
- variant: dto.color,
- subscribed: false,
- })
- });
- } catch (reason) {
- if(axios.isAxiosError(reason)) {
- throw Failure.fromReason(reason, "failures.services.load");
- }
- throw reason;
- }
-}
-
-
-export { loadServices };
diff --git a/src/services/data/servicesSlice.ts b/src/services/data/servicesSlice.ts
deleted file mode 100644
index 9e35ec0..0000000
--- a/src/services/data/servicesSlice.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from "react";
-import { ServicesStore } from "services/domain/servicesStore";
-import { RootState, useAppDispatch, useAppSelector } from "store";
-import { getServicesAction } from "./servicesActions";
-import { ServicesStoreState } from "./servicesReducer";
-
-const servicesSelector = (state: RootState): ServicesStoreState =>
- state.services;
-
-const useServicesStore = (): ServicesStore => {
- const { services, isLoading, isFailed, failure } =
- useAppSelector(servicesSelector);
-
- const dispatch = useAppDispatch();
-
- const loadServices = React.useCallback(
- () => getServicesAction()(dispatch),
- [dispatch]
- );
-
- return {
- /* ---------------------------------- State --------------------------------- */
- isLoading,
- isFailed,
- services,
- failure,
- /* --------------------------------- Actions -------------------------------- */
- loadServices,
- };
-};
-
-export { useServicesStore };
diff --git a/src/services/domain/serviceEntity.ts b/src/services/domain/serviceEntity.ts
deleted file mode 100644
index 392a0b3..0000000
--- a/src/services/domain/serviceEntity.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { StyleColorVariants } from "core/_variants";
-
-export interface Service {
- id: string | number;
- name: string;
- shortName: string;
- description: string;
- category: string;
- href: string;
- subscribed: boolean;
- variant?: StyleColorVariants;
-}
diff --git a/src/services/domain/serviceModel.ts b/src/services/domain/serviceModel.ts
deleted file mode 100644
index ec970ab..0000000
--- a/src/services/domain/serviceModel.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Service } from "./serviceEntity";
-
-const create = (
- props: Omit
-): Service => ({
- ...props,
- shortName: props.shortName,
- description: "",
-});
-
-export { create };
diff --git a/src/services/domain/servicesStore.ts b/src/services/domain/servicesStore.ts
deleted file mode 100644
index 33707c6..0000000
--- a/src/services/domain/servicesStore.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Service } from "./serviceEntity";
-
-interface ServicesStore {
- /* ---------------------------------- State --------------------------------- */
- services: Service[] | undefined;
- failure: undefined;
- isLoading: boolean;
- isFailed: boolean;
- /* --------------------------------- Actions -------------------------------- */
- loadServices(): Promise;
-}
-
-export type { ServicesStore };
diff --git a/src/services/useCases/loadServicesUseCase.ts b/src/services/useCases/loadServicesUseCase.ts
deleted file mode 100644
index f0851b8..0000000
--- a/src/services/useCases/loadServicesUseCase.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { debounce } from "lodash";
-import { ServicesStore } from "services/domain/servicesStore";
-
-type LoadServicesStore = Pick;
-
-const deboucedTask = debounce((task) => Promise.resolve(task()), 500);
-
-const loadServicesUseCase = (store: LoadServicesStore) => {
- return deboucedTask(() => store.loadServices());
-};
-
-export { loadServicesUseCase };
diff --git a/src/services/views/ServicesNavigationContext.tsx b/src/services/views/ServicesNavigationContext.tsx
deleted file mode 100644
index a8e2016..0000000
--- a/src/services/views/ServicesNavigationContext.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-/* -------------------------------------------------------------------------- */
-/* Libraries */
-/* -------------------------------------------------------------------------- */
-import React, { useEffect } from "react";
-/* -------------------------------------------------------------------------- */
-/* Components */
-/* -------------------------------------------------------------------------- */
-import ContextMenu from "components/containers/contextmenu/ContextMenu";
-import ServiceLink from "components/ServiceLink";
-import ContextMenuItem from "components/containers/contextmenu/ContextMenuItem";
-/* -------------------------------------------------------------------------- */
-/* Icons */
-/* -------------------------------------------------------------------------- */
-import { ReactComponent as SVGServicesIcon } from "assets/svg/services.svg";
-import { useServicesStore } from "services/data/servicesSlice";
-import { useServicesViewModel } from "services/controller/servicesViewModel";
-import CircleLoader from "components/CircleLoader";
-import { useUIStore } from "ui/data/uiSlice";
-
-/* -------------------------------------------------------------------------- */
-/* Services context menu component */
-/* -------------------------------------------------------------------------- */
-
-export default function ServicesNavigationContext() {
- const servicesStore = useServicesStore();
- const uiStore = useUIStore();
-
- const { isLoading, services } = useServicesViewModel({
- ...servicesStore,
- notify: uiStore.notify,
- });
-
- return (
-
-
- ))}
-
- )}
-
- );
-}
diff --git a/src/setupTests.ts b/src/setupTests.ts
old mode 100644
new mode 100755
index 8f2609b..141e479
--- a/src/setupTests.ts
+++ b/src/setupTests.ts
@@ -1,5 +1,5 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';
diff --git a/src/store/hooks.ts b/src/store/hooks.ts
old mode 100644
new mode 100755
index 4e17df4..c8c666d
--- a/src/store/hooks.ts
+++ b/src/store/hooks.ts
@@ -1,10 +1,10 @@
-import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
-import type { RootState, AppDispatch } from "./store";
-
-// Use throughout your app instead of plain `useDispatch` and `useSelector`
-export const useAppDispatch = () => useDispatch();
-export const useAppSelector: TypedUseSelectorHook = useSelector;
-export const dispatchStatus =
- (action: string, status: ".success" | ".failure", payload: any) =>
- (dispatch: any) =>
- dispatch({ type: action + status, payload: payload });
+import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
+import type { RootState, AppDispatch } from "./store";
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch = () => useDispatch();
+export const useAppSelector: TypedUseSelectorHook = useSelector;
+export const dispatchStatus =
+ (action: string, status: ".success" | ".failure", payload: any) =>
+ (dispatch: any) =>
+ dispatch({ type: action + status, payload: payload });
diff --git a/src/store/index.ts b/src/store/index.ts
old mode 100644
new mode 100755
index 96e699d..2dab57d
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,2 +1,2 @@
-export type {RootState, AppDispatch} from "./store";
+export type {RootState, AppDispatch} from "./store";
export {useAppDispatch, useAppSelector, dispatchStatus} from "./hooks";
\ No newline at end of file
diff --git a/src/store/store.ts b/src/store/store.ts
old mode 100644
new mode 100755
index 8d5fa22..42d1918
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -1,26 +1,16 @@
-import { configureStore } from "@reduxjs/toolkit";
-import { authReducer } from "auth/data/authReducer";
-import { servicesReducer } from "services/data/servicesReducer";
-import { uiReducer } from "ui/data/uiReducer";
-import { userReducer } from "user/data/userReducer";
-import thunk from "redux-thunk";
-import { subscriptionsReducer } from "subscriptions/data/subscriptionsReducer";
-
-const store = configureStore({
- reducer: {
- user: userReducer,
- ui: uiReducer,
- services: servicesReducer,
- auth: authReducer,
- subscriptions: subscriptionsReducer,
- },
- middleware: [
- thunk,
- ]
-});
-
-export {store};
-
-export type RootState = ReturnType;
-
-export type AppDispatch = typeof store.dispatch;
+import { configureStore } from "@reduxjs/toolkit";
+import thunk from "redux-thunk";
+import { searchResultReducer } from "searchResults/data/searchReducer";
+
+const store = configureStore({
+ reducer: {
+ searchResults: searchResultReducer,
+ },
+ middleware: [thunk],
+});
+
+export { store };
+
+export type RootState = ReturnType;
+
+export type AppDispatch = typeof store.dispatch;
diff --git a/src/stories/AllIcons.stories.tsx b/src/stories/AllIcons.stories.tsx
old mode 100644
new mode 100755
index 14daf67..fb69a0a
--- a/src/stories/AllIcons.stories.tsx
+++ b/src/stories/AllIcons.stories.tsx
@@ -1,270 +1,270 @@
-import React, { Component } from "react";
-import { ComponentMeta, ComponentStory, Meta} from "@storybook/react";
-import { ReactComponent as SVGArrowBigRight } from "../assets/svg/arrow-big-right.svg" ;
-import { ReactComponent as SVGArrowRight} from "../assets/svg/arrow-right.svg";
-// import {ReactComponent as SVGArrowLeft} from "../assets/svg/arrow-left.svg";
-import {ReactComponent as SVGArrowDown} from "../assets/svg/arrow-down.svg";
-import {ReactComponent as SVGBookmark} from "../assets/svg/bookmark.svg";
-import {ReactComponent as SVGCaretDown} from "../assets/svg/caret-down.svg"
-import {ReactComponent as SVGCaretLeft} from "../assets/svg/caret-left.svg"
-import {ReactComponent as SVGCaretRight} from "../assets/svg/caret-right.svg"
-import {ReactComponent as SVGCaretUp} from "../assets/svg/caret-up.svg";
-import {ReactComponent as SVGChevronesLeft} from "../assets/svg/chevrones-left.svg";
-import {ReactComponent as SVGChevronesRight} from "../assets/svg/chevrones-right.svg";
-import {ReactComponent as SVGCite} from "../assets/svg/cite.svg";
-import {ReactComponent as SVGCopy} from "../assets/svg/copy.svg";
-import {ReactComponent as SVGDelete} from "../assets/svg/delete.svg";
-import {ReactComponent as SVGDownload} from "../assets/svg/download.svg";
-import {ReactComponent as SVGEdit1} from "../assets/svg/edit1.svg";
-import {ReactComponent as SVGEdit2} from "../assets/svg/edit2.svg";
-import {ReactComponent as SVGError} from "../assets/svg/error.svg";
-import {ReactComponent as SVGEye} from "../assets/svg/eye.svg";
-import {ReactComponent as SVGFavorite} from "../assets/svg/favorite.svg";
-import {ReactComponent as SVGFiletext} from "../assets/svg/filetext.svg";
-import {ReactComponent as SVGFolder} from "../assets/svg/folder.svg";
-import {ReactComponent as SVGKey} from "../assets/svg/key.svg";
-import {ReactComponent as SVGList} from "../assets/svg/list.svg";
-import {ReactComponent as SVGMinus} from "../assets/svg/minus.svg";
-import {ReactComponent as SVGMore} from "../assets/svg/more.svg";
-import {ReactComponent as SVGPlus} from "../assets/svg/plus.svg";
-import {ReactComponent as SVGPrinter} from "../assets/svg/printer.svg";
-import {ReactComponent as SVGSearch} from "../assets/svg/search.svg";
-import {ReactComponent as SVGShare} from "../assets/svg/share.svg";
-import {ReactComponent as SVGUser} from "../assets/svg/user.svg";
-import {ReactComponent as SVGXMark} from "../assets/svg/xmark.svg";
-
-
-export default {
- title: "Icons",
-}
-
-
-const ArrowBigRightStory: ComponentStory = (args) => = (args) => = (args) => = (args) => = (args) => = (args) => = (args) => = (args) => = (args) => = (args) => = (args) => = (args) => = (args) => = (args) => = (args) => = (args) => = (args) => = (args) => = (args) =>