@orfium/ictinus 5.43.7 → 5.43.9

package/src/theme/functions.ts

@@ -1,77 +0,0 @@
-import { css } from '@emotion/react';
-/* Declare mixins in order to further DRY our code. Any reusable and indepedent =  css code bundle
-  should become a mixin. Include them using the "@include" command inside a =  css selector
- */
-/* centers a block element */
-
-export const grid = css`
-  display: grid;
-
-  grid-auto-columns: 1fr;
-`;
-
-export const well = css`
-  border-radius: 6px;
-  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.08);
-  background-color: white;
-`;
-
-export const centerAbsoluteVertical = css`
-  position: absolute;
-  margin: auto;
-  top: 0;
-  bottom: 0;
-`;
-
-/* quick transition declaration */
-export const transition = (s: number, type = 'all') => css`
-  -webkit-transition: ${type} ${s}s ease-in-out;
-  -moz-transition: ${type} ${s}s ease-in-out;
-  -ms-transition: ${type} ${s}s ease-in-out;
-  -o-transition: ${type} ${s}s ease-in-out;
-  transition: ${type} ${s}s ease-in-out;
-`;
-
-/* adds a "..." after the line of the text exceeds the width of the component*/
-export const lineEllipsis = css`
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
-
-export const flex = css`
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: flex;
-`;
-
-/* centers flex content */
-export const flexCenter = css`
-  ${flex};
-  -webkit-align-items: center;
-  -moz-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  justify-content: center;
-`;
-
-export const flexCenterVertical = css`
-  ${flex};
-  -webkit-align-items: center;
-  -moz-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-`;
-
-export const plainTextButton = css`
-  ${transition(0.1, 'color')}
-  border: none;
-  background: transparent;
-  box-shadow: none;
-  text-shadow: none;
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-  cursor: pointer;
-`;

package/src/theme/index.ts

@@ -1,44 +0,0 @@
-// Import from @orfium/tokens package
-import {
-  BASE_SHADE,
-  colorShades,
-  dimension,
-  flatColors,
-  getAAColor,
-  getAAColorFromSwatches,
-  getColor,
-  globals,
-  neutralColors,
-  paleColors,
-  semantic,
-} from '@orfium/tokens';
-
-import overrides from './overrides';
-import type { ColorScheme, SemanticTheme, TextColorTypes, Theme, ThemeConfig } from './types';
-
-const defaultTheme = (theming: ColorScheme): Theme => {
-  return {
-    globals,
-    colorScheme: theming,
-    overrides,
-    dimension,
-    tokens: semantic as SemanticTheme,
-    utils: {
-      getColor: getColor(globals.oldColors),
-      getAAColorFromSwatches: getAAColorFromSwatches(globals.oldColors),
-      getAAColor: getAAColor(globals.oldColors),
-    },
-  };
-};
-
-export {
-  BASE_SHADE,
-  colorShades,
-  flatColors,
-  neutralColors,
-  paleColors,
-  TextColorTypes,
-  Theme,
-  ThemeConfig,
-};
-export default defaultTheme;

package/src/theme/overrides.ts

@@ -1,5 +0,0 @@
-export type Overrides = Record<string, any>;
-
-const overrides: Overrides = {};
-
-export default overrides;

package/src/theme/types.ts

@@ -1,93 +0,0 @@
-import type {
-  BorderRadius,
-  BorderWidth,
-  Colors,
-  DimensionBorderRadius,
-  DimensionBorderWidth,
-  DimensionMinHeight,
-  DimensionOpacity,
-  DimensionSizing,
-  DimensionSpacing,
-  DimensionState,
-  Elevation,
-  GetAAColor,
-  GetAAColorFromSwatches,
-  GetColor,
-  Opacity,
-  Palette,
-  PaletteConfig,
-  SemanticBoxShadow,
-  SemanticColors,
-  SemanticDisabledState,
-  SemanticState,
-  SemanticTypography,
-  Sizing,
-  Spacing,
-  Typography,
-} from '@orfium/tokens';
-
-import type { Overrides } from './overrides';
-
-export type TextColorTypes = 'primary' | 'secondary' | 'light';
-export type ColorScheme = 'semantic' | 'dark';
-
-export type ThemeConfig = {
-  palette: PaletteConfig;
-  typography: Typography;
-  spacing: Spacing;
-  elevation: Elevation;
-  overrides: Overrides;
-};
-
-export type SemanticTheme = {
-  colors: SemanticColors;
-  disabledState: SemanticDisabledState;
-  state: SemanticState;
-  typography: SemanticTypography;
-  boxShadow: SemanticBoxShadow;
-};
-
-export type Dimension = {
-  borderRadius: DimensionBorderRadius;
-  borderWidth: DimensionBorderWidth;
-  minHeight: DimensionMinHeight;
-  opacity: DimensionOpacity;
-  sizing: DimensionSizing;
-  spacing: DimensionSpacing;
-  state: DimensionState;
-};
-
-/** Will add more themes in the future (e.g.: DarkTheme) */
-export type Tokens = SemanticTheme;
-
-export type Theme = {
-  globals: {
-    colors: Colors;
-    oldColors: Palette;
-    typography: Typography;
-    spacing: Spacing;
-    elevation: Elevation;
-    borderRadius: BorderRadius;
-    borderWidth: BorderWidth;
-    opacity: Opacity;
-    sizing: Sizing;
-  };
-  dimension: Dimension;
-  tokens: Tokens;
-  colorScheme: ColorScheme;
-  overrides: Overrides;
-  utils: {
-    /**
-     * @deprecated deprecated since v5.0.0. Use `theme.globals.colors.get('')` instead.
-     */
-    getColor: GetColor;
-    /**
-     * @deprecated deprecated since v5.0.0. Use `theme.globals.colors.get('')` instead.
-     */
-    getAAColorFromSwatches: GetAAColorFromSwatches;
-    /**
-     * @deprecated deprecated since v5.0.0. Use `theme.globals.colors.get('')` instead.
-     */
-    getAAColor: GetAAColor;
-  };
-};

package/src/types.d.ts

@@ -1,21 +0,0 @@
-import type { FC, PropsWithChildren } from 'react';
-
-declare module 'react' {
-  namespace React {
-    type FCC<T = Record<string, unknown>> = FC<PropsWithChildren<T>>;
-  }
-
-  type FCC<T = Record<string, unknown>> = FC<PropsWithChildren<T>>;
-}
-
-declare module '*.json';
-
-// bypass jest warnings
-declare global {
-  namespace jest {
-    type SnapshotSerializerPlugin = any;
-    interface ExpectExtendMap {
-      [key: string]: any;
-    }
-  }
-}

package/src/utils/ExtendProps.ts

@@ -1,5 +0,0 @@
-/**
- * Creates a new type by extending T1 with T2, where T2's properties override T1's.
- */
-export type ExtendProps<T1, T2> = NonNullable<T2> &
-  Omit<NonNullable<T1>, keyof NonNullable<T1> & keyof NonNullable<T2>>;

package/src/utils/cn.ts

@@ -1,5 +0,0 @@
-import { sprinklesMerge } from '../sprinkles/sprinklesMerge';
-
-export function cn(...classNames: Array<string | undefined>) {
-  return sprinklesMerge(...classNames);
-}

package/src/utils/common.ts

@@ -1,36 +0,0 @@
-import type * as React from 'react';
-import type { ButtonHTMLAttributes } from 'react';
-
-/** A type to turn any type optional properties to required */
-export type RequiredProperties<T> = { [K in keyof T]-?: T[K] };
-
-/** A generic type for native events */
-export type EventProps = {
-  onClick?: () => void;
-  onBlur?: () => void;
-};
-
-//@TODO fix props to not overwrite button props from base
-export type CommonButtonProps = Partial<
-  Omit<
-    ButtonHTMLAttributes<HTMLButtonElement>,
-    'size' | 'css' | 'onBlur' | 'onClick' | 'type' | 'disabled'
-  >
->;
-
-//@TODO fix props to not overwrite div props from base
-export type DivProps = Partial<Omit<React.HTMLProps<HTMLDivElement>, 'color' | 'size' | 'css'>>;
-
-export type FlexDirectionProperty = 'row' | 'column' | 'row-reverse' | 'column-reverse';
-
-export type ChangeEvent = React.ChangeEvent<HTMLInputElement>;
-
-export const DEFAULT_USER_MENU = {
-  userName: 'Tom Cruise',
-  onSelect: (selectedItem: string | number) => {
-    alert(selectedItem);
-  },
-  items: ['My Profile', 'Settings', 'Billing', 'Notifications', 'Logout'],
-  userAvatar: { src: 'https://mui.com/static/images/avatar/1.jpg', letter: 'PV' },
-  color: 'darkGrey-600',
-};

package/src/utils/date.ts

@@ -1,19 +0,0 @@
-import type { Dayjs as DayjsType } from 'dayjs';
-import dayjsLib from 'dayjs';
-import 'dayjs/locale/en';
-import 'dayjs/locale/en-gb';
-import localeData from 'dayjs/plugin/localeData';
-import localizedFormat from 'dayjs/plugin/localizedFormat';
-
-const dayjs = dayjsLib;
-export type Dayjs = DayjsType;
-
-dayjs.extend(localizedFormat);
-dayjs.extend(localeData);
-
-const browserLanguage =
-  typeof navigator !== 'undefined' && navigator?.language === 'en-GB' ? 'en-gb' : 'en';
-
-dayjs.locale(browserLanguage);
-
-export default dayjs;

package/src/utils/errors.ts

@@ -1,13 +0,0 @@
-export class ValidationError extends Error {
-  constructor(message: string) {
-    super(message);
-    this.name = 'ValidationError';
-  }
-}
-
-export class PropsValidationError extends ValidationError {
-  constructor(message: string) {
-    super(message);
-    this.name = 'PropsValidationError';
-  }
-}

package/src/utils/helpers.ts

@@ -1,51 +0,0 @@
-import { uniqueId } from 'lodash-es';
-import * as React from 'react';
-import dayjs from 'utils/date';
-import type { TestId } from 'utils/types';
-
-/** A function that generates a unique key by making a value randomly based on time also */
-export const generateUniqueKey = (elementType = ''): string =>
-  elementType + '_' + (Date.now() + Math.random()).toString(36).substr(2, 9);
-
-/** A function that generates a unique id using lodash's uniqueId util */
-export const generateUniqueID = (prefix = ''): string =>
-  process.env.NODE_ENV !== 'test' ? uniqueId(prefix) : `${prefix}_00`;
-
-/** A function that takes two strings to generate a test data id by combining them if both exist */
-export const generateTestDataId = (defaultId: TestId, customId?: TestId) =>
-  customId ? `${defaultId}-${customId}` : defaultId;
-
-/** A function that determines if the element passed is a function and a react element */
-export function isComponentFunctionType(
-  // TODO this must be fixed @Panagiotis
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
-  element: string | number | React.JSX.Element | Function
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
-): element is Function {
-  return typeof element === 'function' && React.isValidElement(element());
-}
-
-/**  A function that retrieves the correct date format based on system's locale */
-export const getLocaleFormat = (dateFormat: string | undefined) => {
-  const localeFormat = dayjs()?.localeData()?.longDateFormat('L');
-
-  return dateFormat ? dateFormat : localeFormat;
-};
-
-/**
- *  A function that takes an array of errors and the component props and throws an error
- *  if the condition is met
- * */
-export const errorHandler = <T>(
-  errors: { condition: (p: T) => boolean; error: Error | ((p: T) => Error) }[],
-  props: T
-) =>
-  errors.map(({ condition, error }) => {
-    if (condition(props)) {
-      if (typeof error === 'function') {
-        throw error(props);
-      } else {
-        throw error;
-      }
-    }
-  });

package/src/utils/storyshots.ts

@@ -1,37 +0,0 @@
-const DYNAMIC_ATTRIBUTES_LIST = [
-  { elementType: 'input', attributeName: 'id' },
-  { elementType: 'label', attributeName: 'htmlFor' },
-];
-
-/**
- * Changes the dynamic value of the attribute to static
- * @param prop
- * @param attributeConfig
- */
-function changeAttributeValueToStatic(
-  prop: any,
-  attributeConfig: { elementType: string; attributeName: string }
-) {
-  const { elementType, attributeName } = attributeConfig;
-  if (prop?.type === elementType) {
-    const dynamicAttributeValue = prop?.props[attributeName];
-    const newStaticAttributeValue = dynamicAttributeValue && dynamicAttributeValue.split('_')[0];
-    prop.props[attributeName] = newStaticAttributeValue;
-  }
-}
-
-/**
- * This is a recursive function that crawls all the nested props of the tree and spots the elements' attributes
- * @param child
- */
-const storyTreeCrawler: (child: any) => void = (child: any) => {
-  child.children.forEach((prop: any) => {
-    DYNAMIC_ATTRIBUTES_LIST.forEach((attr) => {
-      changeAttributeValueToStatic(prop, attr);
-    });
-
-    if (prop.children) {
-      storyTreeCrawler(prop);
-    }
-  });
-};

package/src/utils/tests/helpers.test.ts

@@ -1,21 +0,0 @@
-import { PropsValidationError } from '../errors';
-import { errorHandler } from '../helpers';
-
-describe('The usability of errorHandler to be correct', () => {
-  const errors = [
-    {
-      condition: ({ a, b }: { a: boolean; b: boolean }): boolean => Boolean(a === b),
-      error: new PropsValidationError('The properties are equal'),
-    },
-  ];
-
-  test('that it fails when conditions are met', () => {
-    const checkFunction = () => errorHandler(errors, { a: true, b: true });
-    expect(checkFunction).toThrowError(errors[0].error);
-  });
-
-  test('that it doesnt fail when conditions are not met', () => {
-    const checkFunction = () => errorHandler(errors, { a: false, b: true });
-    expect(checkFunction).not.toThrowError();
-  });
-});

package/src/utils/types.ts

@@ -1,12 +0,0 @@
-export type DeepPartial<T> = T extends { [key: string]: unknown }
-  ? { [P in keyof T]?: DeepPartial<T[P]> }
-  : T;
-
-export type ComponentSizes = 'compact' | 'normal';
-
-export type TestId = string;
-
-export interface TestProps {
-  dataTestId?: TestId;
-  dataTestPrefixId?: string;
-}

package/src/vanilla/Box/Box.tsx

@@ -1,37 +0,0 @@
-import { createSlot } from '@radix-ui/react-slot';
-import { forwardRef, type ComponentPropsWithoutRef, type ElementType } from 'react';
-
-import { sprinkles, type Sprinkles } from '../../sprinkles';
-import { cn } from '../../utils/cn';
-import { type ExtendProps } from '../../utils/ExtendProps';
-import { version } from '../../version';
-import { extractBoxProps } from './extractBoxProps';
-
-const Slot = createSlot('@orfium/ictinus/Box');
-
-export type BoxProps<T extends ElementType = 'div', P = unknown> = ExtendProps<
-  ComponentPropsWithoutRef<T>,
-  ExtendProps<
-    Sprinkles & {
-      asChild?: boolean;
-      className?: string;
-    },
-    P
-  >
->;
-
-export const Box = forwardRef<HTMLDivElement, BoxProps>(({ asChild, className, ...props }, ref) => {
-  const Comp = asChild ? Slot : 'div';
-  const { boxProps, restProps } = extractBoxProps(props);
-
-  return (
-    <Comp
-      data-ictinus={version}
-      ref={ref}
-      className={cn(className, sprinkles(boxProps))}
-      {...restProps}
-    />
-  );
-});
-
-Box.displayName = 'Box';

package/src/vanilla/Box/extractBoxProps.ts

@@ -1,19 +0,0 @@
-import { type Sprinkles, sprinkles } from '../../sprinkles';
-
-export function extractBoxProps<S extends Record<string, unknown>>(props: S) {
-  const boxProps = {} as Pick<S, ('className' | 'styles' | keyof Sprinkles) & keyof S>;
-  const restProps = {} as Omit<S, 'className' | 'styles' | keyof Sprinkles>;
-
-  for (const [name, value] of Object.entries(props)) {
-    if (name === 'className' || name === 'styles' || sprinkles.properties.has(name as never)) {
-      if (value !== null && value !== undefined) {
-        boxProps[name] = value;
-      }
-    } else {
-      // @ts-expect-error -- too complex
-      restProps[name] = value;
-    }
-  }
-
-  return { boxProps, restProps };
-}

package/src/vanilla/Box/index.ts

@@ -1,2 +0,0 @@
-export * from './Box';
-export * from './extractBoxProps';

package/src/vanilla/Dialog/Dialog.tsx

@@ -1,130 +0,0 @@
-import { type ComponentProps, type Ref, useEffect, useRef } from 'react';
-import type { HeadingProps, TextProps } from 'react-aria-components';
-import {
-  Button as ButtonPrimitive,
-  Dialog as DialogPrimitive,
-  Heading,
-  Text,
-} from 'react-aria-components';
-
-const Dialog = ({
-  role = 'dialog',
-  className,
-  ...props
-}: ComponentProps<typeof DialogPrimitive>) => {
-  return <DialogPrimitive role={role} className={className} {...props} />;
-};
-
-const DialogTrigger = (props: ComponentProps<typeof ButtonPrimitive>) => (
-  <ButtonPrimitive {...props} />
-);
-
-interface DialogHeaderProps extends Omit<ComponentProps<'div'>, 'title'> {
-  title?: string;
-  description?: string;
-}
-
-const DialogHeader = ({ className, ...props }: DialogHeaderProps) => {
-  const headerRef = useRef<HTMLHeadingElement>(null);
-
-  useEffect(() => {
-    const header = headerRef.current;
-    if (!header) {
-      return;
-    }
-
-    const observer = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        header.parentElement?.style.setProperty(
-          '--dialog-header-height',
-          `${entry.target.clientHeight}px`
-        );
-      }
-    });
-
-    observer.observe(header);
-
-    return () => observer.unobserve(header);
-  }, []);
-
-  return (
-    <div data-slot="dialog-header" ref={headerRef} className={className}>
-      {props.title && <DialogTitle>{props.title}</DialogTitle>}
-      {props.description && <DialogDescription>{props.description}</DialogDescription>}
-      {!props.title && typeof props.children === 'string' ? (
-        <DialogTitle>{props.children}</DialogTitle>
-      ) : (
-        props.children
-      )}
-    </div>
-  );
-};
-
-interface DialogTitleProps extends HeadingProps {
-  ref?: Ref<HTMLHeadingElement>;
-}
-const DialogTitle = ({ className, ref, ...props }: DialogTitleProps) => (
-  <Heading slot="title" ref={ref} className={className} {...props} />
-);
-
-interface DialogDescriptionProps extends TextProps {
-  ref?: Ref<HTMLDivElement>;
-}
-const DialogDescription = ({ className, ref, ...props }: DialogDescriptionProps) => (
-  <Text slot="description" className={className} ref={ref} {...props} />
-);
-
-type DialogBodyProps = ComponentProps<'div'>;
-
-const DialogBody = ({ className, ref, ...props }: DialogBodyProps) => (
-  <div data-slot="dialog-body" ref={ref} className={className} {...props} />
-);
-
-type DialogFooterProps = ComponentProps<'div'>;
-
-const DialogFooter = ({ className, ...props }: DialogFooterProps) => {
-  const footerRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const footer = footerRef.current;
-
-    if (!footer) {
-      return;
-    }
-
-    const observer = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        footer.parentElement?.style.setProperty(
-          '--dialog-footer-height',
-          `${entry.target.clientHeight}px`
-        );
-      }
-    });
-
-    observer.observe(footer);
-
-    return () => {
-      observer.unobserve(footer);
-    };
-  }, []);
-
-  return <div ref={footerRef} data-slot="dialog-footer" className={className} {...props} />;
-};
-
-export {
-  Dialog,
-  DialogBody,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-};
-
-export type {
-  DialogBodyProps,
-  DialogDescriptionProps,
-  DialogFooterProps,
-  DialogHeaderProps,
-  DialogTitleProps,
-};

package/src/vanilla/Dialog/index.ts

@@ -1 +0,0 @@
-export * from './Dialog';

package/src/vanilla/Dropdown/Dropdown.css.ts

@@ -1,11 +0,0 @@
-import { recipe } from '@vanilla-extract/recipes';
-import { sprinkles } from '../../sprinkles';
-
-export const separator = recipe({
-  base: [
-    sprinkles({
-      borderT: '1',
-      borderColor: 'decorative.default',
-    }),
-  ],
-});