Merge pull request #2465 from anuradha9712/v4.x

chore: update example app for testing
innovaccer · Dec 18, 2024 · b3dc504 · b3dc504
2 parents 38c545b + 2a236ed
commit b3dc504
Show file tree

Hide file tree

Showing 16 changed files with 100 additions and 410 deletions.
diff --git a/examples/esm-ts/src/App.css b/examples/esm-ts/src/App.css
diff --git a/examples/esm-ts/src/App.tsx b/examples/esm-ts/src/App.tsx
@@ -1,14 +1,11 @@
-// import './App.css'
 import Page from './Page';
 
-
 function App() {
-
   return (
     <>
       <Page />
     </>
-  )
+  );
 }
 
-export default App
+export default App;
diff --git a/examples/esm-ts/src/Page.tsx b/examples/esm-ts/src/Page.tsx
@@ -1,20 +1,24 @@
 import React from 'react';
-import { Row, Column, PageHeader, Button, Tabs, Card, Table, ButtonProps, Message } from '@innovaccer/design-system';
+import {
+  Row,
+  Column,
+  PageHeader,
+  Button,
+  Tabs,
+  Card,
+  Table,
+  ButtonProps,
+  Message,
+  Menu,
+} from '@innovaccer/design-system';
 
-// You can now use the Button component and its props in your React components
 const MyComponent: React.FC = () => {
-  // You can use the ButtonProps type to define the prop structure for custom button components
   const customButtonProps: ButtonProps = {
     appearance: 'primary',
     size: 'large',
-    // other props
   };
 
-  return (
-    <Button {...customButtonProps}>
-      Click Me
-    </Button>
-  );
+  return <Button {...customButtonProps}>Click Me</Button>;
 };
 
 const UserManagementTable: React.FC = () => {
@@ -162,6 +166,13 @@ const UserManagementTable: React.FC = () => {
           className="w-50"
           description="Could not start verification. Please try again later."
         />
+        <Menu trigger={<Menu.Trigger />}>
+          <Menu.List>
+            <Menu.Item>Edit</Menu.Item>
+            <Menu.Item>Export</Menu.Item>
+            <Menu.Item>Copy</Menu.Item>
+          </Menu.List>
+        </Menu>
       </Column>
     </Row>
   );

diff --git a/examples/esm-ts/src/assets/react.svg b/examples/esm-ts/src/assets/react.svg
diff --git a/examples/esm-ts/src/index.css b/examples/esm-ts/src/index.css
diff --git a/examples/esm-ts/src/main.tsx b/examples/esm-ts/src/main.tsx
@@ -1,11 +1,11 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
-import '@innovaccer/design-system/css'
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
+// import '@innovaccer/design-system/css';
+import '@innovaccer/design-system/dist/ts/index.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-)
+  </React.StrictMode>
+);
diff --git a/examples/esm-umd-ts/src/App.css b/examples/esm-umd-ts/src/App.css
diff --git a/examples/esm-umd-ts/src/App.tsx b/examples/esm-umd-ts/src/App.tsx
@@ -1,14 +1,11 @@
-// import './App.css'
 import Page from './Page';
 
-
 function App() {
-
   return (
     <>
       <Page />
     </>
-  )
+  );
 }
 
-export default App
+export default App;
diff --git a/examples/esm-umd-ts/src/Page.tsx b/examples/esm-umd-ts/src/Page.tsx
@@ -1,20 +1,24 @@
 import React from 'react';
-import { Row, Column, PageHeader, Button, Tabs, Card, Table, ButtonProps, Message } from '@innovaccer/design-system';
+import {
+  Row,
+  Column,
+  PageHeader,
+  Button,
+  Tabs,
+  Card,
+  Table,
+  ButtonProps,
+  Message,
+  Menu,
+} from '@innovaccer/design-system';
 
-// You can now use the Button component and its props in your React components
 const MyComponent: React.FC = () => {
-  // You can use the ButtonProps type to define the prop structure for custom button components
   const customButtonProps: ButtonProps = {
     appearance: 'primary',
     size: 'large',
-    // other props
   };
 
-  return (
-    <Button {...customButtonProps}>
-      Click Me
-    </Button>
-  );
+  return <Button {...customButtonProps}>Click Me</Button>;
 };
 
 const UserManagementTable: React.FC = () => {
@@ -161,6 +165,13 @@ const UserManagementTable: React.FC = () => {
           className="w-50"
           description="Could not start verification. Please try again later."
         />
+        <Menu trigger={<Menu.Trigger />}>
+          <Menu.List>
+            <Menu.Item>Edit</Menu.Item>
+            <Menu.Item>Export</Menu.Item>
+            <Menu.Item>Copy</Menu.Item>
+          </Menu.List>
+        </Menu>
       </Column>
     </Row>
   );

diff --git a/examples/esm-umd-ts/src/assets/react.svg b/examples/esm-umd-ts/src/assets/react.svg
diff --git a/examples/esm-umd-ts/src/index.css b/examples/esm-umd-ts/src/index.css
diff --git a/examples/esm-umd-ts/src/main.tsx b/examples/esm-umd-ts/src/main.tsx
@@ -1,11 +1,11 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
-import '@innovaccer/design-system/css'
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
+// import '@innovaccer/design-system/css';
+import '@innovaccer/design-system/dist/esm/index.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-)
+  </React.StrictMode>
+);