@digigov/react-experimental 2.0.0-a7ffb5dc → 2.0.0-aefd0709

package/cjs/OptionButtonBase/index.js

@@ -1,31 +1,58 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var OptionButtonBase_exports = {};
+__export(OptionButtonBase_exports, {
+  OptionButtonBase: () => OptionButtonBase,
+  default: () => OptionButtonBase_default
 });
-exports["default"] = exports.OptionButtonBase = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _Base = _interopRequireDefault(require("@digigov/react-core/Base"));
-var _excluded = ["selected", "className", "children"];
-/**
- *
- * OptionButtonBases can be used to represent small blocks of information.
- * OptionButtonBase component must be inside OptionButtonBaseSection component.
- */
-var OptionButtonBase = exports.OptionButtonBase = /*#__PURE__*/_react["default"].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 = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return /*#__PURE__*/_react["default"].createElement(_Base["default"], (0, _extends2["default"])({
-    as: "button",
-    ref: ref,
-    className: (0, _clsx["default"])(className, selected && 'ds-option-btn--selected', true && ['ds-btn', 'ds-option-btn'])
-  }, props), children);
+module.exports = __toCommonJS(OptionButtonBase_exports);
+var import_react = __toESM(require("react"));
+var import_clsx = __toESM(require("clsx"));
+var import_Base = __toESM(require("@digigov/react-core/Base"));
+const OptionButtonBase = import_react.default.forwardRef(function OptionButtonBase2({ selected = false, className, children, ...props }, ref) {
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_Base.default,
+    {
+      as: "button",
+      ref,
+      className: (0, import_clsx.default)(className, {
+        "ds-btn": true,
+        "ds-option-btn": true,
+        "ds-option-btn--selected": selected
+      }),
+      ...props
+    },
+    children
+  );
 });
-var _default = exports["default"] = OptionButtonBase;
+var OptionButtonBase_default = OptionButtonBase;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  OptionButtonBase
+});
+//# sourceMappingURL=index.js.map

package/cjs/OptionButtonBase/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/OptionButtonBase/index.tsx"],
+  "sourcesContent": ["import React from 'react';\nimport clsx from 'clsx';\nimport Base, { BaseProps } from '@digigov/react-core/Base';\n\nexport interface OptionButtonBaseProps extends BaseProps<'button'> {\n  /**\n   * selected is optional.\n   * Use selected prop to set selected styling.\n   * @value true\n   * @value false\n   * @default false\n   */\n  selected?: boolean;\n}\n/**\n *\n * OptionButtonBases can be used to represent small blocks of information.\n * OptionButtonBase component must be inside OptionButtonBaseSection component.\n */\nexport const OptionButtonBase = React.forwardRef<\n  HTMLButtonElement,\n  OptionButtonBaseProps\n>(function OptionButtonBase(\n  { selected = false, className, children, ...props },\n  ref\n) {\n  return (\n    <Base\n      as=\"button\"\n      ref={ref}\n      className={clsx(className, {\n        'ds-btn': true,\n        'ds-option-btn': true,\n        'ds-option-btn--selected': selected,\n      })}\n      {...props}\n    >\n      {children}\n    </Base>\n  );\n});\n\nexport default OptionButtonBase;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,kBAAiB;AACjB,kBAAgC;AAiBzB,MAAM,mBAAmB,aAAAA,QAAM,WAGpC,SAASC,kBACT,EAAE,WAAW,OAAO,WAAW,UAAU,GAAG,MAAM,GAClD,KACA;AACA,SACE,6BAAAD,QAAA;AAAA,IAAC,YAAAE;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH;AAAA,MACA,eAAW,YAAAC,SAAK,WAAW;AAAA,QACzB,UAAU;AAAA,QACV,iBAAiB;AAAA,QACjB,2BAA2B;AAAA,MAC7B,CAAC;AAAA,MACA,GAAG;AAAA;AAAA,IAEH;AAAA,EACH;AAEJ,CAAC;AAED,IAAO,2BAAQ;",
+  "names": ["React", "OptionButtonBase", "Base", "clsx"]
+}

