diff --git a/src/base/CssBaseLine/CssBaseLine.tsx b/src/base/CssBaseline/CssBaseline.tsx similarity index 100% rename from src/base/CssBaseLine/CssBaseLine.tsx rename to src/base/CssBaseline/CssBaseline.tsx diff --git a/src/base/CssBaseLine/index.tsx b/src/base/CssBaseline/index.tsx similarity index 70% rename from src/base/CssBaseLine/index.tsx rename to src/base/CssBaseline/index.tsx index 94ea1a71d..e229d0dac 100644 --- a/src/base/CssBaseLine/index.tsx +++ b/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 }; diff --git a/src/base/index.tsx b/src/base/index.tsx index f416f5e06..e9e938c5d 100644 --- a/src/base/index.tsx +++ b/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'; diff --git a/src/custom/CatalogDesignTable/CatalogDesignTable.tsx b/src/custom/CatalogDesignTable/CatalogDesignTable.tsx index fe518302b..ab83f2de4 100644 --- a/src/custom/CatalogDesignTable/CatalogDesignTable.tsx +++ b/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'; diff --git a/src/custom/CatalogDesignTable/DesignTableColumnConfig.tsx b/src/custom/CatalogDesignTable/DesignTableColumnConfig.tsx index 9a0ef8748..5ada96ec6 100644 --- a/src/custom/CatalogDesignTable/DesignTableColumnConfig.tsx +++ b/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'; diff --git a/src/custom/CatalogDesignTable/columnConfig.tsx b/src/custom/CatalogDesignTable/columnConfig.tsx index ba4fe3ac5..9b06489a7 100644 --- a/src/custom/CatalogDesignTable/columnConfig.tsx +++ b/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'; diff --git a/src/custom/DataTableToolbar/DataTableToolbar.tsx b/src/custom/DataTableToolbar/DataTableToolbar.tsx index a62e5f780..b37ebf99a 100644 --- a/src/custom/DataTableToolbar/DataTableToolbar.tsx +++ b/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'; diff --git a/src/custom/Helpers/readme.md b/src/custom/Helpers/README.md similarity index 55% rename from src/custom/Helpers/readme.md rename to src/custom/Helpers/README.md index 8955df099..dad1bc2ab 100644 --- a/src/custom/Helpers/readme.md +++ b/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 ( -
-

Window width: {width}

-

Window height: {height}

