@jakubmazanec/ui 0.1.0-unstable.0c19abe

package/source/development/createTailwindMerge.ts

@@ -0,0 +1,101 @@
+import {extendTailwindMerge, twMerge} from 'tailwind-merge';
+import {type Config as TailwindConfig} from 'tailwindcss';
+
+const THEME_SCALES = [
+  'colors',
+  'spacing',
+  'blur',
+  'brightness',
+  'borderColor',
+  'borderRadius',
+  'borderSpacing',
+  'borderWidth',
+  'contrast',
+  'grayscale',
+  'hueRotate',
+  'invert',
+  'gap',
+  'gradientColorStops',
+  'gradientColorStopPositions',
+  'inset',
+  'margin',
+  'opacity',
+  'padding',
+  'saturate',
+  'scale',
+  'sepia',
+  'skew',
+  'space',
+  'translate',
+];
+
+export function createTailwindMerge(tailwindConfig: TailwindConfig) {
+  if (!tailwindConfig.theme) {
+    return twMerge;
+  }
+
+  let tailwindMergeConfig: Parameters<typeof extendTailwindMerge>[0] = {
+    override: {theme: {}},
+    extend: {theme: {}},
+  };
+
+  for (let scale of THEME_SCALES) {
+    if (!tailwindMergeConfig.override?.theme || !tailwindMergeConfig.extend?.theme) {
+      throw new Error('Creating Tailwind merge failed!');
+    }
+
+    if (tailwindConfig.theme[scale]) {
+      let tailwindConfigScale = tailwindConfig.theme[scale] as Record<
+        string,
+        Record<string, string | unknown> | unknown
+      >;
+      let keys = Object.keys(tailwindConfigScale);
+      let combinedKeys = [];
+
+      for (let key of keys) {
+        if (
+          tailwindConfigScale[key] !== undefined &&
+          tailwindConfigScale[key] !== null &&
+          typeof tailwindConfigScale[key] === 'object'
+        ) {
+          combinedKeys.push(
+            ...Object.keys(tailwindConfigScale[key] as object)
+              .filter((value) => value !== 'DEFAULT')
+              .map((value) => `${key}-${value}`),
+          );
+        } else {
+          combinedKeys.push(key);
+        }
+      }
+
+      tailwindMergeConfig.override.theme[scale] = combinedKeys;
+    } else if (tailwindConfig.theme.extend?.[scale]) {
+      let tailwindConfigScale = tailwindConfig.theme.extend[scale] as Record<
+        string,
+        Record<string, string | unknown> | unknown
+      >;
+      let keys = Object.keys(tailwindConfigScale);
+      let combinedKeys = [];
+
+      for (let key of keys) {
+        if (
+          tailwindConfigScale[key] !== undefined &&
+          tailwindConfigScale[key] !== null &&
+          typeof tailwindConfigScale[key] === 'object'
+        ) {
+          combinedKeys.push(
+            ...Object.keys(tailwindConfigScale[key] as object)
+              .filter((value) => value !== 'DEFAULT')
+              .map((value) => `${key}-${value}`),
+          );
+        } else {
+          combinedKeys.push(key);
+        }
+      }
+
+      tailwindMergeConfig.extend.theme[scale] = combinedKeys;
+    }
+  }
+
+  return extendTailwindMerge(tailwindMergeConfig);
+}

package/source/development/defaultTailwindConfig.ts

