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

package/src/ThemeExplorer/index.ts

@@ -1 +1 @@
-export * from './ThemeBuilder';
+export * from './ThemeBuilder';

package/src/ThemeExplorer/makeColorScheme.tsx

@@ -1,111 +1,111 @@
-import type { TonalPalette } from '@material/material-color-utilities';
-import { hexFromArgb } from '@material/material-color-utilities';
-
-export function makeColorScheme(opts: {
-  primary: TonalPalette;
-  secondary: TonalPalette;
-  tertiary: TonalPalette;
-  error: TonalPalette;
-  neutral: TonalPalette;
-  neutralVariant: TonalPalette;
-}) {
-  function c(palette: TonalPalette, tone: number) {
-    return hexFromArgb(palette.tone(tone));
-  }
-
-  return {
-    primary: c(opts.primary, 40),
-    secondary: c(opts.secondary, 40),
-    tertiary: c(opts.tertiary, 40),
-    error: c(opts.error, 40),
-    'primary-container': c(opts.primary, 90),
-    'secondary-container': c(opts.secondary, 90),
-    'tertiary-container': c(opts.tertiary, 90),
-    'error-container': c(opts.error, 90),
-    background: c(opts.neutral, 98),
-    'surface-variant': c(opts.neutralVariant, 90),
-    outline: c(opts.neutralVariant, 50),
-    'outline-variant': c(opts.neutralVariant, 80),
-    // https://material.io/blog/tone-based-surface-color-m3
-    'surface-dim': c(opts.neutral, 87),
-    surface: c(opts.neutral, 98),
-    'surface-bright': c(opts.neutral, 98),
-    'surface-container-lowest': c(opts.neutral, 100),
-    'surface-container-low': c(opts.neutral, 96),
-    'surface-container': c(opts.neutral, 94),
-    'surface-container-high': c(opts.neutral, 92),
-    'surface-container-highest': c(opts.neutral, 90),
-    on: {
-      primary: c(opts.primary, 100),
-      secondary: c(opts.secondary, 100),
-      tertiary: c(opts.tertiary, 100),
-      error: c(opts.error, 100),
-      'primary-container': c(opts.primary, 10),
-      'secondary-container': c(opts.secondary, 10),
-      'tertiary-container': c(opts.tertiary, 10),
-      'error-container': c(opts.error, 10),
-      background: c(opts.neutral, 10),
-      'surface-variant': c(opts.neutralVariant, 30),
-      outline: c(opts.neutralVariant, 95),
-      'outline-variant': c(opts.neutralVariant, 10),
-      // https://material.io/blog/tone-based-surface-color-m3
-      'surface-dim': c(opts.neutral, 10),
-      surface: c(opts.neutral, 10),
-      'surface-bright': c(opts.neutral, 10),
-      'surface-container-lowest': c(opts.neutral, 10),
-      'surface-container-low': c(opts.neutral, 10),
-      'surface-container': c(opts.neutral, 10),
-      'surface-container-high': c(opts.neutral, 10),
-      'surface-container-highest': c(opts.neutral, 10),
-    },
-    modes: {
-      dark: {
-        primary: c(opts.primary, 80),
-        secondary: c(opts.secondary, 80),
-        tertiary: c(opts.tertiary, 80),
-        error: c(opts.error, 80),
-        'primary-container': c(opts.primary, 30),
-        'secondary-container': c(opts.secondary, 30),
-        'tertiary-container': c(opts.tertiary, 30),
-        'error-container': c(opts.error, 30),
-        background: c(opts.neutral, 6),
-        'surface-variant': c(opts.neutralVariant, 30),
-        outline: c(opts.neutralVariant, 60),
-        'outline-variant': c(opts.neutralVariant, 30),
-        // https://material.io/blog/tone-based-surface-color-m3
-        // TODO: get the actual values from here once updated: https://github.com/material-foundation/material-color-utilities/blob/main/dart/lib/scheme/scheme.dart#L126-L156
-        'surface-dim': c(opts.neutral, 6),
-        surface: c(opts.neutral, 6),
-        'surface-bright': c(opts.neutral, 24),
-        'surface-container-lowest': c(opts.neutral, 4),
-        'surface-container-low': c(opts.neutral, 10),
-        'surface-container': c(opts.neutral, 12),
-        'surface-container-high': c(opts.neutral, 17),
-        'surface-container-highest': c(opts.neutral, 22),
-        on: {
-          primary: c(opts.primary, 20),
-          secondary: c(opts.secondary, 20),
-          tertiary: c(opts.tertiary, 20),
-          error: c(opts.error, 20),
-          'primary-container': c(opts.primary, 90),
-          'secondary-container': c(opts.secondary, 90),
-          'tertiary-container': c(opts.tertiary, 90),
-          'error-container': c(opts.error, 90),
-          background: c(opts.neutral, 90),
-          'surface-variant': c(opts.neutralVariant, 80),
-          outline: c(opts.neutralVariant, 10),
-          'outline-variant': c(opts.neutralVariant, 90),
-          // https://material.io/blog/tone-based-surface-color-m3
-          'surface-dim': c(opts.neutral, 90),
-          surface: c(opts.neutral, 90),
-          'surface-bright': c(opts.neutral, 90),
-          'surface-container-lowest': c(opts.neutral, 90),
-          'surface-container-low': c(opts.neutral, 90),
-          'surface-container': c(opts.neutral, 90),
-          'surface-container-high': c(opts.neutral, 90),
-          'surface-container-highest': c(opts.neutral, 90),
-        },
-      },
-    },
-  };
-}
+import type { TonalPalette } from '@material/material-color-utilities';
+import { hexFromArgb } from '@material/material-color-utilities';
+
+export function makeColorScheme(opts: {
+  primary: TonalPalette;
+  secondary: TonalPalette;
+  tertiary: TonalPalette;
+  error: TonalPalette;
+  neutral: TonalPalette;
+  neutralVariant: TonalPalette;
+}) {
+  function c(palette: TonalPalette, tone: number) {
+    return hexFromArgb(palette.tone(tone));
+  }
+
+  return {
+    primary: c(opts.primary, 40),
+    secondary: c(opts.secondary, 40),
+    tertiary: c(opts.tertiary, 40),
+    error: c(opts.error, 40),
+    'primary-container': c(opts.primary, 90),
+    'secondary-container': c(opts.secondary, 90),
+    'tertiary-container': c(opts.tertiary, 90),
+    'error-container': c(opts.error, 90),
+    background: c(opts.neutral, 98),
+    'surface-variant': c(opts.neutralVariant, 90),
+    outline: c(opts.neutralVariant, 50),
+    'outline-variant': c(opts.neutralVariant, 80),
+    // https://material.io/blog/tone-based-surface-color-m3
+    'surface-dim': c(opts.neutral, 87),
+    surface: c(opts.neutral, 98),
+    'surface-bright': c(opts.neutral, 98),
+    'surface-container-lowest': c(opts.neutral, 100),
+    'surface-container-low': c(opts.neutral, 96),
+    'surface-container': c(opts.neutral, 94),
+    'surface-container-high': c(opts.neutral, 92),
+    'surface-container-highest': c(opts.neutral, 90),
+    on: {
+      primary: c(opts.primary, 100),
+      secondary: c(opts.secondary, 100),
+      tertiary: c(opts.tertiary, 100),
+      error: c(opts.error, 100),
+      'primary-container': c(opts.primary, 10),
+      'secondary-container': c(opts.secondary, 10),
+      'tertiary-container': c(opts.tertiary, 10),
+      'error-container': c(opts.error, 10),
+      background: c(opts.neutral, 10),
+      'surface-variant': c(opts.neutralVariant, 30),
+      outline: c(opts.neutralVariant, 95),
+      'outline-variant': c(opts.neutralVariant, 10),
+      // https://material.io/blog/tone-based-surface-color-m3
+      'surface-dim': c(opts.neutral, 10),
+      surface: c(opts.neutral, 10),
+      'surface-bright': c(opts.neutral, 10),
+      'surface-container-lowest': c(opts.neutral, 10),
+      'surface-container-low': c(opts.neutral, 10),
+      'surface-container': c(opts.neutral, 10),
+      'surface-container-high': c(opts.neutral, 10),
+      'surface-container-highest': c(opts.neutral, 10),
+    },
+    modes: {
+      dark: {
+        primary: c(opts.primary, 80),
+        secondary: c(opts.secondary, 80),
+        tertiary: c(opts.tertiary, 80),
+        error: c(opts.error, 80),
+        'primary-container': c(opts.primary, 30),
+        'secondary-container': c(opts.secondary, 30),
+        'tertiary-container': c(opts.tertiary, 30),
+        'error-container': c(opts.error, 30),
+        background: c(opts.neutral, 6),
+        'surface-variant': c(opts.neutralVariant, 30),
+        outline: c(opts.neutralVariant, 60),
+        'outline-variant': c(opts.neutralVariant, 30),
+        // https://material.io/blog/tone-based-surface-color-m3
+        // TODO: get the actual values from here once updated: https://github.com/material-foundation/material-color-utilities/blob/main/dart/lib/scheme/scheme.dart#L126-L156
+        'surface-dim': c(opts.neutral, 6),
+        surface: c(opts.neutral, 6),
+        'surface-bright': c(opts.neutral, 24),
+        'surface-container-lowest': c(opts.neutral, 4),
+        'surface-container-low': c(opts.neutral, 10),
+        'surface-container': c(opts.neutral, 12),
+        'surface-container-high': c(opts.neutral, 17),
+        'surface-container-highest': c(opts.neutral, 22),
+        on: {
+          primary: c(opts.primary, 20),
+          secondary: c(opts.secondary, 20),
+          tertiary: c(opts.tertiary, 20),
+          error: c(opts.error, 20),
+          'primary-container': c(opts.primary, 90),
+          'secondary-container': c(opts.secondary, 90),
+          'tertiary-container': c(opts.tertiary, 90),
+          'error-container': c(opts.error, 90),
+          background: c(opts.neutral, 90),
+          'surface-variant': c(opts.neutralVariant, 80),
+          outline: c(opts.neutralVariant, 10),
+          'outline-variant': c(opts.neutralVariant, 90),
+          // https://material.io/blog/tone-based-surface-color-m3
+          'surface-dim': c(opts.neutral, 90),
+          surface: c(opts.neutral, 90),
+          'surface-bright': c(opts.neutral, 90),
+          'surface-container-lowest': c(opts.neutral, 90),
+          'surface-container-low': c(opts.neutral, 90),
+          'surface-container': c(opts.neutral, 90),
+          'surface-container-high': c(opts.neutral, 90),
+          'surface-container-highest': c(opts.neutral, 90),
+        },
+      },
+    },
+  };
+}

