Draft: (feat): migrate component data filter to szot-ui pkg

__mocks__/cleave.js

@@ -0,0 +1,4 @@
+import Cleave from "cleave";
+
+// workaround for jest test with cleave package
+export default Cleave;

__mocks__/slim-select.js

@@ -0,0 +1,4 @@
+import SlimSelect from "slim-select";
+
+// workaround for jest test with slim-select package
+export default SlimSelect;

package.json

@@ -91,6 +91,11 @@
     "cleave.js": "^1.6.0",
     "hammerjs": "^2.0.8",
     "resolve-url-loader": "^5.0.0",
-    "svelte": "^3.24.0"
+    "svelte": "^3.24.0",
+    "@types/lodash.orderby": "^4.6.6",
+    "lodash.orderby": "^4.6.0",
+    "@types/cleave": "npm:@types/cleave.js@^1.4.6",
+    "cleave": "npm:cleave.js@^1.6.0",
+    "slim-select": "^1.27.1"
   }
 }

src/components/DataFilter/DataFilter.stories.ts

@@ -0,0 +1,18 @@
+import type { ArgType } from "@storybook/addons";
+import DataFilter from "./DataFilter.svelte";
+
+export default {
+  title: "Components/DataFilter",
+  component: DataFilter,
+};
+
+const Template = (_args: ArgType) => {
+  const ret = ({ ...props }) => ({
+    Component: DataFilter,
+    props,
+  });
+  ret.args = _args;
+  return ret;
+};
+
+export const Default = Template({});

src/components/DataFilter/DataFilter.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    import FilterEngine from "./helpers/FilterEngine";
+    import SortEngine from "./helpers/SortEngine";
+
+    import FilterFields from "./components/FilterFields/FilterFields.svelte";
+    import SortFields from "./components/SortFields/SortFields.svelte";
+    import Modal from "./components/Modal/Modal.svelte";
+
+    import mockLargeData from "./helpers/record-collection/mock-large-data";
+
+    // TODO - user the engine to filter getted data from the form
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const filter = new FilterEngine(mockLargeData);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const sort = new SortEngine(mockLargeData);
+</script>
+
+<Modal>
+    <FilterFields/>
+    <SortFields/>
+</Modal>
+
+<style lang="scss">
+
+</style>

src/components/DataFilter/components/FilterFields/FilterFields.stories.ts

@@ -0,0 +1,18 @@
+import type { ArgType } from "@storybook/addons";
+import FilterFields from "./FilterFields.svelte";
+
+export default {
+  title: "Internal Documentation/Components/DataFilter/FilterFields",
+  component: FilterFields,
+};
+
+const Template = (_args: ArgType) => {
+  const ret = ({ ...props }) => ({
+    Component: FilterFields,
+    props,
+  });
+  ret.args = _args;
+  return ret;
+};
+
+export const Default = Template({});

src/components/DataFilter/components/FilterFields/FilterFields.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+</script>
+
+<h2>Filter Fileds Componente</h2>
+
+<style lang="scss">
+
+</style>

src/components/DataFilter/components/Icon/IIcons.ts

@@ -0,0 +1,21 @@
+export enum IIcons {
+  "eye-off" = "eye-off",
+  "eye-on" = "eye-on",
+  file = "file",
+  filter = "filter",
+  info = "info",
+  investing = "investing",
+  link = "link",
+  lock = "lock",
+  mail = "mail",
+  more = "more",
+  notification = "notification",
+  partners = "partners",
+  phone = "phone",
+  ponto = "ponto",
+  profile = "profile",
+  proposal = "proposal",
+  search = "search",
+  task = "task",
+  upload = "upload",
+}

src/components/DataFilter/components/Icon/Icon.stories.ts

@@ -0,0 +1,45 @@
+import type { ArgType } from "@storybook/addons";
+import { action } from "@storybook/addon-actions";
+import Icon from "./Icon.svelte";
+import IconList from "./IconList.svelte";
+import { IIcons } from "./IIcons";
+
+export default {
+  title: "Internal Documentation/Components/DataFilter/Icon",
+  component: Icon,
+  argTypes: {
+    onClick: { action: "onClick" },
+    iconName: {
+      control: {
+        type: "select",
+        options: Object.values(IIcons),
+      },
+    },
+  },
+  parameters: {
+    // skip all screen test for this stories
+    creevey: {
+      skip: true,
+    },
+  },
+};
+
+const Template = (_args: ArgType) => {
+  const ret = ({ ...props }) => ({
+    Component: Icon,
+    props,
+    on: {
+      click: action("onClick"),
+    },
+  });
+  ret.args = _args;
+  return ret;
+};
+
+export const Default = Template({
+  iconName: IIcons.phone,
+});
+
+export const List = (): unknown => ({
+  Component: IconList,
+});

