rds-ui-system 2.3.2 → 2.4.0

package/README.md

@@ -1,6 +1,8 @@
 # Remondis UI Library
 
-## Preview on vercel
+A React component library built with TypeScript, Vite & Storybook—published to npm via GitHub Actions + semantic-release.
+
+## See the Storybook
 
 https://storybook.remondis.io/
 
@@ -19,13 +21,17 @@ https://storybook.remondis.io/
 
 ## Getting Started
 
+### Requirements
+
+- Node 20.x
+- pnpm 10.x
+
 1. Install dependencies with `pnpm i` (first run `corepack enable` to enable pnpm)
 2. Run `pnpm prepare` command to setup [Husky](https://typicode.github.io/husky) pre-commit hooks.
 
+### Development
 
-### Main Scripts
-
-Always prepending pnpm:
+Always prepending pnpm in your local environment:
 
 - `dev`: Bootstrap the Storybook preview with Hot Reload.
 - `build`: Builds the static storybook project.
@@ -34,3 +40,52 @@ Always prepending pnpm:
 - `format:prettier`: Formats files using the prettier rules defined in **.prettierrc**.
 - `test`: Runs testing using watch mode.
 - `test:cov`: Runs testing displaying a coverage report.
+
+## Release Process
+
+The Github Action for releasing a new version of the package consists of the following steps:
+
+Triggered on push to `staging` (prerelease) or `main` (stable):
+
+1. Checkout & Setup Node 20
+2. Install pnpm & deps
+3. Run tests
+4. Build
+5. Run Semantic Release
+   1. Analyzes commits (Conventional Commits)
+   2. Bumps version in package.json
+   3. Updates CHANGELOG.md
+   4. Commits CHANGELOG.md, dist/\*\*, package.json
+   5. Creates GitHub Release
+   6. Publishes npm package under correct dist-tag
+6. The version in package.json will be bumped by this run
+
+### Conventional commit types
+
+`build`: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)\
+`ci`: Changes to CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)\
+`chore`: Changes which doesn't change source code or tests e.g. changes to the build process, auxiliary tools, libraries\
+`docs`: Documentation only changes\
+**`feat`**: A new feature\
+**`fix`**: A bug fix\
+`perf`: A code change that improves performance\
+`refactor`: A code change that neither fixes a bug nor adds a feature\
+`revert`: Revert something\
+`style`: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)\
+`test`: Adding missing tests or correcting existing tests
+
+---
+
+`fix`: a commit of the type fix patches a bug in your codebase (this correlates with PATCH in Semantic Versioning).\
+`feat`: a commit of the type feat introduces a new feature to the codebase (this correlates with MINOR in Semantic Versioning).\
+`BREAKING CHANGE`: a commit that has a footer BREAKING CHANGE:, or appends a ! after the type/scope, introduces a breaking API change (correlating with MAJOR in Semantic Versioning). A BREAKING CHANGE can be part of commits of any type.
+
+### Dry run and manual release
+
+```
+pnpm test
+pnpm run build:lib
+npx semantic-release --dry-run
+```
+
+To force a release: commit a Conventional-Commit to staging or main, and let Actions handle the rest.

package/dist/index.d.ts

@@ -1 +1,2 @@
 export * from './lib/index'
+export {}

package/dist/lib/components/atoms/Button/Button.d.ts

@@ -1,29 +1,22 @@
-import { ButtonHTMLAttributes, MouseEventHandler, ReactNode } from 'react'
-import { IconName } from '../../icons/iconMapping'
+import { ButtonHTMLAttributes, MouseEventHandler, ReactNode } from 'react';
+import { IconName } from '../../icons/iconMapping';
 export declare const BUTTON_VARIANT: {
-  readonly DEFAULT: 'default'
-  readonly HOVERED: 'hovered'
-  readonly FOCUSED: 'focused'
-  readonly PRESSED: 'pressed'
-  readonly ICON: 'icon'
-  readonly ICONPLUS: 'iconplus'
-  readonly OUTLINED: 'outlined'
-}
-export type ButtonVariant = keyof typeof BUTTON_VARIANT
-export declare const buttonVariant: Record<ButtonVariant, string>
+    readonly DEFAULT: "default";
+    readonly OUTLINED: "outlined";
+    readonly TEXT: "text";
+    readonly UNSTYLED: "unstyled";
+};
+export type ButtonVariant = keyof typeof BUTTON_VARIANT;
+export declare const buttonVariantStyles: Record<ButtonVariant, string>;
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  label?: string
-  variant?: ButtonVariant
-  isDisabled?: boolean
-  isOutlined?: boolean
-  onClick?: MouseEventHandler<HTMLButtonElement>
-  children?: ReactNode
-  customClasses?: string
-  name?: IconName
-  bgFillColor?: string
-  iconColor?: string
-  textColor?: string
+    label?: string;
+    variant?: ButtonVariant;
+    isIconSolid?: boolean;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    children?: ReactNode;
+    className?: string;
+    iconName?: IconName;
+    iconColor?: string;
+    iconPosition?: 'leading' | 'trailing';
 }