package/src/ThemeExplorer/makeTailwindTheme.ts

@@ -1,44 +1,44 @@
-import {
-  DARK_SCHEME_CLASS,
-  LIGHT_SCHEME_CLASS,
-  transformTheme,
-} from '@basic-ui/dynamic-theme';
-
-import type { Theme } from '../theme/theme';
-
-export function makeTailwindThemeCSS(theme: Theme) {
-  const transformedTheme = transformTheme(theme, []);
-  const { light, dark } = transformedTheme.colorModes;
-
-  const parseColorMode = (colors: Record<string, string>) => {
-    const keys = Object.keys(colors);
-    const cssLines: string[] = [];
-    // let css = '';
-    for (const key of keys) {
-      if (!key.endsWith('--rgb')) {
-        continue;
-      }
-
-      cssLines.push(`  ` + key + ': ' + colors[key]);
-    }
-    return cssLines.join(';\n') + ';';
-  };
-
-  const bodySelector = `body`;
-  const lightThemeSelector = [
-    '' + bodySelector,
-    '' + bodySelector + '.' + LIGHT_SCHEME_CLASS,
-    '' + bodySelector + ' .' + LIGHT_SCHEME_CLASS,
-  ].join(',\n');
-  const darkThemeSelector = [
-    '' + bodySelector + '.' + DARK_SCHEME_CLASS,
-    '' + bodySelector + ' .' + DARK_SCHEME_CLASS,
-  ].join(',\n');
-
-  return `${lightThemeSelector} {
-${parseColorMode(light)}
-}
-${darkThemeSelector} {
-${parseColorMode(dark)}
-}`;
-}
+import {
+  DARK_SCHEME_CLASS,
+  LIGHT_SCHEME_CLASS,
+  transformTheme,
+} from '@basic-ui/dynamic-theme';
+
+import type { Theme } from '../theme/theme';
+
+export function makeTailwindThemeCSS(theme: Theme) {
+  const transformedTheme = transformTheme(theme, []);
+  const { light, dark } = transformedTheme.colorModes;
+
+  const parseColorMode = (colors: Record<string, string>) => {
+    const keys = Object.keys(colors);
+    const cssLines: string[] = [];
+    // let css = '';
+    for (const key of keys) {
+      if (!key.endsWith('--rgb')) {
+        continue;
+      }
+
+      cssLines.push(`  ` + key + ': ' + colors[key]);
+    }
+    return cssLines.join(';\n') + ';';
+  };
+
+  const bodySelector = `body`;
+  const lightThemeSelector = [
+    '' + bodySelector,
+    '' + bodySelector + '.' + LIGHT_SCHEME_CLASS,
+    '' + bodySelector + ' .' + LIGHT_SCHEME_CLASS,
+  ].join(',\n');
+  const darkThemeSelector = [
+    '' + bodySelector + '.' + DARK_SCHEME_CLASS,
+    '' + bodySelector + ' .' + DARK_SCHEME_CLASS,
+  ].join(',\n');
+
+  return `${lightThemeSelector} {
+${parseColorMode(light)}
+}
+${darkThemeSelector} {
+${parseColorMode(dark)}
+}`;
+}

