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

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

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

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

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

2
hyperglass/ui/util.js
View File

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