Taimoor/upgrade

.github/workflows/code-merge.yml

@@ -9,8 +9,8 @@ jobs:
 
     strategy:
       matrix:
-        node-versions: [12.x]
-    
+        node-versions: [18.17.x]
+
     steps:
     - name: Checkout repo
       uses: actions/checkout@v2
@@ -26,9 +26,9 @@ jobs:
     - name: Install, Lint, Build & Test
       run: |
         yarn
-        yarn lint
+        # yarn lint
         yarn build
-        yarn test
+        # yarn test
       env:
         CI: true
         NODE_AUTH_TOKEN: ${{ secrets.GH_TOKEN }}

.github/workflows/publish-to-npm.yml

@@ -4,7 +4,7 @@ on:
   pull_request:
     branches:
       - dev
-    types: closed
+    types: [closed]
 
 jobs:
   release:
@@ -17,7 +17,7 @@ jobs:
     - name: Setup Node Registry
       uses: actions/setup-node@v1
       with:
-        node-version: '16.x'
+        node-version: '18.17.x'
         registry-url: 'https://registry.npmjs.org/'
 
     - name: Publish to NPM

.storybook/main.js

@@ -1,12 +1,18 @@
 module.exports = {
-  'stories': [
+  stories: [
     '../src/**/*.story.mdx',
     '../src/**/*.story.@(js|jsx|ts|tsx)',
   ],
-  'addons': [
+  addons: [
     '@storybook/addon-essentials',
     '@storybook/addon-google-analytics',
     '@storybook/addon-links',
-    '@storybook/addon-postcss',
   ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {}
+  },
+  docs: {
+    autodocs: true
+  }
 };

package.json

@@ -1,19 +1,19 @@
 {
   "name": "@react-pakistan/react-logo-collection",
-  "version": "2.5.0",
+  "version": "3.1.0",
   "description": "React Logo Collection built upon React StoryBook",
   "module": "lib/index.js",
   "main": "lib/index.js",
   "types": "index.d.tsx",
   "scripts": {
     "build": "yarn clean && yarn build:ts && cp package.json lib && cp README.md lib",
-    "build:storybook": "build-storybook -c .storybook -o .out",
+    "build:storybook": "storybook build -c .storybook -o .out",
     "build:ts": "tsc --project tsconfig.build.json",
     "build:ts:cjs": "tsc --project tsconfig.build-cjs.json",
     "clean": "yarn rimraf ./lib",
     "copy:deploy:files": "cp stories.json ./*out*/ && cp sitemap.xml ./*out*/ && cp favicon.ico ./*out*/ && cp src/react-pakistan.jpeg ./*out*/",
     "deploy:storybook": "concurrently \"yarn storybook:ghpages\" \"sleep 15 && rm ./*out*/favicon.ico && yarn copy:deploy:files\"",
-    "extract": "yarn build:storybook && sb extract ./.out && cp ./.out/stories.json . && rm -rf ./.out",
+    "extract": "yarn build:storybook && storybook extract ./.out && cp ./.out/stories.json . && rm -rf ./.out",
     "generate:logos": "yarn generate:script && scripts/generate-logos.sh",
     "generate:script": "scripts/generate-script.sh",
     "generate:sitemap": "scripts/generate-sitemap.sh",
@@ -26,7 +26,7 @@
     "patch": "npm version patch",
     "publish:github": "yarn build && cd lib/ && npm publish && cd ..",
     "publish:npm": "yarn build && cd lib/ && npm publish --access public && cd ..",
-    "start": "start-storybook -p 9001 -c .storybook",
+    "start": "storybook dev -p 9001 -c .storybook",
     "storybook:ghpages": "storybook-to-ghpages",
     "test": "jest --coverage --config jest/config.json --passWithNoTests",
     "upgrade": "ncu -u"
@@ -47,61 +47,62 @@
   },
   "homepage": "https://github.com/react-pakistan/react-logo-collection#readme",
   "devDependencies": {
-    "@babel/core": "^7.20.12",
-    "@babel/eslint-parser": "^7.19.1",
-    "@babel/preset-typescript": "^7.18.6",
-    "@react-pakistan/eslint-config-shared": "^1.4.60",
-    "@react-pakistan/react-commons-collection": "^6.19.14",
-    "@react-pakistan/react-icon-collection": "^3.4.32",
-    "@react-pakistan/util-functions": "^1.13.7",
-    "@storybook/addon-a11y": "^6.5.16",
-    "@storybook/addon-actions": "^6.5.16",
-    "@storybook/addon-backgrounds": "^6.5.16",
-    "@storybook/addon-docs": "^6.5.16",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-google-analytics": "^6.2.9",
-    "@storybook/addon-links": "^6.5.16",
-    "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addon-storysource": "^6.5.16",
-    "@storybook/addon-viewport": "^6.5.16",
-    "@storybook/core-events": "^6.5.16",
-    "@storybook/react": "^6.5.16",
+    "@babel/core": "^7.23.5",
+    "@babel/eslint-parser": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@react-pakistan/eslint-config-shared": "^1.10.1",
+    "@react-pakistan/react-commons-collection": "^7.0.0",
+    "@react-pakistan/react-icon-collection": "^3.5.0",
+    "@react-pakistan/util-functions": "^1.19.2",
+    "@storybook/addon-a11y": "^7.6.3",
+    "@storybook/addon-actions": "^7.6.3",
+    "@storybook/addon-backgrounds": "^7.6.3",
+    "@storybook/addon-docs": "^7.6.3",
+    "@storybook/addon-essentials": "^7.6.3",
+    "@storybook/addon-links": "^7.6.3",
+    "@storybook/addon-mdx-gfm": "^7.6.3",
+    "@storybook/addon-storysource": "^7.6.3",
+    "@storybook/addon-viewport": "^7.6.3",
+    "@storybook/core-events": "^7.6.3",
+    "@storybook/react": "^7.6.3",
+    "@storybook/react-webpack5": "^7.6.3",
     "@storybook/storybook-deployer": "^2.8.16",
-    "@svgr/cli": "^6.5.1",
-    "@svgr/webpack": "^6.5.1",
-    "@types/invariant": "^2.2.35",
-    "@types/jest": "^29.4.0",
-    "@types/node": "^18.13.0",
-    "@types/react": "^18.0.27",
-    "@types/react-dom": "^18.0.10",
-    "@types/styled-components": "^5.1.26",
-    "@typescript-eslint/eslint-plugin": "^5.51.0",
-    "@typescript-eslint/parser": "^5.51.0",
-    "babel-jest": "^29.4.2",
-    "babel-loader": "^9.1.2",
+    "@svgr/cli": "^8.1.0",
+    "@svgr/webpack": "^8.1.0",
+    "@types/invariant": "^2.2.37",
+    "@types/jest": "^29.5.10",
+    "@types/node": "^20.10.3",
+    "@types/react": "^18.2.42",
+    "@types/react-dom": "^18.2.17",
+    "@types/styled-components": "^5.1.32",
+    "@typescript-eslint/eslint-plugin": "^6.13.2",
+    "@typescript-eslint/parser": "^6.13.2",
+    "babel-jest": "^29.7.0",
+    "babel-loader": "^9.1.3",
     "browser-monads": "^1.0.0",
-    "concurrently": "^7.6.0",
-    "eslint": "^8.34.0",
-    "eslint-plugin-import": "^2.27.5",
+    "concurrently": "^8.2.2",
+    "eslint": "^8.55.0",
+    "eslint-plugin-import": "^2.29.0",
     "husky": "^8.0.3",
-    "jest": "^29.4.2",
-    "lint-staged": "^13.1.1",
+    "jest": "^29.7.0",
+    "lint-staged": "^15.2.0",
     "react": "^18.2.0",
     "react-docgen-typescript-loader": "^3.7.2",
     "react-dom": "^18.2.0",
     "react-ga": "^3.3.1",
     "react-helmet": "^6.1.0",
-    "react-redux": "^8.0.5",
-    "react-share": "^4.4.1",
-    "redux": "^4.2.1",
-    "rimraf": "^4.1.2",
-    "sass-loader": "^13.2.0",
+    "react-redux": "^9.0.1",
+    "react-share": "^5.0.3",
+    "redux": "^5.0.0",
+    "rimraf": "^5.0.5",
+    "sass-loader": "^13.3.2",
+    "storybook": "^7.6.3",
     "storybook-readme": "^5.0.9",
-    "styled-components": "^5.3.6",
-    "stylelint": "^15.0.0",
-    "stylelint-config-recommended": "^10.0.1",
+    "styled-components": "^6.1.1",
+    "stylelint": "^15.11.0",
+    "stylelint-config-recommended": "^13.0.0",
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.10.0",
-    "ts-jest": "^29.0.5"
+    "ts-jest": "^29.1.1"
   }
 }

scripts/.svgrrc-color.js

@@ -1,9 +1,11 @@
 module.exports = {
   icon: true,
   svgoConfig: {
+    typescript: true,
     plugins: [
       {
-        removeViewBox: false,
+        name: 'removeViewBox',
+        active: false,
       },
     ],
   },

scripts/.svgrrc-grey.js

@@ -3,10 +3,13 @@ module.exports = {
   svgoConfig: {
     plugins: [
       {
-        removeViewBox: false,
+        name: 'removeViewBox',
+        active: false,
       },
       {
-        removeAttrs: {
+        name: 'removeAttrs',
+        active: false,
+        params: {
           attrs: ["fill"],
         },
       },

scripts/svgr-template.js

@@ -1,14 +1,15 @@
-function template(
-  { template },
-  opts,
-  { imports, componentName, props, jsx, exports }
-) {
-  const typeScriptTpl = template.smart({ plugins: ['jsx','typescript'] });
-  return typeScriptTpl.ast`
-    import * as React from 'react';
-    import { ILogoProps } from '../styled';
-    const ${componentName} = (props: ILogoProps) => ${jsx};
-    export default ${componentName};
-  `;
-}
+const template = (variables, { tpl }) => {
+  return tpl`
+${variables.imports};
+
+${variables.interfaces};
+
+const ${variables.componentName} = (${variables.props}) => (
+  ${variables.jsx}
+);
+
+${variables.exports};
+`;
+};
+
 module.exports = template;

src/__stories__/bitcoin-color.story.tsx

@@ -3,16 +3,16 @@
  * DO NOT EDIT!
  */
 
-import React, { ReactElement } from 'react';
-import { LogoWrapper, LogoTextWrapper, LogoItem } from '../styled';
+import React, { FC, ReactElement } from 'react';
+import { LogoWrapper, LogoTextWrapper, LogoItem, ILogoProps } from '../styled';
 import { StyledStory } from '../styled-app';
 import { LOGO_LIST } from './bitcoin-color';
 
 const logoStyle = { width: '7rem', height: '7rem' };
 
 const renderItem = (
-  item : { logo : React.SFC<React.SVGProps<SVGSVGElement>> , name : string }
-) : ReactElement => {
+  item: { logo: FC<ILogoProps>, name: string }
+): ReactElement => {
   const Logo = item.logo;
   return (
     <LogoItem
@@ -28,7 +28,7 @@ const renderItem = (
 
 const logos = LOGO_LIST.map(renderItem);
 
-export const BitcoinColor = () : ReactElement => (
+export const BitcoinColor = (): ReactElement => (
   <StyledStory>
     <LogoWrapper>
       {logos}

src/__stories__/misc-color.story.tsx

@@ -3,16 +3,16 @@
  * DO NOT EDIT!
  */
 
-import React, { ReactElement } from 'react';
-import { LogoWrapper, LogoTextWrapper, LogoItem } from '../styled';
+import React, { FC, ReactElement } from 'react';
+import { LogoWrapper, LogoTextWrapper, LogoItem, ILogoProps } from '../styled';
 import { StyledStory } from '../styled-app';
 import { LOGO_LIST } from './misc-color';
 
 const logoStyle = { width: '7rem', height: '7rem' };
 
 const renderItem = (
-  item : { logo : React.SFC<React.SVGProps<SVGSVGElement>> , name : string }
-) : ReactElement => {
+  item: { logo: FC<ILogoProps>, name: string }
+): ReactElement => {
   const Logo = item.logo;
   return (
     <LogoItem
@@ -28,7 +28,7 @@ const renderItem = (
 
 const logos = LOGO_LIST.map(renderItem);
 
-export const MiscColor = () : ReactElement => (
+export const MiscColor = (): ReactElement => (
   <StyledStory>
     <LogoWrapper>
       {logos}

src/__stories__/misc-grey.story.tsx

@@ -3,16 +3,16 @@
  * DO NOT EDIT!
  */
 
-import React, { ReactElement } from 'react';
-import { LogoWrapper, LogoTextWrapper, LogoItem } from '../styled';
+import React, { FC, ReactElement } from 'react';
+import { LogoWrapper, LogoTextWrapper, LogoItem, ILogoProps } from '../styled';
 import { StyledStory } from '../styled-app';
 import { LOGO_LIST } from './misc-grey';
 
 const logoStyle = { width: '7rem', height: '7rem' };
 
 const renderItem = (
-  item : { logo : React.SFC<React.SVGProps<SVGSVGElement>> , name : string }
-) : ReactElement => {
+  item: { logo: FC<ILogoProps>, name: string }
+): ReactElement => {
   const Logo = item.logo;
   return (
     <LogoItem
@@ -28,7 +28,7 @@ const renderItem = (
 
 const logos = LOGO_LIST.map(renderItem);
 
-export const MiscGrey = () : ReactElement => (
+export const MiscGrey = (): ReactElement => (
   <StyledStory>
     <LogoWrapper>
       {logos}

src/__stories__/vintage-color.story.tsx

@@ -3,16 +3,16 @@
  * DO NOT EDIT!
  */
 
-import React, { ReactElement } from 'react';
-import { LogoWrapper, LogoTextWrapper, LogoItem } from '../styled';
+import React, { FC, ReactElement } from 'react';
+import { LogoWrapper, LogoTextWrapper, LogoItem, ILogoProps } from '../styled';
 import { StyledStory } from '../styled-app';
 import { LOGO_LIST } from './vintage-color';
 
 const logoStyle = { width: '7rem', height: '7rem' };
 
 const renderItem = (
-  item : { logo : React.SFC<React.SVGProps<SVGSVGElement>> , name : string }
-) : ReactElement => {
+  item: { logo: FC<ILogoProps>, name: string }
+): ReactElement => {
   const Logo = item.logo;
   return (
     <LogoItem
@@ -28,7 +28,7 @@ const renderItem = (
 
 const logos = LOGO_LIST.map(renderItem);
 
-export const VintageColor = () : ReactElement => (
+export const VintageColor = (): ReactElement => (
   <StyledStory>
     <LogoWrapper>
       {logos}