feat: add GlobalStyles and UIContext

packages/decap-cms-ui-next/package.json

@@ -17,7 +17,8 @@
     "build:esm": "cross-env NODE_ENV=esm babel src --out-dir dist/esm --ignore \"**/__tests__\" --root-mode upward"
   },
   "dependencies": {
-    "@fontsource/inter": "^5.0.16"
+    "@fontsource/inter": "^5.0.17",
+    "color": "4.2.3"
   },
   "devDependencies": {},
   "peerDependencies": {

packages/decap-cms-ui-next/src/GlobalStyles/GlobalStyles.jsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import color from 'color';
+import { Global, css, withTheme } from '@emotion/react';
+import interTypeface from '@fontsource/inter/400.css';
+
+function getGlobalStyles(theme) {
+  return css`
+    html {
+      box-sizing: border-box;
+    }
+    *,
+    *:before,
+    *:after {
+      box-sizing: inherit;
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    }
+
+    *::selection {
+      background-color: ${color(theme.color.success['900']).alpha(0.3).string()};
+      color: ${theme.color.success[theme.darkMode ? '200' : '1500']};
+    }
+
+    ${interTypeface}
+
+    html,
+    body {
+      font-family: ${theme.fontFamily};
+      font-size: 16px;
+      -webkit-font-smoothing: antialiased;
+      margin: 0;
+      padding: 0;
+      color: ${theme.color.neutral['800']};
+      background: ${theme.color.background};
+      height: 100%;
+      scrollbar-color: ${theme.color.primary['900']} ${theme.color.background};
+    }
+
+    #root {
+      height: 100%;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p,
+    ul,
+    ol {
+      margin-top: 0;
+      -webkit-font-smoothing: antialiased;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      color: ${theme.color.highEmphasis};
+    }
+
+    p {
+      color: ${theme.color.mediumEmphasis};
+      margin-bottom: 24px;
+    }
+
+    a {
+      color: ${theme.color.primary['1500']};
+      text-decoration: none;
+    }
+
+    #nc-root {
+      height: 100%;
+    }
+  `;
+}
+
+function GlobalStyles({ theme }) {
+  return <Global styles={getGlobalStyles(theme)} />;
+}
+
+export default withTheme(GlobalStyles);

packages/decap-cms-ui-next/src/GlobalStyles/index.js

@@ -0,0 +1 @@
+export { default } from './GlobalStyles';

packages/decap-cms-ui-next/src/UIContext/UIContext.jsx

@@ -0,0 +1,58 @@
+import React, { createContext, useState } from 'react';
+
+import { useLocalStorageState } from '../hooks';
+
+export const UIContext = createContext({
+  appBarStart: () => null,
+  renderAppBarStart: () => {},
+  appBarEnd: () => null,
+  renderAppBarEnd: () => {},
+  darkMode: false,
+  setDarkMode: () => {},
+  navCollapsed: false,
+  setNavCollapsed: () => {},
+  pageTitle: '',
+  setPageTitle: () => {},
+  breadcrumbs: [],
+  setBreadcrumbs: () => {},
+});
+
+export function UIProvider({ children }) {
+  const [darkMode, setDarkMode] = useLocalStorageState(
+    'darkMode',
+    window && window.matchMedia('(prefers-color-scheme: dark)').matches,
+  );
+  const [navCollapsed, setNavCollapsed] = useLocalStorageState('navCollapsed', false);
+  const [pageTitle, setPageTitle] = useState('');
+  const [breadcrumbs, setBreadcrumbs] = useState([]);
+  const [appBarStart, setAppBarStart] = useState(() => () => null);
+  const [appBarEnd, setAppBarEnd] = useState(() => () => null);
+
+  function renderAppBarStart(fn) {
+    setAppBarStart(() => fn);
+  }
+  function renderAppBarEnd(fn) {
+    setAppBarEnd(() => fn);
+  }
+
+  return (
+    <UIContext.Provider
+      value={{
+        appBarStart,
+        renderAppBarStart,
+        appBarEnd,
+        renderAppBarEnd,
+        darkMode,
+        setDarkMode,
+        navCollapsed,
+        setNavCollapsed,
+        pageTitle,
+        setPageTitle,
+        breadcrumbs,
+        setBreadcrumbs,
+      }}
+    >
+      {children}
+    </UIContext.Provider>
+  );
+}

packages/decap-cms-ui-next/src/UIContext/index.js

@@ -0,0 +1 @@
+export { UIContext, UIProvider } from './UIContext';

packages/decap-cms-ui-next/src/hooks/index.js

@@ -0,0 +1,2 @@
+export { default as useLocalStorageState } from './useLocalStorageState';
+export { default as useUIContext } from './useUIContext';

packages/decap-cms-ui-next/src/hooks/useLocalStorageState.js

@@ -0,0 +1,16 @@
+import { useState, useEffect } from 'react';
+
+export default function useLocalStorageState(key, defaultValue) {
+  const localStorageKey = `decapCMS.${key}`;
+  const [value, setValue] = useState(
+    localStorage.getItem(localStorageKey)
+      ? JSON.parse(localStorage.getItem(localStorageKey))
+      : defaultValue,
+  );
+
+  useEffect(() => {
+    localStorage.setItem(localStorageKey, JSON.stringify(value));
+  }, [value]);
+
+  return [value, setValue];
+}

packages/decap-cms-ui-next/src/hooks/useUIContext.js

@@ -0,0 +1,13 @@
+import { useContext } from 'react';
+
+import { UIContext } from '../UIContext';
+
+export default function useUIContext() {
+  const context = useContext(UIContext);
+
+  if (!context) {
+    throw new Error('useUIContext must be used within a UIProvider');
+  }
+
+  return context;
+}

packages/decap-cms-ui-next/src/index.js

@@ -1,2 +1,7 @@
 export { lightTheme, darkTheme } from './theme';
 export { fonts, buttons, shadows } from './styles';
+
+export { default as GlobalStyles } from './GlobalStyles';
+export * from './UIContext';
+
+export * from './hooks';