package/src/ThemeExplorer/updateGoogleFonts.js

@@ -1,33 +1,32 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const { writeFileSync } = require('fs');
-
-// This file auto generates our googleFonts.ts file
-
-// You can generate an API key from here
-// https://developers.google.com/fonts/docs/developer_api#APIKey
-const API_KEY = process.env.GOOGLE_FONTS_API_KEY;
-
-async function main() {
-  const res = await fetch(
-    `https://content-webfonts.googleapis.com/v1/webfonts?sort=POPULARITY&key=${API_KEY}`
-  );
-
-  const json = await res.json();
-  if (json.error) {
-    console.error(json.error);
-    return;
-  }
-  const fonts = json.items.map((item) => item.family);
-  let str = '';
-  str += `// THIS FILE WAS AUTOGENERATED BY updateGoogleFonts.js\n`;
-  str += `// TO UPDATE IT RUN THE FOLLOWING WITH Node.js v18+\n`;
-  str += `// GOOGLE_FONTS_API_KEY="<SECRET>" node updateGoogleFonts.js`;
-  str += `\n\n/* eslint-disable prettier/prettier */\n`;
-  str += `export const googleFonts = [\n`;
-  str += fonts.map((f) => '  ' + JSON.stringify(f)).join(',\n');
-  str += '\n];\n';
-
-  writeFileSync('./googleFonts.ts', str, 'utf-8');
-}
-
-main();
+const { writeFileSync } = require('fs');
+
+// This file auto generates our googleFonts.ts file
+
+// You can generate an API key from here
+// https://developers.google.com/fonts/docs/developer_api#APIKey
+const API_KEY = process.env.GOOGLE_FONTS_API_KEY;
+
+async function main() {
+  const res = await fetch(
+    `https://content-webfonts.googleapis.com/v1/webfonts?sort=POPULARITY&key=${API_KEY}`
+  );
+
+  const json = await res.json();
+  if (json.error) {
+    console.error(json.error);
+    return;
+  }
+  const fonts = json.items.map((item) => item.family);
+  let str = '';
+  str += `// THIS FILE WAS AUTOGENERATED BY updateGoogleFonts.js\n`;
+  str += `// TO UPDATE IT RUN THE FOLLOWING WITH Node.js v18+\n`;
+  str += `// GOOGLE_FONTS_API_KEY="<SECRET>" node updateGoogleFonts.js`;
+  str += `\n\n/* eslint-disable prettier/prettier */\n`;
+  str += `export const googleFonts = [\n`;
+  str += fonts.map((f) => '  ' + JSON.stringify(f)).join(',\n');
+  str += '\n];\n';
+
+  writeFileSync('./googleFonts.ts', str, 'utf-8');
+}
+
+main();