package/cjs/OptionButtonSteps/index.js

@@ -1,38 +1,69 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var OptionButtonSteps_exports = {};
+__export(OptionButtonSteps_exports, {
+  OptionButtonSteps: () => OptionButtonSteps,
+  default: () => OptionButtonSteps_default
 });
-exports["default"] = exports.OptionButtonSteps = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _Base = _interopRequireDefault(require("@digigov/react-core/Base"));
-var _excluded = ["steps", "activeStep", "className"];
-/**
- *
- * OptionButtonSteps can be used to represent small blocks of information.
- * OptionButtonSteps component must be inside OptionButtonStepsSection component.
- */
-var OptionButtonSteps = exports.OptionButtonSteps = /*#__PURE__*/_react["default"].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 = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var renderStep = function renderStep(step) {
-    return /*#__PURE__*/_react["default"].createElement(_Base["default"], {
+module.exports = __toCommonJS(OptionButtonSteps_exports);
+var import_react = __toESM(require("react"));
+var import_clsx = __toESM(require("clsx"));
+var import_Base = __toESM(require("@digigov/react-core/Base"));
+const OptionButtonSteps = import_react.default.forwardRef(function OptionButtonSteps2({ steps = 0, activeStep = 0, className, ...props }, ref) {
+  const renderStep = (step) => /* @__PURE__ */ import_react.default.createElement(
+    import_Base.default,
+    {
       as: "div",
-      className: (0, _clsx["default"])(className, activeStep >= step && 'ds-option-btn__step--active', true && 'ds-option-btn__step')
-    });
-  };
-  return /*#__PURE__*/_react["default"].createElement(_Base["default"], (0, _extends2["default"])({
-    as: "div",
-    ref: ref,
-    className: (0, _clsx["default"])(className, true && 'ds-option-btn__steps')
-  }, props), steps >= 1 && renderStep(1), steps >= 2 && renderStep(2), steps >= 3 && renderStep(3), steps >= 4 && renderStep(4));
+      className: (0, import_clsx.default)(className, {
+        "ds-option-btn__step": true,
+        "ds-option-btn__step--active": activeStep >= step
+      })
+    }
+  );
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_Base.default,
+    {
+      as: "div",
+      ref,
+      className: (0, import_clsx.default)(className, {
+        "ds-option-btn__steps": true
+      }),
+      ...props
+    },
+    steps >= 1 && renderStep(1),
+    steps >= 2 && renderStep(2),
+    steps >= 3 && renderStep(3),
+    steps >= 4 && renderStep(4)
+  );
+});
+var OptionButtonSteps_default = OptionButtonSteps;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  OptionButtonSteps
 });
-var _default = exports["default"] = OptionButtonSteps;
+//# sourceMappingURL=index.js.map