@@ -0,0 +1,45 @@
+import {type CreateTailwindConfigOptions} from './createTailwindConfig.js';
+
+export const defaultTailwindConfig = {
+  content: ['./{.storybook,app,source,stories}/**/*.{js,jsx,ts,tsx,mdx}', '@jakubmazanec/ui'],
+  colors: {
+    gray: '#6c6e79',
+    red: '#d1002f',
+    orange: {
+      hex: '#c33909',
+      hueShift: 1,
+    },
+    yellow: {
+      swatches: [
+        {hex: '#fffffa', stop: 10},
+        {hex: '#fffef0', stop: 25},
+        {hex: '#fffbdb', stop: 50},
+        {hex: '#fff3b8', stop: 100},
+        {hex: '#ffe06f', stop: 200},
+        {hex: '#ffc72d', stop: 300},
+        {hex: '#e69d00', stop: 400},
+        {hex: '#9e6300', stop: 500},
+        {hex: '#805701', stop: 600},
+        {hex: '#614700', stop: 700},
+        {hex: '#3d3000', stop: 800},
+        {hex: '#1f1a00', stop: 900},
+        {hex: '#0f0e00', stop: 950},
+        {hex: '#0a0a00', stop: 975},
+        {hex: '#050500', stop: 990},
+      ],
+      hex: '#9e6300',
+      hueShift: 3,
+    },
+    green: '#0a7e22',
+    teal: {
+      hex: '#007c65',
+      hueShift: 5,
+    },
+    blue: '#006dca',
+    violet: '#8649e1',
+    pink: {
+      hex: '#b229b9',
+      hueShift: 10,
+    },
+  },
+} satisfies CreateTailwindConfigOptions;

package/source/development/internals/PaletteConfig.ts

@@ -0,0 +1,6 @@
+export type PaletteConfig = {
+  value: string;
+  valueStop: number;
+  h: number;
+  s: number;
+};

package/source/development/internals/SwatchValue.ts

@@ -0,0 +1,9 @@
+export type SwatchValue = {
+  hex: string;
+  stop: number;
+  h: number;
+  hScale: number;
+  s: number;
+  sScale: number;
+  l: number;
+};

package/source/development/internals/clamp.ts

@@ -0,0 +1,3 @@
+export function clamp(x: number, min: number, max: number) {
+  return Math.min(Math.max(x, min), max);
+}

package/source/development/internals/constants.ts

@@ -0,0 +1,4 @@
+export const DEFAULT_STOP = 500;
+export const DEFAULT_STOPS = [
+  0, 10, 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950, 975, 990, 1000,
+] as const;

package/source/development/internals/createDisplayColor.ts

@@ -0,0 +1,29 @@
+import {oklch} from 'culori';
+
+import {isHex} from './isHex.js';
+import {round} from './round.js';
+
+export function createDisplayColor(hexColor: string, alphaPlaceholder?: boolean): string | null {
+  if (!hexColor || !isHex(hexColor)) {
+    return null;
+  }
+
+  let display = null;
+  let oklchColor = oklch(hexColor);
+
+  if (!oklchColor) {
+    throw new Error(`Couldn't convert "${hexColor}" to OKLCH!`);
+  }
+
+  let {l, c, h = 0} = oklchColor;
+
+  display = `oklch(${[
+    `${round(l * 100, 2)}%`,
+    round(c, 3),
+    round(h, 2),
+    `/`,
+    alphaPlaceholder ? `<alpha-value>` : 1,
+  ].join(` `)})`;
+
+  return display;
+}

package/source/development/internals/createDistributionValues.ts

@@ -0,0 +1,38 @@
+import {DEFAULT_STOP, DEFAULT_STOPS} from './constants.js';
+
+const MIN = 0;
+const MAX = 100;
+
+export function createDistributionValues(lightness: number, stop: number = DEFAULT_STOP) {
+  let stops: number[] = [...DEFAULT_STOPS].sort() as unknown as number[];
+  let newValues = [
+    {stop: 0, value: MAX},
+    {stop, value: lightness},
+    {stop: 1000, value: MIN},
+  ];
+  let stopIndex = stops.indexOf(stop);
+  let firstHalf = stops.slice(0, stopIndex + 1);
+  let secondHalf = stops.slice(stopIndex);
+
+  for (let stopValue of firstHalf) {
+    if (stopValue !== 0 && stopValue !== stop) {
+      let percentage = (stopValue - 0) / (stop - 0);
+      let value = MAX - percentage * (MAX - lightness);
+
+      newValues.push({stop: stopValue, value: Math.round(value)});
+    }
+  }
+
+  for (let stopValue of secondHalf) {
+    if (stopValue !== 1000 && stopValue !== stop) {
+      let percentage = (stopValue - stop) / (1000 - stop);
+      let value = lightness - percentage * (lightness - MIN);
+
+      newValues.push({stop: stopValue, value: Math.round(value)});
+    }
+  }
+
+  newValues.sort((a, b) => a.stop - b.stop);
+
+  return newValues;
+}

