Convert to Parcel and upgrade dependencies (#183)

* Convert to Parcel and upgrade dependencies

* Import fixes and a couple more dependencies

* Remove unused deps

* Update CI config

* update readme

.circleci/config.yml

@@ -7,7 +7,8 @@ jobs:
         default: "1.2.0"
     parallelism: 1
     machine:
-      image: circleci/classic:latest
+      image: ubuntu-2004:current
+    resource_class: medium
     environment:
       TEST_RESULTS: /tmp/test-results
       DKTL_VERSION: "4.2.0"

.gitignore

@@ -7,3 +7,6 @@ dist
 docs
 lib
 dist
+
+.parcel-cache/*
+.DS_Store

.parcelrc

@@ -0,0 +1,9 @@
+{
+  "extends": "@parcel/config-default",
+  "transformers": {
+    "*.{js,mjs,jsx,cjs,ts,tsx}": [
+      "@parcel/transformer-js",
+      "@parcel/transformer-react-refresh-wrap"
+    ]
+  }
+}

README.md

@@ -4,18 +4,12 @@
 [![Maintainability](https://api.codeclimate.com/v1/badges/c790605d9099259ebda4/maintainability)](https://codeclimate.com/github/GetDKAN/data-catalog-components/maintainability)
 [![Test Coverage](https://api.codeclimate.com/v1/badges/c790605d9099259ebda4/test_coverage)](https://codeclimate.com/github/GetDKAN/data-catalog-components/test_coverage)
 
-A set of React components to facilitate the creation of Open Data Catalogs with React.
+A set of React components to facilitate the creation of Open Data Catalogs with React. This library is powered by [Parcel](https://parceljs.org/).
 
-## Working locally
-To develop locally against a working version of the data-catalog-frontend, you will need to do the following steps.
+## Local Development
+For local development, we recommend using npm workspaces. Once you have a workspace directory, install this library inside your workspace along any Open Data downstream sites you wish to work on.
 
-1. Run `rm -rf node_modules && npm install` in the data-catalog-frontend repo.
-1. Run `rm -rf node_modules && npm install` in the data-catalog-components repo.
-1. Run `npm link` in this repo (data-catalog-components), this will create a symlink to your global npm registry.
-1. Run `npm link <relative path to dkan frontend>/node_modules/react` in this repo to connect the component library to the frontend's react folder.
-1. Run `npm link @civicactions/data-catalog-components` in the data-catalog-frontend repo. This will make it so when you run npm install it will symlink the node_modules folder to the global symlink instead of downloading the library from npm.
-1. Run `gatsby develop` in the data-catalog-frontend repo.
-1. In this repo, run `npm run lib:watch` to work on components or `npm run css:watch` to work on just CSS changes. Babel will now watch any commands you make to React components in this folder and rebuild the library. When a rebuild happens it will cause the frontend Gatsby development server to rebuild and show your changes.
+In the root folder for this project, run npm run watch to build local code. Ensure the upstream is using the same version number located in package.json of this repo. Start the upstream site locally as well, and it should load local code from this repo as the dependency. Parcel also provides hot rebuilding while watch is running.
 
 
 ## Viewing the Components
@@ -50,8 +44,7 @@ To see the available components:
 To test or use the components from a github branch:
 
 1) Create new branch locallly
-1) Remove `lib` from .gitignore
-1) Run `npm run lib`
-1) Push lib folder and .gitignore to your branch
+1) Remove `dist` from .gitignore
+1) Run `npm run build`
+1) Push dist folder and .gitignore to your branch
 1) Add branch to package.json by running `npm install --save getdkan/data-catalog-components#MY-BRANCH`
-1) Profit

gatsby-node.js

@@ -3,14 +3,6 @@ exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
     actions.setWebpackConfig({
       module: {
         rules: [
-          {
-            test: /react-loader-advanced/,
-            use: loaders.null(),
-          },
-          {
-            test: /react-loading-spin/,
-            use: loaders.null(),
-          },
           {
             test: /swagger-ui-react/,
             use: loaders.null(),

package.json

@@ -1,30 +1,19 @@
 {
   "name": "@civicactions/data-catalog-components",
-  "version": "1.15.0",
+  "version": "1.16.0",
   "description": "React Components for Open Data Catalogs.",
-  "main": "lib/index.js",
+  "main": "dist/index.js",
+  "source": "src/index.ts",
+  "type": "module",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/getdkan/data-catalog-components.git"
   },
   "author": "CivicActions <contact@civicactions.com>",
   "license": "GPL-3.0",
   "scripts": {
-    "css:watch": "node-sass --omit-source-map-url src/theme/styles/index.scss dist/index.css -w",
-    "lib:watch": "babel src -d lib --watch",
-    "lib": "npm run clean && babel src -d lib && sass src/theme/styles/index.scss dist/index.css && cp -R src/styles/scss dist/",
-    "clean": "rm -rf lib && mkdir lib && rm -rf dist && mkdir dist",
-    "prepublish": "npm run lib",
-    "storybook": "NODE_PATH=src start-storybook -p 6006",
-    "deploy-storybook": "storybook-to-ghpages",
-    "lint": "eslint ./src",
-    "test": "jest --verbose",
-    "test:watch": "npm run test -- --watch",
-    "test:coverage": "npm run test -- --coverage",
-    "docz:dev": "docz dev",
-    "docz:build": "docz build",
-    "docz:serve": "docz build && docz serve",
-    "docz:publish": "docz build && gh-pages -d ./docs"
+    "build": "parcel build",
+    "watch": "parcel watch"
   },
   "keywords": [
     "react",
@@ -34,103 +23,45 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.25",
     "@fortawesome/free-brands-svg-icons": "^5.11.2",
     "@fortawesome/free-solid-svg-icons": "^5.11.2",
-    "@fortawesome/react-fontawesome": "^0.1.4",
-    "@reach/router": "^1.3.3",
-    "axios": "^0.21.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "axios": "^1.6.2",
     "bootstrap": "^4.2.1",
     "excerpts": "0.0.3",
-    "html-to-react": "^1.3.4",
+    "html-to-react": "^1.7.0",
     "immutability-helper": "^3.0.2",
     "lodash": "^4.17.15",
     "prop-types": "^15.6.2",
     "query-string": "^6.8.3",
-    "react-aria-modal": "^4.0.0",
+    "react-aria-modal": "^5.0.2",
     "react-content-loader": "^6.0.1",
-    "react-dnd": "^10.0.2",
-    "react-dnd-html5-backend": "^10.0.2",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
     "react-js-pagination": "^3.0.2",
-    "react-loader-advanced": "^1.7.1",
-    "react-loading-spin": "^1.0.9",
+    "react-router-dom": "^6.10.0",
     "react-table": "^7.0.4",
-    "reactstrap": "^7.1.0",
-    "styled-components": "^5.0.1",
-    "swagger-ui-react": "3.25.0",
-    "validator": "^12.2.0"
+    "swagger-ui-react": "^4.15.5",
+    "validator": "^13.11.0",
+    "reactstrap": "^9.2.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.0.0",
-    "@babel/code-frame": "^7.8.3",
-    "@babel/core": "^7.3.4",
-    "@babel/plugin-proposal-class-properties": "^7.0.0",
-    "@babel/plugin-proposal-decorators": "^7.0.0",
-    "@babel/plugin-proposal-do-expressions": "^7.0.0",
-    "@babel/plugin-proposal-export-default-from": "^7.0.0",
-    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
-    "@babel/plugin-proposal-function-bind": "^7.0.0",
-    "@babel/plugin-proposal-function-sent": "^7.0.0",
-    "@babel/plugin-proposal-json-strings": "^7.0.0",
-    "@babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
-    "@babel/plugin-proposal-numeric-separator": "^7.0.0",
-    "@babel/plugin-proposal-optional-chaining": "^7.0.0",
-    "@babel/plugin-proposal-pipeline-operator": "^7.0.0",
-    "@babel/plugin-proposal-throw-expressions": "^7.0.0",
-    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
-    "@babel/plugin-syntax-import-meta": "^7.0.0",
-    "@babel/plugin-transform-runtime": "^7.6.2",
-    "@babel/preset-env": "^7.5.5",
-    "@babel/preset-react": "^7.0.0",
-    "@babel/runtime": "^7.6.2",
-    "@storybook/addon-a11y": "^5.2.0",
-    "@storybook/addon-actions": "^5.3.8",
-    "@storybook/addon-knobs": "^5.2.0",
-    "@storybook/addon-links": "^5.2.0",
-    "@storybook/addon-viewport": "^5.3.13",
-    "@storybook/addons": "^5.2.0",
-    "@storybook/react": "^5.3.12",
-    "@storybook/storybook-deployer": "^2.8.1",
-    "@testing-library/dom": "^7.16.1",
-    "@testing-library/jest-dom": "^5.10.1",
-    "@testing-library/react": "^10.2.1",
-    "@testing-library/react-hooks": "^3.3.0",
-    "@testing-library/user-event": "^12.7.1",
-    "babel-core": "^6.26.3",
-    "babel-eslint": "^10.0.3",
-    "babel-jest": "^24.9.0",
-    "babel-loader": "^8.0.6",
-    "babel-plugin-styled-components": "^1.10.6",
-    "babel-polyfill": "^6.26.0",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-react": "^6.3.13",
-    "babel-preset-stage-0": "^6.24.1",
-    "core-js": "^2.6.5",
-    "css-loader": "^2.1.0",
-    "docz": "^2.3.1",
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.14.0",
-    "eslint": "^6.2.1",
-    "eslint-config-airbnb": "^18.0.1",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.14.3",
-    "eslint-plugin-react-hooks": "^1.7.0",
-    "extract-text-webpack-plugin": "^3.0.2",
-    "gatsby-plugin-sass": "^2.3.1",
-    "gh-pages": "^2.2.0",
-    "jest": "^24.9.0",
-    "prettier": "^1.16.0",
-    "react-router-dom": "^4.3.1",
+    "@babel/preset-env": "^7.22.5",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.11",
+    "@parcel/packager-ts": "^2.8.3",
+    "@parcel/transformer-sass": "^2.10.3",
+    "@parcel/transformer-typescript-types": "^2.8.3",
+    "parcel": "^2.8.3",
     "react-test-renderer": "^16.9.0",
     "sass": "^1.56.1",
     "sass-loader": "^7.1.0",
     "url-loader": "^1.1.2"
   },
   "peerDependencies": {
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "files": [
     "lib",
     "dist"
   ]
-}
+}

src/components/DataTable/ManageColumns/index.jsx

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { DndProvider } from 'react-dnd';
-import Backend from 'react-dnd-html5-backend';
+import { HTML5Backend } from 'react-dnd-html5-backend';
 import update from 'immutability-helper';
 import Card from './Card';
 
@@ -64,7 +64,7 @@ const ManageColumns = ({
         nodeId="___gatsby"
         openText="Manage Columns"
       >
-        <DndProvider backend={Backend}>
+        <DndProvider backend={HTML5Backend}>
           {reactTable.allColumns
             && reactTable.allColumns.map((column, i) => renderCard(column, i, moveCard))}
         </DndProvider>

src/components/IconListItem/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Link } from '@reach/router';
+import { Link } from 'react-router-dom';
 import TopicIcon from '../../templates/TopicIcon';
 
 function IconListItem({

src/components/Logo/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Link } from '@reach/router';
+import { Link } from 'react-router-dom';
 
 const Logo = ({ image }) => (
   <Link to="/" className="dc-logo">

src/components/Menu/index.jsx

@@ -2,7 +2,7 @@
 
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import { Link } from "@reach/router";
+import { Link } from "react-router-dom";
 import validator from 'validator';
 
 class Menu extends Component {

src/components/Organization/index.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from "prop-types";
-import { Link } from "@reach/router";
+import { Link } from "react-router-dom";
 import PublisherDatasetCountByName from "../PublisherDatasetCountByName";
 import axios from 'axios';
 

src/components/PublisherDatasetCountByName/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Link } from "@reach/router";
+import { Link } from "react-router-dom";
 
 const PublisherDatasetCountByName = (props) => {
   const { name, searchUrl, datasetCount} = props;

src/components/SearchListItem/index.jsx

@@ -5,7 +5,7 @@ import excerpts from 'excerpts';
 import TopicIcon from '../../templates/TopicIcon';
 import DataIcon from '../DataIcon';
 import Text from '../Text';
-import { Link } from '@reach/router';
+import { Link } from 'react-router-dom';
 import {countBy} from 'lodash';
 
 

src/components/TopicWrapper/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Link } from '@reach/router';
+import { Link } from 'react-router-dom';
 
 const TopicWrapper = ({ component, topic }) => {
   const ComponentToRender = component;

src/index.js → src/index.ts

@@ -76,3 +76,6 @@ export { default as SearchSidebar } from './templates/SearchSidebar';
 export { default as SearchContent } from './templates/SearchContent';
 export { default as TopicIcon } from './templates/TopicIcon';
 export { default as DataTableHeader } from './templates/DataTableHeader';
+
+import "./theme/styles/index.scss";
+import 'bootstrap/dist/css/bootstrap.css';

src/templates/Blocks/BasicBlock.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Link } from '@reach/router';
+import { Link } from 'react-router-dom';
 import Text from '../../components/Text';
 
 class BasicBlock extends React.PureComponent {

src/templates/Blocks/index.jsx

@@ -39,8 +39,8 @@ Blocks.defaultProps = {
 };
 
 Blocks.propTypes = {
-  items: PropTypes.isRequired,
-  component: PropTypes.string,
+  items: PropTypes.array.isRequired,
+  component: PropTypes.func,
   containerClass: PropTypes.string,
   blockClass: PropTypes.string,
   paneTitle: PropTypes.string,