Merge pull request #170 from AppQuality/develop

Remove mobiscroll

package.json

@@ -2,7 +2,6 @@
   "name": "@appquality/appquality-design-system",
   "version": "1.0.68",
   "dependencies": {
-    "@appquality/mobiscroll": "^5.10.1",
     "formik": "^2.2.9",
     "react-bootstrap-icons": "^1.5.0",
     "react-cool-onclickoutside": "^1.6.2",

src/index.tsx

@@ -4,52 +4,61 @@ import GlobalStyle from "./shared/globalStyle";
 // import * as animation from './shared/animation';
 import * as icons from "react-bootstrap-icons";
 
-import * as TableType from "./stories/table/_types";
+import { FieldProps, Form, Formik, Field as FormikField } from "formik";
+import { ThemeProvider } from "styled-components";
+import * as DatepickerType from "./stories/form/datepicker/_types";
 import * as SelectType from "./stories/select/_types";
 import * as SidebarType from "./stories/sidebar/SidebarProps";
-import * as DatepickerType from "./stories/form/datepicker/_types";
-import { DatepickerGlobalStyle } from "./stories/form/datepicker/_style";
-import { ThemeProvider } from "styled-components";
-import { Formik, Form, FieldProps, Field as FormikField } from "formik";
+import * as TableType from "./stories/table/_types";
 import { aqBootstrapTheme } from "./stories/theme/defaultTheme";
 
 // import original module declarations
 import "styled-components";
 
 //
+export {
+  COLORS,
+  DatepickerType,
+  Form,
+  Formik,
+  FormikField,
+  GlobalStyle,
+  SelectType,
+  SidebarType,
+  TableType,
+  ThemeProvider,
+  aqBootstrapTheme,
+  icons,
+};
 export type { FieldProps };
-export { FormikField, Formik, Form, DatepickerGlobalStyle };
-export { TableType, SelectType, SidebarType, DatepickerType, ThemeProvider };
-export { COLORS, GlobalStyle, icons, aqBootstrapTheme };
 
 declare module "styled-components" {
   type Theme = typeof aqBootstrapTheme;
   export interface DefaultTheme extends Theme {}
 }
-export * from "./stories/form/datepicker/Datepicker";
+export * from "./stories/DateInput";
+export * from "./stories/Steps/Steps";
+export * from "./stories/accordion/Accordion";
 export * from "./stories/button/Button";
 export * from "./stories/card/Card";
+export * from "./stories/carousel/Carousel";
+export * from "./stories/dropzone/Dropzone";
 export * from "./stories/form/Form";
+export * from "./stories/form/datepicker/Datepicker";
+export * from "./stories/form/textareaField/TextareaField";
 export * from "./stories/header/Header";
 export * from "./stories/layout/Layout";
 export * from "./stories/modal/Modal";
+export * from "./stories/pagetitle/PageTitle";
 export * from "./stories/pagination/Pagination";
+export * from "./stories/pill/Pill";
+export * from "./stories/placesAutocomplete/PlacesAutocomplete";
+export * from "./stories/progress-bar/ProgressBar";
 export * from "./stories/select/Select";
 export * from "./stories/sidebar/Sidebar";
 export * from "./stories/skeleton/Skeleton";
 export * from "./stories/spinner/Spinner";
 export * from "./stories/table/Table";
-export * from "./stories/typography/Typography";
-export * from "./stories/pagetitle/PageTitle";
-export * from "./stories/pagetitle/PageTitle";
 export * from "./stories/tabs/Tabs";
-export * from "./stories/accordion/Accordion";
-export * from "./stories/pill/Pill";
-export * from "./stories/carousel/Carousel";
-export * from "./stories/progress-bar/ProgressBar";
-export * from "./stories/Steps/Steps";
 export * from "./stories/toastr/Toastr";
-export * from "./stories/placesAutocomplete/PlacesAutocomplete";
-export * from "./stories/dropzone/Dropzone";
-export * from "./stories/form/textareaField/TextareaField";
-export * from "./stories/DateInput";
+export * from "./stories/typography/Typography";

src/stories/DateInput/DateInput.stories.tsx

@@ -1,19 +1,45 @@
+import { Meta, Story } from "@storybook/react";
+import { useState } from "react";
 import { DateInput } from ".";
-import { Story, Meta } from "@storybook/react";
-import { DatepickerGlobalStyle } from "./_style";
+import { ErrorMessageWrapper } from "../form/Form";
 
 export default {
   title: "Inputs/DateInput",
   component: DateInput,
 } as Meta;
 
-const DatepickerTemplate: Story = (args) => (
-  <>
-    <DatepickerGlobalStyle />
-    <h2>Seleziona una data nel formato gg-mm-aaaa</h2>
-    <DateInput {...args} id="test1" i18n={{ placeholder: "28-03-2013" }} />
-  </>
-);
+const DatepickerTemplate: Story = (args) => {
+  function getEighteenYearsAgo() {
+    const date = new Date();
+    date.setFullYear(date.getFullYear() - 18);
+
+    return date;
+  }
+  const [value, setValue] = useState("");
+  const [isInvalid, setIsInvalid] = useState(false);
+  return (
+    <>
+      <label htmlFor="test1">
+        Birthdate - min 18 years old (example events in console log)
+      </label>
+      <DateInput
+        {...args}
+        isInvalid={isInvalid}
+        id="test1"
+        value={value}
+        minDate={getEighteenYearsAgo()}
+        onChange={(e) => setValue(e.target.value)}
+        onBlur={(e) => {
+          setIsInvalid(!value);
+        }}
+      />
+      {isInvalid && (
+        <ErrorMessageWrapper>birth date is mandatory</ErrorMessageWrapper>
+      )}
+      value: {value}
+    </>
+  );
+};
 export const DatepickerInput = DatepickerTemplate.bind({});
 DatepickerInput.args = {
   onChange: ({ value }: { value: Date }) => {