Skip to content

Commit 1103acc

Browse files
nonzzznonzzz
committed
chore: stash
1 parent 747a1d7 commit 1103acc

File tree

13 files changed

+399
-60
lines changed

13 files changed

+399
-60
lines changed

‎js-plugins/visualizer/postcss.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ module.exports = {
88
"src/client/pages/**/*.{js,jsx,ts,tsx}",
99
"src/client/themes/**/*.{js,jsx,ts,tsx}",
1010
"src/client/components/**/*.{js,jsx,ts,tsx}",
11+
"src/client/application.tsx",
1112
],
1213
babelConfig: {
1314
parserOpts: {

‎js-plugins/visualizer/src/client/application.tsx

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,26 @@ import {
44
useApplicationContext
55
} from './context';
66
import { NavHead } from './components/nav-head/nav-head';
7-
import './stylex.css';
8-
import './reset.css';
97
import { useEffect } from 'react';
108
import { Inspect } from './components/inspect';
9+
import { colors } from './themes/color.stylex';
10+
import { Analysis } from './components/analysis';
11+
import './stylex.css';
12+
import './reset.css';
13+
14+
function Content() {
15+
const { controlMode } = useApplicationContext();
16+
return (
17+
<div
18+
id='container'
19+
stylex={{
20+
height: 'calc(100vh - 64px)'
21+
}}
22+
>
23+
{controlMode === 'inspect' ? <Inspect /> : <Analysis />}
24+
</div>
25+
);
26+
}
1127

1228
export function App() {
1329
const { theme } = useApplicationContext();
@@ -22,13 +38,13 @@ export function App() {
2238
stylex={{
2339
height: '100%',
2440
width: '100%',
25-
position: 'relative'
41+
position: 'relative',
42+
backgroundColor: colors.background,
43+
color: colors.foreground
2644
}}
2745
>
2846
<NavHead />
29-
<div id='container' style={{ height: 'calc(100vh - 64px)' }}>
30-
<Inspect />
31-
</div>
47+
<Content />
3248
</div>
3349
</ApplicationProvider>
3450
);

‎js-plugins/visualizer/src/client/components/button/button.tsx

Lines changed: 32 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
1-
import { inline } from '@stylex-extend/core'
2-
import * as stylex from '@stylexjs/stylex'
3-
import { clsx } from 'clsx'
4-
import React from 'react'
5-
import { useScale, withScale } from '../../composables'
1+
import { inline } from '@stylex-extend/core';
2+
import * as stylex from '@stylexjs/stylex';
3+
import { clsx } from 'clsx';
4+
import React from 'react';
5+
import { useScale, withScale } from '../../composables';
6+
import { colors } from '../../themes/color.stylex';
67

78
interface Props {
8-
icon?: React.ReactNode
9-
auto?: boolean
10-
type?: 'default' | 'secondary'
9+
icon?: React.ReactNode;
10+
auto?: boolean;
11+
type?: 'default' | 'secondary';
1112
}
1213

13-
type ButtonProps =
14-
& Props
15-
& Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof Props>
14+
type ButtonProps = Props &
15+
Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof Props>;
1616

1717
const styles = stylex.create({
1818
text: {
@@ -40,14 +40,16 @@ const styles = stylex.create({
4040
width: 'calc(var(--button-height) / 2.35)'
4141
}
4242
}
43-
})
43+
});
4444

4545
function getButtonChildrenWithIcon(
4646
auto: boolean,
4747
icon: React.ReactNode,
4848
children: React.ReactNode
4949
) {
50-
if (!icon) { return <div {...stylex.props(styles.text)}>{children}</div> }
50+
if (!icon) {
51+
return <div {...stylex.props(styles.text)}>{children}</div>;
52+
}
5153
if (icon && !children) {
5254
return (
5355
<span
@@ -58,14 +60,14 @@ function getButtonChildrenWithIcon(
5860
>
5961
{icon}
6062
</span>
61-
)
63+
);
6264
}
6365
return (
6466
<>
6567
<span {...stylex.props(styles.icon)}>{icon}</span>
6668
<div {...stylex.props(styles.text)}>{children}</div>
6769
</>
68-
)
70+
);
6971
}
7072

7173
const ButtonComponent = React.forwardRef<HTMLButtonElement, ButtonProps>(
@@ -78,9 +80,9 @@ const ButtonComponent = React.forwardRef<HTMLButtonElement, ButtonProps>(
7880
icon,
7981
children,
8082
...rest
81-
} = props
83+
} = props;
8284

83-
const { SCALES } = useScale()
85+
const { SCALES } = useScale();
8486
const { className, style } = stylex.props(
8587
inline({
8688
boxSizing: 'border-box',
@@ -92,15 +94,16 @@ const ButtonComponent = React.forwardRef<HTMLButtonElement, ButtonProps>(
9294
justifyContent: 'center',
9395
textAlign: 'center',
9496
whiteSpace: 'nowrap',
95-
transition: 'background-color 200ms ease 0s, box-shadow 200ms ease 0ms, border 200ms ease 0ms, color 200ms ease 0ms',
97+
transition:
98+
'background-color 200ms ease 0s, box-shadow 200ms ease 0ms, border 200ms ease 0ms, color 200ms ease 0ms',
9699
position: 'relative',
97100
overflow: 'hidden',
98101
color: {
99102
default: '#666',
100103
':hover': '#000'
101104
},
102-
backgroundColor: '#fff',
103-
border: '1px solid #eaeaea',
105+
backgroundColor: 'transparent',
106+
border: `1px solid ${colors.border}`,
104107
cursor: 'pointer',
105108
width: 'initial',
106109
':hover': {
@@ -113,11 +116,9 @@ const ButtonComponent = React.forwardRef<HTMLButtonElement, ButtonProps>(
113116
padding: `${SCALES.pt(0)} ${auto ? SCALES.pr(1.15) : SCALES.pr(1.375)} ${SCALES.pt(0)} ${
114117
auto ? SCALES.pl(1.15) : SCALES.pl(1.375)
115118
}`,
116-
margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${
117-
SCALES.ml(
118-
0
119-
)
120-
}`,
119+
margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(
120+
0
121+
)}`,
121122
'--button-height': SCALES.height(2.5),
122123
'--button-icon-padding': SCALES.pl(0.727),
123124
...(auto && { width: 'auto' }),
@@ -127,22 +128,22 @@ const ButtonComponent = React.forwardRef<HTMLButtonElement, ButtonProps>(
127128
color: '#fff'
128129
})
129130
})
130-
)
131+
);
131132

132-
const classes = clsx('button', className, userClassName)
133+
const classes = clsx('button', className, userClassName);
133134

134135
return (
135136
<button
136137
ref={ref}
137138
className={classes}
138139
style={{ ...style, ...userStyle }}
139140
{...rest}
140-
type="button"
141+
type='button'
141142
>
142143
{getButtonChildrenWithIcon(auto, icon, children)}
143144
</button>
144-
)
145+
);
145146
}
146-
)
147+
);
147148

