Implement prerequirements for publishing (GH-3)

.github/workflows/publish.yml

@@ -0,0 +1,28 @@
+name: Publish to NPM
+
+on:
+  release:
+    types: [ published ]
+
+jobs:
+  deploy:
+
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+          registry-url: https://registry.npmjs.org/
+
+      - name: Install dependencies
+        run: yarn && yarn install
+
+      - name: Build and publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: yarn build && yarn publish

.github/workflows/tests.yml

@@ -0,0 +1,44 @@
+name: tests
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  tests:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [ 16.x, 18.14.2, 20.x ]
+        environment: [ jest, mui4, mui5, joy ]
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Set up Python
+        uses: actions/setup-python@v2
+
+      - name: Install Tox
+        run: |
+          pip install --upgrade pip
+          pip install tox tox-gh-actions
+
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          registry-url: https://registry.npmjs.org/
+
+      - name: Build and Package
+        run: |
+          npm install
+          npm run build
+          npm pack
+
+      - name: Run Tox Jest
+        run: tox -e ${{ matrix.environment }}

.npmignore

@@ -1 +1,3 @@
-examples
+examples
+scripts
+tests

README.md

@@ -1,15 +1,94 @@
-# mui-phone-input
+# MUI Phone Input <img src="https://github.com/typesnippet.png" align="right" height="64" />
 
