+
diff --git a/src/app/components/Content/Content.tsx b/src/app/components/Content/Content.tsx
index 4710f02..e18524d 100755
--- a/src/app/components/Content/Content.tsx
+++ b/src/app/components/Content/Content.tsx
@@ -9,7 +9,7 @@ interface ContentProps {
const Content = (props: ContentProps): JSX.Element => {
const { children, classes } = props
return (
-
+ ()
+ const drawerRef = useRef(null)
+ const dispatch = useAppDispatch()
+ const drawerState = useAppSelector(getDrawerState)
+ const theme = useAppSelector(getCurrentTheme)
+
+ useEffect(() => {
+ if (isMobile) {
+ if (!drawerState?.collapsed) {
+ drawerRef.current?.focus()
+ }
+ }
+ }, [drawerState])
return (
)
}
diff --git a/src/app/components/Editor/Editor.tsx b/src/app/components/Editor/Editor.tsx
index dcb983b..6065e0d 100755
--- a/src/app/components/Editor/Editor.tsx
+++ b/src/app/components/Editor/Editor.tsx
@@ -5,6 +5,7 @@ import { Alert, Button, List, Popover, Toggle } from ".."
import { FrameContentDefinition } from "../../types/entity.interface"
import { FrameContentProps } from "../../types/components.interface"
import { ArButtonVariants, ArPopoverSlots } from "../../types/enums"
+import { ComponentDescription } from "../../types/componentlist.interface"
import Helper from "../../utils/helper"
import COMPONENTS from "../../config/components"
import * as images from "../../static/images"
@@ -239,7 +240,7 @@ const Editor = (): JSX.Element | string => {
toggleOnName="Dark"
toggleOffName="Light"
onChange={(checked: boolean) =>
- setTheme(checked ? "th-light-1" : "th-dark-1")
+ setTheme(checked ? "th-dark-1" : "th-light-1")
}
/>
diff --git a/src/app/components/FavoritesList/FavoritesList.tsx b/src/app/components/FavoritesList/FavoritesList.tsx
index 1562c39..8a94089 100755
--- a/src/app/components/FavoritesList/FavoritesList.tsx
+++ b/src/app/components/FavoritesList/FavoritesList.tsx
@@ -108,7 +108,7 @@ const FavoritesList = (props: FavoritesListProps): JSX.Element => {
content="Login"
preIcon="ci/CiWarning"
onClick={() => {
- dispatch(setRightPanelContent("LoginProvider"))
+ dispatch(setRightPanelContent({ name: "LoginProvider" }))
}}
/>
)}
diff --git a/src/app/components/FlexTools/FlexTools.component.scss b/src/app/components/FlexTools/FlexTools.component.scss
new file mode 100755
index 0000000..f42f0d9
--- /dev/null
+++ b/src/app/components/FlexTools/FlexTools.component.scss
@@ -0,0 +1,26 @@
+.ar-FlexTools {
+ .col {
+ border-right: var(--ar-border);
+ }
+ .ar-FlexTools__separator {
+ border-right: var(--ar-border);
+ }
+
+ .ar-FlexTools__brand {
+ border-radius: 50%;
+ }
+
+ .ar-FlexTools__app-name {
+ font-family: "Allerta Stencil";
+ font-weight: 700;
+ font-size: 1rem;
+
+ .ar-FlexTools__app-name-i {
+ color: red;
+ }
+ .ar-FlexTools__app-name-o {
+ color: green;
+ }
+ }
+
+}
diff --git a/src/app/components/FlexTools/FlexTools.test.ts b/src/app/components/FlexTools/FlexTools.test.ts
new file mode 100755
index 0000000..fc46be9
--- /dev/null
+++ b/src/app/components/FlexTools/FlexTools.test.ts
@@ -0,0 +1,8 @@
+import React from "react"
+import FlexTools from "./FlexTools"
+
+describe("FlexTools", () => {
+ it("renders without error", () => {
+
+ })
+})
diff --git a/src/app/components/FlexTools/FlexTools.tsx b/src/app/components/FlexTools/FlexTools.tsx
new file mode 100755
index 0000000..06a4227
--- /dev/null
+++ b/src/app/components/FlexTools/FlexTools.tsx
@@ -0,0 +1,129 @@
+import { useEffect } from "react"
+import { useNavigate } from "react-router-dom"
+import { useAppSelector } from "../../hooks"
+import { getCurrentTheme } from "../../store"
+import {
+ AppAndToolsSelector,
+ LoadableIcon,
+ Popover,
+ TabBar,
+ UserOptions,
+} from ".."
+import {
+ ArAnimations,
+ ArPopoverPositions,
+ ArPopoverSlots,
+ ArTabType,
+ ArThemes,
+} from "../../types/enums"
+import {
+ FlexToolsProps,
+ TabBarProps,
+ TabProps,
+} from "../../types/components.interface"
+import { Helper } from "../../utils"
+import navigator from "../../config/navigator"
+import "./FlexTools.component.scss"
+
+const userOptions = [
+ [{ name: "Profile" }, { name: "Settings" }, { name: "My Stuff" }],
+ [{ name: "+ Organization" }, { name: "+ Upload Icon" }],
+]
+
+const isMobile = Helper.isMobile()
+
+const FlexTools = (props: FlexToolsProps): JSX.Element => {
+ const { isLanding, route } = props
+ const theme = useAppSelector(getCurrentTheme)
+ const navigate = useNavigate()
+
+ useEffect(() => {
+ navigator.forEach((item) => {
+ navigator &&
+ item.items?.forEach(
+ (subItem) =>
+ (subItem.onClick = () => subItem.url && navigate(subItem.url)),
+ )
+ })
+ }, [navigate])
+
+ const onTabSelected = (id: string, tab: TabProps) => {
+ tab?.data?.url && navigate(tab.data.url as string)
+ }
+
+ const separator =
+ const tabBarProps: TabBarProps = {
+ data: navigator,
+ variant: ArTabType.MODERN,
+ onTabSelected,
+ }
+ if (route === "landing") {
+ tabBarProps.activeId = ""
+ }
+ const appSelector = isLanding ? (
+
+
+ )
+
+ const userOps = (
+ ()
const [fonts, setFonts] = useState()
const [page, setPage] = useState()
const [loading, setLoading] = useState()
// TODO: Fetch Fonts
- useEffect(() => {}, [])
+ useEffect(() => {
+ const filters: ObjectType = {}
+ setLoading(true)
+ fetchFontsPage(30, 0, filters, setFonts, setPage, setLoading)
+ }, [])
+
+ useEffect(() => {
+ const filters: ObjectType = {}
+ if (searchText) {
+ filters.search = searchText
+ }
+ setLoading(true)
+ fetchFontsPage(200, 0, filters, setFonts, setPage, setLoading)
+ }, [searchText])
return (
{children}
)
diff --git a/src/app/components/Drawer/Drawer.component.scss b/src/app/components/Drawer/Drawer.component.scss
index dd2e0bb..81aa012 100755
--- a/src/app/components/Drawer/Drawer.component.scss
+++ b/src/app/components/Drawer/Drawer.component.scss
@@ -1,3 +1,38 @@
.ar-Drawer {
border-right: 1px solid var(--ar-color-layout-border);
+ &.collapsed {
+ .ar-Drawer__expander {
+ right: 1rem;
+ }
+ }
+ .ar-Drawer__expander {
+ top: 4px;
+ right: 6px;
+ }
+ /* width */
+ &::-webkit-scrollbar {
+ width: 4px;
+ }
+
+ /* Track */
+ &::-webkit-scrollbar-track {
+ background: #f1f1f1;
+ }
+
+ /* Handle */
+ &::-webkit-scrollbar-thumb {
+ background: #bbb;
+ border-radius: 2px;
+ &:hover {
+ background: #888;
+ }
+ }
+
+ & + .ar-Content {
+ width: 85%;
+ }
+
+ &:focus-visible {
+ outline: none;
+ }
}
diff --git a/src/app/components/Drawer/Drawer.tsx b/src/app/components/Drawer/Drawer.tsx
index 12dfcd3..6fe3b75 100755
--- a/src/app/components/Drawer/Drawer.tsx
+++ b/src/app/components/Drawer/Drawer.tsx
@@ -1,31 +1,65 @@
-import { useState } from "react"
-import { DrawerProps } from "../../types/components.interface"
-import "./Drawer.component.scss"
+import { useEffect, useRef } from "react"
+import { useAppDispatch, useAppSelector } from "../../hooks"
+import { getCurrentTheme, getDrawerState, setDrawerState } from "../../store"
import LoadableIcon from "../atoms/LoadableIcon"
+import { DrawerProps } from "../../types/components.interface"
+import { ArThemes } from "../../types/enums"
+import { Helper } from "../../utils"
+import "./Drawer.component.scss"
+
+const isMobile = Helper.isMobile()
+let clickedSelf: boolean
const Drawer = (props: DrawerProps): JSX.Element => {
const { children, classes, isCollapsible } = props
- const [collapsed, setCollapsed] = useState
+ {!isMobile ? (
+ <>
+ {appSelector}
+ {!isLanding && separator}
+ {userOps}
+
+ ) : (
+
+ )
+}
+
+export default FlexTools
diff --git a/src/app/components/FlexTools/index.ts b/src/app/components/FlexTools/index.ts
new file mode 100755
index 0000000..720a7d8
--- /dev/null
+++ b/src/app/components/FlexTools/index.ts
@@ -0,0 +1,3 @@
+import FlexTools from "./FlexTools"
+
+export default FlexTools
diff --git a/src/app/components/FontsList/FontsList.component.scss b/src/app/components/FontsList/FontsList.component.scss
index 08c9432..fbe4d38 100755
--- a/src/app/components/FontsList/FontsList.component.scss
+++ b/src/app/components/FontsList/FontsList.component.scss
@@ -1,3 +1,12 @@
.ar-FontsList {
-
+ .ar-FontsList__header-search-upload {
+ background-color: var(--ar-bg);
+ color: var(--ar-colora);
+ background-color: var(--ar-bg-base);
+ }
+
+ .ar-FontsList__font-tile-container {
+ background-color: var(--ar-bg);
+ color: var(--ar-color);
+ }
}
diff --git a/src/app/components/FontsList/FontsList.tsx b/src/app/components/FontsList/FontsList.tsx
index 2fdbb2b..e59ae2b 100755
--- a/src/app/components/FontsList/FontsList.tsx
+++ b/src/app/components/FontsList/FontsList.tsx
@@ -1,68 +1,99 @@
import { ChangeEvent, useEffect, useState } from "react"
import { FontsListProps } from "../../types/components.interface"
-import { ArrayType } from "../../types/types"
+import { ArrayType, FunctionType, ObjectType } from "../../types/types"
import { ArButtonVariants, ArLoaderTypes, ArSizes } from "../../types/enums"
-import { Button, Loader, Search } from ".."
-import { Helper } from "../../utils"
+import { Button, FontTile, Loader, Pagination, Search, Toggle } from ".."
+import { Helper, Network } from "../../utils"
+import API_CONFIG from "../../config/api-config"
+import { ENDPOINTS } from "../../config/constants"
import "./FontsList.component.scss"
+const fetchFontsPage = (
+ limit: number,
+ from: number,
+ filters: ObjectType,
+ dataSetter: FunctionType,
+ pageSetter: FunctionType,
+ setLoading: FunctionType,
+) => {
+ const pageApi =
+ API_CONFIG.STATIC_HOST[process.env.NODE_ENV] +
+ ENDPOINTS.STATIC.FONT.ROOT +
+ ENDPOINTS.STATIC.FONT.PAGE
+ const queryParams: ObjectType = { pageSize: limit, from, ...filters }
+ Network.get(pageApi, queryParams)
+ .then((response) => {
+ if (response && response.status === 200) {
+ if (response.body && dataSetter) {
+ const content = JSON.parse(response.body)
+ const styleElement = document.createElement("style")
+ styleElement.type = "text/css"
+ styleElement.appendChild(
+ document.createTextNode(content.returnFontGroups),
+ )
+ document.head.appendChild(styleElement)
+
+ dataSetter(content.fontNames)
+ pageSetter(content.fontNames.slice(0, 30))
+ }
+ }
+ setLoading(false)
+ })
+ .catch((error) => {
+ console.error(error)
+ setLoading(false)
+ })
+}
+
const FontsList = (props: FontsListProps): JSX.Element => {
+ const [searchText, setSearchText] = useState
+
+ )}
+ navigate("/")}>
+ {/* 
navigate("/")}
+ /> */}
+
+ Stuffle.
+ i
+ o
+
+
+
+ {appSelector}
+
+ {userOps}
+
{!fonts && (
+
(getCurrentTheme)
+ const dispatch = useAppDispatch()
+ return (
+
+ )
}
export default Footer
diff --git a/src/app/components/Header/Header.component.scss b/src/app/components/Header/Header.component.scss
index 6010e87..3fc289e 100755
--- a/src/app/components/Header/Header.component.scss
+++ b/src/app/components/Header/Header.component.scss
@@ -7,9 +7,33 @@
.ar-Header__brand {
border-radius: 50%;
}
+ .ar-Header__app-name {
+ font-family: "Allerta Stencil";
+ font-weight: 700;
+ font-size: 1.5rem;
+
+ .ar-Header__app-name-i {
+ color: red;
+ }
+ .ar-Header__app-name-o {
+ color: green;
+ }
+ }
}
- .ar-Header__separator {
- border-right: var(--ar-border);
+ .ar-Header__app-search {
+ transition: width 0.3s;
+ @media screen and (max-width: 576px) {
+ flex: 1;
+
+ .ar-Search .ar-TextInput {
+ border-top-left-radius: 0.5rem;
+ border-bottom-left-radius: 0.5rem;
+ }
+ .ar-Search .ar-Button {
+ border-top-right-radius: 0.5rem;
+ border-bottom-right-radius: 0.5rem;
+ }
+ }
}
}
diff --git a/src/app/components/Header/Header.tsx b/src/app/components/Header/Header.tsx
index 02254ec..af01ba0 100755
--- a/src/app/components/Header/Header.tsx
+++ b/src/app/components/Header/Header.tsx
@@ -1,96 +1,150 @@
-import { useEffect, useState } from "react"
+import { useState } from "react"
import { useLocation, useNavigate } from "react-router-dom"
-import { v4 as uuid } from "uuid"
-import { TabBar, UserOptions } from ".."
-import { ArTabType } from "../../types/enums"
-import { TabProps } from "../../types/components.interface"
-import { AppLogo } from "../../static/images"
-import { ReactComponent as AppName } from "../../static/images/Omnia Alkatra.svg"
+import { useAppDispatch, useAppSelector } from "../../hooks"
+import {
+ getCurrentTheme,
+ getDrawerState,
+ setDrawerState,
+ setTheme,
+} from "../../store"
+import { FlexTools, LoadableIcon, Search } from ".."
+import { DrawerProps, HeaderProps } from "../../types/components.interface"
+import { ObjectType } from "../../types/types"
+import { ArThemes } from "../../types/enums"
+// import { AppLogo } from "../../static/images"
+// import { ReactComponent as AppName } from "../../static/images/Omnia Alkatra.svg"
import "./Header.component.scss"
-const tabs = [
- {
- label: "Components",
- id: uuid(),
- isActive: true,
- route: "/components",
- icon: "cg.CgComponents",
- },
- {
- label: "Icons",
- id: uuid(),
- isActive: false,
- route: "/icons",
- icon: "md.MdOutlineInsertEmoticon",
- },
- {
- label: "Fonts",
- id: uuid(),
- isActive: false,
- route: "/fonts",
- icon: "bi.BiFontFamily",
- },
- {
- label: "Configurations",
- id: uuid(),
- isActive: false,
- route: "/config",
- icon: "fc.FcDataConfiguration",
- },
- {
- label: "Tasks",
- id: uuid(),
- isActive: false,
- route: "/tasks",
- icon: "ri.RiPlayList2Fill",
- },
-]
+// const tabs = [
+// {
+// label: "Components",
+// id: uuid(),
+// isActive: true,
+// route: "/components",
+// icon: "cg.CgComponents",
+// },
+// {
+// label: "Icons",
+// id: uuid(),
+// isActive: false,
+// route: "/icons",
+// icon: "md.MdOutlineInsertEmoticon",
+// },
+// {
+// label: "Fonts",
+// id: uuid(),
+// isActive: false,
+// route: "/fonts",
+// icon: "bi.BiFontFamily",
+// },
+// {
+// label: "Configurations",
+// id: uuid(),
+// isActive: false,
+// route: "/config",
+// icon: "fc.FcDataConfiguration",
+// },
+// {
+// label: "Tasks",
+// id: uuid(),
+// isActive: false,
+// route: "/tasks",
+// icon: "ri.RiPlayList2Fill",
+// },
+// ]
-const userOptions = [
- [{ name: "Profile" }, { name: "Settings" }, { name: "My Stuff" }],
- [{ name: "+ Organization" }, { name: "+ Upload Icon" }],
-]
-
-const Header = (): JSX.Element => {
+const Header = (props: HeaderProps): JSX.Element => {
+ const { routeDetails } = props
const navigate = useNavigate()
const location = useLocation()
- const [activeTabId, setActiveTabId] = useState()
+ const [searchFocussed, setSearchFocussed] = useState()
+ const drawerState = useAppSelector(getDrawerState)
+ const dispatch = useAppDispatch()
+ const theme = useAppSelector(getCurrentTheme)
+ const route = (routeDetails?.route as ObjectType)?.class
+ const isLanding =
+ !routeDetails ||
+ ["landing", "assets", "playground", "tools-and-services"].indexOf(
+ route as string,
+ ) > -1
- useEffect(() => {
- const matchedTab =
- tabs && tabs.find((tab) => location.pathname.startsWith(tab.route))
- if (matchedTab) {
- setActiveTabId(matchedTab.id)
- }
- }, [location])
-
- const separator =
+ const showExpander =
+ location.pathname.startsWith("/components") ||
+ location.pathname.startsWith("/icons")
return (
- {
- tab.isActive = activeTabId === tab.id
- return tab
- })}
- variant={ArTabType.MODERN}
- onTabSelected={(id: string, data: TabProps) => {
- data?.data?.route && navigate(data.data.route)
+ {showExpander && (
+
+ dispatch(setDrawerState({ collapsed: !drawerState?.collapsed }))
+ }
+ color={theme === "th-dark-1" ? "lightgrey" : "black"}
+ />
+ )}
+ {!isLanding && (
+ {
+ const nextTheme =
+ theme === ArThemes.LIGHT1 ? ArThemes.DARK1 : ArThemes.LIGHT1
+ dispatch(setTheme(nextTheme))
+ document
+ .getElementsByTagName("html")[0]
+ .setAttribute("ar-theme", nextTheme)
}}
+ color={theme === ArThemes.DARK1 ? "lightgrey" : "black"}
/>
- {separator}
-
)
}
diff --git a/src/app/components/IconController/IconController.component.scss b/src/app/components/IconController/IconController.component.scss
index e369781..227cef7 100755
--- a/src/app/components/IconController/IconController.component.scss
+++ b/src/app/components/IconController/IconController.component.scss
@@ -3,7 +3,46 @@
background-color: var(--ar-bg-base);
}
+ .ar-IconController__color-palette {
+ border-radius: 50%;
+ }
+
+ .ar-IconController__download-button, .ar-IconController__animate-button {
+ background-color: orange;
+ border-color: orange;
+ }
+
+ .ar-IconController__main {
+ border-radius: 0.3rem;
+ }
+
.ar-IconController__controls-form {
background-color: var(--ar-bg);
}
+
+ .hover-show {
+ cursor: pointer;
+ .ar-IconController__download-icon {
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 0.3s;
+ }
+
+ &:hover {
+ .ar-IconController__download-icon {
+ opacity: 1;
+ pointer-events: auto;
+ transition: box-shadow 0.3s;
+
+ &:hover {
+ box-shadow: 0 4px 8px var(--ar-shadow);
+ border-radius: 3px
+ }
+ }
+ }
+ }
+
+ .ar-IconController__meta-item {
+ color: var(--ar-color-secondary);
+ }
}
diff --git a/src/app/components/IconController/IconController.tsx b/src/app/components/IconController/IconController.tsx
index d912888..4b47d20 100755
--- a/src/app/components/IconController/IconController.tsx
+++ b/src/app/components/IconController/IconController.tsx
@@ -1,14 +1,23 @@
-import { useState } from "react"
-import { IconControllerProps } from "../../types/components.interface"
+import { useNavigate } from "react-router-dom"
+import { useEffect, useState } from "react"
+import { Player, Controls } from "@lottiefiles/react-lottie-player"
+import { setRightPanelContent } from "../../store"
+import { useAppDispatch, useAppSelector } from "../../hooks"
+import { getIconStyles } from "../../pages/IconPage/IconPage.slice"
import {
Breadcrumb,
- ColorSelector,
+ Button,
Dropdown,
LoadableIcon,
Suggestions,
Tags,
TextInput,
} from ".."
+import { IconControllerProps } from "../../types/components.interface"
+import { ArButtonVariants, ArPopoverSlots } from "../../types/enums"
+import { ObjectType } from "../../types/types"
+import { DomHelper, Network } from "../../utils"
+import API_CONFIG from "../../config/api-config"
import "./IconController.component.scss"
const complement = (hex?: string) => {
@@ -33,22 +42,56 @@ const complement = (hex?: string) => {
return "#fff"
}
-// const getSuggestions = (group, name, icons) => {
-// const response: {
-// group?: Array
-// [key: string]: Array | undefined
-// } = {}
-// }
+const STATIC_ROOT = API_CONFIG.STATIC_HOST[process.env.NODE_ENV]
+
const IconController = (props: IconControllerProps): JSX.Element => {
- const { group, name } = props
- const [iconColor, setIconColor] = useState()
- const [backgroundColor, setBackGroundColor] = useState()
+ const { group, icon, name } = props
const [size, setSize] = useState()
const [unit, setUnit] = useState("rem")
- const fontColor = complement(backgroundColor || "white")
+ const [similarIcons, setSimilarIcons] = useState>()
+
+ const dispatch = useAppDispatch()
+ const iconStyles = useAppSelector(getIconStyles)
+ const fontColor = complement(iconStyles?.bgColor || "white")
+
+ const navigate = useNavigate()
// const suggestions = getSuggestions(group, name)
+ useEffect(() => {
+ const filename = `${group}_${name}-black.png`
+ Network.getStatic(`/static/${filename}`).then((res) => {
+ const imgBlob = res.body
+ const formData = new FormData()
+ const file = new File([imgBlob], filename, { type: imgBlob.type })
+ formData.append("file", file)
+ formData.append("count", "20")
+ Network.post(
+ "http://localhost:5002/api/similar-icon-paths",
+ formData,
+ undefined,
+ { headers: { "Content-Type": "multipart/form-data" } },
+ true,
+ true,
+ ).then((res) => {
+ if (res.status === 200) {
+ const iconPaths = res.body.map((str: string) =>
+ str.replace(
+ "../images",
+ `${API_CONFIG.STATIC_HOST[process.env.NODE_ENV]}/static`,
+ ),
+ )
+ // setSimilarIcons(iconPaths)
+ Network.post(STATIC_ROOT + "/icon/png-to-svg", {
+ urls: iconPaths,
+ }).then((res) => {
+ setSimilarIcons(res.body)
+ })
+ }
+ })
+ })
+ }, [name, group])
+
return (
- {}}
+ toggleOnName="Compact"
+ toggleOffName="Compact"
+ />
) => null,
- // onSearchChanged(event.target.value),
+ (event: ChangeEvent) =>
+ setSearchText(event.target.value),
1000,
)}
data={
@@ -81,12 +112,27 @@ const FontsList = (props: FontsListProps): JSX.Element => {
{page && (
-
-
-
-
+
+ - -
-
+
+ // fetchIconsPage(load, count, {}, setIcons, setPage, setLoading)
+ // }
+ />
)
}
diff --git a/src/app/components/Footer/Footer.tsx b/src/app/components/Footer/Footer.tsx
index 4fafc25..2b6070c 100755
--- a/src/app/components/Footer/Footer.tsx
+++ b/src/app/components/Footer/Footer.tsx
@@ -1,9 +1,36 @@
+import { useAppDispatch, useAppSelector } from "../../hooks"
+import { getCurrentTheme, setTheme } from "../../store"
+import { FlexTools, Toggle } from ".."
+import { Helper } from "../../utils"
import "./Footer.component.scss"
interface FooterProps {}
+const isMobile = Helper.isMobile()
+
const Footer = (props: FooterProps): JSX.Element => {
- return
+ const theme = useAppSelector
{loading && (
).map((font) => (
+
)}
+ navigate("/")}>
- ![]()
navigate("/")}
+ >
+ {/*
-
- setSearchFocussed(true)}
+ onBlur={() => setSearchFocussed(false)}
+ className={`ar-Header__app-search h-100 flex-v-center me-3 ${
+ searchFocussed ? "w-50" : "w-25"
+ }`}
+ >
+ {}}
+ placeholder="Search icons, components, fonts..."
+ showPopUp
+ />
+
+ )}
+
+
{group && name && (
@@ -59,26 +102,82 @@ const IconController = (props: IconControllerProps): JSX.Element => {
]}
/>
)}
-
+
{group}.{name}
+
{group && name && (
- ()
+
+ useEffect(() => {
+ setExpanded(expandedPre)
+ }, [expandedPre])
+
+ return (
+ ()
+ const [localData, setLocalData] =
+ useState>()
+ const useData = data || (demo && dummyData)
+
+ useEffect(() => {
+ if (useData) {
+ if (firstExpanded) {
+ useData[0] && (useData[0].expanded = true)
+ setExpanded(useData[0].id)
+ }
+ setLocalData(useData)
+ }
+ }, [useData, firstExpanded])
+
+ useEffect(() => {
+ if (variant === ArAccordionVariants.LIMITED) {
+ const dataClone = [...useData]
+ dataClone.forEach((item) => (item.expanded = expanded === item.id))
+ setLocalData(dataClone)
+ }
+ }, [expanded, variant, useData])
+
+ return (
+ ()
+ const [hue, setHue] = useState()
+ const [saturation, setSaturation] = useState()
+ const [lightness, setLightness] = useState()
+
+ useEffect(() => {
+ if (
+ hue !== undefined &&
+ saturation !== undefined &&
+ lightness !== undefined
+ ) {
+ const colorInHex = DomHelper.hslToHex(hue, saturation, lightness)
+ setColor(colorInHex)
+ onColorSelect && onColorSelect(colorInHex)
+ }
+ }, [hue, saturation, lightness])
+
+ const getColorNameHsl = () => {
+ return hue !== undefined &&
+ saturation !== undefined &&
+ lightness !== undefined
+ ? "hsl(" +
+ Math.round(hue * 255) +
+ ", " +
+ Math.round(saturation * 100) +
+ "%, " +
+ Math.round(lightness * 100) +
+ "%)"
+ : ""
+ }
+
+ return (
+ -1
+ ? "black"
+ : "white"
+ }
+ />
>()
+ const [refDate, setRefDate] = useState(today)
+ const [startDateLocal, setStartDate] = useState()
+ const [endDateLocal, setEndDate] = useState()
+ const [eventDate, setEventDate] = useState()
+ const [hovered, setHovered] = useState()
+ const [currentView, setCurrentView] = useState(
+ ArCalViews.CALENDAR,
+ )
+ const [currentMonthNavView, setCurrentMonthNavView] =
+ useState()
+
+ const currentDate = (startDateLocal || {
+ day: today.getDay(),
+ month: today.getMonth(),
+ year: today.getFullYear(),
+ }) as CalendarDate
+
+ const [currentDecade, setCurrentDecade] = useState(
+ currentDate?.year && Math.floor(currentDate.year / 10) * 10,
+ )
+ const [currentYear, setCurrentYear] = useState(
+ currentDate?.year,
+ )
+
+ useEffect(() => {
+ if (startDate) {
+ setStartDate({
+ year: (startDate as Date).getFullYear(),
+ month: (startDate as Date).getMonth(),
+ day: (startDate as Date).getDay(),
+ })
+ }
+ }, [startDate])
+
+ useEffect(() => {
+ if (endDate) {
+ setEndDate({
+ year: (endDate as Date).getFullYear(),
+ month: (endDate as Date).getMonth(),
+ day: (endDate as Date).getDay(),
+ })
+ }
+ }, [endDate])
+
+ useEffect(() => {
+ if (refDate) {
+ const year = (refDate as Date).getFullYear()
+ const month = (refDate as Date).getMonth()
+ const calendar = calHelper.getCalendar(year, month)
+ setCalendar(calendar)
+ }
+ }, [refDate])
+
+ const onDateSelectedLocal = (date: CalendarDate, isSpecialOp?: boolean) => {
+ if (!startDateLocal || isSingleSelect) {
+ setStartDate(date)
+ calHelper.setStartDate(date)
+ onDateSelected &&
+ onDateSelected(isSingleSelect ? date : { startDate: date })
+ return
+ }
+ if (startDateLocal && endDateLocal) {
+ if (
+ CalHelper.compare(startDateLocal, date) === -1 &&
+ CalHelper.compare(date, endDateLocal) === -1
+ ) {
+ calHelper.setEndDate(date)
+ setEndDate(date)
+ onDateSelected &&
+ onDateSelected(
+ isSingleSelect
+ ? date
+ : { startDate: startDateLocal, endDate: date },
+ )
+ } else {
+ calHelper.setEndDate(null)
+ setEndDate(null)
+ calHelper.setStartDate(date)
+ setStartDate(date)
+ onDateSelected &&
+ onDateSelected(
+ isSingleSelect ? date : { startDate: date, endDate: null },
+ )
+ }
+ } else {
+ if (CalHelper.compare(date, startDateLocal) === -1) {
+ setEndDate(startDateLocal)
+ calHelper.setEndDate(startDateLocal)
+ setStartDate(date)
+ calHelper.setStartDate(date)
+ onDateSelected &&
+ onDateSelected(
+ isSingleSelect
+ ? date
+ : { startDate: date, endDate: startDateLocal },
+ )
+ } else {
+ setEndDate(date)
+ calHelper.setEndDate(date)
+ onDateSelected &&
+ onDateSelected(
+ isSingleSelect
+ ? date
+ : { startDate: startDateLocal, endDate: date },
+ )
+ }
+ setHovered(null)
+ }
+ if (isSpecialOp && allowEventSetting) {
+ setEventDate(date)
+ setCurrentView(ArCalViews.EVENT_FORM)
+ }
+ }
+
+ return (
+ ()
diff --git a/src/app/components/atoms/ColorPicker/ColorPicker.tsx b/src/app/components/atoms/ColorPicker/ColorPicker.tsx
index 433082c..a347990 100755
--- a/src/app/components/atoms/ColorPicker/ColorPicker.tsx
+++ b/src/app/components/atoms/ColorPicker/ColorPicker.tsx
@@ -1,14 +1,8 @@
import { useState } from "react"
+import { ColorPickerProps } from ".."
import Helper from "../../../utils/helper"
import "./ColorPicker.component.scss"
-interface ColorPickerProps {
- id?: string
- label?: string
- onChange?: Function
- value?: string
-}
-
const ColorPicker = (props: ColorPickerProps): JSX.Element => {
const { id, label, onChange, value: externalValue } = props
const [value, setValue] = useState(externalValue)
diff --git a/src/app/components/atoms/ColorSelector/ColorSelector.tsx b/src/app/components/atoms/ColorSelector/ColorSelector.tsx
index 8185391..a50fe61 100755
--- a/src/app/components/atoms/ColorSelector/ColorSelector.tsx
+++ b/src/app/components/atoms/ColorSelector/ColorSelector.tsx
@@ -1,5 +1,5 @@
import { useState } from "react"
-import { ColorSelectorProps } from "../../../types/components.interface"
+import { ColorSelectorProps } from ".."
import "./ColorSelector.component.scss"
import TextInput from "../TextInput"
diff --git a/src/app/components/atoms/ContextMenu/ContextMenu.tsx b/src/app/components/atoms/ContextMenu/ContextMenu.tsx
index 607b00c..8ac6155 100755
--- a/src/app/components/atoms/ContextMenu/ContextMenu.tsx
+++ b/src/app/components/atoms/ContextMenu/ContextMenu.tsx
@@ -1,6 +1,6 @@
import { useState } from "react"
import { InlineMenu } from "../.."
-import { ContextMenuProps } from "../../../types/components.interface"
+import { ContextMenuProps } from ".."
import "./ContextMenu.component.scss"
const ContextMenu = (props: ContextMenuProps): JSX.Element => {
diff --git a/src/app/components/atoms/CronTab/CronTab.tsx b/src/app/components/atoms/CronTab/CronTab.tsx
index 0360452..1e99669 100755
--- a/src/app/components/atoms/CronTab/CronTab.tsx
+++ b/src/app/components/atoms/CronTab/CronTab.tsx
@@ -1,5 +1,5 @@
import { ChangeEvent, useEffect, useState } from "react"
-import { CronTabProps } from "../../../types/components.interface"
+import { CronTabProps } from ".."
import TextInput from "../TextInput"
import LoadableIcon from "../LoadableIcon"
import "./CronTab.component.scss"
diff --git a/src/app/components/atoms/Date/Date.tsx b/src/app/components/atoms/Date/Date.tsx
index 25175d0..39301a3 100755
--- a/src/app/components/atoms/Date/Date.tsx
+++ b/src/app/components/atoms/Date/Date.tsx
@@ -1,5 +1,5 @@
import { useState } from "react"
-import { DateProps } from "../../../types/components.interface"
+import { DateProps } from ".."
import { ArButtonVariants, ArSizes } from "../../../types/enums"
import RangeSelector from "./RangeSelector"
import Slider from "./Slider"
diff --git a/src/app/components/atoms/Date/RangeSelector.tsx b/src/app/components/atoms/Date/RangeSelector.tsx
index b3e7bba..25a2358 100644
--- a/src/app/components/atoms/Date/RangeSelector.tsx
+++ b/src/app/components/atoms/Date/RangeSelector.tsx
@@ -1,6 +1,6 @@
import React from "react"
import { List } from "../.." // Import your pre-existing List component
-import { ListItemProps } from "../../../types/components.interface"
+import { ListItemProps } from ".."
interface RangeSelectorProps {
customSelectors?: Array
diff --git a/src/app/components/atoms/Date/dateRangeFunctions.ts b/src/app/components/atoms/Date/dateRangeFunctions.ts
index 0f8a627..ee93d3a 100644
--- a/src/app/components/atoms/Date/dateRangeFunctions.ts
+++ b/src/app/components/atoms/Date/dateRangeFunctions.ts
@@ -3,7 +3,7 @@
import moment, { Moment, MomentInput } from "moment"
import { DEFAULT_LOCALE } from "../../../config/constants"
-import { DateRangeProps } from "../../../types/components.interface"
+import { DateRangeProps } from ".."
import { Locale } from "../../../types/entity.interface"
import { ArrayType, ObjectType } from "../../../types/types"
diff --git a/src/app/components/atoms/DateInput/DateInput.component.scss b/src/app/components/atoms/DateInput/DateInput.component.scss
index a5a5144..e28f4a3 100755
--- a/src/app/components/atoms/DateInput/DateInput.component.scss
+++ b/src/app/components/atoms/DateInput/DateInput.component.scss
@@ -1,3 +1,16 @@
.ar-DateInput {
-
+ border-top-left-radius: 0.125rem;
+ border-bottom-left-radius: 0.125rem;
+ .ar-DateInput__picker {
+ outline: none;
+ }
+
+ .ar-DateInput__clear-button {
+ visibility: hidden;
+ padding: 0 0.75rem;
+
+ &.has-value {
+ visibility: visible;
+ }
+ }
}
diff --git a/src/app/components/atoms/DateInput/DateInput.tsx b/src/app/components/atoms/DateInput/DateInput.tsx
index c85db80..a9f3e5c 100755
--- a/src/app/components/atoms/DateInput/DateInput.tsx
+++ b/src/app/components/atoms/DateInput/DateInput.tsx
@@ -1,10 +1,51 @@
-import React from "react"
+import { useEffect, useState } from "react"
+import { DateInputProps } from ".."
import "./DateInput.component.scss"
-interface DateInputProps {}
-
const DateInput = (props: DateInputProps): JSX.Element => {
- return ()
+
+ useEffect(() => {
+ setLocalValue(value as string)
+ }, [value])
+
+ return (
+ ()
+ const { allowEventSetting, id, label } = props
+ const [date, setDate] = useState()
+ const [pickerDisplayed, showPicker] = useState()
useEffect(() => {
- setLocalValue(value as string)
- }, [value])
+ !allowEventSetting && date && showPicker(false)
+ }, [date])
+
+ const localId = id || "ar-DatePicker__input"
return (
- ()
+ const [endDate, setEndDate] = useState()
+ const [pickerDisplayed, showPicker] = useState()
+ let value
+ const localId = id || "ar-DateRangePicker__input"
+
+ useEffect(() => {
+ if (endDate !== null && closeOnEndSelect) {
+ showPicker(false)
+ }
+ }, [endDate])
+
+ if (startDate && endDate) {
+ value =
+ pad(startDate.day) + "/" + pad(startDate.month + 1) + "/" + startDate.year
+ value += " - "
+ value +=
+ pad(endDate.day) + "/" + pad(endDate.month + 1) + "/" + endDate.year
+ }
+
+ const setDate = (dates: {
+ startDate: CalendarDate
+ endDate?: CalendarDate
+ }) => {
+ setStartDate(dates.startDate)
+ if (dates.endDate) {
+ setEndDate(dates.endDate)
+ }
+ }
+
+ return (
+ ()
+ const [isSelected, toggleSelected] = useState()
+ const theme = useAppSelector(getCurrentTheme)
const navigate = useNavigate()
+ useEffect(() => {
+ if (!selectable && isSelected) {
+ toggleSelected(false)
+ }
+ }, [selectable])
+
+ const generateTools = (tools: Array) => {
+ return tools.map((tool: ToolItemConfig, index: number) => {
+ const anchor = (
+
+ {anchor}
+
+ ) : (
+ anchor
+ )}
+
+ )
+ })
+ }
+
const iconTools = tools && (
+ (null)
+
+ useEffect(() => {
+ const childList: Array = []
+ iconTest?.forEach((icon) => {
+ const svgElement = DomHelper.svgStringToElement(icon.icon)
+ if (svgElement) {
+ childList.push(svgElement)
+ }
+ })
+
+ svgRef.current?.replaceChildren(...childList)
+ const paths = childList.reduce((acc: ArrayType, svgElement) => {
+ const pathList = svgElement.querySelectorAll("path")
+ console.log(pathList)
+ pathList.forEach((pathItem) => {
+ pathItem.setAttribute("draggable", "true")
+ pathItem.addEventListener("dragstart", (e) => console.log(e))
+ })
+ return acc.concat(Array.from(pathList) as any)
+ }, [])
+ ;(paths[0] as any).parentElement?.replaceChildren(...paths)
+ }, [svgRef])
+
+ return
+}
+
+export default IconMergeContainer
diff --git a/src/app/components/IconMergeContainer/index.ts b/src/app/components/IconMergeContainer/index.ts
new file mode 100755
index 0000000..92d6793
--- /dev/null
+++ b/src/app/components/IconMergeContainer/index.ts
@@ -0,0 +1,3 @@
+import IconMergeContainer from "./IconMergeContainer"
+
+export default IconMergeContainer
diff --git a/src/app/components/IconStyleSelector/IconStyleSelector.component.scss b/src/app/components/IconStyleSelector/IconStyleSelector.component.scss
new file mode 100755
index 0000000..79eab90
--- /dev/null
+++ b/src/app/components/IconStyleSelector/IconStyleSelector.component.scss
@@ -0,0 +1,3 @@
+.ar-IconStyleSelector {
+
+}
diff --git a/src/app/components/IconStyleSelector/IconStyleSelector.test.ts b/src/app/components/IconStyleSelector/IconStyleSelector.test.ts
new file mode 100755
index 0000000..6db1144
--- /dev/null
+++ b/src/app/components/IconStyleSelector/IconStyleSelector.test.ts
@@ -0,0 +1,8 @@
+import React from "react"
+import IconStyleSelector from "./IconStyleSelector"
+
+describe("IconStyleSelector", () => {
+ it("renders without error", () => {
+
+ })
+})
diff --git a/src/app/components/IconStyleSelector/IconStyleSelector.tsx b/src/app/components/IconStyleSelector/IconStyleSelector.tsx
new file mode 100755
index 0000000..c40c16b
--- /dev/null
+++ b/src/app/components/IconStyleSelector/IconStyleSelector.tsx
@@ -0,0 +1,87 @@
+import { v4 as uuid } from "uuid"
+import { IconStyleSelectorProps } from "../../types/components.interface"
+import { IconStyles } from "../../types/entity.interface"
+import AdvancedColorPicker from "../atoms/AdvancedColorPicker"
+import { Slider } from ".."
+import "./IconStyleSelector.component.scss"
+
+const fillColorId = uuid()
+const strokeColorId = uuid()
+const bgColorId = uuid()
+
+const IconStyleSelector = (props: IconStyleSelectorProps): JSX.Element => {
+ const { layout, setIconStyles } = props
+
+ const setIconStylesLocal = (propName: string, propValue: string) => {
+ console.log(propName)
+ setIconStyles((currentIconStyles: IconStyles) => ({
+ ...currentIconStyles,
+ [propName]: propValue,
+ }))
+ }
+
+ const fill = (
+ setIconStylesLocal("fillColor", color)}
+ title="Fill Color"
+ />
+ )
+
+ const strokeWidth = (
+ setIconStylesLocal("strokeWidth", e.target.value)}
+ withManual
+ />
+ )
+ const stroke = (
+ setIconStylesLocal("strokeColor", color)}
+ title="Stroke Color"
+ />
+ )
+
+ const bg = (
+ setIconStylesLocal("bgColor", color)}
+ title="Background Color"
+ />
+ )
+
+ return (
+ ()
const [icons, setIcons] = useState>()
const [page, setPage] = useState>()
const [view, setView] = useState()
const [loading, setLoading] = useState()
+ const [isSelectMode, toggleSelectMode] = useState()
+ const [selectedIcons, setSelectedIcons] = useState>()
const dispatch = useAppDispatch()
const favorites = useAppSelector(getFavorites)
const selectedTag = useAppSelector(getSelectedTag)
+ const iconStyles = useAppSelector(getIconStyles)
+
+ const navigate = useNavigate()
useEffect(() => {
setView({ name: ArIconTileTypes.COMFY })
@@ -87,7 +101,9 @@ const IconsList = (props: IconsListProps): JSX.Element => {
useEffect(() => {
if (favorites) {
dispatch(
- setRightPanelContent(favorites.length > 0 ? "FavoritesList" : ""),
+ setRightPanelContent(
+ favorites.length > 0 ? { name: "FavoritesList" } : { name: "" },
+ ),
)
}
}, [favorites, dispatch])
@@ -97,21 +113,35 @@ const IconsList = (props: IconsListProps): JSX.Element => {
if (selectedTag) {
filters.tags = selectedTag
}
- if (searchString) {
- filters.search = searchString
+ if (searchText) {
+ filters.search = searchText
}
setLoading(true)
fetchIconsPage(2000, 0, filters, setIcons, setPage, setLoading)
- }, [selectedTag, searchString])
+ }, [selectedTag, searchText])
const onIconTileClick = (iconProps: IconResponse) => {
- dispatch(
- notify({
- show: true,
- message: `Icon link for ${iconProps.name} copied`,
- uid: uuid(),
- }),
- )
+ isSelectMode
+ ? setSelectedIcons((currentIcons) => {
+ currentIcons = [...(currentIcons || [])]
+ const existingIconIndex = currentIcons?.findIndex(
+ (currentIcon) => currentIcon.name === iconProps.name,
+ )
+ if (existingIconIndex > -1) {
+ currentIcons.splice(existingIconIndex, 1)
+ } else {
+ currentIcons.push(iconProps)
+ }
+ return currentIcons
+ })
+ : view?.name === ArIconTileTypes.COMPACT &&
+ dispatch(
+ notify({
+ show: true,
+ message: `Icon link for ${iconProps.name} copied`,
+ uid: uuid(),
+ }),
+ )
}
return (
@@ -121,7 +151,7 @@ const IconsList = (props: IconsListProps): JSX.Element => {
)}
) : null
-}
+})
export default SidePanel
diff --git a/src/app/components/TaskLoginPrompt/TaskLoginPrompt.tsx b/src/app/components/TaskLoginPrompt/TaskLoginPrompt.tsx
index 31fd9fc..08e3121 100755
--- a/src/app/components/TaskLoginPrompt/TaskLoginPrompt.tsx
+++ b/src/app/components/TaskLoginPrompt/TaskLoginPrompt.tsx
@@ -54,7 +54,7 @@ const TaskLoginPrompt = (props: TaskLoginPromptProps): JSX.Element => {
variant={ArButtonVariants.SUCCESS}
postIcon="io5/IoArrowForwardCircle"
onClick={() => {
- dispatch(setRightPanelContent("LoginProvider"))
+ dispatch(setRightPanelContent({ name: "LoginProvider" }))
}}
/>
diff --git a/src/app/components/atoms/Accordion/Accordion.component.scss b/src/app/components/atoms/Accordion/Accordion.component.scss
new file mode 100755
index 0000000..5c73cd5
--- /dev/null
+++ b/src/app/components/atoms/Accordion/Accordion.component.scss
@@ -0,0 +1,36 @@
+.ar-Accordion {
+ .ar-AccordionExpansionPanel {
+ .ar-AccordionExpansionPanel__content {
+ max-height: 0;
+ transition: max-height 0.3s;
+ overflow: auto;
+ }
+ &.expanded {
+ .ar-AccordionExpansionPanel__title-expand-icon {
+ transform: rotateZ(90deg);
+ }
+ .ar-AccordionExpansionPanel__content {
+ max-height: 100vh;
+ }
+ }
+ &:not(:last-child) .ar-AccordionExpansionPanel__title, .ar-AccordionExpansionPanel__content {
+ border-bottom: var(--ar-border);
+ }
+
+ .ar-AccordionExpansionPanel__title-expand-icon {
+ transition: transform 0.3s;
+ }
+ }
+
+ &.stacked {
+ border-radius: 5px;
+ overflow: hidden;
+ border: var(--ar-border);
+ .ar-AccordionExpansionPanel {
+ .ar-AccordionExpansionPanel__title {
+ background-color: var(--ar-bg-mild);
+
+ }
+ }
+ }
+}
diff --git a/src/app/components/atoms/Accordion/Accordion.test.ts b/src/app/components/atoms/Accordion/Accordion.test.ts
new file mode 100755
index 0000000..ebd703d
--- /dev/null
+++ b/src/app/components/atoms/Accordion/Accordion.test.ts
@@ -0,0 +1,8 @@
+import React from "react"
+import Accordion from "./Accordion"
+
+describe("Accordion", () => {
+ it("renders without error", () => {
+
+ })
+})
diff --git a/src/app/components/atoms/Accordion/Accordion.tsx b/src/app/components/atoms/Accordion/Accordion.tsx
new file mode 100755
index 0000000..56aea54
--- /dev/null
+++ b/src/app/components/atoms/Accordion/Accordion.tsx
@@ -0,0 +1,162 @@
+import { ReactNode, useEffect, useState } from "react"
+import { v4 as uuid } from "uuid"
+import { LoadableIcon } from ".."
+import { AccordionExpansionPanelProps, AccordionProps } from ".."
+import { ArAccordionVariants, ArThemes } from "../../../types/enums"
+import "./Accordion.component.scss"
+
+const dummyData = [
+ {
+ id: uuid(),
+ title: "Slide In",
+ content:
+ "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut laoreet tellus ante, et gravida massa egestas ac. Maecenas venenatis dui a eros maximus, vitae fringilla metus ultrices. Etiam at lacinia magna. Vestibulum sagittis felis sed diam ullamcorper, vel pharetra quam facilisis. Suspendisse bibendum ante id risus interdum, vel sodales felis egestas. Mauris vitae dui gravida, dictum sem id, accumsan tellus. Aliquam sodales quam efficitur, congue justo a, consectetur ante. Nunc euismod augue ac ante condimentum tincidunt. Quisque bibendum semper velit. Cras sit amet imperdiet dolor, ac aliquet mi. Morbi elementum magna eros, in venenatis nunc laoreet eget. Etiam at lorem suscipit, interdum augue id, scelerisque risus. Suspendisse at nisi lorem. Morbi libero erat, vestibulum at pulvinar at, ultrices ac turpis. Etiam ac leo gravida, semper quam in, tempus ipsum. Phasellus finibus rhoncus cursus. Maecenas dapibus ex ut congue eleifend. Sed luctus consectetur quam, at malesuada enim condimentum non.",
+ },
+ {
+ id: uuid(),
+ title: "Slide Out",
+ content: (
+
+ ),
+ },
+ {
+ id: uuid(),
+ title: "Fade",
+ content:
+ "Donec varius lorem vel orci aliquam, nec venenatis turpis commodo. Ut ac diam nisi. Integer at lorem ac ligula vehicula porta. Proin tempor lorem a nunc auctor, rhoncus porta elit auctor. Duis imperdiet dictum luctus. Sed eget orci mattis, sagittis quam ac, congue arcu. Praesent blandit mattis sem, eget rutrum neque auctor id. Vestibulum eu augue ut nisl tempus iaculis. Nullam id tortor sed ante tincidunt consectetur et eu odio. Aliquam accumsan turpis ac dictum interdum.",
+ },
+ {
+ id: uuid(),
+ title: "Rotate",
+ content:
+ "Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec metus augue, tempus vitae neque in, accumsan faucibus velit. Quisque felis lorem, tristique nec finibus consequat, viverra quis nibh. Donec arcu mi, placerat eget pretium non, molestie vitae leo. Nunc cursus id mi quis malesuada.",
+ },
+ {
+ id: uuid(),
+ title: "Scale",
+ content:
+ "Integer dapibus aliquet bibendum. Quisque id lobortis dolor, in bibendum enim. Cras mollis iaculis metus et tincidunt. Maecenas fermentum porttitor faucibus. Suspendisse feugiat ac enim nec vulputate. Aliquam egestas ante ac tempor blandit. Etiam vehicula, dui sed facilisis rhoncus, quam tortor efficitur sapien, eu imperdiet nisi magna et dui. Nulla a justo odio.",
+ },
+]
+
+const AccordionExpansionPanel = (
+ props: AccordionExpansionPanelProps,
+): ReactNode => {
+ const {
+ classes,
+ content,
+ expanded: expandedPre,
+ id,
+ isRemovable,
+ setExpandedId,
+ theme,
+ title,
+ } = props
+ const [expanded, setExpanded] = useState
+
+ DomHelper.downloadSvg(
+ (icon as ObjectType).icon as string,
+ name,
+ {
+ size: "3rem",
+ ...iconStyles,
+ color: iconStyles?.strokeColor || "royalblue",
+ },
+ )
+ }
+ />
-
+
-
+
+ DomHelper.downloadSvg(
+ (icon as ObjectType).icon as string,
+ name,
+ {
+ size: "7rem",
+ ...iconStyles,
+ color: iconStyles?.strokeColor || "royalblue",
+ },
+ )
+ }
+ />
+
)
diff --git a/src/app/components/IconEditor/IconEditor.component.scss b/src/app/components/IconEditor/IconEditor.component.scss
new file mode 100755
index 0000000..c39e0d7
--- /dev/null
+++ b/src/app/components/IconEditor/IconEditor.component.scss
@@ -0,0 +1,2 @@
+.ar-IconEditor {
+}
diff --git a/src/app/components/IconEditor/IconEditor.test.ts b/src/app/components/IconEditor/IconEditor.test.ts
new file mode 100755
index 0000000..f8c4ed4
--- /dev/null
+++ b/src/app/components/IconEditor/IconEditor.test.ts
@@ -0,0 +1,8 @@
+import React from "react"
+import IconEditor from "./IconEditor"
+
+describe("IconEditor", () => {
+ it("renders without error", () => {
+
+ })
+})
diff --git a/src/app/components/IconEditor/IconEditor.tsx b/src/app/components/IconEditor/IconEditor.tsx
new file mode 100755
index 0000000..f258605
--- /dev/null
+++ b/src/app/components/IconEditor/IconEditor.tsx
@@ -0,0 +1,47 @@
+import { useEffect, useState } from "react"
+import { v4 as uuid } from "uuid"
+import { useAppDispatch } from "../../hooks"
+import { setIconStyles } from "../../pages/IconPage/IconPage.slice"
+import { TabBar, IconStyleSelector } from ".."
+import { IconEditorProps, TabProps } from "../../types/components.interface"
+import "./IconEditor.component.scss"
+
+const iconEditorTabs = [
+ {
+ label: "Icon",
+ id: uuid(),
+ },
+ {
+ label: "Background",
+ id: uuid(),
+ },
+]
+
+const IconEditor = (props: IconEditorProps): JSX.Element => {
+ const { layout } = props
+ const [iconStyles, setIconStylesState] = useState<{
+ fillColor?: string
+ strokeColor?: string
+ bgColor?: string
+ strokeWidth?: string
+ }>()
+ const dispatch = useAppDispatch()
+
+ useEffect(() => {
+ iconStyles && dispatch(setIconStyles(iconStyles))
+ }, [iconStyles, dispatch])
+
+ return (
+
+
+ DomHelper.downloadSvg(
+ (icon as ObjectType).icon as string,
+ name,
+ {
+ size: size && unit ? size + unit : "20rem",
+ ...iconStyles,
+ color: iconStyles?.strokeColor || "royalblue",
+ },
+ )
+ }
+ />
-
@@ -170,11 +353,16 @@ const IconController = (props: IconControllerProps): JSX.Element => {
-
-
-
-
+ {icon && (
+
-
+ ).map((key) => [key.name, 1]),
+ )}
+ />
+ )}
+
+ )}
+ Icon Details
+
+
+
+ Created By:
+ {icon.createdby as string}
+
+
+
+
+ Description:
+ {icon.description as string}
+
+
+
+
+ Downloaded:
+ {((icon.meta as ObjectType)?.downloadedTimes as number) ||
+ 0}
+
+
+
+
+ Liked:
+ {((icon.meta as ObjectType)?.downloadedTimes as number) ||
+ 0}
+
+
+
+
+ Size:
+ {(icon.meta as ObjectType)?.size as number}
+
+
@@ -161,7 +332,19 @@ const IconController = (props: IconControllerProps): JSX.Element => {
+
+ )
+}
+
+export default IconEditor
diff --git a/src/app/components/IconEditor/index.ts b/src/app/components/IconEditor/index.ts
new file mode 100755
index 0000000..0355f36
--- /dev/null
+++ b/src/app/components/IconEditor/index.ts
@@ -0,0 +1,3 @@
+import IconEditor from "./IconEditor"
+
+export default IconEditor
diff --git a/src/app/components/IconMergeContainer/IconMergeContainer.component.scss b/src/app/components/IconMergeContainer/IconMergeContainer.component.scss
new file mode 100755
index 0000000..148b110
--- /dev/null
+++ b/src/app/components/IconMergeContainer/IconMergeContainer.component.scss
@@ -0,0 +1,12 @@
+.ar-IconMergeContainer {
+ svg {
+ width: 5rem;
+ height: 5rem;
+ margin-left: 2rem;
+ margin-right: 2rem;
+
+ path:hover {
+ outline: 1px dotted grey;
+ }
+ }
+}
diff --git a/src/app/components/IconMergeContainer/IconMergeContainer.test.ts b/src/app/components/IconMergeContainer/IconMergeContainer.test.ts
new file mode 100755
index 0000000..9b077fc
--- /dev/null
+++ b/src/app/components/IconMergeContainer/IconMergeContainer.test.ts
@@ -0,0 +1,8 @@
+import React from "react"
+import IconMergeContainer from "./IconMergeContainer"
+
+describe("IconMergeContainer", () => {
+ it("renders without error", () => {
+
+ })
+})
diff --git a/src/app/components/IconMergeContainer/IconMergeContainer.tsx b/src/app/components/IconMergeContainer/IconMergeContainer.tsx
new file mode 100755
index 0000000..5bfd51f
--- /dev/null
+++ b/src/app/components/IconMergeContainer/IconMergeContainer.tsx
@@ -0,0 +1,154 @@
+import { useEffect, useRef } from "react"
+import { IconMergeContainerProps } from "../../types/components.interface"
+import { DomHelper } from "../../utils"
+import "./IconMergeContainer.component.scss"
+import { ArrayType, ObjectType } from "../../types/types"
+
+const iconTest = [
+ {
+ name: "CiAlignBottom",
+ icon: '',
+ createdby: "Armco",
+ createdAt: "2023-10-14T20:46:51.541Z",
+ updatedAt: "2023-10-14T20:46:51.541Z",
+ meta: {
+ size: "772 bytes",
+ downloadTimes: 0,
+ favoriteTimes: 0,
+ },
+ group: "ci",
+ description: "",
+ tags: [
+ {
+ name: "Ci",
+ state: "verified",
+ },
+ {
+ name: "Align",
+ state: "verified",
+ },
+ {
+ name: "Bottom",
+ state: "verified",
+ },
+ {
+ name: "icon",
+ state: "verified",
+ },
+ {
+ name: "armco",
+ state: "verified",
+ },
+ ],
+ },
+ {
+ name: "CiAlignCenterH",
+ icon: '',
+ createdby: "Armco",
+ createdAt: "2023-10-14T20:46:51.541Z",
+ updatedAt: "2023-10-14T20:46:51.541Z",
+ meta: {
+ size: "790 bytes",
+ downloadTimes: 0,
+ favoriteTimes: 0,
+ },
+ group: "ci",
+ description: "",
+ tags: [
+ {
+ name: "Ci",
+ state: "verified",
+ },
+ {
+ name: "Align",
+ state: "verified",
+ },
+ {
+ name: "Center",
+ state: "verified",
+ },
+ {
+ name: "H",
+ state: "verified",
+ },
+ {
+ name: "icon",
+ state: "verified",
+ },
+ {
+ name: "armco",
+ state: "verified",
+ },
+ ],
+ },
+ {
+ name: "CiAlignCenterV",
+ icon: '',
+ createdby: "Armco",
+ createdAt: "2023-10-14T20:46:51.541Z",
+ updatedAt: "2023-10-14T20:46:51.541Z",
+ meta: {
+ size: "784 bytes",
+ downloadTimes: 0,
+ favoriteTimes: 0,
+ },
+ group: "ci",
+ description: "",
+ tags: [
+ {
+ name: "Ci",
+ state: "verified",
+ },
+ {
+ name: "Align",
+ state: "verified",
+ },
+ {
+ name: "Center",
+ state: "verified",
+ },
+ {
+ name: "V",
+ state: "verified",
+ },
+ {
+ name: "icon",
+ state: "verified",
+ },
+ {
+ name: "armco",
+ state: "verified",
+ },
+ ],
+ },
+]
+const IconMergeContainer = (props: IconMergeContainerProps): JSX.Element => {
+ const { icons } = props
+ const svgRef = useRef
+
+
+ {layout === "horizontal" ? (
+ <>
+
+ )
+}
+
+export default IconStyleSelector
diff --git a/src/app/components/IconStyleSelector/index.ts b/src/app/components/IconStyleSelector/index.ts
new file mode 100755
index 0000000..7a9d159
--- /dev/null
+++ b/src/app/components/IconStyleSelector/index.ts
@@ -0,0 +1,3 @@
+import IconStyleSelector from "./IconStyleSelector"
+
+export default IconStyleSelector
diff --git a/src/app/components/IconsList/IconsList.component.scss b/src/app/components/IconsList/IconsList.component.scss
index 66ee372..6d07f02 100755
--- a/src/app/components/IconsList/IconsList.component.scss
+++ b/src/app/components/IconsList/IconsList.component.scss
@@ -2,7 +2,19 @@
.ar-IconsList__header-pagination-search-upload {
background-color: var(--ar-bg);
color: var(--ar-colora);
- background-color: var(--ar-bg-base);
+ }
+
+ .ar-IconList__selection-manager {
+ background-color: var(--ar-bg);
+ color: var(--ar-colora);
+ transition: all 0.3s;
+
+ &.hide {
+ height: 0;
+ overflow: hidden;
+ padding: 0 !important;
+ border: none !important;
+ }
}
.ar-IconsList__icon-tile-container {
@@ -36,4 +48,20 @@
background-color: var(--ar-bg-base);
}
}
+
+ .ar-IconsList__upload-button {
+ background-color: orange;
+ border-color: orange;
+ }
+
+ .ar-IconsList__color-palette {
+ border-radius: 50%;
+ }
+
+ @media screen and (max-width: 576px) {
+ .ar-IconTile {
+ width: 3rem;
+ height: 3rem;
+ }
+ }
}
diff --git a/src/app/components/IconsList/IconsList.tsx b/src/app/components/IconsList/IconsList.tsx
index 79b00f4..56be79b 100755
--- a/src/app/components/IconsList/IconsList.tsx
+++ b/src/app/components/IconsList/IconsList.tsx
@@ -1,4 +1,5 @@
import { ChangeEvent, useEffect, useState } from "react"
+import { useNavigate } from "react-router-dom"
import { v4 as uuid } from "uuid"
import { useAppDispatch, useAppSelector } from "../../hooks"
import { notify, setRightPanelContent } from "../../store"
@@ -8,11 +9,18 @@ import {
removeFavorite,
setFavorites,
} from "../../pages/IconsPage/IconsPage.slice"
+import {
+ getIconStyles,
+ setIconStyles,
+} from "../../pages/IconPage/IconPage.slice"
import {
Button,
+ IconStyleSelector,
IconTile,
+ LoadableIcon,
Loader,
Pagination,
+ Pillbox,
Popover,
Search,
SegmentedControl,
@@ -21,11 +29,11 @@ import {
ArButtonVariants,
ArIconTileTypes,
ArLoaderTypes,
- ArPageTriggers,
ArPopoverSlots,
ArPopoverTriggers,
ArSizes,
} from "../../types/enums"
+import { IconStyles, SearchItem } from "../../types/entity.interface"
import { IconTileProps, IconsListProps } from "../../types/components.interface"
import { FunctionType, ObjectType, SegmentType } from "../../types/types"
@@ -71,14 +79,20 @@ const fetchIconsPage = (
}
const IconsList = (props: IconsListProps): JSX.Element => {
- const { onSearchChanged, searchString } = props
+ const { variant } = props
+ const [searchText, setSearchText] = useState
+
+ {fill}
+ {stroke}
+
+
+
+ ) : (
+ <>
+ {fill}
+ {strokeWidth}
+ {stroke}
+ {bg}
+
+ )}
+ {strokeWidth}
+
- ()
+
+ useEffect(() => {
+ const base = LottieHelper.renderStaticImage(icon, iconStyles)
+ if (!selectedPresets || selectedPresets.length === 0) {
+ setLottieJson(base)
+ } else {
+ selectedPresets.forEach(
+ (preset) =>
+ preset.property &&
+ preset.raw &&
+ LottieHelper.injectAnimationInBaseLottieBasic({
+ property: preset.property,
+ juice: preset.raw,
+ base,
+ }),
+ )
+ setLottieJson(base)
+ }
+ }, [selectedPresets])
+
+ return (
+
+ content: ReactNode
+}> = [
+ {
+ id: uuid(),
+ title: "Slide In",
+ content: null,
+ items: [
+ {
+ name: "slideinfromleft",
+ from: "left",
+ raw: slideInFromLeft,
+ property: ArAnimationProperty.POSITION,
+ lottie: LottieHelper.injectAnimationInBaseLottieBasic({
+ property: ArAnimationProperty.POSITION,
+ juice: slideInFromLeft,
+ }),
+ },
+ {
+ name: "slideinfromright",
+ from: "right",
+ raw: slideInFromRight,
+ property: ArAnimationProperty.POSITION,
+ lottie: LottieHelper.injectAnimationInBaseLottieBasic({
+ property: ArAnimationProperty.POSITION,
+ juice: slideInFromRight,
+ }),
+ },
+ {
+ name: "slideinfromtop",
+ from: "top",
+ raw: slideInFromTop,
+ property: ArAnimationProperty.POSITION,
+ lottie: LottieHelper.injectAnimationInBaseLottieBasic({
+ property: ArAnimationProperty.POSITION,
+ juice: slideInFromTop,
+ }),
+ },
+ {
+ name: "slideinfrombottom",
+ from: "bottom",
+ raw: slideInFromBottom,
+ property: ArAnimationProperty.POSITION,
+ lottie: LottieHelper.injectAnimationInBaseLottieBasic({
+ property: ArAnimationProperty.POSITION,
+ juice: slideInFromBottom,
+ }),
+ },
+ ],
+ },
+ {
+ id: uuid(),
+ title: "Slide Out",
+ content: null,
+ items: [
+ {
+ name: "slideouttoleft",
+ to: "left",
+ raw: slideOutToLeft,
+ property: ArAnimationProperty.POSITION,
+ lottie: LottieHelper.injectAnimationInBaseLottieBasic({
+ property: ArAnimationProperty.POSITION,
+ juice: slideOutToLeft,
+ }),
+ },
+ {
+ name: "slideouttoright",
+ to: "right",
+ raw: slideOutToRight,
+ property: ArAnimationProperty.POSITION,
+ lottie: LottieHelper.injectAnimationInBaseLottieBasic({
+ property: ArAnimationProperty.POSITION,
+ juice: slideOutToRight,
+ }),
+ },
+ {
+ name: "slideouttotop",
+ to: "top",
+ raw: slideOutToTop,
+ property: ArAnimationProperty.POSITION,
+ lottie: LottieHelper.injectAnimationInBaseLottieBasic({
+ property: ArAnimationProperty.POSITION,
+ juice: slideOutToTop,
+ }),
+ },
+ {
+ name: "slideouttobottom",
+ to: "bottom",
+ raw: slideOutToBottom,
+ property: ArAnimationProperty.POSITION,
+ lottie: LottieHelper.injectAnimationInBaseLottieBasic({
+ property: ArAnimationProperty.POSITION,
+ juice: slideOutToBottom,
+ }),
+ },
+ ],
+ },
+ {
+ id: uuid(),
+ title: "Fade",
+ content: null,
+ items: [
+ {
+ name: "fadein",
+ raw: fadeIn,
+ property: ArAnimationProperty.OPACITY,
+ lottie: LottieHelper.injectAnimationInBaseLottieBasic({
+ property: ArAnimationProperty.OPACITY,
+ juice: fadeIn,
+ }),
+ },
+ {
+ name: "fadeout",
+ raw: fadeOut,
+ property: ArAnimationProperty.OPACITY,
+ lottie: LottieHelper.injectAnimationInBaseLottieBasic({
+ property: ArAnimationProperty.OPACITY,
+ juice: fadeOut,
+ }),
+ },
+ ],
+ },
+ {
+ id: uuid(),
+ title: "Rotate",
+ content: null,
+ items: [
+ {
+ name: "rotateClockWise",
+ raw: rotateClockWise,
+ property: ArAnimationProperty.ROTATE,
+ lottie: LottieHelper.injectAnimationInBaseLottieBasic({
+ property: ArAnimationProperty.ROTATE,
+ juice: rotateClockWise,
+ }),
+ },
+ {
+ name: "rotateAntiClockWise",
+ raw: rotateAntiClockWise,
+ property: ArAnimationProperty.ROTATE,
+ lottie: LottieHelper.injectAnimationInBaseLottieBasic({
+ property: ArAnimationProperty.ROTATE,
+ juice: rotateAntiClockWise,
+ }),
+ },
+ ],
+ },
+ {
+ id: uuid(),
+ title: "Scale",
+ content: null,
+ items: [
+ {
+ name: "expand",
+ raw: scaleUp,
+ property: ArAnimationProperty.SCALE,
+ lottie: LottieHelper.injectAnimationInBaseLottieBasic({
+ property: ArAnimationProperty.SCALE,
+ juice: scaleUp,
+ }),
+ },
+ {
+ name: "shrink",
+ raw: scaleDown,
+ property: ArAnimationProperty.SCALE,
+ lottie: LottieHelper.injectAnimationInBaseLottieBasic({
+ property: ArAnimationProperty.SCALE,
+ juice: scaleDown,
+ }),
+ },
+ ],
+ },
+ // {
+ // name: "slidein",
+ // lottie: LottieHelper.injectAnimationInBaseLottieBasic({
+ // property: "",
+ // juice: slideInFromLeft,
+ // }),
+ // },
+ // {
+ // name: "slidein",
+ // lottie: LottieHelper.injectAnimationInBaseLottieBasic({
+ // property: "",
+ // juice: slideInFromLeft,
+ // }),
+ // },
+ // {
+ // name: "slidein",
+ // lottie: LottieHelper.injectAnimationInBaseLottieBasic({
+ // property: "",
+ // juice: slideInFromLeft,
+ // }),
+ // },
+ // {
+ // name: "slidein",
+ // lottie: LottieHelper.injectAnimationInBaseLottieBasic({
+ // property: "",
+ // juice: slideInFromLeft,
+ // }),
+ // },
+ // {
+ // name: "slidein",
+ // lottie: LottieHelper.injectAnimationInBaseLottieBasic({
+ // property: "",
+ // juice: slideInFromLeft,
+ // }),
+ // },
+]
+
+const LottieEditorTools = (props: LottieEditorToolsProps): JSX.Element => {
+ const { setSelectedPresets } = props
+ const [lottieTools, setLottieTools] = useState<
+ Array
+ >([])
+ const dispatch = useAppDispatch()
+ const [activeTab, setActiveTab] = useState(editorToolsTabItems[1])
+
+ useEffect(() => {
+ setLottieTools([
+ {
+ id: uuid(),
+ title: "Effects",
+ content: {}} />,
+ },
+ ])
+ }, [])
+
+ presets.forEach(
+ (preset) =>
+ (preset.content = (
+
@@ -38,8 +41,11 @@ const Main = (props: MainProps): JSX.Element => {
Loading...
}>
-
+
-
+
+
+ {}}
+ />
+ {
+ const updatedStyles = iconStylesUpdater(iconStyles)
+ dispatch(setIconStyles(updatedStyles))
+ }}
+ layout="horizontal"
+ />
+
-
+
+
) =>
- onSearchChanged(event.target.value),
+ setSearchText(event.target.value),
1000,
)}
data={
@@ -202,91 +252,153 @@ const IconsList = (props: IconsListProps): JSX.Element => {
+ {selectedIcons && selectedIcons.length > 0 && (
+ ({
+ label: icon.name,
+ deletable: true,
+ }))}
+ onChange={() => {}}
+ />
+ )}
+
{page && (
-
+
+
- {loading && (
-
- {!view || view.name !== ArIconTileTypes.LIST ? (
- {icon.name}
- ) : null}
-
+
)}
{/* {slices && ( */}
diff --git a/src/app/components/LandingContent/LandingContent.component.scss b/src/app/components/LandingContent/LandingContent.component.scss
new file mode 100755
index 0000000..86606ba
--- /dev/null
+++ b/src/app/components/LandingContent/LandingContent.component.scss
@@ -0,0 +1,3 @@
+.ar-LandingContent {
+
+}
diff --git a/src/app/components/LandingContent/LandingContent.test.ts b/src/app/components/LandingContent/LandingContent.test.ts
new file mode 100755
index 0000000..a1ba5a3
--- /dev/null
+++ b/src/app/components/LandingContent/LandingContent.test.ts
@@ -0,0 +1,8 @@
+import React from "react"
+import LandingContent from "./LandingContent"
+
+describe("LandingContent", () => {
+ it("renders without error", () => {
+
+ })
+})
diff --git a/src/app/components/LandingContent/LandingContent.tsx b/src/app/components/LandingContent/LandingContent.tsx
new file mode 100755
index 0000000..96bd504
--- /dev/null
+++ b/src/app/components/LandingContent/LandingContent.tsx
@@ -0,0 +1,82 @@
+import { Hero, ProductDescriptionTile } from ".."
+import { LandingContentProps } from "../../types/components.interface"
+import { ArPlacement } from "../../types/enums"
+import "./LandingContent.component.scss"
+
+const toolsAndProducts = [
+ {
+ name: "Icons & Fonts",
+ description: [
+ "Dive into a world of creativity with our diverse icon assets and fonts.",
+ ],
+ image: "",
+ imagePlacement: ArPlacement.RIGHT,
+ },
+ {
+ name: "Task Manager and Config Manager",
+ description: [
+ "Streamline project management and configuration tasks effortlessly.",
+ "Master project management and configurations with our intuitive tools.",
+ ],
+ image: "",
+ imagePlacement: ArPlacement.RIGHT,
+ },
+ {
+ name: "Components Library",
+ description: [
+ "Indulge in Unmatched Creativity with Our Opinionated and highly customizable Component Library",
+ "Discover a component library like no other, meticulously crafted and opinionated for optimal performance. Our library isn't just about components; it's a playground for creators. Immerse yourself in the richness of our carefully curated elements, each designed with a distinct perspective on aesthetics and functionality.",
+ "Explore a library that doesn't just follow trends but sets them. Elevate your projects with components that speak your language, and let your creativity soar in a space that celebrates individuality. Welcome to a component library where opinion meets innovation, and your designs become a masterpiece.",
+ ],
+ image: "",
+ imagePlacement: ArPlacement.RIGHT,
+ },
+ {
+ name: "Analytics Collector and Viewer",
+ description: [
+ "Showcase the analytics capabilities for data-driven decisions.",
+ "Turn data into insights with our integrated analytics tools.",
+ ],
+ image: "",
+ imagePlacement: ArPlacement.RIGHT,
+ },
+ {
+ name: "IAM",
+ description: [
+ "Explain the identity and access management features.",
+ "Manage identities and access with ease using our robust IAM features.",
+ ],
+ image: "",
+ imagePlacement: ArPlacement.RIGHT,
+ },
+ {
+ name: "APIs",
+ description: [
+ "Highlight the flexibility of APIs for integration into various workflows.",
+ "Harness the flexibility of APIs for seamless integration into your development workflow.",
+ ],
+ image: "",
+ imagePlacement: ArPlacement.RIGHT,
+ },
+]
+
+const LandingContent = (props: LandingContentProps): JSX.Element => {
+ return (
+
+ {loading && (
+
+ {!view || view.name !== ArIconTileTypes.LIST ? (
+
+ {icon.name
+ ?.match(/[A-Z][a-z]+/g)
+ ?.slice(1)
+ .join(" ")}
+
+ ) : null}
+ {},
+ },
+ ],
+ name: "more-options",
+ onClick: () => {},
},
- name: "share",
- onClick: () => {},
- },
- {
- iconProps: {
- icon: "ai/AiFillLike",
- color: "white",
- hoverColor: "lightblue",
+ {
+ iconProps: {
+ icon: "ai/AiFillLike",
+ color: "white",
+ hoverColor: "lightblue",
+ },
+ name: "like",
+ onClick: () => {},
},
- name: "like",
- onClick: () => {},
- },
- {
- iconProps: {
- icon: "md/MdFavorite",
- hoverColor: "lightblue",
- toggleColor: "red",
- color: "white",
- toggled: false,
- },
- name: "favorite",
- onClick: () => {
- const favorite = favorites.find(
- (searchedIcon: IconTileProps) =>
- icon.name === searchedIcon.icon.name,
- )
- if (!favorites || !favorite) {
- dispatch(setFavorites({ icon }))
- dispatch(
- notify({
- message: "Icon Added to your favorites",
- show: true,
- uid: uuid(),
- }),
+ {
+ iconProps: {
+ icon: "md/MdFavorite",
+ hoverColor: "lightblue",
+ toggleColor: "red",
+ color: "white",
+ toggled: false,
+ },
+ name: "favorite",
+ onClick: () => {
+ const favorite = favorites.find(
+ (searchedIcon: IconTileProps) =>
+ icon.name === searchedIcon.icon.name,
)
- } else {
- dispatch(removeFavorite({ icon }))
- dispatch(
- notify({
- message: "Icon removed from your favorites",
- show: true,
- uid: uuid(),
- }),
- )
- }
+ if (!favorites || !favorite) {
+ dispatch(setFavorites({ icon }))
+ dispatch(
+ notify({
+ message: "Icon Added to your favorites",
+ show: true,
+ uid: uuid(),
+ }),
+ )
+ } else {
+ dispatch(removeFavorite({ icon }))
+ dispatch(
+ notify({
+ message: "Icon removed from your favorites",
+ show: true,
+ uid: uuid(),
+ }),
+ )
+ }
+ },
},
- },
- ]}
- hideFooter={
- (view && (view.name as ArIconTileTypes)) !==
- ArIconTileTypes.LIST
- }
- />
-
- ))}
+ ]}
+ hideFooter={
+ (view && (view.name as ArIconTileTypes)) !==
+ ArIconTileTypes.LIST
+ }
+ selectable={isSelectMode}
+ fillColor={iconStyles?.fillColor}
+ strokeColor={iconStyles?.strokeColor}
+ strokeWidth={iconStyles?.strokeWidth}
+ />
+
+ ))}
+
+
+ )
+}
+
+export default LandingContent
diff --git a/src/app/components/LandingContent/index.ts b/src/app/components/LandingContent/index.ts
new file mode 100755
index 0000000..1d09f7a
--- /dev/null
+++ b/src/app/components/LandingContent/index.ts
@@ -0,0 +1,3 @@
+import LandingContent from "./LandingContent"
+
+export default LandingContent
diff --git a/src/app/components/LoginProvider/LoginProvider.tsx b/src/app/components/LoginProvider/LoginProvider.tsx
index 9448692..bc18bd0 100755
--- a/src/app/components/LoginProvider/LoginProvider.tsx
+++ b/src/app/components/LoginProvider/LoginProvider.tsx
@@ -1,14 +1,29 @@
+import { setRightPanelContent } from "../../store"
+import { useAppDispatch } from "../../hooks"
+import { Button } from ".."
import { LoginProviderProps } from "../../types/components.interface"
+import { ArButtonVariants, ArSizes } from "../../types/enums"
+import WEB_CONFIG from "../../config/web-config"
import "./LoginProvider.component.scss"
const LoginProvider = (props: LoginProviderProps): JSX.Element => {
+ const { url } = props
+ const dispatch = useAppDispatch()
return (
-
+
+ {toolsAndProducts.map((item) => {
+ return (
+
+
+
+ )
+ })}
+
+
+
+
+
)
}
diff --git a/src/app/components/LottieEditor/LottieEditor.component.scss b/src/app/components/LottieEditor/LottieEditor.component.scss
new file mode 100755
index 0000000..a8ce78d
--- /dev/null
+++ b/src/app/components/LottieEditor/LottieEditor.component.scss
@@ -0,0 +1,10 @@
+.ar-LottieEditor {
+ .ar-LottieEditor__header-download {
+ background-color: var(--ar-bg);
+ color: var(--ar-colora);
+ }
+ .ar-LottieEditor__lottie-preview {
+ background-color: var(--ar-bg);
+ color: var(--ar-color);
+ }
+}
diff --git a/src/app/components/LottieEditor/LottieEditor.test.ts b/src/app/components/LottieEditor/LottieEditor.test.ts
new file mode 100755
index 0000000..311eabb
--- /dev/null
+++ b/src/app/components/LottieEditor/LottieEditor.test.ts
@@ -0,0 +1,8 @@
+import React from "react"
+import LottieEditor from "./LottieEditor"
+
+describe("LottieEditor", () => {
+ it("renders without error", () => {
+
+ })
+})
diff --git a/src/app/components/LottieEditor/LottieEditor.tsx b/src/app/components/LottieEditor/LottieEditor.tsx
new file mode 100755
index 0000000..e545d96
--- /dev/null
+++ b/src/app/components/LottieEditor/LottieEditor.tsx
@@ -0,0 +1,110 @@
+import { useEffect, useState } from "react"
+import { useLocation } from "react-router-dom"
+import { Controls, Player } from "@lottiefiles/react-lottie-player"
+import { Button } from ".."
+import { LottieEditorProps } from "../../types/components.interface"
+import { Animation } from "../../types/lottie"
+import LottieHelper from "../../utils/lottieHelper"
+import { ArButtonVariants } from "../../types/enums"
+import { Helper, Network } from "../../utils"
+import API_CONFIG from "../../config/api-config"
+import { ENDPOINTS } from "../../config/constants"
+import "./LottieEditor.component.scss"
+
+const LottieEditor = (props: LottieEditorProps): JSX.Element => {
+ const { selectedPresets } = props
+ const location = useLocation()
+ const icon = location.state?.icon
+ const iconStyles = location.state?.iconStyles
+ const [lottieJson, setLottieJson] = useState
+
+ )
+}
+
+export default LottieEditor
diff --git a/src/app/components/LottieEditor/index.ts b/src/app/components/LottieEditor/index.ts
new file mode 100755
index 0000000..2787f2d
--- /dev/null
+++ b/src/app/components/LottieEditor/index.ts
@@ -0,0 +1,3 @@
+import LottieEditor from "./LottieEditor"
+
+export default LottieEditor
diff --git a/src/app/components/LottieEditorTools/LottieEditorTools.component.scss b/src/app/components/LottieEditorTools/LottieEditorTools.component.scss
new file mode 100755
index 0000000..a5d88a6
--- /dev/null
+++ b/src/app/components/LottieEditorTools/LottieEditorTools.component.scss
@@ -0,0 +1,18 @@
+.ar-LottieEditorTools {
+ width: calc(20rem + 2px + 1rem); // add border and padding
+
+ .ar-LottieEditorTools__header__close-button {
+ font-size: 0.7rem !important;
+ color: rgb(154, 92, 92) !important;
+ transition: color 0.4s;
+
+ &:hover {
+ color: rgb(242, 51, 51) !important;
+ }
+ }
+
+ .ar-LottieEditorTools__tab-content {
+ height: calc(100% - 2rem - 1px - 8px); // subtract header height, bottom border and bottom margin
+ overflow: auto;
+ }
+}
diff --git a/src/app/components/LottieEditorTools/LottieEditorTools.test.ts b/src/app/components/LottieEditorTools/LottieEditorTools.test.ts
new file mode 100755
index 0000000..625c242
--- /dev/null
+++ b/src/app/components/LottieEditorTools/LottieEditorTools.test.ts
@@ -0,0 +1,8 @@
+import React from "react"
+import LottieEditorTools from "./LottieEditorTools"
+
+describe("LottieEditorTools", () => {
+ it("renders without error", () => {
+
+ })
+})
diff --git a/src/app/components/LottieEditorTools/LottieEditorTools.tsx b/src/app/components/LottieEditorTools/LottieEditorTools.tsx
new file mode 100755
index 0000000..8766fa7
--- /dev/null
+++ b/src/app/components/LottieEditorTools/LottieEditorTools.tsx
@@ -0,0 +1,334 @@
+import { ReactNode, memo, useEffect, useState } from "react"
+import { v4 as uuid } from "uuid"
+import { setRightPanelContent } from "../../store"
+import { useAppDispatch } from "../../hooks"
+import { Accordion, Button, LottieTile, Pillbox, TabBar } from ".."
+import {
+ AccordionExpansionPanelProps,
+ LottieEditorToolsProps,
+ TabProps,
+} from "../../types/components.interface"
+import {
+ ArAccordionStyles,
+ ArAccordionVariants,
+ ArAnimationProperty,
+ ArButtonVariants,
+ ArSizes,
+ ArTabType,
+} from "../../types/enums"
+import { PresetDefinition } from "../../types/entity.interface"
+import LottieHelper from "../../utils/lottieHelper"
+import {
+ scaleDown,
+ scaleUp,
+ slideInFromTop,
+ slideInFromLeft,
+ fadeOut,
+ slideOutToLeft,
+ slideOutToTop,
+ slideInFromBottom,
+ slideOutToBottom,
+ slideInFromRight,
+ slideOutToRight,
+ fadeIn,
+ rotateClockWise,
+ rotateAntiClockWise,
+} from "../../static/LottieConfigs/presets"
+import "./LottieEditorTools.component.scss"
+
+const editorToolsTabItems = [
+ {
+ label: "Customize",
+ id: uuid(),
+ },
+ {
+ label: "Presets",
+ id: uuid(),
+ isActive: true,
+ },
+]
+
+export const presets: Array<{
+ id: string
+ title: string
+ items: Array
+
+
+
+
+
+
+
+
+
+
+
+
+ {preset.items.map((preset, index) => (
+
+ )),
+ )
+
+ return (
+
+
+
+
+ )
+}
+
+export default LottieEditorTools
diff --git a/src/app/components/LottieEditorTools/index.ts b/src/app/components/LottieEditorTools/index.ts
new file mode 100755
index 0000000..dee25d5
--- /dev/null
+++ b/src/app/components/LottieEditorTools/index.ts
@@ -0,0 +1,3 @@
+import LottieEditorTools from "./LottieEditorTools"
+
+export default LottieEditorTools
diff --git a/src/app/components/LottieLayers/LottieLayers.component.scss b/src/app/components/LottieLayers/LottieLayers.component.scss
new file mode 100755
index 0000000..8172ca6
--- /dev/null
+++ b/src/app/components/LottieLayers/LottieLayers.component.scss
@@ -0,0 +1,3 @@
+.ar-LottieLayers {
+
+}
diff --git a/src/app/components/LottieLayers/LottieLayers.test.ts b/src/app/components/LottieLayers/LottieLayers.test.ts
new file mode 100755
index 0000000..24bfbf1
--- /dev/null
+++ b/src/app/components/LottieLayers/LottieLayers.test.ts
@@ -0,0 +1,8 @@
+import React from "react"
+import LottieLayers from "./LottieLayers"
+
+describe("LottieLayers", () => {
+ it("renders without error", () => {
+
+ })
+})
diff --git a/src/app/components/LottieLayers/LottieLayers.tsx b/src/app/components/LottieLayers/LottieLayers.tsx
new file mode 100755
index 0000000..f3596c1
--- /dev/null
+++ b/src/app/components/LottieLayers/LottieLayers.tsx
@@ -0,0 +1,32 @@
+import { LottieLayersProps } from "../../types/components.interface"
+import { Button, Popover } from ".."
+import TreeList from "../atoms/TreeList"
+import {
+ ArButtonVariants,
+ ArPopoverSlots,
+ ArPopoverTriggers,
+ ArSizes,
+} from "../../types/enums"
+import "./LottieLayers.component.scss"
+
+const LottieLayers = (props: LottieLayersProps): JSX.Element => {
+ return (
+
+ setActiveTab(data)}
+ />
+
+
+ {activeTab?.id === editorToolsTabItems[1].id ? (
+
+
+ {/*
+
+ */}
+
+ )
+}
+
+export default LottieLayers
diff --git a/src/app/components/LottieLayers/index.ts b/src/app/components/LottieLayers/index.ts
new file mode 100755
index 0000000..dd7e7c6
--- /dev/null
+++ b/src/app/components/LottieLayers/index.ts
@@ -0,0 +1,3 @@
+import LottieLayers from "./LottieLayers"
+
+export default LottieLayers
diff --git a/src/app/components/Main/Main.component.scss b/src/app/components/Main/Main.component.scss
index 1442d77..d4b5673 100755
--- a/src/app/components/Main/Main.component.scss
+++ b/src/app/components/Main/Main.component.scss
@@ -5,8 +5,20 @@
&.collapsed {
width: 3.5rem;
}
- & + .ar-Content {
- // width: 85%;
+ }
+
+ @media screen and (max-width: 576px) {
+ .ar-Drawer {
+ position: fixed !important;
+ left: 0;
+ height: 100%;
+ width: 75%;
+ z-index: 1;
+ background-color: var(--ar-bg);
+
+ &.collapsed {
+ width: 0;
+ }
}
}
}
diff --git a/src/app/components/Main/Main.tsx b/src/app/components/Main/Main.tsx
index e1b6988..e90c1a2 100755
--- a/src/app/components/Main/Main.tsx
+++ b/src/app/components/Main/Main.tsx
@@ -4,13 +4,13 @@ import { ErrorBoundary, SidePanel } from ".."
import { ArPlacement } from "../../types/enums"
import { MainProps } from "../../types/components.interface"
import "./Main.component.scss"
-import { ReactNode } from "react"
const Main = (props: MainProps): JSX.Element => {
const {
contentClasses,
drawerContent,
mainContent,
+ hideSidepanelCloseButton,
rightPanelContent,
leftPanelContent,
rightPanelHeader,
@@ -24,13 +24,16 @@ const Main = (props: MainProps): JSX.Element => {
)}
+ Add a new layer or one of the lottie configurations from the panel
+ towards the right
+
+
- {header && (
-
-
+
+ {!hideCloseButton && (
+
-
- )}
+ {header}
-
+ {header && (
+ Loading...
}>
+
+ )}
+ {header}
+
+
+ )
+}
+
+const Accordion = (props: AccordionProps): JSX.Element => {
+ const {
+ appearance,
+ classes,
+ data,
+ demo,
+ firstExpanded,
+ isRemovable,
+ theme,
+ variant,
+ } = props
+ const [expanded, setExpanded] = useState {
+ setExpanded(!expanded)
+ setExpandedId && setExpandedId(id)
+ }}
+ >
+
+
+
+ {typeof content === "string" ? (
+
+ {content}
+ ) : (
+ content
+ )}
+
+ {localData?.map((item, index) => {
+ item.setExpandedId = setExpanded
+ item.isRemovable =
+ item.isRemovable !== undefined ? item.isRemovable : !!isRemovable
+ return (
+
+ )
+}
+
+export default Accordion
diff --git a/src/app/components/atoms/Accordion/index.ts b/src/app/components/atoms/Accordion/index.ts
new file mode 100755
index 0000000..eb5cbc1
--- /dev/null
+++ b/src/app/components/atoms/Accordion/index.ts
@@ -0,0 +1,3 @@
+import Accordion from "./Accordion"
+
+export default Accordion
diff --git a/src/app/components/atoms/AdvancedColorPicker/AdvancedColorPicker.component.scss b/src/app/components/atoms/AdvancedColorPicker/AdvancedColorPicker.component.scss
new file mode 100755
index 0000000..48d147e
--- /dev/null
+++ b/src/app/components/atoms/AdvancedColorPicker/AdvancedColorPicker.component.scss
@@ -0,0 +1,3 @@
+.ar-AdvancedColorPicker {
+
+}
diff --git a/src/app/components/atoms/AdvancedColorPicker/AdvancedColorPicker.test.ts b/src/app/components/atoms/AdvancedColorPicker/AdvancedColorPicker.test.ts
new file mode 100755
index 0000000..b2f5bc4
--- /dev/null
+++ b/src/app/components/atoms/AdvancedColorPicker/AdvancedColorPicker.test.ts
@@ -0,0 +1,8 @@
+import React from "react"
+import AdvancedColorPicker from "./AdvancedColorPicker"
+
+describe("AdvancedColorPicker", () => {
+ it("renders without error", () => {
+
+ })
+})
diff --git a/src/app/components/atoms/AdvancedColorPicker/AdvancedColorPicker.tsx b/src/app/components/atoms/AdvancedColorPicker/AdvancedColorPicker.tsx
new file mode 100755
index 0000000..361ba0a
--- /dev/null
+++ b/src/app/components/atoms/AdvancedColorPicker/AdvancedColorPicker.tsx
@@ -0,0 +1,117 @@
+import { useEffect, useState } from "react"
+import { Slider } from "../.."
+import { AdvancedColorPickerProps } from ".."
+import { DomHelper } from "../../../utils"
+import colorPickerConfig from "../../../config/ColorPicker"
+import imageColorMap from "../../../static/images/img_colormap.gif"
+import "./AdvancedColorPicker.component.scss"
+
+const AdvancedColorPicker = (props: AdvancedColorPickerProps): JSX.Element => {
+ const { demo, displaySample, id, onColorSelect, title } = props
+ const [color, setColor] = useState
+ {title && (
+ {title}
+ )}
+ 
+
+ {displaySample && color && (
+
+ )
+}
+
+export default AdvancedColorPicker
diff --git a/src/app/components/atoms/AdvancedColorPicker/index.ts b/src/app/components/atoms/AdvancedColorPicker/index.ts
new file mode 100755
index 0000000..89647ca
--- /dev/null
+++ b/src/app/components/atoms/AdvancedColorPicker/index.ts
@@ -0,0 +1,3 @@
+import AdvancedColorPicker from "./AdvancedColorPicker"
+
+export default AdvancedColorPicker
diff --git a/src/app/components/atoms/Alert/Alert.tsx b/src/app/components/atoms/Alert/Alert.tsx
index c1dcc38..759bdfe 100755
--- a/src/app/components/atoms/Alert/Alert.tsx
+++ b/src/app/components/atoms/Alert/Alert.tsx
@@ -1,6 +1,6 @@
import { useEffect, useState } from "react"
import Icon from "../Icon"
-import { AlertProps } from "../../../types/components.interface"
+import { AlertProps } from ".."
import { ICON_ROOT } from "../../../config/constants"
import "./Alert.component.scss"
import LoadableIcon from "../LoadableIcon"
diff --git a/src/app/components/atoms/ArViz/ArViz.tsx b/src/app/components/atoms/ArViz/ArViz.tsx
index 9454745..9f53aeb 100755
--- a/src/app/components/atoms/ArViz/ArViz.tsx
+++ b/src/app/components/atoms/ArViz/ArViz.tsx
@@ -1,11 +1,11 @@
import { useEffect, useRef } from "react"
import * as d3 from "d3"
-import { ArVizProps } from "../../../types/components.interface"
+import { ArVizProps } from ".."
import { ArVisualizationTypes } from "../../../types/enums"
import { generateBubbleChart } from "../../../utils/chartGenerators"
-import "./ArViz.component.scss"
import BubbleChart from "../BubbleChart"
import { ObjectType } from "../../../types/types"
+import "./ArViz.component.scss"
const dataDummy = [
{ source: "Item 1", val: 1350, color: "#C9D6DF" },
diff --git a/src/app/components/atoms/Badge/Badge.tsx b/src/app/components/atoms/Badge/Badge.tsx
index 1000c49..25d4f3d 100755
--- a/src/app/components/atoms/Badge/Badge.tsx
+++ b/src/app/components/atoms/Badge/Badge.tsx
@@ -1,6 +1,6 @@
import { Icon } from "../.."
import { ICON_ROOT } from "../../../config/constants"
-import { BadgeProps } from "../../../types/components.interface"
+import { BadgeProps } from ".."
import "./Badge.component.scss"
const Badge = (props: BadgeProps): JSX.Element => {
diff --git a/src/app/components/atoms/Breadcrumb/Breadcrumb.tsx b/src/app/components/atoms/Breadcrumb/Breadcrumb.tsx
index 0be6ff6..5baecc5 100755
--- a/src/app/components/atoms/Breadcrumb/Breadcrumb.tsx
+++ b/src/app/components/atoms/Breadcrumb/Breadcrumb.tsx
@@ -1,11 +1,8 @@
import { useNavigate } from "react-router-dom"
-import {
- BreadCrumbData,
- BreadcrumbProps,
-} from "../../../types/components.interface"
-import "./Breadcrumb.component.scss"
-import Button from "../Button"
+import { BreadcrumbProps, Button } from ".."
+import { BreadCrumbData } from "../../../types/entity.interface"
import { ArButtonVariants, ArSizes } from "../../../types/enums"
+import "./Breadcrumb.component.scss"
const Breadcrumb = (props: BreadcrumbProps): JSX.Element => {
const { classes, data, separator, size, onClick } = props
@@ -29,6 +26,7 @@ const Breadcrumb = (props: BreadcrumbProps): JSX.Element => {
{nodes.map((node: BreadCrumbData, index: number) => (
<>
@@ -76,7 +80,19 @@ const Button = (props: ButtonProps) => {
title="Extra Button Options"
slot={ArPopoverSlots.ANCHOR}
>
-
+
+ {getColorNameHsl()}
+
+ )}
+
+ setHue(parseInt(e.target.value) / 255)}
+ withManual
+ />
+ setSaturation(parseInt(e.target.value) / 100)}
+ withManual
+ />
+ setLightness(parseInt(e.target.value) / 100)}
+ withManual
+ />
+
+ {demo && (
+
+ )}
+ In Component Calendar
+const today = new Date()
+
+const Calendar = (props: CalendarProps): JSX.Element => {
+ const {
+ allowEventSetting,
+ classes,
+ events,
+ customDayEventSetter,
+ hasTimeControls,
+ isSingleSelect,
+ maxDate,
+ minDate,
+ miniMode,
+ onDateSelected,
+ startDate,
+ endDate,
+ theme,
+ } = props
+ const [calendar, setCalendar] = useState
+ {refDate && (
+
+ )
}
export default Calendar
diff --git a/src/app/components/atoms/Calendar/EventForm.tsx b/src/app/components/atoms/Calendar/EventForm.tsx
new file mode 100644
index 0000000..dd2b701
--- /dev/null
+++ b/src/app/components/atoms/Calendar/EventForm.tsx
@@ -0,0 +1,21 @@
+import { EventFormProps } from ".."
+import { pad } from "./helper"
+
+const EventForm = (props: EventFormProps) => {
+ const { events, miniMode, selectedDate } = props
+ return (
+
+ {
+ setCurrentView(ArCalViews.CALENDAR)
+ setRefDate(date)
+ }}
+ setCurrentDecade={setCurrentDecade}
+ setCurrentMonthNavView={setCurrentMonthNavView}
+ setCurrentView={setCurrentView}
+ setCurrentYear={setCurrentYear}
+ />
+ {eventDate && (
+
+
+ {startDateLocal && !miniMode && (
+
+
+
+ {CalHelper.toString(startDateLocal)}
+ {endDateLocal && " - " + CalHelper.toString(endDateLocal)}
+
+
+ )}
+
+
+
+
+ )
+}
+
+export default EventForm
diff --git a/src/app/components/atoms/Calendar/JustCalendar.component.scss b/src/app/components/atoms/Calendar/JustCalendar.component.scss
new file mode 100644
index 0000000..ac528ee
--- /dev/null
+++ b/src/app/components/atoms/Calendar/JustCalendar.component.scss
@@ -0,0 +1,47 @@
+.ar-JustCalendar {
+ .ar-JustCalendar__day {
+ width: calc(100% / 7);
+ .ar-JustCalendar__day__date {
+ width: 2rem;
+ height: 2rem;
+ border-radius: 50%;
+ }
+ &:not(.ar-JustCalendar__weekday):hover {
+ background-color: var(--ar-bg-hover);
+ .ar-JustCalendar__day__date {
+ text-decoration: underline;
+ }
+ }
+ &.ar-JustCalendar__sibling-month {
+ color: var(--ar-color-disabled);
+ &.selected {
+ .ar-JustCalendar__day__date {
+ color: var(--ar-color-disabled-2);
+ }
+ }
+ }
+ &.selected {
+ .ar-JustCalendar__day__date {
+ background-color: var(--ar-bg-selected-4-dark);
+ color: white;
+ }
+ }
+ &.selectable {
+ background-color: var(--ar-bg-hover);
+ }
+ &__badge {
+ top: 0.1rem;
+ right: 0;
+ }
+ // &.today {
+ // background-color: var(--ar-bg-selected-3-faded);
+ // }
+ }
+ &.is-mini {
+ width: 18rem;
+ .ar-JustCalendar__day {
+ width: 2.5rem;
+ height: 2.5rem;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/app/components/atoms/Calendar/JustCalendar.tsx b/src/app/components/atoms/Calendar/JustCalendar.tsx
new file mode 100644
index 0000000..1bb7eaa
--- /dev/null
+++ b/src/app/components/atoms/Calendar/JustCalendar.tsx
@@ -0,0 +1,127 @@
+import { Badge, Button, Popover } from "../.."
+import { JustCalendarProps } from ".."
+import { CalendarDate } from "../../../types/entity.interface"
+import { ArBadgeType, ArPopoverSlots, ArSizes } from "../../../types/enums"
+
+const weekDays = [
+ {
+ name: "Monday",
+ short: "Mo",
+ index: 0,
+ },
+ {
+ name: "Tuesday",
+ short: "Tu",
+ index: 1,
+ },
+ {
+ name: "Wednesday",
+ short: "We",
+ index: 2,
+ },
+ {
+ name: "Thursday",
+ short: "Th",
+ index: 3,
+ },
+ {
+ name: "Friday",
+ short: "Fr",
+ index: 4,
+ },
+ {
+ name: "Saturday",
+ short: "Sa",
+ index: 5,
+ },
+ {
+ name: "Sunday",
+ short: "Su",
+ index: 6,
+ },
+]
+const areSame = (date: Date | CalendarDate, calDate: CalendarDate) => {
+ if ("day" in date) {
+ date = date as CalendarDate
+ return (
+ calDate.day === date.day &&
+ calDate.month === date.month &&
+ calDate.year === date.year
+ )
+ } else {
+ date = date as Date
+ return (
+ calDate.day === date.getDate() &&
+ calDate.month === date.getMonth() &&
+ calDate.year === date.getFullYear()
+ )
+ }
+}
+
+const JustCalendar = (props: JustCalendarProps) => {
+ const {
+ allowEventSetting,
+ calendar,
+ calHelper,
+ endDate,
+ hovered,
+ isSingleSelect,
+ miniMode,
+ setHovered,
+ onDateSelected,
+ startDate,
+ } = props
+ return (
+
+
+ {pad(selectedDate.day) +
+ " - " +
+ pad(selectedDate.month + 1) +
+ " - " +
+ selectedDate.year}
+
+
+ - setHovered(null)}
+ >
+ {weekDays.map((weekday) => (
+
- + {weekday.short} + + ))} + {calendar?.map((date) => { + const isToday = date && areSame(new Date(), date) + const liElement = date ? ( +
- onDateSelected(date)}
+ onMouseOver={() => {
+ if (
+ !!calHelper?.startDate &&
+ !calHelper.endDate &&
+ !isSingleSelect
+ ) {
+ setHovered(date)
+ }
+ }}
+ >
+
+ {isToday && (
+
+ )} + {date.day} + +
+ ) : (
+
+ )
+ return liElement
+ })}
+
+
+ )
+}
+
+export default MonthNavigator
diff --git a/src/app/components/atoms/Calendar/MonthSelector.component.scss b/src/app/components/atoms/Calendar/MonthSelector.component.scss
new file mode 100755
index 0000000..5670bd8
--- /dev/null
+++ b/src/app/components/atoms/Calendar/MonthSelector.component.scss
@@ -0,0 +1,18 @@
+.ar-MonthSelector {
+ & > * {
+ transition: left 0.3s;
+ }
+ &__decade-selector, &__year-selector, &__month-selector {
+ &__decade-padder, &__year-padder, &__month-padder {
+ width: calc(100% / 4);
+ }
+ &__decade:hover, &__year:hover, &__month:hover {
+ background-color: var(--ar-bg-hover);
+ }
+ }
+ @media (max-width: 576px) {
+ &__decade-selector__decade-padder, &__year-selector__year-padder, &__month-selector__month-padder {
+ width: calc(100% / 3);
+ }
+ }
+}
diff --git a/src/app/components/atoms/Calendar/MonthSelector.tsx b/src/app/components/atoms/Calendar/MonthSelector.tsx
new file mode 100644
index 0000000..cc95a0f
--- /dev/null
+++ b/src/app/components/atoms/Calendar/MonthSelector.tsx
@@ -0,0 +1,141 @@
+import { MONTH_INDEX } from "../../../config/constants"
+import { MonthSelectorProps } from ".."
+import { ArCalViews, ArMonthSelectorViews } from "../../../types/enums"
+import { sub } from "./helper"
+import "./MonthSelector.component.scss"
+
+const generateDecades = (currentDecade: number) => {
+ let startDecade = +(("" + currentDecade).substring(0, 2) + "00")
+ const tillDecade = startDecade + 100
+ const decades = []
+ while (startDecade < tillDecade) {
+ decades.push({ start: startDecade + 1, end: startDecade + 10 })
+ startDecade += 10
+ }
+ return decades
+}
+
+const generateYears = (currentYear: number) => {
+ let startYear = currentYear + 1
+ const tillYear = startYear + 10
+ const years = []
+ while (startYear < tillYear) {
+ years.push(startYear)
+ startYear++
+ }
+ return years
+}
+
+const MonthSelector = (props: MonthSelectorProps) => {
+ const {
+ currentDecade,
+ currentMonthNavView,
+ currentYear,
+ miniMode,
+ onMonthSelect,
+ setCurrentDecade,
+ setCurrentMonthNavView,
+ setCurrentView,
+ setCurrentYear,
+ } = props
+
+ return (
+
+
+ setRefDate(CalHelper.getPreviousYear(refDate))}
+ >
+
+ {
+ if (currentView === ArCalViews.CALENDAR) {
+ setRefDate(CalHelper.getPreviousMonth(refDate))
+ } else {
+ currentMonthNavView === ArMonthSelectorViews.MONTH
+ ? setCurrentYear((currentYear || refDate.getFullYear()) - 1)
+ : setCurrentDecade(
+ (currentDecade || 2000) -
+ (currentMonthNavView === ArMonthSelectorViews.DECADE
+ ? 100
+ : 10),
+ )
+ }
+ }}
+ >
+
+ {
+ if (currentView === ArCalViews.CALENDAR) {
+ setCurrentView(ArCalViews.MONTH_YEAR_SELECTOR)
+ }
+ if (currentMonthNavView === ArMonthSelectorViews.MONTH) {
+ setCurrentMonthNavView(ArMonthSelectorViews.YEAR)
+ } else if (currentMonthNavView === ArMonthSelectorViews.YEAR) {
+ setCurrentMonthNavView(ArMonthSelectorViews.DECADE)
+ } else {
+ setCurrentMonthNavView(ArMonthSelectorViews.MONTH)
+ }
+ }}
+ >
+ {currentView === ArCalViews.MONTH_YEAR_SELECTOR ? (
+ currentMonthNavView === ArMonthSelectorViews.MONTH ? (
+ currentYear || refDate.getFullYear()
+ ) : currentMonthNavView === ArMonthSelectorViews.YEAR ? (
+ getSelectedDecade(refDate, currentDecade)
+ ) : (
+ getSelectedCentury(refDate, currentDecade)
+ )
+ ) : (
+ <>
+ {MONTH_INDEX[refDate.getMonth()]}
+ {refDate.getFullYear()}
+
+ )}
+
+ {
+ if (currentView === ArCalViews.CALENDAR) {
+ setRefDate(CalHelper.getNextMonth(refDate))
+ } else {
+ currentMonthNavView === ArMonthSelectorViews.MONTH
+ ? setCurrentYear((currentYear || refDate.getFullYear()) + 1)
+ : setCurrentDecade(
+ (currentDecade || 2000) +
+ (currentMonthNavView === ArMonthSelectorViews.DECADE
+ ? 100
+ : 10),
+ )
+ }
+ }}
+ >
+
+ setRefDate(CalHelper.getNextYear(refDate))}
+ >
+
+
+
+ )
+}
+
+export default MonthSelector
diff --git a/src/app/components/atoms/Calendar/helper.ts b/src/app/components/atoms/Calendar/helper.ts
new file mode 100644
index 0000000..1854d5c
--- /dev/null
+++ b/src/app/components/atoms/Calendar/helper.ts
@@ -0,0 +1,494 @@
+import { MONTH_INDEX } from "../../../config/constants"
+import { CalendarDate } from "../../../types/entity.interface"
+import { ArDateFormats } from "../../../types/enums"
+
+export interface CalendarOptions {
+ /**
+ * Date object indicating the selected start date
+ */
+ startDate?: CalendarDate | null
+
+ /**
+ * Date object indicating the selected end date
+ */
+ endDate?: CalendarDate | null
+
+ /**
+ * Calculate dates from sibling months (before and after the current month, based on weekStart)
+ */
+ siblingMonths?: boolean
+
+ /**
+ * Calculate the week days
+ */
+ weekNumbers?: boolean
+
+ /**
+ * Day of the week to start the calendar, respects `Date.prototype.getDay` (defaults to `0`, Sunday)
+ */
+ weekStart?: number
+}
+
+export const pad = (num: number, separator?: string) => {
+ return ("" + num).padStart(2, "0") + (separator ? separator : "")
+}
+
+export const sub = (num: number, separator?: string) => {
+ return ("" + num).substring(2) + (separator ? separator : "")
+}
+
+const str = (num: number, trim?: boolean, separator?: string) => {
+ const month = MONTH_INDEX[num]
+ return (trim ? month.substring(0, 4) : month) + (separator ? separator : "")
+}
+
+export type CalendarInstance = Calendar
+/**
+ * Calendar object
+ */
+class Calendar {
+ startDate: CalendarDate | null
+ endDate: CalendarDate | null
+ siblingMonths: boolean
+ weekNumbers: boolean
+ weekStart: number
+
+ /**
+ * Calendar constructor
+ *
+ * @param options Calendar options
+ */
+ constructor({
+ startDate = null,
+ endDate = null,
+ siblingMonths = false,
+ weekNumbers = false,
+ weekStart = 0,
+ }: CalendarOptions = {}) {
+ this.startDate = startDate
+ this.endDate = endDate
+ this.siblingMonths = siblingMonths
+ this.weekNumbers = weekNumbers
+ this.weekStart = weekStart
+ }
+
+ /**
+ * Calculate a calendar month
+ *
+ * @param year Year
+ * @param month Month [0-11]
+ * @return Calendar days
+ */
+ getCalendar(year: number, month: number) {
+ const date = new Date(Date.UTC(year, month, 1, 0, 0, 0, 0))
+
+ year = date.getFullYear()
+ month = date.getMonth()
+
+ const calendar: (CalendarDate | false)[] = []
+ const firstDay = date.getDay()
+ const firstDate = -((7 - this.weekStart + firstDay) % 7)
+ const lastDate = Calendar.daysInMonth(year, month)
+ const lastDay = (lastDate - firstDate) % 7
+ const lastDatePreviousMonth = Calendar.daysInMonth(year, month - 1)
+
+ let i = firstDate
+ let currentDay
+ let currentDate
+ let currentDateObject: CalendarDate | false = false
+ let currentWeekNumber = null
+ let otherMonth
+ let otherYear
+
+ const max = lastDate - i + (lastDay !== 0 ? 7 - lastDay : 0) + firstDate
+
+ while (i < max) {
+ currentDate = i + 1
+ currentDay = ((i < 1 ? 7 + i : i) + firstDay) % 7
+ if (currentDate < 1 || currentDate > lastDate) {
+ if (this.siblingMonths) {
+ if (currentDate < 1) {
+ otherMonth = month - 1
+ otherYear = year
+ if (otherMonth < 0) {
+ otherMonth = 11
+ otherYear--
+ }
+ currentDate = lastDatePreviousMonth + currentDate
+ } else if (currentDate > lastDate) {
+ otherMonth = month + 1
+ otherYear = year
+ if (otherMonth > 11) {
+ otherMonth = 0
+ otherYear++
+ }
+ currentDate = i - lastDate + 1
+ }
+
+ if (otherMonth !== undefined && otherYear !== undefined) {
+ currentDateObject = {
+ day: currentDate,
+ weekDay: currentDay,
+ month: otherMonth,
+ year: otherYear,
+ siblingMonth: true,
+ }
+ }
+ } else {
+ currentDateObject = false
+ }
+ } else {
+ currentDateObject = {
+ day: currentDate,
+ weekDay: currentDay,
+ month: month,
+ year: year,
+ }
+ }
+
+ if (currentDateObject && this.weekNumbers) {
+ if (currentWeekNumber === null) {
+ currentWeekNumber = Calendar.calculateWeekNumber(currentDateObject)
+ } else if (currentDay === 1 && currentWeekNumber === 52) {
+ currentWeekNumber = 1
+ } else if (currentDay === 1) {
+ currentWeekNumber++
+ }
+ currentDateObject.weekNumber = currentWeekNumber
+ }
+
+ if (currentDateObject && this.startDate) {
+ currentDateObject.selected = this.isDateSelected(currentDateObject)
+ }
+
+ calendar.push(currentDateObject)
+ i++
+ }
+
+ return calendar
+ }
+
+ /**
+ * Checks if a date is selected
+ *
+ * @param date Date object
+ * @return Selected status of the date
+ */
+ isDateSelected(date: CalendarDate, endDate?: CalendarDate | null) {
+ // Hack to disregard this.endDate in further calculations for finding selectable candidates (hovered)
+ // by explicitly sending a "null" endDate, if endDate is not sent at all (undefined) then only function behaves as
+ // initially intended and considers endDate for calculations
+ if (!this.startDate || endDate === null) {
+ return false
+ }
+ let startDate = this.startDate
+ if (endDate) {
+ if (Calendar.compare(this.startDate, endDate) === 1) {
+ startDate = endDate
+ endDate = this.startDate
+ }
+ } else {
+ endDate = this.endDate
+ }
+ if (
+ date.year === startDate.year &&
+ date.month === startDate.month &&
+ date.day === startDate.day
+ ) {
+ return true
+ }
+
+ if (!endDate) {
+ return false
+ }
+
+ if (
+ date.year === startDate.year &&
+ date.month === startDate.month &&
+ date.day < startDate.day
+ ) {
+ return false
+ }
+
+ if (
+ date.year === endDate.year &&
+ date.month === endDate.month &&
+ date.day > endDate.day
+ ) {
+ return false
+ }
+
+ if (date.year === startDate.year && date.month < startDate.month) {
+ return false
+ }
+
+ if (date.year === endDate.year && date.month > endDate.month) {
+ return false
+ }
+
+ if (date.year < startDate.year) {
+ return false
+ }
+
+ if (date.year > endDate.year) {
+ return false
+ }
+
+ return true
+ }
+
+ /**
+ * Sets the selected period start
+ *
+ * @param date Date object
+ */
+ setStartDate(date: CalendarDate | null) {
+ this.startDate = date
+ }
+
+ /**
+ * Sets the selected period end
+ *
+ * @param date Date object
+ */
+ setEndDate(date: CalendarDate | null) {
+ this.endDate = date
+ }
+
+ /**
+ * Sets one selected date
+ *
+ * @param date Date object
+ */
+ setDate(date: CalendarDate) {
+ return this.setStartDate(date)
+ }
+
+ /**
+ * Calculates the difference between two dates (date1 - date2), in days
+ *
+ * @param dateLeft Date object
+ * @param dateRight Date object
+ * @return Days between the dates
+ */
+ static diff(dateLeft: CalendarDate, dateRight: CalendarDate) {
+ const dateLeftDate = new Date(
+ Date.UTC(dateLeft.year, dateLeft.month, dateLeft.day, 0, 0, 0, 0),
+ )
+ const dateRightDate = new Date(
+ Date.UTC(dateRight.year, dateRight.month, dateRight.day, 0, 0, 0, 0),
+ )
+ return Math.ceil(
+ (dateLeftDate.getTime() - dateRightDate.getTime()) / 86400000,
+ )
+ }
+
+ /**
+ * Calculates the interval between two dates
+ *
+ * @param dateLeft Date object
+ * @param dateRight Date object
+ * @return Number of days between dates
+ */
+ static interval(dateLeft: CalendarDate, dateRight: CalendarDate) {
+ return Math.abs(Calendar.diff(dateLeft, dateRight)) + 1
+ }
+
+ /**
+ * Quickly compare two dates
+ *
+ * @param dateLeft Left `CalendarDate` object
+ * @param dateRight Right `CalendarDate` object
+ * @return Comparison result: -1 (left < right), 0 (equal) or 1 (left > right)
+ */
+ static compare(dateLeft: CalendarDate, dateRight: CalendarDate) {
+ if (
+ typeof dateLeft !== "object" ||
+ typeof dateRight !== "object" ||
+ dateLeft === null ||
+ dateRight === null
+ ) {
+ throw new TypeError("dates must be objects")
+ }
+
+ if (dateLeft.year < dateRight.year) {
+ return -1
+ }
+
+ if (dateLeft.year > dateRight.year) {
+ return 1
+ }
+
+ if (dateLeft.month < dateRight.month) {
+ return -1
+ }
+
+ if (dateLeft.month > dateRight.month) {
+ return 1
+ }
+
+ if (dateLeft.day < dateRight.day) {
+ return -1
+ }
+
+ if (dateLeft.day > dateRight.day) {
+ return 1
+ }
+
+ return 0
+ }
+
+ /**
+ * Calculates the number of days in a month
+ *
+ * @param year Year
+ * @param month Month [0-11]
+ * @return Length of the month
+ */
+ static daysInMonth(year: number, month: number) {
+ return new Date(year, month + 1, 0).getDate()
+ }
+
+ /**
+ * Calculates if a given year is a leap year
+ *
+ * @param year Year
+ * @return Leap year or not
+ */
+ static isLeapYear(year: number) {
+ return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0
+ }
+
+ /**
+ * Calculates the week number for a given date
+ *
+ * @param date Date object
+ * @return Week number
+ */
+ // Adapted from http://techblog.procurios.nl/k/news/view/33796/14863/calculate-iso-8601-week-and-year-in-javascript.html
+ static calculateWeekNumber(date: CalendarDate) {
+ // Creates the requested date
+ const current = new Date(
+ Date.UTC(date.year, date.month, date.day, 0, 0, 0, 0),
+ )
+
+ // Create a copy of the object
+ const target = new Date(current.valueOf())
+
+ // ISO week date weeks start on monday so correct the day number
+ const dayNr = (current.getUTCDay() + 6) % 7
+
+ // ISO 8601 states that week 1 is the week with the first thursday of that
+ // year. Set the target date to the thursday in the target week.
+ target.setUTCDate(target.getUTCDate() - dayNr + 3)
+
+ // Store the millisecond value of the target date
+ const firstThursday = target.valueOf()
+
+ // Set the target to the first thursday of the year
+
+ // First set the target to january first
+ target.setUTCMonth(0, 1)
+
+ // Not a thursday? Correct the date to the next thursday
+ if (target.getUTCDay() !== 4) {
+ target.setUTCMonth(0, 1 + ((4 - target.getUTCDay() + 7) % 7))
+ }
+
+ // The week number is the number of weeks between the first thursday of the
+ // year and the thursday in the target week.
+ // 604800000 = 7 * 24 * 3600 * 1000
+ return 1 + Math.ceil((firstThursday - target.getTime()) / 604800000)
+ }
+
+ static toString(
+ date: CalendarDate,
+ separator: string = "/",
+ format: string = "DDMMYYYY",
+ ) {
+ const day = pad(date.day, separator)
+ const month = pad(date.month + 1, separator)
+ const year = date.year
+
+ switch (format) {
+ case ArDateFormats.MMDDYY:
+ return month + day + sub(year)
+ case ArDateFormats.DDMMYYYY:
+ return day + month + year
+ case ArDateFormats.MMDDYYYY:
+ return month + day + year
+ case ArDateFormats.DDMMMYY:
+ return day + str(date.month + 1, true, separator) + sub(year)
+ case ArDateFormats.DDMMMYYYY:
+ return day + str(date.month + 1, true, separator) + year
+ case ArDateFormats.MMMDDYY:
+ return str(date.month + 1, true, separator) + day + sub(year)
+ case ArDateFormats.MMMDDYYYY:
+ return str(date.month + 1, true, separator) + day + year
+ case ArDateFormats.YYMMDD:
+ return sub(year) + month + day
+ case ArDateFormats.YYMMMDD:
+ return sub(year) + str(date.month + 1, true, separator) + day
+ case ArDateFormats.YYYYMMDD:
+ return year + month + day
+ case ArDateFormats.YYYYMMMDD:
+ return year + str(date.month + 1, true, separator) + day
+ case ArDateFormats.DDMMYY:
+ default:
+ return day + month + sub(year)
+ }
+ }
+
+ static getPreviousMonth(date: Date) {
+ const month = date.getMonth()
+ const year = date.getFullYear()
+
+ const previousMonth = month === 0 ? 11 : month - 1
+ const previousYear = month === 0 ? year - 1 : year
+
+ const returnDate = new Date()
+ returnDate.setDate(date.getDate())
+ returnDate.setMonth(previousMonth)
+ returnDate.setFullYear(previousYear)
+
+ return returnDate
+ }
+
+ static getNextMonth(date: Date) {
+ const month = date.getMonth()
+ const year = date.getFullYear()
+
+ const previousMonth = month === 11 ? 0 : month + 1
+ const previousYear = month === 11 ? year + 1 : year
+
+ const returnDate = new Date()
+ returnDate.setDate(date.getDate())
+ returnDate.setMonth(previousMonth)
+ returnDate.setFullYear(previousYear)
+
+ return returnDate
+ }
+
+ static getPreviousYear(date: Date) {
+ const year = date.getFullYear()
+ const returnDate = new Date()
+ returnDate.setDate(date.getDate())
+ returnDate.setMonth(date.getMonth())
+ returnDate.setFullYear(year === 1 ? 1 : year - 1)
+ return returnDate
+ }
+
+ static getNextYear(date: Date) {
+ const year = date.getFullYear()
+ const returnDate = new Date()
+ returnDate.setDate(date.getDate())
+ returnDate.setMonth(date.getMonth())
+ returnDate.setFullYear(year + 1)
+ return returnDate
+ }
+}
+
+/**
+ * Exports the Calendar
+ */
+export { Calendar as default }
diff --git a/src/app/components/atoms/Checkbox/Checkbox.tsx b/src/app/components/atoms/Checkbox/Checkbox.tsx
index c75fa96..f0b2518 100755
--- a/src/app/components/atoms/Checkbox/Checkbox.tsx
+++ b/src/app/components/atoms/Checkbox/Checkbox.tsx
@@ -1,15 +1,8 @@
import React, { useState } from "react"
import { Toggle } from "../.."
+import { CheckboxProps } from ".."
import "./Checkbox.component.scss"
-type CheckBoxTypes = "TOGGLE" | "CHECKBOX"
-interface CheckboxProps {
- id?: string
- label?: string
- type?: CheckBoxTypes
- onChange: Function
-}
-
const Checkbox = (props: CheckboxProps): JSX.Element => {
const { label, id, onChange } = props
const [checked, setChecked] = useState
+ {currentDecade &&
+ generateDecades(currentDecade).map((decade) => {
+ return (
+
+ {
+ setCurrentDecade(decade.start - 1)
+ setCurrentMonthNavView(ArMonthSelectorViews.YEAR)
+ }}
+ >
+
+ )
+ })}
+
+ {decade.start + " - " + sub(decade.end)}
+
+
+ {currentDecade &&
+ generateYears(currentDecade).map((year) => {
+ return (
+
+ {
+ setCurrentYear(year)
+ setCurrentMonthNavView(ArMonthSelectorViews.MONTH)
+ }}
+ >
+
+ )
+ })}
+
+ {year}
+
+
+ {MONTH_INDEX.map((month, index) => (
+
+ {
+ const date = new Date()
+ date.setMonth(index)
+ date.setFullYear(+(currentYear || date.getFullYear()))
+ onMonthSelect(date)
+ setCurrentMonthNavView(null)
+ setCurrentView(ArCalViews.CALENDAR)
+ }}
+ >
+
+ ))}
+
+ {month}
+
+ In Component DateInput
+ const {
+ classes,
+ containerClasses,
+ id,
+ label,
+ labelClasses,
+ placeholder,
+ value,
+ } = props
+ const [localValue, setLocalValue] = useState
+ {label && (
+
+ )}
+ setLocalValue(e.target.value)}
+ placeholder={placeholder}
+ type="date"
+ value={localValue}
+ />
+
+ )
}
export default DateInput
diff --git a/src/app/components/atoms/DatePicker/DatePicker.tsx b/src/app/components/atoms/DatePicker/DatePicker.tsx
index 1ea09a3..a89cde8 100755
--- a/src/app/components/atoms/DatePicker/DatePicker.tsx
+++ b/src/app/components/atoms/DatePicker/DatePicker.tsx
@@ -1,49 +1,62 @@
import { useEffect, useState } from "react"
-import { DatePickerProps } from "../../../types/components.interface"
+import { Calendar, LoadableIcon, Popover } from "../.."
+import { ArPopoverPositions, ArPopoverSlots } from "../../../types/enums"
+import { CalendarDate } from "../../../types/entity.interface"
+import { DatePickerProps } from ".."
+import { pad } from "../Calendar/helper"
import "./DatePicker.component.scss"
const DatePicker = (props: DatePickerProps): JSX.Element => {
- const {
- classes,
- containerClasses,
- id,
- label,
- labelClasses,
- placeholder,
- value,
- } = props
- const [localValue, setLocalValue] = useState
- {label && (
-
)
}
diff --git a/src/app/components/atoms/DateRangePicker/DateRangePicker.component.scss b/src/app/components/atoms/DateRangePicker/DateRangePicker.component.scss
new file mode 100755
index 0000000..5a7502a
--- /dev/null
+++ b/src/app/components/atoms/DateRangePicker/DateRangePicker.component.scss
@@ -0,0 +1,5 @@
+.ar-DateRangePicker {
+ .ar-DateRangePicker__input {
+ min-width: 15rem;
+ }
+}
diff --git a/src/app/components/atoms/DateRangePicker/DateRangePicker.test.ts b/src/app/components/atoms/DateRangePicker/DateRangePicker.test.ts
new file mode 100755
index 0000000..c3efc45
--- /dev/null
+++ b/src/app/components/atoms/DateRangePicker/DateRangePicker.test.ts
@@ -0,0 +1,8 @@
+import React from "react"
+import DateRangePicker from "./DateRangePicker"
+
+describe("DateRangePicker", () => {
+ it("renders without error", () => {
+
+ })
+})
diff --git a/src/app/components/atoms/DateRangePicker/DateRangePicker.tsx b/src/app/components/atoms/DateRangePicker/DateRangePicker.tsx
new file mode 100755
index 0000000..2ace8a9
--- /dev/null
+++ b/src/app/components/atoms/DateRangePicker/DateRangePicker.tsx
@@ -0,0 +1,80 @@
+import { useEffect, useState } from "react"
+import { Calendar, LoadableIcon, Popover } from "../.."
+import { ArPopoverPositions, ArPopoverSlots } from "../../../types/enums"
+import { CalendarDate } from "../../../types/entity.interface"
+import { DateRangePickerProps } from ".."
+import { pad } from "../Calendar/helper"
+import "./DateRangePicker.component.scss"
+
+const DateRangePicker = (props: DateRangePickerProps): JSX.Element => {
+ const { closeOnEndSelect, id, label } = props
+ const [startDate, setStartDate] = useState
+
+
+
+ )
+}
+
+export default DateRangePicker
diff --git a/src/app/components/atoms/DateRangePicker/index.ts b/src/app/components/atoms/DateRangePicker/index.ts
new file mode 100755
index 0000000..4498804
--- /dev/null
+++ b/src/app/components/atoms/DateRangePicker/index.ts
@@ -0,0 +1,3 @@
+import DateRangePicker from "./DateRangePicker"
+
+export default DateRangePicker
diff --git a/src/app/components/atoms/DetailsPanel/DetailsPanel.tsx b/src/app/components/atoms/DetailsPanel/DetailsPanel.tsx
index 9743458..de750b7 100755
--- a/src/app/components/atoms/DetailsPanel/DetailsPanel.tsx
+++ b/src/app/components/atoms/DetailsPanel/DetailsPanel.tsx
@@ -1,14 +1,8 @@
-import React from "react"
+import { DetailsPanelProps } from ".."
import "./DetailsPanel.component.scss"
-interface DetailsPanelProps {}
-
-const DetailsPanel = (props: any): JSX.Element => {
- return (
- showPicker(true)}
+ >
+ {label && (
+
+ )}
+
+
+
- In Component DetailsPanel
-
- )
+const DetailsPanel = (props: DetailsPanelProps): JSX.Element => {
+ return In Component DetailsPanel
}
-export default DetailsPanel
\ No newline at end of file
+export default DetailsPanel
diff --git a/src/app/components/atoms/Dialog/Dialog.tsx b/src/app/components/atoms/Dialog/Dialog.tsx
index ff03769..4e896d6 100755
--- a/src/app/components/atoms/Dialog/Dialog.tsx
+++ b/src/app/components/atoms/Dialog/Dialog.tsx
@@ -1,14 +1,8 @@
-import React from "react"
+import { DialogProps } from ".."
import "./Dialog.component.scss"
-interface DialogProps {}
-
-const Dialog = (props: any): JSX.Element => {
- return (
-
- In Component Dialog
-
- )
+const Dialog = (props: DialogProps): JSX.Element => {
+ return In Component Dialog
}
-export default Dialog
\ No newline at end of file
+export default Dialog
diff --git a/src/app/components/atoms/DropDown/DropDown.test.ts b/src/app/components/atoms/DropDown/DropDown.test.ts
index 3f4a88c..a9a6282 100755
--- a/src/app/components/atoms/DropDown/DropDown.test.ts
+++ b/src/app/components/atoms/DropDown/DropDown.test.ts
@@ -1,5 +1,5 @@
import React from "react"
-import Dropdown from "./DropDown"
+import Dropdown from "./Dropdown"
describe("Dropdown", () => {
it("renders without error", () => {})
diff --git a/src/app/components/atoms/DropDown/DropDown.tsx b/src/app/components/atoms/DropDown/DropDown.tsx
index 23f476a..a456174 100755
--- a/src/app/components/atoms/DropDown/DropDown.tsx
+++ b/src/app/components/atoms/DropDown/DropDown.tsx
@@ -1,6 +1,6 @@
import { ChangeEvent, useState } from "react"
-import { DropdownProps } from "../../../types/components.interface"
-import "./DropDown.component.scss"
+import { DropdownProps } from ".."
+import "./Dropdown.component.scss"
const Dropdown = (props: DropdownProps): JSX.Element => {
const {
diff --git a/src/app/components/atoms/DropDown/index.ts b/src/app/components/atoms/DropDown/index.ts
index 34ffd2f..3a29b42 100755
--- a/src/app/components/atoms/DropDown/index.ts
+++ b/src/app/components/atoms/DropDown/index.ts
@@ -1,3 +1,3 @@
-import Dropdown from "./DropDown"
+import Dropdown from "./Dropdown"
export default Dropdown
diff --git a/src/app/components/atoms/FacetedFilter/FacetedFilter.tsx b/src/app/components/atoms/FacetedFilter/FacetedFilter.tsx
index 20b5c16..fbeee27 100755
--- a/src/app/components/atoms/FacetedFilter/FacetedFilter.tsx
+++ b/src/app/components/atoms/FacetedFilter/FacetedFilter.tsx
@@ -1,9 +1,7 @@
-import React from "react"
+import { FacetedFilterProps } from ".."
import "./FacetedFilter.component.scss"
-interface FacetedFilterProps {}
-
-const FacetedFilter = (props: any): JSX.Element => {
+const FacetedFilter = (props: FacetedFilterProps): JSX.Element => {
return In Component FacetedFilter
}
diff --git a/src/app/components/atoms/FontTile/FontTile.component.scss b/src/app/components/atoms/FontTile/FontTile.component.scss
new file mode 100755
index 0000000..6985a37
--- /dev/null
+++ b/src/app/components/atoms/FontTile/FontTile.component.scss
@@ -0,0 +1,4 @@
+.ar-FontTile {
+ width: 8rem;
+ height: 8rem;
+}
diff --git a/src/app/components/atoms/FontTile/FontTile.test.ts b/src/app/components/atoms/FontTile/FontTile.test.ts
new file mode 100755
index 0000000..e4c97f2
--- /dev/null
+++ b/src/app/components/atoms/FontTile/FontTile.test.ts
@@ -0,0 +1,8 @@
+import React from "react"
+import FontTile from "./FontTile"
+
+describe("FontTile", () => {
+ it("renders without error", () => {
+
+ })
+})
diff --git a/src/app/components/atoms/FontTile/FontTile.tsx b/src/app/components/atoms/FontTile/FontTile.tsx
new file mode 100755
index 0000000..d68ce40
--- /dev/null
+++ b/src/app/components/atoms/FontTile/FontTile.tsx
@@ -0,0 +1,16 @@
+import { FontTileProps } from ".."
+import "./FontTile.component.scss"
+
+const FontTile = (props: FontTileProps): JSX.Element => {
+ const { font } = props
+ return (
+
+ {font}
+
+ )
+}
+
+export default FontTile
diff --git a/src/app/components/atoms/FontTile/index.ts b/src/app/components/atoms/FontTile/index.ts
new file mode 100755
index 0000000..daae24e
--- /dev/null
+++ b/src/app/components/atoms/FontTile/index.ts
@@ -0,0 +1,3 @@
+import FontTile from "./FontTile"
+
+export default FontTile
diff --git a/src/app/components/atoms/Icon/Icon.tsx b/src/app/components/atoms/Icon/Icon.tsx
index 5fe77ad..28c8da8 100755
--- a/src/app/components/atoms/Icon/Icon.tsx
+++ b/src/app/components/atoms/Icon/Icon.tsx
@@ -1,7 +1,9 @@
import { ICON_ROOT } from "../../../config/constants"
-import { IconProps } from "../../../types/components.interface"
+import { IconProps } from ".."
import "./Icon.component.scss"
+const demoDummyIconSrc = `${ICON_ROOT}/si/SiHappycow`
+
const Icon = (props: IconProps): JSX.Element | null => {
const {
alt,
@@ -50,7 +52,6 @@ const Icon = (props: IconProps): JSX.Element | null => {
qualifiedSrc = `${ICON_ROOT}/tb/TbError404`
}
- const demoDummyIconSrc = `${ICON_ROOT}/si/SiHappycow`
qualifiedSrc = !src ? (demo ? demoDummyIconSrc : qualifiedSrc) : qualifiedSrc
let appendables = ""
appendables += !inferredColor
diff --git a/src/app/components/atoms/IconTile/IconTile.component.scss b/src/app/components/atoms/IconTile/IconTile.component.scss
index 56623e5..3c757b0 100755
--- a/src/app/components/atoms/IconTile/IconTile.component.scss
+++ b/src/app/components/atoms/IconTile/IconTile.component.scss
@@ -4,10 +4,20 @@
color: blue;
}
+ &.selectable .ar-IconTile__image {
+ border: 3px solid var(--ar-color-border);
+ border-radius: 3px;
+ }
+
.font-black {
color: black;
}
+ .ar-IconTile__select-icon {
+ top: 0.3rem;
+ right: 0.3rem;
+ }
+
.ar-ToolBar {
z-index: 1;
top: 0;
diff --git a/src/app/components/atoms/IconTile/IconTile.tsx b/src/app/components/atoms/IconTile/IconTile.tsx
index 268919f..18317c1 100755
--- a/src/app/components/atoms/IconTile/IconTile.tsx
+++ b/src/app/components/atoms/IconTile/IconTile.tsx
@@ -1,50 +1,91 @@
+import { useEffect, useState } from "react"
import { useNavigate } from "react-router-dom"
-import { useState } from "react"
-import LoadableIcon from "../LoadableIcon"
-import { IconTileProps } from "../../../types/components.interface"
-import { ICON_ROOT } from "../../../config/constants"
+import { useAppSelector } from "../../../hooks"
+import { getCurrentTheme } from "../../../store"
+import { LoadableIcon, Popover } from "../.."
+import { IconTileProps } from ".."
import { ToolItemConfig } from "../../../types/entity.interface"
+import {
+ ArIconTileTypes,
+ ArPopoverPositions,
+ ArPopoverSlots,
+} from "../../../types/enums"
+import { ICON_ROOT } from "../../../config/constants"
import "./IconTile.component.scss"
-import { ArIconTileTypes } from "../../../types/enums"
const IconTile = (props: IconTileProps): JSX.Element => {
const {
classes,
+ fillColor,
hideBorder,
hideFooter,
icon,
iconSize,
onClick,
+ selectable,
+ strokeColor,
+ strokeWidth,
tools,
toolsPlacement,
type,
} = props
const [hovered, setHovered] = useState
+ {generateTools(tool.children)}
+
+
- {tools.map((tool: ToolItemConfig) => {
- return (
- {
- e.stopPropagation()
- }}
- >
-
)
@@ -54,21 +95,39 @@ const IconTile = (props: IconTileProps): JSX.Element => {
hideBorder ? "" : " border"
}${classes ? " " + classes : ""}${
type === ArIconTileTypes.LIST ? " d-flex" : ""
- }`}
+ }${selectable ? " selectable" : ""}`}
onMouseEnter={() => setHovered(true)}
onMouseLeave={() => setHovered(false)}
+ onClick={() => onClick && onClick(icon)}
>
navigate(`/icon/${icon.group}/${icon.name}`)}
+ onClick={() =>
+ selectable
+ ? toggleSelected(!isSelected)
+ : navigate(`/icon/${icon.group}/${icon.name}`, { state: icon })
+ }
>
+ {selectable && (
+
@@ -76,11 +135,12 @@ const IconTile = (props: IconTileProps): JSX.Element => {