148-
export const Button = withScale(ButtonComponent)
149+
export const Button = withScale(ButtonComponent);

‎js-plugins/visualizer/src/client/components/inspect/inspect.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
import { useEffect } from 'react';
2+
import { apis } from '../../shared';
3+
14
export function Inspect() {
5+
// temporary resolution just for check ui render.
6+
useEffect(() => {
7+
apis.getStats().then((res) => {
8+
console.log(res);
9+
});
10+
}, []);
211
return <div>Inspect</div>;
312
}

‎js-plugins/visualizer/src/client/components/inspect/module-list.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
function Module() {}
2+
3+
export function ModuleList() {
4+
//
5+
}

‎js-plugins/visualizer/src/client/components/nav-head/nav-head.tsx

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
1-
import { useApplicationContext, useToggleTheme } from '../../context';
2-
import type { Theme } from '../../context';
1+
import {
2+
useApplicationContext,
3+
useSetControlMode,
4+
useToggleTheme
5+
} from '../../context';
36
import { colors } from '../../themes/color.stylex';
47
import * as stylex from '@stylexjs/stylex';
58
import { Input } from '../input';
@@ -131,10 +134,12 @@ const CONTROL_OPTIONS: SelectOptionProps[] = [
131134
];
132135

133136
export function NavHead() {
134-
const { theme } = useApplicationContext();
137+
const { theme, controlMode } = useApplicationContext();
135138

136139
const toggleTheme = useToggleTheme();
137140

141+
const setControlMode = useSetControlMode();
142+
138143
const handleGitHubButtonClick = () => {
139144
window.open('https://www.farmfe.org/');
140145
};
@@ -144,11 +149,11 @@ export function NavHead() {
144149
stylex={{
145150
height: '64px',
146151
boxSizing: 'border-box',
147-
background: colors.background,
148152
padding: '12px',
149153
display: 'flex',
150154
justifyContent: 'space-between',
151-
alignItems: 'center'
155+
alignItems: 'center',
156+
borderBottom: `1px solid ${colors.accents_2}`
152157
}}
153158
>
154159
<div id='search-container'>
@@ -160,7 +165,8 @@ export function NavHead() {
160165
w='120px'
161166
scale={0.5}
162167
pure
163-
value={'inspect'}
168+
value={controlMode}
169+
onChange={setControlMode}
164170
options={CONTROL_OPTIONS}
165171
/>
166172
<Spacer w={0.75} inline />

‎js-plugins/visualizer/src/client/components/select/dropdown.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ import {
1515
import { CSSTransition } from '../css-transition';
1616
import { useSelect } from './context';
1717
import { getRefRect } from './layouts';
18+
import { colors } from '../../themes/color.stylex';
19+
import { expressiveness } from '../../themes/expressiveness.stylex';
1820

1921
interface Props {
2022
visible: boolean;
@@ -112,8 +114,8 @@ const SelectDropdown = React.forwardRef<
112114
ref={internalDropdownRef}
113115
stylex={{
114116
borderRadius: '6px',
115-
boxShadow: '0 30px 60px rgba(0, 0, 0, 0.12)',
116-
backgroundColor: '#fff',
117+
boxShadow: expressiveness.shadowLarge,
118+
backgroundColor: colors.background,
117119
maxHeight: '17em',
118120
overflowY: 'auto',
119121
overflowAnchor: 'none',

‎js-plugins/visualizer/src/client/components/select/select-option.tsx

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@ import React, { ReactNode, useMemo } from 'react';
22
import { useScale, withScale } from '../../composables';
33
import { useSelect } from './context';
44
import { Ellipsis } from './ellipsis';
5+
import { colors } from '../../themes/color.stylex';
56

67
interface Props {
78
label?: string | ReactNode;
89
value?: string;
10+
pure?: boolean;
911
disabled?: boolean;
1012
preventAllEvents?: boolean;
1113
}
@@ -24,6 +26,7 @@ function SelectOptionComponent(
2426
value: initialValue,
2527
disabled = false,
2628
preventAllEvents,
29+
pure,
2730
...rest
2831
} = props;
2932
const { SCALES } = useScale();
@@ -45,24 +48,30 @@ function SelectOptionComponent(
4548

4649
const color = useMemo(() => {
4750
if (isDisabled) {
48-
return '#888';
51+
return colors.accents_4;
4952
}
50-
return selected ? '#000' : '#666';
53+
return selected ? colors.foreground : colors.accents_5;
5154
}, [selected, isDisabled]);
5255

5356
const bgColor = useMemo(() => {
57+
if (pure) {
58+
return 'transparent';
59+
}
5460
if (isDisabled) {
5561
return '#fafafa';
5662
}
57-
return selected ? '#eaeaea' : '#fff';
58-
}, [selected, isDisabled]);
63+
return selected ? colors.accents_2 : colors.background;
64+
}, [selected, isDisabled, pure]);
5965

6066
const hoverBgColor = useMemo(() => {
67+
if (pure) {
68+
return 'transparent';
69+
}
6170
if (isDisabled || selected) {
6271
return bgColor;
6372
}
64-
return '#fafafa';
65-
}, [isDisabled, bgColor, selected]);
73+
return colors.accents_1;
74+
}, [isDisabled, bgColor, selected, pure]);
6675

6776
const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
6877
if (preventAllEvents) {
@@ -74,7 +83,7 @@ function SelectOptionComponent(
7483
if (isDisabled) {
7584
return;
7685
}
77-
updateValue?.(initialValue!);
86+
updateValue?.(initialValue);
7887
};
7988

8089
return (
@@ -96,7 +105,7 @@ function SelectOptionComponent(
96105
},
97106
color: {
98107
default: color,
99-
':hover': '#333'
108+
':hover': colors.accents_7
100109
},
101110
cursor: 'pointer',
102111
...(isDisabled && { cursor: 'not-allowed' }),

‎js-plugins/visualizer/src/client/components/select/select.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { Ellipsis } from './ellipsis';
1313
import { SelectMultipleValue } from './select-multiple';
1414
import { SelectOption } from './select-option';
1515
import type { SelectOptionProps } from './select-option';
16+
import { colors } from '../../themes/color.stylex';
1617

1718
interface Props {
1819
options: SelectOptionProps[];
@@ -110,7 +111,9 @@ const SelectComponent = React.forwardRef(
110111

111112
if (!multiple) {
112113
return (
113-
<SelectOption preventAllEvents>{getLabel(data[0])}</SelectOption>
114+
<SelectOption pure preventAllEvents>
115+
{getLabel(data[0])}
116+
</SelectOption>
114117
);
115118
}
116119

@@ -176,10 +179,10 @@ const SelectComponent = React.forwardRef(
176179
overflow: 'hidden',
177180
transition:
178181
' border 150ms ease-in 0s, color 200ms ease-out 0s, box-shadow 200ms ease 0s',
179-
border: '1px solid #eaeaea',
182+
border: `1px solid ${colors.border}`,
180183
borderRadius: '6px',
181184
':hover': {
182-
borderColor: '#000'
185+
borderColor: colors.foreground
183186
},
184187
...(disabled && { ':hover': { borderColor: '#eaeaea' } }),
185188
'--select-font-size': SCALES.font(0.875),

0 commit comments

Comments
 (0)