-
- ); + const { width, height } = useWindowDimensions(); + + return ( +
+

Window width: {width}

+

Window height: {height}

+
+ ); + }; ``` - - **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 ( - - ); + const NotificationHandlerExample = () => { + const notify = useNotificationHandler(); + + return ( + + ); + }; ``` diff --git a/src/custom/Helpers/ResponsiveColumns/responsive-columns/index.tsx b/src/custom/Helpers/ResponsiveColumns/responsive-columns/index.tsx new file mode 100644 index 000000000..96e946942 --- /dev/null +++ b/src/custom/Helpers/ResponsiveColumns/responsive-columns/index.tsx @@ -0,0 +1,4 @@ +import { updateVisibleColumns, type ColView } from './responsive-column'; + +export { updateVisibleColumns }; +export type { ColView }; diff --git a/src/custom/Helpers/ResponsiveColumns/responsive-coulmns.tsx/responsive-column.tsx b/src/custom/Helpers/ResponsiveColumns/responsive-columns/responsive-column.tsx similarity index 95% rename from src/custom/Helpers/ResponsiveColumns/responsive-coulmns.tsx/responsive-column.tsx rename to src/custom/Helpers/ResponsiveColumns/responsive-columns/responsive-column.tsx index d8df29f4a..e9d1b4cef 100644 --- a/src/custom/Helpers/ResponsiveColumns/responsive-coulmns.tsx/responsive-column.tsx +++ b/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])) { diff --git a/src/custom/Helpers/ResponsiveColumns/responsive-coulmns.tsx/index.tsx b/src/custom/Helpers/ResponsiveColumns/responsive-coulmns.tsx/index.tsx deleted file mode 100644 index eaadb2d81..000000000 --- a/src/custom/Helpers/ResponsiveColumns/responsive-coulmns.tsx/index.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import { ColView, updateVisibleColumns } from './responsive-column'; - -export { updateVisibleColumns }; -export type { ColView }; diff --git a/src/custom/Prompt/index.tsx b/src/custom/Prompt/index.tsx index 830817f55..19fadd228 100644 --- a/src/custom/Prompt/index.tsx +++ b/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; diff --git a/src/custom/Prompt/promt-component.tsx b/src/custom/Prompt/prompt-component.tsx similarity index 88% rename from src/custom/Prompt/promt-component.tsx rename to src/custom/Prompt/prompt-component.tsx index bb5fc04f4..9f7732d8b 100644 --- a/src/custom/Prompt/promt-component.tsx +++ b/src/custom/Prompt/prompt-component.tsx @@ -59,15 +59,29 @@ const PromptComponent = forwardRef(({ 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((resolve, reject) => { promiseInfoRef.current = { resolve, reject }; setState({ @@ -81,7 +95,7 @@ const PromptComponent = forwardRef(({ 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(({ variant }, ref) => })); const { isOpen, primaryOption, title, subtitle, showInfoIcon, headerIcon, showCheckbox } = state; - const { resolve } = promiseInfoRef.current; return ( (({ variant }, ref) => { - hide(); - resolve('CANCEL'); - }} + onClick={() => settle('CANCEL')} > Cancel { - hide(); - resolve(primaryOption); - }} + onClick={() => settle(primaryOption)} style={ state.variant && { backgroundColor: theme.palette.background[state.variant]?.default, diff --git a/src/custom/readme.md b/src/custom/README.md similarity index 86% rename from src/custom/readme.md rename to src/custom/README.md index ca8238825..f75e0431e 100644 --- a/src/custom/readme.md +++ b/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 */} diff --git a/src/custom/RJSFFormWrapper/hideRootObjectTitle.ts b/src/custom/RJSFFormWrapper/hideRootObjectTitle.ts index 6abe3c1b8..9c2a07c63 100644 --- a/src/custom/RJSFFormWrapper/hideRootObjectTitle.ts +++ b/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 diff --git a/src/custom/ResponsiveDataTable.tsx b/src/custom/ResponsiveDataTable.tsx index 54eb93311..727656eae 100644 --- a/src/custom/ResponsiveDataTable.tsx +++ b/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'; diff --git a/src/custom/TeamTable/TeamTable.tsx b/src/custom/TeamTable/TeamTable.tsx index 1fd93bf1e..e3b6e6292 100644 --- a/src/custom/TeamTable/TeamTable.tsx +++ b/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'; diff --git a/src/custom/TeamTable/TeamTableConfiguration.tsx b/src/custom/TeamTable/TeamTableConfiguration.tsx index 8221be154..ec0357b05 100644 --- a/src/custom/TeamTable/TeamTableConfiguration.tsx +++ b/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 { diff --git a/src/custom/TypingFilter/TypingFIlterInput.tsx b/src/custom/TypingFilter/TypingFilterInput.tsx similarity index 53% rename from src/custom/TypingFilter/TypingFIlterInput.tsx rename to src/custom/TypingFilter/TypingFilterInput.tsx index 7c02c6b7d..7c0fb0924 100644 --- a/src/custom/TypingFilter/TypingFIlterInput.tsx +++ b/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 -): JSX.Element { - return ; -}); +export const TypingFilterInput = React.forwardRef( + function TypingFilterInput(props, ref): JSX.Element { + return ; + } +); export default TypingFilterInput; diff --git a/src/custom/TypingFilter/TypingFIlters.tsx b/src/custom/TypingFilter/TypingFilters.tsx similarity index 85% rename from src/custom/TypingFilter/TypingFIlters.tsx rename to src/custom/TypingFilter/TypingFilters.tsx index 6d9296e0a..07d2ff9fb 100644 --- a/src/custom/TypingFilter/TypingFIlters.tsx +++ b/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 ( @@ -41,9 +43,9 @@ export function TypingFilters({ )} {matchingFilters.map((filter) => ( - - selectFilter(filter.values)}> - {filter.values}: + + selectFilter(filter.value)}> + {filter.value}: {filter.description} {/* MUI removed Divider's `light` prop; the opacity is its replacement. */} diff --git a/src/custom/TypingFilter/index.tsx b/src/custom/TypingFilter/index.tsx index f4293564d..dd43cb090 100644 --- a/src/custom/TypingFilter/index.tsx +++ b/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 { diff --git a/src/custom/UsersTable/UsersTable.tsx b/src/custom/UsersTable/UsersTable.tsx index aec6c69d5..283c40ae0 100644 --- a/src/custom/UsersTable/UsersTable.tsx +++ b/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'; diff --git a/src/custom/Workspaces/DesignTable.tsx b/src/custom/Workspaces/DesignTable.tsx index d305d058e..944aee7d7 100644 --- a/src/custom/Workspaces/DesignTable.tsx +++ b/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'; diff --git a/src/custom/Workspaces/EnvironmentTable.tsx b/src/custom/Workspaces/EnvironmentTable.tsx index 757eb17c0..be631df6a 100644 --- a/src/custom/Workspaces/EnvironmentTable.tsx +++ b/src/custom/Workspaces/EnvironmentTable.tsx @@ -12,7 +12,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 ResponsiveDataTable, { IconWrapper } from '../ResponsiveDataTable'; import SearchBar from '../SearchBar'; import { TooltipIcon } from '../TooltipIconButton'; diff --git a/src/custom/Workspaces/WorkspaceViewsTable.tsx b/src/custom/Workspaces/WorkspaceViewsTable.tsx index aef3b37c8..b37e464d1 100644 --- a/src/custom/Workspaces/WorkspaceViewsTable.tsx +++ b/src/custom/Workspaces/WorkspaceViewsTable.tsx @@ -16,7 +16,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 ResponsiveDataTable, { IconWrapper } from '../ResponsiveDataTable'; import SearchBar from '../SearchBar'; import { TooltipIcon } from '../TooltipIconButton'; diff --git a/src/custom/index.tsx b/src/custom/index.tsx index bff31634c..10c4ce310 100644 --- a/src/custom/index.tsx +++ b/src/custom/index.tsx @@ -40,7 +40,7 @@ import { FlipCard, FlipCardProps } from './FlipCard'; import { FormatId } from './FormatId'; import { useWindowDimensions } from './Helpers/Dimension'; import { useNotificationHandler } from './Helpers/Notification'; -import { ColView, updateVisibleColumns } from './Helpers/ResponsiveColumns/responsive-coulmns.tsx'; +import { updateVisibleColumns, type ColView } from './Helpers/ResponsiveColumns/responsive-columns'; import { LearningCard } from './LearningCard'; import { BasicMarkdown, RenderMarkdown } from './Markdown'; import { ModalCard } from './ModalCard'; diff --git a/src/icons/SocialMedial/FacebookIcon.tsx b/src/icons/SocialMedia/FacebookIcon.tsx similarity index 96% rename from src/icons/SocialMedial/FacebookIcon.tsx rename to src/icons/SocialMedia/FacebookIcon.tsx index 0fcf1ea65..1ce9577ba 100644 --- a/src/icons/SocialMedial/FacebookIcon.tsx +++ b/src/icons/SocialMedia/FacebookIcon.tsx @@ -1,20 +1,21 @@ import React from 'react'; import { IconProps } from './types'; -const FacebookIcon: React.FC = ({ width = 40, height = 40 }) => ( +const FacebookIcon: React.FC = ({ width = 40, height = 40, style, fill = 'white' }) => ( = ({ width = 40, height = 40 }) => ( +const LinkedinIcon: React.FC = ({ width = 40, height = 40, style, fill = 'white' }) => ( = ({ width = 40, height = 40 }) => ( +const TwitterIcon: React.FC = ({ width = 40, height = 40, style, fill = 'white' }) => ( ; + import { RJSFFormWrapper, sampleSchema, sampleUiSchema } from '@sistent/sistent'; + + ; ``` 1. **Customization:** Adjust the schema properties to tailor the form's appearance and behavior. Refer to the specific schema's documentation for customization options. -### Rendering a form without its top-level object title (the standard pattern) +## Rendering a form without its top-level object title (the standard pattern) The canonical schemas from `@meshery/schemas` carry a human-readable `title` (and `description`) on their **root object** — for example the import-design @@ -90,7 +91,7 @@ You rarely write that option by hand. Use whichever is convenient: ; ``` -### File Conventions for Schemas +## File Conventions for Schemas Follow a consistent file structure convention to enhance clarity and organization when adding new schema: @@ -98,7 +99,7 @@ Follow a consistent file structure convention to enhance clarity and organizatio 1. Use CamelCase for multi-word schema names, e.g., UserRegistrationFormSchema. 1. Create two separate files, schema.tsx and uiSchema.tsx, to store both schemas separately. -### Naming Conventions for Schemas +## Naming Conventions for Schemas Follow a consistent naming convention to enhance clarity and organization when adding new schema: @@ -107,7 +108,7 @@ Follow a consistent naming convention to enhance clarity and organization when a 1. Include "Schema" in the name to explicitly indicate that it's a schema, e.g., ProfileSettingsSchema. 1. Include "UiSchema" in the name to explicitly indicate that it's a UI schema, e.g., ProfileSettingsUiSchema. -### Custom Properties +## Custom Properties In addition to the properties offered by the JSON schema, we have introduced the following custom properties that you can include in new schema: