@basic-ui/material 1.0.0-alpha.0 → 1.0.0-alpha.11

package/src/ColorMode/ColorModeProvider.tsx

@@ -1,95 +0,0 @@
-import { useState, useEffect, useMemo, useCallback } from 'react';
-import type * as React from 'react';
-import { Global } from '@emotion/react';
-import { ColorMode, ColorModeContext } from './color-mode';
-import {
-  DARK_THEME_CLASS,
-  DEFAULT_THEME_CLASS,
-  THEME_LOCAL_STORAGE_KEY,
-} from './constants';
-
-interface ColorModeProviderProps {
-  children?: React.ReactNode;
-  styles: Record<string, Record<string, string>>;
-}
-
-function saveColorMode(colorMode: ColorMode, saveToStorage = true) {
-  if (saveToStorage) {
-    window.localStorage.setItem(
-      THEME_LOCAL_STORAGE_KEY,
-      colorMode || 'default'
-    );
-  }
-
-  const [add, remove] =
-    colorMode === 'dark'
-      ? [DARK_THEME_CLASS, DEFAULT_THEME_CLASS]
-      : [DEFAULT_THEME_CLASS, DARK_THEME_CLASS];
-
-  if (!document.body.classList.contains(remove)) {
-    document.body.classList.add(add);
-    return;
-  }
-  document.body.classList.replace(remove, add);
-}
-
-export const ColorModeProvider: React.FC<ColorModeProviderProps> = (props) => {
-  const { children, styles } = props;
-  const [colorMode, _setColorMode] = useState<ColorMode>();
-
-  const setColorMode = useCallback(
-    (colorMode: ColorMode, saveToStorage = true) => {
-      saveColorMode(colorMode || 'default', saveToStorage);
-      _setColorMode(colorMode);
-    },
-    []
-  );
-
-  const colorModeObject = useMemo(
-    () => ({
-      colorMode,
-      setColorMode,
-    }),
-    [colorMode, setColorMode]
-  );
-
-  useEffect(() => {
-    _setColorMode(
-      document.body.classList.contains(DARK_THEME_CLASS) ? 'dark' : 'default'
-    );
-
-    const darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
-    darkQuery?.addListener((e) => {
-      setColorMode(e.matches ? 'dark' : 'default', false);
-    });
-  }, [setColorMode]);
-
-  const globalStyles = useMemo(() => {
-    const ret = {
-      body: { colorScheme: 'light', ...(styles['default'] || {}) },
-    };
-
-    ret[`.${DEFAULT_THEME_CLASS}`] = {
-      colorScheme: 'light',
-      ...(styles['default'] || {}),
-    };
-
-    for (const key in styles) {
-      if (key === 'default') {
-        continue;
-      }
-      ret[`.${DARK_THEME_CLASS}`] = { colorScheme: 'dark', ...styles[key] };
-    }
-
-    return ret;
-  }, [styles]);
-
-  return (
-    <>
-      <Global styles={globalStyles} />
-      <ColorModeContext.Provider value={colorModeObject}>
-        {children}
-      </ColorModeContext.Provider>
-    </>
-  );
-};

package/src/ColorMode/color-mode.ts

@@ -1,20 +0,0 @@
-import { createContext, useContext } from 'react';
-
-export type ColorMode = 'default' | 'dark';
-
-// ColorMode Component
-export interface ColorModeContextProps {
-  colorMode?: ColorMode;
-  setColorMode: (colorMode: ColorMode) => void;
-}
-
-export const ColorModeContext = createContext<ColorModeContextProps>({
-  colorMode: 'default',
-  setColorMode: () => {
-    /*noop*/
-  },
-});
-
-export const useColorMode = (): ColorModeContextProps => {
-  return useContext(ColorModeContext);
-};

package/src/ColorMode/color-vars.ts

