From db8fe4e09ac0535ef8e853406687dff3514b4e09 Mon Sep 17 00:00:00 2001 From: himself65 Date: Tue, 11 Apr 2023 22:57:20 -0500 Subject: [PATCH] feat: add new affine loading component --- apps/electron/yarn.lock | 11 + .../editor-mode-switch/switch-items.tsx | 6 +- packages/component/package.json | 1 + .../src/components/affine-loading/index.tsx | 23 + .../affine-loading/loading-black.json | 770 ++++++++++++++++++ .../affine-loading/loading-white.json | 750 +++++++++++++++++ .../src/components/internal-lottie/index.tsx | 8 +- .../src/stories/AffineLoading.stories.tsx | 10 + packages/jotai/package.json | 6 + packages/jotai/src/index.ts | 2 + packages/jotai/src/resource.ts | 5 + yarn.lock | 4 + 12 files changed, 1588 insertions(+), 8 deletions(-) create mode 100644 packages/component/src/components/affine-loading/index.tsx create mode 100644 packages/component/src/components/affine-loading/loading-black.json create mode 100644 packages/component/src/components/affine-loading/loading-white.json rename apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/CustomLottie.tsx => packages/component/src/components/internal-lottie/index.tsx (85%) create mode 100644 packages/component/src/stories/AffineLoading.stories.tsx create mode 100644 packages/jotai/src/resource.ts diff --git a/apps/electron/yarn.lock b/apps/electron/yarn.lock index 8eec54ffd7..c976b7af30 100644 --- a/apps/electron/yarn.lock +++ b/apps/electron/yarn.lock @@ -77,6 +77,7 @@ __metadata: jest-mock: ^29.5.0 kebab-case: ^1.0.2 lit: ^2.7.2 + lottie-web: ^5.11.0 react: ^18.2.0 react-dnd: ^16.0.1 react-dnd-html5-backend: ^16.0.1 @@ -175,6 +176,9 @@ __metadata: dependencies: "@affine/env": "workspace:*" jotai: ^2.0.4 + lottie-web: ^5.11.0 + peerDependencies: + lottie-web: "*" languageName: unknown linkType: soft @@ -12631,6 +12635,13 @@ __metadata: languageName: node linkType: hard +"lottie-web@npm:^5.11.0": + version: 5.11.0 + resolution: "lottie-web@npm:5.11.0" + checksum: 4f9c86c7cf0280ccb4380b826213719122a227f50e27e5d6943dff2f05dfe4e569bd8a358a0cb9c96cbdf62f9d70b883b5cb5ec50ecb7a1eed794c5ce5a1e38a + languageName: node + linkType: hard + "lowercase-keys@npm:^2.0.0": version: 2.0.0 resolution: "lowercase-keys@npm:2.0.0" diff --git a/apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/switch-items.tsx b/apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/switch-items.tsx index 6e2969a6cc..fced11a0bd 100644 --- a/apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/switch-items.tsx +++ b/apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/switch-items.tsx @@ -1,8 +1,8 @@ +import { InternalLottie } from '@affine/component/internal-lottie'; import type { HTMLAttributes } from 'react'; import type React from 'react'; import { cloneElement, useState } from 'react'; -import Lottie from './CustomLottie'; import { StyledSwitchItem } from './style'; type HoverAnimateControllerProps = { @@ -45,7 +45,7 @@ export const PageSwitchItem = ( ) => { return ( - { return ( - { + const theme = useTheme(); + const isDark = theme.palette.mode === 'dark'; + return ( + + ); +}; diff --git a/packages/component/src/components/affine-loading/loading-black.json b/packages/component/src/components/affine-loading/loading-black.json new file mode 100644 index 0000000000..a5f470d040 --- /dev/null +++ b/packages/component/src/components/affine-loading/loading-black.json @@ -0,0 +1,770 @@ +{ + "v": "5.9.0", + "fr": 60, + "ip": 0, + "op": 241, + "w": 1024, + "h": 1024, + "nm": "logo-tri", + "ddd": 0, + "assets": [], + "layers": [ + { + "ddd": 0, + "ind": 1, + "ty": 4, + "nm": "logo/logo-tri-stroke Outlines 2", + "sr": 1, + "ks": { + "o": { "a": 0, "k": 100, "ix": 11 }, + "r": { "a": 0, "k": 0, "ix": 10 }, + "p": { "a": 0, "k": [512, 512, 0], "ix": 2, "l": 2 }, + "a": { "a": 0, "k": [512, 512, 0], "ix": 1, "l": 2 }, + "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "ind": 0, + "ty": "sh", + "ix": 1, + "ks": { + "a": 0, + "k": { + "i": [ + [10.007, -17.333], + [0, 0], + [-20.014, 0], + [0, 0], + [10.007, 17.333], + [0, 0] + ], + "o": [ + [0, 0], + [-10.008, 17.333], + [0, 0], + [20.015, 0], + [0, 0], + [-10.007, -17.333] + ], + "v": [ + [-22.516, -284.376], + [-338.376, 262.71], + [-315.86, 301.71], + [315.861, 301.71], + [338.378, 262.71], + [22.517, -284.376] + ], + "c": true + }, + "ix": 2 + }, + "nm": "Path 1", + "mn": "ADBE Vector Shape - Group", + "hd": false + }, + { + "ty": "st", + "c": { + "a": 0, + "k": [0.137254901961, 0.121568634931, 0.125490196078, 1], + "ix": 3 + }, + "o": { "a": 0, "k": 100, "ix": 4 }, + "w": { "a": 0, "k": 48, "ix": 5 }, + "lc": 1, + "lj": 1, + "ml": 10, + "bm": 0, + "nm": "Stroke 1", + "mn": "ADBE Vector Graphic - Stroke", + "hd": false + }, + { + "ty": "tr", + "p": { "a": 0, "k": [512, 418.652], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "Transform" + } + ], + "nm": "Group 1", + "np": 2, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 0, + "op": 241, + "st": 0, + "bm": 0 + }, + { + "ddd": 0, + "ind": 2, + "ty": 4, + "nm": "logo/logo-tri-stroke Outlines 3", + "sr": 1, + "ks": { + "o": { "a": 0, "k": 100, "ix": 11 }, + "r": { + "a": 1, + "k": [ + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 0, + "s": [0] + }, + { "t": 60, "s": [-15] } + ], + "ix": 10 + }, + "p": { "a": 0, "k": [512, 512, 0], "ix": 2, "l": 2 }, + "a": { "a": 0, "k": [512, 512, 0], "ix": 1, "l": 2 }, + "s": { + "a": 1, + "k": [ + { + "i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] }, + "o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] }, + "t": 0, + "s": [100, 100, 100] + }, + { "t": 60, "s": [66, 66, 100] } + ], + "ix": 6, + "l": 2 + } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "ind": 0, + "ty": "sh", + "ix": 1, + "ks": { + "a": 0, + "k": { + "i": [ + [10.007, -17.333], + [0, 0], + [-20.014, 0], + [0, 0], + [10.007, 17.333], + [0, 0] + ], + "o": [ + [0, 0], + [-10.008, 17.333], + [0, 0], + [20.015, 0], + [0, 0], + [-10.007, -17.333] + ], + "v": [ + [-22.516, -284.376], + [-338.376, 262.71], + [-315.86, 301.71], + [315.861, 301.71], + [338.378, 262.71], + [22.517, -284.376] + ], + "c": true + }, + "ix": 2 + }, + "nm": "Path 1", + "mn": "ADBE Vector Shape - Group", + "hd": false + }, + { + "ty": "st", + "c": { + "a": 0, + "k": [0.137254901961, 0.121568634931, 0.125490196078, 1], + "ix": 3 + }, + "o": { "a": 0, "k": 100, "ix": 4 }, + "w": { + "a": 1, + "k": [ + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 0, + "s": [48] + }, + { "t": 60, "s": [53] } + ], + "ix": 5 + }, + "lc": 1, + "lj": 1, + "ml": 10, + "bm": 0, + "nm": "Stroke 1", + "mn": "ADBE Vector Graphic - Stroke", + "hd": false + }, + { + "ty": "tr", + "p": { "a": 0, "k": [512, 418.652], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "Transform" + } + ], + "nm": "Group 1", + "np": 2, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 0, + "op": 241, + "st": 0, + "bm": 0 + }, + { + "ddd": 0, + "ind": 3, + "ty": 4, + "nm": "logo/logo-tri-stroke Outlines 4", + "sr": 1, + "ks": { + "o": { "a": 0, "k": 100, "ix": 11 }, + "r": { + "a": 1, + "k": [ + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 0, + "s": [0] + }, + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 60, + "s": [-15] + }, + { "t": 120, "s": [-30] } + ], + "ix": 10 + }, + "p": { "a": 0, "k": [512, 512, 0], "ix": 2, "l": 2 }, + "a": { "a": 0, "k": [512, 512, 0], "ix": 1, "l": 2 }, + "s": { + "a": 1, + "k": [ + { + "i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] }, + "o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] }, + "t": 0, + "s": [100, 100, 100] + }, + { + "i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] }, + "o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] }, + "t": 60, + "s": [66, 66, 100] + }, + { "t": 120, "s": [44.5, 44.5, 100] } + ], + "ix": 6, + "l": 2 + } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "ind": 0, + "ty": "sh", + "ix": 1, + "ks": { + "a": 0, + "k": { + "i": [ + [10.007, -17.333], + [0, 0], + [-20.014, 0], + [0, 0], + [10.007, 17.333], + [0, 0] + ], + "o": [ + [0, 0], + [-10.008, 17.333], + [0, 0], + [20.015, 0], + [0, 0], + [-10.007, -17.333] + ], + "v": [ + [-22.516, -284.376], + [-338.376, 262.71], + [-315.86, 301.71], + [315.861, 301.71], + [338.378, 262.71], + [22.517, -284.376] + ], + "c": true + }, + "ix": 2 + }, + "nm": "Path 1", + "mn": "ADBE Vector Shape - Group", + "hd": false + }, + { + "ty": "st", + "c": { + "a": 0, + "k": [0.137254901961, 0.121568634931, 0.125490196078, 1], + "ix": 3 + }, + "o": { "a": 0, "k": 100, "ix": 4 }, + "w": { + "a": 1, + "k": [ + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 0, + "s": [48] + }, + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 60, + "s": [53] + }, + { "t": 120, "s": [68] } + ], + "ix": 5 + }, + "lc": 1, + "lj": 1, + "ml": 10, + "bm": 0, + "nm": "Stroke 1", + "mn": "ADBE Vector Graphic - Stroke", + "hd": false + }, + { + "ty": "tr", + "p": { "a": 0, "k": [512, 418.652], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "Transform" + } + ], + "nm": "Group 1", + "np": 2, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 0, + "op": 241, + "st": 0, + "bm": 0 + }, + { + "ddd": 0, + "ind": 4, + "ty": 4, + "nm": "logo/logo-tri-stroke Outlines 5", + "sr": 1, + "ks": { + "o": { "a": 0, "k": 100, "ix": 11 }, + "r": { + "a": 1, + "k": [ + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 0, + "s": [0] + }, + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 60, + "s": [-15] + }, + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 120, + "s": [-30] + }, + { "t": 180, "s": [-45] } + ], + "ix": 10 + }, + "p": { "a": 0, "k": [512, 512, 0], "ix": 2, "l": 2 }, + "a": { "a": 0, "k": [512, 512, 0], "ix": 1, "l": 2 }, + "s": { + "a": 1, + "k": [ + { + "i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] }, + "o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] }, + "t": 0, + "s": [100, 100, 100] + }, + { + "i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] }, + "o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] }, + "t": 60, + "s": [66, 66, 100] + }, + { + "i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] }, + "o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] }, + "t": 120, + "s": [44.5, 44.5, 100] + }, + { "t": 180, "s": [30, 30, 100] } + ], + "ix": 6, + "l": 2 + } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "ind": 0, + "ty": "sh", + "ix": 1, + "ks": { + "a": 0, + "k": { + "i": [ + [10.007, -17.333], + [0, 0], + [-20.014, 0], + [0, 0], + [10.007, 17.333], + [0, 0] + ], + "o": [ + [0, 0], + [-10.008, 17.333], + [0, 0], + [20.015, 0], + [0, 0], + [-10.007, -17.333] + ], + "v": [ + [-22.516, -284.376], + [-338.376, 262.71], + [-315.86, 301.71], + [315.861, 301.71], + [338.378, 262.71], + [22.517, -284.376] + ], + "c": true + }, + "ix": 2 + }, + "nm": "Path 1", + "mn": "ADBE Vector Shape - Group", + "hd": false + }, + { + "ty": "st", + "c": { + "a": 0, + "k": [0.137254901961, 0.121568634931, 0.125490196078, 1], + "ix": 3 + }, + "o": { "a": 0, "k": 100, "ix": 4 }, + "w": { + "a": 1, + "k": [ + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 0, + "s": [48] + }, + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 60, + "s": [53] + }, + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 120, + "s": [68] + }, + { "t": 180, "s": [87] } + ], + "ix": 5 + }, + "lc": 1, + "lj": 1, + "ml": 10, + "bm": 0, + "nm": "Stroke 1", + "mn": "ADBE Vector Graphic - Stroke", + "hd": false + }, + { + "ty": "tr", + "p": { "a": 0, "k": [512, 418.652], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "Transform" + } + ], + "nm": "Group 1", + "np": 2, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 0, + "op": 241, + "st": 0, + "bm": 0 + }, + { + "ddd": 0, + "ind": 5, + "ty": 4, + "nm": "logo/logo-tri-stroke Outlines", + "sr": 1, + "ks": { + "o": { "a": 0, "k": 100, "ix": 11 }, + "r": { + "a": 1, + "k": [ + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 0, + "s": [0] + }, + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 60, + "s": [-15] + }, + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 120, + "s": [-30] + }, + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 180, + "s": [-45] + }, + { "t": 240, "s": [-60] } + ], + "ix": 10 + }, + "p": { "a": 0, "k": [512, 512, 0], "ix": 2, "l": 2 }, + "a": { "a": 0, "k": [512, 512, 0], "ix": 1, "l": 2 }, + "s": { + "a": 1, + "k": [ + { + "i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] }, + "o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] }, + "t": 0, + "s": [100, 100, 100] + }, + { + "i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] }, + "o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] }, + "t": 60, + "s": [66, 66, 100] + }, + { + "i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] }, + "o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] }, + "t": 120, + "s": [44.5, 44.5, 100] + }, + { + "i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] }, + "o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] }, + "t": 180, + "s": [30, 30, 100] + }, + { "t": 240, "s": [20.6, 20.6, 100] } + ], + "ix": 6, + "l": 2 + } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "ind": 0, + "ty": "sh", + "ix": 1, + "ks": { + "a": 0, + "k": { + "i": [ + [10.007, -17.333], + [0, 0], + [-20.014, 0], + [0, 0], + [10.007, 17.333], + [0, 0] + ], + "o": [ + [0, 0], + [-10.008, 17.333], + [0, 0], + [20.015, 0], + [0, 0], + [-10.007, -17.333] + ], + "v": [ + [-22.516, -284.376], + [-338.376, 262.71], + [-315.86, 301.71], + [315.861, 301.71], + [338.378, 262.71], + [22.517, -284.376] + ], + "c": true + }, + "ix": 2 + }, + "nm": "Path 1", + "mn": "ADBE Vector Shape - Group", + "hd": false + }, + { + "ty": "st", + "c": { + "a": 0, + "k": [0.137254901961, 0.121568634931, 0.125490196078, 1], + "ix": 3 + }, + "o": { "a": 0, "k": 100, "ix": 4 }, + "w": { + "a": 1, + "k": [ + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 0, + "s": [48] + }, + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 60, + "s": [53] + }, + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 120, + "s": [68] + }, + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 180, + "s": [87] + }, + { "t": 240, "s": [126] } + ], + "ix": 5 + }, + "lc": 1, + "lj": 1, + "ml": 10, + "bm": 0, + "nm": "Stroke 1", + "mn": "ADBE Vector Graphic - Stroke", + "hd": false + }, + { + "ty": "tr", + "p": { "a": 0, "k": [512, 418.652], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "Transform" + } + ], + "nm": "Group 1", + "np": 2, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 0, + "op": 241, + "st": 0, + "bm": 0 + } + ], + "markers": [] +} diff --git a/packages/component/src/components/affine-loading/loading-white.json b/packages/component/src/components/affine-loading/loading-white.json new file mode 100644 index 0000000000..7016549b97 --- /dev/null +++ b/packages/component/src/components/affine-loading/loading-white.json @@ -0,0 +1,750 @@ +{ + "v": "5.9.0", + "fr": 60, + "ip": 0, + "op": 241, + "w": 1024, + "h": 1024, + "nm": "logo-tri white", + "ddd": 0, + "assets": [], + "layers": [ + { + "ddd": 0, + "ind": 1, + "ty": 4, + "nm": "logo/logo-tri-stroke Outlines 2", + "sr": 1, + "ks": { + "o": { "a": 0, "k": 100, "ix": 11 }, + "r": { "a": 0, "k": 0, "ix": 10 }, + "p": { "a": 0, "k": [512, 512, 0], "ix": 2, "l": 2 }, + "a": { "a": 0, "k": [512, 512, 0], "ix": 1, "l": 2 }, + "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "ind": 0, + "ty": "sh", + "ix": 1, + "ks": { + "a": 0, + "k": { + "i": [ + [10.007, -17.333], + [0, 0], + [-20.014, 0], + [0, 0], + [10.007, 17.333], + [0, 0] + ], + "o": [ + [0, 0], + [-10.008, 17.333], + [0, 0], + [20.015, 0], + [0, 0], + [-10.007, -17.333] + ], + "v": [ + [-22.516, -284.376], + [-338.376, 262.71], + [-315.86, 301.71], + [315.861, 301.71], + [338.378, 262.71], + [22.517, -284.376] + ], + "c": true + }, + "ix": 2 + }, + "nm": "Path 1", + "mn": "ADBE Vector Shape - Group", + "hd": false + }, + { + "ty": "st", + "c": { "a": 0, "k": [1, 1, 1, 1], "ix": 3 }, + "o": { "a": 0, "k": 100, "ix": 4 }, + "w": { "a": 0, "k": 48, "ix": 5 }, + "lc": 1, + "lj": 1, + "ml": 10, + "bm": 0, + "nm": "Stroke 1", + "mn": "ADBE Vector Graphic - Stroke", + "hd": false + }, + { + "ty": "tr", + "p": { "a": 0, "k": [512, 418.652], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "Transform" + } + ], + "nm": "Group 1", + "np": 2, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 0, + "op": 241, + "st": 0, + "bm": 0 + }, + { + "ddd": 0, + "ind": 2, + "ty": 4, + "nm": "logo/logo-tri-stroke Outlines 3", + "sr": 1, + "ks": { + "o": { "a": 0, "k": 100, "ix": 11 }, + "r": { + "a": 1, + "k": [ + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 0, + "s": [0] + }, + { "t": 60, "s": [-15] } + ], + "ix": 10 + }, + "p": { "a": 0, "k": [512, 512, 0], "ix": 2, "l": 2 }, + "a": { "a": 0, "k": [512, 512, 0], "ix": 1, "l": 2 }, + "s": { + "a": 1, + "k": [ + { + "i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] }, + "o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] }, + "t": 0, + "s": [100, 100, 100] + }, + { "t": 60, "s": [66, 66, 100] } + ], + "ix": 6, + "l": 2 + } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "ind": 0, + "ty": "sh", + "ix": 1, + "ks": { + "a": 0, + "k": { + "i": [ + [10.007, -17.333], + [0, 0], + [-20.014, 0], + [0, 0], + [10.007, 17.333], + [0, 0] + ], + "o": [ + [0, 0], + [-10.008, 17.333], + [0, 0], + [20.015, 0], + [0, 0], + [-10.007, -17.333] + ], + "v": [ + [-22.516, -284.376], + [-338.376, 262.71], + [-315.86, 301.71], + [315.861, 301.71], + [338.378, 262.71], + [22.517, -284.376] + ], + "c": true + }, + "ix": 2 + }, + "nm": "Path 1", + "mn": "ADBE Vector Shape - Group", + "hd": false + }, + { + "ty": "st", + "c": { "a": 0, "k": [1, 1, 1, 1], "ix": 3 }, + "o": { "a": 0, "k": 100, "ix": 4 }, + "w": { + "a": 1, + "k": [ + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 0, + "s": [48] + }, + { "t": 60, "s": [53] } + ], + "ix": 5 + }, + "lc": 1, + "lj": 1, + "ml": 10, + "bm": 0, + "nm": "Stroke 1", + "mn": "ADBE Vector Graphic - Stroke", + "hd": false + }, + { + "ty": "tr", + "p": { "a": 0, "k": [512, 418.652], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "Transform" + } + ], + "nm": "Group 1", + "np": 2, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 0, + "op": 241, + "st": 0, + "bm": 0 + }, + { + "ddd": 0, + "ind": 3, + "ty": 4, + "nm": "logo/logo-tri-stroke Outlines 4", + "sr": 1, + "ks": { + "o": { "a": 0, "k": 100, "ix": 11 }, + "r": { + "a": 1, + "k": [ + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 0, + "s": [0] + }, + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 60, + "s": [-15] + }, + { "t": 120, "s": [-30] } + ], + "ix": 10 + }, + "p": { "a": 0, "k": [512, 512, 0], "ix": 2, "l": 2 }, + "a": { "a": 0, "k": [512, 512, 0], "ix": 1, "l": 2 }, + "s": { + "a": 1, + "k": [ + { + "i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] }, + "o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] }, + "t": 0, + "s": [100, 100, 100] + }, + { + "i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] }, + "o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] }, + "t": 60, + "s": [66, 66, 100] + }, + { "t": 120, "s": [44.5, 44.5, 100] } + ], + "ix": 6, + "l": 2 + } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "ind": 0, + "ty": "sh", + "ix": 1, + "ks": { + "a": 0, + "k": { + "i": [ + [10.007, -17.333], + [0, 0], + [-20.014, 0], + [0, 0], + [10.007, 17.333], + [0, 0] + ], + "o": [ + [0, 0], + [-10.008, 17.333], + [0, 0], + [20.015, 0], + [0, 0], + [-10.007, -17.333] + ], + "v": [ + [-22.516, -284.376], + [-338.376, 262.71], + [-315.86, 301.71], + [315.861, 301.71], + [338.378, 262.71], + [22.517, -284.376] + ], + "c": true + }, + "ix": 2 + }, + "nm": "Path 1", + "mn": "ADBE Vector Shape - Group", + "hd": false + }, + { + "ty": "st", + "c": { "a": 0, "k": [1, 1, 1, 1], "ix": 3 }, + "o": { "a": 0, "k": 100, "ix": 4 }, + "w": { + "a": 1, + "k": [ + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 0, + "s": [48] + }, + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 60, + "s": [53] + }, + { "t": 120, "s": [68] } + ], + "ix": 5 + }, + "lc": 1, + "lj": 1, + "ml": 10, + "bm": 0, + "nm": "Stroke 1", + "mn": "ADBE Vector Graphic - Stroke", + "hd": false + }, + { + "ty": "tr", + "p": { "a": 0, "k": [512, 418.652], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "Transform" + } + ], + "nm": "Group 1", + "np": 2, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 0, + "op": 241, + "st": 0, + "bm": 0 + }, + { + "ddd": 0, + "ind": 4, + "ty": 4, + "nm": "logo/logo-tri-stroke Outlines 5", + "sr": 1, + "ks": { + "o": { "a": 0, "k": 100, "ix": 11 }, + "r": { + "a": 1, + "k": [ + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 0, + "s": [0] + }, + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 60, + "s": [-15] + }, + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 120, + "s": [-30] + }, + { "t": 180, "s": [-45] } + ], + "ix": 10 + }, + "p": { "a": 0, "k": [512, 512, 0], "ix": 2, "l": 2 }, + "a": { "a": 0, "k": [512, 512, 0], "ix": 1, "l": 2 }, + "s": { + "a": 1, + "k": [ + { + "i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] }, + "o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] }, + "t": 0, + "s": [100, 100, 100] + }, + { + "i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] }, + "o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] }, + "t": 60, + "s": [66, 66, 100] + }, + { + "i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] }, + "o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] }, + "t": 120, + "s": [44.5, 44.5, 100] + }, + { "t": 180, "s": [30, 30, 100] } + ], + "ix": 6, + "l": 2 + } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "ind": 0, + "ty": "sh", + "ix": 1, + "ks": { + "a": 0, + "k": { + "i": [ + [10.007, -17.333], + [0, 0], + [-20.014, 0], + [0, 0], + [10.007, 17.333], + [0, 0] + ], + "o": [ + [0, 0], + [-10.008, 17.333], + [0, 0], + [20.015, 0], + [0, 0], + [-10.007, -17.333] + ], + "v": [ + [-22.516, -284.376], + [-338.376, 262.71], + [-315.86, 301.71], + [315.861, 301.71], + [338.378, 262.71], + [22.517, -284.376] + ], + "c": true + }, + "ix": 2 + }, + "nm": "Path 1", + "mn": "ADBE Vector Shape - Group", + "hd": false + }, + { + "ty": "st", + "c": { "a": 0, "k": [1, 1, 1, 1], "ix": 3 }, + "o": { "a": 0, "k": 100, "ix": 4 }, + "w": { + "a": 1, + "k": [ + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 0, + "s": [48] + }, + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 60, + "s": [53] + }, + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 120, + "s": [68] + }, + { "t": 180, "s": [87] } + ], + "ix": 5 + }, + "lc": 1, + "lj": 1, + "ml": 10, + "bm": 0, + "nm": "Stroke 1", + "mn": "ADBE Vector Graphic - Stroke", + "hd": false + }, + { + "ty": "tr", + "p": { "a": 0, "k": [512, 418.652], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "Transform" + } + ], + "nm": "Group 1", + "np": 2, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 0, + "op": 241, + "st": 0, + "bm": 0 + }, + { + "ddd": 0, + "ind": 5, + "ty": 4, + "nm": "logo/logo-tri-stroke Outlines", + "sr": 1, + "ks": { + "o": { "a": 0, "k": 100, "ix": 11 }, + "r": { + "a": 1, + "k": [ + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 0, + "s": [0] + }, + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 60, + "s": [-15] + }, + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 120, + "s": [-30] + }, + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 180, + "s": [-45] + }, + { "t": 240, "s": [-60] } + ], + "ix": 10 + }, + "p": { "a": 0, "k": [512, 512, 0], "ix": 2, "l": 2 }, + "a": { "a": 0, "k": [512, 512, 0], "ix": 1, "l": 2 }, + "s": { + "a": 1, + "k": [ + { + "i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] }, + "o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] }, + "t": 0, + "s": [100, 100, 100] + }, + { + "i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] }, + "o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] }, + "t": 60, + "s": [66, 66, 100] + }, + { + "i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] }, + "o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] }, + "t": 120, + "s": [44.5, 44.5, 100] + }, + { + "i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] }, + "o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] }, + "t": 180, + "s": [30, 30, 100] + }, + { "t": 240, "s": [20.6, 20.6, 100] } + ], + "ix": 6, + "l": 2 + } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "ind": 0, + "ty": "sh", + "ix": 1, + "ks": { + "a": 0, + "k": { + "i": [ + [10.007, -17.333], + [0, 0], + [-20.014, 0], + [0, 0], + [10.007, 17.333], + [0, 0] + ], + "o": [ + [0, 0], + [-10.008, 17.333], + [0, 0], + [20.015, 0], + [0, 0], + [-10.007, -17.333] + ], + "v": [ + [-22.516, -284.376], + [-338.376, 262.71], + [-315.86, 301.71], + [315.861, 301.71], + [338.378, 262.71], + [22.517, -284.376] + ], + "c": true + }, + "ix": 2 + }, + "nm": "Path 1", + "mn": "ADBE Vector Shape - Group", + "hd": false + }, + { + "ty": "st", + "c": { "a": 0, "k": [1, 1, 1, 1], "ix": 3 }, + "o": { "a": 0, "k": 100, "ix": 4 }, + "w": { + "a": 1, + "k": [ + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 0, + "s": [48] + }, + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 60, + "s": [53] + }, + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 120, + "s": [68] + }, + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 180, + "s": [87] + }, + { "t": 240, "s": [126] } + ], + "ix": 5 + }, + "lc": 1, + "lj": 1, + "ml": 10, + "bm": 0, + "nm": "Stroke 1", + "mn": "ADBE Vector Graphic - Stroke", + "hd": false + }, + { + "ty": "tr", + "p": { "a": 0, "k": [512, 418.652], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "Transform" + } + ], + "nm": "Group 1", + "np": 2, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 0, + "op": 241, + "st": 0, + "bm": 0 + } + ], + "markers": [] +} diff --git a/apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/CustomLottie.tsx b/packages/component/src/components/internal-lottie/index.tsx similarity index 85% rename from apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/CustomLottie.tsx rename to packages/component/src/components/internal-lottie/index.tsx index fdcbfc4d7b..34b10212d6 100644 --- a/apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/CustomLottie.tsx +++ b/packages/component/src/components/internal-lottie/index.tsx @@ -1,9 +1,8 @@ -import { atom, useAtomValue } from 'jotai'; +import { lottieAtom } from '@affine/jotai'; +import { useAtomValue } from 'jotai'; import type { FC } from 'react'; import { useEffect, useRef } from 'react'; -const lottieAtom = atom(async () => import('lottie-web').then(m => m.default)); - type CustomLottieProps = { options: { loop?: boolean | number | undefined; @@ -19,7 +18,7 @@ type CustomLottieProps = { height?: number | string | undefined; }; -const CustomLottie: FC = ({ +export const InternalLottie: FC = ({ options, isStopped, speed, @@ -55,4 +54,3 @@ const CustomLottie: FC = ({ return
; }; -export default CustomLottie; diff --git a/packages/component/src/stories/AffineLoading.stories.tsx b/packages/component/src/stories/AffineLoading.stories.tsx new file mode 100644 index 0000000000..a551099a98 --- /dev/null +++ b/packages/component/src/stories/AffineLoading.stories.tsx @@ -0,0 +1,10 @@ +import type { StoryFn } from '@storybook/react'; + +import { AffineLoading } from '../components/affine-loading'; + +export default { + title: 'AFFiNE/Loading', + component: AffineLoading, +}; + +export const Default: StoryFn = () => ; diff --git a/packages/jotai/package.json b/packages/jotai/package.json index 85dbb3b2a4..616db19a61 100644 --- a/packages/jotai/package.json +++ b/packages/jotai/package.json @@ -5,5 +5,11 @@ "dependencies": { "@affine/env": "workspace:*", "jotai": "^2.0.4" + }, + "devDependencies": { + "lottie-web": "^5.11.0" + }, + "peerDependencies": { + "lottie-web": "*" } } diff --git a/packages/jotai/src/index.ts b/packages/jotai/src/index.ts index 01312073d9..506c8ab28a 100644 --- a/packages/jotai/src/index.ts +++ b/packages/jotai/src/index.ts @@ -46,3 +46,5 @@ export function atomWithSyncStorage(key: string, initialValue: Value) { return anAtom; } + +export * from './resource'; diff --git a/packages/jotai/src/resource.ts b/packages/jotai/src/resource.ts new file mode 100644 index 0000000000..f80fabfc53 --- /dev/null +++ b/packages/jotai/src/resource.ts @@ -0,0 +1,5 @@ +import { atom } from 'jotai'; + +export const lottieAtom = atom(async () => + import('lottie-web').then(m => m.default) +); diff --git a/yarn.lock b/yarn.lock index ea02e55e54..3ed196f927 100644 --- a/yarn.lock +++ b/yarn.lock @@ -77,6 +77,7 @@ __metadata: jest-mock: ^29.5.0 kebab-case: ^1.0.2 lit: ^2.7.2 + lottie-web: ^5.11.0 react: ^18.2.0 react-dnd: ^16.0.1 react-dnd-html5-backend: ^16.0.1 @@ -148,6 +149,9 @@ __metadata: dependencies: "@affine/env": "workspace:*" jotai: ^2.0.4 + lottie-web: ^5.11.0 + peerDependencies: + lottie-web: "*" languageName: unknown linkType: soft