package/source/development/internals/createHueScale.ts

@@ -0,0 +1,17 @@
+import {DEFAULT_STOP, DEFAULT_STOPS} from './constants.js';
+
+export function createHueScale(tweak = 0, stop: number = DEFAULT_STOP) {
+  let stops: number[] = DEFAULT_STOPS as unknown as number[];
+  let index = stops.indexOf(stop);
+
+  if (index === -1) {
+    throw new Error(`Invalid parameter value: ${stop}`);
+  }
+
+  return stops.map((stop) => {
+    let diff = Math.abs(stops.indexOf(stop) - index);
+    let tweakValue = tweak ? diff * tweak : 0;
+
+    return {stop, tweak: tweakValue};
+  });
+}

package/source/development/internals/createPalette.ts

@@ -0,0 +1,54 @@
+import {DEFAULT_STOP, type DEFAULT_STOPS} from './constants.js';
+import {createDisplayColor} from './createDisplayColor.js';
+import {createSwatches} from './createSwatches.js';
+
+export type CreatePaletteOptions<N extends string> = {
+  name: N;
+  swatches: Array<{hex: string; stop: number}>;
+  hueShift: number;
+  saturationShift: number;
+};
+
+export type CreatePaletteReturn<N extends string> = {
+  [K in N]: {[J in (typeof DEFAULT_STOPS)[number]]: string};
+};
+
+export function createPalette<const N extends string>({
+  name,
+  swatches,
+  hueShift,
+  saturationShift,
+}: CreatePaletteOptions<N>): CreatePaletteReturn<N> {
+  let defaultSwatch = swatches.find((swatch) => swatch.stop === DEFAULT_STOP);
+
+  if (!defaultSwatch) {
+    throw new Error(`Swatches are missing color for stop "${DEFAULT_STOP}"!`);
+  }
+
+  let allSwatches = createSwatches({
+    value: defaultSwatch.hex,
+    valueStop: DEFAULT_STOP,
+    h: hueShift,
+    s: saturationShift,
+  });
+  let palette = {};
+
+  allSwatches
+    .filter((swatch) => ![0, 1000].includes(swatch.stop))
+    .forEach((newSwatch) => {
+      let existingSwatch = swatches.find((swatch) => swatch.stop === newSwatch.stop);
+
+      if (existingSwatch) {
+        Object.assign(palette, {
+          [existingSwatch.stop]: createDisplayColor(existingSwatch.hex, true),
+        });
+      } else {
+        Object.assign(palette, {[newSwatch.stop]: createDisplayColor(newSwatch.hex, true)});
+      }
+    });
+
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- false positive
+  return {
+    [name]: palette,
+  } as CreatePaletteReturn<N>;
+}

package/source/development/internals/createSaturationScale.ts

@@ -0,0 +1,21 @@
+import {DEFAULT_STOP, DEFAULT_STOPS} from './constants.js';
+
+export function createSaturationScale(tweak = 0, stop: number = DEFAULT_STOP) {
+  let stops: number[] = DEFAULT_STOPS as unknown as number[];
+  let index = stops.indexOf(stop);
+
+  if (index === -1) {
+    throw new Error(`Invalid key value: ${stop}`);
+  }
+
+  return stops.map((stop) => {
+    let diff = Math.abs(stops.indexOf(stop) - index);
+    let tweakValue = tweak ? Math.round((diff + 1) * tweak * (1 + diff / 10)) : 0;
+
+    if (tweakValue > 100) {
+      return {stop, tweak: 100};
+    }
+
+    return {stop, tweak: tweakValue};
+  });
+}

package/source/development/internals/createSwatches.ts

