optimized-react-component-library-xyz123 0.0.4 → 0.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.css CHANGED
@@ -599,6 +599,327 @@ textarea:focus-visible,
599
599
 
600
600
  /* src/NewInputComponentStandard/TextFieldStandard/TextFieldStandard.css */
601
601
 
602
+ /* src/NewInputComponentStandard/FilesUploadStandard/FilesUploadStandard.css */
603
+ .files-upload {
604
+ width: 100%;
605
+ max-width: 800px;
606
+ margin: 0 auto;
607
+ font-family:
608
+ "Segoe UI",
609
+ Tahoma,
610
+ Geneva,
611
+ Verdana,
612
+ sans-serif;
613
+ }
614
+ .files-drop-zone {
615
+ border: 2px dashed #ccc;
616
+ border-radius: 12px;
617
+ padding: 3rem 2rem;
618
+ text-align: center;
619
+ transition: all 0.3s ease;
620
+ background-color: #fafafa;
621
+ cursor: pointer;
622
+ position: relative;
623
+ overflow: hidden;
624
+ }
625
+ .files-drop-zone:hover {
626
+ border-color: #1ea7fd;
627
+ background-color: #f0f8ff;
628
+ transform: translateY(-2px);
629
+ box-shadow: 0 4px 12px rgba(30, 167, 253, 0.15);
630
+ }
631
+ .files-drop-zone.drag-active {
632
+ border-color: #1ea7fd;
633
+ background-color: #e6f7ff;
634
+ transform: scale(1.02);
635
+ box-shadow: 0 8px 25px rgba(30, 167, 253, 0.2);
636
+ }
637
+ .files-drop-content {
638
+ pointer-events: none;
639
+ }
640
+ .files-icon {
641
+ font-size: 4rem;
642
+ margin-bottom: 1rem;
643
+ opacity: 0.7;
644
+ animation: float 3s ease-in-out infinite;
645
+ }
646
+ @keyframes float {
647
+ 0%, 100% {
648
+ transform: translateY(0px);
649
+ }
650
+ 50% {
651
+ transform: translateY(-10px);
652
+ }
653
+ }
654
+ .files-drop-text {
655
+ font-size: 1.2rem;
656
+ margin-bottom: 0.5rem;
657
+ color: #333;
658
+ font-weight: 500;
659
+ }
660
+ .files-drop-info {
661
+ font-size: 0.9rem;
662
+ color: #666;
663
+ margin: 0;
664
+ }
665
+ .files-allowed-types {
666
+ font-size: 0.85rem;
667
+ color: #555;
668
+ margin: 0.75rem 0 0 0;
669
+ padding: 0.5rem;
670
+ background-color: rgba(30, 167, 253, 0.1);
671
+ border-radius: 6px;
672
+ border-left: 3px solid #1ea7fd;
673
+ }
674
+ .files-allowed-types strong {
675
+ color: #1ea7fd;
676
+ }
677
+ .files-input-hidden {
678
+ display: none;
679
+ }
680
+ .files-summary {
681
+ margin: 1.5rem 0;
682
+ padding: 1rem;
683
+ background-color: #f8f9fa;
684
+ border-radius: 8px;
685
+ border: 1px solid #e9ecef;
686
+ }
687
+ .files-summary-stats {
688
+ display: flex;
689
+ gap: 1rem;
690
+ margin-bottom: 1rem;
691
+ flex-wrap: wrap;
692
+ }
693
+ .stat {
694
+ padding: 0.5rem 1rem;
695
+ border-radius: 20px;
696
+ background-color: #e9ecef;
697
+ font-size: 0.9rem;
698
+ display: flex;
699
+ align-items: center;
700
+ gap: 0.5rem;
701
+ }
702
+ .stat.pending {
703
+ background-color: #fff3cd;
704
+ color: #856404;
705
+ }
706
+ .stat.completed {
707
+ background-color: #d1e7dd;
708
+ color: #0a3622;
709
+ }
710
+ .stat.error {
711
+ background-color: #f8d7da;
712
+ color: #721c24;
713
+ }
714
+ .files-summary-actions {
715
+ display: flex;
716
+ gap: 0.5rem;
717
+ flex-wrap: wrap;
718
+ }
719
+ .action-button {
720
+ padding: 0.75rem 1.5rem;
721
+ border: none;
722
+ border-radius: 6px;
723
+ cursor: pointer;
724
+ font-weight: 500;
725
+ transition: all 0.2s ease;
726
+ display: flex;
727
+ align-items: center;
728
+ gap: 0.5rem;
729
+ }
730
+ .action-button.primary {
731
+ background-color: #1ea7fd;
732
+ color: white;
733
+ }
734
+ .action-button.primary:hover {
735
+ background-color: #1890ff;
736
+ transform: translateY(-1px);
737
+ }
738
+ .action-button.secondary {
739
+ background-color: #6c757d;
740
+ color: white;
741
+ }
742
+ .action-button.secondary:hover {
743
+ background-color: #5a6268;
744
+ transform: translateY(-1px);
745
+ }
746
+ .files-list {
747
+ margin-top: 1.5rem;
748
+ }
749
+ .files-list h4 {
750
+ margin-bottom: 1rem;
751
+ color: #333;
752
+ font-size: 1.1rem;
753
+ font-weight: 600;
754
+ }
755
+ .files-items {
756
+ list-style: none;
757
+ padding: 0;
758
+ margin: 0;
759
+ }
760
+ .file-item {
761
+ display: flex;
762
+ align-items: center;
763
+ gap: 1rem;
764
+ padding: 1rem;
765
+ border: 1px solid #e9ecef;
766
+ border-radius: 8px;
767
+ margin-bottom: 0.75rem;
768
+ background-color: white;
769
+ transition: all 0.2s ease;
770
+ position: relative;
771
+ }
772
+ .file-item:hover {
773
+ background-color: #f8f9fa;
774
+ border-color: #dee2e6;
775
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
776
+ }
777
+ .file-item.uploading {
778
+ background-color: #e6f7ff;
779
+ border-color: #91d5ff;
780
+ }
781
+ .file-item.completed {
782
+ background-color: #f6ffed;
783
+ border-color: #b7eb8f;
784
+ }
785
+ .file-item.error {
786
+ background-color: #fff2f0;
787
+ border-color: #ffccc7;
788
+ }
789
+ .file-icon-status {
790
+ font-size: 1.5rem;
791
+ min-width: 2rem;
792
+ text-align: center;
793
+ }
794
+ .file-info {
795
+ flex: 1;
796
+ min-width: 0;
797
+ }
798
+ .file-name {
799
+ font-weight: 500;
800
+ color: #333;
801
+ margin-bottom: 0.5rem;
802
+ word-break: break-word;
803
+ }
804
+ .file-details {
805
+ display: flex;
806
+ gap: 1rem;
807
+ font-size: 0.85rem;
808
+ color: #666;
809
+ flex-wrap: wrap;
810
+ }
811
+ .file-size {
812
+ color: #666;
813
+ }
814
+ .file-status {
815
+ color: #1ea7fd;
816
+ font-weight: 500;
817
+ }
818
+ .file-error {
819
+ color: #dc3545;
820
+ font-weight: 500;
821
+ }
822
+ .progress-bar {
823
+ width: 100%;
824
+ height: 4px;
825
+ background-color: #e9ecef;
826
+ border-radius: 2px;
827
+ margin-top: 0.5rem;
828
+ overflow: hidden;
829
+ }
830
+ .progress-fill {
831
+ height: 100%;
832
+ background-color: #1ea7fd;
833
+ transition: width 0.3s ease;
834
+ border-radius: 2px;
835
+ }
836
+ .file-actions {
837
+ display: flex;
838
+ gap: 0.5rem;
839
+ }
840
+ .action-btn {
841
+ background: none;
842
+ border: 1px solid transparent;
843
+ padding: 0.5rem;
844
+ border-radius: 6px;
845
+ cursor: pointer;
846
+ font-size: 1rem;
847
+ transition: all 0.2s ease;
848
+ min-width: 2.5rem;
849
+ height: 2.5rem;
850
+ display: flex;
851
+ align-items: center;
852
+ justify-content: center;
853
+ }
854
+ .action-btn.upload {
855
+ color: #1ea7fd;
856
+ border-color: #1ea7fd;
857
+ }
858
+ .action-btn.upload:hover {
859
+ background-color: #1ea7fd;
860
+ color: white;
861
+ }
862
+ .action-btn.retry {
863
+ color: #fd7e14;
864
+ border-color: #fd7e14;
865
+ }
866
+ .action-btn.retry:hover {
867
+ background-color: #fd7e14;
868
+ color: white;
869
+ }
870
+ .action-btn.remove {
871
+ color: #dc3545;
872
+ border-color: #dc3545;
873
+ }
874
+ .action-btn.remove:hover {
875
+ background-color: #dc3545;
876
+ color: white;
877
+ }
878
+ @media (max-width: 768px) {
879
+ .files-drop-zone {
880
+ padding: 2rem 1rem;
881
+ }
882
+ .files-icon {
883
+ font-size: 3rem;
884
+ }
885
+ .files-drop-text {
886
+ font-size: 1rem;
887
+ }
888
+ .files-summary-stats {
889
+ flex-direction: column;
890
+ gap: 0.5rem;
891
+ }
892
+ .files-summary-actions {
893
+ flex-direction: column;
894
+ }
895
+ .action-button {
896
+ justify-content: center;
897
+ }
898
+ .file-item {
899
+ flex-direction: column;
900
+ align-items: flex-start;
901
+ gap: 0.75rem;
902
+ }
903
+ .file-details {
904
+ flex-direction: column;
905
+ gap: 0.25rem;
906
+ }
907
+ .file-actions {
908
+ align-self: flex-end;
909
+ }
910
+ }
911
+ @media (max-width: 480px) {
912
+ .files-upload {
913
+ padding: 0 0.5rem;
914
+ }
915
+ .files-drop-zone {
916
+ padding: 1.5rem 1rem;
917
+ }
918
+ .file-item {
919
+ padding: 0.75rem;
920
+ }
921
+ }
922
+
602
923
  /* src/NewTextComponentStandard/EditPreviewLinkStandard/EditPreviewLinkStandard.css */
