start typescript & chakra-ui 1.0 migrations [skip ci]

hyperglass/ui/README.md

@@ -1,3 +1,3 @@
 # hyperglass-ui
 
-Temporary repo for the permanent [hyperglass](https://github.com/checktheroads/hyperglass) UI, written in [React](https://reactjs.org/), on [Next.js](https://nextjs.org/), with [Chakra UI](https://chakra-ui.com/).
+[hyperglass](https://github.com/checktheroads/hyperglass) UI, written in [React](https://reactjs.org/), on [Next.js](https://nextjs.org/), with [Chakra UI](https://chakra-ui.com/).

hyperglass/ui/components/Card/CardBody.js

@@ -1,24 +0,0 @@
-import * as React from 'react';
-import { Flex, useColorMode } from '@chakra-ui/core';
-
-const bg = { light: 'white', dark: 'original.dark' };
-const color = { light: 'original.dark', dark: 'white' };
-
-export const CardBody = ({ onClick = () => false, children, ...props }) => {
-  const { colorMode } = useColorMode();
-  return (
-    <Flex
-      w="100%"
-      maxW="100%"
-      rounded="md"
-      borderWidth="1px"
-      direction="column"
-      onClick={onClick}
-      bg={bg[colorMode]}
-      color={color[colorMode]}
-      overflow="hidden"
-      {...props}>
-      {children}
-    </Flex>
-  );
-};

hyperglass/ui/components/Card/CardBody.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { Flex } from '@chakra-ui/core';
+import { useColorValue } from '~/context';
+
+import type { ICardBody } from './types';
+
+export const CardBody = (props: ICardBody) => {
+  const { onClick, ...rest } = props;
+  const bg = useColorValue('white', 'original.dark');
+  const color = useColorValue('original.dark', 'white');
+  return (
+    <Flex
+      bg={bg}
+      w="100%"
+      maxW="100%"
+      rounded="md"
+      color={color}
+      onClick={onClick}
+      overflow="hidden"
+      borderWidth="1px"
+      direction="column"
+      {...rest}
+    />
+  );
+};

hyperglass/ui/components/Card/CardFooter.tsx

@@ -1,18 +1,19 @@
 import * as React from 'react';
 import { Flex } from '@chakra-ui/core';
 
-export const CardFooter = ({ children, ...props }) => (
+import type { FlexProps } from '@chakra-ui/core';
+
+export const CardFooter = (props: FlexProps) => (
   <Flex
     p={4}
-    roundedBottomLeft={4}
-    roundedBottomRight={4}
     direction="column"
-    borderTopWidth="1px"
     overflowX="hidden"
     overflowY="hidden"
     flexDirection="row"
+    borderTopWidth="1px"
+    roundedBottomLeft={4}
+    roundedBottomRight={4}
     justifyContent="space-between"
-    {...props}>
+    {...props}
-    {children}
+  />
-  </Flex>
 );

hyperglass/ui/components/Card/CardHeader.js

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import { Flex, Text, useColorMode } from '@chakra-ui/core';
-
-const bg = { light: 'blackAlpha.50', dark: 'whiteAlpha.100' };
-
-export const CardHeader = ({ children, ...props }) => {
-  const { colorMode } = useColorMode();
-  return (
-    <Flex
-      bg={bg[colorMode]}
-      p={4}
-      direction="column"
-      roundedTopLeft={4}
-      roundedTopRight={4}
-      borderBottomWidth="1px"
-      {...props}>
-      <Text fontWeight="bold">{children}</Text>
-    </Flex>
-  );
-};

hyperglass/ui/components/Card/CardHeader.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { Flex, Text } from '@chakra-ui/core';
+import { useColorValue } from '~/context';
+
+import type { FlexProps } from '@chakra-ui/core';
+
+export const CardHeader = (props: FlexProps) => {
+  const { children, ...rest } = props;
+  const bg = useColorValue('blackAlpha.50', 'whiteAlpha.100');
+  return (
+    <Flex
+      p={4}
+      bg={bg}
+      direction="column"
+      roundedTopLeft={4}
+      roundedTopRight={4}
+      borderBottomWidth="1px"
+      {...rest}>
+      <Text fontWeight="bold">{children}</Text>
+    </Flex>
+  );
+};

hyperglass/ui/components/Card/types.ts

@@ -0,0 +1,5 @@
+import type { FlexProps } from '@chakra-ui/core';
+
+export interface ICardBody extends Omit<FlexProps, 'onClick'> {
+  onClick?: () => boolean;
+}

hyperglass/ui/context/GlobalState.ts

@@ -0,0 +1,33 @@
+import { createState, useState } from '@hookstate/core';
+import type { IGlobalState } from './types';
+
+// const StateContext = createContext(null);
+
+// export const StateProvider = ({ children }) => {
+//   const [isSubmitting, setSubmitting] = useState(false);
+//   const [formData, setFormData] = useState({});
+//   const [greetingAck, setGreetingAck] = useSessionStorage('hyperglass-greeting-ack', false);
+//   const resetForm = layoutRef => {
+//     layoutRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
+//     setSubmitting(false);
+//     setFormData({});
+//   };
+//   const value = useMemo(() => ({
+//     isSubmitting,
+//     setSubmitting,
+//     formData,
+//     setFormData,
+//     greetingAck,
+//     setGreetingAck,
+//     resetForm,
+//   }));
+//   return <StateContext.Provider value={value}>{children}</StateContext.Provider>;
+// };
+
+// export const useHyperglassState = () => useContext(StateContext);
+
+export const globalState = createState<IGlobalState>({
+  isSubmitting: false,
+  formData: { query_location: [], query_target: '', query_type: '', query_vrf: '' },
+});
+export const useGlobalState = () => useState(globalState);

hyperglass/ui/context/HyperglassProvider.js

@@ -1,35 +0,0 @@
-import * as React from 'react';
-import { createContext, useContext, useMemo } from 'react';
-import dynamic from 'next/dynamic';
-import { CSSReset, ThemeProvider } from '@chakra-ui/core';
-import { MediaProvider } from './MediaProvider';
-import { StateProvider } from './StateProvider';
-import { makeTheme, defaultTheme } from 'app/util';
-
-// Disable SSR for ColorModeProvider
-const ColorModeProvider = dynamic(
-  () => import('@chakra-ui/core').then(mod => mod.ColorModeProvider),
-  { ssr: false },
-);
-
-const HyperglassContext = createContext(null);
-
-export const HyperglassProvider = ({ config, children }) => {
-  const value = useMemo(() => config, [config]);
-  const userTheme = value && makeTheme(value.web.theme);
-  const theme = value ? userTheme : defaultTheme;
-  return (
-    <ThemeProvider theme={theme}>
-      <ColorModeProvider value={config.web.theme.default_color_mode ?? null}>
-        <CSSReset />
-        <MediaProvider theme={theme}>
-          <HyperglassContext.Provider value={value}>
-            <StateProvider>{children}</StateProvider>
-          </HyperglassContext.Provider>
-        </MediaProvider>
-      </ColorModeProvider>
-    </ThemeProvider>
-  );
-};
-
-export const useConfig = () => useContext(HyperglassContext);

hyperglass/ui/context/HyperglassProvider.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { createContext, useContext, useMemo } from 'react';
+import { ChakraProvider, useColorModeValue } from '@chakra-ui/core';
+import { makeTheme, defaultTheme } from '~/util';
+
+import type { IConfig } from '~/types';
+import type { IHyperglassProvider } from './types';
+
+const HyperglassContext = createContext<IConfig>(Object());
+
+export const HyperglassProvider = (props: IHyperglassProvider) => {
+  const { config, children } = props;
+  const value = useMemo(() => config, []);
+  const userTheme = value && makeTheme(value.web.theme);
+  const theme = value ? userTheme : defaultTheme;
+  return (
+    <ChakraProvider theme={theme}>
+      <HyperglassContext.Provider value={value}>{children}</HyperglassContext.Provider>
+    </ChakraProvider>
+  );
+};
+
+export const useConfig = () => useContext(HyperglassContext);
+export const useColorValue = useColorModeValue;

hyperglass/ui/context/StateProvider.js

@@ -1,28 +0,0 @@
-import * as React from 'react';
-import { createContext, useContext, useMemo, useState } from 'react';
-import { useSessionStorage } from 'app/hooks';
-
-const StateContext = createContext(null);
-
-export const StateProvider = ({ children }) => {
-  const [isSubmitting, setSubmitting] = useState(false);
-  const [formData, setFormData] = useState({});
-  const [greetingAck, setGreetingAck] = useSessionStorage('hyperglass-greeting-ack', false);
-  const resetForm = layoutRef => {
-    layoutRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
-    setSubmitting(false);
-    setFormData({});
-  };
-  const value = useMemo(() => ({
-    isSubmitting,
-    setSubmitting,
-    formData,
-    setFormData,
-    greetingAck,
-    setGreetingAck,
-    resetForm,
-  }));
-  return <StateContext.Provider value={value}>{children}</StateContext.Provider>;
-};
-
-export const useHyperglassState = () => useContext(StateContext);

hyperglass/ui/context/index.ts

@@ -1,3 +1,3 @@
 export * from './HyperglassProvider';
 export * from './MediaProvider';
-export * from './StateProvider';
+export * from './GlobalState';

hyperglass/ui/context/types.ts

@@ -0,0 +1,12 @@
+import type { ReactNode, RefObject } from 'react';
+import type { IConfig, IFormData } from '~/types';
+
+export interface IHyperglassProvider {
+  config: IConfig;
+  children: ReactNode;
+}
+
+export interface IGlobalState {
+  isSubmitting: boolean;
+  formData: IFormData;
+}

hyperglass/ui/globals.d.ts

@@ -0,0 +1 @@
+type Dict<T = string> = { [k: string]: T };

hyperglass/ui/jsconfig.json

@@ -1,16 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2017",
-    "module": "esnext",
-    "baseUrl": ".",
-    "paths": {
-      "app/components": ["components/index"],
-      "app/components/*": ["components/*"],
-      "app/context": ["context/index"],
-      "app/context/*": ["context/*"],
-      "app/hooks": ["hooks/index"],
-      "app/hooks/*": ["hooks/*"],
-      "app/util": ["util/index"]
-    }
-  }
-}

hyperglass/ui/next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

hyperglass/ui/package.json

@@ -15,16 +15,14 @@
   },
   "browserslist": "> 0.25%, not dead",
   "dependencies": {
-    "@chakra-ui/core": "^0.8",
+    "@chakra-ui/core": "1.0.0-rc.5",
-    "@emotion/core": "^10.0.28",
+    "@chakra-ui/theme": "1.0.0-rc.5",
-    "@emotion/styled": "^10.0.27",
+    "@hookstate/core": "^3.0.1",
     "@meronex/icons": "^4.0.0",
-    "@styled-system/should-forward-prop": "^5.1.5",
     "axios": "^0.19.2",
     "axios-hooks": "^1.9.0",
     "chroma-js": "^2.1.0",
     "dayjs": "^1.8.25",
-    "emotion-theming": "^10.0.27",
     "framer-motion": "^1.10.0",
     "lodash": "^4.17.15",
     "next": "^9.5.4",
@@ -37,55 +35,27 @@
     "react-string-replace": "^0.4.4",
     "react-table": "^7.0.4",
     "string-format": "^2.0.0",
-    "styled-system": "^5.1.5",
     "tempy": "^0.5.0",
     "use-media": "^1.4.0",
     "yup": "^0.28.3"
   },
   "devDependencies": {
+    "@types/node": "^14.11.10",
+    "@types/react-select": "^3.0.22",
     "@typescript-eslint/eslint-plugin": "^2.24.0",
     "@typescript-eslint/parser": "^2.24.0",
     "@upstatement/eslint-config": "^0.4.3",
     "@upstatement/prettier-config": "^0.3.0",
     "babel-eslint": "^10.1.0",
-    "es-check": "^5.1.0",
     "eslint": "^6.8.0",
     "eslint-config-react-app": "^5.2.0",
-    "eslint-import-resolver-webpack": "^0.13.0",
+    "eslint-import-resolver-typescript": "^2.3.0",
-    "eslint-plugin-import": "^2.20.1",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.19.0",
     "eslint-plugin-react-hooks": "^2.3.0",
     "express": "^4.17.1",
     "http-proxy-middleware": "0.20.0",
-    "prettier": "^1.19.1"
+    "prettier": "2.0",
-  },
+    "typescript": "^4.0.3"
-  "eslintConfig": {
-    "parser": "babel-eslint",
-    "rules": {
-      "max-len": [
-        "error",
-        100
-      ],
-      "react/prop-types": 0,
-      "react/jsx-filename-extension": 0,
-      "react/jsx-props-no-spreading": 0,
-      "no-bitwise": 0,
-      "object-shorthand": 0,
-      "no-plusplus": 0,
-      "no-param-reassign": 0,
-      "no-unused-expressions": 0,
-      "no-nested-ternary": 0,
-      "no-underscore-dangle": 0,
-      "camelcase": 0
-    },
-    "extends": [
-      "airbnb",
-      "prettier",
-      "prettier/react"
-    ],
-    "env": {
-      "browser": true
-    }
   }
 }

