@basic-ui/material 1.0.0-alpha.5 → 1.0.0-alpha.51

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/Select/defaultRender.ts

@@ -1,18 +0,0 @@
-import { Children, isValidElement } from 'react';
-
-export const makeDefaultRender =
-  (children?: React.ReactNode) =>
-  (val?: string): string | undefined => {
-    if (children && val !== undefined) {
-      const allChildren = Children.toArray(children);
-      for (let i = 0; i < allChildren.length; i++) {
-        const child = allChildren[i];
-        if (isValidElement(child)) {
-          if (String(child.props.value) === val) {
-            return child.props.children;
-          }
-        }
-      }
-    }
-    return val || undefined;
-  };

package/src/ThemeExplorer/ThemeExplorer.story.tsx

@@ -1,43 +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 />;