[General] Fix directory and filename typos across the codebase

src/base/CssBaseLine/index.tsx → src/base/CssBaseline/index.tsx

@@ -1,5 +1,5 @@
 import { CssBaselineProps } from '@mui/material';
-import { CssBaseline } from './CssBaseLine';
+import { CssBaseline } from './CssBaseline';
 
 export { CssBaseline };
 export type { CssBaselineProps };

src/base/index.tsx

@@ -25,7 +25,7 @@ export * from './CircularProgress';
 export * from './ClickAwayListener';
 export * from './Collapse';
 export * from './Container';
-export * from './CssBaseLine';
+export * from './CssBaseline';
 export * from './DateTimePicker';
 export * from './Dialog';
 export * from './DialogActions';

src/custom/CatalogDesignTable/CatalogDesignTable.tsx

@@ -6,9 +6,9 @@ import { PublishIcon } from '../../icons';
 import { CHARCOAL } from '../../theme';
 import { Pattern } from '../CustomCatalog/CustomCard';
 import { ErrorBoundary } from '../ErrorBoundary';
-import { ColView } from '../Helpers/ResponsiveColumns/responsive-coulmns.tsx/responsive-column';
+import { ColView } from '../Helpers/ResponsiveColumns/responsive-columns/responsive-column';
 import PromptComponent from '../Prompt';
-import { PromptRef } from '../Prompt/promt-component';
+import { PromptRef } from '../Prompt/prompt-component';
 import ResponsiveDataTable from '../ResponsiveDataTable';
 import UnpublishTooltipIcon from './UnpublishTooltipIcon';
 

src/custom/CatalogDesignTable/DesignTableColumnConfig.tsx

@@ -9,7 +9,7 @@ import { downloadPattern, slugify } from '../CatalogDetail/helper';
 import { RESOURCE_TYPES } from '../CatalogDetail/types';
 import { Pattern } from '../CustomCatalog/CustomCard';
 import { ConditionalTooltip } from '../Helpers/CondtionalTooltip';
-import { ColView } from '../Helpers/ResponsiveColumns/responsive-coulmns.tsx';
+import type { ColView } from '../Helpers/ResponsiveColumns/responsive-columns';
 import { DataTableEllipsisMenu } from '../ResponsiveDataTable';
 import { VisibilityChipMenu } from '../VisibilityChipMenu';
 import { VIEW_VISIBILITY } from '../VisibilityChipMenu/VisibilityChipMenu';

src/custom/CatalogDesignTable/columnConfig.tsx