hyperglass/ui/tsconfig.json

@@ -0,0 +1,79 @@
+{
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig.json to read more about this file */
+    /* Basic Options */
+    // "incremental": true,                   /* Enable incremental compilation */
+    "target": "ESNEXT" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
+    "module": "esnext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */, // "lib": [],                             /* Specify library files to be included in the compilation. */
+    // "checkJs": true,                       /* Report errors in .js files. */
+    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
+    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
+    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
+    // "outFile": "./",                       /* Concatenate and emit output to single file. */
+    // "outDir": "./",                        /* Redirect output structure to the directory. */
+    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+    // "composite": true,                     /* Enable project compilation */
+    // "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
+    // "removeComments": true,                /* Do not emit comments to output. */
+    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
+    "downlevelIteration": true /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */,
+    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+    /* Strict Type-Checking Options */
+    "strict": true /* Enable all strict type-checking options. */, // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
+    // "strictNullChecks": true,              /* Enable strict null checks. */
+    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
+    // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
+    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
+    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
+    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
+    /* Additional Checks */
+    // "noUnusedLocals": true,                /* Report errors on unused locals. */
+    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
+    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
+    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
+    /* Module Resolution Options */
+    // "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+    "baseUrl": "." /* Base directory to resolve non-absolute module names. */,
+    "paths": {
+      /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+      "~/components": ["components/index"],
+      "~/components/*": ["components/*"],
+      "~/context": ["context/index"],
+      "~/context/*": ["context/*"],
+      "~/hooks": ["hooks/index"],
+      "~/hooks/*": ["hooks/*"],
+      "~/state": ["state/index"],
+      "~/state/*": ["state/*"],
+      "~/types": ["types/index"],
+      "~/types/*": ["types/*"],
+      "~/util": ["util/index"],
+      "~/util/*": ["util/*"]
+    },
+    // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
+    // "typeRoots": [] /* List of folders to include type definitions from. */,
+    // "types": [] /* Type declaration files to be included in compilation. */,
+    // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
+    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */, // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
+    // "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */
+    /* Source Map Options */
+    // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+    // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
+    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+    /* Experimental Options */
+    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
+    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
+    /* Advanced Options */
+    "skipLibCheck": true /* Skip type checking of declaration files. */,
+    "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */,
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "noEmit": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "exclude": ["node_modules"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "globals.d.ts"]
+}

