Merge pull request #190 from deskpro/upgrade-deps

Upgrade dependencies
deskpro · Dec 4, 2024 · 95fa419 · 95fa419
2 parents 6488217 + be704a5
commit 95fa419
Show file tree

Hide file tree

Showing 5 changed files with 2,248 additions and 4,514 deletions.
diff --git a/packages/components/.storybook/main.ts b/packages/components/.storybook/main.ts
@@ -11,18 +11,24 @@ function getAbsolutePath(value: string): any {
 }
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+
   addons: [
     getAbsolutePath("@storybook/addon-links"),
     getAbsolutePath("@storybook/addon-essentials"),
     getAbsolutePath("@storybook/addon-onboarding"),
     getAbsolutePath("@storybook/addon-interactions"),
+    "@chromatic-com/storybook"
   ],
+
   framework: {
     name: getAbsolutePath("@storybook/react-vite"),
     options: {},
   },
-  docs: {
-    autodocs: "tag",
-  },
+
+  docs: {},
+
+  typescript: {
+    reactDocgen: "react-docgen-typescript"
+  }
 };
 export default config;
diff --git a/packages/components/.storybook/preview.ts b/packages/components/.storybook/preview.ts
@@ -3,7 +3,6 @@ import '@deskpro/portal-components/dist/style.css';
 
 const preview: Preview = {
   parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {
       matchers: {
         color: /(background|color)$/i,

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -13,7 +13,7 @@
     "@deskpro/js-utils": "1.0.13",
     "@emotion/css": "^11.7.1",
     "@emotion/react": "^11.8.2",
-    "accessible-autocomplete": "2.0.4",
+    "accessible-autocomplete": "3.0.1",
     "classnames": "^2.3.2",
     "date-fns": "2.28.0",
     "dompurify": "2.5.4",
@@ -27,7 +27,6 @@
     "react-textarea-autosize": "8.3.3",
     "style": "^0.0.3",
     "url-polyfill": "^1.0.13",
-    "world-countries": "^4.0.0",
     "yup": "^1.2.0"
   },
   "scripts": {
@@ -51,17 +50,18 @@
   "license": "BSD-3-Clause",
   "devDependencies": {
     "@alexlafroscia/postcss-color-mod-function": "^4.0.0",
+    "@chromatic-com/storybook": "^1",
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-commonjs": "^21.0.2",
     "@rollup/plugin-node-resolve": "^13.1.3",
-    "@storybook/addon-essentials": "^7.6.7",
-    "@storybook/addon-interactions": "^7.6.7",
-    "@storybook/addon-links": "^7.6.7",
-    "@storybook/addon-onboarding": "^1.0.10",
-    "@storybook/blocks": "^7.6.7",
-    "@storybook/react": "^7.6.7",
-    "@storybook/react-vite": "^7.6.7",
-    "@storybook/test": "^7.6.7",
+    "@storybook/addon-essentials": "^8.3.1",
+    "@storybook/addon-interactions": "^8.3.1",
+    "@storybook/addon-links": "^8.3.1",
+    "@storybook/addon-onboarding": "^8.3.1",
+    "@storybook/blocks": "^8.3.1",
+    "@storybook/react": "^8.3.1",
+    "@storybook/react-vite": "^8.3.1",
+    "@storybook/test": "^8.3.1",
     "@svgr/rollup": "^6.2.1",
     "@testing-library/react": "^12.1.4",
     "@types/dompurify": "^2.3.3",
@@ -92,7 +92,7 @@
     "rollup": "^2.70.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-typescript2": "^0.31.2",
-    "storybook": "^7.6.7",
+    "storybook": "^8.3.1",
     "ts-jest": "^27.1.3",
     "typescript": "^4.6.2",
     "vite": "^5.0.10",

diff --git a/packages/components/src/Components/Inputs/Tel.tsx b/packages/components/src/Components/Inputs/Tel.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import ReactSelect from 'react-select';
-import * as worldCountries from 'world-countries/dist/countries.json';
 import classNames from 'classnames';
 import { AsYouType, CountryCode } from 'libphonenumber-js';
 import Field, { FieldProps, FieldState } from '../Field';
@@ -21,8 +20,6 @@ interface TelState extends FieldState {
 }
 
 class Tel extends Field<TelProps, TelState> {
-  private countries;
-
   static defaultProps = {
     ...Field.defaultProps,
     excludeCountries:   [],
@@ -35,105 +32,10 @@ class Tel extends Field<TelProps, TelState> {
   constructor(props) {
     super(props);
     this.type = 'tel';
-    if (props.withIndicator) {
-      this.className = 'dp-pc_field--tel';
-      this.state = {
-        country:        null,
-        indicator:      '',
-        nationalNumber: '',
-      };
-    }
   }
 
-  handleIndicator = (value) => {
-    this.setState({
-      country:   value.country,
-      indicator: value.value
-    });
-  };
-
-  handleNationalNumber = (e) => {
-    const formatted = new AsYouType(this.state.country).input(`+${this.state.indicator}${e.target.value}`);
-    const regex = new RegExp(`^\\+${this.state.indicator}\\s*`);
-    const nationalNumber = formatted.replace(regex, '');
-    this.setState({
-      nationalNumber
-    });
-  };
-
-  static filterIndicator(value, filter) {
-    const nameRegex = new RegExp(filter, 'i');
-    return value.data.countryName.match(nameRegex) || value.data.value.match(filter);
-  }
-
-  loadCountries = () => {
-    const { onlyCountries, excludeCountries } = this.props;
-    if (!this.countries) {
-      this.countries = [];
-      Array.from(worldCountries)
-        .filter((country) => {
-          if (onlyCountries.length) {
-            return onlyCountries.includes(country.cca2);
-          }
-          if (excludeCountries.length) {
-            return !excludeCountries.includes(country.cca2);
-          }
-          return true;
-        })
-        .forEach((country) => {
-          country.idd.suffixes.forEach((code) => {
-            this.countries.push({
-              value:   code,
-              country: country.cca2,
-              label:   (
-                <span>(+{code})
-                  <span className="react-select__description">
-                    {country.flag} {country.name.common}
-                  </span>
-                </span>),
-              countryName: country.name.common
-            });
-          });
-        });
-    }
-    return this.countries;
-  };
-
   renderField = ({ form }) => {
-    const {
-      name,
-      className,
-      placeholder,
-    } = this.props;
-    if (!this.props.withIndicator) {
-      return super.renderField(form);
-    }
-    return <>
-      <ReactSelect
-        key="indicator"
-        value={
-          this.loadCountries().find(indicator =>
-            indicator.country === this.state.country
-            && indicator.value === this.state.indicator)}
-        name={name}
-        isClearable={false}
-        filterOption={Tel.filterIndicator}
-        components={{ SelectContainer }}
-        onChange={this.handleIndicator}
-        onBlur={() => form.setFieldTouched(name, true)}
-        options={this.loadCountries()}
-        classNamePrefix="react-select"
-        placeholder="(1234)"
-      />,
-      <input
-        key="national_number"
-        type="tel"
-        value={this.state.nationalNumber}
-        onChange={this.handleNationalNumber}
-        placeholder={placeholder}
-        className={classNames('dp-pc_input', className)}
-      />
-    </>;
+    return super.renderField(form);
   }
 }