Newer
Older
Phoomparin Mano
committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
import type { ComponentProps } from "react";
import { MetabaseProvider, defineEmbeddingSdkTheme } from "embedding-sdk";
import { storybookSdkDefaultConfig } from "embedding-sdk/test/CommonSdkStoryWrapper";
import { Box } from "metabase/ui";
import { InteractiveQuestion } from "./InteractiveQuestion";
const QUESTION_ID = (window as any).QUESTION_ID || 12;
type InteractiveQuestionComponentProps = ComponentProps<
typeof InteractiveQuestion
>;
export default {
title: "EmbeddingSDK/InteractiveQuestion/Themed",
component: InteractiveQuestion,
parameters: {
layout: "fullscreen",
},
};
const colors = {
primary: "#DF75E9",
filter: "#7ABBF9",
lighterGrey: "#E3E7E4",
lightGrey: "#ADABA9",
darkGrey: "#3B3F3F",
background: "#151C20",
};
const darkTheme = defineEmbeddingSdkTheme({
fontFamily: "Inter",
fontSize: "14px",
colors: {
brand: colors.primary,
"brand-hover": colors.darkGrey,
"brand-hover-light": colors.darkGrey,
filter: colors.filter,
"text-primary": colors.lighterGrey,
"text-secondary": colors.lighterGrey,
"text-tertiary": colors.lighterGrey,
border: colors.darkGrey,
background: colors.background,
"background-secondary": colors.darkGrey,
"background-hover": colors.background,
"background-disabled": colors.darkGrey,
charts: [
colors.primary,
colors.filter,
"#ED6A5A",
"#FED18C",
"#82A74B",
"#FF8D69",
"#ED6A5A",
"#FED18C",
],
positive: "#45DF4C",
negative: "#FF3389",
},
components: {
cartesian: {
padding: "6px 16px",
},
dashboard: {
card: {
border: `"1px solid ${colors.darkGrey}"`,
backgroundColor: "#212426",
},
},
number: {
value: {
fontSize: "18px",
lineHeight: "22px",
},
},
},
});
const Wrapper = ({ children }: { children: React.ReactNode }) => (
<MetabaseProvider config={storybookSdkDefaultConfig} theme={darkTheme}>
<Box p="xl" bg={colors.background}>
{children}
</Box>
</MetabaseProvider>
);
export const DarkTheme = {
render(args: InteractiveQuestionComponentProps) {
return (
<Wrapper>
<InteractiveQuestion {...args} />;
</Wrapper>
);
},
args: {
questionId: QUESTION_ID,
isSaveEnabled: true,
saveToCollectionId: undefined,
},
};
export const DarkThemeEditor = {
render(args: InteractiveQuestionComponentProps) {
return (
<Wrapper>
<InteractiveQuestion {...args}>
<InteractiveQuestion.Editor />
</InteractiveQuestion>
</Wrapper>
);
},
args: {
questionId: QUESTION_ID,
isSaveEnabled: true,
saveToCollectionId: undefined,
},
};