@jakubmazanec/ui 0.1.0-unstable.081bdf1

package/source/components/data-table/DataTablePageButton.tsx

@@ -0,0 +1,21 @@
+import {useCallback} from 'react';
+
+import {Button} from '../Button.js';
+
+export type DataTablePageButtonProps = {
+  page: number;
+  isSelected: boolean;
+  onClick: (page: number) => void;
+};
+
+export function DataTablePageButton({page, isSelected, onClick}: DataTablePageButtonProps) {
+  let handleClick = useCallback(() => {
+    onClick(page);
+  }, [onClick, page]);
+
+  return (
+    <Button variant={isSelected ? 'solid' : 'outline'} onClick={handleClick}>
+      {page}
+    </Button>
+  );
+}

package/source/components/data-table/internals/constants.ts

@@ -0,0 +1,3 @@
+export const MAX_PAGE_BUTTONS_COUNT = 10;
+export const PAGE_SIZES = [10, 25, 50, 75, 100] as const;
+export const DEFAULT_PAGE_SIZE = 50;

package/source/components/data-table/internals/getCommonPinningClasses.ts

@@ -0,0 +1,19 @@
+import {type Column} from '@tanstack/react-table';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+export function getCommonPinningClasses(column: Column<any>): string {
+  let isPinned = column.getIsPinned();
+  let isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
+  let isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right');
+
+  let borderClassName =
+    isLastLeftPinnedColumn ? 'border-r-2 border-gray-100'
+    : isFirstRightPinnedColumn ? 'border-l-2 border-gray-100'
+    : undefined;
+  let opacityClassName = isPinned ? 'opacity-90' : 'opacity-100';
+  let positionClassName = isPinned ? 'sticky' : 'relative';
+  let zIndexClassName = isPinned ? 'z-10' : 'z-0';
+  let bgClassName = isPinned ? 'bg-white' : 'bg-transparent';
+
+  return `${bgClassName} ${borderClassName} ${opacityClassName} ${positionClassName} ${zIndexClassName}`;
+}

package/source/components/data-table/internals/getCommonPinningStyles.ts

@@ -0,0 +1,13 @@
+import {type Column} from '@tanstack/react-table';
+import {type CSSProperties} from 'react';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+export function getCommonPinningStyles(column: Column<any>): CSSProperties {
+  let isPinned = column.getIsPinned();
+
+  return {
+    left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined,
+    right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined,
+    width: column.getSize(),
+  };
+}

package/source/components/internals/fieldContext.ts

@@ -0,0 +1,4 @@
+import {type FieldMetadata} from '@conform-to/react';
+import {createContext} from 'react';
+
+export const fieldContext = createContext<FieldMetadata | undefined>(undefined);

package/source/components/internals/fieldNameContext.ts

@@ -0,0 +1,5 @@
+import {type FieldName} from '@conform-to/react';
+import {createContext} from 'react';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+export const fieldNameContext = createContext<FieldName<any> | undefined>(undefined);

package/source/components/internals/filterProps.ts

@@ -0,0 +1,12 @@
+import {type ElementType, Fragment} from 'react';
+
+export function filterProps<
+  const T extends Record<string, unknown> & {as?: ElementType | undefined},
+>(props: T): T {
+  if (props.as === Fragment) {
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- false positive
+    return {} as T;
+  }
+
+  return props;
+}

package/source/components/internals/formIdContext.ts

@@ -0,0 +1,3 @@
+import {createContext} from 'react';
+
+export const formIdContext = createContext<string | undefined>(undefined);

package/source/components/internals/forwardRef.ts

@@ -0,0 +1,7 @@
+import {forwardRef as baseForwardRef, type ForwardRefRenderFunction, type Ref} from 'react';
+
+export function forwardRef<T, P>(
+  component: (props: P, ref: Ref<T>) => React.ReactNode,
+): (props: P & {ref?: Ref<T>}) => React.ReactNode {
+  return baseForwardRef(component as unknown as ForwardRefRenderFunction<unknown, unknown>);
+}

package/source/components/internals/useFormId.ts

