@sio-group/form-react 0.4.0 → 0.4.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.4.2
+
+### Patch Changes
+
+- Removed buttons and replace with ui-core-package
+
+## 0.4.1
+
+### Patch Changes
+
+- bugfix
+
 ## 0.4.0
 
 ### Minor Changes

package/README.md

@@ -4,11 +4,6 @@
 ![npm](https://img.shields.io/npm/v/@sio-group/form-react)
 ![TypeScript](https://img.shields.io/badge/types-Yes-brightgreen)
 
-<!--
-[![npm version](https://img.shields.io/npm/v/@sio-group/form-validation.svg)](https://www.npmjs.com/package/@sio-group/form-validation)
-[![npm downloads](https://img.shields.io/npm/dm/@sio-group/form-validation.svg)](https://www.npmjs.com/package/@sio-group/form-validation)
--->
-
 A powerful, type-safe React form framework. This package provides ready-to-use form components with built-in validation, layout management, and extensive customization options. This package is designed to work seamlessly with `@sio-group/form-builder` and `@sio-group/form-validation`, but can be used independently.
 
 Part of the SIO Form ecosystem, it consumes form definitions from `@sio-group/form-builder` and renders them with full type safety and accessibility in mind.
@@ -187,7 +182,7 @@ const layout = [
 
 ### Button Configuration
 
-Buttons can be configured as an array:
+Buttons can be configured as an array using the props from `@sio-group/ui-core`.
 
 ```tsx
 const buttons = [
@@ -207,7 +202,6 @@ const buttons = [
   },
   {
     type: 'link',
-    variant: 'link',
     color: 'info',
     label: 'Help',
     href: '/help'
@@ -215,15 +209,14 @@ const buttons = [
 ];
 ```
 
-**Button Props:**
-- `type: 'button' | 'link'`
-- `variant: 'primary' | 'secondary' | 'link'`
-- `color: 'default' | 'success' | 'warning' | 'error' | 'info'`
-- `label: string`
-- `onClick?: () => void` (for buttons)
-- `href?: string` (for links)
-- `loading?: boolean`
-- `disabled?: boolean`
+Button and link properties are inherited from the UI components:
+
+- `Button` from `@sio-group/ui-core`
+- `Link` from `@sio-group/ui-core`
+
+Refer to their documentation for all available props.
+
+[@sio-group/ui-core](https://github.com/SiO-group/UI-React/tree/main/packages/ui-core)
 
 ---
 
@@ -489,7 +482,8 @@ All standard HTML input types are supported:
 You can use the `useForm` hook to control how you use the form, centrally managing state, validation, and submission. This also demonstrates conditional rendering and error automation.
 
 ```javascript
-import { useForm, Input, Button } from '@sio-group/form-react';
+import { useForm, Input } from '@sio-group/form-react';
+import { Button } from '@sio-group/ui-core';
 
 function FormWithHook() {
   const { register, getValue, isValid, isBusy, submit } = useForm();
@@ -536,7 +530,8 @@ All field components and buttons can also be used independently. You can keep an
 
 ```javascript
 import { useState } from 'react';
-import { Input, Button } from '@sio-group/form-react';
+import { Input } from '@sio-group/form-react';
+import { Button } from '@sio-group/ui-core';
 
 function SimpleForm() {
   const [value, setValue] = useState('');
@@ -591,34 +586,6 @@ function SimpleForm() {
 }
 ```
 
-### Button Props
-| Prop       | Type                                                       | Default     | Description             |
-|------------|------------------------------------------------------------|-------------|-------------------------|
-| `type`     | `'button' \| 'submit' \| 'reset'`                          | `'button'`  | Button type             |
-| `label`    | `string`                                                   | -           | Label of the Link       |
-| `onClick`  | `(e: React.MouseEvent) => void`                            | -           | Custom onClick function |
-| `variant`  | `'primary' \| 'secondary' \| 'link'`                       | `'primary'` | Visual variant          |
-| `color`    | `'default' \| 'error' \| 'success' \| 'warning' \| 'info'` | `'default'` | Color theme             |
-| `size`     | `'sm' \| 'md' \| 'lg'`                                     | `'md'`      | Button size             |
-| `block`    | `boolean`                                                  | `false`     | Full width              |
-| `loading`  | `boolean`                                                  | `false`     | Loading state           |
-| `disabled` | `boolean`                                                  | `false`     | Disabled state          |
-
-### Link Props
-| Prop       | Type                                                       | Default     | Description              |
-|------------|------------------------------------------------------------|-------------|--------------------------|
-| `label`    | `string`                                                   | -           | Label of the Link        |
-| `to`       | `string`                                                   | `'#'`       | URL or pad               |
-| `onClick`  | `(e: React.MouseEvent) => void`                            | -           | Custom onClick function  |
-| `color`    | `'default' \| 'error' \| 'success' \| 'warning' \| 'info'` | `'default'` | Color theme              |
-| `size`     | `'sm' \| 'md' \| 'lg'`                                     | `'md'`      | Button size              |
-| `block`    | `boolean`                                                  | `false`     | Full width               |
-| `loading`  | `boolean`                                                  | `false`     | Loading state            |
-| `disabled` | `boolean`                                                  | `false`     | Disabled state           |
-| `navigate` | `() => void`                                               | -           | Custom navigate function |
-| `external` | `boolean`                                                  | `false`     | Force external link      |
-
-
 ---
 
 ## Styling
@@ -683,6 +650,7 @@ Example with Tailwind CSS:
 import { Form } from '@sio-group/form-react';
 import { formBuilder } from '@sio-group/form-builder';
 import '@sio-group/form-react/sio-form-style.css';
+import '@sio-group/ui-core/sio-core-style.css';
 
 function RegistrationForm() {
   const fields = formBuilder()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sio-group/form-react",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "private": false,
   "type": "module",
   "main": "./dist/index.cjs",
@@ -28,7 +28,8 @@
   "description": "",
   "dependencies": {
     "@sio-group/form-types": "0.1.3",
-    "@sio-group/form-validation": "0.1.3"
+    "@sio-group/form-validation": "0.1.3",
+    "@sio-group/ui-core": "~0.1.1"
   },
   "peerDependencies": {
     "react": "^19",

package/src/assets/scss/index.scss

@@ -4,9 +4,6 @@
 
 @use "components/grid";
 
-@use "components/button";
-@use "components/link";
-
 @use "components/input";
 @use "components/form-field";
 @use "components/form-states";

package/src/components/Form.tsx

@@ -5,8 +5,7 @@ import { useForm } from "../hooks/useForm";
 import { ButtonProps, LinkProps, FormLayout, RadioFieldProps, SelectFieldProps, TextareaFieldProps } from "../types";
 import { getColumnClasses } from "../utils/get-column-classes";
 import { Checkbox, Input, Radio, Select, Textarea } from "./Fields";
-import { Link } from "./Link";
-import { Button } from "./Button";
+import { Link, Button } from "@sio-group/ui-core";
 
 const DefaultContainer: React.FC<FormContainerProps> = ({ children }) => (
   <div>{children}</div>
@@ -146,7 +145,6 @@ export const Form = ({
             onClick={handleCancel}
             variant='secondary'
             label={cancelLabel}
-            disabled={!isDirty()}
           />
         )}
         {buttons?.map(renderButton)}

package/src/index.ts

@@ -2,8 +2,6 @@ export { Form } from './components/Form';
 
 export { useForm } from './hooks/useForm';
 
-export { Button } from './components/Button';
-export { Link } from './components/Link';
 export * from './components/Fields';
 
 export type {

package/src/types/index.ts

@@ -14,5 +14,4 @@ export type { FieldSetters } from './field-setters';
 export type { FieldType, FieldState, FieldValue } from './field-state';
 export type { FormConfig } from './form-config';
 export type { FormLayout } from './form-layout';
-export type { ButtonProps, LinkProps } from './ui-props';
 export type { UseFormOptions } from './use-form-options';

package/src/assets/scss/components/button.scss

@@ -1,164 +0,0 @@
-@use "../utilities/mixins" as *;
-@use "../tokens/colors" as *;
-
-:where(.btn--primary) {
-  --sio-btn-bg: var(--sio-btn-primary-bg);
-  --sio-btn-border: var(--sio-btn-primary-border);
-  --sio-btn-text: var(--sio-btn-primary-text);
-
-  --sio-btn-bg-hover: color-mix(in srgb, var(--sio-btn-bg) 85%, black);
-  --sio-btn-border-hover: color-mix(in srgb, var(--sio-btn-border) 85%, black);
-  --sio-btn-text-hover: var(--sio-btn-text);
-
-  --sio-btn-bg-disabled: color-mix(in srgb, var(--sio-btn-bg) 40%, white);
-  --sio-btn-border-disabled: color-mix(in srgb, var(--sio-btn-border) 40%, white);
-  --sio-btn-text-disabled: color-mix(in srgb, var(--sio-btn-text) 60%, black);
-}
-
-:where(.btn--secondary) {
-  --sio-btn-bg: var(--sio-btn-secondary-bg);
-  --sio-btn-border: var(--sio-btn-secondary-border);
-  --sio-btn-text: var(--sio-btn-secondary-text);
-
-  --sio-btn-bg-hover: var(--sio-btn-bg);
-  --sio-btn-border-hover: color-mix(in srgb, var(--sio-btn-border) 85%, black);
-  --sio-btn-text-hover: var(--sio-btn-text);
-
-  --sio-btn-bg-disabled: var(--sio-btn-bg);
-  --sio-btn-border-disabled: color-mix(in srgb, var(--sio-btn-border) 40%, white);
-  --sio-btn-text-disabled: color-mix(in srgb, var(--sio-btn-text) 40%, white);
-}
-
-:where(.btn--link) {
-  --sio-btn-bg: var(--sio-btn-link-bg);
-  --sio-btn-border: var(--sio-btn-link-border);
-  --sio-btn-text: var(--sio-btn-link-text);
-
-  --sio-btn-bg-hover: var(--sio-btn-bg);
-  --sio-btn-border-hover: var(--sio-btn-border);
-  --sio-btn-text-hover: color-mix(in srgb, var(--sio-btn-text) 85%, black);
-
-  --sio-btn-bg-disabled: var(--sio-btn-bg);
-  --sio-btn-border-disabled: var(--sio-btn-border);
-  --sio-btn-text-disabled: color-mix(in srgb, var(--sio-btn-text) 40%, white);
-}
-
-:where(.btn) {
-  background-color: var(--sio-btn-bg);
-  color: var(--sio-btn-text);
-  display: inline-block;
-  font-size: .9em;
-  font-weight: 500;
-  user-select: none;
-  text-align: center;
-  border: 1px solid var(--sio-btn-border);
-  padding: 2px 15px;
-  border-radius: 3px;
-  cursor: pointer;
-  min-height: 22px;
-  transition: all .3s ease-in;
-  text-decoration: none;
-}
-
-:where(.btn--link) {
-  display: inline;
-  font-weight: unset;
-  user-select: none;
-  text-align: left;
-  padding: 0;
-  border-radius: unset;
-  min-height: unset;
-  transition: all 0.3s ease-in;
-  text-decoration: underline;
-}
-
-:where(.btn:hover),
-:where(.btn:active),
-:where(.btn:focus),
-:where(.btn.btn--active) {
-  background: var(--sio-btn-bg-hover, var(--sio-btn-bg));
-  border-color: var(--sio-btn-border-hover, var(--sio-btn-border));
-  color: var(--sio-btn-text-hover, var(--sio-btn-text));
-}
-
-:where(.btn:disabled),
-:where(.btn.btn--disabled) {
-  cursor: not-allowed;
-
-  background: var(--sio-btn-bg-disabled, var(--sio-btn-bg));
-  border-color: var(--sio-btn-border-disabled, var(--sio-btn-border));
-  color: var(--sio-btn-text-disabled, var(--sio-btn-text));
-}
-
-@each $name, $color in $colors {
-  :where(.btn--primary.btn--#{$name}) {
-    --sio-btn-bg: var(--sio-color-#{$name});
-    --sio-btn-border: var(--sio-color-#{$name});
-    --sio-btn-text: var(--sio-color-white);
-  }
-  :where(.btn--secondary.btn--#{$name}) {
-    --sio-btn-bg: transparent;
-    --sio-btn-border: var(--sio-color-#{$name});
-    --sio-btn-text: var(--sio-color-#{$name});
-  }
-  :where(.btn--link.btn--#{$name}) {
-    --sio-btn-bg: transparent;
-    --sio-btn-border: transparent;
-    --sio-btn-text: var(--sio-color-#{$name});
-  }
-}
-
-:where(.btn--block) {
-  display: block;
-  width: 100%;
-}
-
-:where(.btn--lg) {
-  padding: 5px 20px;
-  font-size: 1.1em;
-  min-height: 34px;
-}
-
-:where(.btn--sm) {
-  padding: 2.5px 5px;
-  font-size: .7em;
-  min-height: 23px;
-}
-
-:where(.btn--loading) {
-  position: relative;
-  cursor: wait !important;
-}
-
-:where(.btn__spinner) {
-  display: flex;
-  animation: spin 1s infinite linear;
-  margin-right: 8px;
-  width: 20px;
-  height: 20px;
-}
-
-:where(.btn__spinner svg) {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-:where(.btn__spinner circle) {
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 2;
-  stroke-dasharray: 30 100;
-  stroke-linecap: round;
-}
-
-:where(.btn__loading-text) {
-  position: absolute;
-  clip: rect(1px, 1px, 1px, 1px);
-}
-
-:where(.btn-group) {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 5px;
-}

package/src/assets/scss/components/link.scss

@@ -1,66 +0,0 @@
-@use "../utilities/mixins" as *;
-@use "../tokens/colors" as *;
-
-:where(.btn--link) {
-  --sio-btn-bg: var(--sio-btn-link-bg);
-  --sio-btn-border: var(--sio-btn-link-border);
-  --sio-btn-text: var(--sio-btn-link-text);
-
-  --sio-btn-bg-hover: var(--sio-btn-bg);
-  --sio-btn-border-hover: var(--sio-btn-border);
-  --sio-btn-text-hover: color-mix(in srgb, var(--sio-btn-text) 85%, black);
-
-  --sio-btn-bg-disabled: var(--sio-btn-bg);
-  --sio-btn-border-disabled: var(--sio-btn-border);
-  --sio-btn-text-disabled: color-mix(in srgb, var(--sio-btn-text) 40%, white);
-}
-:where(.link) {
-  display: inline;
-  user-select: none;
-  transition: all 0.3s ease-in;
-  text-decoration: underline;
-}
-
-:where(.link:hover),
-:where(.link:active),
-:where(.link:focus),
-:where(.link.link--active) {
-  background: var(--sio-btn-bg-hover, var(--sio-btn-bg));
-  border-color: var(--sio-btn-border-hover, var(--sio-btn-border));
-  color: var(--sio-btn-text-hover, var(--sio-btn-text));
-}
-
-:where(.link:disabled),
-:where(.link.link--disabled) {
-  cursor: not-allowed;
-
-  background: var(--sio-btn-bg-disabled, var(--sio-btn-bg));
-  border-color: var(--sio-btn-border-disabled, var(--sio-btn-border));
-  color: var(--sio-btn-text-disabled, var(--sio-btn-text));
-}
-
-@each $name, $color in $colors {
-  :where(.link--#{$name}) {
-    --sio-btn-bg: transparent;
-    --sio-btn-border: transparent;
-    --sio-btn-text: var(--sio-color-#{$name});
-  }
-}
-
-:where(.link--block) {
-  display: block;
-  width: 100%;
-}
-
-:where(.link--lg) {
-  font-size: 1.1em;
-}
-
-:where(.link--sm) {
-  font-size: .7em;
-}
-
-:where(.link--loading) {
-  position: relative;
-  cursor: wait !important;
-}

package/src/components/Button/index.tsx

@@ -1,106 +0,0 @@
-import React from "react";
-import { ButtonProps } from "../../types";
-
-const ButtonComponent: React.FC<ButtonProps> = ({
-    type = 'button',
-    label,
-    onClick,
-    variant = 'primary',
-    color = 'default',
-    size = 'md',
-    block = false,
-    loading = false,
-    disabled = false,
-    className = '',
-    ariaLabel = '',
-    style = {},
-    children,
-}: ButtonProps) => {
-  const isDisabled: boolean = disabled || loading;
-
-  const handleClick = (e: React.MouseEvent) => {
-    if (isDisabled) {
-      e.preventDefault();
-      return;
-    }
-
-    onClick?.(e);
-  };
-
-  const buttonClasses = [
-    'btn',
-    `btn--${variant}`,
-    `btn--${size}`,
-    `btn--${color}`,
-    block && 'btn--block',
-    loading && 'btn--loading',
-    isDisabled && 'btn--disabled',
-    className,
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  return (
-    <button
-      type={type}
-      onClick={handleClick}
-      className={buttonClasses}
-      style={style}
-      disabled={isDisabled}
-      aria-label={ariaLabel || (label as string)}
-      aria-busy={loading}
-      aria-disabled={isDisabled}>
-      {loading ? (
-        <>
-					<span className='btn__spinner' aria-hidden='true'>
-						<svg viewBox='0 0 20 20'>
-							<circle cx='10' cy='10' r='8' />
-						</svg>
-					</span>
-          <span className='btn__loading-text'>Processing...</span>
-        </>
-      ) : (
-        <>
-          {children}
-          {label}
-        </>
-      )}
-    </button>
-  );
-};
-
-/**
- * Button component for user interaction.
- *
- * @component
- * @example
- * // Primaire button
- * <Button label="Save" onClick={handleSave} />
- *
- * @example
- * // Submit button with loading state
- * <Button
- *   type="submit"
- *   label="Send"
- *   variant="primary"
- *   loading
- * />
- *
- * @example
- * // Button with icon and tekst
- * <Button type="button" onClick={handleClick}>
- *   <Icon name="plus" />
- *   <span>Add</span>
- * </Button>
- *
- * @example
- * // Error variant
- * <Button
- *   type="button"
- *   label="Delete"
- *   variant="secondary"
- *   color="error"
- *   onClick={handleDelete}
- * />
- */
-export const Button: React.FC<ButtonProps> = React.memo(ButtonComponent);

package/src/components/Link/index.tsx

@@ -1,106 +0,0 @@
-import { LinkProps } from "../../types";
-import React from "react";
-
-const LinkComponent: React.FC<LinkProps> = ({
-    label,
-    to = '#',
-    onClick,
-    color = 'default',
-    size = 'md',
-    block = false,
-    loading = false,
-    disabled = false,
-    className = '',
-    ariaLabel = '',
-    navigate,
-    external = false,
-    style = {},
-    children,
-}: LinkProps) => {
-  const isDisabled: boolean = disabled || loading;
-  const isExternal: boolean = external || /^(https?:|mailto:|tel:|ftp:)/.test(to);
-
-  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
-    if (isDisabled) {
-      e.preventDefault();
-      return;
-    }
-
-    onClick?.(e);
-
-    if (!isExternal && navigate) {
-      e.preventDefault();
-      navigate();
-    }
-  };
-
-  const linkClasses = [
-    'link',
-    `link--${color}`,
-    `btn--${size}`,
-    block && 'link--block',
-    loading && 'link--loading',
-    isDisabled && 'link--disabled',
-    className,
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  return (
-    <a
-      href={isDisabled ? undefined : to}
-      onClick={handleClick}
-      className={linkClasses}
-      style={style}
-      aria-label={ariaLabel || (label as string)}
-      aria-busy={loading}
-      aria-disabled={isDisabled}
-      target={isExternal ? '_blank' : undefined}
-      rel={isExternal ? 'noopener noreferrer' : undefined}>
-      {loading ? (
-        <>
-						<span className='btn__spinner' aria-hidden='true'>
-							<svg viewBox='0 0 20 20'>
-								<circle cx='10' cy='10' r='8' />
-							</svg>
-						</span>
-          <span className='btn__loading-text'>Processing...</span>
-        </>
-      ) : (
-        <>
-          {children}
-          {label && <span className="btn__label">{label}</span>}
-        </>
-      )}
-    </a>
-  );
-}
-
-/**
- * Custom Link component for internal or external navigation
- *
- * @component
- * @example
- * // Internal link
- * <Link to="/dashboard" label="Dashboard" />
- *
- * @example
- * // External link
- * // external property is optional
- * // http(s), ftp, email and tel with automatically render as external
- * <Link to="https://example.com" label="Visit website" external />
- *
- * @example
- * // Link with loading state
- * <Link to="/profile" label="Profile" loading />
- *
- * @example
- * // Link with custom click handler en navigation
- * <Link
- *   to="/settings"
- *   label="Settings"
- *   onClick={() => console.log('clicked')}
- *   navigate={customNavigate}
- * />
- */
-export const Link: React.FC<LinkProps> = React.memo(LinkComponent);

package/src/types/ui-props.d.ts

@@ -1,33 +0,0 @@
-import React from 'react';
-
-export type ButtonType = 'button' | 'submit' | 'reset';
-export type Variant = 'primary' | 'secondary' | 'link';
-export type Color = 'default' | 'error' | 'success' | 'warning' | 'info';
-export type Size = 'sm' | 'md' | 'lg';
-
-type BaseUiProps = {
-  variant?: Variant;
-  label?: string | React.ReactNode;
-  color?: Color;
-  size?: Size;
-  block?: boolean;
-  loading?: boolean;
-  disabled?: boolean;
-  className?: string;
-  ariaLabel?: string;
-  style?: React.CSSProperties;
-  children?: React.ReactNode;
-};
-
-export type ButtonProps = BaseUiProps & {
-  type?: ButtonType;
-  onClick: (e: React.MouseEvent) => void;
-};
-
-export type LinkProps = Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'onClick' | 'color'> &
-  BaseUiProps & {
-  to: string;
-  navigate?: () => void;
-  external?: boolean;
-  onClick?: (e: React.MouseEvent) => void;
-};