oneslash-design-system 1.0.6 → 1.0.8

package/components/emptyBox.tsx

@@ -0,0 +1,33 @@
+'use client'
+import React from 'react';
+import { ExclamationCircleIcon } from '@heroicons/react/24/outline';
+
+interface EmptyBoxProps{
+    text: string;
+    size: "small" | "large";
+  }
+  
+export default function EmptyBox ({ 
+    text,
+    size,
+}: EmptyBoxProps) {
+
+    const color = 'text-light-text-disabled dark:text-dark-text-disabled';
+
+    const height = size === 'small' 
+    ? 'py-6' 
+    : 'h-full';
+
+    const iconSize = 'size-6' ;
+
+    return (
+        <div className={`flex flex-col space-y-2 justify-center items-center w-full ${height}`}>
+            <ExclamationCircleIcon 
+                className={`${iconSize} ${color}`}
+            />
+            <p className={`text-body1 ${color}`} text-center>
+                {text}
+            </p>
+        </div>
+    );
+}

package/components/loadingScreen.tsx

@@ -0,0 +1,18 @@
+'use client';
+import React from 'react';
+
+export default function LoadingScreen() {
+  return (
+    <div className="flex justify-center items-center h-full w-full min-h-[200px]">
+        <div className="w-12 h-12 border-4 border-t-transparent border-light-accent-main rounded-full animate-spin"></div>
+    </div>
+  );
+};
+
+export function LoadingSmall() {
+  return (
+    <div className="flex justify-center items-center h-[40px] w-[40px]">
+      <div className="w-[40px] h-[40px] border-4 border-t-transparent border-light-accent-main rounded-full animate-spin"></div>
+    </div>
+  );
+};

package/index.ts

@@ -1,15 +1,18 @@
 import './index.css';
 import './designTokens';
-export * from './components/button';
+
 export * from './components/alert';
 export * from './components/button';
 export * from './components/checkBox';
+export * from './components/emptyBox';
 export * from './components/iconButton';
+export * from './components/loadingScreen';
 export * from './components/menuItem';
 export * from './components/modal';
 export * from './components/popover';
 export * from './components/tab';
 export * from './components/tag';
 export * from './components/textField';
+export * from './components/timeStamp'
 export * from './components/tooltip';
 export * from './components/userImage';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "oneslash-design-system",
   "description": "A design system for the Oneslash projects",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "private": false,
   "scripts": {
     "dev": "next dev",

package/global.d.ts

@@ -1,155 +0,0 @@
-// types/global.d.ts
-export {}
-declare global {
-
-    interface CommentReactionProps {
-      reactions: any;
-      isArchiveComment?: boolean;
-    }
-
-    interface TimeStampProps{
-      createdAt: string | number | Date;
-      dateFormat: 'absolute' | 'relative';
-    }
-
-    interface CheckboxProps {
-      label?: string;
-      checked?: boolean;
-      onChange?: (checked: boolean) => void;
-    }
-    
-    interface ReactionIconButtonProps {
-      size?: "small" | "medium" | "large";
-      color?: "inherit" | "default" | "primary" | "secondary" | "error" | "info" | "success" | "warning";
-      figmaCommentId: string;
-      fileKey?: string;
-      accountId: string;
-      selectedHeadCommentId?: any;
-      associatedAccountId?: any;
-    }
-
-    interface CheckIconButtonProps {
-      size: "small" | "medium" | "large";
-      color?: "inherit" | "default" | "primary" | "secondary" | "error" | "info" | "success" | "warning";
-    }
-
-    interface UncheckIconButtonProps {
-      size: "small" | "medium" | "large";
-      color?: "inherit" | "default" | "primary" | "secondary" | "error" | "info" | "success" | "warning";
-    }
-
-    interface ButtonProps{
-      size: 'large' | 'medium' | 'small';
-      type: 'primary' | 'secondary' | 'tertiary' | 'textOnly';
-      state: 'enabled' | 'hovered' | 'selected' | 'focused' | 'disabled';
-      label: string;
-      iconLeftName?: keyof typeof HeroIcons;
-      iconRightName?: keyof typeof HeroIcons;
-      onClick?: any;
-    }
-
-    interface IconButtonProps{
-      variant: "contained" | "iconOnly";
-      color: "primary" | "secondary";
-      state: "enabled" | "selected" | "disabled";
-      iconName: keyof typeof HeroIcons;
-      onClick?: any;
-    }
-
-    interface TagProps{
-      key?: any;
-      variant: "contained" | "textOnly";
-      size: "medium" | "small";
-      state?: "enabled" | "selected" ;
-      label: any;
-      iconName?: keyof typeof HeroIcons;
-      isDeletable?: keyof typeof HeroIcons;
-      onClick?: any;
-      color?: 'default' | 'info';
-    }
-
-    interface EmptyBoxProps{
-      text: string;
-      size: "small" | "large";
-    }
-
-    interface TabPanelProps {
-      children?: React.ReactNode;
-      index: number;
-      value: number;
-    }
-
-    interface TextFieldProps {
-      id: string;
-      label?: string;
-      value: string;
-      onChange: any;
-      iconLeft?: any;
-      iconRight?: React.ReactNode | React.ComponentType<any>; 
-      multiline?: boolean;
-      maxRows?: number;
-      disabled?: boolean;
-      error?: boolean;
-    }
-
-    interface ModalProps {
-      isOpen: boolean;
-      title: string;
-      children: React.ReactNode;
-      onClose: () => void;
-      actions?: React.ReactNode;
-    }
-
-    interface MenuItemProps {
-      href?: string;
-      iconName?: string;
-      label: string;
-      isSelected?: boolean;
-      onClick: any;
-    }
-
-    type IconType = React.ComponentType<React.SVGProps<SVGSVGElement>>;
-
-    interface TooltipProps {
-      title: string;
-      children: React.ReactElement;
-    }
-
-    interface UserImageProps {
-      userHandle: string;
-      userImgUrl?: string;
-    }
-
-    interface AlertProps {
-      open: boolean;
-      type: 'success' | 'warning' | 'error' | 'info';
-      message: string;
-      onClose: () => void;
-    }
-
-    interface PopoverProps {
-      id?: string;
-      anchorEl: HTMLElement | null;
-      open: boolean;
-      onClose: () => void;
-      children: ReactNode;
-    }
-
-    interface ScrapTagProps{
-      comment?: any;
-    }
-
-    type TabProps = {
-      label: string;
-      href?: string;
-      isSelected: boolean;
-      onClick: () => void;
-      iconName?: string;
-    };
-
-}
-
-declare module '@heroicons/react/*' {
-  const content: any;
-  export default content;
-}