package/cjs/OptionButtonSteps/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/OptionButtonSteps/index.tsx"],
+  "sourcesContent": ["import React from 'react';\nimport clsx from 'clsx';\nimport Base, { BaseProps } from '@digigov/react-core/Base';\n\nexport interface OptionButtonStepsProps extends BaseProps<'div'> {\n  /**\n   * @value 0\n   * @value 1\n   * @value 2\n   * @value 3\n   * @value 4\n   * @default 0\n   */\n  steps?: stepsProps;\n  /**\n   * @default 0\n   */\n  activeStep?: number;\n}\n\nexport type stepsProps = 0 | 1 | 2 | 3 | 4;\n/**\n *\n * OptionButtonSteps can be used to represent small blocks of information.\n * OptionButtonSteps component must be inside OptionButtonStepsSection component.\n */\nexport const OptionButtonSteps = React.forwardRef<\n  HTMLDivElement,\n  OptionButtonStepsProps\n>(function OptionButtonSteps(\n  { steps = 0, activeStep = 0, className, ...props },\n  ref\n) {\n  const renderStep = (step: number) => (\n    <Base\n      as=\"div\"\n      className={clsx(className, {\n        'ds-option-btn__step': true,\n        'ds-option-btn__step--active': activeStep >= step,\n      })}\n    ></Base>\n  );\n\n  return (\n    <Base\n      as=\"div\"\n      ref={ref}\n      className={clsx(className, {\n        'ds-option-btn__steps': true,\n      })}\n      {...props}\n    >\n      {steps >= 1 && renderStep(1)}\n      {steps >= 2 && renderStep(2)}\n      {steps >= 3 && renderStep(3)}\n      {steps >= 4 && renderStep(4)}\n    </Base>\n  );\n});\n\nexport default OptionButtonSteps;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,kBAAiB;AACjB,kBAAgC;AAwBzB,MAAM,oBAAoB,aAAAA,QAAM,WAGrC,SAASC,mBACT,EAAE,QAAQ,GAAG,aAAa,GAAG,WAAW,GAAG,MAAM,GACjD,KACA;AACA,QAAM,aAAa,CAAC,SAClB,6BAAAD,QAAA;AAAA,IAAC,YAAAE;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,eAAW,YAAAC,SAAK,WAAW;AAAA,QACzB,uBAAuB;AAAA,QACvB,+BAA+B,cAAc;AAAA,MAC/C,CAAC;AAAA;AAAA,EACF;AAGH,SACE,6BAAAH,QAAA;AAAA,IAAC,YAAAE;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH;AAAA,MACA,eAAW,YAAAC,SAAK,WAAW;AAAA,QACzB,wBAAwB;AAAA,MAC1B,CAAC;AAAA,MACA,GAAG;AAAA;AAAA,IAEH,SAAS,KAAK,WAAW,CAAC;AAAA,IAC1B,SAAS,KAAK,WAAW,CAAC;AAAA,IAC1B,SAAS,KAAK,WAAW,CAAC;AAAA,IAC1B,SAAS,KAAK,WAAW,CAAC;AAAA,EAC7B;AAEJ,CAAC;AAED,IAAO,4BAAQ;",
+  "names": ["React", "OptionButtonSteps", "Base", "clsx"]
+}

package/cjs/index.js

@@ -1,38 +1,28 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var src_exports = {};
+module.exports = __toCommonJS(src_exports);
+__reExport(src_exports, require("@digigov/react-experimental/FloatingButton"), module.exports);
+__reExport(src_exports, require("@digigov/react-experimental/OptionButtonBase"), module.exports);
+__reExport(src_exports, require("@digigov/react-experimental/OptionButtonSteps"), module.exports);
+__reExport(src_exports, require("@digigov/react-experimental/Kitchensink"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("@digigov/react-experimental/FloatingButton"),
+  ...require("@digigov/react-experimental/OptionButtonBase"),
+  ...require("@digigov/react-experimental/OptionButtonSteps"),
+  ...require("@digigov/react-experimental/Kitchensink")
 });
-var _FloatingButton = require("@digigov/react-experimental/FloatingButton");
-Object.keys(_FloatingButton).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _FloatingButton[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _FloatingButton[key];
-    }
-  });
-});
-var _OptionButtonBase = require("@digigov/react-experimental/OptionButtonBase");
-Object.keys(_OptionButtonBase).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _OptionButtonBase[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _OptionButtonBase[key];
-    }
-  });
-});
-var _OptionButtonSteps = require("@digigov/react-experimental/OptionButtonSteps");
-Object.keys(_OptionButtonSteps).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _OptionButtonSteps[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _OptionButtonSteps[key];
-    }
-  });
-});
+//# sourceMappingURL=index.js.map

package/cjs/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.ts"],
+  "sourcesContent": ["export * from '@digigov/react-experimental/FloatingButton';\nexport * from '@digigov/react-experimental/OptionButtonBase';\nexport * from '@digigov/react-experimental/OptionButtonSteps';\nexport * from '@digigov/react-experimental/Kitchensink';\n"],
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,uDAAd;AACA,wBAAc,yDADd;AAEA,wBAAc,0DAFd;AAGA,wBAAc,oDAHd;",
+  "names": []
+}

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 '@digigov/react-experimental/Kitchensink';

package/index.js