package/src/ThemeExplorer/useDeferredColor.tsx

@@ -1,21 +1,21 @@
-import { useMemo } from 'react';
-import { TonalPalette, argbFromHex } from '@material/material-color-utilities';
-import type { Color } from '@basic-ui/color-picker';
-
-import { useLocalStorageCachedState } from './useLocalStorageCachedState';
-
-export function useDeferredColor(
-  key: string,
-  fallbackValue: TonalPalette
-): [Color | null, TonalPalette, (c: Color | null) => void] {
-  const [color, setColor] = useLocalStorageCachedState<Color | null>(
-    null,
-    'theme-builder.' + key
-  );
-  const colorTonal = useMemo(
-    () =>
-      color?.hex ? TonalPalette.fromInt(argbFromHex(color.hex)) : fallbackValue,
-    [color?.hex, fallbackValue]
-  );
-  return [color, colorTonal, setColor];
-}
+import { useMemo } from 'react';
+import { TonalPalette, argbFromHex } from '@material/material-color-utilities';
+import type { Color } from '@basic-ui/color-picker';
+
+import { useLocalStorageCachedState } from './useLocalStorageCachedState';
+
+export function useDeferredColor(
+  key: string,
+  fallbackValue: TonalPalette
+): [Color | null, TonalPalette, (c: Color | null) => void] {
+  const [color, setColor] = useLocalStorageCachedState<Color | null>(
+    null,
+    'theme-builder.' + key
+  );
+  const colorTonal = useMemo(
+    () =>
+      color?.hex ? TonalPalette.fromInt(argbFromHex(color.hex)) : fallbackValue,
+    [color?.hex, fallbackValue]
+  );
+  return [color, colorTonal, setColor];
+}

