Organize new folders and files

packages/cyberstorm/src/components/Footer/Footer.tsx

@@ -54,7 +54,7 @@ export function Footer() {
           </div>
           <div className={classnames(styles.item, styles.linksWrapper)}>
             <div className={classnames(styles.inner, styles.navLinks)}>
-              <nav className={styles.nav} aria-label="Links">
+              <nav className={styles.nav} aria-label="Footer links">
                 <Container rootClasses={styles.navSection}>
                   <Heading
                     variant="primary"
@@ -192,6 +192,7 @@ export function Footer() {
             <NewLink
               primitiveType="link"
               href="https://github.com/thunderstore-io/thunderstore-ui/"
+              aria-label="This page is open source, link to Thunderstore UIs Github page"
             >
               open-source ❤
             </NewLink>

packages/cyberstorm/src/index.ts

@@ -77,20 +77,52 @@ export { CollapsibleText } from "./components/CollapsibleText/CollapsibleText";
 export { SkeletonBox } from "./components/SkeletonBox/SkeletonBox";
 export { isNode, isRecord, isStringArray } from "./utils/type_guards";
 
+// primitiveComponents
+export {
+  Actionable,
+  type ActionableButtonProps,
+  type ActionableLinkProps,
+  type ActionableCyberstormLinkProps,
+} from "./primitiveComponents/Actionable/Actionable";
+export {
+  Frame,
+  type FrameDisplayProps,
+  type FrameFloaterProps,
+  type FrameHeadingProps,
+  type FrameIconProps,
+  type FrameListItemProps,
+  type FrameListProps,
+  type FrameModalProps,
+  type FramePopoverProps,
+  type FrameTextProps,
+  type FrameWindowProps,
+} from "./primitiveComponents/Frame/Frame";
+export {
+  Input,
+  type InputTextInputProps,
+} from "./primitiveComponents/Input/Input";
+export {
+  type variants,
+  type colors,
+  type sizes,
+  type TextStyles,
+  type PrimitiveComponentDefaultProps,
+} from "./primitiveComponents/utils/utils";
+
 // newComponents
-export { Menu } from "./newComponents/Menu/Menu/Menu";
-export { Modal } from "./newComponents/Modal/Modal/Modal";
-export { Heading } from "./newComponents/Heading/Heading/Heading";
+export { Menu } from "./newComponents/Menu/Menu";
+export { Modal } from "./newComponents/Modal/Modal";
+export { Heading } from "./newComponents/Heading/Heading";
 export { CardCommunity } from "./newComponents/Card/CardCommunity/CardCommunity";
 export { Link as NewLink } from "./newComponents/Link/Link/Link";
 export { LinkButton } from "./newComponents/Link/LinkButton/LinkButton";
-export { Button as NewButton } from "./newComponents/Button/Button/Button";
+export { Button as NewButton } from "./newComponents/Button/Button";
 export { BreadCrumbs as NewBreadCrumbs } from "./newComponents/BreadCrumbs/BreadCrumbs";
-export { Container } from "./newComponents/Container/Container/Container";
-export { TextInput as NewTextInput } from "./newComponents/TextInput/TextInput/TextInput";
+export { Container } from "./newComponents/Container/Container";
+export { TextInput as NewTextInput } from "./newComponents/TextInput/TextInput";
 export { Select as NewSelect } from "./newComponents/Select/Select";
 export { Icon as NewIcon } from "./newComponents/Icon/Icon";
-export { Tag as NewTag } from "./newComponents/Tag/Tag/Tag";
+export { Tag as NewTag } from "./newComponents/Tag/Tag";
 export {
   DropDown as NewDropDown,
   DropDownItem as NewDropDownItem,

packages/cyberstorm/src/newComponents/Button/Button/Button.tsx → packages/cyberstorm/src/newComponents/Button/Button.tsx

@@ -1,10 +1,10 @@
+import styles from "../../sharedComponentStyles/ButtonStyles/Button.module.css";
+import React from "react";
+import { classnames } from "../../utils/utils";
 import {
-  Actionable,
   ActionableButtonProps,
-} from "../../../primitiveComponents/Actionable/Actionable";
-import styles from "../../../sharedVariantStyles/ButtonStyles/Button.module.css";
-import React from "react";
-import { classnames } from "../../../utils/utils";
+  Actionable,
+} from "../../primitiveComponents/Actionable/Actionable";
 
 export const Button = React.forwardRef<
   HTMLButtonElement,

packages/cyberstorm/src/newComponents/Card/CardCommunity/CardCommunity.tsx

@@ -10,7 +10,7 @@ import { Community } from "@thunderstore/dapper/types";
 import styles from "./CardCommunity.module.css";
 import { numberWithSpaces, formatInteger } from "../../../utils/utils";
 import { NewLink, NewIcon, Image, NewTag } from "../../..";
-import { Container } from "../../Container/Container/Container";
+import { Container } from "../../Container/Container";
 
 interface Props {
   community: Community;

packages/cyberstorm/src/newComponents/Container/Container/Container.tsx → packages/cyberstorm/src/newComponents/Container/Container.tsx

@@ -1,10 +1,7 @@
 import styles from "./Container.module.css";
 import React from "react";
-import {
-  Frame,
-  FrameWindowProps,
-} from "../../../primitiveComponents/Frame/Frame";
-import { classnames } from "../../../utils/utils";
+import { Frame, FrameWindowProps } from "../../primitiveComponents/Frame/Frame";
+import { classnames } from "../../utils/utils";
 
 export const Container = React.forwardRef<
   HTMLDivElement,

packages/cyberstorm/src/newComponents/DropDown/DropDown.tsx

@@ -2,7 +2,7 @@ import { ReactNode, ReactElement } from "react";
 import styles from "./DropDown.module.css";
 
 import * as RadixDropDown from "@radix-ui/react-dropdown-menu";
-import { Container } from "../Container/Container/Container";
+import { Container } from "../Container/Container";
 import { classnames } from "../../utils/utils";
 import { PrimitiveComponentDefaultProps } from "../../primitiveComponents/utils/utils";
 

packages/cyberstorm/src/newComponents/Heading/Heading/Heading.tsx → packages/cyberstorm/src/newComponents/Heading/Heading.tsx

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from "react";
 import styles from "./Heading.module.css";
 import React from "react";
-import { Frame } from "../../../primitiveComponents/Frame/Frame";
+import { Frame } from "../../primitiveComponents/Frame/Frame";
 
 interface DefaultProps
   extends React.HTMLAttributes<HTMLHeadingElement>,

packages/cyberstorm/src/newComponents/Link/LinkButton/LinkButton.tsx

@@ -3,7 +3,7 @@ import {
   ActionableCyberstormLinkProps,
   ActionableLinkProps,
 } from "../../../primitiveComponents/Actionable/Actionable";
-import styles from "../../../sharedVariantStyles/ButtonStyles/Button.module.css";
+import styles from "../../../sharedComponentStyles/ButtonStyles/Button.module.css";
 import React from "react";
 import { classnames } from "../../../utils/utils";
 

packages/cyberstorm/src/newComponents/Menu/Menu/Menu.tsx → packages/cyberstorm/src/newComponents/Menu/Menu.tsx

@@ -1,16 +1,20 @@
-import { PropsWithChildren, ReactNode } from "react";
-import { Frame } from "../../../primitiveComponents/Frame/Frame";
+import { ReactNode } from "react";
+
 import styles from "./Menu.module.css";
-import { Button } from "../../..";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faXmark } from "@fortawesome/free-solid-svg-icons";
+import { NewButton, NewIcon } from "../..";
+import {
+  FramePopoverProps,
+  Frame,
+} from "../../primitiveComponents/Frame/Frame";
 
-interface Props extends PropsWithChildren {
+interface Props extends Omit<FramePopoverProps, "primitiveType"> {
   trigger: ReactNode;
-  popoverId: string;
   controls?: ReactNode;
 }
 
+// TODO: Add support for color, size and text systems
 export function Menu(props: Props) {
   return (
     <>
@@ -23,23 +27,22 @@ export function Menu(props: Props) {
         rootClasses={styles.menuRoot}
         wrapperClasses={styles.menuWrapper}
       >
-        {/* STYLELIB UPDATE TODO: Use variant of primitive */}
         {props.controls ? (
           props.controls
         ) : (
-          <Button.Root
+          <NewButton
             {...{
               popovertarget: props.popoverId,
               popovertargetaction: "close",
             }}
-            colorScheme="transparentTertiary"
+            csVariant="tertiary"
             className={styles.menuCloseButton}
             tooltipText="Close"
           >
-            <Button.ButtonIcon>
+            <NewIcon csMode="inline" noWrapper>
               <FontAwesomeIcon icon={faXmark} />
-            </Button.ButtonIcon>
-          </Button.Root>
+            </NewIcon>
+          </NewButton>
         )}
 
         {props.children}

packages/cyberstorm/src/newComponents/Modal/Modal/Modal.tsx → packages/cyberstorm/src/newComponents/Modal/Modal.tsx

@@ -1,13 +1,12 @@
-import { PropsWithChildren, ReactNode } from "react";
-import { Frame } from "../../../primitiveComponents/Frame/Frame";
+import { ReactNode } from "react";
+import { Frame, FrameModalProps } from "../../primitiveComponents/Frame/Frame";
 import styles from "./Modal.module.css";
-import { Button } from "../../..";
+import { NewButton, NewIcon } from "../..";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faXmark } from "@fortawesome/free-solid-svg-icons";
 
-interface Props extends PropsWithChildren {
+interface Props extends Omit<FrameModalProps, "primitiveType"> {
   trigger: ReactNode;
-  popoverId: string;
 }
 
 export function Modal(props: Props) {
@@ -22,20 +21,19 @@ export function Modal(props: Props) {
         rootClasses={styles.modalRoot}
         wrapperClasses={styles.modalWrapper}
       >
-        {/* STYLELIB UPDATE TODO: Use variant of primitive */}
-        <Button.Root
+        <NewButton
           {...{
             popovertarget: props.popoverId,
             popovertargetaction: "close",
           }}
-          colorScheme="transparentTertiary"
+          csVariant="tertiary"
           className={styles.modalCloseButton}
           tooltipText="Close"
         >
-          <Button.ButtonIcon>
+          <NewIcon csMode="inline" noWrapper>
             <FontAwesomeIcon icon={faXmark} />
-          </Button.ButtonIcon>
-        </Button.Root>
+          </NewIcon>
+        </NewButton>
         {props.children}
       </Frame>
     </>

packages/cyberstorm/src/newComponents/Select/Select.module.css

@@ -30,7 +30,8 @@
   cursor: pointer;
 }
 
-.item:hover {
+.item:hover,
+.item:focus {
   background-color: var(--color-surface--6, var(--color-primary, red));
 }
 

packages/cyberstorm/src/newComponents/Select/Select.tsx

@@ -3,7 +3,14 @@ import styles from "./Select.module.css";
 import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { Root, Content, Item, Portal, Trigger } from "@radix-ui/react-select";
+import {
+  Root,
+  Content,
+  Item,
+  Portal,
+  Trigger,
+  Viewport,
+} from "@radix-ui/react-select";
 import { classnames } from "../../utils/utils";
 import { Container, NewButton, NewIcon } from "../..";
 
@@ -85,7 +92,7 @@ export function Select<T extends string>(props: SelectProps<T>) {
           sideOffset={4}
           className={classnames(styles.content)}
         >
-          {selectItemElements}
+          <Viewport>{selectItemElements}</Viewport>
         </Content>
       </Portal>
     </Root>

packages/cyberstorm/src/newComponents/Tag/Tag/Tag.tsx → packages/cyberstorm/src/newComponents/Tag/Tag.tsx

@@ -1,10 +1,7 @@
-import styles from "../../../sharedVariantStyles/TagStyles/Tag.module.css";
+import styles from "../../sharedComponentStyles/TagStyles/Tag.module.css";
 import React from "react";
-import {
-  Frame,
-  FrameWindowProps,
-} from "../../../primitiveComponents/Frame/Frame";
-import { classnames } from "../../../utils/utils";
+import { Frame, FrameWindowProps } from "../../primitiveComponents/Frame/Frame";
+import { classnames } from "../../utils/utils";
 
 interface TagProps extends Omit<FrameWindowProps, "primitiveType"> {
   dark?: boolean;

packages/cyberstorm/src/newComponents/TextInput/TextInput/TextInput.tsx → packages/cyberstorm/src/newComponents/TextInput/TextInput.tsx

@@ -3,14 +3,14 @@ import React from "react";
 import {
   Input,
   InputTextInputProps,
-} from "../../../primitiveComponents/Input/Input";
-import { classnames } from "../../../utils/utils";
-import { Frame } from "../../../primitiveComponents/Frame/Frame";
+} from "../../primitiveComponents/Input/Input";
+import { classnames } from "../../utils/utils";
+import { Frame } from "../../primitiveComponents/Frame/Frame";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCircleXmark } from "@fortawesome/free-solid-svg-icons";
-import { Actionable } from "../../../primitiveComponents/Actionable/Actionable";
-import { colors, variants } from "../../../primitiveComponents/utils/utils";
-import { NewIcon } from "../../..";
+import { Actionable } from "../../primitiveComponents/Actionable/Actionable";
+import { colors, variants } from "../../primitiveComponents/utils/utils";
+import { NewIcon } from "../..";
 
 interface TextInputProps extends Omit<InputTextInputProps, "primitiveType"> {
   leftIcon?: JSX.Element;

packages/cyberstorm/src/primitiveComponents/Frame/Display.module.css

@@ -5,33 +5,33 @@
   line-height: normal;
 }
 
-.display[data-styleLevel="1"] {
+.display[data-stylelevel="1"] {
   font-weight: var(--font-weight-heavy);
   font-size: calc(var(--space--54) * var(--scaling, 1));
   font-family: Hubot-Sans, sans-serif;
   line-height: 115%; /* 62.1px */
 }
 
-.display[data-styleLevel="2"] {
+.display[data-stylelevel="2"] {
   font-weight: var(--font-weight-heavy);
   font-size: calc(var(--space--51) * var(--scaling, 1));
   font-family: Hubot-Sans, sans-serif;
 }
 
-.display[data-styleLevel="3"] {
+.display[data-stylelevel="3"] {
   font-weight: 700;
   font-size: calc(var(--space--38) * var(--scaling, 1));
   font-family: Hubot-Sans, sans-serif;
 }
 
-.display[data-styleLevel="4"] {
+.display[data-stylelevel="4"] {
   font-size: calc(var(--space--16) * var(--scaling, 1));
 }
 
-.display[data-styleLevel="5"] {
+.display[data-stylelevel="5"] {
   font-size: calc(var(--space--14) * var(--scaling, 1));
 }
 
-.display[data-styleLevel="6"] {
+.display[data-stylelevel="6"] {
   font-size: calc(var(--space--12) * var(--scaling, 1));
 }