@@ -1,8 +1,10 @@
-/** @license Digigov v2.0.0-a7ffb5dc
+/** @license Digigov v2.0.0-aefd0709
  *
  * 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/FloatingButton";
+export * from "@digigov/react-experimental/OptionButtonBase";
+export * from "@digigov/react-experimental/OptionButtonSteps";
+export * from "@digigov/react-experimental/Kitchensink";
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts"],
+  "sourcesContent": ["export * from '@digigov/react-experimental/FloatingButton';\nexport * from '@digigov/react-experimental/OptionButtonBase';\nexport * from '@digigov/react-experimental/OptionButtonSteps';\nexport * from '@digigov/react-experimental/Kitchensink';\n"],
+  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
+  "names": []
+}

package/package.json

@@ -1,21 +1,19 @@
 {
   "name": "@digigov/react-experimental",
-  "version": "2.0.0-a7ffb5dc",
+  "version": "2.0.0-aefd0709",
   "description": "@digigov react experimental components",
   "author": "GRNET Developers <devs@lists.grnet.gr>",
   "license": "BSD-2-Clause",
   "main": "./cjs/index.js",
   "module": "./index.js",
   "peerDependencies": {
-    "@digigov/css": "2.0.0-a7ffb5dc",
-    "@digigov/react-experimental": "2.0.0-a7ffb5dc",
-    "@digigov/react-icons": "1.2.0-a7ffb5dc",
+    "@digigov/css": "2.0.0-aefd0709",
+    "@digigov/react-icons": "2.0.0-aefd0709",
+    "@digigov/ui": "2.0.0-aefd0709",
+    "@digigov/react-core": "2.0.0-aefd0709",
     "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"
+    "react": ">=16.8.0 <19.0.0",
+    "react-dom": ">=16.8.0 <19.0.0"
   },
   "private": false,
   "typings": "./index.d.ts"

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,6 @@
+import React from 'react';
+
+import { KitchenSinkDashboard } from '@digigov/react-experimental/Kitchensink/KitchensinkDashboard';
+import { stories } from '@digigov/ui/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>
+  );
+};

package/src/Kitchensink/KitchensinkByLetter.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import Heading from '@digigov/react-core/Heading';
+import { KitchenSinkLetterContent } from '@digigov/react-core/KitchenSinkLetterContent';
+import { KitchensinkComponent } from '@digigov/react-experimental/Kitchensink/KitchensinkComponent';
+
+export interface KitchensinkByLetterInterface {
+  letter: string;
+  stories: any;
+}
+
+export const KitchensinkByLetter = ({
+  letter,
+  stories,
+}: KitchensinkByLetterInterface) => {
+  return (
+    <div>
+      <Heading>{letter}</Heading>
+      <KitchenSinkLetterContent>
+        {stories.map((story, index) => {
+          return (
+            <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}
+            />
+          );
+        })}
+      </KitchenSinkLetterContent>
+    </div>
+  );
+};

package/src/Kitchensink/KitchensinkComponent.tsx

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

package/src/Kitchensink/KitchensinkDashboard.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { KitchenSinkAllComponents } from '@digigov/react-core/KitchenSinkAllComponents';
+import Paragraph from '@digigov/react-core/Paragraph';
+import { KitchensinkByCategory } from '@digigov/react-experimental/Kitchensink/KitchensinkByCategory';
+
+export interface KitchenSinkDashboardInterface {
+  stories: any;
+}
+
+export const KitchenSinkDashboard = ({
+  stories,
+}: KitchenSinkDashboardInterface) => {
+  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 (
+    <div>
+      <Paragraph fontSize={72} fontWeight="bold">
+        Components
+      </Paragraph>
+      <KitchenSinkAllComponents>
+        {Object.keys(categoryOrder)
+          .sort((a, b) => (a > b ? -1 : 1))
+          .map((category, index) => {
+            return (
+              <KitchensinkByCategory
+                category={category}
+                stories={categoryOrder[category]}
+                key={index}
+              />
+            );
+          })}
+      </KitchenSinkAllComponents>
+    </div>
+  );
+};