hyperglass/ui/types/config.ts

@@ -0,0 +1,163 @@
+import { Colors, Fonts } from './theme';
+
+export interface IConfigMessages {
+  no_input: string;
+  acl_denied: string;
+  acl_not_allowed: string;
+  feature_not_enabled: string;
+  invalid_input: string;
+  invalid_field: string;
+  general: string;
+  request_timeout: string;
+  connection_error: string;
+  authentication_error: string;
+  no_response: string;
+  vrf_not_associated: string;
+  vrf_not_found: string;
+  no_output: string;
+  parsing_error: string;
+}
+
+export interface IConfigTheme {
+  colors: Colors;
+  default_color_mode: 'light' | 'dark' | null;
+  fonts: Fonts;
+}
+
+export interface IConfigWebText {
+  title_mode: string;
+  title: string;
+  subtitle: string;
+  query_location: string;
+  query_type: string;
+  query_target: string;
+  query_vrf: string;
+  fqdn_tooltip: string;
+  cache_prefix: string;
+  cache_icon: string;
+  complete_time: string;
+  rpki_invalid: string;
+  rpki_valid: string;
+  rpki_unknown: string;
+  rpki_unverified: string;
+}
+
+export interface IConfigWeb {
+  credit: { enable: boolean };
+  dns_provider: { name: string; url: string };
+  external_link: { enable: boolean; title: string; url: string };
+  greeting: { enable: boolean; title: string; button: string; required: boolean };
+  help_menu: { enable: boolean; title: string };
+  logo: { width: string; height: string | null; light_format: string; dark_format: string };
+  terms: { enable: boolean; title: string };
+  text: IConfigWebText;
+  theme: IConfigTheme;
+}
+
+export interface IQuery {
+  name: string;
+  enable: boolean;
+  display_name: string;
+}
+
+export interface IBGPCommunity {
+  community: string;
+  display_name: string;
+  description: string;
+}
+
+export interface IQueryBGPRoute extends IQuery {}
+export interface IQueryBGPASPath extends IQuery {}
+export interface IQueryPing extends IQuery {}
+export interface IQueryTraceroute extends IQuery {}
+export interface IQueryBGPCommunity extends IQuery {
+  mode: 'input' | 'select';
+  communities: IBGPCommunity[];
+}
+
+export interface IConfigQueries {
+  bgp_route: IQueryBGPRoute;
+  bgp_community: IQueryBGPCommunity;
+  bgp_aspath: IQueryBGPASPath;
+  ping: IQueryPing;
+  traceroute: IQueryTraceroute;
+  list: IQuery[];
+}
+
+interface IDeviceVrfBase {
+  id: string;
+  display_name: string;
+}
+
+export interface IDeviceVrf extends IDeviceVrfBase {
+  ipv4: boolean;
+  ipv6: boolean;
+}
+
+interface IDeviceBase {
+  network: string;
+  display_name: string;
+}
+
+export interface IDevice extends IDeviceBase {
+  vrfs: IDeviceVrf[];
+}
+
+export interface INetworkLocation extends IDeviceBase {
+  vrfs: IDeviceVrfBase[];
+}
+
+export interface INetwork {
+  display_name: string;
+  locations: INetworkLocation[];
+}
+
+export type TParsedDataField = [string, string, 'left' | 'right' | 'center' | null];
+
+export interface IQueryContent {
+  content: string;
+  enable: boolean;
+  params: {
+    primary_asn: IConfig['primary_asn'];
+    org_name: IConfig['org_name'];
+    site_title: IConfig['site_title'];
+    title: string;
+    [k: string]: string;
+  };
+}
+
+export interface IConfigContent {
+  help_menu: string;
+  terms: string;
+  credit: string;
+  greeting: string;
+  vrf: {
+    [k: string]: {
+      bgp_route: IQueryContent;
+      bgp_community: IQueryContent;
+      bgp_aspath: IQueryContent;
+      ping: IQueryContent;
+      traceroute: IQueryContent;
+    };
+  };
+}
+
+export interface IConfig {
+  cache: { show_text: boolean; timeout: number };
+  debug: boolean;
+  developer_mode: boolean;
+  primary_asn: string;
+  request_timeout: number;
+  org_name: string;
+  google_analytics?: string;
+  site_title: string;
+  site_keywords: string[];
+  web: IConfigWeb;
+  messages: IConfigMessages;
+  hyperglass_version: string;
+  queries: IConfigQueries;
+  devices: IDevice[];
+  vrfs: IDeviceVrfBase[];
+  parsed_data_fields: TParsedDataField[];
+  content: IConfigContent;
+}

