From 86032086a874d09f8d5e722eef83e1efbd96d9b4 Mon Sep 17 00:00:00 2001 From: Amirhossein Alibakhshi Date: Sat, 3 Aug 2024 23:24:49 +0330 Subject: [PATCH 1/7] fix: resolve tabs issue --- src/components/SchemaBuilder.tsx | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/src/components/SchemaBuilder.tsx b/src/components/SchemaBuilder.tsx index 2df46c6..ead1b18 100644 --- a/src/components/SchemaBuilder.tsx +++ b/src/components/SchemaBuilder.tsx @@ -18,11 +18,7 @@ const SchemaBuilder = ({ onChange, hideSchemaTab = false, hideFormTab = false }: const { schema } = useSchema(); const [highlightedSchema, setHighlightedSchema] = useState(''); const [tab, setTab] = useState(0); - const TABS: Record<'BUILDER' | 'SCHEMA' | 'FORM_PREVIEW', number> = { - BUILDER: 0, - SCHEMA: 1, - FORM_PREVIEW: 2, - }; + const TABS: string[] = ['BUILDER', ...(!hideSchemaTab ? ['SCHEMA'] : []), ...(!hideFormTab ? ['FORM_PREVIEW'] : [])]; const handleTabChange = (event: React.SyntheticEvent, newValue: number) => { setTab(newValue); }; @@ -57,9 +53,9 @@ const SchemaBuilder = ({ onChange, hideSchemaTab = false, hideFormTab = false }: - {tab === TABS.BUILDER && } - {tab === TABS.SCHEMA && } - {tab === TABS.FORM_PREVIEW &&
} + {tab === TABS.indexOf('BUILDER') && } + {tab === TABS.indexOf('SCHEMA') && } + {tab === TABS.indexOf('FORM_PREVIEW') && } ); From 21999aacaf56ecf8ebb7568c12081d1a40133c96 Mon Sep 17 00:00:00 2001 From: Amirhossein Alibakhshi Date: Sun, 4 Aug 2024 17:07:45 +0330 Subject: [PATCH 2/7] feat: add delete button component --- src/components/DeleteFieldButton.tsx | 43 ++++++++++++++++++++++++++++ src/components/SchemaPreview.tsx | 31 ++------------------ 2 files changed, 45 insertions(+), 29 deletions(-) create mode 100644 src/components/DeleteFieldButton.tsx diff --git a/src/components/DeleteFieldButton.tsx b/src/components/DeleteFieldButton.tsx new file mode 100644 index 0000000..070f6d6 --- /dev/null +++ b/src/components/DeleteFieldButton.tsx @@ -0,0 +1,43 @@ +import React, { useState } from 'react'; +import { Delete } from '@mui/icons-material'; +import { Button, Dialog, DialogActions, DialogContent, IconButton, Typography } from '@mui/material'; + +type Props = { + onDelete: () => void; +}; + +const DeleteFieldButton = ({ onDelete }: Props) => { + const [showDeleteConfirmationModal, setShowDeleteConfirmationModal] = useState(false); + + return ( + <> + setShowDeleteConfirmationModal(false)}> + + Are you sure you want to delete this field? + + + + + + + + setShowDeleteConfirmationModal(true)}> + + + + ); +}; + +export default DeleteFieldButton; diff --git a/src/components/SchemaPreview.tsx b/src/components/SchemaPreview.tsx index 7a0f6e4..8e6fc49 100644 --- a/src/components/SchemaPreview.tsx +++ b/src/components/SchemaPreview.tsx @@ -18,11 +18,9 @@ import { } from '@mui/icons-material'; import { Box, - Button, Chip, Collapse, Dialog, - DialogActions, DialogContent, DialogTitle, IconButton, @@ -38,6 +36,7 @@ import { SchemaAction, useSchema } from '../providers/SchemaProvider'; import Form from '@rjsf/mui'; import validator from '@rjsf/validator-ajv8'; import FieldPreview from './FieldPreview'; +import DeleteFieldButton from './DeleteFieldButton'; // TODO: refactor const renderHeader = ({ @@ -59,7 +58,6 @@ const renderHeader = ({ onCollapse?: () => void; isRequired?: boolean; }) => { - const [showDeleteConfirmationModal, setShowDeleteConfirmationModal] = useState(false); const [showEditModal, setShowEditModal] = useState(false); const [showPreviewModal, setShowPreviewModal] = useState(false); const { fields, dispatch } = useSchema(); @@ -107,27 +105,6 @@ const renderHeader = ({ - setShowDeleteConfirmationModal(false)}> - - Are you sure you want to delete this field? - - - - - - } /> - {onDelete && ( - setShowDeleteConfirmationModal(true)}> - - - )} + {onDelete && } setShowEditModal(true)}> From 43409459b3663a1cff94c705ec2b0a36391e5a44 Mon Sep 17 00:00:00 2001 From: Amirhossein Alibakhshi Date: Sun, 4 Aug 2024 17:28:21 +0330 Subject: [PATCH 3/7] feat: add edit button component --- src/components/DeleteFieldButton.tsx | 13 ++-- src/components/EditFieldButton.tsx | 49 +++++++++++++++ src/components/SchemaPreview.tsx | 92 +++++++++------------------- 3 files changed, 87 insertions(+), 67 deletions(-) create mode 100644 src/components/EditFieldButton.tsx diff --git a/src/components/DeleteFieldButton.tsx b/src/components/DeleteFieldButton.tsx index 070f6d6..0c5f2bd 100644 --- a/src/components/DeleteFieldButton.tsx +++ b/src/components/DeleteFieldButton.tsx @@ -1,14 +1,19 @@ import React, { useState } from 'react'; import { Delete } from '@mui/icons-material'; import { Button, Dialog, DialogActions, DialogContent, IconButton, Typography } from '@mui/material'; +import { SchemaAction, useSchema } from '../providers/SchemaProvider'; type Props = { - onDelete: () => void; + path: string; }; -const DeleteFieldButton = ({ onDelete }: Props) => { +const DeleteFieldButton = ({ path }: Props) => { const [showDeleteConfirmationModal, setShowDeleteConfirmationModal] = useState(false); - + const { dispatch } = useSchema(); + const handleDelete = (dispatch: React.Dispatch, name: string) => { + dispatch({ type: 'DELETE_PROPERTY', payload: { name } }); + dispatch({ type: 'DELETE_REQUIRED', payload: { name } }); + }; return ( <> setShowDeleteConfirmationModal(false)}> @@ -24,7 +29,7 @@ const DeleteFieldButton = ({ onDelete }: Props) => { variant="contained" color="error" onClick={() => { - onDelete?.(); + handleDelete(dispatch, path); setShowDeleteConfirmationModal(false); }} > diff --git a/src/components/EditFieldButton.tsx b/src/components/EditFieldButton.tsx new file mode 100644 index 0000000..d51708f --- /dev/null +++ b/src/components/EditFieldButton.tsx @@ -0,0 +1,49 @@ +import React, { useState } from 'react'; +import { Dialog, DialogContent, DialogTitle, IconButton } from '@mui/material'; +import Form from '@rjsf/mui'; +import validator from '@rjsf/validator-ajv8'; +import { Edit } from '@mui/icons-material'; +import { SchemaAction, useSchema } from '../providers/SchemaProvider'; +import { RJSFSchema } from '@rjsf/utils'; +import { JsonSchemaField } from '../fields/JsonSchemaField'; +import { JsonSchema } from '../types'; + +type Props = { + field: JsonSchemaField; + schema: JsonSchema; + path: string; +}; + +const EditFieldButton = ({ field, schema, path }: Props) => { + const [showEditModal, setShowEditModal] = useState(false); + const handleEdit = (dispatch: React.Dispatch, name: string, schema: RJSFSchema) => { + dispatch({ type: 'UPDATE_PROPERTY', payload: { name, schema } }); + }; + const { dispatch } = useSchema(); + + return ( + <> + setShowEditModal(false)}> + + Edit {field.getName()} Field + + + { + handleEdit(dispatch, path, formData); + setShowEditModal(false); + }} + schema={field?.getBuilderSchema()} + formData={schema} + validator={validator} + /> + + + setShowEditModal(true)}> + + + + ); +}; + +export default EditFieldButton; diff --git a/src/components/SchemaPreview.tsx b/src/components/SchemaPreview.tsx index 8e6fc49..873e5a8 100644 --- a/src/components/SchemaPreview.tsx +++ b/src/components/SchemaPreview.tsx @@ -7,8 +7,6 @@ import { Checklist, DataArray, DataObject, - Delete, - Edit, ExpandLess, ExpandMore, Star, @@ -32,17 +30,15 @@ import { } from '@mui/material'; import { accessToObjectFieldParentByPath, generatePath, getFieldId, getSchemaFormatFromSchema } from '../utils'; import { DataVisualizationType, JsonSchema } from '../types'; -import { SchemaAction, useSchema } from '../providers/SchemaProvider'; -import Form from '@rjsf/mui'; -import validator from '@rjsf/validator-ajv8'; +import { useSchema } from '../providers/SchemaProvider'; import FieldPreview from './FieldPreview'; import DeleteFieldButton from './DeleteFieldButton'; +import EditFieldButton from './EditFieldButton'; // TODO: refactor const renderHeader = ({ icon, schema, - onDelete, name, path, description, @@ -53,14 +49,12 @@ const renderHeader = ({ description?: React.ReactNode; path: string; name?: string; - onDelete?: () => void; collapse?: boolean; onCollapse?: () => void; isRequired?: boolean; }) => { - const [showEditModal, setShowEditModal] = useState(false); const [showPreviewModal, setShowPreviewModal] = useState(false); - const { fields, dispatch } = useSchema(); + const { fields } = useSchema(); const SelectedFieldClass = fields.find((field) => field.id === getFieldId(schema))?.Class; let field; @@ -69,36 +63,19 @@ const renderHeader = ({ } return ( <> - setShowEditModal(false)}> - - Edit {name} Field - - - { - handleEdit(dispatch, path, formData); - setShowEditModal(false); - }} - schema={field?.getBuilderSchema()} - formData={schema} - validator={validator} - /> - - - setShowPreviewModal(false)}> {name} Field{' '} - - {onDelete && ( - setShowDeleteConfirmationModal(true)}> - - - )} - setShowEditModal(true)}> - - - + {field && ( + + + + )} + {field && ( + + + + )} @@ -124,10 +101,8 @@ const renderHeader = ({ } /> - {onDelete && } - setShowEditModal(true)}> - - + + {field && } setShowPreviewModal(true)}> @@ -137,15 +112,6 @@ const renderHeader = ({ ); }; -const handleDelete = (dispatch: React.Dispatch, name: string) => { - dispatch({ type: 'DELETE_PROPERTY', payload: { name } }); - dispatch({ type: 'DELETE_REQUIRED', payload: { name } }); -}; - -const handleEdit = (dispatch: React.Dispatch, name: string, schema: RJSFSchema) => { - dispatch({ type: 'UPDATE_PROPERTY', payload: { name, schema } }); -}; - const isPropertyRequired = (fullSchema: JsonSchema, path: string, name: string) => (accessToObjectFieldParentByPath(fullSchema, path) as JsonSchema)?.required?.includes?.(name as string); @@ -155,7 +121,7 @@ const SchemaPreview = ({ schema, data, name, path }: DataVisualizationType) => { }; SchemaPreview.String = function String({ schema, path, name }: DataVisualizationType) { - const { dispatch, schema: fullSchema } = useSchema(); + const { schema: fullSchema } = useSchema(); return ( @@ -165,7 +131,7 @@ SchemaPreview.String = function String({ schema, path, name }: DataVisualization path, schema, icon: , - onDelete: () => handleDelete(dispatch, path), + isRequired: isPropertyRequired(fullSchema, path, name), })} @@ -173,7 +139,7 @@ SchemaPreview.String = function String({ schema, path, name }: DataVisualization }; SchemaPreview.Enum = function Enum({ schema, path, name }: DataVisualizationType) { - const { dispatch, schema: fullSchema } = useSchema(); + const { schema: fullSchema } = useSchema(); const enums = schema.enum; return ( @@ -192,7 +158,7 @@ SchemaPreview.Enum = function Enum({ schema, path, name }: DataVisualizationType path, schema, icon: , - onDelete: () => handleDelete(dispatch, path), + isRequired: isPropertyRequired(fullSchema, path, name), })} @@ -200,7 +166,7 @@ SchemaPreview.Enum = function Enum({ schema, path, name }: DataVisualizationType }; SchemaPreview.Number = function Number({ schema, path, name }: DataVisualizationType) { - const { dispatch, schema: fullSchema } = useSchema(); + const { schema: fullSchema } = useSchema(); return ( {renderHeader({ @@ -209,7 +175,7 @@ SchemaPreview.Number = function Number({ schema, path, name }: DataVisualization path, schema, icon: , - onDelete: () => handleDelete(dispatch, path), + isRequired: isPropertyRequired(fullSchema, path, name), })} @@ -217,7 +183,7 @@ SchemaPreview.Number = function Number({ schema, path, name }: DataVisualization }; SchemaPreview.Integer = function Number({ schema, path, name }: DataVisualizationType) { - const { dispatch, schema: fullSchema } = useSchema(); + const { schema: fullSchema } = useSchema(); return ( {renderHeader({ @@ -226,7 +192,7 @@ SchemaPreview.Integer = function Number({ schema, path, name }: DataVisualizatio path, schema, icon: , - onDelete: () => handleDelete(dispatch, path), + isRequired: isPropertyRequired(fullSchema, path, name), })} @@ -234,7 +200,7 @@ SchemaPreview.Integer = function Number({ schema, path, name }: DataVisualizatio }; SchemaPreview.Boolean = function BooleanVisualization({ schema, path, name }: DataVisualizationType) { - const { dispatch, schema: fullSchema } = useSchema(); + const { schema: fullSchema } = useSchema(); return ( {renderHeader({ @@ -243,7 +209,7 @@ SchemaPreview.Boolean = function BooleanVisualization({ schema, path, name }: Da path, schema, icon: , - onDelete: () => handleDelete(dispatch, path), + isRequired: isPropertyRequired(fullSchema, path, name), })} @@ -256,7 +222,7 @@ SchemaPreview.Object = function ObjectVisualization({ name, data, }: DataVisualizationType>) { - const { dispatch, schema: fullSchema } = useSchema(); + const { schema: fullSchema } = useSchema(); const properties = Object.keys(schema?.properties || {}); const [open, setOpen] = React.useState(true); @@ -275,7 +241,7 @@ SchemaPreview.Object = function ObjectVisualization({ icon: , collapse: open, onCollapse: handleCollapse, - onDelete: () => handleDelete(dispatch, path), + isRequired: isPropertyRequired(fullSchema, path, name), })} @@ -314,7 +280,7 @@ SchemaPreview.Object = function ObjectVisualization({ }; SchemaPreview.Array = function ArrayVisualization({ schema, path, name, data }: DataVisualizationType) { - const { dispatch, schema: fullSchema } = useSchema(); + const { schema: fullSchema } = useSchema(); return ( {renderHeader({ @@ -323,7 +289,7 @@ SchemaPreview.Array = function ArrayVisualization({ schema, path, name, data }: path, schema, icon: , - onDelete: () => handleDelete(dispatch, path), + isRequired: isPropertyRequired(fullSchema, path, name), })} From 4941998cfe907a08a1236aac93392bb46f2c16a1 Mon Sep 17 00:00:00 2001 From: Amirhossein Alibakhshi Date: Sun, 4 Aug 2024 17:38:45 +0330 Subject: [PATCH 4/7] feat: add preview button component --- src/components/EditFieldButton.tsx | 4 +- src/components/PreviewFieldButton.tsx | 44 ++++++++++++++++++++ src/components/SchemaPreview.tsx | 59 +++------------------------ 3 files changed, 52 insertions(+), 55 deletions(-) create mode 100644 src/components/PreviewFieldButton.tsx diff --git a/src/components/EditFieldButton.tsx b/src/components/EditFieldButton.tsx index d51708f..14926f8 100644 --- a/src/components/EditFieldButton.tsx +++ b/src/components/EditFieldButton.tsx @@ -9,7 +9,7 @@ import { JsonSchemaField } from '../fields/JsonSchemaField'; import { JsonSchema } from '../types'; type Props = { - field: JsonSchemaField; + field?: JsonSchemaField; schema: JsonSchema; path: string; }; @@ -25,7 +25,7 @@ const EditFieldButton = ({ field, schema, path }: Props) => { <> setShowEditModal(false)}> - Edit {field.getName()} Field + Edit {field?.getName() || '-'} Field { + const [showPreviewModal, setShowPreviewModal] = useState(false); + + return ( + <> + setShowPreviewModal(true)}> + + + setShowPreviewModal(false)}> + + {field?.getName() || '-'} Field{' '} + {field && ( + + + + )} + {field && ( + + + + )} + + + + + + + ); +}; + +export default PreviewFieldButton; diff --git a/src/components/SchemaPreview.tsx b/src/components/SchemaPreview.tsx index 873e5a8..204db09 100644 --- a/src/components/SchemaPreview.tsx +++ b/src/components/SchemaPreview.tsx @@ -1,39 +1,15 @@ -import React, { useState } from 'react'; +import React from 'react'; import { RJSFSchema } from '@rjsf/utils'; import AddFieldModal from './AddFieldModal'; import Numbers from '@mui/icons-material/Numbers'; -import { - Add, - Checklist, - DataArray, - DataObject, - ExpandLess, - ExpandMore, - Star, - TextSnippet, - ToggleOn, - Visibility, -} from '@mui/icons-material'; -import { - Box, - Chip, - Collapse, - Dialog, - DialogContent, - DialogTitle, - IconButton, - ListItem, - ListItemText, - Paper, - Stack, - Typography, -} from '@mui/material'; +import { Add, Checklist, DataArray, DataObject, ExpandLess, ExpandMore, Star, TextSnippet, ToggleOn } from '@mui/icons-material'; +import { Box, Chip, Collapse, IconButton, ListItem, ListItemText, Paper, Stack, Typography } from '@mui/material'; import { accessToObjectFieldParentByPath, generatePath, getFieldId, getSchemaFormatFromSchema } from '../utils'; import { DataVisualizationType, JsonSchema } from '../types'; import { useSchema } from '../providers/SchemaProvider'; -import FieldPreview from './FieldPreview'; import DeleteFieldButton from './DeleteFieldButton'; import EditFieldButton from './EditFieldButton'; +import PreviewFieldButton from './PreviewFieldButton'; // TODO: refactor const renderHeader = ({ @@ -53,7 +29,6 @@ const renderHeader = ({ onCollapse?: () => void; isRequired?: boolean; }) => { - const [showPreviewModal, setShowPreviewModal] = useState(false); const { fields } = useSchema(); const SelectedFieldClass = fields.find((field) => field.id === getFieldId(schema))?.Class; @@ -63,25 +38,6 @@ const renderHeader = ({ } return ( <> - setShowPreviewModal(false)}> - - {name} Field{' '} - {field && ( - - - - )} - {field && ( - - - - )} - - - - - - - {field && } - - setShowPreviewModal(true)}> - - + + ); From daec9c76a2df5f3339c5781c9fabb61a09d9c6cf Mon Sep 17 00:00:00 2001 From: Amirhossein Alibakhshi Date: Sun, 4 Aug 2024 17:54:59 +0330 Subject: [PATCH 5/7] fix: refactor preview header --- src/components/FieldBuilderView.tsx | 65 +++++++++ src/components/SchemaPreview.tsx | 219 +++++++++------------------- 2 files changed, 136 insertions(+), 148 deletions(-) create mode 100644 src/components/FieldBuilderView.tsx diff --git a/src/components/FieldBuilderView.tsx b/src/components/FieldBuilderView.tsx new file mode 100644 index 0000000..8fbd573 --- /dev/null +++ b/src/components/FieldBuilderView.tsx @@ -0,0 +1,65 @@ +import React from 'react'; +import { RJSFSchema } from '@rjsf/utils'; +import { useSchema } from '../providers/SchemaProvider'; +import { getFieldId } from '../utils'; +import { Chip, ListItem, ListItemText, Paper, Typography } from '@mui/material'; +import { Star } from '@mui/icons-material'; +import DeleteFieldButton from './DeleteFieldButton'; +import EditFieldButton from './EditFieldButton'; +import PreviewFieldButton from './PreviewFieldButton'; + +// TODO: Rename this components! +const FieldBuilderView = ({ + icon, + schema, + name, + path, + description, + isRequired, +}: { + icon?: React.ReactElement; + schema: RJSFSchema; + description?: React.ReactNode; + path: string; + name?: string; + collapse?: boolean; + onCollapse?: () => void; + isRequired?: boolean; +}) => { + const { fields } = useSchema(); + const SelectedFieldClass = fields?.find((field) => field.id === getFieldId(schema))?.Class; + + let field; + if (SelectedFieldClass && name) { + field = new SelectedFieldClass(name); + } + return ( + + + + + {schema?.title}{' '} + {' '} + {isRequired && } label={'Required'} />} + + {description && {description}} + + } + /> + + + + + + ); +}; + +export default FieldBuilderView; diff --git a/src/components/SchemaPreview.tsx b/src/components/SchemaPreview.tsx index 204db09..d692ea8 100644 --- a/src/components/SchemaPreview.tsx +++ b/src/components/SchemaPreview.tsx @@ -1,69 +1,12 @@ import React from 'react'; -import { RJSFSchema } from '@rjsf/utils'; import AddFieldModal from './AddFieldModal'; import Numbers from '@mui/icons-material/Numbers'; -import { Add, Checklist, DataArray, DataObject, ExpandLess, ExpandMore, Star, TextSnippet, ToggleOn } from '@mui/icons-material'; -import { Box, Chip, Collapse, IconButton, ListItem, ListItemText, Paper, Stack, Typography } from '@mui/material'; -import { accessToObjectFieldParentByPath, generatePath, getFieldId, getSchemaFormatFromSchema } from '../utils'; +import { Add, Checklist, DataArray, DataObject, ExpandLess, ExpandMore, TextSnippet, ToggleOn } from '@mui/icons-material'; +import { Box, Chip, Collapse, IconButton, Paper, Stack, Typography } from '@mui/material'; +import { accessToObjectFieldParentByPath, generatePath, getSchemaFormatFromSchema } from '../utils'; import { DataVisualizationType, JsonSchema } from '../types'; import { useSchema } from '../providers/SchemaProvider'; -import DeleteFieldButton from './DeleteFieldButton'; -import EditFieldButton from './EditFieldButton'; -import PreviewFieldButton from './PreviewFieldButton'; - -// TODO: refactor -const renderHeader = ({ - icon, - schema, - name, - path, - description, - isRequired, -}: { - icon?: React.ReactElement; - schema: RJSFSchema; - description?: React.ReactNode; - path: string; - name?: string; - collapse?: boolean; - onCollapse?: () => void; - isRequired?: boolean; -}) => { - const { fields } = useSchema(); - const SelectedFieldClass = fields.find((field) => field.id === getFieldId(schema))?.Class; - - let field; - if (SelectedFieldClass && name) { - field = new SelectedFieldClass(name); - } - return ( - <> - - - - {schema?.title}{' '} - {' '} - {isRequired && } label={'Required'} />} - - {description && {description}} - - } - /> - - - - - - ); -}; +import FieldBuilderView from './FieldBuilderView'; const isPropertyRequired = (fullSchema: JsonSchema, path: string, name: string) => (accessToObjectFieldParentByPath(fullSchema, path) as JsonSchema)?.required?.includes?.(name as string); @@ -75,19 +18,15 @@ const SchemaPreview = ({ schema, data, name, path }: DataVisualizationType) => { SchemaPreview.String = function String({ schema, path, name }: DataVisualizationType) { const { schema: fullSchema } = useSchema(); - return ( - - {renderHeader({ - description: schema.description, - name, - path, - schema, - icon: , - - isRequired: isPropertyRequired(fullSchema, path, name), - })} - + } + isRequired={isPropertyRequired(fullSchema, path, name)} + /> ); }; @@ -95,77 +34,65 @@ SchemaPreview.Enum = function Enum({ schema, path, name }: DataVisualizationType const { schema: fullSchema } = useSchema(); const enums = schema.enum; return ( - - {renderHeader({ - description: ( - <> - {schema.description} Options:{' '} - - {enums.map((e: unknown, index: number) => ( - - ))} - - - ), - name, - path, - schema, - icon: , - - isRequired: isPropertyRequired(fullSchema, path, name), - })} - + + {schema.description} Options:{' '} + + {enums.map((e: unknown, index: number) => ( + + ))} + + + } + name={name} + path={path} + schema={schema} + icon={} + isRequired={isPropertyRequired(fullSchema, path, name)} + /> ); }; SchemaPreview.Number = function Number({ schema, path, name }: DataVisualizationType) { const { schema: fullSchema } = useSchema(); return ( - - {renderHeader({ - description: schema.description, - name, - path, - schema, - icon: , - - isRequired: isPropertyRequired(fullSchema, path, name), - })} - + } + isRequired={isPropertyRequired(fullSchema, path, name)} + /> ); }; SchemaPreview.Integer = function Number({ schema, path, name }: DataVisualizationType) { const { schema: fullSchema } = useSchema(); return ( - - {renderHeader({ - description: schema.description, - name, - path, - schema, - icon: , - - isRequired: isPropertyRequired(fullSchema, path, name), - })} - + } + isRequired={isPropertyRequired(fullSchema, path, name)} + /> ); }; SchemaPreview.Boolean = function BooleanVisualization({ schema, path, name }: DataVisualizationType) { const { schema: fullSchema } = useSchema(); return ( - - {renderHeader({ - description: schema.description, - name, - path, - schema, - icon: , - - isRequired: isPropertyRequired(fullSchema, path, name), - })} - + } + isRequired={isPropertyRequired(fullSchema, path, name)} + /> ); }; @@ -177,26 +104,23 @@ SchemaPreview.Object = function ObjectVisualization({ }: DataVisualizationType>) { const { schema: fullSchema } = useSchema(); const properties = Object.keys(schema?.properties || {}); - const [open, setOpen] = React.useState(true); - const handleCollapse = () => { setOpen(!open); }; return ( - {renderHeader({ - description: schema.description, - name, - path, - schema, - icon: , - collapse: open, - onCollapse: handleCollapse, - - isRequired: isPropertyRequired(fullSchema, path, name), - })} + } + isRequired={isPropertyRequired(fullSchema, path, name)} + onCollapse={handleCollapse} + collapse={open} + /> Properties @@ -236,15 +160,14 @@ SchemaPreview.Array = function ArrayVisualization({ schema, path, name, data }: const { schema: fullSchema } = useSchema(); return ( - {renderHeader({ - description: schema.description, - name, - path, - schema, - icon: , - - isRequired: isPropertyRequired(fullSchema, path, name), - })} + } + isRequired={isPropertyRequired(fullSchema, path, name)} + /> From 6dde2eec0d9c836810e6b40f97235596bc7c893d Mon Sep 17 00:00:00 2001 From: Amirhossein Alibakhshi Date: Sun, 4 Aug 2024 18:42:35 +0330 Subject: [PATCH 6/7] fix: updata package json --- .gitignore | 3 +- package.json | 32 +++- pnpm-lock.yaml | 216 +++++++++++++++++++------- rollup.config.js | 28 ++++ src/builder/JsonSchemaBuilder.ts | 2 +- src/components/AddFieldModal.tsx | 3 +- src/components/DeleteFieldButton.tsx | 3 +- src/components/EditFieldButton.tsx | 4 +- src/components/FieldPreview.tsx | 2 +- src/components/PreviewFieldButton.tsx | 2 +- src/components/SchemaBuilder.tsx | 2 +- src/components/SchemaPreview.tsx | 2 +- src/fields/JsonSchemaField.ts | 2 +- src/index.ts | 5 + src/providers/SchemaProvider.tsx | 7 +- src/test/JsonSchemaBuilder.test.ts | 2 +- src/types.ts | 5 + src/utils/index.ts | 2 +- tsconfig.json | 3 +- 19 files changed, 245 insertions(+), 80 deletions(-) create mode 100644 rollup.config.js create mode 100644 src/index.ts diff --git a/.gitignore b/.gitignore index bea12e8..2a2a98b 100644 --- a/.gitignore +++ b/.gitignore @@ -38,4 +38,5 @@ packages/react-devtools-inline/dist packages/react-devtools-shell/dist packages/react-devtools-timeline/dist storybook-static/ -lib \ No newline at end of file +lib +dist \ No newline at end of file diff --git a/package.json b/package.json index d7392aa..33f1059 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,9 @@ "name": "schemabuilder", "version": "0.0.0", "description": "A Simple User Interface for creating JSON Schema without writing JSON!", - "main": "index.js", + "main": "dist/index.js", + "module": "dist/index.esm.js", + "types": "dist/index.d.ts", "scripts": { "test": "jest --coverage", "storybook": "storybook dev -p 6006", @@ -13,7 +15,7 @@ "lint:fix": "eslint 'src/**/*.{js,ts,jsx,tsx}' --fix", "format": "prettier --write 'src/**/*.{js,ts,jsx,tsx,json,css,scss,md}'", "postinstall": "husky install", - "prepack": "pinst --disable", + "prepack": "pinst --disable && pnpm build", "postpack": "pinst --enable" }, "lint-staged": { @@ -22,9 +24,26 @@ "prettier --write" ] }, - "keywords": ["JSON schema", "form builder"], + "repository": { + "type": "git", + "url": "https://github.com/amir78729/schema-builder.git" + }, + "bugs": { + "url": "https://github.com/amir78729/schema-builder/issues" + }, + "homepage": "https://github.com/amir78729/schema-builder#readme", + "keywords": [ + "JSON schema", + "form builder", + "schema", + "builder", + "react" + ], "author": "Amirhossein Alibakhshi", "license": "MIT", + "engines": { + "node": ">=14.0.0" + }, "dependencies": { "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.5", @@ -70,10 +89,17 @@ "lint-staged": "^15.2.7", "pinst": "^3.0.0", "prettier": "^3.3.2", + "rollup": "^3.20.1", + "rollup-plugin-terser": "^7.0.2", + "rollup-plugin-typescript2": "^0.32.1", "shiki": "^1.10.3", "storybook": "^8.1.6", "ts-jest": "^29.2.3", "typescript": "^5.4.5", "typescript-eslint": "^7.12.0" + }, + "peerDependencies": { + "react": "^18.3.1", + "react-dom": "^18.3.1" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7f5e8ab..3486ec8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -69,7 +69,7 @@ devDependencies: version: 8.1.6(prettier@3.3.2)(react-dom@18.3.1)(react@18.3.1)(typescript@5.4.5) '@storybook/react-vite': specifier: ^8.1.6 - version: 8.1.6(prettier@3.3.2)(react-dom@18.3.1)(react@18.3.1)(typescript@5.4.5)(vite@5.2.13) + version: 8.1.6(prettier@3.3.2)(react-dom@18.3.1)(react@18.3.1)(rollup@3.29.4)(typescript@5.4.5)(vite@5.2.13) '@storybook/test': specifier: ^8.1.6 version: 8.1.6(@types/jest@29.5.12)(jest@29.7.0) @@ -133,6 +133,15 @@ devDependencies: prettier: specifier: ^3.3.2 version: 3.3.2 + rollup: + specifier: ^3.20.1 + version: 3.29.4 + rollup-plugin-terser: + specifier: ^7.0.2 + version: 7.0.2(rollup@3.29.4) + rollup-plugin-typescript2: + specifier: ^0.32.1 + version: 0.32.1(rollup@3.29.4)(typescript@5.4.5) shiki: specifier: ^1.10.3 version: 1.10.3 @@ -2236,6 +2245,13 @@ packages: resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==} engines: {node: '>=6.0.0'} + /@jridgewell/source-map@0.3.6: + resolution: {integrity: sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==} + dependencies: + '@jridgewell/gen-mapping': 0.3.5 + '@jridgewell/trace-mapping': 0.3.25 + dev: true + /@jridgewell/sourcemap-codec@1.4.15: resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==} @@ -2825,7 +2841,15 @@ packages: lodash-es: 4.17.21 dev: false - /@rollup/pluginutils@5.1.0: + /@rollup/pluginutils@4.2.1: + resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==} + engines: {node: '>= 8.0.0'} + dependencies: + estree-walker: 2.0.2 + picomatch: 2.3.1 + dev: true + + /@rollup/pluginutils@5.1.0(rollup@3.29.4): resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==} engines: {node: '>=14.0.0'} peerDependencies: @@ -2837,130 +2861,131 @@ packages: '@types/estree': 1.0.5 estree-walker: 2.0.2 picomatch: 2.3.1 + rollup: 3.29.4 dev: true - /@rollup/rollup-android-arm-eabi@4.18.0: - resolution: {integrity: sha512-Tya6xypR10giZV1XzxmH5wr25VcZSncG0pZIjfePT0OVBvqNEurzValetGNarVrGiq66EBVAFn15iYX4w6FKgQ==} + /@rollup/rollup-android-arm-eabi@4.20.0: + resolution: {integrity: sha512-TSpWzflCc4VGAUJZlPpgAJE1+V60MePDQnBd7PPkpuEmOy8i87aL6tinFGKBFKuEDikYpig72QzdT3QPYIi+oA==} cpu: [arm] os: [android] requiresBuild: true dev: true optional: true - /@rollup/rollup-android-arm64@4.18.0: - resolution: {integrity: sha512-avCea0RAP03lTsDhEyfy+hpfr85KfyTctMADqHVhLAF3MlIkq83CP8UfAHUssgXTYd+6er6PaAhx/QGv4L1EiA==} + /@rollup/rollup-android-arm64@4.20.0: + resolution: {integrity: sha512-u00Ro/nok7oGzVuh/FMYfNoGqxU5CPWz1mxV85S2w9LxHR8OoMQBuSk+3BKVIDYgkpeOET5yXkx90OYFc+ytpQ==} cpu: [arm64] os: [android] requiresBuild: true dev: true optional: true - /@rollup/rollup-darwin-arm64@4.18.0: - resolution: {integrity: sha512-IWfdwU7KDSm07Ty0PuA/W2JYoZ4iTj3TUQjkVsO/6U+4I1jN5lcR71ZEvRh52sDOERdnNhhHU57UITXz5jC1/w==} + /@rollup/rollup-darwin-arm64@4.20.0: + resolution: {integrity: sha512-uFVfvzvsdGtlSLuL0ZlvPJvl6ZmrH4CBwLGEFPe7hUmf7htGAN+aXo43R/V6LATyxlKVC/m6UsLb7jbG+LG39Q==} cpu: [arm64] os: [darwin] requiresBuild: true dev: true optional: true - /@rollup/rollup-darwin-x64@4.18.0: - resolution: {integrity: sha512-n2LMsUz7Ynu7DoQrSQkBf8iNrjOGyPLrdSg802vk6XT3FtsgX6JbE8IHRvposskFm9SNxzkLYGSq9QdpLYpRNA==} + /@rollup/rollup-darwin-x64@4.20.0: + resolution: {integrity: sha512-xbrMDdlev53vNXexEa6l0LffojxhqDTBeL+VUxuuIXys4x6xyvbKq5XqTXBCEUA8ty8iEJblHvFaWRJTk/icAQ==} cpu: [x64] os: [darwin] requiresBuild: true dev: true optional: true - /@rollup/rollup-linux-arm-gnueabihf@4.18.0: - resolution: {integrity: sha512-C/zbRYRXFjWvz9Z4haRxcTdnkPt1BtCkz+7RtBSuNmKzMzp3ZxdM28Mpccn6pt28/UWUCTXa+b0Mx1k3g6NOMA==} + /@rollup/rollup-linux-arm-gnueabihf@4.20.0: + resolution: {integrity: sha512-jMYvxZwGmoHFBTbr12Xc6wOdc2xA5tF5F2q6t7Rcfab68TT0n+r7dgawD4qhPEvasDsVpQi+MgDzj2faOLsZjA==} cpu: [arm] os: [linux] requiresBuild: true dev: true optional: true - /@rollup/rollup-linux-arm-musleabihf@4.18.0: - resolution: {integrity: sha512-l3m9ewPgjQSXrUMHg93vt0hYCGnrMOcUpTz6FLtbwljo2HluS4zTXFy2571YQbisTnfTKPZ01u/ukJdQTLGh9A==} + /@rollup/rollup-linux-arm-musleabihf@4.20.0: + resolution: {integrity: sha512-1asSTl4HKuIHIB1GcdFHNNZhxAYEdqML/MW4QmPS4G0ivbEcBr1JKlFLKsIRqjSwOBkdItn3/ZDlyvZ/N6KPlw==} cpu: [arm] os: [linux] requiresBuild: true dev: true optional: true - /@rollup/rollup-linux-arm64-gnu@4.18.0: - resolution: {integrity: sha512-rJ5D47d8WD7J+7STKdCUAgmQk49xuFrRi9pZkWoRD1UeSMakbcepWXPF8ycChBoAqs1pb2wzvbY6Q33WmN2ftw==} + /@rollup/rollup-linux-arm64-gnu@4.20.0: + resolution: {integrity: sha512-COBb8Bkx56KldOYJfMf6wKeYJrtJ9vEgBRAOkfw6Ens0tnmzPqvlpjZiLgkhg6cA3DGzCmLmmd319pmHvKWWlQ==} cpu: [arm64] os: [linux] requiresBuild: true dev: true optional: true - /@rollup/rollup-linux-arm64-musl@4.18.0: - resolution: {integrity: sha512-be6Yx37b24ZwxQ+wOQXXLZqpq4jTckJhtGlWGZs68TgdKXJgw54lUUoFYrg6Zs/kjzAQwEwYbp8JxZVzZLRepQ==} + /@rollup/rollup-linux-arm64-musl@4.20.0: + resolution: {integrity: sha512-+it+mBSyMslVQa8wSPvBx53fYuZK/oLTu5RJoXogjk6x7Q7sz1GNRsXWjn6SwyJm8E/oMjNVwPhmNdIjwP135Q==} cpu: [arm64] os: [linux] requiresBuild: true dev: true optional: true - /@rollup/rollup-linux-powerpc64le-gnu@4.18.0: - resolution: {integrity: sha512-hNVMQK+qrA9Todu9+wqrXOHxFiD5YmdEi3paj6vP02Kx1hjd2LLYR2eaN7DsEshg09+9uzWi2W18MJDlG0cxJA==} + /@rollup/rollup-linux-powerpc64le-gnu@4.20.0: + resolution: {integrity: sha512-yAMvqhPfGKsAxHN8I4+jE0CpLWD8cv4z7CK7BMmhjDuz606Q2tFKkWRY8bHR9JQXYcoLfopo5TTqzxgPUjUMfw==} cpu: [ppc64] os: [linux] requiresBuild: true dev: true optional: true - /@rollup/rollup-linux-riscv64-gnu@4.18.0: - resolution: {integrity: sha512-ROCM7i+m1NfdrsmvwSzoxp9HFtmKGHEqu5NNDiZWQtXLA8S5HBCkVvKAxJ8U+CVctHwV2Gb5VUaK7UAkzhDjlg==} + /@rollup/rollup-linux-riscv64-gnu@4.20.0: + resolution: {integrity: sha512-qmuxFpfmi/2SUkAw95TtNq/w/I7Gpjurx609OOOV7U4vhvUhBcftcmXwl3rqAek+ADBwSjIC4IVNLiszoj3dPA==} cpu: [riscv64] os: [linux] requiresBuild: true dev: true optional: true - /@rollup/rollup-linux-s390x-gnu@4.18.0: - resolution: {integrity: sha512-0UyyRHyDN42QL+NbqevXIIUnKA47A+45WyasO+y2bGJ1mhQrfrtXUpTxCOrfxCR4esV3/RLYyucGVPiUsO8xjg==} + /@rollup/rollup-linux-s390x-gnu@4.20.0: + resolution: {integrity: sha512-I0BtGXddHSHjV1mqTNkgUZLnS3WtsqebAXv11D5BZE/gfw5KoyXSAXVqyJximQXNvNzUo4GKlCK/dIwXlz+jlg==} cpu: [s390x] os: [linux] requiresBuild: true dev: true optional: true - /@rollup/rollup-linux-x64-gnu@4.18.0: - resolution: {integrity: sha512-xuglR2rBVHA5UsI8h8UbX4VJ470PtGCf5Vpswh7p2ukaqBGFTnsfzxUBetoWBWymHMxbIG0Cmx7Y9qDZzr648w==} + /@rollup/rollup-linux-x64-gnu@4.20.0: + resolution: {integrity: sha512-y+eoL2I3iphUg9tN9GB6ku1FA8kOfmF4oUEWhztDJ4KXJy1agk/9+pejOuZkNFhRwHAOxMsBPLbXPd6mJiCwew==} cpu: [x64] os: [linux] requiresBuild: true dev: true optional: true - /@rollup/rollup-linux-x64-musl@4.18.0: - resolution: {integrity: sha512-LKaqQL9osY/ir2geuLVvRRs+utWUNilzdE90TpyoX0eNqPzWjRm14oMEE+YLve4k/NAqCdPkGYDaDF5Sw+xBfg==} + /@rollup/rollup-linux-x64-musl@4.20.0: + resolution: {integrity: sha512-hM3nhW40kBNYUkZb/r9k2FKK+/MnKglX7UYd4ZUy5DJs8/sMsIbqWK2piZtVGE3kcXVNj3B2IrUYROJMMCikNg==} cpu: [x64] os: [linux] requiresBuild: true dev: true optional: true - /@rollup/rollup-win32-arm64-msvc@4.18.0: - resolution: {integrity: sha512-7J6TkZQFGo9qBKH0pk2cEVSRhJbL6MtfWxth7Y5YmZs57Pi+4x6c2dStAUvaQkHQLnEQv1jzBUW43GvZW8OFqA==} + /@rollup/rollup-win32-arm64-msvc@4.20.0: + resolution: {integrity: sha512-psegMvP+Ik/Bg7QRJbv8w8PAytPA7Uo8fpFjXyCRHWm6Nt42L+JtoqH8eDQ5hRP7/XW2UiIriy1Z46jf0Oa1kA==} cpu: [arm64] os: [win32] requiresBuild: true dev: true optional: true - /@rollup/rollup-win32-ia32-msvc@4.18.0: - resolution: {integrity: sha512-Txjh+IxBPbkUB9+SXZMpv+b/vnTEtFyfWZgJ6iyCmt2tdx0OF5WhFowLmnh8ENGNpfUlUZkdI//4IEmhwPieNg==} + /@rollup/rollup-win32-ia32-msvc@4.20.0: + resolution: {integrity: sha512-GabekH3w4lgAJpVxkk7hUzUf2hICSQO0a/BLFA11/RMxQT92MabKAqyubzDZmMOC/hcJNlc+rrypzNzYl4Dx7A==} cpu: [ia32] os: [win32] requiresBuild: true dev: true optional: true - /@rollup/rollup-win32-x64-msvc@4.18.0: - resolution: {integrity: sha512-UOo5FdvOL0+eIVTgS4tIdbW+TtnBLWg1YBCcU2KWM7nuNwRz9bksDX1bekJJCpu25N1DVWaCwnT39dVQxzqS8g==} + /@rollup/rollup-win32-x64-msvc@4.20.0: + resolution: {integrity: sha512-aJ1EJSuTdGnM6qbVC4B5DSmozPTqIag9fSzXRNNo+humQLG89XpPgdt16Ia56ORD7s+H8Pmyx44uczDQ0yDzpg==} cpu: [x64] os: [win32] requiresBuild: true @@ -3626,7 +3651,7 @@ packages: react-dom: 18.3.1(react@18.3.1) dev: true - /@storybook/react-vite@8.1.6(prettier@3.3.2)(react-dom@18.3.1)(react@18.3.1)(typescript@5.4.5)(vite@5.2.13): + /@storybook/react-vite@8.1.6(prettier@3.3.2)(react-dom@18.3.1)(react@18.3.1)(rollup@3.29.4)(typescript@5.4.5)(vite@5.2.13): resolution: {integrity: sha512-aUrSOVVG/11v5FBWjxyVVYtL1MhFcGFvkHcT2tTUK2lN/EMNFugL5t5YYPv0FIi/DXxg8RBdJIV9vdNCd6tNOA==} engines: {node: '>=18.0.0'} peerDependencies: @@ -3635,7 +3660,7 @@ packages: vite: ^4.0.0 || ^5.0.0 dependencies: '@joshwooding/vite-plugin-react-docgen-typescript': 0.3.1(typescript@5.4.5)(vite@5.2.13) - '@rollup/pluginutils': 5.1.0 + '@rollup/pluginutils': 5.1.0(rollup@3.29.4) '@storybook/builder-vite': 8.1.6(prettier@3.3.2)(typescript@5.4.5)(vite@5.2.13) '@storybook/node-logger': 8.1.6 '@storybook/react': 8.1.6(prettier@3.3.2)(react-dom@18.3.1)(react@18.3.1)(typescript@5.4.5) @@ -5234,6 +5259,10 @@ packages: engines: {node: '>=18'} dev: true + /commander@2.20.3: + resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==} + dev: true + /commander@6.2.1: resolution: {integrity: sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==} engines: {node: '>= 6'} @@ -6540,6 +6569,15 @@ packages: resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==} dev: true + /fs-extra@10.1.0: + resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==} + engines: {node: '>=12'} + dependencies: + graceful-fs: 4.2.11 + jsonfile: 6.1.0 + universalify: 2.0.1 + dev: true + /fs-extra@11.1.1: resolution: {integrity: sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==} engines: {node: '>=14.14'} @@ -7760,6 +7798,15 @@ packages: string-length: 4.0.2 dev: true + /jest-worker@26.6.2: + resolution: {integrity: sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==} + engines: {node: '>= 10.13.0'} + dependencies: + '@types/node': 20.14.2 + merge-stream: 2.0.0 + supports-color: 7.2.0 + dev: true + /jest-worker@29.7.0: resolution: {integrity: sha512-eIz2msL/EzL9UFTFFx7jBTkeZfku0yUAyZZZmJ93H2TYEiroIx2PQjEXcwYtYl8zXCxb+PAmA2hLIt/6ZEkPHw==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} @@ -8870,6 +8917,12 @@ packages: resolution: {integrity: sha512-BBea6L67bYLtdbOqfp8f58fPMqEwx0doL+pAi8TZyp2YWz8R9G8z9x75CZI8W+ftqhFHCpEX2cRnUUXK130iKA==} dev: true + /randombytes@2.1.0: + resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==} + dependencies: + safe-buffer: 5.2.1 + dev: true + /range-parser@1.2.1: resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==} engines: {node: '>= 0.6'} @@ -9273,29 +9326,65 @@ packages: glob: 7.2.3 dev: true - /rollup@4.18.0: - resolution: {integrity: sha512-QmJz14PX3rzbJCN1SG4Xe/bAAX2a6NpCP8ab2vfu2GiUr8AQcr2nCV/oEO3yneFarB67zk8ShlIyWb2LGTb3Sg==} + /rollup-plugin-terser@7.0.2(rollup@3.29.4): + resolution: {integrity: sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==} + deprecated: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser + peerDependencies: + rollup: ^2.0.0 + dependencies: + '@babel/code-frame': 7.24.7 + jest-worker: 26.6.2 + rollup: 3.29.4 + serialize-javascript: 4.0.0 + terser: 5.31.3 + dev: true + + /rollup-plugin-typescript2@0.32.1(rollup@3.29.4)(typescript@5.4.5): + resolution: {integrity: sha512-RanO8bp1WbeMv0bVlgcbsFNCn+Y3rX7wF97SQLDxf0fMLsg0B/QFF005t4AsGUcDgF3aKJHoqt4JF2xVaABeKw==} + peerDependencies: + rollup: '>=1.26.3' + typescript: '>=2.4.0' + dependencies: + '@rollup/pluginutils': 4.2.1 + find-cache-dir: 3.3.2 + fs-extra: 10.1.0 + resolve: 1.22.8 + rollup: 3.29.4 + tslib: 2.6.3 + typescript: 5.4.5 + dev: true + + /rollup@3.29.4: + resolution: {integrity: sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==} + engines: {node: '>=14.18.0', npm: '>=8.0.0'} + hasBin: true + optionalDependencies: + fsevents: 2.3.3 + dev: true + + /rollup@4.20.0: + resolution: {integrity: sha512-6rbWBChcnSGzIlXeIdNIZTopKYad8ZG8ajhl78lGRLsI2rX8IkaotQhVas2Ma+GPxJav19wrSzvRvuiv0YKzWw==} engines: {node: '>=18.0.0', npm: '>=8.0.0'} hasBin: true dependencies: '@types/estree': 1.0.5 optionalDependencies: - '@rollup/rollup-android-arm-eabi': 4.18.0 - '@rollup/rollup-android-arm64': 4.18.0 - '@rollup/rollup-darwin-arm64': 4.18.0 - '@rollup/rollup-darwin-x64': 4.18.0 - '@rollup/rollup-linux-arm-gnueabihf': 4.18.0 - '@rollup/rollup-linux-arm-musleabihf': 4.18.0 - '@rollup/rollup-linux-arm64-gnu': 4.18.0 - '@rollup/rollup-linux-arm64-musl': 4.18.0 - '@rollup/rollup-linux-powerpc64le-gnu': 4.18.0 - '@rollup/rollup-linux-riscv64-gnu': 4.18.0 - '@rollup/rollup-linux-s390x-gnu': 4.18.0 - '@rollup/rollup-linux-x64-gnu': 4.18.0 - '@rollup/rollup-linux-x64-musl': 4.18.0 - '@rollup/rollup-win32-arm64-msvc': 4.18.0 - '@rollup/rollup-win32-ia32-msvc': 4.18.0 - '@rollup/rollup-win32-x64-msvc': 4.18.0 + '@rollup/rollup-android-arm-eabi': 4.20.0 + '@rollup/rollup-android-arm64': 4.20.0 + '@rollup/rollup-darwin-arm64': 4.20.0 + '@rollup/rollup-darwin-x64': 4.20.0 + '@rollup/rollup-linux-arm-gnueabihf': 4.20.0 + '@rollup/rollup-linux-arm-musleabihf': 4.20.0 + '@rollup/rollup-linux-arm64-gnu': 4.20.0 + '@rollup/rollup-linux-arm64-musl': 4.20.0 + '@rollup/rollup-linux-powerpc64le-gnu': 4.20.0 + '@rollup/rollup-linux-riscv64-gnu': 4.20.0 + '@rollup/rollup-linux-s390x-gnu': 4.20.0 + '@rollup/rollup-linux-x64-gnu': 4.20.0 + '@rollup/rollup-linux-x64-musl': 4.20.0 + '@rollup/rollup-win32-arm64-msvc': 4.20.0 + '@rollup/rollup-win32-ia32-msvc': 4.20.0 + '@rollup/rollup-win32-x64-msvc': 4.20.0 fsevents: 2.3.3 dev: true @@ -9378,6 +9467,12 @@ packages: - supports-color dev: true + /serialize-javascript@4.0.0: + resolution: {integrity: sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==} + dependencies: + randombytes: 2.1.0 + dev: true + /serve-static@1.15.0: resolution: {integrity: sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==} engines: {node: '>= 0.8.0'} @@ -9850,6 +9945,17 @@ packages: unique-string: 3.0.0 dev: true + /terser@5.31.3: + resolution: {integrity: sha512-pAfYn3NIZLyZpa83ZKigvj6Rn9c/vd5KfYGX7cN1mnzqgDcxWvrU5ZtAfIKhEXz9nRecw4z3LXkjaq96/qZqAA==} + engines: {node: '>=10'} + hasBin: true + dependencies: + '@jridgewell/source-map': 0.3.6 + acorn: 8.11.3 + commander: 2.20.3 + source-map-support: 0.5.21 + dev: true + /test-exclude@6.0.0: resolution: {integrity: sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==} engines: {node: '>=8'} @@ -10357,7 +10463,7 @@ packages: dependencies: esbuild: 0.20.2 postcss: 8.4.38 - rollup: 4.18.0 + rollup: 4.20.0 optionalDependencies: fsevents: 2.3.3 dev: true diff --git a/rollup.config.js b/rollup.config.js new file mode 100644 index 0000000..35a801c --- /dev/null +++ b/rollup.config.js @@ -0,0 +1,28 @@ +// TODO: fix it +import typescript from 'rollup-plugin-typescript2'; +import {terser} from 'rollup-plugin-terser'; +import pkg from './package.json' assert { type: "json" }; +import ts from 'typescript' + +export default { + input: 'src/index.ts', // Adjust this to the main entry point of your library + output: [ + { + file: pkg.main, + format: 'cjs', + sourcemap: true, + }, + { + file: pkg.module, + format: 'esm', + sourcemap: true, + }, + ], + external: Object.keys(pkg.peerDependencies || {}), + plugins: [ + typescript({ + typescript: ts, + }), + terser(), + ], +}; diff --git a/src/builder/JsonSchemaBuilder.ts b/src/builder/JsonSchemaBuilder.ts index eef2cf9..e2e7fd9 100644 --- a/src/builder/JsonSchemaBuilder.ts +++ b/src/builder/JsonSchemaBuilder.ts @@ -1,4 +1,4 @@ -import { Format, JsonSchema, JsonSchemaType } from '../types'; +import type { Format, JsonSchema, JsonSchemaType } from '../types'; import { SCHEMA_TYPE } from '../constants'; /** diff --git a/src/components/AddFieldModal.tsx b/src/components/AddFieldModal.tsx index 110f5e7..ebfafdd 100644 --- a/src/components/AddFieldModal.tsx +++ b/src/components/AddFieldModal.tsx @@ -1,10 +1,9 @@ import { Box, Button, Dialog, FormControl, IconButton, InputLabel, MenuItem, Stack, TextField, Tooltip } from '@mui/material'; import Form from '@rjsf/mui'; - import validator from '@rjsf/validator-ajv8'; import React from 'react'; import { useSchema } from '../providers/SchemaProvider'; -import { JsonSchema } from '../types'; +import type { JsonSchema } from '../types'; import { JsonSchemaField } from '../fields/JsonSchemaField'; import Select from '@mui/material/Select'; import { Add } from '@mui/icons-material'; diff --git a/src/components/DeleteFieldButton.tsx b/src/components/DeleteFieldButton.tsx index 0c5f2bd..e9787d7 100644 --- a/src/components/DeleteFieldButton.tsx +++ b/src/components/DeleteFieldButton.tsx @@ -1,7 +1,8 @@ import React, { useState } from 'react'; import { Delete } from '@mui/icons-material'; import { Button, Dialog, DialogActions, DialogContent, IconButton, Typography } from '@mui/material'; -import { SchemaAction, useSchema } from '../providers/SchemaProvider'; +import { useSchema } from '../providers/SchemaProvider'; +import type { SchemaAction } from '../types'; type Props = { path: string; diff --git a/src/components/EditFieldButton.tsx b/src/components/EditFieldButton.tsx index 14926f8..a022d98 100644 --- a/src/components/EditFieldButton.tsx +++ b/src/components/EditFieldButton.tsx @@ -3,10 +3,10 @@ import { Dialog, DialogContent, DialogTitle, IconButton } from '@mui/material'; import Form from '@rjsf/mui'; import validator from '@rjsf/validator-ajv8'; import { Edit } from '@mui/icons-material'; -import { SchemaAction, useSchema } from '../providers/SchemaProvider'; +import { useSchema } from '../providers/SchemaProvider'; import { RJSFSchema } from '@rjsf/utils'; import { JsonSchemaField } from '../fields/JsonSchemaField'; -import { JsonSchema } from '../types'; +import type { JsonSchema, SchemaAction } from '../types'; type Props = { field?: JsonSchemaField; diff --git a/src/components/FieldPreview.tsx b/src/components/FieldPreview.tsx index 5dbe036..cac217c 100644 --- a/src/components/FieldPreview.tsx +++ b/src/components/FieldPreview.tsx @@ -3,7 +3,7 @@ import { RJSFSchema } from '@rjsf/utils'; import { Check, Close } from '@mui/icons-material'; import { Card, ListItem, ListItemText, Table, TableBody, TableCell, TableRow, Typography } from '@mui/material'; import { getSchemaFormatFromSchema } from '../utils'; -import { DataVisualizationType } from '../types'; +import type { DataVisualizationType } from '../types'; type Props = { schema: RJSFSchema; diff --git a/src/components/PreviewFieldButton.tsx b/src/components/PreviewFieldButton.tsx index 0da5b10..069e0cb 100644 --- a/src/components/PreviewFieldButton.tsx +++ b/src/components/PreviewFieldButton.tsx @@ -5,7 +5,7 @@ import DeleteFieldButton from './DeleteFieldButton'; import FieldPreview from './FieldPreview'; import { Visibility } from '@mui/icons-material'; import { JsonSchemaField } from '../fields/JsonSchemaField'; -import { JsonSchema } from '../types'; +import type { JsonSchema } from '../types'; type Props = { field?: JsonSchemaField; schema: JsonSchema; diff --git a/src/components/SchemaBuilder.tsx b/src/components/SchemaBuilder.tsx index ead1b18..176f04d 100644 --- a/src/components/SchemaBuilder.tsx +++ b/src/components/SchemaBuilder.tsx @@ -5,7 +5,7 @@ import { useSchema } from '../providers/SchemaProvider'; import { Box, CssBaseline, Tab, Tabs } from '@mui/material'; import SchemaPreview from './SchemaPreview'; import { codeToHtml } from 'shiki'; -import { JsonSchema } from '../types'; +import type { JsonSchema } from '../types'; import CopyButton from './CopyButton'; type SchemaBuilderProps = { diff --git a/src/components/SchemaPreview.tsx b/src/components/SchemaPreview.tsx index d692ea8..5026fe3 100644 --- a/src/components/SchemaPreview.tsx +++ b/src/components/SchemaPreview.tsx @@ -4,7 +4,7 @@ import Numbers from '@mui/icons-material/Numbers'; import { Add, Checklist, DataArray, DataObject, ExpandLess, ExpandMore, TextSnippet, ToggleOn } from '@mui/icons-material'; import { Box, Chip, Collapse, IconButton, Paper, Stack, Typography } from '@mui/material'; import { accessToObjectFieldParentByPath, generatePath, getSchemaFormatFromSchema } from '../utils'; -import { DataVisualizationType, JsonSchema } from '../types'; +import type { DataVisualizationType, JsonSchema } from '../types'; import { useSchema } from '../providers/SchemaProvider'; import FieldBuilderView from './FieldBuilderView'; diff --git a/src/fields/JsonSchemaField.ts b/src/fields/JsonSchemaField.ts index 18f51dd..279e327 100644 --- a/src/fields/JsonSchemaField.ts +++ b/src/fields/JsonSchemaField.ts @@ -1,4 +1,4 @@ -import { JsonSchemaType, JsonSchema, SchemaAnnotation } from '../types'; +import type { JsonSchemaType, JsonSchema, SchemaAnnotation } from '../types'; import { SCHEMA_TYPE } from '../constants'; export class JsonSchemaField { diff --git a/src/index.ts b/src/index.ts new file mode 100644 index 0000000..9b62d4d --- /dev/null +++ b/src/index.ts @@ -0,0 +1,5 @@ +import SchemaBuilder from './components/SchemaBuilder'; +export default SchemaBuilder; + +export * from './types'; +export { useSchema, SchemaProvider } from './providers/SchemaProvider'; diff --git a/src/providers/SchemaProvider.tsx b/src/providers/SchemaProvider.tsx index 0119b26..9fef8d4 100644 --- a/src/providers/SchemaProvider.tsx +++ b/src/providers/SchemaProvider.tsx @@ -1,14 +1,9 @@ import React, { createContext, Dispatch, ReactNode, useContext, useReducer } from 'react'; import { JsonSchemaBuilder } from '../builder/JsonSchemaBuilder'; -import { FieldConfig, JsonSchema, TemplateType } from '../types'; +import type { FieldConfig, JsonSchema, SchemaAction, TemplateType } from '../types'; import { PROPERTIES } from '../constants'; import type { RJSFSchema } from '@rjsf/utils'; -export interface SchemaAction { - type: 'ADD_PROPERTY' | 'UPDATE_PROPERTY' | 'DELETE_PROPERTY' | 'ADD_REQUIRED' | 'DELETE_REQUIRED'; - payload: { name: string; schema?: JsonSchema; value?: never }; -} - export const SchemaContext = createContext<{ schema: JsonSchema; dispatch: Dispatch; diff --git a/src/test/JsonSchemaBuilder.test.ts b/src/test/JsonSchemaBuilder.test.ts index afb2314..7b2e8af 100644 --- a/src/test/JsonSchemaBuilder.test.ts +++ b/src/test/JsonSchemaBuilder.test.ts @@ -1,6 +1,6 @@ import { JsonSchemaBuilder } from '../builder/JsonSchemaBuilder'; import { SCHEMA_TYPE } from '../constants'; -import { Format, JsonSchema } from '../types'; +import type { Format, JsonSchema } from '../types'; describe('JsonSchemaBuilder', () => { let builder: JsonSchemaBuilder; diff --git a/src/types.ts b/src/types.ts index 507bdd6..630c7e6 100644 --- a/src/types.ts +++ b/src/types.ts @@ -73,3 +73,8 @@ export type DataVisualizationType = { name: string; path: string; }; + +export type SchemaAction = { + type: 'ADD_PROPERTY' | 'UPDATE_PROPERTY' | 'DELETE_PROPERTY' | 'ADD_REQUIRED' | 'DELETE_REQUIRED'; + payload: { name: string; schema?: JsonSchema; value?: never }; +}; diff --git a/src/utils/index.ts b/src/utils/index.ts index 57bf568..272a578 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -1,5 +1,5 @@ import { RJSFSchema } from '@rjsf/utils'; -import { DataVisualizationType } from '../types'; +import type { DataVisualizationType } from '../types'; import { SCHEMA_TYPE } from '../constants'; import React from 'react'; diff --git a/tsconfig.json b/tsconfig.json index d351120..4f06bd9 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -8,8 +8,7 @@ "skipLibCheck": true, "forceConsistentCasingInFileNames": true, "declaration": true, - "outDir": "./lib" + "outDir": "./dist", }, "include": ["src"] } - \ No newline at end of file From 7808fbea789cbcc253b39512590c288cec85ce4a Mon Sep 17 00:00:00 2001 From: Amirhossein Alibakhshi Date: Sun, 4 Aug 2024 18:58:44 +0330 Subject: [PATCH 7/7] fix: rename pakhage --- Readme.md | 2 +- package.json | 2 +- .../{SchemaBuilder.tsx => SchemaSaz.tsx} | 4 ++-- src/index.ts | 4 ++-- src/stories/SchemaBuilder.stories.tsx | 16 ++++++++-------- 5 files changed, 14 insertions(+), 14 deletions(-) rename src/components/{SchemaBuilder.tsx => SchemaSaz.tsx} (93%) diff --git a/Readme.md b/Readme.md index 2dfb002..9dc1ade 100644 --- a/Readme.md +++ b/Readme.md @@ -2,7 +2,7 @@ schema builder logo, a combination of S and B characters in a blue palette -[![npm](https://img.shields.io/npm/v/schemabuilder)](https://www.npmjs.com/package/schemaBuilder) +[![npm](https://img.shields.io/npm/v/schema-saz)](https://www.npmjs.com/package/schema-saz) # Schema Builder diff --git a/package.json b/package.json index 33f1059..e1de84b 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "schemabuilder", + "name": "schema-saz", "version": "0.0.0", "description": "A Simple User Interface for creating JSON Schema without writing JSON!", "main": "dist/index.js", diff --git a/src/components/SchemaBuilder.tsx b/src/components/SchemaSaz.tsx similarity index 93% rename from src/components/SchemaBuilder.tsx rename to src/components/SchemaSaz.tsx index 176f04d..b4d85cc 100644 --- a/src/components/SchemaBuilder.tsx +++ b/src/components/SchemaSaz.tsx @@ -14,7 +14,7 @@ type SchemaBuilderProps = { hideFormTab?: boolean; }; -const SchemaBuilder = ({ onChange, hideSchemaTab = false, hideFormTab = false }: SchemaBuilderProps) => { +const SchemaSaz = ({ onChange, hideSchemaTab = false, hideFormTab = false }: SchemaBuilderProps) => { const { schema } = useSchema(); const [highlightedSchema, setHighlightedSchema] = useState(''); const [tab, setTab] = useState(0); @@ -61,4 +61,4 @@ const SchemaBuilder = ({ onChange, hideSchemaTab = false, hideFormTab = false }: ); }; -export default SchemaBuilder; +export default SchemaSaz; diff --git a/src/index.ts b/src/index.ts index 9b62d4d..5c1fa2b 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,5 +1,5 @@ -import SchemaBuilder from './components/SchemaBuilder'; -export default SchemaBuilder; +import SchemaSaz from './components/SchemaSaz'; +export default SchemaSaz; export * from './types'; export { useSchema, SchemaProvider } from './providers/SchemaProvider'; diff --git a/src/stories/SchemaBuilder.stories.tsx b/src/stories/SchemaBuilder.stories.tsx index cf7759e..e6548ec 100644 --- a/src/stories/SchemaBuilder.stories.tsx +++ b/src/stories/SchemaBuilder.stories.tsx @@ -2,7 +2,7 @@ // @ts-nocheck import React, { useState } from 'react'; import { Meta, Story } from '@storybook/react'; -import SchemaBuilder from '../components/SchemaBuilder'; +import SchemaSaz from '../components/SchemaSaz'; import { STRING_WIDGETS } from '../constants'; import { SchemaProvider } from '../providers/SchemaProvider'; import { createTheme, ThemeProvider } from '@mui/material'; @@ -98,9 +98,9 @@ const sampleSchema: RJSFSchema = { additionalProperties: false, }; -const meta: Meta = { +const meta: Meta = { title: 'Schema Builder', - component: SchemaBuilder, + component: SchemaSaz, argTypes: { hideSchemaTab: { control: 'boolean', @@ -115,7 +115,7 @@ const meta: Meta = { const PrimitivesTemplate: Story = (args) => ( - + ); @@ -129,7 +129,7 @@ Formats.args = { const DefaultValueTemplate: Story = (args) => ( - + ); @@ -143,7 +143,7 @@ const ThemedTemplate: Story = (args) => { return ( - + ); @@ -196,7 +196,7 @@ const customTemplate = { const FaqTemplate: Story = (args) => ( - + ); export const CustomTemplate = FaqTemplate.bind({}); @@ -210,7 +210,7 @@ const ControlledTemplate: Story = (args) => { 
{JSON.stringify(schema, null, 2)}
- setSchema(updatedSchema)} {...args} /> + setSchema(updatedSchema)} {...args} /> );