search

CouncilDataProject / cdp-frontend

Component library and web app used by CDP instances.
https://councildataproject.org/cdp-frontend
Mozilla Public License 2.0
17 stars 27 forks source link

Clean styling imports #115

Closed tohuynh closed 2 years ago

tohuynh commented 2 years ago

Feature Description

The stye imports in particular the Mozilla protocol styles get reused by many components should be imported in one place.

Use Case

The code would be easier to change if the style imports that are used by multiple components are in one place.

Solution

styles

These should import in only two places

ZaidKhan144 commented 2 years ago

@tohuynh Could you assign me, please? I can do this.

tohuynh commented 2 years ago

@ZaidKhan144 Yes, of course.

ZaidKhan144 commented 2 years ago

@tohuynh While installing the project dependencies by npm i I was running into the below errors

npm ERR! code ENOTFOUND
npm ERR! syscall getaddrinfo
npm ERR! errno ENOTFOUND
npm ERR! network request to https://artifactory.corp.alleninstitute.org:443/artifactory/api/npm/npm-virtual/yn/-/yn-3.1.1.tgz failed, reason: getaddrinfo ENOTFOUND artifactory.corp.alleninstitute.org
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly.  See: 'npm help config'

Could you possibly know what the workaround could be?

Please let me know if you need any more information.

tohuynh commented 2 years ago

Sorry, I don't know a workaround. It's a network connectivity issue. It's possible to try npm i again or with a different network setting?

evamaxfield commented 2 years ago

Should be able to simply delete the package-lock.json file and reinstall.

evamaxfield commented 2 years ago

I think this is slightly related to #111. @nickmagruder any chance on a PR to address these various annoyances (this and #111)?

tohuynh commented 2 years ago 
npm ERR! network request to https://artifactory.corp.alleninstitute.org:443/artifactory/api/npm/npm-virtual/yn/-/yn-3.1.1.tgz failed, reason: getaddrinfo ENOTFOUND artifactory.corp.alleninstitute.org

@JacksonMaxfield , does this mean the Allen API endpoint was down or something?

evamaxfield commented 2 years ago 
npm ERR! network request to https://artifactory.corp.alleninstitute.org:443/artifactory/api/npm/npm-virtual/yn/-/yn-3.1.1.tgz failed, reason: getaddrinfo ENOTFOUND artifactory.corp.alleninstitute.org

@JacksonMaxfield , does this mean the Allen API endpoint was down or something?

Allen endpoints are closed to the public. You must be on Allen VPN to access them. So I think I must have committed to the frontend while on the Allen VPN a long time ago...

tohuynh commented 2 years ago

But I and GitHub can run npm i no problem ?

evamaxfield commented 2 years ago

But I and GitHub can run npm i no problem ?

:shrug: :shrug: :shrug: I just remember that we have solved this problem in the past by deleting the package-lock.json

tohuynh commented 2 years ago

https://artifactory.corp.alleninstitute.org:443/artifactory/api/npm/npm-virtual/yn/-/yn-3.1.1.tgz e.g. is in the package-lock.json. Would deleting package-lock.json and running npm i again to create a new package-lock.json remove any mention of Allen?

evamaxfield commented 2 years ago

https://artifactory.corp.alleninstitute.org:443/artifactory/api/npm/npm-virtual/yn/-/yn-3.1.1.tgz e.g. is in the package-lock.json. Would deleting package-lock.json and running npm i again to create a new package-lock.json remove any mention of Allen?

I believe so.

tohuynh commented 2 years ago

Maybe npm ci could help?

"use npm ci instead of npm install when building your applications both on your CI and your local development machine"

https://stackoverflow.com/questions/44206782/do-i-commit-the-package-lock-json-file-created-by-npm-5

ZaidKhan144 commented 2 years ago

@JacksonMaxfield After deleting package-lock.json and reinstalling again, I'm getting the dependency tree error.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: @councildataproject/cdp-frontend@0.5.0
npm ERR! Found: react@16.14.0
npm ERR! node_modules/react
npm ERR!   dev react@"^16.14.0" from the root project
npm ERR!   peer react@">=16.9.0" from @testing-library/react-hooks@3.7.0
npm ERR!   node_modules/@testing-library/react-hooks
npm ERR!     dev @testing-library/react-hooks@"^3.2.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"17.0.2" from react-test-renderer@17.0.2
npm ERR! node_modules/react-test-renderer
npm ERR!   peer react-test-renderer@">=16.9.0" from @testing-library/react-hooks@3.7.0
npm ERR!   node_modules/@testing-library/react-hooks
npm ERR!     dev @testing-library/react-hooks@"^3.2.1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
ZaidKhan144 commented 2 years ago

@tohuynh I tried npm ci as well, but after a while, I ran into 

