Remove jss

This commit is contained in:
Nathan Bierema 2023-12-13 19:18:05 -05:00
parent ee82aa2f32
commit f61871930a
4 changed files with 3 additions and 204 deletions

View File

@ -50,8 +50,6 @@
"@types/redux-devtools-themes": "^1.0.3",
"hex-rgba": "^1.0.2",
"immutable": "^4.3.4",
"jss": "^10.10.0",
"jss-preset-default": "^10.10.0",
"lodash.debounce": "^4.0.8",
"react-base16-styling": "^0.9.1",
"react-json-tree": "^0.18.0",

View File

@ -1,24 +1,11 @@
import jss, { StyleSheet } from 'jss';
import preset from 'jss-preset-default';
import {
createStyling,
getBase16Theme,
invertTheme,
} from 'react-base16-styling';
import type {
StylingConfig,
StylingFunction,
Theme,
} from 'react-base16-styling';
import { getBase16Theme } from 'react-base16-styling';
import type { StylingConfig } from 'react-base16-styling';
import rgba from 'hex-rgba';
import * as reduxThemes from 'redux-devtools-themes';
import { Action } from 'redux';
import { createContext } from 'react';
import type { CurriedFunction1 } from 'lodash';
import { RtkQueryMonitorProps, StyleUtils } from '../types';
jss.setup(preset());
declare module '@emotion/react' {
export interface Theme {
TEXT_COLOR: string;
@ -88,53 +75,18 @@ export const colorMap = (theme: reduxThemes.Base16Theme) =>
TOGGLE_BUTTON_ERROR: rgba(theme.base08, 40),
}) as const;
type Color = keyof ReturnType<typeof colorMap>;
type ColorMap = {
[color in Color]: string;
};
const getSheetFromColorMap = (map: ColorMap) => ({});
let themeSheet: StyleSheet;
const getDefaultThemeStyling = (theme: reduxThemes.Base16Theme) => {
if (themeSheet) {
themeSheet.detach();
}
themeSheet = jss
.createStyleSheet(getSheetFromColorMap(colorMap(theme)))
.attach();
return themeSheet.classes;
};
export const createStylingFromTheme: CurriedFunction1<
Theme | undefined,
StylingFunction
> = createStyling(getDefaultThemeStyling, {
defaultBase16: reduxThemes.nicinabox,
base16Themes: { ...reduxThemes },
});
export function createThemeState<S, A extends Action<string>>(
props: RtkQueryMonitorProps<S, A>,
): StyleUtils {
const base16Theme =
getBase16Theme(props.theme, { ...reduxThemes }) ?? reduxThemes.nicinabox;
const theme = props.invertTheme ? invertTheme(props.theme) : props.theme;
const styling = createStylingFromTheme(theme);
return { base16Theme, styling, invertTheme: !!props.invertTheme };
return { base16Theme, invertTheme: !!props.invertTheme };
}
const mockStyling = () => ({ className: '', style: {} });
export const StyleUtilsContext = createContext<StyleUtils>({
base16Theme: reduxThemes.nicinabox,
invertTheme: false,
styling: mockStyling,
});
export function getJsonTreeTheme(

View File

@ -100,7 +100,6 @@ export interface SelectorsSource<S> {
export interface StyleUtils {
readonly base16Theme: Base16Theme;
readonly styling: StylingFunction;
readonly invertTheme: boolean;
}

View File

@ -2474,12 +2474,6 @@ importers:
immutable:
specifier: ^4.3.4
version: 4.3.4
jss:
specifier: ^10.10.0
version: 10.10.0
jss-preset-default:
specifier: ^10.10.0
version: 10.10.0
lodash.debounce:
specifier: ^4.0.8
version: 4.0.8
@ -12618,13 +12612,6 @@ packages:
source-map-js: 1.0.2
dev: true
/css-vendor@2.0.8:
resolution: {integrity: sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==}
dependencies:
'@babel/runtime': 7.23.5
is-in-browser: 1.1.3
dev: false
/css-what@6.1.0:
resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
engines: {node: '>= 6'}
@ -15226,10 +15213,6 @@ packages:
dev: false
optional: true
/hyphenate-style-name@1.0.4:
resolution: {integrity: sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==}
dev: false
/iconv-lite@0.4.24:
resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
engines: {node: '>=0.10.0'}
@ -15535,10 +15518,6 @@ packages:
engines: {node: '>=0.10.0'}
dev: true
/is-in-browser@1.1.3:
resolution: {integrity: sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g==}
dev: false
/is-inside-container@1.0.0:
resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==}
engines: {node: '>=14.16'}
@ -16512,126 +16491,6 @@ packages:
semver: 7.5.4
dev: false
/jss-plugin-camel-case@10.10.0:
resolution: {integrity: sha512-z+HETfj5IYgFxh1wJnUAU8jByI48ED+v0fuTuhKrPR+pRBYS2EDwbusU8aFOpCdYhtRc9zhN+PJ7iNE8pAWyPw==}
dependencies:
'@babel/runtime': 7.23.5
hyphenate-style-name: 1.0.4
jss: 10.10.0
dev: false
/jss-plugin-compose@10.10.0:
resolution: {integrity: sha512-F5kgtWpI2XfZ3Z8eP78tZEYFdgTIbpA/TMuX3a8vwrNolYtN1N4qJR/Ob0LAsqIwCMLojtxN7c7Oo/+Vz6THow==}
dependencies:
'@babel/runtime': 7.23.5
jss: 10.10.0
tiny-warning: 1.0.3
dev: false
/jss-plugin-default-unit@10.10.0:
resolution: {integrity: sha512-SvpajxIECi4JDUbGLefvNckmI+c2VWmP43qnEy/0eiwzRUsafg5DVSIWSzZe4d2vFX1u9nRDP46WCFV/PXVBGQ==}
dependencies:
'@babel/runtime': 7.23.5
jss: 10.10.0
dev: false
/jss-plugin-expand@10.10.0:
resolution: {integrity: sha512-ymT62W2OyDxBxr7A6JR87vVX9vTq2ep5jZLIdUSusfBIEENLdkkc0lL/Xaq8W9s3opUq7R0sZQpzRWELrfVYzA==}
dependencies:
'@babel/runtime': 7.23.5
jss: 10.10.0
dev: false
/jss-plugin-extend@10.10.0:
resolution: {integrity: sha512-sKYrcMfr4xxigmIwqTjxNcHwXJIfvhvjTNxF+Tbc1NmNdyspGW47Ey6sGH8BcQ4FFQhLXctpWCQSpDwdNmXSwg==}
dependencies:
'@babel/runtime': 7.23.5
jss: 10.10.0
tiny-warning: 1.0.3
dev: false
/jss-plugin-global@10.10.0:
resolution: {integrity: sha512-icXEYbMufiNuWfuazLeN+BNJO16Ge88OcXU5ZDC2vLqElmMybA31Wi7lZ3lf+vgufRocvPj8443irhYRgWxP+A==}
dependencies:
'@babel/runtime': 7.23.5
jss: 10.10.0
dev: false
/jss-plugin-nested@10.10.0:
resolution: {integrity: sha512-9R4JHxxGgiZhurDo3q7LdIiDEgtA1bTGzAbhSPyIOWb7ZubrjQe8acwhEQ6OEKydzpl8XHMtTnEwHXCARLYqYA==}
dependencies:
'@babel/runtime': 7.23.5
jss: 10.10.0
tiny-warning: 1.0.3
dev: false
/jss-plugin-props-sort@10.10.0:
resolution: {integrity: sha512-5VNJvQJbnq/vRfje6uZLe/FyaOpzP/IH1LP+0fr88QamVrGJa0hpRRyAa0ea4U/3LcorJfBFVyC4yN2QC73lJg==}
dependencies:
'@babel/runtime': 7.23.5
jss: 10.10.0
dev: false
/jss-plugin-rule-value-function@10.10.0:
resolution: {integrity: sha512-uEFJFgaCtkXeIPgki8ICw3Y7VMkL9GEan6SqmT9tqpwM+/t+hxfMUdU4wQ0MtOiMNWhwnckBV0IebrKcZM9C0g==}
dependencies:
'@babel/runtime': 7.23.5
jss: 10.10.0
tiny-warning: 1.0.3
dev: false
/jss-plugin-rule-value-observable@10.10.0:
resolution: {integrity: sha512-ZLMaYrR3QE+vD7nl3oNXuj79VZl9Kp8/u6A1IbTPDcuOu8b56cFdWRZNZ0vNr8jHewooEeq2doy8Oxtymr2ZPA==}
dependencies:
'@babel/runtime': 7.23.5
jss: 10.10.0
symbol-observable: 1.2.0
dev: false
/jss-plugin-template@10.10.0:
resolution: {integrity: sha512-ocXZBIOJOA+jISPdsgkTs8wwpK6UbsvtZK5JI7VUggTD6LWKbtoxUzadd2TpfF+lEtlhUmMsCkTRNkITdPKa6w==}
dependencies:
'@babel/runtime': 7.23.5
jss: 10.10.0
tiny-warning: 1.0.3
dev: false
/jss-plugin-vendor-prefixer@10.10.0:
resolution: {integrity: sha512-UY/41WumgjW8r1qMCO8l1ARg7NHnfRVWRhZ2E2m0DMYsr2DD91qIXLyNhiX83hHswR7Wm4D+oDYNC1zWCJWtqg==}
dependencies:
'@babel/runtime': 7.23.5
css-vendor: 2.0.8
jss: 10.10.0
dev: false
/jss-preset-default@10.10.0:
resolution: {integrity: sha512-GL175Wt2FGhjE+f+Y3aWh+JioL06/QWFgZp53CbNNq6ZkVU0TDplD8Bxm9KnkotAYn3FlplNqoW5CjyLXcoJ7Q==}
dependencies:
'@babel/runtime': 7.23.5
jss: 10.10.0
jss-plugin-camel-case: 10.10.0
jss-plugin-compose: 10.10.0
jss-plugin-default-unit: 10.10.0
jss-plugin-expand: 10.10.0
jss-plugin-extend: 10.10.0
jss-plugin-global: 10.10.0
jss-plugin-nested: 10.10.0
jss-plugin-props-sort: 10.10.0
jss-plugin-rule-value-function: 10.10.0
jss-plugin-rule-value-observable: 10.10.0
jss-plugin-template: 10.10.0
jss-plugin-vendor-prefixer: 10.10.0
dev: false
/jss@10.10.0:
resolution: {integrity: sha512-cqsOTS7jqPsPMjtKYDUpdFC0AbhYFLTcuGRqymgmdJIeQ8cH7+AgX7YSgQy79wXloZq2VvATYxUOUQEvS1V/Zw==}
dependencies:
'@babel/runtime': 7.23.5
csstype: 3.1.2
is-in-browser: 1.1.3
tiny-warning: 1.0.3
dev: false
/jstransformer@1.0.0:
resolution: {integrity: sha512-C9YK3Rf8q6VAPDCCU9fnqo3mAfOH6vUGnMcP4AQAYIEpWtfGLpwOTmZ+igtdK5y+VvI2n3CyYSzy4Qh34eq24A==}
dependencies:
@ -20400,11 +20259,6 @@ packages:
webpack: 5.89.0(@swc/core@1.3.100)(esbuild@0.18.20)
dev: true
/symbol-observable@1.2.0:
resolution: {integrity: sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==}
engines: {node: '>=0.10.0'}
dev: false
/symbol-tree@3.2.4:
resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
dev: true
@ -20640,10 +20494,6 @@ packages:
/tiny-invariant@1.3.1:
resolution: {integrity: sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==}
/tiny-warning@1.0.3:
resolution: {integrity: sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==}
dev: false
/titleize@3.0.0:
resolution: {integrity: sha512-KxVu8EYHDPBdUYdKZdKtU2aj2XfEx9AfjXxE/Aj0vT06w2icA09Vus1rh6eSu1y01akYg6BjIK/hxyLJINoMLQ==}
engines: {node: '>=12'}