oneslash-design-system 1.0.3 → 1.0.4

package/components/alert/alert.tsx

@@ -1,7 +1,20 @@
 'use client';
 import React, { useEffect } from 'react';
 
-export default function Alert({ open, type, message, onClose }: AlertProps) {
+interface AlertProps {
+  open: boolean;
+  type: 'success' | 'warning' | 'error' | 'info';
+  message: string;
+  onClose: () => void;
+}
+
+export default function Alert({ 
+  open, 
+  type, 
+  message, 
+  onClose 
+}: AlertProps) {
+  
   useEffect(() => {
     if (open) {
       const timer = setTimeout(() => {

package/components/button/button.tsx

@@ -1,5 +1,16 @@
 'use client';
 import React, { useState, useEffect, useCallback } from 'react';
+import * as HeroIcons from '@heroicons/react/24/outline';
+
+interface ButtonProps {
+  size: 'large' | 'medium' | 'small';
+  type: 'primary' | 'secondary' | 'tertiary' | 'textOnly';
+  state: 'enabled' | 'hovered' | 'selected' | 'focused' | 'disabled';
+  label: string;
+  iconLeftName?: keyof typeof HeroIcons; // Reference to HeroIcons
+  iconRightName?: keyof typeof HeroIcons; // Reference to HeroIcons
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}
 
 type IconType = React.ComponentType<React.SVGProps<SVGSVGElement>>;
 

package/components/checkBox/checkBox.tsx

@@ -1,7 +1,11 @@
 'use client';
 import React, { useState } from 'react';
 
-
+interface CheckboxProps {
+  label?: string;
+  checked?: boolean;
+  onChange?: (checked: boolean) => void;
+}
 
 export default function Checkbox({
   label, 

package/components/iconButton/iconButton.tsx

@@ -1,5 +1,14 @@
 'use client';
 import React, { useState, useEffect, useCallback } from 'react';
+import * as HeroIcons from '@heroicons/react/24/outline';
+
+interface IconButtonProps{
+  variant: "contained" | "iconOnly";
+  color: "primary" | "secondary";
+  state: "enabled" | "selected" | "disabled";
+  iconName: keyof typeof HeroIcons;
+  onClick?: any;
+}
 
 type IconType = React.ComponentType<React.SVGProps<SVGSVGElement>>;
 

package/components/menuItem/menuItem.tsx

@@ -2,6 +2,14 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import NextLink from 'next/link';
 
+interface MenuItemProps {
+  href?: string;
+  iconName?: string;
+  label: string;
+  isSelected?: boolean;
+  onClick: any;
+}
+
 export default function MenuItem({ 
 	href = '#', 
 	iconName, 

package/components/modal/modal.tsx

@@ -1,6 +1,14 @@
 'use client';
 import React from 'react';
 
+interface ModalProps {
+  isOpen: boolean;
+  title: string;
+  children: React.ReactNode;
+  onClose: () => void;
+  actions?: React.ReactNode;
+}
+
 export default function Modal({ 
 	isOpen, 
 	title, 

package/components/popover/popover.tsx

@@ -1,7 +1,21 @@
 'use client';
 import React, { useState, useRef, useEffect } from 'react';
 
-export default function Popover({ anchorEl, open, onClose, children }: PopoverProps) {
+interface PopoverProps {
+  id?: string;
+  anchorEl: HTMLElement | null;
+  open: boolean;
+  onClose: () => void;
+  children: any;
+}
+
+export default function Popover({ 
+  anchorEl, 
+  open, 
+  onClose, 
+  children 
+}: PopoverProps) {
+
   const [popoverStyle, setPopoverStyle] = useState<React.CSSProperties>({});
   const popoverRef = useRef<HTMLDivElement>(null);
 

package/components/tab/tab.tsx

@@ -2,6 +2,13 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { useRouter, usePathname } from 'next/navigation';
 
+type TabProps = {
+  label: string;
+  href?: string;
+  isSelected: boolean;
+  onClick: () => void;
+  iconName?: string;
+};
 
 const TabIcon: React.FC<{ iconName?: string }> = ({ iconName }) => {
   const [Icon, setIcon] = useState<React.ComponentType<React.SVGProps<SVGSVGElement>> | null>(null);
@@ -37,7 +44,7 @@ const Tab: React.FC<TabProps> = ({ label, href, isSelected, onClick, iconName })
   const handleClick = () => {
     onClick();
     if (href) {
-    router.push(href);
+      router.push(href);
     }
   };
 

package/components/tag/tag.tsx

@@ -1,5 +1,18 @@
 'use client';
 import React, { useState, useEffect, useCallback } from 'react';
+import * as HeroIcons from '@heroicons/react/24/outline';
+
+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';
+}
 
 type IconType = React.ComponentType<React.SVGProps<SVGSVGElement>>;
 
@@ -14,6 +27,7 @@ export default function Tag({
   onClick,
   color = 'default',
 }: TagProps) {
+
   const [isHovered, setIsHovered] = useState(false);
   const [Icon, setIcon] = useState<IconType | null>(null);
   const [DeleteIcon, setDeleteIcon] = useState<IconType | null>(null);

package/components/textField/textField.tsx

@@ -1,6 +1,19 @@
 'use client';
 import React, { useState } from 'react';
 
+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;
+}
+
 export default function TextField({
   id,
   label,

package/components/tooltip/tooltip.tsx

@@ -1,7 +1,16 @@
 'use client';
 import React, { useState, useRef, useEffect } from 'react';
 
-export default function Tooltip({ title, children }: TooltipProps) {
+interface TooltipProps {
+  title: string;
+  children: React.ReactElement;
+}
+
+export default function Tooltip({ 
+  title, 
+  children 
+}: TooltipProps) {
+
   const [visible, setVisible] = useState(false);
   const [position, setPosition] = useState<'top' | 'bottom'>('bottom');
   const tooltipRef = useRef<HTMLDivElement>(null);

package/components/userImage/userImage.tsx

@@ -1,5 +1,11 @@
+'use client';
 import React from 'react';
 
+interface UserImageProps {
+  userHandle: string;
+  userImgUrl?: string;
+}
+
 export default function UserImage({ 
 	userHandle, 
 	userImgUrl,

package/global.d.ts

@@ -122,7 +122,7 @@ declare global {
 
     interface AlertProps {
       open: boolean;
-      type: string;
+      type: 'success' | 'warning' | 'error' | 'info';
       message: string;
       onClose: () => void;
     }

package/index.ts

@@ -1,7 +1,5 @@
-import './index.css';  
-import  Button from './components/button/button'; 
-export { Button };
-
+import './index.css';
+export * from './components/button/button';
 export * from './components/alert/alert';
 export * from './components/button/button';
 export * from './components/checkBox/checkBox';

package/package.json

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

package/tsconfig.json

@@ -32,9 +32,10 @@
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
-    ".next/types/**/*.ts"
+    ".next/types/**/*.ts",
+    "types/**/*.d.ts"
   ],
   "exclude": [
     "node_modules"
   ]
-}
+}