603
924
 
604
925
  /* src/NewTextComponentStandard/FooterStandard/FooterStandard.css */
package/dist/index.d.mts CHANGED
@@ -1,4 +1,4 @@
1
- import { FC } from 'react';
1
+ import React, { FC } from 'react';
2
2
  import * as react_jsx_runtime from 'react/jsx-runtime';
3
3
 
4
4
  interface IApplicationContent {
@@ -59,7 +59,11 @@ interface IQuestion {
59
59
  previewLabel?: string;
60
60
  hideQuestion?: boolean;
61
61
  answer?: string;
62
- files?: Array<File>;
62
+ files?: Array<File | {
63
+ file: File;
64
+ dataURL: string;
65
+ id?: string;
66
+ }>;
63
67
  aboutText?: string;
64
68
  isQuestionMandatory?: boolean;
65
69
  questionType?: string;
@@ -134,6 +138,29 @@ interface TextFieldStandardProps {
134
138
 
135
139
  declare const TextFieldStandard: FC<TextFieldStandardProps>;
136
140
 
141
+ interface SelectedFile {
142
+ id: string;
143
+ file: File;
144
+ dataURL?: string;
145
+ }
146
+ interface FilesUploadStandardProps {
147
+ question: IQuestion;
148
+ isTouched: any;
149
+ visible?: boolean;
150
+ showPreview?: boolean;
151
+ activatedLanguage?: string;
152
+ allowedFileTypes?: Array<string>;
153
+ allowedNumberOfFiles?: number;
154
+ allowedTotalFileSize?: number;
155
+ onFilesAdded?: (files: SelectedFile[]) => void;
156
+ onFileRemoved?: (fileId: string) => void;
157
+ maxFileSize?: number;
158
+ allowDuplicates?: boolean;
159
+ multiple?: boolean;
160
+ }
161
+
162
+ declare const FilesUpload: React.FC<FilesUploadStandardProps>;
163
+
137
164
  declare const questionHasValidationError: (questionObject: any, arrayOfQuestionObjects: any[]) => boolean;
138
165
 
139
166
  interface TranslatedAnswers {
@@ -262,4 +289,4 @@ interface TextHeadlineAndBodyProps {
262
289
 
263
290
  declare const TextHeadlineAndBody: FC<TextHeadlineAndBodyProps>;
264
291
 
265
- export { CreateApiDataObject, doCategoriesAndQuestionsVisible as DoCategoriesAndQuestionsVisible, EditPreviewLink as EditPreviewLinkStandard, Footer as FooterStandard, groupQuestionByStepPreviewPage as GroupQuestionByStepPreviewPage, groupQuestionsByStepCategoryGroup as GroupQuestionsByStepCategoryGroup, Header as HeaderStandard, type IApplicationContent, type IFormState, type ILanguage, type ILanguageSupport, ILanguageSupportinitialState, type IOption, type IPTSLink, type IQuestion, type IQuestionExtraAttribute, type IStepObject, type IStepQuestionData, type ITextBlock, InfoOnly as InfoOnlyStandard, isDependsOnOtherQuestionTrue as IsDependsOnOtherQuestionTrue, Modal as ModalStandard, MultipleCheckboxes as MultipleCheckboxesStandard, PrincipleOfPublicity as PrincipleOfPublicityStandard, questionHasValidationError as QuestionHasValidationError, QuestioninitialState, InputRadio as RadioMultipleStandard, RenderQuestion, RenderQuestionGroup, ServiceHeadlineAndBody as ServiceHeadlineAndBodyStandard, SkipLink as SkipLinkStandard, StepperButtons as StepperButtonsStandard, Stepper as StepperStandard, InputTextarea as TextAreaStandard, TextFieldStandard, TextHeadlineAndBody as TextHeadlineAndBodyStandard, validationCheckAllVisibleQuestions as ValidationCheckAllVisibleQuestion };
292
+ export { CreateApiDataObject, doCategoriesAndQuestionsVisible as DoCategoriesAndQuestionsVisible, EditPreviewLink as EditPreviewLinkStandard, FilesUpload as FilesUploadStandard, Footer as FooterStandard, groupQuestionByStepPreviewPage as GroupQuestionByStepPreviewPage, groupQuestionsByStepCategoryGroup as GroupQuestionsByStepCategoryGroup, Header as HeaderStandard, type IApplicationContent, type IFormState, type ILanguage, type ILanguageSupport, ILanguageSupportinitialState, type IOption, type IPTSLink, type IQuestion, type IQuestionExtraAttribute, type IStepObject, type IStepQuestionData, type ITextBlock, InfoOnly as InfoOnlyStandard, isDependsOnOtherQuestionTrue as IsDependsOnOtherQuestionTrue, Modal as ModalStandard, MultipleCheckboxes as MultipleCheckboxesStandard, PrincipleOfPublicity as PrincipleOfPublicityStandard, questionHasValidationError as QuestionHasValidationError, QuestioninitialState, InputRadio as RadioMultipleStandard, RenderQuestion, RenderQuestionGroup, ServiceHeadlineAndBody as ServiceHeadlineAndBodyStandard, SkipLink as SkipLinkStandard, StepperButtons as StepperButtonsStandard, Stepper as StepperStandard, InputTextarea as TextAreaStandard, TextFieldStandard, TextHeadlineAndBody as TextHeadlineAndBodyStandard, validationCheckAllVisibleQuestions as ValidationCheckAllVisibleQuestion };
package/dist/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { FC } from 'react';
1
+ import React, { FC } from 'react';
2
2
  import * as react_jsx_runtime from 'react/jsx-runtime';
3
3
 
4
4
  interface IApplicationContent {
@@ -59,7 +59,11 @@ interface IQuestion {
59
59
  previewLabel?: string;
60
60
  hideQuestion?: boolean;
61
61
  answer?: string;
62
- files?: Array<File>;
62
+ files?: Array<File | {
63
+ file: File;
64
+ dataURL: string;
65
+ id?: string;
66
+ }>;
63
67
  aboutText?: string;
64
68
  isQuestionMandatory?: boolean;
65
69
  questionType?: string;
@@ -134,6 +138,29 @@ interface TextFieldStandardProps {
134
138
 
135
139
  declare const TextFieldStandard: FC<TextFieldStandardProps>;
136
140
 
141
+ interface SelectedFile {
142
+ id: string;
143
+ file: File;
144
+ dataURL?: string;
145
+ }
146
+ interface FilesUploadStandardProps {
147
+ question: IQuestion;
148
+ isTouched: any;
149
+ visible?: boolean;
150
+ showPreview?: boolean;
151
+ activatedLanguage?: string;
152
+ allowedFileTypes?: Array<string>;
153
+ allowedNumberOfFiles?: number;
154
+ allowedTotalFileSize?: number;
155
+ onFilesAdded?: (files: SelectedFile[]) => void;
156
+ onFileRemoved?: (fileId: string) => void;
157
+ maxFileSize?: number;
158
+ allowDuplicates?: boolean;
159
+ multiple?: boolean;
160
+ }
161
+
162
+ declare const FilesUpload: React.FC<FilesUploadStandardProps>;
163
+
137
164
  declare const questionHasValidationError: (questionObject: any, arrayOfQuestionObjects: any[]) => boolean;
138
165
 
139
166
  interface TranslatedAnswers {
@@ -262,4 +289,4 @@ interface TextHeadlineAndBodyProps {
262
289
 
263
290
  declare const TextHeadlineAndBody: FC<TextHeadlineAndBodyProps>;
264
291
 
265
- export { CreateApiDataObject, doCategoriesAndQuestionsVisible as DoCategoriesAndQuestionsVisible, EditPreviewLink as EditPreviewLinkStandard, Footer as FooterStandard, groupQuestionByStepPreviewPage as GroupQuestionByStepPreviewPage, groupQuestionsByStepCategoryGroup as GroupQuestionsByStepCategoryGroup, Header as HeaderStandard, type IApplicationContent, type IFormState, type ILanguage, type ILanguageSupport, ILanguageSupportinitialState, type IOption, type IPTSLink, type IQuestion, type IQuestionExtraAttribute, type IStepObject, type IStepQuestionData, type ITextBlock, InfoOnly as InfoOnlyStandard, isDependsOnOtherQuestionTrue as IsDependsOnOtherQuestionTrue, Modal as ModalStandard, MultipleCheckboxes as MultipleCheckboxesStandard, PrincipleOfPublicity as PrincipleOfPublicityStandard, questionHasValidationError as QuestionHasValidationError, QuestioninitialState, InputRadio as RadioMultipleStandard, RenderQuestion, RenderQuestionGroup, ServiceHeadlineAndBody as ServiceHeadlineAndBodyStandard, SkipLink as SkipLinkStandard, StepperButtons as StepperButtonsStandard, Stepper as StepperStandard, InputTextarea as TextAreaStandard, TextFieldStandard, TextHeadlineAndBody as TextHeadlineAndBodyStandard, validationCheckAllVisibleQuestions as ValidationCheckAllVisibleQuestion };
292
+ export { CreateApiDataObject, doCategoriesAndQuestionsVisible as DoCategoriesAndQuestionsVisible, EditPreviewLink as EditPreviewLinkStandard, FilesUpload as FilesUploadStandard, Footer as FooterStandard, groupQuestionByStepPreviewPage as GroupQuestionByStepPreviewPage, groupQuestionsByStepCategoryGroup as GroupQuestionsByStepCategoryGroup, Header as HeaderStandard, type IApplicationContent, type IFormState, type ILanguage, type ILanguageSupport, ILanguageSupportinitialState, type IOption, type IPTSLink, type IQuestion, type IQuestionExtraAttribute, type IStepObject, type IStepQuestionData, type ITextBlock, InfoOnly as InfoOnlyStandard, isDependsOnOtherQuestionTrue as IsDependsOnOtherQuestionTrue, Modal as ModalStandard, MultipleCheckboxes as MultipleCheckboxesStandard, PrincipleOfPublicity as PrincipleOfPublicityStandard, questionHasValidationError as QuestionHasValidationError, QuestioninitialState, InputRadio as RadioMultipleStandard, RenderQuestion, RenderQuestionGroup, ServiceHeadlineAndBody as ServiceHeadlineAndBodyStandard, SkipLink as SkipLinkStandard, StepperButtons as StepperButtonsStandard, Stepper as StepperStandard, InputTextarea as TextAreaStandard, TextFieldStandard, TextHeadlineAndBody as TextHeadlineAndBodyStandard, validationCheckAllVisibleQuestions as ValidationCheckAllVisibleQuestion };