-export declare const Button: import('react').ForwardRefExoticComponent<
-  ButtonProps & import('react').RefAttributes<HTMLButtonElement>
->
+export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/lib/components/atoms/Button/Button.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/lib/components/atoms/Checkbox/Checkbox.d.ts

@@ -1,22 +1,14 @@
-import { InputHTMLAttributes, ChangeEventHandler } from 'react'
+import { InputHTMLAttributes } from 'react';
 export declare const CHECKBOX_VARIANT: {
-  readonly DEFAULT: 'primary'
-}
-export type CheckboxVariant = keyof typeof CHECKBOX_VARIANT
-export declare const checkboxVariant: Record<CheckboxVariant, string>
+    readonly DEFAULT: "primary";
+};
+export type CheckboxVariant = keyof typeof CHECKBOX_VARIANT;
+export declare const checkboxVariant: Record<CheckboxVariant, string>;
 export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
-  label?: string
-  placeholder?: string
-  variant?: CheckboxVariant
-  isDisabled?: boolean
-  isError?: boolean
-  isRequired?: boolean
-  checked?: boolean
-  onChange?: ChangeEventHandler<HTMLInputElement>
-  id: string
-  readOnly?: boolean
-  value?: any
+    label?: string;
+    variant?: CheckboxVariant;
+    isError?: boolean;
+    id: string;
+    supportingText?: string;
 }
-export declare const Checkbox: import('react').ForwardRefExoticComponent<
-  CheckboxProps & import('react').RefAttributes<HTMLInputElement>
->
+export declare const Checkbox: import('react').ForwardRefExoticComponent<CheckboxProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/lib/components/atoms/Checkbox/Checkbox.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/lib/components/atoms/FilterChip/FilterChip.d.ts

@@ -1,17 +1,13 @@
-import { ButtonHTMLAttributes, MouseEventHandler } from 'react'
+import { ButtonHTMLAttributes, MouseEventHandler } from 'react';
 export declare const FILTERCHIP_VARIANT: {
-  readonly DEFAULT: 'default'
-}
-export type FilterChipVariant = keyof typeof FILTERCHIP_VARIANT
-export declare const filterChipVariant: Record<FilterChipVariant, string>
+    readonly DEFAULT: "default";
+};
+export type FilterChipVariant = keyof typeof FILTERCHIP_VARIANT;
+export declare const filterChipVariant: Record<FilterChipVariant, string>;
 export interface FilterChipProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  label: string
-  isDisabled?: boolean
-  variant?: FilterChipVariant
-  onClick?: MouseEventHandler<HTMLButtonElement>
-  bgFillColor?: string
-  textColor?: string
+    label: string;
+    variant?: FilterChipVariant;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    className?: string;
 }
-export declare const FilterChip: import('react').ForwardRefExoticComponent<
-  FilterChipProps & import('react').RefAttributes<HTMLButtonElement>
->
+export declare const FilterChip: import('react').ForwardRefExoticComponent<FilterChipProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/lib/components/atoms/FilterChip/FilterChip.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/lib/components/atoms/Heading/Heading.d.ts

@@ -1,18 +1,16 @@
-import { HTMLAttributes, ReactNode } from 'react'
+import { HTMLAttributes, ReactNode } from 'react';
 export declare const HEADING_VARIANT: {
-  readonly h1: 'h1'
-  readonly h2: 'h2'
-  readonly h3: 'h3'
-}
-export type HeadingVariant = keyof typeof HEADING_VARIANT
-export declare const headingVariant: Record<HeadingVariant, string>
+    readonly h1: "h1";
+    readonly h2: "h2";
+    readonly h3: "h3";
+};
+export type HeadingVariant = keyof typeof HEADING_VARIANT;
+export declare const headingVariantStyles: Record<HeadingVariant, string>;
 export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
-  label?: string
-  children?: ReactNode
-  variant?: HeadingVariant
-  bold?: boolean
-  customClasses?: string
+    label?: string;
+    children?: ReactNode;
+    variant?: HeadingVariant;
+    bold?: boolean;
+    className?: string;
 }
-export declare const Heading: import('react').ForwardRefExoticComponent<
-  HeadingProps & import('react').RefAttributes<HTMLHeadingElement>
->
+export declare const Heading: import('react').ForwardRefExoticComponent<HeadingProps & import('react').RefAttributes<HTMLHeadingElement>>;

package/dist/lib/components/atoms/Heading/Heading.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/lib/components/atoms/InfoText/InfoText.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    message: string;
+    showErrorStyles: boolean;
+    className?: string;
+}
+export declare const InfoText: React.FC<Props>;
+export {};

