chore(dependencies): Update all dependencies (#121)

* chore(dependencies): Update all dependencies

* Allow to pass type

* Update CI checks

* Update tsconfig.json

.babelrc

@@ -1,6 +1,3 @@
 {
-  "presets": [
-    "@babel/preset-env",
-    "@babel/preset-react"
-  ]
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
 }

.eslintrc.js

@@ -1,23 +1,23 @@
 module.exports = {
   env: { browser: true, jest: true },
-  extends: ['react'],
-  plugins: ['babel'],
+  extends: ["react", "plugin:storybook/recommended"],
+  plugins: ["babel"],
   rules: {
-    'no-use-before-define': 'off',
-    'indent': ['warn', 2],
-    'comma-dangle': [
-      'warn',
+    "no-use-before-define": "off",
+    indent: ["warn", 2],
+    "comma-dangle": [
+      "warn",
       {
-        arrays: 'always-multiline',
-        objects: 'always-multiline',
-        imports: 'always-multiline',
-        exports: 'always-multiline',
-        functions: 'always-multiline',
+        arrays: "always-multiline",
+        objects: "always-multiline",
+        imports: "always-multiline",
+        exports: "always-multiline",
+        functions: "always-multiline",
       },
     ],
-    'quotes': ['warn', 'single'],
-    'babel/semi': 1,
-    'object-shorthand': ['warn', 'always'],
-    'no-alert': 'off',
+    quotes: ["warn", "single"],
+    "babel/semi": 1,
+    "object-shorthand": ["warn", "always"],
+    "no-alert": "off",
   },
 };

.github/workflows/nodejs.yml

@@ -4,23 +4,22 @@ on: [push]
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
-        node-version: [10.x, 12.x]
+        node-version: [16.x, 18.x, 20.x, 21.x]
 
     steps:
-    - uses: actions/checkout@v1
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
-      with:
-        node-version: ${{ matrix.node-version }}
-    - name: npm install, build, and test
-      run: |
-        npm install
-        npm run build --if-present
-        npm test
-      env:
-        CI: true
+      - uses: actions/checkout@v1
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: npm install, build, and test
+        run: |
+          npm install
+          npm run build --if-present
+          npm test
+        env:
+          CI: true

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "tabWidth": 2,
+  "printWidth": 120
+}

.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

README.md

@@ -7,7 +7,7 @@ A simple package to display social login buttons using React.
 Buttons do not provide any social logic.
 They are only visual components listening to some events triggered by the user.
 
-![Social login buttons](https://raw.githubusercontent.com/MichalSzorad/react-social-login-buttons/develop/examples/simple/screenshot5.png)
+![Social login buttons](https://raw.githubusercontent.com/michaeljscript/react-social-login-buttons/develop/examples/simple/screenshot6.png)
 
 ## Install
 
@@ -132,43 +132,43 @@ We currently support just a few login buttons. Others will be implemented later.
 ## SlackLoginButton
 
 ```jsx
-<SlackLoginButton onClick={() => alert('Hello')} />
+<SlackLoginButton onClick={() => alert("Hello")} />
 ```
 
 ### OktaLoginButton
 
 ```jsx
-<OktaLoginButton onClick={() => alert('Hello')} />
+<OktaLoginButton onClick={() => alert("Hello")} />
 ```
 
 ### YahooLoginButton
 
 ```jsx
-<YahooLoginButton onClick={() => alert('Hello')} />
+<YahooLoginButton onClick={() => alert("Hello")} />
 ```
 
 ### ZaloLoginButton
 
 ```jsx
-<ZaloLoginButton onClick={() => alert('Hello')} />
+<ZaloLoginButton onClick={() => alert("Hello")} />
 ```
 
 ### TikTokLoginButton
 
 ```jsx
-<TikTokLoginButton onClick={() => alert('Hello')} />
+<TikTokLoginButton onClick={() => alert("Hello")} />
 ```
 
 ### MetamaskLoginButton
 
 ```jsx
-<MetamaskLoginButton onClick={() => alert('Hello')} />
+<MetamaskLoginButton onClick={() => alert("Hello")} />
 ```
 
 ### GitlabLoginButton
 
 ```jsx
-<GitlabLoginButton onClick={() => alert('Hello')} />
+<GitlabLoginButton onClick={() => alert("Hello")} />
 ```
 
 ## Create your own button
@@ -183,14 +183,14 @@ You can also pass a component to the icon prop.
 
 ```js
 import React from "react";
-import {createButton} from "react-social-login-buttons";
+import { createButton } from "react-social-login-buttons";
 
 const config = {
   text: "Log in with Facebook",
   icon: "facebook",
-  iconFormat: name => `fa fa-${name}`,
+  iconFormat: (name) => `fa fa-${name}`,
   style: { background: "#3b5998" },
-  activeStyle: { background: "#293e69" }
+  activeStyle: { background: "#293e69" },
 };
 /** My Facebook login button. */
 const MyFacebookLoginButton = createButton(config);
@@ -199,16 +199,14 @@ export default MyFacebookLoginButton;
 ```
 
 Config can also look like.
+
 ```js
-import svgIcon from "./my-svg.svg";
-import {createSvgIcon} from "react-social-login-buttons";
 
 const config = {
   text: "Log in with Facebook",
-  icon: createSvgIcon(svgIcon),
-  iconFormat: name => `fa fa-${name}`,
+  icon: MyIconComponent,
   style: { background: "#3b5998" },
-  activeStyle: { background: "#293e69" }
+  activeStyle: { background: "#293e69" },
 };
 ```
 
@@ -282,16 +280,17 @@ react-social-login-buttons is focused on speed and simplicity.
 
 ## Contribution
 
-I welcome issues and pull requests on https://github.com/MichalSzorad/react-social-login-buttons
+I welcome issues and pull requests on https://github.com/michaeljscript/react-social-login-buttons
 
 ## Thanks
 
 Special thanks to people creating awesome svg icons and teams
+
 - [Dinirio](https://www.dinirio.com)
 
 - [SimpleIcon](https://www.flaticon.com/authors/simpleicon)
 
-- [Simple Icons](https://github.com/simple-icons/simple-icons) 
+- [Simple Icons](https://github.com/simple-icons/simple-icons)
 
 - [iconmonstr](https://iconmonstr.com/amazon-1-svg/)
 

jest.config.js

@@ -0,0 +1,5 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+  preset: "ts-jest",
+  testEnvironment: "jsdom",
+};