@digigov/react-experimental 2.0.0-8de46296 → 2.0.0-96651090

package/FloatingButton/index.d.ts

@@ -17,5 +17,5 @@ export interface FloatingButtonProps extends ButtonProps {
  * Use it primary in mobile applications.
  * Avoid using text in this type of button, use icons instead.
  */
-export declare const FloatingButton: React.ForwardRefExoticComponent<Pick<FloatingButtonProps, "form" | "slot" | "style" | "title" | "as" | "className" | "color" | "id" | "lang" | "name" | "type" | "role" | "tabIndex" | "direction" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "margin" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "padding" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "printHidden" | "printVisible" | "xsUpHidden" | "smUpHidden" | "mdUpHidden" | "lgUpHidden" | "xlUpHidden" | "xsHidden" | "smHidden" | "mdHidden" | "lgHidden" | "xlHidden" | "variant" | "dense"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const FloatingButton: React.ForwardRefExoticComponent<Omit<FloatingButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export default FloatingButton;

package/FloatingButton/index.js

@@ -1,24 +1,16 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["direction", "className", "children"];
-import React from 'react';
-import clsx from 'clsx';
-import Button from '@digigov/react-core/Button';
-/**
- *
- * A FloatingButton performs the primary, or most common, action on a screen.
- * Use it primary in mobile applications.
- * Avoid using text in this type of button, use icons instead.
- */
-export var FloatingButton = /*#__PURE__*/React.forwardRef(function FloatingButton(_ref, ref) {
-  var _ref$direction = _ref.direction,
-    direction = _ref$direction === void 0 ? 'right' : _ref$direction,
-    className = _ref.className,
-    children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(Button, _extends({
-    ref: ref,
-    className: clsx(className, direction === 'right' && 'ds-floating-btn--right', direction === 'left' && 'ds-floating-btn--left', true && 'ds-floating-btn')
-  }, props), children);
+import react from "react";
+import clsx from "clsx";
+import Button from "@digigov/react-core/Button/index.js";
+const FloatingButton_FloatingButton = /*#__PURE__*/ react.forwardRef(function({ direction = 'right', className, children, ...props }, ref) {
+    return /*#__PURE__*/ react.createElement(Button, {
+        ref: ref,
+        className: clsx(className, {
+            'ds-floating-btn': true,
+            'ds-floating-btn--right': 'right' === direction,
+            'ds-floating-btn--left': 'left' === direction
+        }),
+        ...props
+    }, children);
 });
-export default FloatingButton;
+const src_FloatingButton = FloatingButton_FloatingButton;
+export { FloatingButton_FloatingButton as FloatingButton, src_FloatingButton as default };

package/Kitchensink/AllComponents.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const AllComponents: () => React.JSX.Element;

package/Kitchensink/AllComponents.js

@@ -0,0 +1,7 @@
+import react from "react";
+import { KitchenSinkDashboard } from "./KitchensinkDashboard.js";
+import { stories } from "@digigov/ui/stories-registry";
+const AllComponents = ()=>/*#__PURE__*/ react.createElement(KitchenSinkDashboard, {
+        stories: stories
+    });
+export { AllComponents };

package/Kitchensink/KitchensinkByCategory.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface KitchensinkByCategoryInterface {
+    category: string;
+    stories: React.ReactElement[];
+}
+export declare const KitchensinkByCategory: ({ category, stories, }: KitchensinkByCategoryInterface) => React.JSX.Element;

package/Kitchensink/KitchensinkByCategory.js

@@ -0,0 +1,25 @@
+import react from "react";
+import { KitchenSinkCategory } from "@digigov/react-core/KitchenSinkCategory/index.js";
+import { KitchenSinkHeading } from "@digigov/react-core/KitchenSinkHeading/index.js";
+import { KitchensinkByLetter } from "./KitchensinkByLetter.js";
+const KitchensinkByCategory = ({ category, stories })=>{
+    const alphabeticalOrder = Object.keys(stories).reduce((abStories, componentStoriesKey)=>{
+        const componentStories = stories[componentStoriesKey];
+        if (!componentStories.default.component) throw new Error(`no component was found in ${componentStoriesKey}`);
+        const name = componentStories.default.displayName;
+        console.log('componentStories', componentStories, 'stories', stories);
+        if (!name) throw new Error(`no name was found for ${componentStoriesKey}`);
+        const letter = name[0];
+        if (abStories[letter]) abStories[letter].push(componentStories);
+        else abStories[letter] = [
+            componentStories
+        ];
+        return abStories;
+    }, {});
+    return /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(KitchenSinkHeading, null, category), /*#__PURE__*/ react.createElement(KitchenSinkCategory, null, Object.keys(alphabeticalOrder).sort().map((letter, index)=>/*#__PURE__*/ react.createElement(KitchensinkByLetter, {
+            letter: letter,
+            stories: alphabeticalOrder[letter],
+            key: index
+        }))));
+};
+export { KitchensinkByCategory };

package/Kitchensink/KitchensinkByLetter.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface KitchensinkByLetterInterface {
+    letter: string;
+    stories: any;
+}
+export declare const KitchensinkByLetter: ({ letter, stories, }: KitchensinkByLetterInterface) => React.JSX.Element;

package/Kitchensink/KitchensinkByLetter.js

@@ -0,0 +1,14 @@
+import react from "react";
+import Heading from "@digigov/react-core/Heading/index.js";
+import { KitchenSinkLetterContent } from "@digigov/react-core/KitchenSinkLetterContent/index.js";
+import { KitchensinkComponent } from "./KitchensinkComponent.js";
+const KitchensinkByLetter = ({ letter, stories })=>/*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(Heading, null, letter), /*#__PURE__*/ react.createElement(KitchenSinkLetterContent, null, stories.map((story, index)=>/*#__PURE__*/ react.createElement(KitchensinkComponent, {
+            tags: story.default.tags,
+            title: story.default.displayName,
+            description: story.default.description,
+            link: story.default.link,
+            width: story.default.defaultWidth,
+            stories: story,
+            key: index
+        }))));
+export { KitchensinkByLetter };

package/Kitchensink/KitchensinkComponent.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface KitchensinkComponentInterface {
+    tags?: string[];
+    title: string;
+    description?: string;
+    link?: string;
+    stories: React.ReactElement[];
+    width?: 'md' | 'lg';
+}
+export declare const KitchensinkComponent: ({ tags, title, description, link, stories, width, }: KitchensinkComponentInterface) => React.JSX.Element;

package/Kitchensink/KitchensinkComponent.js

@@ -0,0 +1,29 @@
+import react from "react";
+import { KitchenSinkCard } from "@digigov/react-core/KitchenSinkCard/index.js";
+import { KitchenSinkContent } from "@digigov/react-core/KitchenSinkContent/index.js";
+import { KitchenSinkContentInfo } from "@digigov/react-core/KitchenSinkContentInfo/index.js";
+import { KitchenSinkContentTags } from "@digigov/react-core/KitchenSinkContentTags/index.js";
+import PhaseBanner, { PhaseBannerTag, PhaseBannerText } from "@digigov/ui/feedback/PhaseBanner/index.js";
+import SectionBreak from "@digigov/ui/layouts/SectionBreak/index.js";
+import Link from "@digigov/ui/navigation/Link/index.js";
+import { Paragraph } from "@digigov/ui/typography/index.js";
+import Heading from "@digigov/ui/typography/Heading/index.js";
+const KitchensinkComponent = ({ tags = [], title, description, link, stories, width = 'md' })=>/*#__PURE__*/ react.createElement(KitchenSinkContent, {
+        wide: 'lg' === width
+    }, /*#__PURE__*/ react.createElement(KitchenSinkContentInfo, null, /*#__PURE__*/ react.createElement(KitchenSinkContentTags, null, tags && tags.map((tag, index)=>/*#__PURE__*/ react.createElement(PhaseBanner, {
+            key: index
+        }, /*#__PURE__*/ react.createElement(PhaseBannerTag, null, tag), /*#__PURE__*/ react.createElement(PhaseBannerText, null, "Αυτή είναι μία νέα υπηρεσία – τα", ' ', /*#__PURE__*/ react.createElement(Link, {
+            href: "#feedback"
+        }, "σχόλιά"), " σας θα μας βοηθήσουν να τη βελτιώσουμε.")))), /*#__PURE__*/ react.createElement(Heading, {
+        size: "lg"
+    }, title), /*#__PURE__*/ react.createElement(Paragraph, null, description), link && /*#__PURE__*/ react.createElement(Link, {
+        href: link
+    }, "View on GOV.GR Design System"), /*#__PURE__*/ react.createElement(SectionBreak, null)), Object.keys(stories).filter((story)=>'default' !== story).map((story, index)=>{
+        const Component = stories[story];
+        return /*#__PURE__*/ react.createElement("div", {
+            key: index
+        }, /*#__PURE__*/ react.createElement(SectionBreak, null), /*#__PURE__*/ react.createElement(Heading, {
+            size: "sm"
+        }, story), /*#__PURE__*/ react.createElement(KitchenSinkCard, null, /*#__PURE__*/ react.createElement(Component, null)));
+    }));
+export { KitchensinkComponent };

package/Kitchensink/KitchensinkDashboard.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface KitchenSinkDashboardInterface {
+    stories: any;
+}
+export declare const KitchenSinkDashboard: ({ stories, }: KitchenSinkDashboardInterface) => React.JSX.Element;

package/Kitchensink/KitchensinkDashboard.js

@@ -0,0 +1,28 @@
+import react from "react";
+import { KitchenSinkAllComponents } from "@digigov/react-core/KitchenSinkAllComponents/index.js";
+import Paragraph from "@digigov/react-core/Paragraph/index.js";
+import { KitchensinkByCategory } from "./KitchensinkByCategory.js";
+const KitchenSinkDashboard = ({ stories })=>{
+    const categoryOrder = Object.keys(stories).reduce((catStories, componentStoriesKey)=>{
+        const componentStories = stories[componentStoriesKey];
+        if (componentStories.default.ignore) return catStories;
+        if (!componentStories.default.component) throw new Error(`no component was found in ${componentStoriesKey}`);
+        const title = componentStories.default.title.split('/')[1];
+        if (!title) throw new Error(`no title was found for ${componentStoriesKey}`);
+        const category = title;
+        if (catStories[category]) catStories[category].push(componentStories);
+        else catStories[category] = [
+            componentStories
+        ];
+        return catStories;
+    }, {});
+    return /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(Paragraph, {
+        fontSize: 72,
+        fontWeight: "bold"
+    }, "Components"), /*#__PURE__*/ react.createElement(KitchenSinkAllComponents, null, Object.keys(categoryOrder).sort((a, b)=>a > b ? -1 : 1).map((category, index)=>/*#__PURE__*/ react.createElement(KitchensinkByCategory, {
+            category: category,
+            stories: categoryOrder[category],
+            key: index
+        }))));
+};
+export { KitchenSinkDashboard };