@@ -0,0 +1,7 @@
+import {useContext} from 'react';
+
+import {formIdContext} from './formIdContext.js';
+
+export function useFormId() {
+  return useContext(formIdContext);
+}

package/source/components/internals.ts

@@ -0,0 +1,6 @@
+export * from './internals/fieldContext.js';
+export * from './internals/fieldNameContext.js';
+export * from './internals/filterProps.js';
+export * from './internals/formIdContext.js';
+export * from './internals/forwardRef.js';
+export * from './internals/useFormId.js';

package/source/components/useField.ts

@@ -0,0 +1,7 @@
+import {useContext} from 'react';
+
+import {fieldContext} from './internals.js';
+
+export function useField() {
+  return useContext(fieldContext);
+}

package/source/components/useFieldName.ts

@@ -0,0 +1,7 @@
+import {useContext} from 'react';
+
+import {fieldNameContext} from './internals.js';
+
+export function useFieldName() {
+  return useContext(fieldNameContext);
+}

package/source/components/useForm.ts

@@ -0,0 +1,24 @@
+import {useForm as useBaseForm} from '@conform-to/react';
+import {parseWithZod} from '@conform-to/zod';
+import {type ZodTypeAny} from 'zod';
+
+export type UseFormOptions<S extends ZodTypeAny> = {
+  schema: S;
+  onSubmit?: Parameters<typeof useBaseForm<S>>[0]['onSubmit'] | undefined;
+};
+
+export function useForm<S extends ZodTypeAny>({schema, onSubmit}: UseFormOptions<S>) {
+  let [form, fields] = useBaseForm({
+    shouldValidate: 'onBlur',
+    shouldRevalidate: 'onInput',
+    onValidate({formData}) {
+      return parseWithZod(formData, {schema});
+    },
+    onSubmit: onSubmit as NonNullable<typeof onSubmit>, // TODO: remove when this is fixed: https://github.com/edmundhung/conform/issues/697
+  });
+
+  return {
+    form,
+    fields,
+  };
+}

package/source/components.ts

@@ -0,0 +1,50 @@
+export * from './components/Button.js';
+export * from './components/Card.js';
+export * from './components/Checkbox.js';
+export * from './components/CheckboxField.js';
+export * from './components/Combobox.js';
+export * from './components/ComboboxOption.js';
+export * from './components/DataTable.js';
+export * from './components/Description.js';
+export * from './components/Dialog.js';
+export * from './components/DialogPanel.js';
+export * from './components/DialogTitle.js';
+export * from './components/Error.js';
+export * from './components/Field.js';
+export * from './components/Fieldset.js';
+export * from './components/Form.js';
+export * from './components/Icon.js';
+export * from './components/Input.js';
+export * from './components/Label.js';
+export * from './components/Legend.js';
+export * from './components/Listbox.js';
+export * from './components/ListboxOption.js';
+export * from './components/Menu.js';
+export * from './components/MenuButton.js';
+export * from './components/MenuHeading.js';
+export * from './components/MenuItem.js';
+export * from './components/MenuItems.js';
+export * from './components/MenuSection.js';
+export * from './components/MenuSeparator.js';
+export * from './components/Popover.js';
+export * from './components/PopoverBackdrop.js';
+export * from './components/PopoverButton.js';
+export * from './components/PopoverGroup.js';
+export * from './components/PopoverPanel.js';
+export * from './components/Radio.js';
+export * from './components/RadioField.js';
+export * from './components/RadioGroup.js';
+export * from './components/Spinner.js';
+export * from './components/Table.js';
+export * from './components/TableBody.js';
+export * from './components/TableCaption.js';
+export * from './components/TableCell.js';
+export * from './components/TableFoot.js';
+export * from './components/TableHead.js';
+export * from './components/TableHeader.js';
+export * from './components/TableRow.js';
+export * from './components/Text.js';
+export * from './components/Textarea.js';
+export * from './components/useField.js';
+export * from './components/useFieldName.js';
+export * from './components/useForm.js';

package/source/development/createTailwindConfig.ts

