@moises.ai/design-system 3.6.24 → 3.6.26
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/package.json
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Flex, Text, Separator } from '@radix-ui/themes'
|
|
1
|
+
import { Flex, Text, Separator, Spinner } from '@radix-ui/themes'
|
|
2
2
|
import styles from './ProjectsList.module.css'
|
|
3
3
|
import { useState, createContext, useContext, useCallback } from 'react'
|
|
4
4
|
import { ArrowLeftIcon, NoMusicIcon, ChevronDownIcon, ChevronUpIcon } from '../../icons'
|
|
@@ -7,6 +7,7 @@ import { Button } from '../Button/Button'
|
|
|
7
7
|
import { ProductsBrandPattern } from '../ProductsBrandPattern/ProductsBrandPattern'
|
|
8
8
|
|
|
9
9
|
const ProjectsListContext = createContext({
|
|
10
|
+
projects: [],
|
|
10
11
|
onClickTrack: null,
|
|
11
12
|
onInsertAllTracks: null,
|
|
12
13
|
onProjectClick: null,
|
|
@@ -28,6 +29,7 @@ export const ProjectsList = ({
|
|
|
28
29
|
return (
|
|
29
30
|
<ProjectsListContext.Provider
|
|
30
31
|
value={{
|
|
32
|
+
projects,
|
|
31
33
|
onClickTrack,
|
|
32
34
|
onInsertAllTracks,
|
|
33
35
|
onProjectClick,
|
|
@@ -49,9 +51,10 @@ const ProjectsListItem = ({
|
|
|
49
51
|
cover,
|
|
50
52
|
type,
|
|
51
53
|
tracks = [],
|
|
54
|
+
isLoading = false,
|
|
52
55
|
...props
|
|
53
56
|
}) => {
|
|
54
|
-
const { onClickTrack, onInsertAllTracks, onProjectClick, openedItem, setOpenedItem } = useContext(ProjectsListContext)
|
|
57
|
+
const { projects, onClickTrack, onInsertAllTracks, onProjectClick, openedItem, setOpenedItem } = useContext(ProjectsListContext)
|
|
55
58
|
const [showAllTracks, setShowAllTracks] = useState(false)
|
|
56
59
|
|
|
57
60
|
const handleClickProject = useCallback(() => {
|
|
@@ -103,13 +106,20 @@ const ProjectsListItem = ({
|
|
|
103
106
|
|
|
104
107
|
{openedItem === id && (
|
|
105
108
|
<Flex direction="column">
|
|
106
|
-
{tracks.length === 0 && (
|
|
109
|
+
{tracks.length === 0 && !isLoading && (
|
|
107
110
|
<Flex direction="row" gap="3" p="5" pt="2" align="center" justify="center">
|
|
108
111
|
<NoMusicIcon width={16} height={16} style={{ color: 'var(--neutral-alpha-10)' }} />
|
|
109
112
|
<Text size="2" style={{ color: 'var(--neutral-alpha-10)' }}>This file has no tracks</Text>
|
|
110
113
|
</Flex>
|
|
111
114
|
)}
|
|
112
115
|
|
|
116
|
+
{isLoading && (
|
|
117
|
+
<Flex direction="row" gap="3" p="5" align="center" justify="center">
|
|
118
|
+
<Spinner width={16} height={16} style={{ color: 'var(--neutral-alpha-10)' }} />
|
|
119
|
+
<Text size="2" style={{ color: 'var(--neutral-alpha-10)' }}>Loading tracks...</Text>
|
|
120
|
+
</Flex>
|
|
121
|
+
)}
|
|
122
|
+
|
|
113
123
|
{tracks.length > 0 && (
|
|
114
124
|
<Flex direction="column" gap="1">
|
|
115
125
|
{tracks.slice(0, showAllTracks ? tracks.length : 6).map((track) => (
|
|
@@ -15,6 +15,16 @@ export default {
|
|
|
15
15
|
export const Default = {
|
|
16
16
|
args: {
|
|
17
17
|
projects,
|
|
18
|
+
onProjectClick: (project, opened) => {
|
|
19
|
+
console.log('project', project)
|
|
20
|
+
console.log('opened', opened)
|
|
21
|
+
},
|
|
22
|
+
onClickTrack: (track) => {
|
|
23
|
+
console.log('track', track)
|
|
24
|
+
},
|
|
25
|
+
onInsertAllTracks: (tracks) => {
|
|
26
|
+
console.log('insert-all-tracks', tracks)
|
|
27
|
+
},
|
|
18
28
|
},
|
|
19
29
|
render: (args) => {
|
|
20
30
|
return (
|
|
@@ -22,6 +32,100 @@ export const Default = {
|
|
|
22
32
|
projects={args.projects}
|
|
23
33
|
onClickTrack={args.onClickTrack}
|
|
24
34
|
onInsertAllTracks={args.onInsertAllTracks}
|
|
35
|
+
onProjectClick={args.onProjectClick}
|
|
36
|
+
>
|
|
37
|
+
{(projects) =>
|
|
38
|
+
projects.map((project) => (
|
|
39
|
+
<ProjectsList.Item key={project.id} {...project} />
|
|
40
|
+
))
|
|
41
|
+
}
|
|
42
|
+
</ProjectsList>
|
|
43
|
+
)
|
|
44
|
+
},
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
export const WithEmptyProjects = {
|
|
48
|
+
args: {
|
|
49
|
+
projects: [{
|
|
50
|
+
id: '123',
|
|
51
|
+
title: 'Empty Project',
|
|
52
|
+
artist: null,
|
|
53
|
+
cover: null,
|
|
54
|
+
duration: 0,
|
|
55
|
+
type: 'studio',
|
|
56
|
+
}, {
|
|
57
|
+
id: '456',
|
|
58
|
+
title: 'Empty Project 2',
|
|
59
|
+
artist: null,
|
|
60
|
+
cover: null,
|
|
61
|
+
duration: 0,
|
|
62
|
+
type: 'master',
|
|
63
|
+
}],
|
|
64
|
+
onProjectClick: (project, opened) => {
|
|
65
|
+
console.log('project', project)
|
|
66
|
+
console.log('opened', opened)
|
|
67
|
+
},
|
|
68
|
+
onClickTrack: (track) => {
|
|
69
|
+
console.log('track', track)
|
|
70
|
+
},
|
|
71
|
+
onInsertAllTracks: (tracks) => {
|
|
72
|
+
console.log('insert-all-tracks', tracks)
|
|
73
|
+
},
|
|
74
|
+
},
|
|
75
|
+
render: (args) => {
|
|
76
|
+
return (
|
|
77
|
+
<ProjectsList
|
|
78
|
+
projects={args.projects}
|
|
79
|
+
onClickTrack={args.onClickTrack}
|
|
80
|
+
onInsertAllTracks={args.onInsertAllTracks}
|
|
81
|
+
onProjectClick={args.onProjectClick}
|
|
82
|
+
>
|
|
83
|
+
{(projects) =>
|
|
84
|
+
projects.map((project) => (
|
|
85
|
+
<ProjectsList.Item key={project.id} {...project} />
|
|
86
|
+
))
|
|
87
|
+
}
|
|
88
|
+
</ProjectsList>
|
|
89
|
+
)
|
|
90
|
+
},
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
export const WithProjectLoading = {
|
|
94
|
+
args: {
|
|
95
|
+
projects: [{
|
|
96
|
+
id: '123',
|
|
97
|
+
title: 'Project Loading',
|
|
98
|
+
artist: null,
|
|
99
|
+
cover: null,
|
|
100
|
+
duration: 0,
|
|
101
|
+
type: 'studio',
|
|
102
|
+
isLoading: true,
|
|
103
|
+
}, {
|
|
104
|
+
id: '456',
|
|
105
|
+
title: 'Empty Project 2',
|
|
106
|
+
artist: null,
|
|
107
|
+
cover: null,
|
|
108
|
+
duration: 0,
|
|
109
|
+
type: 'master',
|
|
110
|
+
}],
|
|
111
|
+
onProjectClick: (project, opened) => {
|
|
112
|
+
console.log('project', project)
|
|
113
|
+
console.log('opened', opened)
|
|
114
|
+
},
|
|
115
|
+
onClickTrack: (track) => {
|
|
116
|
+
console.log('track', track)
|
|
117
|
+
},
|
|
118
|
+
onInsertAllTracks: (tracks) => {
|
|
119
|
+
console.log('insert-all-tracks', tracks)
|
|
120
|
+
},
|
|
121
|
+
},
|
|
122
|
+
render: (args) => {
|
|
123
|
+
return (
|
|
124
|
+
<ProjectsList
|
|
125
|
+
projects={args.projects}
|
|
126
|
+
onClickTrack={args.onClickTrack}
|
|
127
|
+
onInsertAllTracks={args.onInsertAllTracks}
|
|
128
|
+
onProjectClick={args.onProjectClick}
|
|
25
129
|
>
|
|
26
130
|
{(projects) =>
|
|
27
131
|
projects.map((project) => (
|