package/dist/lib/components/atoms/InfoText/InfoText.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/lib/components/atoms/Input/Input.d.ts

@@ -1,24 +1,16 @@
-import { InputHTMLAttributes } from 'react'
+import { InputHTMLAttributes } from 'react';
 export declare const INPUT_VARIANT: {
-  readonly DEFAULT: 'default'
-}
-export type InputVariant = keyof typeof INPUT_VARIANT
-export declare const inputVariant: Record<InputVariant, string>
+    readonly DEFAULT: "default";
+};
+export type InputVariant = keyof typeof INPUT_VARIANT;
+export declare const inputVariant: Record<InputVariant, string>;
 export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
-  label?: string
-  placeholder?: string
-  variant?: InputVariant
-  isDisabled?: boolean
-  isError?: boolean
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
-  value?: string | number | string[]
-  name?: string
-  type?: string
-  id: string
-  supportingText?: string
-  isRequired?: boolean
-  customClasses?: string
+    label?: string;
+    variant?: InputVariant;
+    isError?: boolean;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    value?: string | number | string[];
+    supportingText?: string;
+    className?: string;
 }
-export declare const Input: import('react').ForwardRefExoticComponent<
-  InputProps & import('react').RefAttributes<HTMLInputElement>
->
+export declare const Input: import('react').ForwardRefExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/lib/components/atoms/Input/Input.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/lib/components/atoms/Link/Link.d.ts

@@ -0,0 +1,5 @@
+import { AnchorHTMLAttributes } from 'react';
+export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    disabled?: boolean;
+}
+export declare const Link: React.FC<LinkProps>;

package/dist/lib/components/atoms/Radio/Radio.d.ts

@@ -1,19 +1,13 @@
-import React, { InputHTMLAttributes, ChangeEventHandler } from 'react'
+import { default as React, InputHTMLAttributes } from 'react';
 export declare const RADIO_VARIANT: {
-  readonly DEFAULT: 'primary'
-}
-export type RadioVariant = keyof typeof RADIO_VARIANT
-export declare const radioboxVariant: Record<RadioVariant, string>
+    readonly DEFAULT: "primary";
+};
+export type RadioVariant = keyof typeof RADIO_VARIANT;
+export declare const radioboxVariant: Record<RadioVariant, string>;
 export interface RadioProps extends InputHTMLAttributes<HTMLInputElement> {
-  label?: string
-  placeholder?: string
-  variant?: RadioVariant
-  isDisabled?: boolean
-  isError?: boolean
-  isRequired?: boolean
-  checked?: boolean
-  onChange?: ChangeEventHandler<HTMLInputElement>
-  id?: string
-  readOnly?: boolean
+    label: string;
+    variant?: RadioVariant;
+    isError?: boolean;
+    id?: string;
 }
-export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>
+export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;

package/dist/lib/components/atoms/Radio/Radio.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/lib/components/atoms/SelectItem/SelectItem.d.ts

@@ -0,0 +1,19 @@
+import { LiHTMLAttributes } from 'react';
+export interface SelectOption {
+    id: string;
+    name: string;
+}
+export declare const SELECT_ITEM_VARIANT: {
+    DEFAULT: string;
+    GREY: string;
+};
+export type SelectItemVariant = keyof typeof SELECT_ITEM_VARIANT;
+export interface SelectItemProps extends LiHTMLAttributes<HTMLLIElement> {
+    option: SelectOption;
+    isActive?: boolean;
+    onSelectionChange: (option: SelectOption) => void;
+    className?: string;
+    withCheckbox?: boolean;
+    variant?: SelectItemVariant;
+}
+export declare const SelectItem: ({ option, isActive, className, onSelectionChange, withCheckbox, variant, ...props }: SelectItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/atoms/SelectItem/SelectItem.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/lib/components/atoms/Slider/Slider.d.ts

@@ -0,0 +1,13 @@
+interface SliderProps {
+    min: number;
+    max: number;
+    step?: number;
+    value?: number;
+    disabled?: boolean;
+    onChange?: (value: number) => void;
+    trackColor?: string;
+    thumbColor?: string;
+    percentage?: boolean;
+}
+export declare const Slider: ({ min, max, step, value, disabled, onChange, trackColor, thumbColor, percentage, }: SliderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/lib/components/atoms/Slider/Slider.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/lib/components/atoms/Text/Text.d.ts

@@ -1,17 +1,20 @@
-import { HTMLAttributes, ReactNode } from 'react'
+import { HTMLAttributes, ReactNode } from 'react';
 export declare const TEXT_VARIANT: {
-  readonly DEFAULT: 'default'
-}
-export type TextVariant = keyof typeof TEXT_VARIANT
-export declare const textVariant: Record<TextVariant, string>
+    readonly DEFAULT: "default";
+    readonly LARGE: "large";
+    readonly SMALL: "small";
+    readonly BUTTON: "button";
+    readonly TAB: "tab";
+};
+export type TextVariant = keyof typeof TEXT_VARIANT;
+export declare const textVariantClasses: Record<TextVariant, string>;
 export interface TextProps extends HTMLAttributes<HTMLParagraphElement> {
-  text?: string
-  children?: ReactNode
-  isDisabled?: boolean
-  bold?: boolean
-  customClasses?: string
-  title?: string
+    text?: string;
+    children?: ReactNode;
+    bold?: boolean;
+    className?: string;
+    title?: string;
+    variant?: TextVariant;
+    isDisabled?: boolean;
 }
-export declare const Text: import('react').ForwardRefExoticComponent<
-  TextProps & import('react').RefAttributes<HTMLParagraphElement>
->
+export declare const Text: import('react').ForwardRefExoticComponent<TextProps & import('react').RefAttributes<HTMLParagraphElement>>;

package/dist/lib/components/atoms/Text/Text.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/lib/components/atoms/Textarea/Textarea.d.ts

@@ -1,23 +1,16 @@
-import { TextareaHTMLAttributes, ReactNode } from 'react'
+import { TextareaHTMLAttributes, ReactNode } from 'react';
 export declare const TEXTAREA_VARIANT: {
-  readonly DEFAULT: 'default'
-}
-export type Textarea = keyof typeof TEXTAREA_VARIANT
-export declare const textarea: Record<Textarea, string>
+    readonly DEFAULT: "default";
+};
+export type Textarea = keyof typeof TEXTAREA_VARIANT;
+export declare const textarea: Record<Textarea, string>;
 export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