@@ -0,0 +1,182 @@
+import {type Config as TailwindConfig} from 'tailwindcss';
+
+import {DEFAULT_STOP, type DEFAULT_STOPS} from './internals/constants.js';
+import {createPalette} from './internals/createPalette.js';
+import {resolveModule} from './internals/resolveModule.js';
+
+let defaultCreateTailwindConfigOptions = {
+  content: ['./{.storybook,app,source,stories,tests}/**/*.{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;
+
+export type CreateTailwindConfigOptions = {
+  content?: string[] | undefined;
+  colors?: Record<
+    string,
+    | string
+    | {
+        swatches: Array<{hex: string; stop: (typeof DEFAULT_STOPS)[number]}>;
+        hueShift?: number;
+        saturationShift?: number;
+      }
+    | {hex: string; hueShift?: number; saturationShift?: number}
+  >;
+};
+
+export function createTailwindConfig({
+  content,
+  colors,
+}: CreateTailwindConfigOptions = defaultCreateTailwindConfigOptions): TailwindConfig {
+  let themeColors = {
+    transparent: 'transparent',
+    current: 'currentColor',
+    white: '#fff',
+    black: '#000',
+  };
+
+  for (let [name, color] of Object.entries(colors ?? {})) {
+    if (typeof color === 'string') {
+      themeColors = {
+        ...themeColors,
+        ...createPalette({
+          name,
+          swatches: [
+            {
+              hex: color,
+              stop: DEFAULT_STOP,
+            },
+          ],
+          hueShift: 0,
+          saturationShift: 0,
+        }),
+      };
+    } else if ('swatches' in color) {
+      themeColors = {
+        ...themeColors,
+        ...createPalette({
+          name,
+          swatches: color.swatches,
+          hueShift: color.hueShift ?? 0,
+          saturationShift: color.saturationShift ?? 0,
+        }),
+      };
+    } else if ('hex' in color) {
+      themeColors = {
+        ...themeColors,
+        ...createPalette({
+          name,
+          swatches: [{hex: color.hex, stop: DEFAULT_STOP}],
+          hueShift: color.hueShift ?? 0,
+          saturationShift: color.saturationShift ?? 0,
+        }),
+      };
+    }
+  }
+
+  let resolvedContent = [];
+
+  for (let contentPath of content ?? []) {
+    try {
+      if (contentPath.startsWith('.') || contentPath.startsWith('/')) {
+        resolvedContent.push(contentPath);
+      } else {
+        resolvedContent.push(`${resolveModule(contentPath)}/**`);
+      }
+    } catch {
+      // no-op, because we're catching error caused by `createRequire` not being a function in a browser environment
+    }
+  }
+
+  return {
+    content: resolvedContent,
+    theme: {
+      colors: themeColors,
+      borderRadius: {
+        none: '0',
+        DEFAULT: '0.25rem',
+        '0.5': '0.125rem',
+        '1': '0.25rem',
+        '1.5': '0.375rem',
+        '2': '0.5rem',
+        '2.5': '0.625rem',
+        '3': '0.75rem',
+        '4': '1rem',
+        full: '9999px',
+      },
+      extend: {
+        spacing: {
+          13: '3.25rem',
+          15: '3.75rem',
+          17: '4.25rem',
+          18: '4.5rem',
+          19: '4.75rem',
+          21: '5.25rem',
+          22: '5.5rem',
+          23: '5.75rem',
+          25: '6.25rem',
+          26: '6.5rem',
+          27: '6.75rem',
+          29: '6.25rem',
+          30: '7.5rem',
+          34: '8.5rem',
+          38: '9.5rem',
+          40: '10rem',
+        },
+        fontFamily: {
+          sans: [
+            'InterVariable',
+            'ui-sans-serif',
+            'system-ui',
+            'sans-serif',
+            '"Apple Color Emoji"',
+            '"Segoe UI Emoji"',
+            '"Segoe UI Symbol"',
+            '"Noto Color Emoji"',
+          ],
+        },
+      },
+    },
+    future: {
+      hoverOnlyWhenSupported: true,
+    },
+  };
+}

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/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>;
+}