diff --git a/DESIGN.md b/DESIGN.md new file mode 100644 index 00000000..007513de --- /dev/null +++ b/DESIGN.md @@ -0,0 +1,83 @@ +# Design Notes + +## Roadmap + +General comment: let's do "README" (docs) driven development here. + +* [x] [show] Local functionality for Frictionless datasets with CSV #528 + * [x] Move in new work (portal-experiment) into portal.js and refactor https://github.com/datopian/portal.js.bak/issues/59 +* [ ] [show] Uber Epic covering all functionality **See below** + * [ ] [show] README only + data datasets (don’t have to be frictionless) + * (?) Graphs direct in README with say visdown … + * [ ] [show] SQL interface to the data (alasql or sql.js … https://github.com/agershun/alasql/wiki/Performance-Tests) + * [ ] file/resource subpages ... (for datasets with lots of resources) +* [ ] Docs **80% analysed** # +* [ ] Create portal components and library i.e. have a Table, Graph, Dataset component + * [ ] publish to @datopian/portal + * [ ] Examples +* [ ] Catalog functionality **20% analysed** + +## [uber][epic] Show functionality for single datasets + +### Features + +* Elegant +* Description (README/Description) +* Data preview and exploration (for tablular) + * Basic: some sample data shown + * Data exploration v1: filterable + * Data Exploration v2: can do sql etc ... +* Graphs / visualization +* Validation: this row does not match schema in column X +* Summarization e.g. this columns has this range of values, this average value, this number of nulls + +### Dataset structure support (in rough order of priority / like implementation) + +* Frictionless +* Plain README (with frontmatter) +* README (no frontmatter) and LICENSE file (?) + +Data has roughly two dimensions that are relevant + +* Format + * CSV + * xlsx + * JSON + * ... +* Size + * Small: < 5mb (can just load inline ...) + * Medium < 100mb + * Large < 5Gb + * xlarge > 5Gb + +* TODO: How does show/build work with remote files e.g. a resource ... + + ``` + path: abc.csv + remote_storage_url: s3://.../.../.../ + ``` + + Options: + + * We clone the data into path locally ... + * Possible problem if data is big ... + * Load data direct from remote_storage_url (as long as supports CORs) + + + + +## Architecture + +Portal.js is a React and NextJS based framework for building dataset/resources pages and catalogs. It consists of: + +* React components for data portal functionality e.g. data tables, graphs, dataset pages etc +* Tooling to load data (based on Frictionless) +* Template sites you can reuse using `create-next-app` + * Single dataset micro-site + * Github backed catalog + * CKAN backed catalog + * ... +* Local development environment +* Deployment integration with DataHub.io + +In summary, technically PortalJS is: NextJS + data specific react components + data loading glue (mostly using frictionless-js). diff --git a/README.md b/README.md index 2f057f93..6df994c1 100644 --- a/README.md +++ b/README.md @@ -1,21 +1,830 @@ -# Portaljs +

+🌀 Portal.JS +
+Create a gateway to your data +