npm ERR! code FETCH_ERROR
npm ERR! errno FETCH_ERROR
npm ERR! network timeout at: https://artifactory.corp.alleninstitute.org:443/artifactory/api/npm/npm-virtual/yn/-/yn-3.1.1.tgz
evamaxfield commented 2 years ago

Yep, so after removing the package-lock.json, this becomes the same issue as #111.

evamaxfield commented 2 years ago

Sorry for the annoying install process @ZaidKhan144... We will try to figure out what a solution is.

ZaidKhan144 commented 2 years ago

@JacksonMaxfield No worries at all!

nickmagruder commented 2 years ago

Yeah this looks very similar to the issues I was running into. I haven't had a chance to try again, updating some of the dependencies to new versions seemed to help (I was able to npm install everything without dependency issues), but I couldn't get npm run start or npm run storybook to work. Here are my package.json versions:

  "devDependencies": {
    "@babel/cli": "^7.13.10",
    "@babel/core": "^7.13.10",
    "@babel/plugin-proposal-class-properties": "^7.14.5",
    "@babel/preset-env": "^7.13.10",
    "@babel/preset-react": "^7.12.13",
    "@babel/preset-typescript": "^7.13.0",
    "@emotion/core": "^10.0.28",
    "@storybook/addon-a11y": "^6.3.9",
    "@storybook/addon-actions": "^6.3.12",
    "@storybook/addon-essentials": "^6.3.9",
    "@storybook/addon-links": "^6.3.9",
    "@storybook/react": "^6.3.9",
    "@storybook/theming": "^6.3.9",
    "@testing-library/react-hooks": "^7.0.2",
    "@types/enzyme": "^3.10.5",
    "@types/enzyme-adapter-react-16": "^1.0.6",
    "@types/jest": "^26.0.20",
    "@types/lodash": "^4.14.172",
    "@types/react": "^16.14.5",
    "@types/react-dom": "^16.9.5",
    "@types/react-highlight-words": "^0.16.2",
    "@types/react-responsive": "^8.0.2",
    "@types/react-router-dom": "^5.1.7",
    "@types/react-virtualized": "^9.21.11",
    "@types/stopword": "^1.0.2",
    "@types/video.js": "^7.3.26",
    "@typescript-eslint/eslint-plugin": "~2.8",
    "@typescript-eslint/parser": "~2.8",
    "babel-loader": "~8.0",
    "cross-env": "^7.0.2",
    "css-loader": "^5.0.2",
    "dotenv-webpack": "^7.0.3",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.2",
    "enzyme-to-json": "^3.4.4",
    "eslint": "~6.6",
    "eslint-config-prettier": "~6.7",
    "eslint-plugin-react": "^7.19.0",
    "file-loader": "^6.2.0",
    "gh-pages": "^3.1.0",
    "html-webpack-plugin": "^5.3.2",
    "husky": "~3.1",
    "identity-obj-proxy": "^3.0.0",
    "image-webpack-loader": "^7.0.1",
    "jest": "^26.6.3",
    "lint-staged": "~9.4",
    "mini-css-extract-plugin": "^1.3.8",
    "moment": "^2.24.0",
    "npm-run-all": "~4.1",
    "nyc": "^15.1.0",
    "postcss": "^8.3.9",
    "postcss-loader": "^6.1.1",
    "prettier": "^2.0.5",
    "react": "^16.14.0",
    "react-dom": "^16.13.0",
    "rimraf": "~3.0",
    "semantic-ui-css": "^2.4.1",
    "snowpack": "^3.2.2",
    "ts-jest": "^26.1.1",
    "ts-node": "~8.5",
    "typescript": "^3.9.9",
    "webpack": "^5.52.0",
    "webpack-cli": "^4.9.1"
  },
    "dependencies": {
    "@councildataproject/cdp-design": "^1.0.2",
    "@emotion/react": "^11.4.1",
    "@emotion/styled": "^11.3.0",
    "@material-ui/icons": "^4.11.2",
    "@mozilla-protocol/core": "^13.0.1",
    "@storybook/addons": "^6.3.12",
    "firebase": "^9.0.0-beta.7",
    "lodash": "^4.17.21",
    "moment": "^2.24.0",
    "n-gram": "^2.0.1",
    "react-highlight-words": "^0.17.0",
    "react-localization": "^1.0.17",
    "react-responsive": "^8.2.0",
    "react-router-dom": "^5.2.0",
    "react-virtualized": "^9.22.3",
    "semantic-ui-react": "^2.0.3",
    "stemr": "^1.0.0",
    "stopword": "^1.0.11",
    "video.js": "^7.14.3"
  },
evamaxfield commented 2 years ago

Hey @ZaidKhan144 the import / install issues should now be solved.

  1. checkout / pull main
  2. clean / delete your node_modules in the cdp-frontend dir
  3. install with npm ci instead of npm i

Let us know if that doesn't work for you.

ZaidKhan144 commented 2 years ago

@JacksonMaxfield Thank you, it's working fine now.