-
Notifications
You must be signed in to change notification settings - Fork 108
feat: import snippets #308
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: core-beta
Are you sure you want to change the base?
Changes from all commits
c160afe
41c9ba3
5f67617
90f4f55
840d553
9b3c02e
30d897b
6a057c4
d7b01a2
c7e0e7c
5fe0328
56abcb5
900a0d8
5bff754
bd6633a
c6c200c
d46d38e
9c10716
038cd9c
8957440
048a978
943b28f
1eba64f
9378b56
094039c
cb3b1c5
9a82f55
1b5d37f
ce9fe10
6496b3d
f97ce32
f13294f
a65496c
617cd8a
5f54960
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
|
|
@@ -95,7 +95,7 @@ export const FileUploadForm: React.FC = () => { | |||||
|
|
||||||
| <ImportCard> | ||||||
| <h2 style={{ margin: '0 0 1em 0' }}>{__('Choose Files', 'code-snippets')}</h2> | ||||||
| <p className="description" style={{ marginBottom: '1em' }}> | ||||||
| <p className="description" style={{ marginBlockEnd: '1em' }}> | ||||||
| {__('Choose one or more Code Snippets (.xml or .json) files to parse and preview.', 'code-snippets')} | ||||||
| </p> | ||||||
|
|
||||||
|
|
@@ -133,20 +133,20 @@ export const FileUploadForm: React.FC = () => { | |||||
|
|
||||||
| {currentStep === 'select' && importWorkflow.availableSnippets.length > 0 && !importWorkflow.uploadResult?.success && ( | ||||||
| <ImportCard ref={selectSectionRef}> | ||||||
| <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '20px' }}> | ||||||
| <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBlockEnd: '20px' }}> | ||||||
| <Button onClick={handleBackToUpload} className="button-link"> | ||||||
| {__('← Upload Different Files', 'code-snippets')} | ||||||
| </Button> | ||||||
| </div> | ||||||
| <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px' }}> | ||||||
| <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBlockEnd: '10px' }}> | ||||||
| <div> | ||||||
| <h3 style={{ margin: '0' }}>{__('Available Snippets', 'code-snippets')} ({importWorkflow.availableSnippets.length})</h3> | ||||||
| <p style={{ margin: '0.5em 0 1em 0', color: '#666' }}> | ||||||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
| {__('Select the snippets you want to import:', 'code-snippets')} | ||||||
| </p> | ||||||
| </div> | ||||||
| <div> | ||||||
| <Button onClick={snippetSelection.handleSelectAll} style={{ marginRight: '10px' }}> | ||||||
| <Button onClick={snippetSelection.handleSelectAll} style={{ marginInlineEnd: '10px' }}> | ||||||
| {snippetSelection.isAllSelected | ||||||
| ? __('Deselect All', 'code-snippets') | ||||||
| : __('Select All', 'code-snippets') | ||||||
|
|
@@ -172,8 +172,8 @@ export const FileUploadForm: React.FC = () => { | |||||
| onSelectAll={snippetSelection.handleSelectAll} | ||||||
| /> | ||||||
|
|
||||||
| <div style={{ textAlign: 'end', marginTop: '1em' }}> | ||||||
| <Button onClick={snippetSelection.handleSelectAll} style={{ marginRight: '10px' }}> | ||||||
| <div style={{ textAlign: 'end', marginBlockStart: '1em' }}> | ||||||
| <Button onClick={snippetSelection.handleSelectAll} style={{ marginInlineEnd: '10px' }}> | ||||||
| {snippetSelection.isAllSelected | ||||||
| ? __('Deselect All', 'code-snippets') | ||||||
| : __('Select All', 'code-snippets') | ||||||
|
|
||||||
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
|
|
@@ -38,12 +38,12 @@ export const DragDropUploadArea: React.FC<DragDropUploadAreaProps> = ({ | |||||
| textAlign: 'center', | ||||||
| cursor: disabled ? 'not-allowed' : 'pointer', | ||||||
| backgroundColor: dragOver ? '#f0f6fc' : disabled ? '#f6f7f7' : '#fafafa', | ||||||
| marginBottom: '20px', | ||||||
| marginBlockEnd: '20px', | ||||||
| transition: 'all 0.3s ease', | ||||||
| opacity: disabled ? 0.6 : 1 | ||||||
| }} | ||||||
| > | ||||||
| <div style={{ fontSize: '48px', marginBottom: '10px', color: '#666' }}>📁</div> | ||||||
| <div style={{ fontSize: '48px', marginBlockEnd: '10px', color: '#666' }}>📁</div> | ||||||
| <p style={{ margin: '0 0 8px 0', fontSize: '16px', fontWeight: '500' }}> | ||||||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
| {__('Drag and drop files here, or click to browse', 'code-snippets')} | ||||||
| </p> | ||||||
|
|
||||||
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
|
|
@@ -16,7 +16,7 @@ export const DuplicateActionSelector: React.FC<DuplicateActionSelectorProps> = ( | |||||
| return ( | ||||||
| <ImportCard> | ||||||
| <h2 style={{ margin: '0 0 1em 0' }}>{__('Duplicate Snippets', 'code-snippets')}</h2> | ||||||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
| <p className="description" style={{ marginBottom: '1em' }}> | ||||||
| <p className="description" style={{ marginBlockEnd: '1em' }}> | ||||||
| {__('What should happen if an existing snippet is found with an identical name to an imported snippet?', 'code-snippets')} | ||||||
| </p> | ||||||
|
|
||||||
|
|
@@ -29,7 +29,7 @@ export const DuplicateActionSelector: React.FC<DuplicateActionSelectorProps> = ( | |||||
| value="ignore" | ||||||
| checked={value === 'ignore'} | ||||||
| onChange={(e) => onChange(e.target.value as DuplicateAction)} | ||||||
| style={{ marginTop: '2px' }} | ||||||
| style={{ marginBlockStart: '2px' }} | ||||||
| /> | ||||||
| <span> | ||||||
| {__('Ignore any duplicate snippets: import all snippets from the file regardless and leave all existing snippets unchanged.', 'code-snippets')} | ||||||
|
|
@@ -43,7 +43,7 @@ export const DuplicateActionSelector: React.FC<DuplicateActionSelectorProps> = ( | |||||
| value="replace" | ||||||
| checked={value === 'replace'} | ||||||
| onChange={(e) => onChange(e.target.value as DuplicateAction)} | ||||||
| style={{ marginTop: '2px' }} | ||||||
| style={{ marginBlockStart: '2px' }} | ||||||
| /> | ||||||
| <span> | ||||||
| {__('Replace any existing snippets with a newly imported snippet of the same name.', 'code-snippets')} | ||||||
|
|
@@ -57,7 +57,7 @@ export const DuplicateActionSelector: React.FC<DuplicateActionSelectorProps> = ( | |||||
| value="skip" | ||||||
| checked={value === 'skip'} | ||||||
| onChange={(e) => onChange(e.target.value as DuplicateAction)} | ||||||
| style={{ marginTop: '2px' }} | ||||||
| style={{ marginBlockStart: '2px' }} | ||||||
| /> | ||||||
| <span> | ||||||
| {__('Do not import any duplicate snippets; leave all existing snippets unchanged.', 'code-snippets')} | ||||||
|
|
||||||
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
|
|
@@ -26,7 +26,7 @@ export const ImportResultDisplay: React.FC<ImportResultDisplayProps> = ({ result | |||||
| alignItems: 'center', | ||||||
| justifyContent: 'center', | ||||||
| flexShrink: 0, | ||||||
| marginTop: '2px' | ||||||
| marginBlockStart: '2px' | ||||||
| }}> | ||||||
| <span style={{ color: 'white', fontSize: '14px', fontWeight: 'bold' }}> | ||||||
| {result.success ? '✓' : '✕'} | ||||||
|
|
@@ -54,11 +54,11 @@ export const ImportResultDisplay: React.FC<ImportResultDisplayProps> = ({ result | |||||
| )} | ||||||
|
|
||||||
| {result.warnings && result.warnings.length > 0 && ( | ||||||
| <div style={{ marginTop: '12px' }}> | ||||||
| <div style={{ marginBlockStart: '12px' }}> | ||||||
| <h4 style={{ margin: '0 0 8px 0', fontSize: '14px', color: '#d63638' }}> | ||||||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
| {__('Warnings:', 'code-snippets')} | ||||||
| </h4> | ||||||
| <ul style={{ margin: '0', paddingLeft: '20px' }}> | ||||||
| <ul style={{ margin: '0', paddingInlineStart: '20px' }}> | ||||||
| {result.warnings.map((warning, index) => ( | ||||||
| <li key={index} style={{ color: '#666', fontSize: '14px' }}> | ||||||
| {warning} | ||||||
|
|
||||||
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
|
|
@@ -12,7 +12,7 @@ export const SelectedFilesList: React.FC<SelectedFilesListProps> = ({ | |||||
| onRemoveFile | ||||||
| }) => { | ||||||
| return ( | ||||||
| <div className="selected-files" style={{ marginBottom: '20px' }}> | ||||||
| <div className="selected-files" style={{ marginBlockEnd: '20px' }}> | ||||||
| <h3 style={{ margin: '0 0 12px 0', fontSize: '14px', fontWeight: '600' }}> | ||||||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
| {__('Selected Files:', 'code-snippets')} ({files.length}) | ||||||
| </h3> | ||||||
|
|
||||||
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
|
|
@@ -106,7 +106,7 @@ export const ImportForm: React.FC = () => { | |||||
| snippetImport.importSuccess.length === 0 && ( | ||||||
| <ImportCard> | ||||||
| <div style={{ textAlign: 'center', padding: '40px 20px', color: '#666' }}> | ||||||
| <div style={{ fontSize: '48px', marginBottom: '16px' }}>📭</div> | ||||||
| <div style={{ fontSize: '48px', marginBlockEnd: '16px' }}>📭</div> | ||||||
| <h3 style={{ margin: '0 0 8px 0', fontSize: '18px', color: '#333' }}> | ||||||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
| {__('No snippets found', 'code-snippets')} | ||||||
| </h3> | ||||||
|
|
||||||
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
|
|
@@ -25,13 +25,13 @@ export const SimpleSnippetTable: React.FC<SimpleSnippetTableProps> = ({ | |||||
|
|
||||||
| return ( | ||||||
| <ImportCard className="snippets-table-container"> | ||||||
| <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px' }}> | ||||||
| <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBlockEnd: '10px' }}> | ||||||
| <div> | ||||||
| <h2 style={{ margin: '0' }}>{__('Available Snippets', 'code-snippets')} ({snippets.length})</h2> | ||||||
| <p style={{ margin: '0.5em 0 1em 0' }}>{__('We found the following snippets.', 'code-snippets')}</p> | ||||||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
| </div> | ||||||
| <div> | ||||||
| <Button onClick={onSelectAll} style={{ marginRight: '10px' }}> | ||||||
| <Button onClick={onSelectAll} style={{ marginInlineEnd: '10px' }}> | ||||||
| {isAllSelected | ||||||
| ? __('Deselect All', 'code-snippets') | ||||||
| : __('Select All', 'code-snippets') | ||||||
|
|
@@ -80,8 +80,8 @@ export const SimpleSnippetTable: React.FC<SimpleSnippetTableProps> = ({ | |||||
| </tbody> | ||||||
| </table> | ||||||
|
|
||||||
| <div style={{ textAlign: 'end', marginTop: '1em' }}> | ||||||
| <Button onClick={onSelectAll} style={{ marginRight: '10px' }}> | ||||||
| <div style={{ textAlign: 'end', marginBlockStart: '1em' }}> | ||||||
| <Button onClick={onSelectAll} style={{ marginInlineEnd: '10px' }}> | ||||||
| {isAllSelected | ||||||
| ? __('Deselect All', 'code-snippets') | ||||||
| : __('Select All', 'code-snippets') | ||||||
|
|
||||||
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
|
|
@@ -20,7 +20,7 @@ export const ImportCard = React.forwardRef<HTMLDivElement, ImportCardProps>(({ | |||||
| padding: '25px', | ||||||
| borderRadius: '5px', | ||||||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
| border: '1px solid #e0e0e0', | ||||||
| marginBottom: '10px', | ||||||
| marginBlockEnd: '10px', | ||||||
| width: '100%', | ||||||
| ...style | ||||||
| } | ||||||
|
|
||||||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.