- +* [What is Portal.JS ?](#What-is-Portal.JS) + * [Features](#Features) + * [For developers](#For-developers) +* [Installation and setup](#Installation-and-setup) +* [Getting Started](#Getting-Started) +* [Tutorial](#Tutorial) + * [Build a single Frictionless dataset portal](#Build-a-single-Frictionless-dataset-portal) + * [Build a CKAN powered dataset portal](#Build-a-CKAN-powered-dataset-portal) +* [Architecture / Reference](#Architecture--Reference) + * [Component List](#Component-List) + * [UI Components](#UI-Components) + * [Dataset Components](#Dataset-Components) + * [View Components](#View-Components) + * [Search Components](#Search-Components) + * [Blog Components](#Blog-Components) + * [Misc Components](#Misc-Components) + * [Concepts and Terms](#Concepts-and-Terms) + * [Dataset](#Dataset) + * [Resource](#Resource) + * [View Spec](#view-spec) +* [Appendix](#Appendix) + * [What happened to Recline?](#What-happened-to-Recline?) -✨ **This workspace has been generated by [Nx, a Smart, fast and extensible build system.](https://nx.dev)** ✨ +# What is Portal.JS +🌀 `portal.js` is a framework for rapidly building rich data portal frontends using a modern frontend approach. `portal.js` can be used to present a single dataset or build a full-scale data catalog/portal. -## Development server +`portal.js` is built in Javascript and React on top of the popular [Next.js](https://nextjs.com/) framework. `portal` assumes a "decoupled" approach where the frontend is a separate service from the backend and interacts with backend(s) via an API. It can be used with any backend and has out of the box support for [CKAN](https://ckan.org/). -Run `nx serve portaljs` for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files. +## Features -## Understand this workspace +- 🗺️ Unified sites: present data and content in one seamless site, pulling datasets from a DMS (e.g. CKAN) and content from a CMS (e.g. wordpress) with a common internal API. +- 👩‍💻 Developer friendly: built with familiar frontend tech Javascript, React etc +- 🔋 Batteries included: Full set of portal components out of the box e.g. catalog search, dataset showcase, blog etc. +- 🎨 Easy to theme and customize: installable themes, use standard CSS and React+CSS tooling. Add new routes quickly. +- 🧱 Extensible: quickly extend and develop/import your own React components +- 📝 Well documented: full set of documentation plus the documentation of NextJS and Apollo. -Run `nx graph` to see a diagram of the dependencies of the projects. +### For developers -## Remote caching +- 🏗 Build with modern, familiar frontend tech such as Javascript and React. +- 🚀 NextJS framework: so everything in NextJS for free React, SSR, static site generation, huge number of examples and integrations etc. + - SSR => unlimited number of pages, SEO etc whilst still using React. + - Static Site Generation (SSG) (good for small sites) => ultra-simple deployment, great performance and lighthouse scores etc -Run `npx nx connect-to-nx-cloud` to enable [remote caching](https://nx.app) and make CI faster. +# Installation and setup +Before installation, ensure your system satisfies the following requirements: -## Further help +- Node.js 10.13 or later +- Nextjs 10.0.3 +- MacOS, Windows (including WSL), and Linux are supported -Visit the [Nx Documentation](https://nx.dev) to learn more. +> Note: We also recommend instead of npm using `yarn` instead of `npm`. +> +Portal.js is built with React on top of Nextjs framework, so for a quick setup, you can bootstrap a Nextjs app and install portal.js as demonstrated in the code below: + +```bash= +## Create a react app +npx create-next-app +# or +yarn create next-app +``` +After the installation is complete, follow the instructions to start the development server. Try editing pages/index.js and see the result on your browser. + +> For more information on how to use create-next-app, you can review the [create-next-app](https://nextjs.org/docs/api-reference/create-next-app) documentation. + +Once you have Nextjs created, you can install portal.js: + +```bash= +yarn add https://github.com/datopian/portal.js.git +``` + +You're now ready to use portal.js in your next app. To test portal.js, open your `index.js` file in the pages folder. By default you should have some autogenerated code in the `index.js` file: + + +Which outputs a page with the following content: + +![](https://i.imgur.com/GVh0P6p.png) + +Now, we are going to do some clean up and add a table component. In the `index.js` file, import a [Table]() component from portal as shown below: + +```javascript +import Head from 'next/head' +import { Table } from 'portal' //import Table component +import styles from '../styles/Home.module.css' + +export default function Home() { + + const columns = [ + { field: 'id', headerName: 'ID' }, + { field: 'firstName', headerName: 'First name' }, + { field: 'lastName', headerName: 'Last name' }, + { field: 'age', headerName: 'Age' } + ]; + + const rows = [ + { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 }, + { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 }, + { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 }, + { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 }, + { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 }, + { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 }, + { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 }, + ]; + + return ( +
+ + Create Portal App + + + +

+ Welcome to Portal.JS +

+ + {/* Use table component */} + + + + ) +} +``` + +Now, your page should look like the following: + +![](https://i.imgur.com/n0vSjY4.png) + +> **Note**: You can learn more about individual portal components, as well as their prop types in the [components reference](#Component-List). + +___ + +# Getting Started + +If you're new to Portal.js we recommend that you start with the step-by-step guide below. You can also check out the following examples of projects built with portal.js. + +* [A portal for a single Frictionless dataset](#Build-a-single-Frictionless-dataset-portal) +* [A portal with a CKAN backend](#Build-a-CKAN-powered-dataset-portal) + +> The [`examples` directory](https://github.com/datopian/portal.js/tree/main/examples) is regularly updated with different portal examples. + +If you have questions about anything related to Portal.js, you're always welcome to ask our community on [GitHub Discussions](https://github.com/datopian/portal.js/discussions). +___ + +# Tutorial + +## Build a single Frictionless dataset portal +This tutorial will guide you through building a portal for a single Frictionless dataset. + +[Here’s](https://portal-js.vercel.app/) an example of the final result. + +### Setup +The dataset should be a Frictionless Dataset i.e. it should have a [datapackage.json](https://specs.frictionlessdata.io/data-package/). + +Create a frictionless dataset portal app from the template: +``` +npx create-next-app -e https://github.com/datopian/portal.js/tree/main/examples/dataset-frictionless +#choose a name for your portal when prompted e.g. your-portal +``` +Go into your portal's directory and set the path to your dataset directory that contains the `datapackage.json`: +``` +cd +export PORTAL_DATASET_PATH= +``` +Start the server: +``` +yarn dev +``` +Visit the Page to view your dataset portal. + +## Build a CKAN powered dataset portal + +See [the CKAN Portal.JS example](./examples/ckan). + +___ + + +# Architecture / Reference + +## Component List + +Portal.js supports many components that can help you build amazing data portals similar to [this](https://catalog-portal-js.vercel.app/) and [this](https://portal-js.vercel.app/). + +In this section, we'll cover all supported components in depth, and help you understand their use as well as the expected properties. + +Components are grouped under the following sections: +* [UI](https://github.com/datopian/portal.js/tree/main/src/components/ui): Components like Nav bar, Footer, e.t.c +* [Dataset](https://github.com/datopian/portal.js/tree/main/src/components/dataset): Components used for displaying a Frictionless dataset and resources +* [Search](https://github.com/datopian/portal.js/tree/main/src/components/search): Components used for building a search interface for datasets +* [Blog](https://github.com/datopian/portal.js/tree/main/src/components/blog): Components for building a simple blog for datasets +* [Views](https://github.com/datopian/portal.js/tree/main/src/components/views): Components like charts, tables, maps for generating data views +* [Misc](https://github.com/datopian/portal.js/tree/main/src/components/misc): Miscellaneous components like errors, custom links, etc used for extra design. + +### UI Components + +In the UI we group all components that can be used for building generic page sections. These are components for building sections like the Navigation bar, Footer, Side pane, Recent datasets, e.t.c. + +#### [Nav Component](https://github.com/datopian/portal.js/blob/main/src/components/ui/Nav.js) + +To build a navigation bar, you can use the `Nav` component as demonstrated below: + +```javascript +import { Nav } from 'portal' + +export default function Home(){ + + const navMenu = [{ title: 'Blog', path: '/blog' }, + { title: 'Search', path: '/search' }] + + return ( + <> +
+ ) +} + +``` +> Note: Under the hood, Table component uses the [DataGrid Material UI table](https://material-ui.com/components/data-grid/), and as such all supported params in data and columns are supported. + + +#### Table Component Prop Types + +Table component accepts two properties: +* **data**: An array of column names with properties: e.g [{field: "col1", headerName: "col1"}, {field: "col2", headerName: "col2"}] +* **columns**: An array of data objects e.g. [ {col1: 1, col2: 2}, {col1: 5, col2: 7} ] + + +### [Search Components](https://github.com/datopian/portal.js/tree/main/src/components/search) + +Search components groups together components that can be used for creating a search interface. This includes search forms, search item as well as search result list. + +#### [Form Component](https://github.com/datopian/portal.js/blob/main/src/components/search/Form.js) + +The search`Form` component is a simple search input and submit button. See example of a search form [here](https://catalog-portal-js.vercel.app/search). + +The search `form` requires a submit handler (`handleSubmit`). This handler function receives the search term, and handles actual search. + +In the example below, we demonstrate how to use the `Form` component. + +```javascript +import { Form } from 'portal' + +export default function Home() { + + const handleSearchSubmit = (searchQuery) => { + // Write your custom code to perform search in db + console.log(searchQuery); + } + + return ( + + ) +} +``` + +#### Form Component Prop Types + +The `Form` component accepts a single property: +* **handleSubmit**: A function that receives the search text, and can be customize to perform the actual search. + +#### [Item Component](https://github.com/datopian/portal.js/blob/main/src/components/search/Item.js) + +The search`Item` component can be used to display a single search result. + +In the example below, we demonstrate how to use the `Item` component. + +```javascript +import { Item } from 'portal' + +export default function Home() { + const datapackage = { + "name": "finance-vix", + "title": "VIX - CBOE Volatility Index", + "homepage": "http://www.cboe.com/micro/VIX/", + "version": "0.1.0", + "description": "This is a test organization description", + "resources": [ + { + "name": "vix-daily", + "path": "vix-daily.csv", + "format": "csv", + "size": 20982, + "mediatype": "text/csv", + } + ] + } + + return ( + + ) +} +``` + +#### Item Component Prop Types + +The `Item` component accepts a single property: +* **dataset**: A [Frictionless data package descriptor](https://specs.frictionlessdata.io/data-package/#descriptor) + + +#### [ItemTotal Component](https://github.com/datopian/portal.js/blob/main/src/components/search/Item.js) + +The search`ItemTotal` is a simple component for displaying the total search result + +In the example below, we demonstrate how to use the `ItemTotal` component. + +```javascript +import { ItemTotal } from 'portal' + +export default function Home() { + //do some custom search to get results + const search = (text) => { + return [{ name: "data1" }, { name: "data2" }] + } + //get the total result count + const searchTotal = search("some text").length + + return ( + + ) +} +``` + +#### ItemTotal Component Prop Types + +The `ItemTotal` component accepts a single property: +* **count**: An integer of the total number of results. + + +### [Blog Components](https://github.com/datopian/portal.js/tree/main/src/components/blog) + +These are group of components for building a portal blog. See example of portal blog [here](https://catalog-portal-js.vercel.app/blog) + +#### [PostList Components](https://github.com/datopian/portal.js/tree/main/src/components/misc) + +The `PostList` component is used to display a list of blog posts with the title and a short excerpts from the content. + +In the example below, we demonstrate how to use the `PostList` component. + +```javascript +import { PostList } from 'portal' + +export default function Home() { + + const posts = [ + { title: "Blog post 1", excerpt: "This is the first blog excerpts in this list." }, + { title: "Blog post 2", excerpt: "This is the second blog excerpts in this list." }, + { title: "Blog post 3", excerpt: "This is the third blog excerpts in this list." }, + ] + return ( + + ) +} +``` + +#### PostList Component Prop Types + +The `PostList` component accepts a single property: +* **posts**: An array of post list objects with the following properties: + ```javascript + [ + { + title: "The title of the blog post", + excerpt: "A short excerpt from the post content", + }, + ] + ``` + +#### [Post Components](https://github.com/datopian/portal.js/tree/main/src/components/misc) + +The `Post` component is used to display a blog post. See an example of a blog post [here](https://catalog-portal-js.vercel.app/blog/nyt-pa-platformen-opdateringsfrekvens-og-andres-data) + +In the example below, we demonstrate how to use the `Post` component. + +```javascript +import { Post } from 'portal' +import * as dayjs from 'dayjs' //For converting UTC time to relative format +import relativeTime from 'dayjs/plugin/relativeTime' + +dayjs.extend(relativeTime) + +export default function Home() { + + const post = { + title: "This is a sample blog post", + content: `

A simple header

+ The PostList component is used to display a list of blog posts + with the title and a short excerpts from the content. + In the example below, we demonstrate how to use the PostList component.`, + createdAt: dayjs().to(dayjs(1620649596902)), + featuredImage: "https://pixabay.com/get/ge9a766d1f7b5fe0eccbf0f439501a2cf2b191997290e7ab15e6a402574acc2fdba48a82d278dca3547030e0202b7906d_640.jpg" + } + + return ( + + ) +} +``` + +#### Post Component Prop Types + +The `Post` component accepts a single property: +* **post**: An object with the following properties: +```javascript + { + title: + content: + createdAt: + featuredImage: < Url/relative url to post cover image> + } +``` + + +### [Misc Components](https://github.com/datopian/portal.js/tree/main/src/components/misc) + +These are group of miscellaneous/extra components for extending your portal. They include components like Errors, custom links, etc. + +#### [Error Component](https://github.com/datopian/portal.js/blob/main/src/components/misc/Error.js) + +The `Error` component is used to display a custom error message. + +In the example below, we demonstrate how to use the `Error` component. + +```javascript +import { Error } from 'portal' + +export default function Home() { + + return ( + + ) +} +``` + +#### Error Component Prop Types + +The `Error` component accepts a single property: +* **message**: A string with the error message to display. + + +#### [Custom Component](https://github.com/datopian/portal.js/blob/main/src/components/misc/Error.js) + +The `CustomLink` component is used to create a link with a consistent style to other portal components. + +In the example below, we demonstrate how to use the `CustomLink` component. + +```javascript +import { CustomLink } from 'portal' + +export default function Home() { + + return ( + + ) +} +``` + +#### CustomLink Component Prop Types + +The `CustomLink` component accepts the following properties: + +* **url**: A string. The relative or absolute url of the link. +* **title**: A string. The title of the link + + +___ + +## Concepts and Terms +In this section, we explain some of the terms and concepts used throughtout the portal.js documentation. +> Some of these concepts are part of official specs, and when appropriate, we'll link to the sources where you can get more details. +### Dataset +A dataset extends the [Frictionless data package](https://specs.frictionlessdata.io/data-package/#metadata) to add an extra organization property. The organization property describes the organization the dataset belongs to, and it should have the following properties: +```javascript +organization = { + name: "some org name", + title: "Some optional org title", + description: "A description of the organization" +} +``` +An example of dataset with organization properties is given below: +```javascript +datasets = [{ + organization: { + name: "some org name", + title: "Some optional org title", + description: "A description of the organization" + }, + title: "Data package title", + name: "Data package name", + description: "description of data package", + resources: [...], + licences: [...], + sources: [...] + } +] +``` + +### Resource +TODO + +### view spec + +--- + +## Deploying portal build to github pages + +[Deploying single frictionless dataset to Github](https://portaljs.org/publish) + +## Showcases + +### Single Dataset with Default Theme + +![Single Dataset Example](./examples/dataset-frictionless/assets/demo.gif) + +--- + +# Appendix + +## What happened to Recline? + +Portal.JS used to be Recline(JS). If you are looking for the old Recline codebase it still exists: see the [`recline` branch](https://github.com/datopian/portal.js/tree/recline). If you want context for the rename see [this issue](https://github.com/datopian/portal.js/issues/520). diff --git a/SECURITY.md b/SECURITY.md new file mode 100644 index 00000000..b4bc1380 --- /dev/null +++ b/SECURITY.md @@ -0,0 +1,5 @@ +# Security Policy + +## Reporting a Vulnerability + +Please report security issues to `security@datopian.com` \ No newline at end of file diff --git a/apps/data-literate-e2e/.eslintrc.json b/apps/data-literate-e2e/.eslintrc.json deleted file mode 100644 index 696cb8b1..00000000 --- a/apps/data-literate-e2e/.eslintrc.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "extends": ["plugin:cypress/recommended", "../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], - "rules": {} - } - ] -} diff --git a/apps/data-literate-e2e/cypress.config.ts b/apps/data-literate-e2e/cypress.config.ts deleted file mode 100644 index 22f7c84e..00000000 --- a/apps/data-literate-e2e/cypress.config.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { defineConfig } from 'cypress'; -import { nxE2EPreset } from '@nrwl/cypress/plugins/cypress-preset'; - -export default defineConfig({ - e2e: nxE2EPreset(__dirname), -}); diff --git a/apps/data-literate-e2e/project.json b/apps/data-literate-e2e/project.json deleted file mode 100644 index 214c992e..00000000 --- a/apps/data-literate-e2e/project.json +++ /dev/null @@ -1,30 +0,0 @@ -{ - "name": "data-literate-e2e", - "$schema": "../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "apps/data-literate-e2e/src", - "projectType": "application", - "targets": { - "e2e": { - "executor": "@nrwl/cypress:cypress", - "options": { - "cypressConfig": "apps/data-literate-e2e/cypress.config.ts", - "devServerTarget": "data-literate:serve:development", - "testingType": "e2e" - }, - "configurations": { - "production": { - "devServerTarget": "data-literate:serve:production" - } - } - }, - "lint": { - "executor": "@nrwl/linter:eslint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": ["apps/data-literate-e2e/**/*.{js,ts}"] - } - } - }, - "tags": [], - "implicitDependencies": ["data-literate"] -} diff --git a/apps/data-literate-e2e/src/e2e/app.cy.ts b/apps/data-literate-e2e/src/e2e/app.cy.ts deleted file mode 100644 index 3fcabc19..00000000 --- a/apps/data-literate-e2e/src/e2e/app.cy.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { getGreeting } from '../support/app.po'; - -describe('data-literate', () => { - beforeEach(() => cy.visit('/')); - - it('should display welcome message', () => { - // Custom command example, see `../support/commands.ts` file - cy.login('my-email@something.com', 'myPassword'); - - // Function helper example, see `../support/app.po.ts` file - getGreeting().contains('Welcome data-literate'); - }); -}); diff --git a/apps/data-literate-e2e/src/fixtures/example.json b/apps/data-literate-e2e/src/fixtures/example.json deleted file mode 100644 index 294cbed6..00000000 --- a/apps/data-literate-e2e/src/fixtures/example.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "name": "Using fixtures to represent data", - "email": "hello@cypress.io" -} diff --git a/apps/data-literate-e2e/src/support/app.po.ts b/apps/data-literate-e2e/src/support/app.po.ts deleted file mode 100644 index 32934246..00000000 --- a/apps/data-literate-e2e/src/support/app.po.ts +++ /dev/null @@ -1 +0,0 @@ -export const getGreeting = () => cy.get('h1'); diff --git a/apps/data-literate-e2e/src/support/commands.ts b/apps/data-literate-e2e/src/support/commands.ts deleted file mode 100644 index 310f1fa0..00000000 --- a/apps/data-literate-e2e/src/support/commands.ts +++ /dev/null @@ -1,33 +0,0 @@ -// *********************************************** -// This example commands.js shows you how to -// create various custom commands and overwrite -// existing commands. -// -// For more comprehensive examples of custom -// commands please read more here: -// https://on.cypress.io/custom-commands -// *********************************************** - -// eslint-disable-next-line @typescript-eslint/no-namespace -declare namespace Cypress { - // eslint-disable-next-line @typescript-eslint/no-unused-vars - interface Chainable { - login(email: string, password: string): void; - } -} -// -// -- This is a parent command -- -Cypress.Commands.add('login', (email, password) => { - console.log('Custom command example: Login', email, password); -}); -// -// -- This is a child command -- -// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... }) -// -// -// -- This is a dual command -- -// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... }) -// -// -// -- This will overwrite an existing command -- -// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) diff --git a/apps/data-literate-e2e/src/support/e2e.ts b/apps/data-literate-e2e/src/support/e2e.ts deleted file mode 100644 index 3d469a6b..00000000 --- a/apps/data-literate-e2e/src/support/e2e.ts +++ /dev/null @@ -1,17 +0,0 @@ -// *********************************************************** -// This example support/index.js is processed and -// loaded automatically before your test files. -// -// This is a great place to put global configuration and -// behavior that modifies Cypress. -// -// You can change the location of this file or turn off -// automatically serving support files with the -// 'supportFile' configuration option. -// -// You can read more here: -// https://on.cypress.io/configuration -// *********************************************************** - -// Import commands.js using ES2015 syntax: -import './commands'; diff --git a/apps/data-literate-e2e/tsconfig.json b/apps/data-literate-e2e/tsconfig.json deleted file mode 100644 index cc509a73..00000000 --- a/apps/data-literate-e2e/tsconfig.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "extends": "../../tsconfig.base.json", - "compilerOptions": { - "sourceMap": false, - "outDir": "../../dist/out-tsc", - "allowJs": true, - "types": ["cypress", "node"] - }, - "include": ["src/**/*.ts", "src/**/*.js", "cypress.config.ts"] -} diff --git a/apps/site-e2e/.eslintrc.json b/apps/site-e2e/.eslintrc.json deleted file mode 100644 index 696cb8b1..00000000 --- a/apps/site-e2e/.eslintrc.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "extends": ["plugin:cypress/recommended", "../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], - "rules": {} - } - ] -} diff --git a/apps/site-e2e/cypress.config.ts b/apps/site-e2e/cypress.config.ts deleted file mode 100644 index 22f7c84e..00000000 --- a/apps/site-e2e/cypress.config.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { defineConfig } from 'cypress'; -import { nxE2EPreset } from '@nrwl/cypress/plugins/cypress-preset'; - -export default defineConfig({ - e2e: nxE2EPreset(__dirname), -}); diff --git a/apps/site-e2e/project.json b/apps/site-e2e/project.json deleted file mode 100644 index b6cd0d87..00000000 --- a/apps/site-e2e/project.json +++ /dev/null @@ -1,30 +0,0 @@ -{ - "name": "site-e2e", - "$schema": "../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "apps/site-e2e/src", - "projectType": "application", - "targets": { - "e2e": { - "executor": "@nrwl/cypress:cypress", - "options": { - "cypressConfig": "apps/site-e2e/cypress.config.ts", - "devServerTarget": "site:serve:development", - "testingType": "e2e" - }, - "configurations": { - "production": { - "devServerTarget": "site:serve:production" - } - } - }, - "lint": { - "executor": "@nrwl/linter:eslint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": ["apps/site-e2e/**/*.{js,ts}"] - } - } - }, - "tags": [], - "implicitDependencies": ["site"] -} diff --git a/apps/site-e2e/src/e2e/app.cy.ts b/apps/site-e2e/src/e2e/app.cy.ts deleted file mode 100644 index 3a752dd4..00000000 --- a/apps/site-e2e/src/e2e/app.cy.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { getGreeting } from '../support/app.po'; - -describe('site', () => { - beforeEach(() => cy.visit('/')); - - it('should display welcome message', () => { - // Custom command example, see `../support/commands.ts` file - cy.login('my-email@something.com', 'myPassword'); - - // Function helper example, see `../support/app.po.ts` file - getGreeting().contains('Welcome site'); - }); -}); diff --git a/apps/site-e2e/src/fixtures/example.json b/apps/site-e2e/src/fixtures/example.json deleted file mode 100644 index 294cbed6..00000000 --- a/apps/site-e2e/src/fixtures/example.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "name": "Using fixtures to represent data", - "email": "hello@cypress.io" -} diff --git a/apps/site-e2e/src/support/app.po.ts b/apps/site-e2e/src/support/app.po.ts deleted file mode 100644 index 32934246..00000000 --- a/apps/site-e2e/src/support/app.po.ts +++ /dev/null @@ -1 +0,0 @@ -export const getGreeting = () => cy.get('h1'); diff --git a/apps/site-e2e/src/support/commands.ts b/apps/site-e2e/src/support/commands.ts deleted file mode 100644 index 310f1fa0..00000000 --- a/apps/site-e2e/src/support/commands.ts +++ /dev/null @@ -1,33 +0,0 @@ -// *********************************************** -// This example commands.js shows you how to -// create various custom commands and overwrite -// existing commands. -// -// For more comprehensive examples of custom -// commands please read more here: -// https://on.cypress.io/custom-commands -// *********************************************** - -// eslint-disable-next-line @typescript-eslint/no-namespace -declare namespace Cypress { - // eslint-disable-next-line @typescript-eslint/no-unused-vars - interface Chainable { - login(email: string, password: string): void; - } -} -// -// -- This is a parent command -- -Cypress.Commands.add('login', (email, password) => { - console.log('Custom command example: Login', email, password); -}); -// -// -- This is a child command -- -// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... }) -// -// -// -- This is a dual command -- -// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... }) -// -// -// -- This will overwrite an existing command -- -// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) diff --git a/apps/site-e2e/src/support/e2e.ts b/apps/site-e2e/src/support/e2e.ts deleted file mode 100644 index 3d469a6b..00000000 --- a/apps/site-e2e/src/support/e2e.ts +++ /dev/null @@ -1,17 +0,0 @@ -// *********************************************************** -// This example support/index.js is processed and -// loaded automatically before your test files. -// -// This is a great place to put global configuration and -// behavior that modifies Cypress. -// -// You can change the location of this file or turn off -// automatically serving support files with the -// 'supportFile' configuration option. -// -// You can read more here: -// https://on.cypress.io/configuration -// *********************************************************** - -// Import commands.js using ES2015 syntax: -import './commands'; diff --git a/apps/site-e2e/tsconfig.json b/apps/site-e2e/tsconfig.json deleted file mode 100644 index cc509a73..00000000 --- a/apps/site-e2e/tsconfig.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "extends": "../../tsconfig.base.json", - "compilerOptions": { - "sourceMap": false, - "outDir": "../../dist/out-tsc", - "allowJs": true, - "types": ["cypress", "node"] - }, - "include": ["src/**/*.ts", "src/**/*.js", "cypress.config.ts"] -} diff --git a/apps/site/.eslintrc.json b/apps/site/.eslintrc.json deleted file mode 100644 index 12e8399a..00000000 --- a/apps/site/.eslintrc.json +++ /dev/null @@ -1,31 +0,0 @@ -{ - "extends": [ - "plugin:@nrwl/nx/react-typescript", - "next", - "next/core-web-vitals", - "../../.eslintrc.json" - ], - "ignorePatterns": ["!**/*", ".next/**/*"], - "overrides": [ - { - "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], - "rules": { - "@next/next/no-html-link-for-pages": ["error", "apps/site/pages"] - } - }, - { - "files": ["*.ts", "*.tsx"], - "rules": {} - }, - { - "files": ["*.js", "*.jsx"], - "rules": {} - } - ], - "rules": { - "@next/next/no-html-link-for-pages": "off" - }, - "env": { - "jest": true - } -} diff --git a/apps/site/README.md b/apps/site/README.md deleted file mode 100644 index 2b444666..00000000 --- a/apps/site/README.md +++ /dev/null @@ -1,19 +0,0 @@ -This the Portal.JS website. - -It is built on [Next.js](https://nextjs.org/). - -## Getting Started - -First, run the development server: - -```bash -npm run dev -# or -yarn dev -``` - -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. - -## Deployment - -We currently deploy on Vercel. diff --git a/apps/site/components/CustomLink.js b/apps/site/components/CustomLink.js deleted file mode 100644 index c311089d..00000000 --- a/apps/site/components/CustomLink.js +++ /dev/null @@ -1,16 +0,0 @@ -import Link from "next/link"; - -export default function CustomLink({ as, href, ...otherProps }) { - return ( - <> - - - - - - ); -} diff --git a/apps/site/components/DataLiterate.js b/apps/site/components/DataLiterate.js deleted file mode 100644 index e7f6b737..00000000 --- a/apps/site/components/DataLiterate.js +++ /dev/null @@ -1,47 +0,0 @@ -import Layout from '../components/Layout' - -import { MDXRemote } from 'next-mdx-remote' -import dynamic from 'next/dynamic' -import Head from 'next/head' -import Link from 'next/link' - -import CustomLink from '../components/CustomLink' -import { Vega, VegaLite } from 'react-vega' - -// Custom components/renderers to pass to MDX. -// Since the MDX files aren't loaded by webpack, they have no knowledge of how -// to handle import statements. Instead, you must include components in scope -// here. -const components = { - a: CustomLink, - Table: dynamic(() => import('../components/Table')), - Excel: dynamic(() => import('../components/Excel')), - // TODO: try and make these dynamic ... - Vega: Vega, - VegaLite: VegaLite, - LineChart: dynamic(() => import('../components/LineChart')), - Head, -} - -export default function DataLiterate({ children, source, frontMatter }) { - return ( - -
-
-
-

{frontMatter.title}

- {frontMatter.author && ( -

{frontMatter.author}

- )} - {frontMatter.description && ( -

{frontMatter.description}

- )} -
-
-
- -
-
- - ) -} diff --git a/apps/site/components/Excel.js b/apps/site/components/Excel.js deleted file mode 100644 index 1f69d950..00000000 --- a/apps/site/components/Excel.js +++ /dev/null @@ -1,74 +0,0 @@ -import axios from 'axios' -import * as XLSX from 'xlsx' -import React, { useEffect, useState } from 'react' - -import Table from './Table' - -export default function Excel ({ src='' }) { - const [data, setData] = React.useState([]) - const [cols, setCols] = React.useState([]) - const [workbook, setWorkbook] = React.useState(null) - const [error, setError] = React.useState('') - const [hasMounted, setHasMounted] = React.useState(0) - - // so this is here so we re-render this in the browser - // and not just when we build the page statically in nextjs - useEffect(() => { - if (hasMounted==0) { - handleUrl(src) - } - setHasMounted(1) - }) - - function handleUrl(url) { - // if url is external may have CORS issue so we proxy it ... - if (url.startsWith('http')) { - const PROXY_URL = window.location.origin + '/api/proxy' - url = PROXY_URL + '?url=' + encodeURIComponent(url) - } - axios.get(url, { - responseType: 'arraybuffer' - }).then((res) => { - let out = new Uint8Array(res.data) - let workbook = XLSX.read(out, {type: "array"}) - // Get first worksheet - const wsname = workbook.SheetNames[0] - const ws = workbook.Sheets[wsname] - // Convert array of arrays - const datatmp = XLSX.utils.sheet_to_json(ws, {header:1}) - const colstmp = make_cols(ws['!ref']) - setData(datatmp) - setCols(colstmp) - setWorkbook(workbook) - }).catch((e) => { - setError(e.message) - }) - } - - return ( - <> - {error && -
- There was an error loading the excel file at {src}: -

{error}

-
- } - {workbook && -
    - {workbook.SheetNames.map((value, index) => { - return
  • {value}
    • - })} -
- } -
- - ) -} - -/* generate an array of column objects */ -const make_cols = refstr => { - let o = [], C = XLSX.utils.decode_range(refstr).e.c + 1 - for(var i = 0; i < C; ++i) o[i] = {name:XLSX.utils.encode_col(i), key:i} - return o -} - diff --git a/apps/site/components/ExcelViewerApp.js b/apps/site/components/ExcelViewerApp.js deleted file mode 100644 index d1505afe..00000000 --- a/apps/site/components/ExcelViewerApp.js +++ /dev/null @@ -1,186 +0,0 @@ -import XLSX from 'xlsx'; -import React from 'react'; - -function SheetJSApp() { - const [data, setData] = React.useState([]); - const [cols, setCols] = React.useState([]); - - const handleFile = (file) => { - const reader = new FileReader(); - const rABS = !!reader.readAsBinaryString; - reader.onload = (e) => { - /* Parse data */ - const bstr = e.target.result; - const wb = XLSX.read(bstr, {type:rABS ? 'binary' : 'array'}); - displayWorkbook(wb); - }; - if(rABS) reader.readAsBinaryString(file); else reader.readAsArrayBuffer(file); - } - - const handleUrl = (url) => { - let oReq = new XMLHttpRequest(); - oReq.open("GET", url, true); - oReq.responseType = "arraybuffer"; - oReq.onload = function (e) { - let arraybuffer = oReq.response; - /* not responseText!! */ - - /* convert data to binary string */ - let data = new Uint8Array(arraybuffer); - let arr = new Array(); - for (let i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]); - let bstr = arr.join(""); - /* Call XLSX */ - let workbook = XLSX.read(bstr, {type: "binary"}); - displayWorkbook(workbook); - }; - - oReq.send(); - } - - const displayWorkbook = (wb) => { - /* Get first worksheet */ - const wsname = wb.SheetNames[0]; - const ws = wb.Sheets[wsname]; - /t Convert array of arrays */ - const data = XLSX.utils.sheet_to_json(ws, {header:1}); - /* Update state */ - setData(data); - setCols(make_cols(ws['!ref'])); - } - - return ( -
- -

Drag or choose a spreadsheet file

-
- -
- -
-

Enter spreadsheet URL

- -
-
- -
-
- ); -} - -if(typeof module !== 'undefined') module.exports = SheetJSApp - -/* -------------------------------------------------------------------------- */ - -/* - Simple HTML5 file drag-and-drop wrapper - usage: ... - handleFile(file:File):void; -*/ - -function DragDropFile({ handleFile, children }) { - const suppress = (e) => { e.stopPropagation(); e.preventDefault(); }; - const handleDrop = (e) => { e.stopPropagation(); e.preventDefault(); - const files = e.dataTransfer.files; - if(files && files[0]) handleFile(files[0]); - }; - - return ( -
- {children} -
- ); -} - -function UrlInput({ handleUrl }) { - const handleChange = (e) => { - const url = e.target.value; - if(url) handleUrl(url); - }; - - return ( - -
- -
- Here is one: http://localhost:3000/_files/eight-centuries-of-global-real-interest-rates-r-g-and-the-suprasecular-decline-1311-2018-data.xlsx -
- -
- - ) -} - -/* - Simple HTML5 file input wrapper - usage: - handleFile(file:File):void; -*/ - -function DataInput({ handleFile }) { - const handleChange = (e) => { - const files = e.target.files; - if(files && files[0]) handleFile(files[0]); - }; - - return ( -
-
- -
- -
- - ) -} - -/* - Simple HTML Table - usage: - data:Array >; - cols:Array<{name:string, key:number|string}>; -*/ -function OutTable({ data, cols }) { - return ( -
-
- - {cols.map((c) => )} - - - {data.map((r,i) => - {cols.map(c => )} - )} - -
{c.name}
{ r[c.key] }
-
- ); -} - -/* list of supported file types */ -const SheetJSFT = [ - "xlsx", "xlsb", "xlsm", "xls", "xml", "csv", "txt", "ods", "fods", "uos", "sylk", "dif", "dbf", "prn", "qpw", "123", "wb*", "wq*", "html", "htm" -].map(x => `.${x}`).join(","); - -/* generate an array of column objects */ -const make_cols = refstr => { - let o = [], C = XLSX.utils.decode_range(refstr).e.c + 1; - for(var i = 0; i < C; ++i) o[i] = {name:XLSX.utils.encode_col(i), key:i} - return o; -}; diff --git a/apps/site/components/Layout.js b/apps/site/components/Layout.js deleted file mode 100644 index b84fa8eb..00000000 --- a/apps/site/components/Layout.js +++ /dev/null @@ -1,32 +0,0 @@ -import Link from 'next/link' -import Head from 'next/head' - -import Nav from '../components/Nav' - -export default function Layout({ children, title = 'Home' }) { - return ( - <> - - Portal.JS - {title} - - - - -