package/Kitchensink/index.d.ts

@@ -0,0 +1,5 @@
+export * from './AllComponents.js';
+export * from './KitchensinkByCategory.js';
+export * from './KitchensinkByLetter.js';
+export * from './KitchensinkComponent.js';
+export * from './KitchensinkDashboard.js';

package/Kitchensink/index.js

@@ -0,0 +1,5 @@
+export * from "./AllComponents.js";
+export * from "./KitchensinkByCategory.js";
+export * from "./KitchensinkByLetter.js";
+export * from "./KitchensinkComponent.js";
+export * from "./KitchensinkDashboard.js";

package/OptionButtonBase/index.d.ts

@@ -4,10 +4,10 @@ export interface OptionButtonBaseProps extends BaseProps<'button'> {
     /**
      * selected is optional.
      * Use selected prop to set selected styling.
-    * @value true
-    * @value false
-    * @default false
-    */
+     * @value true
+     * @value false
+     * @default false
+     */
     selected?: boolean;
 }
 /**
@@ -15,5 +15,5 @@ export interface OptionButtonBaseProps extends BaseProps<'button'> {
  * OptionButtonBases can be used to represent small blocks of information.
  * OptionButtonBase component must be inside OptionButtonBaseSection component.
  */
-export declare const OptionButtonBase: React.ForwardRefExoticComponent<Pick<OptionButtonBaseProps, "form" | "slot" | "style" | "title" | "as" | "className" | "color" | "id" | "lang" | "name" | "type" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "selected" | "margin" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "padding" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "printHidden" | "printVisible" | "xsUpHidden" | "smUpHidden" | "mdUpHidden" | "lgUpHidden" | "xlUpHidden" | "xsHidden" | "smHidden" | "mdHidden" | "lgHidden" | "xlHidden"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const OptionButtonBase: React.ForwardRefExoticComponent<Omit<OptionButtonBaseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export default OptionButtonBase;

