Introduction

Vunix provides a powerful theming system that allows you to apply a consistent look and feel across all components in your application. This theming system is based on "presets", which are pre-configured sets of styles and behaviors that can be applied to individual components or groups of components.

Presets are defined in configuration files, which can be customized to meet your specific needs. Each configuration file includes a set of common presets/props such as variants, sizes, rounded, class, and others, as well as custom key/value pairs for specific components.

By using presets, you can quickly and easily apply a consistent style to your components without having to write custom CSS or JavaScript code. This not only saves you time and effort, but it also helps ensure that your application has a consistent look and feel, which can be a key factor in creating a positive user experience.

In the following sections, we'll explore the common presets/props included in Vunix presets, as well as how you can customize them to fit your needs.t

Let's examine the default VButton preset provided by Vunix, which is built on top of Tailwind CSS.

const config = {
  class: ({ props }) => {
    const fixed = 'inline-flex transition ease-in-out duration-150 items-center justify-center border disabled:cursor-not-allowed focus:outline-none focus:shadow-outline'
    return `${fixed} ${(props.block) ? 'flex w-full' : 'inline-flex'}`
  },
  variants: {
    default: 'bg-blue-100 text-blue-900 hover:bg-blue-200 focus:outline-none focus:ring focus:ring-blue-300 font-medium',
    outline: '',
    text: ''
  },
  sizes: {
    [SizeEnum.xs]: 'px-2 py-2 text-xs leading-4',
    [SizeEnum.sm]: 'px-3 py-2 text-sm leading-4',
    [SizeEnum.md]: 'px-4 py-2 text-sm leading-5',
    [SizeEnum.lg]: 'px-4 py-2 text-base leading-6',
    [SizeEnum.xl]: 'px-6 py-3 text-base leading-6'
  },
  loading: {
    fixed: 'ml-3 animate-spin',
    sizes: {
      [SizeEnum.xs]: 'h-4 w-4',
      [SizeEnum.sm]: 'h-4 w-4',
      [SizeEnum.md]: 'h-5 w-5',
      [SizeEnum.lg]: 'h-6 w-6',
      [SizeEnum.xl]: 'h-6 w-6'
    },
    icon: ArrowPathIcon
  }
} as ButtonConfig;

The class key provides a class string that is applied to the component. The variants, sizes and rounded keys generate class strings based on the provided props. For example, setting size="sm" will use the sizes[sm] value, while setting variant="outline" will use the variants['outline'] value.

The loading object also provides custom key/value pairs for the loading spinner of the button.

For a more detailed explanation of the common keys used in Vunix presets, such as class, variants, and sizes, please refer to the commons section.

Types of configuration value

In Vunix presets, you can configure components by defining a set of properties and values that define the appearance and behavior of the component. As you can see in the VButton default preset example, the configuration accepts 4 types of values:

• String: A string value that represents the final CSS class(es) that will be applied to the component.
• Function: A function that provides the context of the component and returns a string value. This function is called with an object that always contains the props attribute of the component. This type of value is useful when you need to compute a dynamic value for the class based on the component's props.
• Component: A FunctionalComponent that represents a custom element to be rendered within the component. This type of value is useful when you need to render a custom icon, button, or any other custom element within the component.
• Object: An object that contains sub-objects with configuration values. This type of value is useful when you need to group related configuration options under a single object.