mirror/checktheroads-hyperglass
1
0
Fork 0
mirror of https://github.com/checktheroads/hyperglass synced 2024-05-11 05:55:08 +00:00
Code Releases Activity

continue adding structured output

Browse Source
This commit is contained in:
checktheroads
2020-04-26 09:06:54 -07:00
parent dddf8d8563
commit 69d8229402
5 changed files with 182 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

310
hyperglass/ui/components/ChakraSelect.js
View File

@@ -4,149 +4,173 @@ import Select from "react-select";
import { opposingColor } from "~/util";
const ChakraSelect = React.forwardRef(
({ placeholder = "Select...", isFullWidth, size, children, ...props }, ref) => {
const theme = useTheme();
const { colorMode } = useColorMode();
const sizeMap = {
lg: { height: theme.space[12] },
md: { height: theme.space[10] },
sm: { height: theme.space[8] },
};
const colorSetPrimaryBg = {
dark: theme.colors.primary[300],
light: theme.colors.primary[500],
};
const colorSetPrimaryColor = opposingColor(theme, colorSetPrimaryBg[colorMode]);
const bg = { dark: theme.colors.whiteAlpha[100], light: theme.colors.white };
const color = { dark: theme.colors.whiteAlpha[800], light: theme.colors.black };
const borderFocused = theme.colors.secondary[500];
const borderDisabled = theme.colors.whiteAlpha[100];
const border = { dark: theme.colors.whiteAlpha[50], light: theme.colors.gray[100] };
const borderRadius = theme.space[1];
const hoverColor = { dark: theme.colors.whiteAlpha[200], light: theme.colors.gray[300] };
const { height } = sizeMap[size];
const optionBgActive = {
dark: theme.colors.primary[400],
light: theme.colors.primary[600],
};
const optionBgColor = opposingColor(theme, optionBgActive[colorMode]);
const optionSelectedBg = {
dark: theme.colors.whiteAlpha[400],
light: theme.colors.blackAlpha[400],
};
const optionSelectedColor = opposingColor(theme, optionSelectedBg[colorMode]);
const selectedDisabled = theme.colors.whiteAlpha[400];
const placeholderColor = {
dark: theme.colors.whiteAlpha[400],
light: theme.colors.gray[400],
};
const menuBg = { dark: theme.colors.black, light: theme.colors.white };
const menuColor = { dark: theme.colors.white, light: theme.colors.blackAlpha[800] };
return (
<Select
ref={ref}
styles={{
container: (base) => ({
...base,
minHeight: height,
borderRadius: borderRadius,
width: "100%",
}),
control: (base, state) => ({
...base,
minHeight: height,
backgroundColor: bg[colorMode],
color: color[colorMode],
borderColor: state.isDisabled
? borderDisabled
: state.isFocused
? borderFocused
: border[colorMode],
borderRadius: borderRadius,
"&:hover": {
borderColor: hoverColor[colorMode],
},
}),
menu: (base) => ({
...base,
backgroundColor: menuBg[colorMode],
borderRadius: borderRadius,
}),
option: (base, state) => ({
...base,
backgroundColor: state.isDisabled
? selectedDisabled
: state.isSelected
? optionSelectedBg[colorMode]
: state.isFocused
? colorSetPrimaryBg[colorMode]
: "transparent",
color: state.isDisabled
? selectedDisabled
: state.isFocused
? colorSetPrimaryColor
: state.isSelected
? optionSelectedColor
: menuColor[colorMode],
fontSize: theme.fontSizes[size],
"&:active": {
backgroundColor: optionBgActive[colorMode],
color: optionBgColor,
},
}),
indicatorSeparator: (base) => ({
...base,
backgroundColor: placeholderColor[colorMode],
}),
dropdownIndicator: (base) => ({
...base,
color: placeholderColor[colorMode],
"&:hover": {
color: color[colorMode],
},
}),
valueContainer: (base) => ({
...base,
paddingLeft: theme.space[4],
paddingRight: theme.space[4],
}),
multiValue: (base) => ({
...base,
backgroundColor: colorSetPrimaryBg[colorMode],
}),
multiValueLabel: (base) => ({
...base,
color: colorSetPrimaryColor,
}),
multiValueRemove: (base) => ({
...base,
color: colorSetPrimaryColor,
"&:hover": {
color: colorSetPrimaryColor,
backgroundColor: "inherit",
},
}),
singleValue: (base) => ({
...base,
color: color[colorMode],
fontSize: theme.fontSizes[size],
}),
}}
placeholder={
<Text
color={placeholderColor[colorMode]}
fontSize={size}
fontFamily={theme.fonts.body}
>
{placeholder}
</Text>
}
{...props}
>
{children}
</Select>
);
}
(
{ placeholder = "Select...", isFullWidth, size, children, ...props },
ref
) => {
const theme = useTheme();
const { colorMode } = useColorMode();
const sizeMap = {
lg: { height: theme.space[12] },
md: { height: theme.space[10] },
sm: { height: theme.space[8] }
};
const colorSetPrimaryBg = {
dark: theme.colors.primary[300],
light: theme.colors.primary[500]
};
const colorSetPrimaryColor = opposingColor(
theme,
colorSetPrimaryBg[colorMode]
);
const bg = {
dark: theme.colors.whiteAlpha[100],
light: theme.colors.white
};
const color = {
dark: theme.colors.whiteAlpha[800],
light: theme.colors.black
};
const borderFocused = theme.colors.secondary[500];
const borderDisabled = theme.colors.whiteAlpha[100];
const border = {
dark: theme.colors.whiteAlpha[50],
light: theme.colors.gray[100]
};
const borderRadius = theme.space[1];
const hoverColor = {
dark: theme.colors.whiteAlpha[200],
light: theme.colors.gray[300]
};
const { height } = sizeMap[size];
const optionBgActive = {
dark: theme.colors.primary[400],
light: theme.colors.primary[600]
};
const optionBgColor = opposingColor(theme, optionBgActive[colorMode]);
const optionSelectedBg = {
dark: theme.colors.whiteAlpha[400],
light: theme.colors.blackAlpha[400]
};
const optionSelectedColor = opposingColor(
theme,
optionSelectedBg[colorMode]
);
const selectedDisabled = theme.colors.whiteAlpha[400];
const placeholderColor = {
dark: theme.colors.whiteAlpha[400],
light: theme.colors.gray[400]
};
const menuBg = { dark: theme.colors.black, light: theme.colors.white };
const menuColor = {
dark: theme.colors.white,
light: theme.colors.blackAlpha[800]
};
return (
<Select
ref={ref}
styles={{
container: base => ({
...base,
minHeight: height,
borderRadius: borderRadius,
width: "100%"
}),
control: (base, state) => ({
...base,
minHeight: height,
backgroundColor: bg[colorMode],
color: color[colorMode],
borderColor: state.isDisabled
? borderDisabled
: state.isFocused
? borderFocused
: border[colorMode],
borderRadius: borderRadius,
"&:hover": {
borderColor: hoverColor[colorMode]
}
}),
menu: base => ({
...base,
backgroundColor: menuBg[colorMode],
borderRadius: borderRadius
}),
option: (base, state) => ({
...base,
backgroundColor: state.isDisabled
? selectedDisabled
: state.isSelected
? optionSelectedBg[colorMode]
: state.isFocused
? colorSetPrimaryBg[colorMode]
: "transparent",
color: state.isDisabled
? selectedDisabled
: state.isFocused
? colorSetPrimaryColor
: state.isSelected
? optionSelectedColor
: menuColor[colorMode],
fontSize: theme.fontSizes[size],
"&:active": {
backgroundColor: optionBgActive[colorMode],
color: optionBgColor
}
}),
indicatorSeparator: base => ({
...base,
backgroundColor: placeholderColor[colorMode]
}),
dropdownIndicator: base => ({
...base,
color: placeholderColor[colorMode],
"&:hover": {
color: color[colorMode]
}
}),
valueContainer: base => ({
...base,
paddingLeft: theme.space[4],
paddingRight: theme.space[4]
}),
multiValue: base => ({
...base,
backgroundColor: colorSetPrimaryBg[colorMode]
}),
multiValueLabel: base => ({
...base,
color: colorSetPrimaryColor
}),
multiValueRemove: base => ({
...base,
color: colorSetPrimaryColor,
"&:hover": {
color: colorSetPrimaryColor,
backgroundColor: "inherit"
}
}),
singleValue: base => ({
...base,
color: color[colorMode],
fontSize: theme.fontSizes[size]
})
}}
placeholder={
<Text
color={placeholderColor[colorMode]}
fontSize={size}
fontFamily={theme.fonts.body}
>
{placeholder}
</Text>
}
{...props}
>
{children}
</Select>
);
}
);
ChakraSelect.displayName = "ChakraSelect";