-  value?: string
-  label?: string
-  placeholder?: string
-  variant?: Textarea
-  isDisabled?: boolean
-  isError?: boolean
-  children?: ReactNode
-  defaultValue?: string
-  isRequired?: boolean
-  supportingText?: string
-  id: string
-  onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void
+    label?: string;
+    variant?: Textarea;
+    isError?: boolean;
+    children?: ReactNode;
+    defaultValue?: string;
+    supportingText?: string;
+    id: string;
 }
-export declare const Textarea: import('react').ForwardRefExoticComponent<
-  TextareaProps & import('react').RefAttributes<HTMLTextAreaElement>
->
+export declare const Textarea: import('react').ForwardRefExoticComponent<TextareaProps & import('react').RefAttributes<HTMLTextAreaElement>>;

package/dist/lib/components/atoms/Textarea/Textarea.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/lib/components/atoms/index.d.ts

@@ -1,13 +1,11 @@
-export * from './Button/Button'
-export * from './Input/Input'
-export * from './Accordion/Accordion'
-export * from './Checkbox/Checkbox'
-export * from './FilterChip/FilterChip'
-export * from './Radio/Radio'
-export * from './Select/Select'
-export * from './MultiSelect/MultiSelect'
-export * from './Text/Text'
-export * from './Textarea/Textarea'
-export * from './Box/Box'
-export * from './Modal/Modal'
-export * from './Heading/Heading'
+export * from './Button/Button';
+export * from './Input/Input';
+export * from './Checkbox/Checkbox';
+export * from './FilterChip/FilterChip';
+export * from './Radio/Radio';
+export * from './Slider/Slider';
+export * from './Text/Text';
+export * from './Textarea/Textarea';
+export * from './Heading/Heading';
+export * from './InfoText/InfoText';
+export * from './Link/Link';

package/dist/lib/components/icons/Icon/Icon.d.ts

@@ -1,17 +1,9 @@
-import { HTMLAttributes } from 'react'
-import { IconName } from '../iconMapping'
-export declare const ICON_VARIANT: {
-  readonly DEFAULT: 'default'
-}
-export type IconVariant = keyof typeof ICON_VARIANT
-export declare const iconVariant: Record<IconVariant, string>
+import { HTMLAttributes } from 'react';
+import { IconName } from '../iconMapping';
 export interface IconProps extends HTMLAttributes<HTMLSpanElement> {
-  name: IconName
-  variant?: IconVariant
-  isOutlined?: boolean
-  isDisabled?: boolean
-  iconColor?: string
+    name: IconName;
+    isIconSolid?: boolean;
+    isDisabled?: boolean;
+    iconColor?: string;
 }
-export declare const Icon: import('react').ForwardRefExoticComponent<
-  IconProps & import('react').RefAttributes<HTMLSpanElement>
->
+export declare const Icon: import('react').ForwardRefExoticComponent<IconProps & import('react').RefAttributes<HTMLSpanElement>>;

package/dist/lib/components/icons/Icon/Icon.test.d.ts

@@ -0,0 +1 @@
+export {};