@@ -1,56 +0,0 @@
-import { parseToRgb } from 'polished';
-
-const toVarName = (key: string, suffix = '') =>
-  `--${key}${suffix ? `--${suffix}` : ''}`;
-const toVarValue = (key: string, value: string, suffix = '') =>
-  `var(${toVarName(key, suffix)}, ${value})`;
-
-function themify(
-  obj: Record<string, any>,
-  vars: Record<string, string>,
-  root = ''
-) {
-  Object.keys(obj).forEach((key) => {
-    if (key === 'modes') {
-      return;
-    }
-
-    const value = obj[key];
-    const varName = root.length > 0 ? `${root}-${key}` : `${key}`;
-    if (typeof value === 'object') {
-      obj[key] = themify(obj[key], vars, varName);
-    } else {
-      vars[toVarName(varName)] = value;
-      obj[key] = toVarValue(varName, value);
-
-      try {
-        const rgb = parseToRgb(value);
-        vars[toVarName(varName, 'rgb')] = `${rgb.red},${rgb.green},${rgb.blue}`;
-        obj[key + '_rgb'] = toVarValue(varName, value, 'rgb');
-      } catch (err) {
-        // do nothing
-      }
-    }
-  });
-
-  return obj;
-}
-
-export function getTheme(theme: Record<string, any>) {
-  const colorModes: Record<string, Record<string, string>> = { default: {} };
-  const themeClone = JSON.parse(JSON.stringify(theme));
-
-  // default
-  themeClone.colors = themify(themeClone.colors, colorModes.default, '');
-  // other modes
-  Object.keys(themeClone.colors.modes).forEach((key) => {
-    colorModes[key] = {};
-    themeClone.colors.modes[key] = themify(
-      themeClone.colors.modes[key],
-      colorModes[key],
-      ''
-    );
-  });
-
-  return { theme: themeClone, colorModes };
-}

package/src/ColorMode/constants.ts

@@ -1,5 +0,0 @@
-import hash from '@emotion/hash';
-
-export const THEME_LOCAL_STORAGE_KEY = 'basic-ui-theme';
-export const DEFAULT_THEME_CLASS = `css-${hash('basic-ui-default-theme')}`;
-export const DARK_THEME_CLASS = `css-${hash('basic-ui-dark-theme')}`;

package/src/ColorMode/index.ts

@@ -1,4 +0,0 @@
-export * from './ColorModeProvider';
-export * from './color-vars';
-export * from './constants';
-export * from './color-mode';

package/src/ColorMode/tests/color-vars.test.ts

@@ -1,9 +0,0 @@
-import { getTheme } from '../color-vars';
-import { theme } from '../../theme';
-
-test('it should work', () => {
-  const { theme: ret, colorModes } = getTheme(theme);
-  console.log(ret.colors, colorModes);
-
-  expect(true).toBe(true);
-});

package/src/ThemeExplorer/ThemeExplorer.story.tsx

@@ -1,42 +0,0 @@
-import React from 'react';
-import { useTheme } from '@emotion/react';
-import { ThemeColors } from './ThemeColors';
-import { DARK_THEME_CLASS, DEFAULT_THEME_CLASS, Box } from '../';
-
-export default {
-  title: 'components/ThemeExplorer',
-};
-
-const ThemeExplorer = () => {
-  const theme = useTheme();
-  return (
-    <>
-      <Box
-        flex="1"
-        p={3}
-        borderRadius="extra-large"
-        overflow="hidden"
-        border="1px solid #fff"
-        borderColor="outline"
-        bg="surface"
-        className={DEFAULT_THEME_CLASS}
-      >
-        <ThemeColors scheme={theme.colors as any} />
-      </Box>
-      <Box
-        flex="1"
-        p={3}
-        borderRadius="extra-large"
-        overflow="hidden"
-        border="1px solid #fff"
-        borderColor="outline"
-        bg="surface"
-        className={DARK_THEME_CLASS}
-      >
-        <ThemeColors scheme={theme.colors.modes.dark as any} />
-      </Box>
-    </>
-  );
-};
-
-export const Explorer = () => <ThemeExplorer />;