hyperglass/ui/types/data.ts

@@ -0,0 +1,8 @@
+export type TQueryTypes = 'bgp_route' | 'bgp_community' | 'bgp_aspath' | 'ping' | 'traceroute';
+
+export interface IFormData {
+  query_location: string[];
+  query_type: TQueryTypes | '';
+  query_vrf: string;
+  query_target: string;
+}

hyperglass/ui/types/index.ts

@@ -0,0 +1,3 @@
+export * from './config';
+export * from './theme';
+export * from './data';

hyperglass/ui/types/theme.ts

@@ -0,0 +1,46 @@
+import type { ColorHues } from '@chakra-ui/theme/dist/types/foundations/colors';
+
+interface ChakraColors {
+  transparent: string;
+  current: string;
+  black: string;
+  white: string;
+  whiteAlpha: ColorHues;
+  blackAlpha: ColorHues;
+  gray: ColorHues;
+  red: ColorHues;
+  orange: ColorHues;
+  yellow: ColorHues;
+  green: ColorHues;
+  teal: ColorHues;
+  blue: ColorHues;
+  cyan: ColorHues;
+  purple: ColorHues;
+  pink: ColorHues;
+  linkedin: ColorHues;
+  facebook: ColorHues;
+  messenger: ColorHues;
+  whatsapp: ColorHues;
+  twitter: ColorHues;
+  telegram: ColorHues;
+}
+
+interface CustomColors {
+  primary: ColorHues;
+  secondary: ColorHues;
+  tertiary: ColorHues;
+  dark: ColorHues;
+  light: ColorHues;
+}
+
+type AllColors = CustomColors & ChakraColors;
+type ColorKey = keyof AllColors;
+
+export interface Colors extends AllColors {
+  original: { [key in ColorKey]: string };
+}
+
+export interface Fonts {
+  body: string;
+  mono: string;
+}