-Advanced, highly customizable phone input component for Material UI.
+[![npm](https://img.shields.io/npm/v/mui-phone-input)](https://www.npmjs.com/package/mui-phone-input)
+[![mui](https://img.shields.io/badge/Mui%204%20%7C%20Mui%205%20%7C%20Joy-blue)](https://mui.com/)
+[![types](https://img.shields.io/npm/types/mui-phone-input)](https://www.npmjs.com/package/mui-phone-input)
+[![License](https://img.shields.io/npm/l/mui-phone-input)](https://github.com/typesnippet/mui-phone-input/blob/master/LICENSE)
+[![Tests](https://github.com/typesnippet/mui-phone-input/actions/workflows/tests.yml/badge.svg)](https://github.com/typesnippet/mui-phone-input/actions/workflows/tests.yml)
 
-## Roadmap
+Advanced phone input component for Material UI that leverages the [react-phone-hooks](https://www.npmjs.com/package/react-phone-hooks) supporting all countries. The package is compatible with [@material-ui/core](https://v4.mui.com/), [@mui/material](https://mui.com/), [@mui/base](https://mui.com/base-ui/getting-started/), [@mui/system](https://mui.com/system/getting-started/) and [@mui/joy](https://mui.com/joy-ui/getting-started/) distributions. It provides built-in support for area codes and strict validation.
 
-- [ ] Segregate the core input component into a separate package (react-phone-hooks)
-- [x] Create a new package for the Material UI component under the new organization
-- [ ] Make mui-phone-input and antd-phone-input depend on the core package
+## Value
 
-## TODO
+The value of the component is an object containing the parts of the phone number. This format of value gives a wide range of opportunities for handling the data in your desired way.
 
-- [x] Investigate the differences between the Material UI, Joy UI, Base UI, MUI System, MUI X and MUI Toolpad componets.
-- [x] Depending on the results of the investigation, create basic examples of the group input component.
-- [x] Configure TS and convert antd-phone-input to MUI.
+```javascript
+{
+  countryCode: 1,
+  areaCode: "702",
+  phoneNumber: "1234567",
+  isoCode: "us",
+  valid: function valid(strict)
+}
+```
+
+## Validation
+
+The validation is checked by the `valid` function of the value object that returns a boolean value. An example with the [react-hook-form](https://www.npmjs.com/package/react-hook-form) is shown below:
+
+```javascript
+import {useMemo, useState} from "react";
+import {useForm} from "react-hook-form";
+import PhoneInput from "mui-phone-input";
+import {checkValidity, parsePhoneNumber} from "react-phone-hooks";
+
+const Demo = () => {
+  const {register, handleSubmit} = useForm();
+  const [value, setValue] = useState({});
+
+  const phoneProps = register("phone", {
+    validate: (value: any) => checkValidity(parsePhoneNumber(value)),
+  })
+
+  const onChange = async (value: any) => {
+    await phoneProps.onChange({target: {value, name: phoneProps.name}});
+    setValue(value);
+  }
+
+  const error = useMemo(() => value.valid && !value.valid(), [value]);
+
+  return (
+    <form onSubmit={handleSubmit(console.log)}>
+      <PhoneInput
+        enableSearch
+        error={error}
+        {...phoneProps}
+        variant="filled"
+        onChange={onChange}
+        searchVariant="standard"
+      />
+      <button type="submit">Submit</button>
+    </form>
+  );
+}
+
+export default Demo;
+```
+
+The `valid` function primarily checks if a phone number has a length appropriate for its specified country. In addition, a more comprehensive validation can be performed, including verifying the dial and area codes' accuracy for the selected country. To activate the strict validation, pass `true` as the first argument to the `valid` function.
+
+## Props
+
+Apart from the phone-specific properties described below, all [Input](https://mui.com/material-ui/api/input/#props) and [TextField](https://mui.com/material-ui/api/text-field/#props) properties supported by the used Material distribution can be applied to the phone input component.
+
+| Property           | Description                                                                                                                   | Type                      |
+|--------------------|-------------------------------------------------------------------------------------------------------------------------------|---------------------------|
+| value              | An object containing a parsed phone number or the raw number.                                                                 | [object](#value) / string |
+| country            | Country code to be selected by default. By default, it will show the flag of the user's country.                              | string                    |
+| enableSearch       | Enables search in the country selection dropdown menu. Default value is `false`.                                              | boolean                   |
+| searchNotFound     | The value is shown if `enableSearch` is `true` and the query does not match any country. Default value is `No country found`. | string                    |
+| searchPlaceholder  | The value is shown if `enableSearch` is `true`. Default value is `Search country`.                                            | string                    |
+| disableDropdown    | Disables the manual country selection through the dropdown menu.                                                              | boolean                   |
+| onlyCountries      | Country codes to be included in the list. E.g. `onlyCountries={['us', 'ca', 'uk']}`.                                          | string[]                  |
+| excludeCountries   | Country codes to be excluded from the list of countries. E.g. `excludeCountries={['us', 'ca', 'uk']}`.                        | string[]                  |
+| preferredCountries | Country codes to be at the top of the list. E.g. `preferredCountries={['us', 'ca', 'uk']}`.                                   | string[]                  |
+| onChange           | The only difference from the default `onChange` is that value comes first.                                                    | function(value, event)    |
+| onMount            | The callback is triggered once the component gets mounted.                                                                    | function(value)           |
+
+## Contribute
+
+Any contribution is welcome. Don't hesitate to open an issue or discussion if you have questions about your project's usage and integration. For ideas or suggestions, please open a pull request. Your name will shine on our contributors' list. Be proud of what you build!
+
+## License
+
+Copyright (C) 2023 Artyom Vancyan. [MIT](https://github.com/typesnippet/mui-phone-input/blob/master/LICENSE)

examples/joy/package.json

@@ -9,6 +9,7 @@
     "@mui/material": "^5.14.18",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
+    "mui-phone-input": "file:../../mui-phone-input-0.0.0-reserve.tgz",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1",
@@ -35,4 +36,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

examples/mui/v4/package.json

@@ -6,10 +6,11 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@material-ui/core": "^4.12.4",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "mui-phone-input": "file:../../../mui-phone-input-0.0.0-reserve.tgz",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
     "react-scripts": "^5.0.1",
     "typescript": "^4.9.5"
   },
@@ -34,4 +35,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

examples/mui/v4/src/Demo.tsx

@@ -2,7 +2,7 @@ import {useCallback, useMemo, useState} from "react";
 import {Button, Container, CssBaseline} from "@material-ui/core";
 import {createTheme, ThemeProvider,} from "@material-ui/core/styles";
 
-import CustomInput from "./CustomInput";
+import PhoneInput from "mui-phone-input";
 
 const Demo = () => {
     const [type, setType] = useState("dark");
@@ -16,9 +16,9 @@ const Demo = () => {
             <CssBaseline/>
             <Container>
                 <div style={{display: "flex", alignItems: "flex-end", gap: 20}}>
-                    <CustomInput variant="filled"/>
-                    <CustomInput variant="standard"/>
-                    <CustomInput variant="outlined"/>
+                    <PhoneInput variant="filled"/>
+                    <PhoneInput variant="standard"/>
+                    <PhoneInput variant="outlined"/>
                 </div>
                 <Button onClick={handleThemeChange}>
                     Change Theme

examples/mui/v4/src/index.tsx

@@ -1,7 +1,5 @@
-import ReactDOM from "react-dom/client";
+import ReactDOM from "react-dom";
 
 import Demo from "./Demo";
 
-const elem = document.getElementById("root");
-const root = ReactDOM.createRoot(elem as Element);
-root.render(<Demo/>);
+ReactDOM.render(<Demo/>, document.getElementById("root") as Element);

examples/mui/v5/package.json

@@ -8,6 +8,7 @@
     "@mui/material": "^5.14.18",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
+    "mui-phone-input": "file:../../../mui-phone-input-0.0.0-reserve.tgz",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1",
@@ -34,4 +35,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

examples/mui/v5/src/Demo.tsx

@@ -2,7 +2,7 @@ import {useCallback, useMemo, useState} from "react";
 import {Button, Container, CssBaseline} from "@mui/material";
 import {createTheme, ThemeProvider} from "@mui/material/styles";
 
-import CustomInput from "./CustomInput";
+import PhoneInput from "mui-phone-input";
 
 const Demo = () => {
     const [mode, setMode] = useState("dark");
@@ -16,8 +16,8 @@ const Demo = () => {
             <CssBaseline/>
             <Container>
                 <div style={{display: "flex", alignItems: "flex-end", gap: 20}}>
-                    <CustomInput variant="standard"/>
-                    <CustomInput variant="outlined"/>
+                    <PhoneInput variant="standard"/>
+                    <PhoneInput variant="outlined"/>
                 </div>
                 <Button onClick={handleThemeChange}>
                     Change Theme

jestconfig.json

@@ -0,0 +1,18 @@
+{
+  "transform": {
+    "^.+\\.tsx?$": "ts-jest"
+  },
+  "testRegex": "/tests/.*\\.test\\.(tsx?)$",
+  "modulePathIgnorePatterns": [
+    "<rootDir>/examples"
+  ],
+  "moduleFileExtensions": [
+    "ts",
+    "tsx",
+    "js",
+    "jsx",
+    "json",
+    "node"
+  ],
+  "testEnvironment": "jsdom"
+}