feat: add components to examples folder and its style files (#29)

Author: fathima-mirza

example/src/App.tsx

@@ -2,9 +2,9 @@ import React, { useState } from "react";
 
 import { DeleteIcon, EditIcon } from "../../src/components/icons";
 import { MultiLevelTable } from "../../src/components/MultiLevelTable";
-import { Popup } from "../../src/components/Popup";
-import { RowDetailsPopup } from "../../src/components/RowDetailsPopup";
-import { SidePanel } from "../../src/components/SidePanel";
+import { Popup } from "./components/Popup";
+import { RowDetailsPopup } from "./components/RowDetailsPopup";
+import { SidePanel } from "./components/SidePanel";
 import { getStatusStyle, tableRowTypography } from "../../src/styles/style";
 import { darkTheme, lightTheme } from "../../src/themes";
 import type { ThemeProps } from "../../src/types/theme";

src/components/DetailRow.tsx renamed to example/src/components/DetailRow.tsx

@@ -1,10 +1,9 @@
 import React, { useEffect } from 'react';
 
 import { DetailRow } from './DetailRow';
-import { getStatusStyle, tableRowTypography } from '../styles/style';
-import type { ThemeProps } from '../types/theme';
 import type { DataItem } from '../types/types';
-
+import type { ThemeProps } from '../types/theme';
+import { getStatusStyle, tableRowTypography } from '../styles/style';
 import '../styles/RowDetailsPopup.css';
 
 interface RowDetailsPopupProps {

src/components/ExportDropdown.tsx renamed to example/src/components/ExportDropdown.tsx

@@ -1,11 +1,9 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState, useEffect } from 'react';
 
 import { SidePanelInput } from './SidePanelInput';
-import { createComponentStyles } from '../styles/componentStyles';
-import { getStatusStyle } from '../styles/style';
-import type { ThemeProps } from '../types/theme';
 import type { DataItem } from '../types/types';
-
+import type { ThemeProps } from '../types/theme';
+import { componentStyles, getStatusStyle } from '../styles/style';
 import '../styles/SidePanel.css';
 
 interface SidePanelProps {
@@ -31,7 +29,6 @@ export const SidePanel: React.FC<SidePanelProps> = ({
   isStatusEditable = false, // Status is typically not editable
 }) => {
   const [formData, setFormData] = useState<Partial<DataItem>>({});
-  const styles = createComponentStyles(theme);
 
   // Prevent body scroll when side panel is open
   useEffect(() => {
@@ -89,7 +86,7 @@ export const SidePanel: React.FC<SidePanelProps> = ({
 
     return (
       <span style={{ 
-        ...styles.statusBadge.base,
+        ...componentStyles.statusBadge.base,
         ...style
       }}>
         {status}
@@ -104,22 +101,22 @@ export const SidePanel: React.FC<SidePanelProps> = ({
     const firstLetter = value.charAt(0).toUpperCase();
 
     return (
-      <div style={styles.resourceTypeDisplay.container}>
+      <div style={componentStyles.resourceTypeDisplay.container}>
         <div style={{
-          ...styles.resourceTypeDisplay.icon,
-          ...(imageURL ? styles.resourceTypeDisplay.iconWithImage : styles.resourceTypeDisplay.iconWithoutImage)
+          ...componentStyles.resourceTypeDisplay.icon,
+          ...(imageURL ? componentStyles.resourceTypeDisplay.iconWithImage : componentStyles.resourceTypeDisplay.iconWithoutImage)
         }}>
           {imageURL ? (
             <img 
               src={imageURL} 
               alt={value}
-              style={styles.resourceTypeDisplay.image}
+              style={componentStyles.resourceTypeDisplay.image}
             />
           ) : (
             firstLetter
           )}
         </div>
-        <span style={styles.resourceTypeDisplay.text}>{value}</span>
+        <span style={componentStyles.resourceTypeDisplay.text}>{value}</span>
       </div>
     );
   };
@@ -130,36 +127,36 @@ export const SidePanel: React.FC<SidePanelProps> = ({
       <div 
         className="side-panel-overlay"
         onClick={onClose}
-        style={styles.sidePanel.overlay}
+        style={componentStyles.sidePanel.overlay}
       />
 
       {/* Side Panel */}
       <div 
         className="side-panel"
         style={{
-          ...styles.sidePanel.container,
+          ...componentStyles.sidePanel.container,
           transform: isOpen ? 'translateX(0)' : 'translateX(100%)',
           transition: 'transform 0.3s ease-in-out',
         }}
       >
         {/* Header */}
-        <div style={styles.sidePanel.header}>
-          <h2 style={styles.sidePanel.title}>
+        <div style={componentStyles.sidePanel.header}>
+          <h2 style={componentStyles.sidePanel.title}>
             Resource Details
           </h2>
           <button
             onClick={onClose}
-            style={styles.sidePanel.closeButton}
+            style={componentStyles.sidePanel.closeButton}
           >
             ×
           </button>
         </div>
 
         {/* Content */}
-        <div style={styles.sidePanel.content}>
+        <div style={componentStyles.sidePanel.content}>
           {/* Resource Type */}
-          <div style={styles.sidePanel.fieldContainer}>
-            <label style={styles.sidePanel.label}>
+          <div style={componentStyles.sidePanel.fieldContainer}>
+            <label style={componentStyles.sidePanel.label}>
               Resource Type
             </label>
             <ResourceTypeDisplay 
@@ -169,11 +166,11 @@ export const SidePanel: React.FC<SidePanelProps> = ({
           </div>
 
           {/* ID */}
-          <div style={styles.sidePanel.fieldContainer}>
-            <label style={styles.sidePanel.label}>
+          <div style={componentStyles.sidePanel.fieldContainer}>
+            <label style={componentStyles.sidePanel.label}>
               ID *
             </label>
-            <div style={styles.sidePanel.idField}>
+            <div style={componentStyles.sidePanel.idField}>
               {item.id}
             </div>
           </div>
@@ -199,8 +196,8 @@ export const SidePanel: React.FC<SidePanelProps> = ({
           />
 
           {/* Status */}
-          <div style={styles.sidePanel.fieldContainer}>
-            <label style={styles.sidePanel.label}>
+          <div style={componentStyles.sidePanel.fieldContainer}>
+            <label style={componentStyles.sidePanel.label}>
               Status
             </label>
             {isStatusEditable ? (
@@ -229,13 +226,13 @@ export const SidePanel: React.FC<SidePanelProps> = ({
         </div>
 
         {/* Footer with Save Changes Button */}
-        <div style={styles.sidePanel.footer}>
+        <div style={componentStyles.sidePanel.footer}>
           <button
             onClick={handleSaveChanges}
             disabled={!hasChanges}
             style={{
-              ...styles.sidePanel.saveButton,
-              ...(hasChanges ? styles.sidePanel.saveButtonEnabled : styles.sidePanel.saveButtonDisabled),
+              ...componentStyles.sidePanel.saveButton,
+              ...(hasChanges ? componentStyles.sidePanel.saveButtonEnabled : componentStyles.sidePanel.saveButtonDisabled),
             }}
             onMouseEnter={(e) => {
               if (hasChanges) 

src/components/FilterDropdown.tsx renamed to example/src/components/FilterDropdown.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import type { ThemeProps } from '../types/theme';
-
 import '../styles/SidePanelInput.css';
 
 interface SidePanelInputProps {

src/components/Popup.tsx renamed to example/src/components/Popup.tsx

@@ -0,0 +1,43 @@
+.export-dropdown {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  min-width: 180px;
+  background-color: #ffffff;
+  border: 1px solid #F0F0F0;
+  border-radius: 8px;
+  box-shadow: 0px 0px 1px 0px #00000033, 0px 8px 24px -6px #00000014;
+  z-index: 1000;
+  overflow: hidden;
+  font-family: 'DM Sans', sans-serif;
+}
+
+.export-dropdown-content {
+  padding: 8px 0;
+}
+
+.export-option {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 12px 16px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  gap: 12px;
+  transition: background-color 0.2s ease;
+  font-family: 'DM Sans', sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  text-align: left;
+}
+
+.export-option:hover {
+  background-color: #f5f5f5;
+}
+
+.export-icon {
+  font-size: 16px;
+  width: 20px;
+  text-align: center;
+}