@@ -198,16 +203,9 @@ const Editor = (): JSX.Element | string => {
ref={setContentRef}
title="Armco form-componentComponent Viewer"
>
- {mountNode &&
- createPortal(
-
)
}
diff --git a/src/app/components/Header/Header.component.scss b/src/app/components/Header/Header.component.scss
index 3790c81..77e1afe 100755
--- a/src/app/components/Header/Header.component.scss
+++ b/src/app/components/Header/Header.component.scss
@@ -1,4 +1,11 @@
.ar-Header {
background-color: var(--ar-bg-base);
border-bottom: 1px solid var(--ar-color-layout-border);
+
+ .ar-Header__app-logo {
+ cursor: pointer;
+ .ar-Header__brand {
+ border-radius: 50%;
+ }
+ }
}
diff --git a/src/app/components/Header/Header.tsx b/src/app/components/Header/Header.tsx
index 2cc0764..af52746 100755
--- a/src/app/components/Header/Header.tsx
+++ b/src/app/components/Header/Header.tsx
@@ -1,9 +1,74 @@
+import { useEffect, useState } from "react"
+import { useLocation, useNavigate } from "react-router-dom"
+import { v4 as uuid } from "uuid"
+import { TabBar } from ".."
+import { ArTabType } from "../../types/enums"
+import { TabProps } from "../../types/entity.interface"
+import { AppLogo } from "../../static/images"
+import { ReactComponent as AppName } from "../../static/images/Omnia Alkatra.svg"
import "./Header.component.scss"
-interface HeaderProps {}
+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",
+ },
+]
-const Header = (props: HeaderProps): JSX.Element => {
- return navigate("/")}>
+ 
+
+
+
{drawerContent}
- {mainContent}
+
+ {mainContent}
+
)
diff --git a/src/app/components/atoms/Alert/Alert.component.scss b/src/app/components/atoms/Alert/Alert.component.scss
index b601a2f..30aab15 100755
--- a/src/app/components/atoms/Alert/Alert.component.scss
+++ b/src/app/components/atoms/Alert/Alert.component.scss
@@ -3,6 +3,7 @@
transition: all 0.3s;
border-radius: 0.2rem;
opacity: 0;
+ color: white;
&.show {
opacity: 1;
@@ -67,7 +68,7 @@
}
&.success {
background-color: var(--ar-color-success);
- color: var(--ar-bg);
+ color: var(--ar-white);
}
.ar-Alert__icon {
diff --git a/src/app/components/atoms/Alert/Alert.tsx b/src/app/components/atoms/Alert/Alert.tsx
index e386e40..3908120 100755
--- a/src/app/components/atoms/Alert/Alert.tsx
+++ b/src/app/components/atoms/Alert/Alert.tsx
@@ -1,20 +1,8 @@
import { useEffect, useState } from "react"
import Icon from "../Icon"
-import API_CONFIG from "../../../config/api-config"
-import "./Alert.component.scss"
+import { AlertProps } from "../../../types/components.interface"
import { ICON_ROOT } from "../../../config/constants"
-
-type AlertType = "success" | "warning" | "error" | "information"
-export interface AlertProps {
- classes?: string
- closeable?: boolean
- demo?: boolean
- position?: string
- show?: boolean
- type?: AlertType
- message: string
- timeout?: number
-}
+import "./Alert.component.scss"
let timeoutRef: any
const Alert = (props: AlertProps): JSX.Element => {
@@ -35,7 +23,10 @@ const Alert = (props: AlertProps): JSX.Element => {
setTimeout(() => show("show"), 0)
if (!demo || timeout) {
clearTimeout(timeoutRef)
- timeoutRef = setTimeout(() => show(""), timeout || 5000)
+ timeoutRef = setTimeout(() => {
+ show("")
+ window.top?.postMessage({ ar: null }, "*")
+ }, timeout || 5000)
}
}
}, [position, type, timeout, externalShow, message, demo])
diff --git a/src/app/components/atoms/BrowserIncompatibility/BrowserIncompatibility.tsx b/src/app/components/atoms/BrowserIncompatibility/BrowserIncompatibility.tsx
index 49df3ad..8231339 100755
--- a/src/app/components/atoms/BrowserIncompatibility/BrowserIncompatibility.tsx
+++ b/src/app/components/atoms/BrowserIncompatibility/BrowserIncompatibility.tsx
@@ -1,36 +1,36 @@
-import { Alert, Icon } from "../.."
+import { Alert, Link, LoadableIcon } from "../.."
+import { BrowserIncompatibilityProps } from "../../../types/components.interface"
import Helper from "../../../utils/helper"
-import { ICON_ROOT } from "../../../config/constants"
import "./BrowserIncompatibility.component.scss"
-interface BrowserIncompatibilityProps {
- applicationName?: string
- moreLink?: string
-}
-
const BrowserIncompatibility = (
props: BrowserIncompatibilityProps,
): JSX.Element => {
- const { applicationName, moreLink } = props
- const demoDummyLink = "http://notabuck.com/armco-design-system/docs/devices"
+ const { applicationName, moreLink, theme } = props
+ const demoDummyLink = "https://notabuck.com/armco-design-system/docs/devices"
const demoAppName = '"My Awesome App"'
const helpLink = moreLink || demoDummyLink
const app = applicationName || demoAppName
const heroIconSize = "8rem"
+
return (
= {}
+
+const placeholder = parser
+ .parseFromString(
+ '',
+ "image/svg+xml",
+ )
+ .querySelector("svg")
+
+const LoadableIcon = (props: LoadableIconProps) => {
+ const { classes, color, height, isLocal, size, width } = props
+ let { icon } = props
+ const [b64, setB64] = useState()
+ const [iconContent, setIconContent] = useState(
+ placeholder,
+ )
+
+ icon = !icon || icon.indexOf(".") < 0 ? "gr.GrStatusPlaceholder" : icon
+ const iconParts = icon.split(".")
+ const iconCategory = iconParts[0] ? iconParts[0].toLowerCase() : ""
+ const iconName = iconParts[1]
+ const iconKey = `${iconCategory}_${iconName}`
+
+ const iData = iconsFactory[iconKey]
+
+ const getIcon = () => {
+ if (!ongoingApiCalls[iconKey]) {
+ // console.log("Requesting Icon from Server for the icon: ", iconKey)
+ ongoingApiCalls[iconKey] = true
+ Network.getStatic(`/icon/${iconCategory}/${iconName}`)
+ .then((res) => {
+ const parsedSvg = parser
+ .parseFromString(res.body, "image/svg+xml")
+ .querySelector("svg")
+ if (parsedSvg) {
+ iconsFactory[iconKey] = parsedSvg
+ setIconContent(parsedSvg)
+ }
+ })
+ .catch((e) => {
+ console.log(e)
+ ongoingApiCalls[iconKey] = false
+ })
+ .finally(() => (ongoingApiCalls[iconKey] = false))
+ }
+ }
+
+ /* eslint-disable react-hooks/exhaustive-deps */
+ useEffect(() => {
+ if (!isLocal) {
+ if (iconName && iconCategory) {
+ !iData && getIcon()
+ } else {
+ console.log("Icon name and category is required, received: ", icon)
+ }
+ }
+ }, [])
+
+ useEffect(() => {
+ iconContent && !isLocal && setB64(DomHelper.svgToBase64(iconContent))
+ }, [iconContent])
+
+ useEffect(() => {
+ iData &&
+ !isLocal &&
+ setB64(DomHelper.svgToBase64(iData, { size, classes, color }))
+ }, [size, classes, color])
+
+ if (isLocal) {
+ return (
+ 
+ )
+ }
+
+ // Below is only for property changes after first render like on hover, click etc
+ if (iData && !b64) {
+ setB64(DomHelper.svgToBase64(iData, { size, classes, color }))
+ }
+
+ return b64 ? (
+ 
+ ) : null
+}
+
+export default LoadableIcon
diff --git a/src/app/components/atoms/LoadableIcon/index.ts b/src/app/components/atoms/LoadableIcon/index.ts
new file mode 100755
index 0000000..210ab4b
--- /dev/null
+++ b/src/app/components/atoms/LoadableIcon/index.ts
@@ -0,0 +1,3 @@
+import LoadableIcon from "./LoadableIcon"
+
+export default LoadableIcon
diff --git a/src/app/components/atoms/Loader/Loader.component.scss b/src/app/components/atoms/Loader/Loader.component.scss
new file mode 100755
index 0000000..9543cbf
--- /dev/null
+++ b/src/app/components/atoms/Loader/Loader.component.scss
@@ -0,0 +1,74 @@
+.ar-Loader {
+ background: rgba(0, 0, 0, 0.2);
+ z-index: 1001;
+ .ar-Loader-content {
+ position: absolute;
+
+ &.custom {
+ top: calc(50% - 25px);
+ left: calc(50% - 25px);
+ .loader {
+ width: 50px;
+ height: 50px;
+ animation: rotating 5s infinite;
+ border-radius: 50%;
+ overflow: hidden;
+ }
+ }
+
+ &.circle {
+ top: calc(50% - 25px);
+ left: calc(50% - 25px);
+ .loader {
+ width: 50px;
+ height: 50px;
+ animation: effect 1s linear infinite;
+ border-radius: 50%;
+ border: 6px solid #a3bdda;
+ border-top-color: #3B77BC;
+ }
+ }
+
+ &.small .loader {
+ top: calc(50% - 12.5px);
+ left: calc(50% - 12.5px);
+ width: 25px;
+ height: 25px;
+ }
+
+ &.large .loader {
+ top: calc(50% - 50px);
+ left: calc(50% - 50px);
+ width: 100px;
+ height: 100px;
+ }
+
+ }
+ @keyframes effect {
+ 0% {transform: rotate(0deg);}
+ 100% {transform: rotate(360deg);}
+ }
+
+ @keyframes rotating {
+ 0% {
+ transform: rotate(0deg);
+ animation-timing-function: linear; /* Constant speed for the first 4s */
+ }
+ 25% {
+ transform: rotate(1800deg); /* 10 rotations (10 x 360 degrees) */
+ animation-timing-function: linear; /* Constant speed for the next 1s */
+ }
+ 50% {
+ transform: rotate(3600deg); /* 6 rotations (6 x 360 degrees) */
+ animation-timing-function: cubic-bezier(0, -200, 1, -200); /* Slow down for the next 4s */
+ }
+ 75% {
+ transform: rotate(4320deg); /* 10 rotations (10 x 360 degrees) */
+ animation-timing-function: cubic-bezier(0, -200, 1, -200); /* Constant speed for the next 1s */
+ }
+ 100% {
+ transform: rotate(5040deg); /* 12 rotations (12 x 360 degrees) */
+ animation-timing-function: linear; /* Constant speed for the last 4s */
+ }
+ }
+}
diff --git a/src/app/components/atoms/Loader/Loader.test.ts b/src/app/components/atoms/Loader/Loader.test.ts
new file mode 100755
index 0000000..ec79fa2
--- /dev/null
+++ b/src/app/components/atoms/Loader/Loader.test.ts
@@ -0,0 +1,8 @@
+import React from "react"
+import Loader from "./Loader"
+
+describe("Loader", () => {
+ it("renders without error", () => {
+
+ })
+})
diff --git a/src/app/components/atoms/Loader/Loader.tsx b/src/app/components/atoms/Loader/Loader.tsx
new file mode 100755
index 0000000..036bd4b
--- /dev/null
+++ b/src/app/components/atoms/Loader/Loader.tsx
@@ -0,0 +1,48 @@
+import { LoaderProps } from "../../../types/components.interface"
+import { ArLoaderTypes } from "../../../types/enums"
+import { LoadableIcon, ProgressIndicator } from "../.."
+import { AppLogo } from "../../../static/images"
+import "./Loader.component.scss"
+
+// Add ability to provide custom loader: an icon or image that rotates
+const Loader = (props: LoaderProps): JSX.Element => {
+ const { type = ArLoaderTypes.CIRCLE, size, label, icon, progress } = props
+ let loaderContent
+ switch (type) {
+ case ArLoaderTypes.BAR:
+ loaderContent = (null)
+ let useLabel = label ? label : demo ? dummyData.label : label
+
+ useEffect(() => {
+ if (isActive && bubbleDimensions) {
+ const selectedTabDimensions =
+ tabRef.current && tabRef.current.getBoundingClientRect()
+ let selectedWidth, selectedLeft
+ if (selectedTabDimensions) {
+ selectedWidth = selectedTabDimensions.width
+ selectedLeft = tabRef.current.offsetLeft
+ }
+ bubbleDimensions(selectedWidth, selectedLeft)
+ }
+ }, [isActive, bubbleDimensions])
+
+ return (
+ ()
+ const {
+ classes,
+ data,
+ demo,
+ onTabSelected,
+ size,
+ variant,
+ activeId,
+ ...rest
+ } = props
+ const [activeTab, setActiveTab] = useState()
const useData = data || (demo && dummyData)
+
useEffect(() => {
+ demo && !activeId && setActiveTab({ id: "23jhrfl2l3lkj2lk3jlkjlsd" })
if (activeId !== undefined) {
- setActiveTab(activeId)
+ setActiveTab({ id: activeId })
+ } else {
+ const activeTab = data && data.find((t) => t.isActive)
+ if (activeTab && activeTab.id) {
+ setActiveTab({ id: activeTab.id })
+ }
}
- }, [activeId])
- const onLocalTabChanged = (id: string, data: any) => {
- if (activeId === undefined) {
- setActiveTab(id)
- }
- onTabChanged && onTabChanged(id, data)
+ }, [activeId, data, demo])
+
+ const receiveDimensionsOfSelectedTab = (
+ selectedWidth?: number,
+ selectedLeft?: number,
+ ) => {
+ setActiveTab({ ...activeTab, selectedWidth, selectedLeft })
}
+
+ const onLocalTabSelected = (id: string, data: any) => {
+ if (activeTab) {
+ if (id !== activeTab.id) {
+ setActiveTab({ ...activeTab, id })
+ onTabSelected && onTabSelected(id, data)
+ }
+ } else {
+ setActiveTab({ id })
+ onTabSelected && onTabSelected(id, data)
+ }
+ }
+
const tabRenders = useData
?.filter((t) => t)
.map((tab: TabProps) => {
return (
+ {!icons && (
+
)
}
diff --git a/src/app/components/Main/Main.tsx b/src/app/components/Main/Main.tsx
index 5e59f6e..bd301a1 100755
--- a/src/app/components/Main/Main.tsx
+++ b/src/app/components/Main/Main.tsx
@@ -14,7 +14,9 @@ const Main = (props: MainProps): JSX.Element => {
@@ -88,14 +92,13 @@ const IconsList = (props: IconsListProps): JSX.Element => {
- {icons &&
- icons
- .slice(0, 100)
- .map((icon, index) => (
-
+ {icons && (
+
+ {icons.slice(0, 100).map((icon, index) => (
+
+ )}
-
)
}
diff --git a/src/app/components/atoms/Icon/Icon.tsx b/src/app/components/atoms/Icon/Icon.tsx
index 304bc1f..62fd7c8 100755
--- a/src/app/components/atoms/Icon/Icon.tsx
+++ b/src/app/components/atoms/Icon/Icon.tsx
@@ -1,22 +1,7 @@
-import { MouseEventHandler } from "react"
import { ICON_ROOT } from "../../../config/constants"
+import { IconProps } from "../../../types/components.interface"
import "./Icon.component.scss"
-interface IconProps {
- alt?: string
- classes?: string
- color?: string
- containerClasses?: string
- demo?: boolean
- height?: string
- onClick?: MouseEventHandler
- onMouseEnter?: MouseEventHandler
- onMouseLeave?: MouseEventHandler
- size?: string
- src: string
- width?: string
-}
-
const Icon = (props: IconProps): JSX.Element | null => {
const {
alt,
diff --git a/src/app/components/atoms/Link/Link.tsx b/src/app/components/atoms/Link/Link.tsx
index 6c31465..385cc12 100755
--- a/src/app/components/atoms/Link/Link.tsx
+++ b/src/app/components/atoms/Link/Link.tsx
@@ -1,10 +1,41 @@
-import React from "react"
+import { useNavigate } from "react-router-dom"
+import { LinkProps } from "../../../types/components.interface"
import "./Link.component.scss"
-interface LinkProps {}
-
-const Link = (props: any): JSX.Element => {
- return {app} can not run on this browser
Supported browsers are Google Chrome v51+ & Microsoft's Edge v32+
For More details you can also check the below link
- {
Helper.copyToClipboard(helpLink)
window.top?.postMessage(
@@ -40,15 +40,15 @@ const BrowserIncompatibility = (
type: "success",
closeable: true,
message: "Link Copied!",
+ show: true,
},
},
"*",
)
}}
- >
- {helpLink}
-
+ preemptNavigation
+ />
+ In Component Link
+const Link = (props: LinkProps): JSX.Element => {
+ const {
+ classes,
+ label,
+ to,
+ children,
+ onClick,
+ openInNew,
+ preemptNavigation,
+ } = props
+ const navigate = useNavigate()
+ return (
+ {
+ if (!preemptNavigation) {
+ if (to) {
+ if (
+ to.startsWith("http://") ||
+ to.startsWith("https://") ||
+ openInNew
+ ) {
+ !openInNew ? window.open(to) : window.open(to, "_blank")
+ } else {
+ navigate(to)
+ }
+ }
+ }
+ onClick && onClick(e)
+ }}
+ >
+ {label || children}
+
+ )
}
export default Link
diff --git a/src/app/components/atoms/LoadableIcon/LoadableIcon.component.scss b/src/app/components/atoms/LoadableIcon/LoadableIcon.component.scss
new file mode 100755
index 0000000..d03237c
--- /dev/null
+++ b/src/app/components/atoms/LoadableIcon/LoadableIcon.component.scss
@@ -0,0 +1,3 @@
+.ar-LoadableIcon {
+ transition: all 0.3s;
+}
diff --git a/src/app/components/atoms/LoadableIcon/LoadableIcon.test.ts b/src/app/components/atoms/LoadableIcon/LoadableIcon.test.ts
new file mode 100755
index 0000000..5526fc3
--- /dev/null
+++ b/src/app/components/atoms/LoadableIcon/LoadableIcon.test.ts
@@ -0,0 +1,6 @@
+import React from "react"
+import LoadableIcon from "./LoadableIcon"
+
+describe("LoadableIcon", () => {
+ it("renders without error", () => {})
+})
diff --git a/src/app/components/atoms/LoadableIcon/LoadableIcon.tsx b/src/app/components/atoms/LoadableIcon/LoadableIcon.tsx
new file mode 100755
index 0000000..106a366
--- /dev/null
+++ b/src/app/components/atoms/LoadableIcon/LoadableIcon.tsx
@@ -0,0 +1,113 @@
+import { useEffect, useState } from "react"
+import { Network, DomHelper } from "../../../utils"
+import { LoadableIconProps } from "../../../types/components.interface"
+import { GenericObject, ObjectType } from "../../../types/types"
+import "./LoadableIcon.component.scss"
+
+const parser = new DOMParser()
+
+// Add below string to prevent API calls for same iconKey,
+// This value is overriden in promise resolution below
+const ongoingApiCalls: ObjectType = {}
+
+const iconsFactory: GenericObject
+
+ )
+}
+
+export default Loader
diff --git a/src/app/components/atoms/Loader/index.ts b/src/app/components/atoms/Loader/index.ts
new file mode 100755
index 0000000..2198ded
--- /dev/null
+++ b/src/app/components/atoms/Loader/index.ts
@@ -0,0 +1,3 @@
+import Loader from "./Loader"
+
+export default Loader
diff --git a/src/app/components/atoms/ProgressIndicator/ProgressIndicator.tsx b/src/app/components/atoms/ProgressIndicator/ProgressIndicator.tsx
index 6b505c8..9041648 100755
--- a/src/app/components/atoms/ProgressIndicator/ProgressIndicator.tsx
+++ b/src/app/components/atoms/ProgressIndicator/ProgressIndicator.tsx
@@ -1,14 +1,11 @@
-import React from "react"
import "./ProgressIndicator.component.scss"
interface ProgressIndicatorProps {}
const ProgressIndicator = (props: any): JSX.Element => {
return (
-
+ {loaderContent}
+
+
- In Component ProgressIndicator
-
+ In Component ProgressIndicator
)
}
-export default ProgressIndicator
\ No newline at end of file
+export default ProgressIndicator
diff --git a/src/app/components/atoms/Tab/Tab.component.scss b/src/app/components/atoms/Tab/Tab.component.scss
index 33eb855..4d66b47 100755
--- a/src/app/components/atoms/Tab/Tab.component.scss
+++ b/src/app/components/atoms/Tab/Tab.component.scss
@@ -1,37 +1,37 @@
.ar-Tab {
- width: 5rem;
- height: 2rem;
+ max-width: 10rem;
+ max-height: 3rem;
line-height: 1;
- border: var(--ar-border);
- border-radius: 6px 6px 0 0;
padding: 0.4rem 1rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
+ z-index: 1;
- &:hover {
+ &:hover:not(.active) {
background-color: var(--ar-bg-hover);
}
- .active {
-
+ &.active {
+ // background-color: var(--ar-bg-selected);
}
- .compact {
+ &.compact {
}
- .comfortable {
+ &.comfortable {
}
- .modern {
+ &.modern {
}
- .classic {
-
+ &.classic {
+ border: var(--ar-border);
+ border-radius: 6px 6px 0 0;
}
.ar-Tab__delete-icon {
diff --git a/src/app/components/atoms/Tab/Tab.tsx b/src/app/components/atoms/Tab/Tab.tsx
index 39cae67..eccd20e 100755
--- a/src/app/components/atoms/Tab/Tab.tsx
+++ b/src/app/components/atoms/Tab/Tab.tsx
@@ -1,55 +1,78 @@
-import Icon from "../Icon"
+import { memo, useEffect, useRef } from "react"
+import { TabProps } from "../../../types/components.interface"
+import { LoadableIcon, Icon } from "../.."
import "./Tab.component.scss"
-export interface TabProps {
- label: string
- data?: any
- demo?: boolean
- deletable?: boolean
- id?: string
- isActive?: boolean
- onSelect?: Function
- size?: string
- variant?: string
-}
-
const dummyData = {
label: "Tab 1",
id: "23jhrfl2l3lkj2lk3jlkjlsd",
isActive: false,
}
-const Tab = (props: TabProps): JSX.Element => {
- const {
- label,
- data,
- demo,
- deletable,
- id,
- isActive,
- onSelect,
- size,
- variant,
- } = props
- const useLabel = label ? label : demo ? dummyData.label : label
- return (
- onSelect && onSelect(id, data)}
- >
- {deletable && (
-
- )
-}
+const Tab = memo(
+ (props: TabProps): JSX.Element => {
+ const {
+ bubbleDimensions,
+ data,
+ demo,
+ deletable,
+ icon,
+ id,
+ isActive,
+ label,
+ onSelect,
+ size,
+ variant,
+ } = props
+ const tabRef = useRef onSelect && onSelect(id, props)}
+ ref={tabRef}
+ >
+ {deletable && (
+
+ )
+ },
+ (prevProps, props) => {
+ return (
+ prevProps.isActive === props.isActive &&
+ JSON.stringify(prevProps.data) === JSON.stringify(props.data) &&
+ prevProps.icon === props.icon &&
+ prevProps.label === props.label &&
+ prevProps.size === props.size &&
+ prevProps.variant === props.variant
+ )
+ },
+)
export default Tab
diff --git a/src/app/components/atoms/TabBar/TabBar.component.scss b/src/app/components/atoms/TabBar/TabBar.component.scss
index 57faee5..6163866 100755
--- a/src/app/components/atoms/TabBar/TabBar.component.scss
+++ b/src/app/components/atoms/TabBar/TabBar.component.scss
@@ -1,3 +1,17 @@
.ar-TabBar {
height: 3.1rem;
+ font-size: 0.8rem;
+
+ .slider {
+ height: 100%;
+ border-bottom: 3px solid blue; /* Change to your desired border color */
+ bottom: 0;
+ background-color: var(--ar-bg-selected);
+ }
+
+ &.modern {
+ .slider {
+ transition: left 0.3s, width 0.3s;
+ }
+ }
}
diff --git a/src/app/components/atoms/TabBar/TabBar.tsx b/src/app/components/atoms/TabBar/TabBar.tsx
index bb0724e..e6909c7 100755
--- a/src/app/components/atoms/TabBar/TabBar.tsx
+++ b/src/app/components/atoms/TabBar/TabBar.tsx
@@ -1,17 +1,9 @@
import { useEffect, useState } from "react"
-import { TabProps } from "../Tab/Tab"
import { Tab } from "../.."
+import { TabBarProps, TabProps } from "../../../types/components.interface"
+import { ObjectType } from "../../../types/types"
import "./TabBar.component.scss"
-interface TabBarProps {
- activeId?: string
- data: TabProps[]
- demo?: boolean
- onTabChanged?: (id: string, data: any) => void
- size?: string
- variant?: string
-}
-
const dummyData = [
{
label: "Tab 1",
@@ -31,39 +23,93 @@ const dummyData = [
]
const TabBar = (props: TabBarProps): JSX.Element => {
- const { data, demo, onTabChanged, size, variant, activeId } = props
- const [activeTab, setActiveTab] = useState
{tabRenders}
+ {activeTab &&
+ activeTab.selectedLeft !== undefined &&
+ activeTab.selectedWidth !== undefined && (
+
+ )}
)
}
diff --git a/src/app/components/index.ts b/src/app/components/index.ts
index 598b0e4..0cf7967 100755
--- a/src/app/components/index.ts
+++ b/src/app/components/index.ts
@@ -1,4 +1,6 @@
/* PLOP_INJECT_IMPORT */
+import Loader from "./atoms/Loader"
+import LoadableIcon from "./atoms/LoadableIcon"
import ErrorBoundary from "./molecules/ErrorBoundary"
import Component_404 from "./molecules/Component_404"
import AlertStackManager from "./molecules/AlertStackManager"
@@ -114,6 +116,8 @@ import Alert from "./atoms/Alert"
export {
/* PLOP_INJECT_EXPORT */
+ Loader,
+ LoadableIcon,
ErrorBoundary,
Component_404,
AlertStackManager,
diff --git a/src/app/components/molecules/Component_404/Component_404.component.scss b/src/app/components/molecules/Component_404/Component_404.component.scss
index 537ab7f..8997e16 100755
--- a/src/app/components/molecules/Component_404/Component_404.component.scss
+++ b/src/app/components/molecules/Component_404/Component_404.component.scss
@@ -1,3 +1,13 @@
.ar-Component_404 {
-
+ .ar-Component_404-content {
+ height: 30rem;
+ min-width: 30rem;
+ font-size: 0.8rem;
+ border: var(--ar-border);
+ background-color: var(--ar-bg-base);
+ transition: box-shadow 0.3s;
+ &:hover {
+ box-shadow: 0px 4px 8px var(--ar-shadow);
+ }
+ }
}
diff --git a/src/app/components/molecules/Component_404/Component_404.tsx b/src/app/components/molecules/Component_404/Component_404.tsx
index 95cbbc6..178773b 100755
--- a/src/app/components/molecules/Component_404/Component_404.tsx
+++ b/src/app/components/molecules/Component_404/Component_404.tsx
@@ -1,9 +1,22 @@
+import { Component_404Props } from "../../../types/components.interface"
+import { Icon } from "../.."
import "./Component_404.component.scss"
-interface Component_404Props {}
-
const Component_404 = (props: Component_404Props): JSX.Element => {
- return In Component Component_404
+ const { iconSize } = props
+ return (
+
+
+ )
}
export default Component_404
diff --git a/src/app/config/api-config.ts b/src/app/config/api-config.ts
index c9777c6..b7f71f5 100644
--- a/src/app/config/api-config.ts
+++ b/src/app/config/api-config.ts
@@ -4,7 +4,7 @@ const API_CONFIG: ApiConfig = {
production: "https://armco.tech/api",
},
STATIC_HOST: {
- development: "http://localhost:8080",
+ development: "https://static.armco.tech",
production: "https://static.armco.tech",
},
}
diff --git a/src/app/config/components.ts b/src/app/config/components.ts
index 5162581..54ee33e 100644
--- a/src/app/config/components.ts
+++ b/src/app/config/components.ts
@@ -209,6 +209,15 @@ const COMPONENTS: ComponentList = {
props: [],
variants: {},
},
+ {
+ name: "Loader",
+ props: ["type", "label", "size"],
+ variants: {
+ size: ["small", "regular", "large"],
+ label: ["Loading Users...", "Submitting Report..."],
+ type: ["bar", "circle", "custom"],
+ },
+ },
{
name: "ProgressIndicator",
props: [],
diff --git a/src/app/pages/ComponentsViewerPage/ComponentsViewerPage.tsx b/src/app/pages/ComponentsViewerPage/ComponentsViewerPage.tsx
index 0710f36..dc53993 100755
--- a/src/app/pages/ComponentsViewerPage/ComponentsViewerPage.tsx
+++ b/src/app/pages/ComponentsViewerPage/ComponentsViewerPage.tsx
@@ -1,5 +1,4 @@
import Main from "../../components/Main"
-import Header from "../../components/Header"
import Footer from "../../components/Footer"
import ComponentList from "../../components/ComponentList"
import Editor from "../../components/Editor"
@@ -12,8 +11,7 @@ const ComponentsViewerPage = (
props: ComponentsViewerPageProps,
): JSX.Element => {
return (
-
+
+ Could not dig what you asked for
+Please check the URL and try again.
++ You may also use the tabs (right-top) to navigate if you're not sure + about the URL +
+
-
}
mainContent={
diff --git a/src/app/pages/FontsPage/FontsPage.page.scss b/src/app/pages/FontsPage/FontsPage.page.scss
new file mode 100755
index 0000000..f717786
--- /dev/null
+++ b/src/app/pages/FontsPage/FontsPage.page.scss
@@ -0,0 +1,3 @@
+.ar-FontsPage {
+
+}
diff --git a/src/app/pages/FontsPage/FontsPage.slice.ts b/src/app/pages/FontsPage/FontsPage.slice.ts
new file mode 100644
index 0000000..1cece56
--- /dev/null
+++ b/src/app/pages/FontsPage/FontsPage.slice.ts
@@ -0,0 +1,18 @@
+import { createSlice } from "@reduxjs/toolkit"
+
+export interface FontsPageState {}
+
+const initialState: FontsPageState = {}
+
+export const fontsPageSlice = createSlice({
+ name: "fontsPage",
+ initialState,
+ reducers: {
+ increment: (state) => {},
+ },
+ extraReducers: (builder) => {},
+})
+
+export const { increment } = fontsPageSlice.actions
+
+export default fontsPageSlice.reducer
diff --git a/src/app/pages/FontsPage/FontsPage.test.ts b/src/app/pages/FontsPage/FontsPage.test.ts
new file mode 100755
index 0000000..172187c
--- /dev/null
+++ b/src/app/pages/FontsPage/FontsPage.test.ts
@@ -0,0 +1,8 @@
+import React from "react"
+import FontsPage from "./FontsPage"
+
+describe("FontsPage", () => {
+ it("renders without error", () => {
+
+ })
+})
diff --git a/src/app/pages/FontsPage/FontsPage.tsx b/src/app/pages/FontsPage/FontsPage.tsx
new file mode 100755
index 0000000..cfdaeda
--- /dev/null
+++ b/src/app/pages/FontsPage/FontsPage.tsx
@@ -0,0 +1,9 @@
+import "./FontsPage.page.scss"
+
+interface FontsPageProps {}
+
+const FontsPage = (props: FontsPageProps): JSX.Element => {
+ return ).map(
(al: BasicFilterConfig) => al.value,
)
- Helper.matchArrayFilters(
+ finalFilteredIconList = Helper.matchArrayFilters(
finalFilteredIconList,
alphabet,
"name",
@@ -63,18 +63,20 @@ const IconsPage = (props: IconsPageProps): JSX.Element => {
if (categories) {
Object.keys(categories).forEach((category) => {
const categoryValue = categories[category as keyof BasicFilterType]
- Helper.matchArrayFilters(
- finalFilteredIconList,
- categoryValue,
- "group",
- )
+ if ((categoryValue as Array).length > 0) {
+ finalFilteredIconList = Helper.matchArrayFilters(
+ finalFilteredIconList,
+ categoryValue,
+ "group",
+ )
+ }
})
}
const countFilter =
filters.count && "data" in filters.count && filters.count.data
if (countFilter) {
- finalFilteredIconList = finalFilteredIconList.slice(
+ finalFilteredIconList = finalFilteredIconList?.slice(
"startIndex" in countFilter ? +countFilter.startIndex : 0,
"endIndex" in countFilter ? +countFilter.endIndex : 0,
)
@@ -85,8 +87,7 @@ const IconsPage = (props: IconsPageProps): JSX.Element => {
}, [filters, icons, searchText])
return (
-
Be Here Soon
+}
+
+export default FontsPage
diff --git a/src/app/pages/FontsPage/index.ts b/src/app/pages/FontsPage/index.ts
new file mode 100755
index 0000000..6db5429
--- /dev/null
+++ b/src/app/pages/FontsPage/index.ts
@@ -0,0 +1,3 @@
+import FontsPage from "./FontsPage"
+
+export default FontsPage
diff --git a/src/app/pages/IconsPage/IconsPage.tsx b/src/app/pages/IconsPage/IconsPage.tsx
index cb1fada..c500f54 100755
--- a/src/app/pages/IconsPage/IconsPage.tsx
+++ b/src/app/pages/IconsPage/IconsPage.tsx
@@ -2,8 +2,8 @@ import { useEffect, useState } from "react"
import { Filters } from "../../components"
import Footer from "../../components/Footer"
import Main from "../../components/Main"
-import Header from "../../components/Header"
import IconsList from "../../components/IconsList"
+import { ObjectType } from "../../types/types"
import Network from "../../utils/network"
import Helper from "../../utils/helper"
import "./IconsPage.page.scss"
@@ -51,7 +51,7 @@ const IconsPage = (props: IconsPageProps): JSX.Element => {
(filters.alphabet as Array
- {
onFilterChange={setFilters}
/>
}
- // mainContent={)
+ | (Partial & LinkChildrenProps)
+
+export interface Component_404Props extends BaseProps {
+ iconSize?: string
+}
+
+export interface FrameContentProps extends BaseProps {
+ contentDefinition: FrameContentDefinition | null
+ notificationProps?: any
+}
+
+// export interface LoaderProps extends BaseProps {
+
+// }
diff --git a/src/app/types/entity.interface.ts b/src/app/types/entity.interface.ts
new file mode 100644
index 0000000..e734237
--- /dev/null
+++ b/src/app/types/entity.interface.ts
@@ -0,0 +1,15 @@
+export interface FrameContentDefinition {
+ componentName: string
+ component: JSX.ElementType
+ props?: {
+ theme?: string
+ [key: string]:
+ | string
+ | number
+ | boolean
+ | { [key: string]: any }
+ | undefined
+ }
+ data: { [key: string]: any }
+ hierarchy: string
+}
diff --git a/src/app/types/enums.ts b/src/app/types/enums.ts
new file mode 100644
index 0000000..c7b1183
--- /dev/null
+++ b/src/app/types/enums.ts
@@ -0,0 +1,29 @@
+export enum ArTabType {
+ CLASSIC = "classic",
+ MODERN = "modern",
+}
+
+export enum ArAriaRoles {
+ TAB = "tab",
+}
+
+export enum ArAlertType {
+ SUCCESS = "success",
+ WARNING = "warning",
+ ERROR = "error",
+ INFORMATION = "information",
+}
+
+export enum ArSizes {
+ XSMALL = "xsmall",
+ SMALL = "small",
+ REGULAR = "regular",
+ LARGE = "large",
+ XLARGE = "xlarge",
+}
+
+export enum ArLoaderTypes {
+ BAR = "bar",
+ CIRCLE = "circle",
+ CUSTOM = "custom",
+}
diff --git a/src/app/types/types.ts b/src/app/types/types.ts
new file mode 100644
index 0000000..939339e
--- /dev/null
+++ b/src/app/types/types.ts
@@ -0,0 +1,14 @@
+export type ObjectType = {
+ [key: string]:
+ | string
+ | number
+ | boolean
+ | null
+ | undefined
+ | ObjectType
+ | ArrayType
+}
+
+export type ArrayType = Array
+
+export type GenericObject = { [key: string]: T }
diff --git a/src/app/utils/domHelper.ts b/src/app/utils/domHelper.ts
new file mode 100644
index 0000000..7cf2cce
--- /dev/null
+++ b/src/app/utils/domHelper.ts
@@ -0,0 +1,23 @@
+import { LoadableIconProps } from "../types/entity.interface"
+
+class DOMHelper {
+ static svgToBase64(svg: SVGSVGElement, svgProps?: LoadableIconProps) {
+ const { size, classes, color } = svgProps || {}
+ svg.setAttribute("height", size || "1rem")
+ svg.setAttribute("width", size || "1rem")
+ svg.setAttribute("class", classes || "")
+ svg.setAttribute("stroke", color || "black")
+ const path = svg.querySelector("path")
+ // Override stroke and color of "path" node inside SVG at below line.
+ path &&
+ color &&
+ !!path.getAttribute("stroke") &&
+ path.setAttribute("stroke", color)
+ // path && color && !!path.getAttribute("fill") && path.setAttribute("fill", color);
+ svg.style.color = color || "black"
+ const serializedSvg = new XMLSerializer().serializeToString(svg)
+ return btoa(serializedSvg)
+ }
+}
+
+export default DOMHelper
diff --git a/src/app/utils/helper.tsx b/src/app/utils/helper.tsx
index 67d5146..c878104 100644
--- a/src/app/utils/helper.tsx
+++ b/src/app/utils/helper.tsx
@@ -202,7 +202,7 @@ class Helper {
: searchList.filter(
(item) =>
filters.findIndex(
- (al) => item[match].toLowerCase() === al.toLowerCase(),
+ (al) => item[match].toLowerCase() === al.value.toLowerCase(),
) > -1,
)
}
diff --git a/src/app/utils/index.ts b/src/app/utils/index.ts
new file mode 100644
index 0000000..96f2795
--- /dev/null
+++ b/src/app/utils/index.ts
@@ -0,0 +1,6 @@
+import DomHelper from "./domHelper"
+import Adapter from "./adapters"
+import Helper from "./helper"
+import Network from "./network"
+
+export { DomHelper, Adapter, Helper, Network }
diff --git a/src/app/utils/network.ts b/src/app/utils/network.ts
index f0b11ea..3a3de4f 100644
--- a/src/app/utils/network.ts
+++ b/src/app/utils/network.ts
@@ -27,8 +27,8 @@ export default class Network {
static async getStatic(
url: string,
- queryParams: object | null,
- options: Options | null,
+ queryParams?: object | null,
+ options?: Options | null,
) {
let urlString = Network.stringifyUrl(url, queryParams)
const environment = process.env.NODE_ENV || "development"
@@ -119,7 +119,7 @@ export default class Network {
throw new Error(err.message, err.error)
}
- static stringifyUrl(url: string, queryParams: any) {
+ static stringifyUrl(url: string, queryParams?: any) {
return url
? queryParams
? Object.keys(queryParams).reduce(
diff --git a/vite.config.ts b/vite.config.ts
index b522027..9ebd33a 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,11 +1,13 @@
import { defineConfig } from "vitest/config"
import react from "@vitejs/plugin-react"
import path from "path"
+import svgr from "vite-plugin-svgr"
import { visualizer } from "rollup-plugin-visualizer"
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
+ svgr(),
react(),
// visualizer({
// template: "treemap", // or sunburst
@@ -26,7 +28,7 @@ export default defineConfig({
},
build: {
outDir: "build",
- // sourcemap: true,
+ sourcemap: true,
rollupOptions: {
treeshake: true,
},