diff --git a/.changeset/wise-lions-argue.md b/.changeset/wise-lions-argue.md new file mode 100644 index 00000000..4d37a5fb --- /dev/null +++ b/.changeset/wise-lions-argue.md @@ -0,0 +1,5 @@ +--- +'@dotlottie/common': patch +--- + +refactor: 💡 theming from lss to lottie slots diff --git a/apps/dotlottie-playground/package.json b/apps/dotlottie-playground/package.json index 380efe1c..10d5ed82 100644 --- a/apps/dotlottie-playground/package.json +++ b/apps/dotlottie-playground/package.json @@ -9,7 +9,7 @@ "preview": "vite preview" }, "dependencies": { - "@dotlottie/dotlottie-js": "^0.6.2", + "@dotlottie/dotlottie-js": "^0.7.0", "@dotlottie/react-player": "workspace:^", "@lottiefiles/lottie-types": "^1.2.0", "@monaco-editor/react": "^4.5.1", diff --git a/apps/dotlottie-playground/public/theming_example.lottie b/apps/dotlottie-playground/public/theming_example.lottie new file mode 100644 index 00000000..44792e5a Binary files /dev/null and b/apps/dotlottie-playground/public/theming_example.lottie differ diff --git a/apps/dotlottie-playground/src/app.tsx b/apps/dotlottie-playground/src/app.tsx index d2ca3b2a..ecb551aa 100644 --- a/apps/dotlottie-playground/src/app.tsx +++ b/apps/dotlottie-playground/src/app.tsx @@ -15,6 +15,10 @@ const SAMPLE_FILES = [ { name: 'toggle.lottie', path: `${import.meta.env.BASE_URL}toggle.lottie` }, { name: 'interactivity_example.lottie', path: `${import.meta.env.BASE_URL}interactivity_example.lottie` }, { name: 'aniki_hamster.lottie', path: `${import.meta.env.BASE_URL}aniki_hamster.lottie` }, + { + name: 'theming_example.lottie', + path: `${import.meta.env.BASE_URL}theming_example.lottie`, + }, ]; interface HomeScreenProps { diff --git a/apps/dotlottie-playground/src/components/dropzone.tsx b/apps/dotlottie-playground/src/components/dropzone.tsx index 3f858a21..1905b1a3 100644 --- a/apps/dotlottie-playground/src/components/dropzone.tsx +++ b/apps/dotlottie-playground/src/components/dropzone.tsx @@ -7,7 +7,7 @@ import ReactDropzone, { type DropzoneState, type FileError, type FileRejection, import { toast } from 'react-toastify'; interface DropzoneProps { - accept: 'lottie' | 'json' | 'lss'; + accept: 'lottie' | 'json'; children: (state: DropzoneState) => JSX.Element; multiple?: boolean; noClick?: boolean; @@ -40,13 +40,6 @@ export const Dropzone: React.FC = ({ accept, children, multiple, }; } - if (accept === 'lss' && !fileName.endsWith('.lss')) { - return { - message: 'Invalid .lss', - code: ErrorCode.FileInvalidType, - }; - } - return null; }, []); diff --git a/apps/dotlottie-playground/src/components/file-tree/file-icon.tsx b/apps/dotlottie-playground/src/components/file-tree/file-icon.tsx index b40484f8..60ad53fe 100644 --- a/apps/dotlottie-playground/src/components/file-tree/file-icon.tsx +++ b/apps/dotlottie-playground/src/components/file-tree/file-icon.tsx @@ -3,14 +3,15 @@ */ import React from 'react'; -import { BsFiletypeJson, BsFiletypeCss } from 'react-icons/bs'; +import { BsFiletypeJson } from 'react-icons/bs'; import type { SupportedFileTypes } from '.'; export const FileIcon = ({ type }: { type: SupportedFileTypes }): JSX.Element => { - if (type === 'lss') { - return ; - } else { - return ; + // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition + if (type !== 'json') { + return <>; } + + return ; }; diff --git a/apps/dotlottie-playground/src/components/file-tree/index.tsx b/apps/dotlottie-playground/src/components/file-tree/index.tsx index f778b92e..fbaf6419 100644 --- a/apps/dotlottie-playground/src/components/file-tree/index.tsx +++ b/apps/dotlottie-playground/src/components/file-tree/index.tsx @@ -2,7 +2,7 @@ * Copyright 2023 Design Barn Inc. */ -import React, { useCallback, useMemo, useState } from 'react'; +import React, { useCallback, useState } from 'react'; import { useKey } from 'react-use'; import { useDotLottie } from '../../hooks/use-dotlottie'; @@ -14,7 +14,7 @@ import { AddNew } from './add-new'; import { EditableItem } from './editable-item'; import { Title } from './title'; -const FILE_TYPES = ['json', 'lss'] as const; +const FILE_TYPES = ['json'] as const; export type SupportedFileTypes = typeof FILE_TYPES[number]; @@ -54,8 +54,6 @@ export const FileTree: React.FC = ({ [onClick, title], ); - const fileExtention = useMemo(() => (title.toLowerCase() === 'themes' ? 'lss' : 'json'), [title]); - const handleRemove = useCallback( (fileName: string) => { onRemove?.(title, fileName); @@ -79,10 +77,10 @@ export const FileTree: React.FC = ({ const handleAddNew = useCallback( (value: string) => { - onAddNew?.(title, `${value}.${fileExtention}`); + onAddNew?.(title, `${value}.json`); setDisplayAdd(false); }, - [onAddNew, title, fileExtention], + [onAddNew, title], ); const handleRename = useCallback( @@ -121,7 +119,7 @@ export const FileTree: React.FC = ({ buttons={title === 'Animations' ? ['upload'] : ['upload', 'add']} />
- + {(state): JSX.Element => { return (
@@ -157,7 +155,7 @@ export const FileTree: React.FC = ({ {displayAdd && (
  • - +
  • )} diff --git a/apps/dotlottie-playground/src/components/file-tree/title.tsx b/apps/dotlottie-playground/src/components/file-tree/title.tsx index cdaed463..50126a34 100644 --- a/apps/dotlottie-playground/src/components/file-tree/title.tsx +++ b/apps/dotlottie-playground/src/components/file-tree/title.tsx @@ -57,7 +57,7 @@ export const Title: React.FC = ({ buttons, onClickAdd, onUpload, tit case 'upload': buttonsToDisplay.push( - + {({ getInputProps, getRootProps }): JSX.Element => (