2
hyperglass/ui/components/HyperglassProvider.js
View File

@@ -21,6 +21,8 @@ export const HyperglassProvider = ({ config, children }) => {
const value = useMemo(() => config, [config]);
const userTheme = value && makeTheme(value.web.theme);
const theme = value ? userTheme : defaultTheme;
// console.log(value);
// console.log(theme);
return (
<HyperglassContext.Provider value={value}>
<ThemeProvider theme={theme}>

1
hyperglass/ui/components/Table/MainTable.js
View File

@@ -11,6 +11,7 @@ const MainTable = ({ children, ...props }) => {
const { colorMode } = useColorMode();
return (
<Box
as="table"
css={css({
"&::-webkit-scrollbar": { height: "5px" },
"&::-webkit-scrollbar-track": {

16
hyperglass/ui/pages/_app.js
View File

@@ -1,14 +1,20 @@
import React from "react";
import { useRouter } from "next/router";
import { HyperglassProvider } from "~/components/HyperglassProvider";
import Error from "./_error";
const config = process.env._HYPERGLASS_CONFIG_;
const Hyperglass = ({ Component, pageProps }) => {
return (
<HyperglassProvider config={config}>
<Component {...pageProps} />
</HyperglassProvider>
);
const { asPath } = useRouter();
if (asPath === "/structured") {
return <Error msg="/structured" statusCode={404} />;
}
return (
<HyperglassProvider config={config}>
<Component {...pageProps} />
</HyperglassProvider>
);
};
Hyperglass.displayName = "Hyperglass";

2
hyperglass/ui/util.js
View File

@@ -10,7 +10,7 @@ const isDark = color => {
const isLight = color => isDark(color);
const opposingColor = (theme, color) => {
if (color.includes(".")) {
if (color.match(/^\w+\.\d+$/m)) {
const colorParts = color.split(".");
if (colorParts.length !== 2) {
throw Error(`Color is improperly formatted. Got '${color}'`);