@@ -16,7 +16,7 @@ import {
 import { downloadPattern } from '../CatalogDetail/helper';
 import { Pattern } from '../CustomCatalog/CustomCard';
 import { ConditionalTooltip } from '../Helpers/CondtionalTooltip';
-import { ColView } from '../Helpers/ResponsiveColumns/responsive-coulmns.tsx/responsive-column';
+import { ColView } from '../Helpers/ResponsiveColumns/responsive-columns/responsive-column';
 import { DataTableEllipsisMenu } from '../ResponsiveDataTable';
 import AuthorCell from './AuthorCell';
 import { getColumnValue } from './helper';

src/custom/DataTableToolbar/DataTableToolbar.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { Box, Card, Checkbox, ClickAwayListener, FormControlLabel, Typography } from '../../base';
 import { ColumnIcon } from '../../icons/Column';
 import { styled, useTheme } from '../../theme';
-import type { ColView } from '../Helpers/ResponsiveColumns/responsive-coulmns.tsx';
-import { updateVisibleColumns } from '../Helpers/ResponsiveColumns/responsive-coulmns.tsx';
+import type { ColView } from '../Helpers/ResponsiveColumns/responsive-columns';
+import { updateVisibleColumns } from '../Helpers/ResponsiveColumns/responsive-columns';
 import { PopperListener } from '../PopperListener';
 import { TooltipIcon } from '../TooltipIconButton';
 import { useWindowDimensions } from '../Helpers/Dimension';

src/custom/Helpers/readme.md → src/custom/Helpers/README.md

@@ -13,46 +13,52 @@ This directory contains a collection of utility and helper components that you c
 1. **Window Dimensions Hook**: A custom React hook for tracking changes in window dimensions.
    - **File**: `Dimension`
    - **Usage**: Provides the `useWindowDimensions` hook, which allows you to get the current window dimensions and react to changes in window size.
-   - **Returns**: An object containing the current window dimensions and a boolean value indicating whether the window is currently in landscape mode.
+   - **Returns**: An object containing the current `width` and `height` in pixels.
 
 2. **Notification Hook**: A custom React hook for displaying notifications using notistack.
    - **File**: `Notification`
    - **Usage**: Provides the `useNotificationHandler` hook, which allows you to display notifications.
-   - **Returns**: An object containing the notification state and a function for updating the notification state.
+   - **Returns**: The `notify` callback function directly for dispatching notifications.
 
 ## How to Use
 
 To use these helper components in your project, follow these steps:
 
-1. Navigate to the specific helper component directory (e.g., `dimension.ts`) to find details about its usage.
+1. Navigate to the specific helper component directory (e.g., `Dimension/`) to find details about its usage.
 
-2. Import the required helper component into your code:
+2. Import the required helper component into your code.
+
+## Examples
 
 - **Example**: Importing the `useWindowDimensions` hook from the `Dimension` helper component:
 
   ```javascript
-  import { useWindowDimensions } from '@layer5/sistent-components';
+  import { useWindowDimensions } from '@sistent/sistent';
+
   const DimensionExample = () => {
-  const { width, height } = useWindowDimensions();
-
-  return (
-   <div>
-    <p>Window width: {width}</p>
-    <p>Window height: {height}</p>
-   </div>
-  );
+    const { width, height } = useWindowDimensions();
+
+    return (
+      <div>
+        <p>Window width: {width}</p>
+        <p>Window height: {height}</p>
+      </div>
+    );
+  };
   ```
 
-  - **Example**: Importing the `useNotificationHandler` hook from the `Notification` helper component:
+- **Example**: Importing the `useNotificationHandler` hook from the `Notification` helper component:
 
   ```javascript
-  import useNotificationHandler from '@layer5/sistent-components';
-  const NotificationHandlerExample = () => {
-  const notify = useNotificationHandler();
+  import { useNotificationHandler } from '@sistent/sistent';
 
-  return (
-   <button onClick={() => notify('Hello world!', { variant: 'success' })}>
-    Click me
-   </button>
-  );
+  const NotificationHandlerExample = () => {
+    const notify = useNotificationHandler();
+
+    return (
+      <button onClick={() => notify('Hello world!', { variant: 'success' })}>
+        Click me
+      </button>
+    );
+  };
   ```

src/custom/Helpers/ResponsiveColumns/responsive-columns/index.tsx

@@ -0,0 +1,4 @@
+import { updateVisibleColumns, type ColView } from './responsive-column';
+
+export { updateVisibleColumns };
+export type { ColView };

src/custom/Helpers/ResponsiveColumns/responsive-coulmns.tsx/responsive-column.tsx → src/custom/Helpers/ResponsiveColumns/responsive-columns/responsive-column.tsx

@@ -28,8 +28,8 @@ export const updateVisibleColumns = (
     // Hide the columns for any screen size
     if (col[1] === 'na') {
       showCols[col[0]] = false;
-    } else if (width > 1140) {
-      // Display all columns above width 1140
+    } else if (width >= 1140) {
+      // Display all columns for width 1140 and above
       showCols[col[0]] = true;
     } else if (width >= 915 && width < 1140) {
       if (['xs', 's', 'm', 'l', 'xl'].includes(col[1])) {

src/custom/Prompt/index.tsx

@@ -1,3 +1,3 @@
-import PromptComponent, { PROMPT_VARIANTS, type PromptRef } from './promt-component';
+import PromptComponent, { PROMPT_VARIANTS, type PromptRef } from './prompt-component';
 export { PROMPT_VARIANTS, PromptComponent, type PromptRef };
 export default PromptComponent;

src/custom/Prompt/promt-component.tsx → src/custom/Prompt/prompt-component.tsx

@@ -59,15 +59,29 @@ const PromptComponent = forwardRef<PromptRef, PromptProps>(({ variant }, ref) =>
   });
 
   /* This ref is used to store the resolve and reject functions of the promise returned by the show method */
-  const promiseInfoRef = useRef<{ resolve: (value: string) => void; reject: () => void }>({
-    resolve: () => {},
-    reject: () => {}
-  });
+  const promiseInfoRef = useRef<{ resolve: (value: string) => void; reject: () => void } | null>(
+    null
+  );
 
   const theme = useTheme();
 
+  /* Settle active promise and hide modal */
+  const settle = (value: string) => {
+    setState((prevState) => ({ ...prevState, isOpen: false }));
+    if (promiseInfoRef.current) {
+      const activeResolve = promiseInfoRef.current.resolve;
+      promiseInfoRef.current = null;
+      activeResolve(value);
+    }
+  };
+
   /* This function is used to show the prompt */
   const show = (params: ShowParams) => {
+    if (promiseInfoRef.current) {
+      const activeResolve = promiseInfoRef.current.resolve;
+      promiseInfoRef.current = null;
+      activeResolve('CANCEL');
+    }
     return new Promise<string>((resolve, reject) => {
       promiseInfoRef.current = { resolve, reject };
       setState({
@@ -81,7 +95,7 @@ const PromptComponent = forwardRef<PromptRef, PromptProps>(({ variant }, ref) =>
 
   /* This function is used to hide the prompt */
   const hide = () => {
-    setState((prevState) => ({ ...prevState, isOpen: false }));
+    settle('CANCEL');
   };
 
   const handleCheckboxChange = () => {
@@ -98,7 +112,6 @@ const PromptComponent = forwardRef<PromptRef, PromptProps>(({ variant }, ref) =>
   }));
 
   const { isOpen, primaryOption, title, subtitle, showInfoIcon, headerIcon, showCheckbox } = state;
-  const { resolve } = promiseInfoRef.current;
 
   return (
     <Modal
@@ -148,19 +161,13 @@ const PromptComponent = forwardRef<PromptRef, PromptProps>(({ variant }, ref) =>
         <ActionComponent data-testid="prompt-actions">
           <ModalButtonSecondary
             data-testid="prompt-secondary-button"
-            onClick={() => {
-              hide();
-              resolve('CANCEL');
-            }}
+            onClick={() => settle('CANCEL')}
           >
             Cancel
           </ModalButtonSecondary>
           <ModalButtonPrimary
             data-testid="prompt-primary-button"
-            onClick={() => {
-              hide();
-              resolve(primaryOption);
-            }}
+            onClick={() => settle(primaryOption)}
             style={
               state.variant && {
                 backgroundColor: theme.palette.background[state.variant]?.default,

src/custom/readme.md → src/custom/README.md

@@ -61,34 +61,31 @@ The component includes a formatDate function to format date values consistently.
 
 The `SearchBar` component is a reusable search bar. This component provides a user-friendly interface for searching within your application. It features a text input field with the ability to expand and collapse, a search icon, and a clear icon for removing the entered search text.
 
-## Props
+### SearchBar Props
 
-| Property      | Type     | Description                                                                           |
-| ------------- | -------- | ------------------------------------------------------------------------------------- |
-| `onSearch`    | `func`   | Callback function to handle the search logic.                                         |
-| `onClear`     | `func`   | Callback function to handle the clear logic.                                          |
-| `placeholder` | `string` | (Optional) Placeholder text to be displayed in the search bar.                        |
-| `expanded`    | `bool`   | (Optional) Set to `true` if the search bar should be expanded initially.              |
-| `setExpanded` | `func`   | (Optional) Callback function to update the expanded state of the search bar.          |
-| `iconFill`    | `string` | (Optional) Color of the search icon. If not provided, the default color will be used. |
+| Property      | Type     | Description                                                        |
+| ------------- | -------- | ------------------------------------------------------------------ |
+| `onSearch`    | `func`   | Callback function to handle the search logic.                      |
+| `expanded`    | `bool`   | Current expanded state of the search bar.                          |
+| `setExpanded` | `func`   | Callback function to update the expanded state of the search bar.   |
+| `placeholder` | `string` | (Optional) Placeholder text to be displayed in the search bar.     |
+| `onClear`     | `func`   | (Optional) Callback function to handle the clear logic.            |
 
 ## Usage
 
 ```javascript
 import React, { useState } from 'react';
-import SearchBar from '@sistent/sistent/components';
+import { SearchBar } from '@sistent/sistent';
 
 function App() {
   const [searchText, setSearchText] = useState('');
+  const [expanded, setExpanded] = useState(false);
 
-  // this handles the search logic only will be needed if the api doesn't have search param
   const handleSearch = (text) => {
-    // Handle the search logic here
     setSearchText(text);
   };
 
   const handleClear = () => {
-    // Handle the clear logic here
     setSearchText('');
   };
 
@@ -98,9 +95,8 @@ function App() {
         onSearch={handleSearch}
         onClear={handleClear}
         placeholder="Search..."
-        expanded={searchText !== ''}
-        setExpanded={(isExpanded) => setSearchText(isExpanded)}
-        iconFill="#000" // Optional: customize the icon color
+        expanded={expanded}
+        setExpanded={setExpanded}
       />
       {/* Your application content here */}
     </div>

src/custom/RJSFFormWrapper/hideRootObjectTitle.ts

@@ -5,7 +5,7 @@
  * ## Why this exists
  *
  * Sistent's RJSF form schemas are imported verbatim from `@meshery/schemas`
- * (the schema-driven-development mandate — see `src/schemas/readme.md`).
+ * (the schema-driven-development mandate — see `src/schemas/README.md`).
  * Those canonical schemas put a human-readable `title` on the root object
  * (e.g. the import-design schema's root `title: "Import Design"`). When the
  * form is rendered inside a titled surface — most commonly a modal whose

src/custom/ResponsiveDataTable.tsx

@@ -5,7 +5,7 @@ import { ShareIcon } from '../icons';
 import { EllipsisIcon } from '../icons/Ellipsis';
 import { FormattedTime } from '../utils';
 import { styled, useTheme } from './../theme';
-import { ColView } from './Helpers/ResponsiveColumns/responsive-coulmns.tsx';
+import type { ColView } from './Helpers/ResponsiveColumns/responsive-columns';
 import { TableAction } from './TableActions';
 import { TooltipIcon } from './TooltipIconButton';
 import { WidgetEmptyState } from './WidgetEmptyState';

src/custom/TeamTable/TeamTable.tsx

@@ -4,7 +4,7 @@ import { MUIDataTableColumn } from '@sistent/mui-datatables';
 import { Grid2 } from '../../base';
 import { styled, useTheme } from '../../theme';
 import { ErrorBoundary } from '../ErrorBoundary/ErrorBoundary.js';
-import { ColView } from '../Helpers/ResponsiveColumns/responsive-coulmns.tsx/index.js';
+import type { ColView } from '../Helpers/ResponsiveColumns/responsive-columns/index.js';
 import ResponsiveDataTable from '../ResponsiveDataTable.js';
 import UsersTable from '../UsersTable/UsersTable.js';
 

src/custom/TeamTable/TeamTableConfiguration.tsx

@@ -9,7 +9,7 @@ import { CustomTooltip } from '../CustomTooltip';
 import { FormatId } from '../FormatId';
 import { ConditionalTooltip } from '../Helpers/CondtionalTooltip';
 import { useWindowDimensions } from '../Helpers/Dimension';
-import { ColView, updateVisibleColumns } from '../Helpers/ResponsiveColumns/responsive-coulmns.tsx';
+import { updateVisibleColumns, type ColView } from '../Helpers/ResponsiveColumns/responsive-columns';
 import { IconWrapper } from '../ResponsiveDataTable';
 import { TooltipIcon } from '../TooltipIconButton';
 import {

src/custom/TypingFilter/TypingFIlterInput.tsx → src/custom/TypingFilter/TypingFilterInput.tsx

@@ -6,11 +6,10 @@ export type TypingFilterInputProps = {
   variant?: string;
 } & TextFieldProps;
 
-export const TypingFilterInput = React.forwardRef(function TypingFilterInput(
-  props: TypingFilterInputProps,
-  ref: React.ForwardedRef<HTMLDivElement>
-): JSX.Element {
-  return <TextField ref={ref} {...props} />;
-});
+export const TypingFilterInput = React.forwardRef<HTMLInputElement, TypingFilterInputProps>(
+  function TypingFilterInput(props, ref): JSX.Element {
+    return <TextField inputRef={ref} {...props} />;
+  }
+);
 
 export default TypingFilterInput;

src/custom/TypingFilter/TypingFIlters.tsx → src/custom/TypingFilter/TypingFilters.tsx

@@ -31,7 +31,9 @@ export function TypingFilters({
   const { filter: currentFilter } = getCurrentFilterAndValue(filterStateMachine);
 
   const matchingFilters = currentFilter
-    ? Object.values(filterSchema).filter((filter) => filter.value.startsWith(currentFilter))
+    ? Object.values(filterSchema).filter(
+        (filter) => typeof filter.value === 'string' && filter.value.startsWith(currentFilter)
+      )
     : Object.values(filterSchema);
   return (
     <List>
@@ -41,9 +43,9 @@ export function TypingFilters({
         </ListItem>
       )}
       {matchingFilters.map((filter) => (
-        <React.Fragment key={filter}>
-          <ListItem disableGutters onClick={() => selectFilter(filter.values)}>
-            <Typography variant="body1">{filter.values}:</Typography>
+        <React.Fragment key={filter.value}>
+          <ListItem disableGutters onClick={() => selectFilter(filter.value)}>
+            <Typography variant="body1">{filter.value}:</Typography>
             <Typography variant="body1">{filter.description}</Typography>
           </ListItem>
           {/* MUI removed Divider's `light` prop; the opacity is its replacement. */}

src/custom/TypingFilter/index.tsx

@@ -11,8 +11,8 @@ import {
   filterReducer
 } from '../../utils/typing.state';
 import { getFilters } from '../../utils/typing.utils';
-import TypingFilterInput from './TypingFIlterInput';
-import { TypingFilters } from './TypingFIlters';
+import TypingFilterInput from './TypingFilterInput';
+import { TypingFilters } from './TypingFilters';
 import { TypingFilterValueSuggestions } from './TypingFilterSuggestions';
 
 interface TypingFilterType {

src/custom/UsersTable/UsersTable.tsx

@@ -13,7 +13,7 @@ import { useWindowDimensions } from '../Helpers/Dimension';
 import {
   ColView,
   updateVisibleColumns
-} from '../Helpers/ResponsiveColumns/responsive-coulmns.tsx/responsive-column';
+} from '../Helpers/ResponsiveColumns/responsive-columns/responsive-column';
 import PromptComponent, { PROMPT_VARIANTS } from '../Prompt';
 import ResponsiveDataTable from '../ResponsiveDataTable';
 import { TooltipIcon } from '../TooltipIconButton';

src/custom/Workspaces/DesignTable.tsx

@@ -13,7 +13,7 @@ import {
 import { Pattern } from '../CustomCatalog/CustomCard';
 import { CustomColumnVisibilityControl } from '../CustomColumnVisibilityControl';
 import { useWindowDimensions } from '../Helpers/Dimension';
-import { updateVisibleColumns } from '../Helpers/ResponsiveColumns/responsive-coulmns.tsx/responsive-column';
+import { updateVisibleColumns } from '../Helpers/ResponsiveColumns/responsive-columns/responsive-column';
 import PromptComponent from '../Prompt';
 import SearchBar from '../SearchBar';
 import { VIEW_VISIBILITY } from '../VisibilityChipMenu/VisibilityChipMenu';