- 
+ 
= {
const btnStylesOutline: UnionToObjectKeys = {
none: "",
primary: "text-primary-600",
- gray: 'text-gray-700',
+ gray: 'text-gray-600',
white: 'text-gray-900',
black: 'text-black',
red: "text-red-500",
@@ -48,7 +48,8 @@ const btnStylesOutline: UnionToObjectKeys = {
const baseBtnStyles: UnionToObjectKeys = {
fill: "transition-transform active:scale-95",
- outline: "transition-transform bg-gray-900 bg-opacity-0 hover:bg-opacity-5 active:bg-opacity-10 border border-gray-200 active:scale-95 "
+ outline: "transition-transform bg-gray-900 bg-opacity-0 hover:bg-opacity-5 active:bg-opacity-10 border border-gray-200 active:scale-95 ",
+ text: "transition-transform active:scale-95 hover:bg-gray-100 active:bg-gray-50"
}
@@ -88,7 +89,7 @@ const Button = React.forwardRef(({ color = 'white',
${variant === 'fill' ? btnStylesFill[color] : btnStylesOutline[color]}
${isLoading && disableOnLoading && 'bg-opacity-70 pointer-events-none'}
${fullWidth && 'w-full'}
- ${disabled && 'opacity-40 pointer-events-none'}
+ ${disabled && 'opacity-90 pointer-events-none'}
`;
diff --git a/src/Components/ErrorBoundary/ErrorBoundary.tsx b/src/Components/ErrorBoundary/ErrorBoundary.tsx
index 7fcfef3..6ddc18b 100644
--- a/src/Components/ErrorBoundary/ErrorBoundary.tsx
+++ b/src/Components/ErrorBoundary/ErrorBoundary.tsx
@@ -1,5 +1,5 @@
import React, { Component, ErrorInfo, ReactNode } from "react";
-import ErrorMessage from "../ErrorMessage/ErrorMessage";
+import ErrorMessage from "../Errors/ErrorMessage/ErrorMessage";
interface Props {
place?: string
diff --git a/src/Components/Errors/ErrorCard/ErrorCard.stories.tsx b/src/Components/Errors/ErrorCard/ErrorCard.stories.tsx
new file mode 100644
index 0000000..a73c3d2
--- /dev/null
+++ b/src/Components/Errors/ErrorCard/ErrorCard.stories.tsx
@@ -0,0 +1,21 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import ErrorCard from './ErrorCard';
+
+export default {
+ title: 'Shared/ErrorCard',
+ component: ErrorCard,
+
+} as ComponentMeta;
+
+const Template: ComponentStory = (args) =>
+
+
+ )
+}
diff --git a/src/Components/ErrorMessage/ErrorMessage.stories.tsx b/src/Components/Errors/ErrorMessage/ErrorMessage.stories.tsx
similarity index 100%
rename from src/Components/ErrorMessage/ErrorMessage.stories.tsx
rename to src/Components/Errors/ErrorMessage/ErrorMessage.stories.tsx
diff --git a/src/Components/ErrorMessage/ErrorMessage.tsx b/src/Components/Errors/ErrorMessage/ErrorMessage.tsx
similarity index 100%
rename from src/Components/ErrorMessage/ErrorMessage.tsx
rename to src/Components/Errors/ErrorMessage/ErrorMessage.tsx
diff --git a/src/Components/Errors/ErrorPage/ErrorPage.tsx b/src/Components/Errors/ErrorPage/ErrorPage.tsx
new file mode 100644
index 0000000..5357f4c
--- /dev/null
+++ b/src/Components/Errors/ErrorPage/ErrorPage.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { Helmet } from 'react-helmet'
+import { FallbackProps } from 'react-error-boundary'
+import ErrorCard from '../ErrorCard/ErrorCard'
+
+
+export default function ErrorPage({ error, resetErrorBoundary }: FallbackProps) {
+ return (
+ >(({
children,
onClick = () => { },
onKeyDown,
- variant = 'blank'
+ variant = 'blank',
+ isDisabled,
}, ref) => {
if (href)
@@ -57,12 +59,16 @@ const IconButton = React.forwardRef>(({
ref={ref}
type='button'
className={`
+ ${className}
${sizeToPadding[size]}
${baseBtnStyles[variant]}
- active:scale-95 rounded-full ${className}`}
+ active:scale-95 rounded-full
+ ${isDisabled && "opacity-60"}
+ `}
style={{ lineHeight: 0 }}
onClick={onClick}
onKeyDown={onKeyDown}
+ disabled={isDisabled}
>
{children}
diff --git a/src/Components/InfoCard/InfoCard.tsx b/src/Components/InfoCard/InfoCard.tsx
index 6e41f47..c14e977 100644
--- a/src/Components/InfoCard/InfoCard.tsx
+++ b/src/Components/InfoCard/InfoCard.tsx
@@ -1,12 +1,12 @@
import React, { PropsWithChildren } from 'react'
interface Props {
-
+ className?: string
}
export default function InfoCard(props: PropsWithChildren) {
return (
-
Turn your hackathon project into a startup
Schedule an office hour with Fulgur Ventures
diff --git a/src/Components/Button/Button.tsx b/src/Components/Button/Button.tsx index 8d4c378..81fa3c1 100644 --- a/src/Components/Button/Button.tsx +++ b/src/Components/Button/Button.tsx @@ -5,7 +5,7 @@ import { TailSpin } from 'react-loader-spinner'; type Props = { color?: 'primary' | 'red' | 'white' | 'gray' | "black" | 'none', - variant?: 'fill' | 'outline' + variant?: 'fill' | 'outline' | 'text' size?: 'sm' | 'md' | 'lg' children: ReactNode; href?: string; @@ -40,7 +40,7 @@ const loadingColor: UnionToObjectKeys
+
+ Ooops...
Looks like something unexpected went wrong, please check your internet connection & try again.
+
+
+
+
+
+
+
+ {showDetails &&
+
+
+
+ }
+ {error.name}
+{error.message}
+{error.stack}
+
+
+ {`Something went wrong...`}
+
+
+ )
+}
diff --git a/src/Components/IconButton/IconButton.tsx b/src/Components/IconButton/IconButton.tsx
index 407052e..7a3ea33 100644
--- a/src/Components/IconButton/IconButton.tsx
+++ b/src/Components/IconButton/IconButton.tsx
@@ -9,6 +9,7 @@ interface Props {
className?: string
size?: "sm" | 'md' | 'lg'
variant?: 'blank' | 'fill'
+ isDisabled?: boolean
}
@@ -32,7 +33,8 @@ const IconButton = React.forwardRef
+
+
+
;
-
-const options = [
- {
- "id": "20f0eb8d-c0cd-4e12-8a08-0d9846fc8704",
- "name": "Nichole Bailey",
- "username": "Cassie14",
- "email": "Daisy_Auer50@hotmail.com",
- "address": {
- "street": "Anastasia Tunnel",
- "suite": 95587,
- "city": "Port Casperview",
- "zipcode": "04167-6996",
- "geo": {
- "lat": "-73.4727",
- "lng": "-142.9435"
- }
- },
- "phone": "324-615-9195 x5902",
- "website": "ron.net",
- "company": {
- "name": "Roberts, Tremblay and Christiansen",
- "catchPhrase": "Vision-oriented actuating access",
- "bs": "bricks-and-clicks strategize portals"
- }
- },
- {
- "id": "62b70f76-85ba-4241-9ffd-07582008c497",
- "name": "Robert Blick",
- "username": "Madilyn93",
- "email": "Ronaldo82@gmail.com",
- "address": {
- "street": "Charlie Plain",
- "suite": 83070,
- "city": "Lake Bonitaland",
- "zipcode": "01109",
- "geo": {
- "lat": "50.0971",
- "lng": "-2.3057"
- }
- },
- "phone": "1-541-367-2047 x9006",
- "website": "jovani.com",
- "company": {
- "name": "Parisian - Kling",
- "catchPhrase": "Multi-tiered tertiary toolset",
- "bs": "plug-and-play benchmark content"
- }
- },
- {
- "id": "d02f74d9-bf99-4e41-b678-15e903abc1b3",
- "name": "Eli O'Kon",
- "username": "Rosario.Davis",
- "email": "Mckayla59@hotmail.com",
- "address": {
- "street": "Wilford Drive",
- "suite": 69742,
- "city": "North Dianna",
- "zipcode": "80620",
- "geo": {
- "lat": "-61.4191",
- "lng": "126.7878"
- }
- },
- "phone": "(339) 709-4080",
- "website": "clay.name",
- "company": {
- "name": "Gerlach - Metz",
- "catchPhrase": "Pre-emptive user-facing service-desk",
- "bs": "frictionless monetize markets"
- }
- },
- {
- "id": "21077fa6-6a53-4b84-8407-6cd949718945",
- "name": "Marilie Feil",
- "username": "Antwon.Carter92",
- "email": "Demario.Hyatt20@yahoo.com",
- "address": {
- "street": "Kenton Spurs",
- "suite": 20079,
- "city": "Beahanberg",
- "zipcode": "79385",
- "geo": {
- "lat": "-70.7199",
- "lng": "4.6977"
- }
- },
- "phone": "608.750.4947",
- "website": "jacynthe.org",
- "company": {
- "name": "Kuhn and Sons",
- "catchPhrase": "Total eco-centric matrices",
- "bs": "out-of-the-box target communities"
- }
- },
- {
- "id": "e07cf1b4-ff43-4c4a-a670-fd7417d6bbaf",
- "name": "Ella Pagac",
- "username": "Damien.Jaskolski",
- "email": "Delmer1@gmail.com",
- "address": {
- "street": "VonRueden Shoals",
- "suite": 14035,
- "city": "Starkmouth",
- "zipcode": "72448-1915",
- "geo": {
- "lat": "55.2157",
- "lng": "98.0822"
- }
- },
- "phone": "(165) 247-5332 x71067",
- "website": "chad.info",
- "company": {
- "name": "Nicolas, Doyle and Rempel",
- "catchPhrase": "Adaptive real-time strategy",
- "bs": "innovative whiteboard supply-chains"
- }
- }
-]
-const Template: ComponentStory = (args) => {
-
- const value = useWatch({ name: 'autocomplete' })
-
- console.log(value);
-
-
- return = {
- options: T[];
- labelField?: keyof T
- valueField?: keyof T
- placeholder?: string
- disabled?: boolean
- isLoading?: boolean;
- isClearable?: boolean;
- control?: any,
- name?: string,
- className?: string,
- onBlur?: () => void;
- size?: 'sm' | 'md' | 'lg'
-} & ControlledStateHandler
-
-
-
-
-export default function AutoComplete({
- options,
- labelField,
- valueField,
- placeholder = "Select Option...",
- isMulti,
- isClearable,
- disabled,
- className,
- value,
- onChange,
- onBlur,
- size = 'md',
- ...props
-}: Props) {
-
-
- const colourStyles: StylesConfig = useMemo(() => ({
- control: (styles, state) => ({
- ...styles,
- padding: size === 'md' ? '1px 4px' : '8px 12px',
- borderRadius: size === 'md' ? 8 : 12,
- }),
- indicatorSeparator: (styles, state) => ({
- ...styles,
- display: "none"
- }),
- input: (styles, state) => ({
- ...styles,
- " input": {
- boxShadow: 'none !important'
- },
- }),
- }), [size])
-
- return (
- ;
-
-const Template: ComponentStory = (args) => = (args) =>
-}
-
-function processFile(file: Props['file']): ThumbnailFile {
-
- const fileType = getFileType(file);
-
- if (typeof file === 'string') return { name: file, src: file, type: fileType };
-
- return {
- name: file.name,
- src: URL.createObjectURL(file),
- type: fileType
- };
-
-}
-
-
-export default function FileThumbnail({ file: f, onRemove }: Props) {
-
- const file = useMemo(() => processFile(f), [f])
-
- return (
- = {
- images: ".png, .jpg, .jpeg"
-} as const;
-
-const fileUrlToObject = async (url: string, fileName: string = 'filename') => {
- const res = await fetch(url);
- const contentType = res.headers.get('content-type') as string;
- const blob = await res.blob()
- const file = new File([blob], fileName, { contentType } as any)
- return file
-}
-
-export default function FilesInput({
- height = 200,
- multiple,
- value,
- max = 3,
- onBlur,
- onChange,
- allowedType = 'images',
- classes,
- ...props
-}: Props) {
-
-
- const baseClasses = classes?.base ?? 'p-32 rounded-8 text-center flex flex-col justify-center items-center'
- const idleClasses = classes?.idle ?? 'bg-primary-50 hover:bg-primary-25 border border-dashed border-primary-500 text-gray-800'
- const draggingClasses = classes?.dragging ?? 'bg-primary-500 text-white'
-
- return (
- = {
- images: ".png, .jpg, .jpeg"
-} as const;
-
-const fileUrlToObject = async (url: string, fileName: string = 'filename') => {
- const res = await fetch(url);
- const contentType = res.headers.get('content-type') as string;
- const blob = await res.blob()
- const file = new File([blob], fileName, { contentType } as any)
- return file
-}
-
-const INSERT_IMAGE_ACTION = createAction<{ src: string, alt?: string }>('COVER_IMAGE_INSERTED')({ src: '', alt: "" })
-
-const FilesInput = React.forwardRef(({
- multiple,
- value,
- max = 3,
- onBlur,
- onChange,
- allowedType = 'images',
- uploadText = 'Upload files',
- ...props
-}, ref) => {
-
-
- const dispatch = useAppDispatch();
-
- const handleClick = () => {
- // ref.current.click();
- dispatch(openModal({
- Modal: "InsertImageModal",
- props: {
- callbackAction: {
- type: INSERT_IMAGE_ACTION.type,
- payload: {
- src: "",
- alt: ""
- }
- }
- }
- }))
- }
-
- const onInsertImgUrl = useCallback(({ payload: { src, alt } }: typeof INSERT_IMAGE_ACTION) => {
- if (typeof value === 'string')
- onChange?.([value, src]);
- else
- onChange?.([...(value ?? []), src]);
- }, [onChange, value])
-
- useReduxEffect(onInsertImgUrl, INSERT_IMAGE_ACTION.type)
-
- const handleChange = (e: ChangeEvent) => {
- const files = e.target.files && Array.from(e.target.files).slice(0, max);
- if (typeof value === 'string')
- onChange?.([value, ...(files ?? [])]);
- else
- onChange?.([...(value ?? []), ...(files ?? [])]);
- }
-
- const handleRemove = async (idx: number) => {
- if (!value) return onChange?.([]);
- if (typeof value === 'string')
- onChange?.([]);
- else {
- let files = [...value]
- files.splice(idx, 1);
-
- //change all files urls to file objects
- const filesConverted = await Promise.all(files.map(async file => {
- if (typeof file === 'string') return await fileUrlToObject(file, "")
- else return file;
- }))
-
- onChange?.(filesConverted);
- }
- }
-
- const canUploadMore = multiple ?
- !value || (value && value.length < max)
- :
- !value || value.length === 0
-
-
- const uploadBtn = props.uploadBtn ?
- React.cloneElement(props.uploadBtn, { onClick: handleClick })
- :
-
-
- return (
- <>
- ;
+
+const Template: ComponentStory = (args, context) => {
+
+ return ['value']
+
+interface Props {
+ width?: number;
+ isRemovable?: boolean
+ value: Value;
+ onChange: (new_value: Nullable) => void
+}
+
+export default function AvatarInput(props: Props) {
+
+ const dropAreaRef = useRef(null!)
+ const isDragging = useIsDraggingOnElement({ ref: dropAreaRef });
+
+ return (
+ ;
+
+const Template: ComponentStory = (args, context) => {
+
+ return ['value']
+
+interface Props {
+ value: Value;
+ rounded?: string;
+ onChange: (new_value: Nullable) => void
+}
+
+export default function CoverImageInput(props: Props) {
+
+ const dropAreaRef = useRef(null!)
+ const isDragging = useIsDraggingOnElement({ ref: dropAreaRef });
+
+
+ return (
+ ;
+
+const Template: ComponentStory = (args) => ((props, ref) => {
+ const { onClick, ...buttonProps } = props;
+
+ useRequestPreSend(async (data) => {
+
+ const filename = data.items?.[0].file.name ?? ''
+
+ const url = await fetchUploadUrl({ filename });
+ return {
+ options: {
+ destination: {
+ url
+ }
+ }
+ }
+ })
+
+ const onZoneClick = useCallback(
+ (e: any) => {
+ if (onClick) {
+ onClick(e);
+ }
+ },
+ [onClick]
+ );
+
+ return
+
+ Drop it to upload
+
+})
+
+const DropZoneButton = asUploadButton(DropZone);
+
+
+export default function FileUploadInput(props: Props) {
+ return (
+ {
+ const { id, filename, variants } = item?.uploadResponse?.data?.result ?? {}
+ if (id) {
+ console.log(id, filename, variants);
+ }
+ }
+ }}
+ >
+
+ )
+}
diff --git a/src/Components/Inputs/FilesInputs/FileUploadInput/ImagePreviews.tsx b/src/Components/Inputs/FilesInputs/FileUploadInput/ImagePreviews.tsx
new file mode 100644
index 0000000..e28b375
--- /dev/null
+++ b/src/Components/Inputs/FilesInputs/FileUploadInput/ImagePreviews.tsx
@@ -0,0 +1,92 @@
+import UploadPreview, { PreviewComponentProps, PreviewMethods } from '@rpldy/upload-preview'
+import { useAbortItem, useItemAbortListener, useItemCancelListener, useItemErrorListener, useItemProgressListener } from '@rpldy/uploady';
+import React, { useState } from 'react'
+import { RotatingLines } from 'react-loader-spinner';
+
+export default function ImagePreviews() {
+ return (
+ (0);
+ const [itemState, setItemState] = useState(STATES.PROGRESS);
+
+
+ useItemProgressListener(item => {
+ if (item.completed > progress) {
+ setProgress(() => item.completed);
+
+ if (item.completed === 100) {
+ setItemState(STATES.DONE)
+ } else {
+ setItemState(STATES.PROGRESS)
+ }
+ }
+ }, id);
+
+
+
+ useItemAbortListener(item => {
+ setItemState(STATES.CANCELLED);
+ }, id);
+
+
+ useItemCancelListener(item => {
+ setItemState(STATES.CANCELLED);
+ }, id);
+
+ useItemErrorListener(item => {
+ setItemState(STATES.ERROR);
+ }, id);
+
+ return (0);
+ const [itemState, setItemState] = useState(STATES.PROGRESS);
+
+ const abortItem = useAbortItem();
+
+
+ useItemProgressListener(item => {
+ if (item.completed > progress) {
+ setProgress(() => item.completed);
+
+ if (item.completed === 100) {
+ setItemState(STATES.DONE)
+ } else {
+ setItemState(STATES.PROGRESS)
+ }
+ }
+ }, id);
+
+
+
+ useItemAbortListener(item => {
+ setItemState(STATES.CANCELLED);
+ }, id);
+
+
+ useItemCancelListener(item => {
+ setItemState(STATES.CANCELLED);
+ }, id);
+
+ useItemErrorListener(item => {
+ setItemState(STATES.ERROR);
+ }, id);
+
+ if (itemState === STATES.DONE || itemState === STATES.CANCELLED)
+ return null
+
+ return {
+ abortItem(id)
+ }}
+ />
+
+ // return }>({
+ logValues: true,
+ name: "screenshots",
+ defaultValues: {
+ screenshots: []
+ }
+ })]
+} as ComponentMeta;
+
+const Template: ComponentStory = (args, context) => {
+
+ return }>({
+ logValues: true,
+ name: "screenshots",
+ defaultValues: {
+ screenshots: [{
+ id: '123',
+ name: 'tree',
+ url: "https://picsum.photos/id/1021/800/800.jpg"
+ },
+ {
+ id: '555',
+ name: 'whatever',
+ url: "https://picsum.photos/id/600/800/800.jpg"
+ },]
+ }
+ }) as any
+];
+WithValues.args = {
+}
+
+export const Full = Template.bind({});
+Full.decorators = [
+ WrapFormController<{ screenshots: Array }>({
+ logValues: true,
+ name: "screenshots",
+ defaultValues: {
+ screenshots: [
+ {
+ id: '123',
+ name: 'tree',
+ url: "https://picsum.photos/id/1021/800/800.jpg"
+ },
+ {
+ id: '555',
+ name: 'whatever',
+ url: "https://picsum.photos/id/600/800/800.jpg"
+ },
+ {
+ id: '562',
+ name: 'Moon',
+ url: "https://picsum.photos/id/32/800/800.jpg"
+ },
+ {
+ id: '342',
+ name: 'Sun',
+ url: "https://picsum.photos/id/523/800/800.jpg"
+ },
+ ]
+ }
+ }) as any
+];
+Full.args = {
+}
\ No newline at end of file
diff --git a/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotsInput.tsx b/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotsInput.tsx
new file mode 100644
index 0000000..b5bf6c0
--- /dev/null
+++ b/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotsInput.tsx
@@ -0,0 +1,151 @@
+import Uploady, { useRequestPreSend, UPLOADER_EVENTS } from "@rpldy/uploady";
+import { asUploadButton } from "@rpldy/upload-button";
+// import { fetchUploadUrl } from "./fetch-upload-img-url";
+import ImagePreviews from "./ImagePreviews";
+import UploadDropZone from "@rpldy/upload-drop-zone";
+import { forwardRef, useCallback, useState } from "react";
+import styles from './styles.module.scss'
+import { AiOutlineCloudUpload } from "react-icons/ai";
+import { motion } from "framer-motion";
+import { getMockSenderEnhancer } from "@rpldy/mock-sender";
+import ScreenshotThumbnail from "./ScreenshotThumbnail";
+import { FiCamera } from "react-icons/fi";
+import { Control, Path, useController } from "react-hook-form";
+
+
+
+const mockSenderEnhancer = getMockSenderEnhancer({
+ delay: 1500,
+});
+
+const MAX_UPLOAD_COUNT = 4 as const;
+
+export interface ScreenshotType {
+ id: string,
+ name: string,
+ url: string;
+}
+
+interface Props {
+ value: ScreenshotType[],
+ onChange: (new_value: ScreenshotType[]) => void
+}
+
+
+export default function ScreenshotsInput(props: Props) {
+
+ const { value: uploadedFiles, onChange } = props;
+
+
+ const [uploadingCount, setUploadingCount] = useState(0)
+
+
+ const canUploadMore = uploadingCount + uploadedFiles.length < MAX_UPLOAD_COUNT;
+ const placeholdersCount = (MAX_UPLOAD_COUNT - (uploadingCount + uploadedFiles.length + 1));
+
+
+ return (
+ {
+ setUploadingCount(v => v + batch.items.length)
+ },
+ [UPLOADER_EVENTS.ITEM_FINALIZE]: () => setUploadingCount(v => v - 1),
+ [UPLOADER_EVENTS.ITEM_FINISH]: (item) => {
+
+ // Just for mocking purposes
+ const dataUrl = URL.createObjectURL(item.file);
+
+ const { id, filename, variants } = item?.uploadResponse?.data?.result ?? {
+ id: Math.random().toString(),
+ filename: item.file.name,
+ variants: [
+ "",
+ dataUrl
+ ]
+ }
+ if (id) {
+ onChange([...uploadedFiles, { id, name: filename, url: variants[1] }].slice(-MAX_UPLOAD_COUNT))
+ }
+ }
+ }}
+ >
+
+
+ )
+}
+
+const DropZone = forwardRef((props, ref) => {
+ const { onClick, ...buttonProps } = props;
+
+
+ useRequestPreSend(async (data) => {
+
+ const filename = data.items?.[0].file.name ?? ''
+
+ // const url = await fetchUploadUrl({ filename });
+ return {
+ options: {
+ destination: {
+ url: "URL"
+ }
+ }
+ }
+ })
+
+ const onZoneClick = useCallback(
+ (e: any) => {
+ if (onClick) {
+ onClick(e);
+ }
+ },
+ [onClick]
+ );
+
+ return
+
+ Drop to upload
+
+})
+
+const DropZoneButton = asUploadButton(DropZone);
diff --git a/src/Components/Inputs/FilesInputs/ScreenshotsInput/styles.module.scss b/src/Components/Inputs/FilesInputs/ScreenshotsInput/styles.module.scss
new file mode 100644
index 0000000..217ca39
--- /dev/null
+++ b/src/Components/Inputs/FilesInputs/ScreenshotsInput/styles.module.scss
@@ -0,0 +1,25 @@
+.zone {
+ background-color: #f2f4f7;
+ border-color: #e4e7ec;
+
+ .active_content {
+ display: none;
+ }
+
+ .idle_content {
+ display: block;
+ }
+
+ &.active {
+ background-color: #b3a0ff;
+ border-color: #9e88ff;
+
+ .active_content {
+ display: block;
+ }
+
+ .idle_content {
+ display: none;
+ }
+ }
+}
diff --git a/src/Components/Inputs/FilesInputs/SingleImageUploadInput/ImagePreviews.tsx b/src/Components/Inputs/FilesInputs/SingleImageUploadInput/ImagePreviews.tsx
new file mode 100644
index 0000000..74d4d64
--- /dev/null
+++ b/src/Components/Inputs/FilesInputs/SingleImageUploadInput/ImagePreviews.tsx
@@ -0,0 +1,97 @@
+import UploadPreview, { PreviewComponentProps, PreviewMethods } from '@rpldy/upload-preview'
+import { useAbortItem, useItemAbortListener, useItemCancelListener, useItemErrorListener, useItemProgressListener } from '@rpldy/uploady';
+import { useState } from 'react'
+import ScreenShotsThumbnail from './ScreenshotThumbnail'
+
+export default function ImagePreviews() {
+ return (
+ (0);
+ const [itemState, setItemState] = useState(STATES.PROGRESS);
+
+ const abortItem = useAbortItem();
+
+
+ useItemProgressListener(item => {
+ if (item.completed > progress) {
+ setProgress(() => item.completed);
+
+ if (item.completed === 100) {
+ setItemState(STATES.DONE)
+ } else {
+ setItemState(STATES.PROGRESS)
+ }
+ }
+ }, id);
+
+
+
+ useItemAbortListener(item => {
+ setItemState(STATES.CANCELLED);
+ }, id);
+
+
+ useItemCancelListener(item => {
+ setItemState(STATES.CANCELLED);
+ }, id);
+
+ useItemErrorListener(item => {
+ setItemState(STATES.ERROR);
+ }, id);
+
+ if (itemState === STATES.DONE || itemState === STATES.CANCELLED)
+ return null
+
+ return {
+ abortItem(id)
+ }}
+ />
+
+ // return ;
+
+const Template: ComponentStory = (args, context) => {
+
+ return (null)
+
+
+ return (
+ {
+ onChange(null)
+
+ setCurrentlyUploadingItem({
+ id: item.id,
+ url: URL.createObjectURL(item.file),
+ name: item.file.name,
+ })
+ },
+ [UPLOADER_EVENTS.ITEM_ERROR]: (item) => {
+ NotificationsService.error("An error happened while uploading. Please try again.")
+ },
+ [UPLOADER_EVENTS.ITEM_FINALIZE]: () => setCurrentlyUploadingItem(null),
+ [UPLOADER_EVENTS.ITEM_FINISH]: (item) => {
+
+ const { id, filename, variants } = item?.uploadResponse?.data?.result;
+ const url = (variants as string[]).find(v => v.includes('public'));
+
+ if (id && url) {
+ onChange({ id, name: filename, url, })
+ }
+ }
+ }}
+ >
+
+ )
+}
+
+
+const DropZone = forwardRef((props, ref) => {
+ const { onClick, children, renderProps, ...buttonProps } = props;
+
+ const isDraggingOnWindow = useIsDraggingOnElement()
+
+ useRequestPreSend(async (data) => {
+
+ const filename = data.items?.[0].file.name ?? ''
+
+ const res = await fetchUploadImageUrl({ filename });
+
+ return {
+ options: {
+ destination: {
+ url: res.uploadURL
+ },
+ }
+ }
+ })
+
+ const onZoneClick = useCallback(
+ (e: any) => {
+ if (onClick) {
+ onClick(e);
+ }
+ },
+ [onClick]
+ );
+
+ return
+
+ {renderProps.render({
+ img: renderProps.img,
+ isUploading: renderProps.isUploading,
+ isDraggingOnWindow,
+ })}
+
+})
+
+const DropZoneButton = asUploadButton(DropZone);
diff --git a/src/Components/Inputs/FilesInputs/SingleImageUploadInput/styles.module.scss b/src/Components/Inputs/FilesInputs/SingleImageUploadInput/styles.module.scss
new file mode 100644
index 0000000..217ca39
--- /dev/null
+++ b/src/Components/Inputs/FilesInputs/SingleImageUploadInput/styles.module.scss
@@ -0,0 +1,25 @@
+.zone {
+ background-color: #f2f4f7;
+ border-color: #e4e7ec;
+
+ .active_content {
+ display: none;
+ }
+
+ .idle_content {
+ display: block;
+ }
+
+ &.active {
+ background-color: #b3a0ff;
+ border-color: #9e88ff;
+
+ .active_content {
+ display: block;
+ }
+
+ .idle_content {
+ display: none;
+ }
+ }
+}
diff --git a/src/Components/Inputs/FilesInputs/ThumbnailInput/ThumbnailInput.stories.tsx b/src/Components/Inputs/FilesInputs/ThumbnailInput/ThumbnailInput.stories.tsx
new file mode 100644
index 0000000..a7ad6b3
--- /dev/null
+++ b/src/Components/Inputs/FilesInputs/ThumbnailInput/ThumbnailInput.stories.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import ThumbnailInput from './ThumbnailInput';
+import { WrapFormController } from 'src/utils/storybook/decorators';
+import { ImageType } from '../SingleImageUploadInput/SingleImageUploadInput';
+
+export default {
+ title: 'Shared/Inputs/Files Inputs/Thumbnail ',
+ component: ThumbnailInput,
+ decorators: [
+ WrapFormController<{ thumbnail: ImageType | null }>({
+ logValues: true,
+ name: "thumbnail",
+ defaultValues: {
+ thumbnail: null
+ }
+ })]
+} as ComponentMeta;
+
+const Template: ComponentStory = (args, context) => {
+
+ return ['value']
+
+interface Props {
+ width?: number
+ value: Value;
+ onChange: (new_value: Nullable) => void
+}
+
+export default function ThumbnailInput(props: Props) {
+ return (
+ ;
+
+const Template: ComponentStory = (args) => , IsMulti extends boolean = boolean> = {
+ options: T[];
+ labelField: keyof T
+ valueField: keyof T
+ placeholder?: string
+ disabled?: boolean
+ isLoading?: boolean;
+ isClearable?: boolean;
+ control?: any,
+ name?: string,
+ className?: string,
+ renderOption?: (option: OptionProps) => JSX.Element
+} & ControlledStateHandler
+
+
+
+
+
+
+export const selectCustomStyle: StylesConfig = ({
+ control: (styles, state) => ({
+ ...styles,
+ padding: '5px 12px',
+ borderRadius: 12,
+ // border: 'none',
+ // boxShadow: 'none',
+
+ ":hover": {
+ cursor: "pointer"
+ },
+ ":focus-within": {
+ '--tw-border-opacity': '1',
+ borderColor: 'rgb(179 160 255 / var(--tw-border-opacity))',
+ outlineColor: '#9E88FF',
+ '--tw-ring-offset-shadow': 'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)',
+ '--tw-ring-shadow': 'var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)',
+ boxShadow: 'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)',
+ '--tw-ring-color': 'rgb(179 160 255 / var(--tw-ring-opacity))',
+ '--tw-ring-opacity': '0.5'
+ }
+ }),
+ indicatorSeparator: (styles, state) => ({
+ ...styles,
+ display: "none"
+ }),
+ input: (styles, state) => ({
+ ...styles,
+ " input": {
+ boxShadow: 'none !important'
+ },
+ }),
+ menu: (styles, state) => ({
+ ...styles,
+ padding: 8,
+ borderRadius: "16px !important"
+ }),
+})
+
+
+
+export default function BasicSelectInput, IsMulti extends boolean>({
+ options,
+ labelField,
+ valueField,
+ placeholder = "Select Option...",
+ isMulti,
+ isClearable,
+ disabled,
+ className,
+ value,
+ onChange,
+ onBlur,
+ renderOption,
+ ...props
+}: Props) {
+
+
+
+
+ return (
+ >(renderOption: Props['renderOption'], labelField: Props['labelField']) {
+ const _render = renderOption ?? ((option) => ) {
+ return (
+
+ {_render(props)}
+
+ );
+ };
+}
\ No newline at end of file
diff --git a/src/Components/Inputs/TagsInput/TagsInput.tsx b/src/Components/Inputs/TagsInput/TagsInput.tsx
index f36cd0b..26bbfa6 100644
--- a/src/Components/Inputs/TagsInput/TagsInput.tsx
+++ b/src/Components/Inputs/TagsInput/TagsInput.tsx
@@ -13,7 +13,9 @@ interface Option {
readonly description: string | null
}
+
type Tag = Omit
+type Value = { title: Tag['title'] }
interface Props {
classes?: {
@@ -22,11 +24,80 @@ interface Props {
}
placeholder?: string
max?: number;
+ value: Value[];
+ onChange?: (new_value: Value[]) => void;
+ onBlur?: () => void;
[k: string]: any
}
+
+export default function TagsInput({
+ classes,
+ placeholder = 'Write some tags',
+ max = 5,
+ value,
+ onChange,
+ onBlur,
+ ...props }: Props) {
+
+ const officalTags = useOfficialTagsQuery();
+
+
+ const handleChange = (newValue: OnChangeValue,) => {
+ onChange?.([...newValue.map(transformer.optionToTag)]);
+ onBlur?.();
+ }
+
+
+
+ const maxReached = value.length >= max;
+
+ const currentPlaceholder = maxReached ? '' : value.length > 0 ? "Add Another..." : placeholder;
+
+ const tagsOptions = !maxReached ? (officalTags.data?.officialTags ?? []).filter(t => !value.some((v) => v.title === t.title)).map(transformer.tagToOption) : [];
+
+ return (
+ ,) => {
- onChange([...newValue.map(transformer.optionToTag)]);
- onBlur();
- }
-
-
- const handleRemove = (idx: number) => {
- onChange((value as Tag[]).filter((_, i) => idx !== i))
- onBlur();
- }
-
-
-
- const maxReached = value.length >= max;
-
- const currentPlaceholder = maxReached ? '' : value.length > 0 ? "Add Another..." : placeholder;
-
- const tagsOptions = !maxReached ? (officalTags.data?.officialTags ?? []).filter(t => !value.some((v: Tag) => v.title === t.title)).map(transformer.tagToOption) : [];
-
- return (
-
-
- )
-}
diff --git a/src/Components/Inputs/TextEditor/InsertImageModal/InsertImageModal.stories.tsx b/src/Components/Modals/InsertImageModal/InsertImageModal.stories.tsx
similarity index 68%
rename from src/Components/Inputs/TextEditor/InsertImageModal/InsertImageModal.stories.tsx
rename to src/Components/Modals/InsertImageModal/InsertImageModal.stories.tsx
index ed4f283..b5d7197 100644
--- a/src/Components/Inputs/TextEditor/InsertImageModal/InsertImageModal.stories.tsx
+++ b/src/Components/Modals/InsertImageModal/InsertImageModal.stories.tsx
@@ -5,7 +5,7 @@ import InsertImageModal from './InsertImageModal';
import { ModalsDecorator } from 'src/utils/storybook/decorators';
export default {
- title: 'Shared/Inputs/Text Editor/Insert Image Modal',
+ title: 'Shared/Inputs/Files Inputs/Image Modal',
component: InsertImageModal,
decorators: [ModalsDecorator]
@@ -14,4 +14,13 @@ export default {
const Template: ComponentStory = (args) => (null)
+ const [altInput, setAltInput] = useState("")
+ const dispatch = useAppDispatch();
+
+ const dropAreaRef = useRef(null!)
+ const isDragging = useIsDraggingOnElement({ ref: dropAreaRef });
+
+ const handleSubmit = (e: FormEvent) => {
+ e.preventDefault()
+ console.log(uploadedImage?.url);
+
+ if (uploadedImage?.url) {
+ // onInsert({ src: urlInput, alt: altInput })
+ const action = Object.assign({}, callbackAction);
+ action.payload = { src: uploadedImage.url, alt: altInput }
+ dispatch(action)
+ onClose?.();
+ }
+ }
+
+ return (
+
+
+ )
+}
diff --git a/src/Components/Inputs/TextEditor/InsertImageModal/index.tsx b/src/Components/Modals/InsertImageModal/index.tsx
similarity index 100%
rename from src/Components/Inputs/TextEditor/InsertImageModal/index.tsx
rename to src/Components/Modals/InsertImageModal/index.tsx
diff --git a/src/Components/Modals/Modal/Modal.tsx b/src/Components/Modals/Modal/Modal.tsx
index 66fe3d3..dc5a5e8 100644
--- a/src/Components/Modals/Modal/Modal.tsx
+++ b/src/Components/Modals/Modal/Modal.tsx
@@ -17,7 +17,11 @@ ReactModal.setAppElement('#root');
export default function Modal({ onClose, children, ...props }: Props) {
- const dispatch = useAppDispatch()
+ const dispatch = useAppDispatch();
+
+ const onAfterClose = () => {
+ dispatch(removeClosedModal(props.id))
+ }
return dispatch(removeClosedModal(props.id))}
+ onAfterClose={onAfterClose}
contentElement={(_props, children) =>
{props.children}
diff --git a/src/Components/Inputs/Autocomplete/Autocomplete.stories.tsx b/src/Components/Inputs/Autocomplete/Autocomplete.stories.tsx deleted file mode 100644 index 02df6f4..0000000 --- a/src/Components/Inputs/Autocomplete/Autocomplete.stories.tsx +++ /dev/null @@ -1,171 +0,0 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { useWatch } from 'react-hook-form'; -import { WrapForm } from 'src/utils/storybook/decorators'; - -import Autocomplete from './Autocomplete'; - -export default { - title: 'Shared/Inputs/AutoComplete', - component: Autocomplete, - decorators: [WrapForm({ - defaultValues: { - autocomplete: null - } - })], - -} as ComponentMeta
-
-
- );
-}
-
-
diff --git a/src/Components/Inputs/FilesInput/DropInput.jsx b/src/Components/Inputs/FilesInput/DropInput.jsx
deleted file mode 100644
index 6a2b73c..0000000
--- a/src/Components/Inputs/FilesInput/DropInput.jsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { useToggle } from "@react-hookz/web";
-import React from "react";
-import { FileDrop } from "react-file-drop";
-
-export default function DropInput({
- value: files,
- onChange,
- emptyContent,
- draggingContent,
- hasFilesContent,
- height,
- multiple = false,
- allowedType = "*",
- classes = {
- base: "",
- idle: "",
- dragging: "",
- },
-}) {
- const [isDragging, toggleDrag] = useToggle(false);
- const fileInputRef = React.useRef(null);
-
- const onAddFiles = (_files) => {
- onChange(_files);
- // do something with your files...
- };
-
- const uploadClick = () => {
- fileInputRef.current.click();
- };
-
- const status = isDragging ? "dragging" : files ? "has-files" : "empty";
-
- return (
-
- onAddFiles(files)}
- onTargetClick={uploadClick}
- onFrameDragEnter={() => toggleDrag(true)}
- onFrameDragLeave={() => toggleDrag(false)}
- onFrameDrop={() => toggleDrag(false)}
- className={`h-full cursor-pointer`}
- targetClassName={`h-full ${classes.base} ${
- status === "empty" && classes.idle
- }`}
- draggingOverFrameClassName={`${classes.dragging}`}
- >
- {status === "dragging" && draggingContent}
- {status === "empty" && emptyContent}
- {status === "has-files" && hasFilesContent}
-
- onAddFiles(e.target.files)}
- ref={fileInputRef}
- type="file"
- className="hidden"
- multiple={multiple}
- accept={allowedType}
- />
-
- );
-}
diff --git a/src/Components/Inputs/FilesInput/FileInput.stories.tsx b/src/Components/Inputs/FilesInput/FileInput.stories.tsx
deleted file mode 100644
index 5b02efa..0000000
--- a/src/Components/Inputs/FilesInput/FileInput.stories.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { BsImages } from 'react-icons/bs';
-import Button from 'src/Components/Button/Button';
-
-import FilesInput from './FilesInput';
-import FileDropInput from './FilesDropInput';
-
-export default {
- title: 'Shared/Inputs/Files Input',
- component: FilesInput,
-
-} as ComponentMeta
-
- )
-}
diff --git a/src/Components/Inputs/FilesInput/FilesDropInput.tsx b/src/Components/Inputs/FilesInput/FilesDropInput.tsx
deleted file mode 100644
index 6d96622..0000000
--- a/src/Components/Inputs/FilesInput/FilesDropInput.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { FaImage } from "react-icons/fa";
-import { UnionToObjectKeys } from "src/utils/types/utils";
-import DropInput from "./DropInput";
-
-
-type Props = {
- height?: number
- multiple?: boolean;
- value?: File[] | string[] | string;
- max?: number;
- onBlur?: () => void;
- onChange?: (files: (File | string)[] | null) => void
- uploadBtn?: JSX.Element
- uploadText?: string;
- allowedType?: 'images';
- classes?: Partial<{
- base: string,
- idle: string,
- dragging: string,
- hasFiles: string
- }>
-}
-
-const fileAccept: UnionToObjectKeys
- 
- }
-
-
- - {file.name} -
- - { - file.type === 'image' &&
-
-
-
-
-
- - or {" "} -
- -); - -const defaultDraggingContent =Drop your files here ⬇⬇⬇
; - -const defaultHasFilesContent = ( -Files Uploaded Successfully!!
-); \ No newline at end of file diff --git a/src/Components/Inputs/FilesInput/FilesInput.tsx b/src/Components/Inputs/FilesInput/FilesInput.tsx deleted file mode 100644 index 85e6cdb..0000000 --- a/src/Components/Inputs/FilesInput/FilesInput.tsx +++ /dev/null @@ -1,136 +0,0 @@ -import { createAction } from "@reduxjs/toolkit"; -import React, { ChangeEvent, useCallback, useRef } from "react" -import { BsUpload } from "react-icons/bs"; -import { FaImage } from "react-icons/fa"; -import Button from "src/Components/Button/Button" -import { openModal } from "src/redux/features/modals.slice"; -import { useAppDispatch } from "src/utils/hooks"; -import { useReduxEffect } from "src/utils/hooks/useReduxEffect"; -import { UnionToObjectKeys } from "src/utils/types/utils"; -import FilesThumbnails from "./FilesThumbnails"; - - -type Props = { - multiple?: boolean; - value?: File[] | string[] | string; - max?: number; - onBlur?: () => void; - onChange?: (files: (File | string)[] | null) => void - uploadBtn?: JSX.Element - uploadText?: string; - allowedType?: 'images'; -} - -const fileAccept: UnionToObjectKeys
- {
- filesConverted.map((file, idx) => onRemove?.(idx)} />)
- }
-
- )
-}
diff --git a/src/Components/Inputs/FilesInputs/AvatarInput/AvatarInput.stories.tsx b/src/Components/Inputs/FilesInputs/AvatarInput/AvatarInput.stories.tsx
new file mode 100644
index 0000000..73f451e
--- /dev/null
+++ b/src/Components/Inputs/FilesInputs/AvatarInput/AvatarInput.stories.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import AvatarInput from './AvatarInput';
+import { WrapFormController } from 'src/utils/storybook/decorators';
+import { ImageType } from '../SingleImageUploadInput/SingleImageUploadInput';
+
+export default {
+ title: 'Shared/Inputs/Files Inputs/Avatar ',
+ component: AvatarInput,
+ decorators: [
+ WrapFormController<{ avatar: ImageType | null }>({
+ logValues: true,
+ name: "avatar",
+ defaultValues: {
+ avatar: null
+ }
+ })]
+} as ComponentMeta
+
+
+
+ )
+}
diff --git a/src/Components/Inputs/FilesInputs/CoverImageInput/CoverImageInput.stories.tsx b/src/Components/Inputs/FilesInputs/CoverImageInput/CoverImageInput.stories.tsx
new file mode 100644
index 0000000..9bedfe5
--- /dev/null
+++ b/src/Components/Inputs/FilesInputs/CoverImageInput/CoverImageInput.stories.tsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { WrapFormController } from 'src/utils/storybook/decorators';
+import { ImageType } from '../SingleImageUploadInput/SingleImageUploadInput';
+import CoverImageInput from './CoverImageInput';
+
+export default {
+ title: 'Shared/Inputs/Files Inputs/Cover Image ',
+ component: CoverImageInput,
+ decorators: [
+ WrapFormController<{ thumbnail: ImageType | null }>({
+ logValues: true,
+ name: "thumbnail",
+ defaultValues: {
+ thumbnail: null
+ }
+ })]
+} as ComponentMeta
+ {!img &&
+ 
+ {!isUploading &&
+
}
+ />
+
+
}
+ {img &&
+ <>
+
+ Add Image
+
+
+
+ {props.isRemovable && }
+
+ }
+ }
+ {isUploading &&
+
+
+ }
+ {isDraggingOnWindow &&
+
+
+
+
+
+ }
+
+
+
+}
+
+
+export const Default = Template.bind({});
+Default.args = {
+}
\ No newline at end of file
diff --git a/src/Components/Inputs/FilesInputs/CoverImageInput/CoverImageInput.tsx b/src/Components/Inputs/FilesInputs/CoverImageInput/CoverImageInput.tsx
new file mode 100644
index 0000000..975366d
--- /dev/null
+++ b/src/Components/Inputs/FilesInputs/CoverImageInput/CoverImageInput.tsx
@@ -0,0 +1,103 @@
+import React, { ComponentProps, useEffect, useRef, useState } from 'react'
+import { FaImage } from 'react-icons/fa';
+import { CgArrowsExchangeV } from 'react-icons/cg';
+import { IoMdClose } from 'react-icons/io';
+import { RotatingLines } from 'react-loader-spinner';
+import { Nullable } from 'remirror';
+import SingleImageUploadInput from '../SingleImageUploadInput/SingleImageUploadInput'
+import { motion } from 'framer-motion';
+import { AiOutlineCloudUpload } from 'react-icons/ai';
+import { useIsDraggingOnElement } from 'src/utils/hooks';
+
+type Value = ComponentProps
+
+
+
+ )
+}
diff --git a/src/Components/Inputs/FilesInputs/FileUploadInput/FileUploadInput.stories.tsx b/src/Components/Inputs/FilesInputs/FileUploadInput/FileUploadInput.stories.tsx
new file mode 100644
index 0000000..2e5b4dd
--- /dev/null
+++ b/src/Components/Inputs/FilesInputs/FileUploadInput/FileUploadInput.stories.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import FileUploadInput from './FileUploadInput';
+
+export default {
+ title: 'Shared/Inputs/Files Inputs/Basic',
+ component: FileUploadInput,
+
+} as ComponentMeta
+ {!img &&
+ {!isUploading &&
+
}
+ />
+
+
}
+ {img && <>
+
+ Drop a COVER IMAGE here or
Click to browse +
+ Click to browse +
+
+
+
+
+ }
+ }
+ {isUploading &&
+
+
+ }
+ {isDraggingOnWindow &&
+
+
+
+
+ Drop here to upload +
+
+ }
+ + Drop here to upload +
+ Drop your IMAGES here or
+
+
+
+
+ )
+}
+
+function CustomImagePreview({ id, url }: PreviewComponentProps) {
+
+ const [progress, setProgress] = useState
+ 
+
;
+};
+
+const STATES = {
+ PROGRESS: "PROGRESS",
+ DONE: "DONE",
+ CANCELLED: "CANCELLED",
+ ERROR: "ERROR"
+};
+
+const STATE_COLORS = {
+ [STATES.PROGRESS]: "#f4e4a4",
+ [STATES.DONE]: "#a5f7b3",
+ [STATES.CANCELLED]: "#f7cdcd",
+ [STATES.ERROR]: "#ee4c4c"
+};
\ No newline at end of file
diff --git a/src/Components/Inputs/FilesInputs/FileUploadInput/styles.module.scss b/src/Components/Inputs/FilesInputs/FileUploadInput/styles.module.scss
new file mode 100644
index 0000000..217ca39
--- /dev/null
+++ b/src/Components/Inputs/FilesInputs/FileUploadInput/styles.module.scss
@@ -0,0 +1,25 @@
+.zone {
+ background-color: #f2f4f7;
+ border-color: #e4e7ec;
+
+ .active_content {
+ display: none;
+ }
+
+ .idle_content {
+ display: block;
+ }
+
+ &.active {
+ background-color: #b3a0ff;
+ border-color: #9e88ff;
+
+ .active_content {
+ display: block;
+ }
+
+ .idle_content {
+ display: none;
+ }
+ }
+}
diff --git a/src/Components/Inputs/FilesInputs/ScreenshotsInput/ImagePreviews.tsx b/src/Components/Inputs/FilesInputs/ScreenshotsInput/ImagePreviews.tsx
new file mode 100644
index 0000000..74d4d64
--- /dev/null
+++ b/src/Components/Inputs/FilesInputs/ScreenshotsInput/ImagePreviews.tsx
@@ -0,0 +1,97 @@
+import UploadPreview, { PreviewComponentProps, PreviewMethods } from '@rpldy/upload-preview'
+import { useAbortItem, useItemAbortListener, useItemCancelListener, useItemErrorListener, useItemProgressListener } from '@rpldy/uploady';
+import { useState } from 'react'
+import ScreenShotsThumbnail from './ScreenshotThumbnail'
+
+export default function ImagePreviews() {
+ return (
+
+
+ {itemState === STATES.PROGRESS &&
+
+
}
+ {itemState === STATES.ERROR &&
+
+ Failed...
+
}
+ {itemState === STATES.CANCELLED &&
+
+ Cancelled
+
}
+
+ //
+ //
;
+};
+
+const STATES = {
+ PROGRESS: "PROGRESS",
+ DONE: "DONE",
+ CANCELLED: "CANCELLED",
+ ERROR: "ERROR"
+};
diff --git a/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotThumbnail.tsx b/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotThumbnail.tsx
new file mode 100644
index 0000000..0003c43
--- /dev/null
+++ b/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotThumbnail.tsx
@@ -0,0 +1,52 @@
+import React from 'react'
+import { FaTimes } from 'react-icons/fa';
+import { RotatingLines } from 'react-loader-spinner';
+
+interface Props {
+ url?: string,
+ isLoading?: boolean;
+ isError?: boolean;
+ onCancel?: () => void;
+
+}
+
+export default function ScreenshotThumbnail({ url, isLoading, isError, onCancel }: Props) {
+
+ const isEmpty = !url;
+
+ return (
+
+ //
+ // {itemState === STATES.PROGRESS &&
+ //
+ //
}
+ // {itemState === STATES.ERROR &&
+ //
+ // Failed...
+ //
}
+ // {itemState === STATES.CANCELLED &&
+ //
+ // Cancelled
+ //
}
+ //
+ {!isEmpty && }
+
+ )
+}
diff --git a/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotsInput.stories.tsx b/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotsInput.stories.tsx
new file mode 100644
index 0000000..1575707
--- /dev/null
+++ b/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotsInput.stories.tsx
@@ -0,0 +1,84 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import ScreenshotsInput, { ScreenshotType } from './ScreenshotsInput';
+import { WrapForm, WrapFormController } from 'src/utils/storybook/decorators';
+
+export default {
+ title: 'Shared/Inputs/Files Inputs/Screenshots',
+ component: ScreenshotsInput,
+ decorators: [
+ WrapFormController<{ screenshots: Array
+
+ {isLoading &&
+
+
}
+ {isError &&
+
+ Failed...
+
}
+ {!isEmpty &&
+
+ }
+
+ {canUploadMore && {
+ onChange(uploadedFiles.filter(file => file.id !== f.id))
+ }} />)}
+
+
+
+
+
+ Browse images or
drop + them here +
+ drop + them here +
+ //
+ //
;
+};
+
+const STATES = {
+ PROGRESS: "PROGRESS",
+ DONE: "DONE",
+ CANCELLED: "CANCELLED",
+ ERROR: "ERROR"
+};
diff --git a/src/Components/Inputs/FilesInputs/SingleImageUploadInput/ScreenshotThumbnail.tsx b/src/Components/Inputs/FilesInputs/SingleImageUploadInput/ScreenshotThumbnail.tsx
new file mode 100644
index 0000000..0003c43
--- /dev/null
+++ b/src/Components/Inputs/FilesInputs/SingleImageUploadInput/ScreenshotThumbnail.tsx
@@ -0,0 +1,52 @@
+import React from 'react'
+import { FaTimes } from 'react-icons/fa';
+import { RotatingLines } from 'react-loader-spinner';
+
+interface Props {
+ url?: string,
+ isLoading?: boolean;
+ isError?: boolean;
+ onCancel?: () => void;
+
+}
+
+export default function ScreenshotThumbnail({ url, isLoading, isError, onCancel }: Props) {
+
+ const isEmpty = !url;
+
+ return (
+
+ //
+ // {itemState === STATES.PROGRESS &&
+ //
+ //
}
+ // {itemState === STATES.ERROR &&
+ //
+ // Failed...
+ //
}
+ // {itemState === STATES.CANCELLED &&
+ //
+ // Cancelled
+ //
}
+ //
+ {!isEmpty && }
+
+ )
+}
diff --git a/src/Components/Inputs/FilesInputs/SingleImageUploadInput/SingleImageUploadInput.stories.tsx b/src/Components/Inputs/FilesInputs/SingleImageUploadInput/SingleImageUploadInput.stories.tsx
new file mode 100644
index 0000000..06e9fe5
--- /dev/null
+++ b/src/Components/Inputs/FilesInputs/SingleImageUploadInput/SingleImageUploadInput.stories.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import SingleImageUploadInput, { ImageType } from './SingleImageUploadInput';
+import { WrapFormController } from 'src/utils/storybook/decorators';
+import { RotatingLines } from 'react-loader-spinner';
+import { FiCamera, } from 'react-icons/fi';
+import { FaExchangeAlt, FaImage } from 'react-icons/fa';
+
+export default {
+ title: 'Shared/Inputs/Files Inputs/Single Image Upload ',
+ component: SingleImageUploadInput,
+ decorators: [
+ WrapFormController<{ avatar: ImageType | null }>({
+ logValues: true,
+ name: "avatar",
+ defaultValues: {
+ avatar: null
+ }
+ })]
+} as ComponentMeta
+
+ {isLoading &&
+
+
}
+ {isError &&
+
+ Failed...
+
}
+ {!isEmpty &&
+
+ }
+
+
+
+ )
+}
diff --git a/src/Components/Inputs/FilesInputs/fetch-upload-img-url.tsx b/src/Components/Inputs/FilesInputs/fetch-upload-img-url.tsx
new file mode 100644
index 0000000..e2c9b19
--- /dev/null
+++ b/src/Components/Inputs/FilesInputs/fetch-upload-img-url.tsx
@@ -0,0 +1,25 @@
+import axios from "axios";
+import { NotificationsService } from "src/services";
+
+export async function fetchUploadUrl(options?: Partial<{ filename: string }>) {
+
+ const { filename } = options ?? {}
+
+ try {
+ const bodyFormData = new FormData();
+ bodyFormData.append('requireSignedURLs', "false");
+ const res = await axios({
+ url: 'https://cors-anywhere.herokuapp.com/https://api.cloudflare.com/client/v4/accounts/783da4f06e5fdb9012c0632959a6f5b3/images/v2/direct_upload',
+ method: 'POST',
+ data: bodyFormData,
+ headers: {
+ "Authorization": "Bearer XXX",
+ }
+ })
+ return res.data.result.uploadURL as string;
+ } catch (error) {
+ console.log(error);
+ NotificationsService.error("A network error happened.")
+ return "couldnt fetch upload url";
+ }
+}
\ No newline at end of file
diff --git a/src/Components/Inputs/Selects/BasicSelectInput/BasicSelectInput.stories.tsx b/src/Components/Inputs/Selects/BasicSelectInput/BasicSelectInput.stories.tsx
new file mode 100644
index 0000000..72af3cc
--- /dev/null
+++ b/src/Components/Inputs/Selects/BasicSelectInput/BasicSelectInput.stories.tsx
@@ -0,0 +1,31 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { MdOutlineKingBed } from 'react-icons/md';
+
+import BasicSelectInput from './BasicSelectInput';
+
+export default {
+ title: 'Shared/Inputs/Select/Basic',
+ component: BasicSelectInput,
+
+} as ComponentMeta
+ {img && }
+ {!img &&
+ <>
+
}
+ />
+
+ Add Image
+
+ }
+ {isUploading &&
+
+
+ }
+
+
+
+ );
+}
+
+function getOptionComponent
+ {option.data[labelField]}
+
)
+
+ return function OptionComponent(props: OptionProps
+
+ )
+}
+
+
const transformer = {
+ valueToOption: (tag: Value): Option => ({ label: tag.title, value: tag.title, icon: null, description: null }),
tagToOption: (tag: Tag): Option => ({ label: tag.title, value: tag.title, icon: tag.icon, description: tag.description }),
optionToTag: (o: Option): Tag => ({ title: o.value, icon: o.icon, description: o.description, })
}
@@ -107,75 +178,3 @@ const colourStyles: StylesConfig = {
paddingRight: 0,
})
}
-
-
-export default function TagsInput({
- classes,
- placeholder = 'Write some tags',
- max = 5,
- ...props }: Props) {
-
- const officalTags = useOfficialTagsQuery();
-
- const { field: { value, onChange, onBlur } } = useController({
- name: props.name ?? "tags",
- control: props.control,
- })
-
-
- const handleChange = (newValue: OnChangeValue
-
- )
-}
diff --git a/src/Components/Inputs/TextEditor/InsertImageModal/InsertImageModal.tsx b/src/Components/Inputs/TextEditor/InsertImageModal/InsertImageModal.tsx
deleted file mode 100644
index 0852dea..0000000
--- a/src/Components/Inputs/TextEditor/InsertImageModal/InsertImageModal.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import React, { FormEvent, useState } from 'react'
-import { ModalCard, modalCardVariants } from 'src/Components/Modals/ModalsContainer/ModalsContainer'
-import { motion } from 'framer-motion'
-import { IoClose } from 'react-icons/io5'
-import Button from 'src/Components/Button/Button'
-import { useAppDispatch } from 'src/utils/hooks'
-import { PayloadAction } from '@reduxjs/toolkit'
-
-interface Props extends ModalCard {
- callbackAction: PayloadAction<{ src: string, alt?: string }>
-}
-
-export default function InsertImageModal({ onClose, direction, callbackAction, ...props }: Props) {
-
- const [urlInput, setUrlInput] = useState("")
- const [altInput, setAltInput] = useState("")
- const dispatch = useAppDispatch();
-
- const handleSubmit = (e: FormEvent) => {
- e.preventDefault()
- if (urlInput.length > 10) {
- // onInsert({ src: urlInput, alt: altInput })
- const action = Object.assign({}, callbackAction);
- action.payload = { src: urlInput, alt: altInput }
- dispatch(action)
- onClose?.();
- }
- }
-
- return (
- Add Image
- - -Add Image
+ + +
{openModals.map((modal, idx) => {
const Child = ALL_MODALS[modal.Modal];
-
return (
-
-
-
-
-
-
- 
-
-
- -
-
- - - Projects - - -
- -