@digigov/react-experimental 2.0.0-rc.8 → 2.0.2

package/CHANGELOG.md

@@ -1,11 +1,43 @@
 # Change Log - @digigov/react-experimental
 
-This log was last generated on Fri, 16 Feb 2024 09:57:32 GMT and should not be manually modified.
+This log was last generated on Wed, 21 Jan 2026 15:58:34 GMT and should not be manually modified.
+
+## 2.0.2
+Wed, 21 Jan 2026 15:58:34 GMT
+
+### Breaking changes
+
+- Rename govgr classes namespace to ds
+- Make lib "pure ESM" & update clsx to v2
+
+### Minor changes
+
+- Upgrade react peer dependency version to include ^19.1.0 along with ^18.3.0
+
+### Patches
+
+- update react version
+- move kitchensink components in experimental
+- export Kitchensink from react-experimental
+- Fix stories registry import
+- Update react experimental components test snapshots
+- Update package.json
+- Add support for React v18
+
+### Updates
+
+- Update build script & remove unnecessary dependency
+- Fix linter errors
+- Fix type-error on build
+- Update @types/node
+- Replace jest with vitest & u
 
 ## 1.1.2
 Fri, 16 Feb 2024 09:57:32 GMT
 
-_Version update only_
+### Updates
+
+- Upgrade ESLint & Prettier
 
 ## 1.1.1
 Mon, 29 Jan 2024 17:45:11 GMT

package/FloatingButton/index.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ButtonProps } from '@digigov/react-core/Button';
+export interface FloatingButtonProps extends ButtonProps {
+    /**
+     * direction is optional.
+     * direction sets the position of the button to either left or right side of the screen.
+     * The default value is 'left'.
+     * @value 'right'
+     * @value 'left'
+     * @default 'left'
+     */
+    direction?: 'right' | 'left';
+}
+/**
+ *
+ * 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 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/{libs-ui/react-experimental/src/Kitchensink → Kitchensink}/KitchensinkByCategory.d.ts

@@ -3,4 +3,4 @@ export interface KitchensinkByCategoryInterface {
     category: string;
     stories: React.ReactElement[];
 }
-export declare const KitchensinkByCategory: ({ category, stories, }: KitchensinkByCategoryInterface) => JSX.Element;
+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/{libs-ui/react-experimental/src/Kitchensink → Kitchensink}/KitchensinkByLetter.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import React from 'react';
 export interface KitchensinkByLetterInterface {
     letter: string;
     stories: any;
 }
-export declare const KitchensinkByLetter: ({ letter, stories, }: KitchensinkByLetterInterface) => JSX.Element;
+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/{libs-ui/react-experimental/src/Kitchensink → Kitchensink}/KitchensinkComponent.d.ts

@@ -7,4 +7,4 @@ export interface KitchensinkComponentInterface {
     stories: React.ReactElement[];
     width?: 'md' | 'lg';
 }
-export declare const KitchensinkComponent: ({ tags, title, description, link, stories, width, }: KitchensinkComponentInterface) => JSX.Element;
+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/{libs-ui/react-experimental/src/Kitchensink → Kitchensink}/KitchensinkDashboard.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
+import React from 'react';
 export interface KitchenSinkDashboardInterface {
     stories: any;
 }
-export declare const KitchenSinkDashboard: ({ stories, }: KitchenSinkDashboardInterface) => JSX.Element;
+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

@@ -1,5 +1,5 @@
-export * from "./AllComponents";
-export * from "./KitchensinkByCategory";
-export * from "./KitchensinkByLetter";
-export * from "./KitchensinkComponent";
-export * from "./KitchensinkDashboard";
+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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { BaseProps } from '@digigov/react-core/Base';
+export interface OptionButtonBaseProps extends BaseProps<'button'> {
+    /**
+     * selected is optional.
+     * Use selected prop to set selected styling.
+     * @value true
+     * @value false
+     * @default false
+     */
+    selected?: boolean;
+}
+/**
+ *
+ * OptionButtonBases can be used to represent small blocks of information.
+ * OptionButtonBase component must be inside OptionButtonBaseSection component.
+ */
+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

@@ -0,0 +1,25 @@
+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
+     */
+    steps?: stepsProps;
+    /**
+     * @default 0
+     */
+    activeStep?: number;
+}
+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<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

@@ -0,0 +1,4 @@
+export * from './FloatingButton/index.js';
+export * from './OptionButtonBase/index.js';
+export * from './OptionButtonSteps/index.js';
+export * from './Kitchensink/index.js';

package/index.js

@@ -1,9 +1,9 @@
-/** @license Digigov v2.0.0-rc.8
+/** @license Digigov v2.0.2
  *
  * 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 '@digigov/react-experimental/Kitchensink';
+export * from "./FloatingButton/index.js";
+export * from "./OptionButtonBase/index.js";
+export * from "./OptionButtonSteps/index.js";
+export * from "./Kitchensink/index.js";

package/package.json

@@ -1,23 +1,20 @@
 {
   "name": "@digigov/react-experimental",
-  "version": "2.0.0-rc.8",
+  "version": "2.0.2",
   "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-rc.8",
-    "@digigov/react-icons": "2.0.0-rc.8",
-    "@digigov/ui": "2.0.0-rc.8",
-    "@digigov/react-core": "2.0.0-rc.8",
-    "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": "workspace:2.0.2",
+    "@digigov/react-icons": "workspace:2.0.2",
+    "@digigov/ui": "workspace:2.0.2",
+    "@digigov/react-core": "workspace:2.0.2",
+    "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

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { stories } from '@digigov/ui/registry';
 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

@@ -1,10 +1,6 @@
 import React from 'react';
-import {
-  KitchenSinkCategory,
-} from '@digigov/react-core/KitchenSinkCategory';
-import {
-  KitchenSinkHeading,
-} from '@digigov/react-core/KitchenSinkHeading';
+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 {

package/src/Kitchensink/index.ts

@@ -1,5 +1,5 @@
-export * from './AllComponents';
-export * from './KitchensinkByCategory';
-export * from './KitchensinkByLetter';
-export * from './KitchensinkComponent';
-export * from './KitchensinkDashboard';
+export * from '@digigov/react-experimental/Kitchensink/AllComponents';
+export * from '@digigov/react-experimental/Kitchensink/KitchensinkByCategory';
+export * from '@digigov/react-experimental/Kitchensink/KitchensinkByLetter';
+export * from '@digigov/react-experimental/Kitchensink/KitchensinkComponent';
+export * from '@digigov/react-experimental/Kitchensink/KitchensinkDashboard';

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

@@ -0,0 +1,37 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`renders the OptionButtonBase with  selected=false 1`] = `
+<body>
+  <div>
+    <button
+      class="ds-btn ds-option-btn"
+    >
+      +
+    </button>
+  </div>
+</body>
+`;
+
+exports[`renders the OptionButtonBase with  selected=true 1`] = `
+<body>
+  <div>
+    <button
+      class="ds-btn ds-option-btn ds-option-btn--selected"
+    >
+      +
+    </button>
+  </div>
+</body>
+`;
+
+exports[`renders the OptionButtonBase with no props 1`] = `
+<body>
+  <div>
+    <button
+      class="ds-btn ds-option-btn"
+    >
+      +
+    </button>
+  </div>
+</body>
+`;