@@ -0,0 +1,34 @@
+import {clamp} from './clamp.js';
+import {createDistributionValues} from './createDistributionValues.js';
+import {createHueScale} from './createHueScale.js';
+import {createSaturationScale} from './createSaturationScale.js';
+import {hexToHsl} from './hexToHsl.js';
+import {hslToHex} from './hslToHex.js';
+import {type PaletteConfig} from './PaletteConfig.js';
+import {unsignedModulo} from './unsignedModulo.js';
+
+export function createSwatches(palette: PaletteConfig) {
+  let hueScale = createHueScale(palette.h, palette.valueStop);
+  let saturationScale = createSaturationScale(palette.s, palette.valueStop);
+  let {h, s, l} = hexToHsl(palette.value);
+  let distributionScale = createDistributionValues(l, palette.valueStop);
+
+  let swatches = hueScale.map(({stop}, stopIndex) => {
+    let newH = unsignedModulo(h + hueScale[stopIndex]!.tweak, 360);
+    let newS = clamp(s + saturationScale[stopIndex]!.tweak, 0, 100);
+    let newL = clamp(distributionScale[stopIndex]!.value, 0.1, 99.9); // this is to make sure the first two or last two swatches (the first being total white and the last being total black) aren't the same lightness
+    let newHex = hslToHex(newH, newS, newL);
+
+    return {
+      stop,
+      hex: stop === palette.valueStop ? palette.value.toUpperCase() : newHex.toUpperCase(),
+      h: newH,
+      hScale: ((unsignedModulo(hueScale[stopIndex]!.tweak + 180, 360) - 180) / 180) * 50,
+      s: newS,
+      sScale: newS - 50,
+      l: newL,
+    };
+  });
+
+  return swatches;
+}

package/source/development/internals/hexToHsl.ts

@@ -0,0 +1,45 @@
+import {hexToRgb} from './hexToRgb.js';
+
+export function hexToHsl(rawHex: string) {
+  let hex = rawHex;
+
+  if (hex.length === 6 && !hex.startsWith(`#`)) {
+    hex = `#${hex}`;
+  }
+
+  let {r, g, b} = hexToRgb(hex);
+
+  r /= 255;
+  g /= 255;
+  b /= 255;
+
+  let cmin = Math.min(r, g, b);
+  let cmax = Math.max(r, g, b);
+  let delta = cmax - cmin;
+  let h = 0;
+  let s = 0;
+  let l = 0;
+
+  if (delta === 0) {
+    h = 0;
+  } else if (cmax === r) {
+    h = ((g - b) / delta) % 6;
+  } else if (cmax === g) {
+    h = (b - r) / delta + 2;
+  } else {
+    h = (r - g) / delta + 4;
+  }
+
+  h = Math.round(h * 60);
+
+  if (h < 0) {
+    h += 360;
+  }
+
+  l = (cmax + cmin) / 2;
+  s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
+  s = +(s * 100).toFixed(1);
+  l = +(l * 100).toFixed(1);
+
+  return {h, s, l}; // values can be used like this: `hsl(${h}, ${s}%, ${l}%)`
+}

package/source/development/internals/hexToRgb.ts

@@ -0,0 +1,23 @@
+export function hexToRgb(rawHex: string) {
+  let hex = rawHex;
+
+  if (hex.length === 6 && !hex.startsWith(`#`)) {
+    hex = `#${hex}`;
+  }
+
+  let r = `0`;
+  let g = `0`;
+  let b = `0`;
+
+  if (hex.length === 4) {
+    r = `0x${hex[1]}${hex[1]}`;
+    g = `0x${hex[2]}${hex[2]}`;
+    b = `0x${hex[3]}${hex[3]}`;
+  } else if (hex.length === 7) {
+    r = `0x${hex[1]}${hex[2]}`;
+    g = `0x${hex[3]}${hex[4]}`;
+    b = `0x${hex[5]}${hex[6]}`;
+  }
+
+  return {r: Number(r), g: Number(g), b: Number(b)};
+}

package/source/development/internals/hslToHex.ts

@@ -0,0 +1,23 @@
+import {hslToRgb} from './hslToRgb.js';
+
+export function hslToHex(h: number, s: number, l: number) {
+  let {r, g, b} = hslToRgb(h, s, l);
+
+  let rHex = r.toString(16);
+  let gHex = g.toString(16);
+  let bHex = b.toString(16);
+
+  if (rHex.length === 1) {
+    rHex = `0${rHex}`;
+  }
+
+  if (gHex.length === 1) {
+    gHex = `0${gHex}`;
+  }
+
+  if (bHex.length === 1) {
+    bHex = `0${bHex}`;
+  }
+
+  return `#${rHex}${gHex}${bHex}`;
+}