package/OptionButtonBase/index.js

@@ -1,24 +1,17 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["selected", "className", "children"];
-import React from 'react';
-import clsx from 'clsx';
-import Base from '@digigov/react-core/Base';
-/**
- *
- * OptionButtonBases can be used to represent small blocks of information.
- * OptionButtonBase component must be inside OptionButtonBaseSection component.
- */
-export var OptionButtonBase = /*#__PURE__*/React.forwardRef(function OptionButtonBase(_ref, ref) {
-  var _ref$selected = _ref.selected,
-    selected = _ref$selected === void 0 ? false : _ref$selected,
-    className = _ref.className,
-    children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(Base, _extends({
-    as: "button",
-    ref: ref,
-    className: clsx(className, selected && 'ds-option-btn--selected', true && ['ds-btn', 'ds-option-btn'])
-  }, props), children);
+import react from "react";
+import clsx from "clsx";
+import Base from "@digigov/react-core/Base/index.js";
+const OptionButtonBase_OptionButtonBase = /*#__PURE__*/ react.forwardRef(function({ selected = false, className, children, ...props }, ref) {
+    return /*#__PURE__*/ react.createElement(Base, {
+        as: "button",
+        ref: ref,
+        className: clsx(className, {
+            'ds-btn': true,
+            'ds-option-btn': true,
+            'ds-option-btn--selected': selected
+        }),
+        ...props
+    }, children);
 });
-export default OptionButtonBase;
+const src_OptionButtonBase = OptionButtonBase_OptionButtonBase;
+export { OptionButtonBase_OptionButtonBase as OptionButtonBase, src_OptionButtonBase as default };

package/OptionButtonSteps/index.d.ts

@@ -2,17 +2,17 @@ import React from 'react';
 import { BaseProps } from '@digigov/react-core/Base';
 export interface OptionButtonStepsProps extends BaseProps<'div'> {
     /**
-    * @value 0
-    * @value 1
-    * @value 2
-    * @value 3
-    * @value 4
-    * @default 0
-    */
+     * @value 0
+     * @value 1
+     * @value 2
+     * @value 3
+     * @value 4
+     * @default 0
+     */
     steps?: stepsProps;
     /**
-    * @default 0
-    */
+     * @default 0
+     */
     activeStep?: number;
 }
 export type stepsProps = 0 | 1 | 2 | 3 | 4;
@@ -21,5 +21,5 @@ export type stepsProps = 0 | 1 | 2 | 3 | 4;
  * OptionButtonSteps can be used to represent small blocks of information.
  * OptionButtonSteps component must be inside OptionButtonStepsSection component.
  */
-export declare const OptionButtonSteps: React.ForwardRefExoticComponent<Pick<OptionButtonStepsProps, "slot" | "style" | "title" | "as" | "className" | "color" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "margin" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "padding" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "printHidden" | "printVisible" | "xsUpHidden" | "smUpHidden" | "mdUpHidden" | "lgUpHidden" | "xlUpHidden" | "xsHidden" | "smHidden" | "mdHidden" | "lgHidden" | "xlHidden" | "steps" | "activeStep"> & React.RefAttributes<HTMLDivElement>>;
+export declare const OptionButtonSteps: React.ForwardRefExoticComponent<Omit<OptionButtonStepsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default OptionButtonSteps;

package/OptionButtonSteps/index.js

@@ -1,31 +1,22 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["steps", "activeStep", "className"];
-import React from 'react';
-import clsx from 'clsx';
-import Base from '@digigov/react-core/Base';
-/**
- *
- * OptionButtonSteps can be used to represent small blocks of information.
- * OptionButtonSteps component must be inside OptionButtonStepsSection component.
- */
-export var OptionButtonSteps = /*#__PURE__*/React.forwardRef(function OptionButtonSteps(_ref, ref) {
-  var _ref$steps = _ref.steps,
-    steps = _ref$steps === void 0 ? 0 : _ref$steps,
-    _ref$activeStep = _ref.activeStep,
-    activeStep = _ref$activeStep === void 0 ? 0 : _ref$activeStep,
-    className = _ref.className,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var renderStep = function renderStep(step) {
-    return /*#__PURE__*/React.createElement(Base, {
-      as: "div",
-      className: clsx(className, activeStep >= step && 'ds-option-btn__step--active', true && 'ds-option-btn__step')
-    });
-  };
-  return /*#__PURE__*/React.createElement(Base, _extends({
-    as: "div",
-    ref: ref,
-    className: clsx(className, true && 'ds-option-btn__steps')
-  }, props), steps >= 1 && renderStep(1), steps >= 2 && renderStep(2), steps >= 3 && renderStep(3), steps >= 4 && renderStep(4));
+import react from "react";
+import clsx from "clsx";
+import Base from "@digigov/react-core/Base/index.js";
+const OptionButtonSteps_OptionButtonSteps = /*#__PURE__*/ react.forwardRef(function({ steps = 0, activeStep = 0, className, ...props }, ref) {
+    const renderStep = (step)=>/*#__PURE__*/ react.createElement(Base, {
+            as: "div",
+            className: clsx(className, {
+                'ds-option-btn__step': true,
+                'ds-option-btn__step--active': activeStep >= step
+            })
+        });
+    return /*#__PURE__*/ react.createElement(Base, {
+        as: "div",
+        ref: ref,
+        className: clsx(className, {
+            'ds-option-btn__steps': true
+        }),
+        ...props
+    }, steps >= 1 && renderStep(1), steps >= 2 && renderStep(2), steps >= 3 && renderStep(3), steps >= 4 && renderStep(4));
 });
-export default OptionButtonSteps;
+const src_OptionButtonSteps = OptionButtonSteps_OptionButtonSteps;
+export { OptionButtonSteps_OptionButtonSteps as OptionButtonSteps, src_OptionButtonSteps as default };

package/index.d.ts

@@ -1,3 +1,4 @@
-export * from '@digigov/react-experimental/FloatingButton';
-export * from '@digigov/react-experimental/OptionButtonBase';
-export * from '@digigov/react-experimental/OptionButtonSteps';
+export * from './FloatingButton/index.js';
+export * from './OptionButtonBase/index.js';
+export * from './OptionButtonSteps/index.js';
+export * from './Kitchensink/index.js';

package/index.js

@@ -1,8 +1,9 @@
-/** @license Digigov v2.0.0-8de46296
+/** @license Digigov v2.0.0-96651090
  *
  * This source code is licensed under the BSD-2-Clause license found in the
  * LICENSE file in the root directory of this source tree.
  */
-export * from '@digigov/react-experimental/FloatingButton';
-export * from '@digigov/react-experimental/OptionButtonBase';
-export * from '@digigov/react-experimental/OptionButtonSteps';
+export * from "./FloatingButton/index.js";
+export * from "./OptionButtonBase/index.js";
+export * from "./OptionButtonSteps/index.js";
+export * from "./Kitchensink/index.js";

package/package.json

@@ -1,22 +1,20 @@
 {
   "name": "@digigov/react-experimental",
-  "version": "2.0.0-8de46296",
+  "version": "2.0.0-96651090",
   "description": "@digigov react experimental components",
   "author": "GRNET Developers <devs@lists.grnet.gr>",
   "license": "BSD-2-Clause",
-  "main": "./cjs/index.js",
-  "module": "./index.js",
+  "type": "module",
   "peerDependencies": {
-    "@digigov/css": "2.0.0-8de46296",
-    "@digigov/react-experimental": "2.0.0-8de46296",
-    "@digigov/react-icons": "2.0.0-8de46296",
-    "clsx": "1.1.1",
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
-  },
-  "dependencies": {
-    "ts-morph": "18.0.0"
+    "@digigov/css": "2.0.0-96651090",
+    "@digigov/react-icons": "2.0.0-96651090",
+    "@digigov/ui": "2.0.0-96651090",
+    "@digigov/react-core": "2.0.0-96651090",
+    "clsx": "2.1.1",
+    "react": "^18.3.0 || ^19.1.0",
+    "react-dom": "^18.3.0 || ^19.1.0"
   },
   "private": false,
-  "typings": "./index.d.ts"
+  "main": "index.js",
+  "module": "index.js"
 }

package/src/FloatingButton/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,37 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`renders the FloatingButton with  direction="left" 1`] = `
+<body>
+  <div>
+    <button
+      class="ds-print-hidden ds-floating-btn ds-floating-btn--left ds-btn ds-btn-primary"
+    >
+      +
+    </button>
+  </div>
+</body>
+`;
+
+exports[`renders the FloatingButton with  direction="right" 1`] = `
+<body>
+  <div>
+    <button
+      class="ds-print-hidden ds-floating-btn ds-floating-btn--right ds-btn ds-btn-primary"
+    >
+      +
+    </button>
+  </div>
+</body>
+`;
+
+exports[`renders the FloatingButton with no props 1`] = `
+<body>
+  <div>
+    <button
+      class="ds-print-hidden ds-floating-btn ds-floating-btn--right ds-btn ds-btn-primary"
+    >
+      +
+    </button>
+  </div>
+</body>
+`;

package/src/FloatingButton/index.test.tsx

@@ -1,14 +1,20 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 
 import FloatingButton from '@digigov/react-experimental/FloatingButton';
 
 it('renders the FloatingButton with no props', () => {
-  expect(mount(<FloatingButton>+</FloatingButton>)).toMatchSnapshot();
+  expect(
+    render(<FloatingButton>+</FloatingButton>).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the FloatingButton with  direction="right"', () => {
-  expect(mount(<FloatingButton direction="right">+</FloatingButton>)).toMatchSnapshot();
+  expect(
+    render(<FloatingButton direction="right">+</FloatingButton>).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the FloatingButton with  direction="left"', () => {
-  expect(mount(<FloatingButton direction="left">+</FloatingButton>)).toMatchSnapshot();
-});
+  expect(
+    render(<FloatingButton direction="left">+</FloatingButton>).baseElement
+  ).toMatchSnapshot();
+});

package/src/FloatingButton/index.tsx

@@ -41,4 +41,4 @@ export const FloatingButton = React.forwardRef<
   );
 });
 