package/src/ThemeExplorer/useLocalStorageCachedState.ts

@@ -1,18 +1,18 @@
-import { useCallback, useState } from 'react';
-
-export function useLocalStorageCachedState<T>(
-  initialValue: T,
-  key: string
-): [T, (c: T) => void] {
-  const [state, _setState] = useState<T>(
-    () => JSON.parse(localStorage.getItem(key) || 'null') || initialValue
-  );
-  const setState = useCallback(
-    (c: T): void => {
-      _setState(c);
-      localStorage.setItem(key, JSON.stringify(c));
-    },
-    [key]
-  );
-  return [state, setState];
-}
+import { useCallback, useState } from 'react';
+
+export function useLocalStorageCachedState<T>(
+  initialValue: T,
+  key: string
+): [T, (c: T) => void] {
+  const [state, _setState] = useState<T>(
+    () => JSON.parse(localStorage.getItem(key) || 'null') || initialValue
+  );
+  const setState = useCallback(
+    (c: T): void => {
+      _setState(c);
+      localStorage.setItem(key, JSON.stringify(c));
+    },
+    [key]
+  );
+  return [state, setState];
+}

package/src/Tooltip/Tooltip.story.tsx

@@ -1,35 +1,35 @@
-import { useEffect, useRef, useState } from 'react';
-
-import { Tooltip } from './';
-import { Button } from '../Button';
-// import './styles.css';
-
-export default {
-  title: 'components/Tooltip',
-};
-
-const Example = () => {
-  const buttonRef = useRef<HTMLButtonElement>(null);
-  const [counter, setCounter] = useState(0);
-  useEffect(() => {
-    const interval = setInterval(() => setCounter((f) => f + 1), 50);
-    return () => clearInterval(interval);
-  }, []);
-
-  return (
-    <div style={{ margin: 100, display: 'flex' }}>
-      <Tooltip label="Secondary action">
-        <Button ref={buttonRef} mx={2} variant="outlined">
-          Cancel
-        </Button>
-      </Tooltip>
-      <Tooltip label={`Main action ${counter}`}>
-        <Button ref={buttonRef} mx={2} variant="filled">
-          Ok
-        </Button>
-      </Tooltip>
-    </div>
-  );
-};
-
-export const Default = () => <Example />;
+import { useEffect, useRef, useState } from 'react';
+
+import { Tooltip } from './';
+import { Button } from '../Button';
+// import './styles.css';
+
+export default {
+  title: 'components/Tooltip',
+};
+
+const Example = () => {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const [counter, setCounter] = useState(0);
+  useEffect(() => {
+    const interval = setInterval(() => setCounter((f) => f + 1), 50);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div style={{ margin: 100, display: 'flex' }}>
+      <Tooltip label="Secondary action">
+        <Button ref={buttonRef} mx={2} variant="outlined">
+          Cancel
+        </Button>
+      </Tooltip>
+      <Tooltip label={`Main action ${counter}`}>
+        <Button ref={buttonRef} mx={2} variant="filled">
+          Ok
+        </Button>
+      </Tooltip>
+    </div>
+  );
+};
+
+export const Default = () => <Example />;