package/source/development/internals/hslToRgb.ts

@@ -0,0 +1,43 @@
+export function hslToRgb(h: number, rawS: number, rawL: number) {
+  let s = rawS / 100;
+  let l = rawL / 100;
+
+  let c = (1 - Math.abs(2 * l - 1)) * s;
+  let x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+  let m = l - c / 2;
+  let r = 0;
+  let g = 0;
+  let b = 0;
+
+  if (h >= 0 && h < 60) {
+    r = c;
+    g = x;
+    b = 0;
+  } else if (h >= 60 && h < 120) {
+    r = x;
+    g = c;
+    b = 0;
+  } else if (h >= 120 && h < 180) {
+    r = 0;
+    g = c;
+    b = x;
+  } else if (h >= 180 && h < 240) {
+    r = 0;
+    g = x;
+    b = c;
+  } else if (h >= 240 && h < 300) {
+    r = x;
+    g = 0;
+    b = c;
+  } else if (h >= 300 && h < 360) {
+    r = c;
+    g = 0;
+    b = x;
+  }
+
+  return {
+    r: Math.round((r + m) * 255),
+    g: Math.round((g + m) * 255),
+    b: Math.round((b + m) * 255),
+  };
+}

package/source/development/internals/isHex.ts

@@ -0,0 +1,7 @@
+export function isHex(value: string) {
+  const valueHex = value.length === 6 && !value.startsWith(`#`) ? `#${value}` : value;
+
+  const re = new RegExp(/^#[\da-f]{6}$/i);
+
+  return re.test(valueHex.toUpperCase());
+}

package/source/development/internals/resolveModule.ts

@@ -0,0 +1,9 @@
+import module from 'node:module';
+import path from 'node:path';
+
+export function resolveModule(moduleId: string) {
+  let require = module.createRequire(import.meta.url);
+  let modulePath = path.dirname(require.resolve(`${moduleId}/package.json`));
+
+  return modulePath;
+}

package/source/development/internals/round.ts

@@ -0,0 +1,5 @@
+export function round(value: number, precision = 0) {
+  const multiplier = 10 ** precision;
+
+  return Math.round(value * multiplier) / multiplier;
+}

package/source/development/internals/unsignedModulo.ts

@@ -0,0 +1,3 @@
+export function unsignedModulo(x: number, n: number) {
+  return ((x % n) + n) % n;
+}

package/source/development/internals.ts

@@ -0,0 +1 @@
+export * from './internals/constants.js';

package/source/development.ts

@@ -0,0 +1,3 @@
+export * from './development/createTailwindConfig.js';
+export * from './development/createTailwindMerge.js';
+export * from './development/defaultTailwindConfig.js';

package/source/fonts.css

@@ -0,0 +1,15 @@
+@font-face {
+  font-family: InterVariable;
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('./inter-variable.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: InterVariable;
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('./inter-variable-italic.woff2') format('woff2');
+}

package/source/main.ts

@@ -0,0 +1,8 @@
+export * from './components.js';
+export {createTailwindMerge} from './development/createTailwindMerge.js';
+export * from './theme.js';
+export * from '@heroicons/react/16/solid';
+// export * from '@heroicons/react/20/solid';
+// export * from '@heroicons/react/24/outline';
+// export * from '@heroicons/react/24/solid';
+export {useForm} from 'react-hook-form';

package/source/theme/Theme.ts

@@ -0,0 +1,72 @@
+import {type Simplify} from '@jakubmazanec/ts-utils';
+
+import {type useButtonTheme} from '../components/Button.js';
+import {type useCheckboxTheme} from '../components/Checkbox.js';
+import {type useCheckboxFieldTheme} from '../components/CheckboxField.js';
+import {type useComboboxTheme} from '../components/Combobox.js';
+import {type useConfirmDialogTheme} from '../components/ConfirmDialog.js';
+import {type useDialogTheme} from '../components/Dialog.js';
+import {type useDialogPanelTheme} from '../components/DialogPanel.js';
+import {type useDialogTitleTheme} from '../components/DialogTitle.js';
+import {type useErrorTheme} from '../components/Error.js';
+import {type useFieldTheme} from '../components/Field.js';
+import {type useFormTheme} from '../components/Form.js';
+import {type useInputTheme} from '../components/Input.js';
+import {type useLabelTheme} from '../components/Label.js';
+import {type useListboxTheme} from '../components/Listbox.js';
+import {type useMenuTheme} from '../components/Menu.js';
+import {type useMenuButtonTheme} from '../components/MenuButton.js';
+import {type useMenuItemTheme} from '../components/MenuItem.js';
+import {type useMenuItemsTheme} from '../components/MenuItems.js';
+import {type usePopoverTheme} from '../components/Popover.js';
+import {type usePopoverButtonTheme} from '../components/PopoverButton.js';
+import {type usePopoverPanelTheme} from '../components/PopoverPanel.js';
+import {type useRadioTheme} from '../components/Radio.js';
+import {type useRadioFieldTheme} from '../components/RadioField.js';
+import {type useRadioGroupFieldTheme} from '../components/RadioGroupField.js';
+import {type useTableTheme} from '../components/Table.js';
+import {type useTableCellTheme} from '../components/TableCell.js';
+import {type useTableHeaderTheme} from '../components/TableHeader.js';
+import {type useTableHeaderCellTheme} from '../components/TableHeaderCell.js';
+import {type useTableRowTheme} from '../components/TableRow.js';
+import {type useTextareaTheme} from '../components/Textarea.js';
+import {type ComponentTheme, type ComponentThemeDefinition} from './internals.js';
+
+type ThemeHelper<
+  U extends {themeDefinition: ComponentThemeDefinition | undefined; componentThemeName: string},
+> = {
+  [K in U['componentThemeName']]: ComponentTheme<U['themeDefinition']>;
+};
+
+export type Theme = Simplify<
+  ThemeHelper<typeof useButtonTheme> &
+    ThemeHelper<typeof useCheckboxFieldTheme> &
+    ThemeHelper<typeof useCheckboxTheme> &
+    ThemeHelper<typeof useComboboxTheme> &
+    ThemeHelper<typeof useConfirmDialogTheme> &
+    ThemeHelper<typeof useDialogPanelTheme> &
+    ThemeHelper<typeof useDialogTheme> &
+    ThemeHelper<typeof useDialogTitleTheme> &
+    ThemeHelper<typeof useErrorTheme> &
+    ThemeHelper<typeof useFieldTheme> &
+    ThemeHelper<typeof useFormTheme> &
+    ThemeHelper<typeof useInputTheme> &
+    ThemeHelper<typeof useLabelTheme> &
+    ThemeHelper<typeof useListboxTheme> &
+    ThemeHelper<typeof useMenuButtonTheme> &
+    ThemeHelper<typeof useMenuItemsTheme> &
+    ThemeHelper<typeof useMenuItemTheme> &
+    ThemeHelper<typeof useMenuTheme> &
+    ThemeHelper<typeof usePopoverButtonTheme> &
+    ThemeHelper<typeof usePopoverPanelTheme> &
+    ThemeHelper<typeof usePopoverTheme> &
+    ThemeHelper<typeof useRadioFieldTheme> &
+    ThemeHelper<typeof useRadioGroupFieldTheme> &
+    ThemeHelper<typeof useRadioTheme> &
+    ThemeHelper<typeof useTableCellTheme> &
+    ThemeHelper<typeof useTableHeaderCellTheme> &
+    ThemeHelper<typeof useTableHeaderTheme> &
+    ThemeHelper<typeof useTableRowTheme> &
+    ThemeHelper<typeof useTableTheme> &
+    ThemeHelper<typeof useTextareaTheme>
+>;

package/source/theme/ThemeProvider.tsx

@@ -0,0 +1,12 @@
+import {type PropsWithChildren} from 'react';
+
+import {themeContext} from './internals.js';
+import {type Theme} from './Theme.js';
+
+export type ThemeProviderProps = {
+  theme: Theme;
+};
+
+export function ThemeProvider({children, theme}: PropsWithChildren<ThemeProviderProps>) {
+  return <themeContext.Provider value={theme}>{children}</themeContext.Provider>;
+}