src/components/DataFilter/components/Icon/Icon.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import type { IIcons } from "./IIcons";
+
+  export let iconName: IIcons;
+</script>
+
+<span class="icon-{iconName}" on:click/>
+
+<style lang="scss">
+</style>

src/components/DataFilter/components/Icon/IconList.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { IIcons } from "./IIcons";
+  import Icon from "./Icon.svelte";
+</script>
+
+{#each Object.values(IIcons) as iconName}
+  <Icon { iconName } />
+  <span>icon-{ iconName }</span>
+  <br>
+{/each}
+
+<style lang="scss">
+</style>

src/components/DataFilter/components/Modal/Modal.stories.ts

@@ -0,0 +1,18 @@
+import type { ArgType } from "@storybook/addons";
+import Modal from "./Modal.svelte";
+
+export default {
+  title: "Internal Documentation/Components/DataFilter/Modal",
+  component: Modal,
+};
+
+const Template = (_args: ArgType) => {
+  const ret = ({ ...props }) => ({
+    Component: Modal,
+    props,
+  });
+  ret.args = _args;
+  return ret;
+};
+
+export const Default = Template({});

src/components/DataFilter/components/Modal/Modal.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+</script>
+
+<div id="modal">
+    <slot></slot>
+</div>
+
+<style lang="scss">
+    #modal {
+        background: red;
+    }
+</style>

src/components/DataFilter/components/SortFields/SortFields.stories.ts

@@ -0,0 +1,18 @@
+import type { ArgType } from "@storybook/addons";
+import SortFields from "./SortFields.svelte";
+
+export default {
+  title: "Internal Documentation/Components/DataFilter/SortFields",
+  component: SortFields,
+};
+
+const Template = (_args: ArgType) => {
+  const ret = ({ ...props }) => ({
+    Component: SortFields,
+    props,
+  });
+  ret.args = _args;
+  return ret;
+};
+
+export const Default = Template({});

src/components/DataFilter/components/SortFields/SortFields.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+</script>
+
+<h2>Sort Fileds Componente</h2>
+
+<style lang="scss">
+
+</style>

src/components/DataFilter/components/formfields/Datepicker/Datepicker.stories.ts

@@ -0,0 +1,69 @@
+import type { ArgType } from "@storybook/addons";
+import Datepicker from "./Datepicker.svelte";
+import DatepickerView from "./DatepickerView.svelte";
+import { EPickerType } from "./types";
+
+export default {
+  title: "Internal Documentation/Components/DataFilter/Formfields/Datepicker",
+  component: Datepicker,
+  parameters: {
+    // skip all screen test
+    creevey: {
+      skip: true,
+    },
+  },
+  argTypes: {
+    pickerType: {
+      options: Object.values(EPickerType),
+      control: {
+        type: "select",
+      },
+    },
+  },
+};
+
+const Template = (_args: ArgType) => {
+  const ret = ({ ...props }) => ({
+    Component: Datepicker,
+    props,
+  });
+  ret.args = _args;
+  return ret;
+};
+
+export const Default = Template({
+  label: "My Picker Label",
+  name: "my-picker-name",
+  pickerType: EPickerType.datetime,
+  value: "2000-01-13T11:50",
+});
+
+// used for snapshot tests
+const ShowCaseTemplate = (_args: ArgType) => {
+  const ret = ({ ...props }) => ({
+    Component: DatepickerView,
+    props,
+  });
+  ret.args = _args;
+  return ret;
+};
+
+export const Datetime = ShowCaseTemplate({
+  pickerType: EPickerType.datetime,
+  value: "2000-01-13T11:50",
+});
+
+export const Date = ShowCaseTemplate({
+  pickerType: EPickerType.date,
+  value: "2000-01-13",
+});
+
+export const Month = ShowCaseTemplate({
+  pickerType: EPickerType.month,
+  value: "2000-01",
+});
+
+export const Time = ShowCaseTemplate({
+  pickerType: EPickerType.time,
+  value: "11:50",
+});