-export default FloatingButton;
+export default FloatingButton;

package/src/Kitchensink/AllComponents.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+import { KitchenSinkDashboard } from '@digigov/react-experimental/Kitchensink/KitchensinkDashboard';
+// @ts-expect-error Registry not included in src files
+import { stories } from '@digigov/ui/stories-registry';
+
+export const AllComponents = () => <KitchenSinkDashboard stories={stories} />;

package/src/Kitchensink/KitchensinkByCategory.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { KitchenSinkCategory } from '@digigov/react-core/KitchenSinkCategory';
+import { KitchenSinkHeading } from '@digigov/react-core/KitchenSinkHeading';
+import { KitchensinkByLetter } from '@digigov/react-experimental/Kitchensink/KitchensinkByLetter';
+
+export interface KitchensinkByCategoryInterface {
+  category: string;
+  stories: React.ReactElement[];
+}
+
+export const KitchensinkByCategory = ({
+  category,
+  stories,
+}: KitchensinkByCategoryInterface) => {
+  const alphabeticalOrder = Object.keys(stories).reduce(
+    (abStories, componentStoriesKey) => {
+      const componentStories = stories[componentStoriesKey];
+      if (!componentStories.default.component) {
+        throw new Error(`no component was found in ${componentStoriesKey}`);
+      }
+      const name = componentStories.default.displayName;
+      console.log('componentStories', componentStories, 'stories', stories);
+      if (!name) {
+        throw new Error(`no name was found for ${componentStoriesKey}`);
+      }
+      const letter = name[0];
+      if (abStories[letter]) {
+        abStories[letter].push(componentStories);
+      } else {
+        abStories[letter] = [componentStories];
+      }
+      return abStories;
+    },
+    {}
+  );
+  return (
+    <div>
+      <KitchenSinkHeading>{category}</KitchenSinkHeading>
+      <KitchenSinkCategory>
+        {Object.keys(alphabeticalOrder)
+          .sort()
+          .map((letter, index) => {
+            return (
+              <KitchensinkByLetter
+                letter={letter}
+                stories={alphabeticalOrder[letter]}
+                key={index}
+              />
+            );
+          })}
+      </KitchenSinkCategory>
+    </div>
+  );
+};