@moises.ai/design-system 3.6.25 → 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'
|
|
@@ -51,6 +51,7 @@ const ProjectsListItem = ({
|
|
|
51
51
|
cover,
|
|
52
52
|
type,
|
|
53
53
|
tracks = [],
|
|
54
|
+
isLoading = false,
|
|
54
55
|
...props
|
|
55
56
|
}) => {
|
|
56
57
|
const { projects, onClickTrack, onInsertAllTracks, onProjectClick, openedItem, setOpenedItem } = useContext(ProjectsListContext)
|
|
@@ -105,13 +106,20 @@ const ProjectsListItem = ({
|
|
|
105
106
|
|
|
106
107
|
{openedItem === id && (
|
|
107
108
|
<Flex direction="column">
|
|
108
|
-
{tracks.length === 0 && (
|
|
109
|
+
{tracks.length === 0 && !isLoading && (
|
|
109
110
|
<Flex direction="row" gap="3" p="5" pt="2" align="center" justify="center">
|
|
110
111
|
<NoMusicIcon width={16} height={16} style={{ color: 'var(--neutral-alpha-10)' }} />
|
|
111
112
|
<Text size="2" style={{ color: 'var(--neutral-alpha-10)' }}>This file has no tracks</Text>
|
|
112
113
|
</Flex>
|
|
113
114
|
)}
|
|
114
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
|
+
|
|
115
123
|
{tracks.length > 0 && (
|
|
116
124
|
<Flex direction="column" gap="1">
|
|
117
125
|
{tracks.slice(0, showAllTracks ? tracks.length : 6).map((track) => (
|
|
@@ -43,3 +43,96 @@ export const Default = {
|
|
|
43
43
|
)
|
|
44
44
|
},
|
|
45
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}
|
|
129
|
+
>
|
|
130
|
+
{(projects) =>
|
|
131
|
+
projects.map((project) => (
|
|
132
|
+
<ProjectsList.Item key={project.id} {...project} />
|
|
133
|
+
))
|
|
134
|
+
}
|
|
135
|
+
</ProjectsList>
|
|
136
|
+
)
|
|
137
|
+
},
|
|
138
|
+
}
|