Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add PoC bit Header component and import/export #340

Draft
wants to merge 2 commits into
base: staging
Choose a base branch
from
Draft

Add PoC bit Header component and import/export #340

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f8bac73
Add PoC bit Header component and import/export
braddf Feb 15, 2023
3233686
Resolve multiple React @types
braddf Feb 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 61 additions & 0 deletions apps/nowcasting-app/.bitmap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
/* THIS IS A BIT-AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */

/**
* The Bitmap file is an auto generated file used by Bit to track all your Bit components. It maps the component to a folder in your file system.
* This file should be committed to VCS(version control).
* Components are listed using their component ID (https://bit.dev/docs/components/component-id).
* If you want to delete components you can use the "bit remove <component-id>" command.
* See the docs (https://bit.dev/docs/components/removing-components) for more information, or use "bit remove --help".
*/

{
"config/constants": {
"scope": "openclimatefix.nowcasting-ui",
"version": "2d85a41a06e6a88a47be7e9f6640e183f544f535",
"mainFile": "index.ts",
"rootDir": "nowcasting-ui/config/constants"
},
"helpers/global-state": {
"scope": "openclimatefix.nowcasting-ui",
"version": "3aa0ba6421560ebc771d20fb81da96890b4afe02",
"mainFile": "index.ts",
"rootDir": "nowcasting-ui/helpers/global-state"
},
"helpers/utils": {
"scope": "openclimatefix.nowcasting-ui",
"version": "5eef1983976f95dfdc73aca5b3dc7f9d388019ed",
"mainFile": "index.ts",
"rootDir": "nowcasting-ui/helpers/utils"
},
"icons/icons": {
"scope": "openclimatefix.nowcasting-ui",
"version": "ea31239d3480642c9ce2dbc77ffe0b5ed1b5ccdb",
"mainFile": "index.ts",
"rootDir": "nowcasting-ui/icons/icons"
},
"icons/logo": {
"scope": "openclimatefix.nowcasting-ui",
"version": "6667cb48e159b21398040cd4170154980398e1a2",
"mainFile": "index.ts",
"rootDir": "nowcasting-ui/icons/logo"
},
"layout/header": {
"scope": "openclimatefix.nowcasting-ui",
"version": "f649ced28a24a78d733ed24d1edad168057e7047",
"mainFile": "index.ts",
"rootDir": "nowcasting-ui/layout/header"
},
"misc/chart-info": {
"scope": "openclimatefix.nowcasting-ui",
"version": "78d53fbf60df1e82c9c0791f572e66fb4ad4e423",
"mainFile": "index.ts",
"rootDir": "nowcasting-ui/misc/chart-info"
},
"misc/tooltip": {
"scope": "openclimatefix.nowcasting-ui",
"version": "b2bc99110a7ea2ff6e0776bac58c72a9b5593080",
"mainFile": "index.ts",
"rootDir": "nowcasting-ui/misc/tooltip"
},
"$schema-version": "15.0.0"
}
121 changes: 1 addition & 120 deletions apps/nowcasting-app/components/layout/header/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,123 +8,4 @@ import { Dispatch, SetStateAction } from "react";
import { ExternalLinkIcon } from "../../icons/icons";
import useGlobalState from "../../helpers/globalState";

type HeaderLinkProps = {
url: string;
text: string;
className?: string;
disabled?: boolean;
currentView?: VIEWS;
view?: VIEWS;
setViewFunc?: Dispatch<SetStateAction<VIEWS>>;
};
const HeaderLink: React.FC<HeaderLinkProps> = ({
url,
text,
className,
disabled = false,
currentView,
view,
setViewFunc
}) => {
const computedClasses = classNames(
className || "",
disabled
? "text-gray-500 cursor-not-allowed"
: "text-white cursor-pointer hover:text-ocf-yellow-400",
"flex px-4 py-2 font-semibold text-sm"
);

// Denotes external link for styling
if (url.includes("http")) {
return (
<Menu.Item>
<a href={url} className={computedClasses} target="_blank" rel="noreferrer">
{text}
<ExternalLinkIcon className="inline-block w-3 h-3 ml-[6px] self-center text-inherit" />
</a>
</Menu.Item>
);
}

if (setViewFunc && view) {
const isCurrentView = currentView === view;
return (
<Menu.Item>
<a
className={classNames(computedClasses, isCurrentView ? "text-ocf-yellow" : "")}
onClick={() => setViewFunc(view)}
>
{text}
</a>
</Menu.Item>
);
}

return (
<Menu.Item>
{({ active }) => (
<Link href={url} className={classNames(computedClasses, active ? "text-ocf-yellow" : "")}>
{text}
</Link>
)}
</Menu.Item>
);
};

type HeaderProps = { view: VIEWS; setView: Dispatch<SetStateAction<VIEWS>> };

const Header: React.FC<HeaderProps> = ({ view, setView }) => {
return (
<header className="text-white text-right pl-3 pr-4 bg-black flex absolute top-0 w-full h-16 p-1 text-sm items-center z-30">
<div className="p-1 mt-1 items-end flex flex-col">
<a
className="flex h-6 w-auto mr-2"
target="_blank"
href="https://nowcasting.io/"
rel="noreferrer"
>
<img src="/NOWCASTING_Secondary-white.svg" alt="ofc" className="h-6 w-auto" />
</a>
<div className="mr-[6px] flex items-center">
<span className="block mr-[1px] font-light tracking-wide text-[10px]">powered by</span>
<OCFlogo />
</div>
</div>
<div className="grow text-center inline-flex px-8 gap-5 items-center">
<Menu>
<HeaderLink
url="/"
view={VIEWS.FORECAST}
currentView={view}
setViewFunc={setView}
text="PV Forecast"
/>
<HeaderLink
url="/"
view={VIEWS.SOLAR_SITES}
currentView={view}
setViewFunc={setView}
text="Solar Sites"
disabled
/>
<HeaderLink
url="/"
view={VIEWS.DELTA}
currentView={view}
setViewFunc={setView}
text="Delta"
/>
<HeaderLink
url="https://openclimatefix.notion.site/openclimatefix/Nowcasting-Documentation-0d718915650e4f098470d695aa3494bf"
text="Documentation"
/>
</Menu>
</div>
<div className="py-1">
<ProfileDropDown />
</div>
</header>
);
};

export default Header;
export { Header } from "@openclimatefix/nowcasting-ui.layout.header";
6 changes: 5 additions & 1 deletion apps/nowcasting-app/next.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
// https://docs.sentry.io/platforms/javascript/guides/nextjs/

const { withSentryConfig } = require("@sentry/nextjs");
const path = require("path");

const moduleExports = {
// Your existing module.exports
Expand All @@ -16,7 +17,10 @@ const sentryWebpackPluginOptions = {
// release, url, org, project, authToken, configFile, stripPrefix,
// urlPrefix, include, ignore

silent: true // Suppresses all logs
silent: true, // Suppresses all logs
alias: {
react: path.resolve("./node_modules/react")
}
// For all available options, see:
// https://github.com/getsentry/sentry-webpack-plugin#options.
};
Expand Down
135 changes: 135 additions & 0 deletions apps/nowcasting-app/nowcasting-ui/layout/header/profile-dropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,135 @@
import React, { Fragment } from "react";
import { Menu, Transition } from "@headlessui/react";
import { useUser } from "@auth0/nextjs-auth0";
// import { version } from "@openclimatefix/nowcasting-ui.config.package-json";
import {
classNames,
formatISODateStringHumanNumbersOnly
} from "@openclimatefix/nowcasting-ui.helpers.utils";
import Link from "next/link";
import { Tooltip } from "@openclimatefix/nowcasting-ui.misc.tooltip";
import { useGlobalState } from "@openclimatefix/nowcasting-ui.helpers.global-state";
import { ChartInfo } from "@openclimatefix/nowcasting-ui.misc.chart-info";
import { ExternalLinkIcon } from "@openclimatefix/nowcasting-ui.icons.icons";

interface IProfileDropDown {
version: string;
}

export const ProfileDropDown = ({ version }: IProfileDropDown) => {
const { user } = useUser();
const [show4hView, setShow4hView] = useGlobalState("show4hView");
const isStaging = process.env.NEXT_PUBLIC_VERCEL_ENV !== "production";

return (
<Menu as="div" className="relative z-20 ml-3">
<div>
<Menu.Button className="flex text-sm bg-white rounded-full overflow-hidden focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-danube-500">
<span className="sr-only">Open user menu</span>
<img className="w-8 h-8" src={(user && user.picture) || ""} alt="" />
</Menu.Button>
</div>
<Transition
as={Fragment}
enter="transition ease-out duration-200"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="absolute right-0 top-12 w-48 py-1 origin-top-right bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<Menu.Item>
<div className="px-4 pt-2 text-ocf-black-600 text-right">
<Tooltip tip={<ChartInfo />} position="left" className={"text-right"} fullWidth>
Data
</Tooltip>
</div>
</Menu.Item>
<Menu.Item>
<div className="px-4 pt-3 text-ocf-black-600 text-right">
<Tooltip
tip={
<div
onClick={() => {
var copyText = "[email protected]";
navigator.clipboard.writeText(copyText);
}}
className="cursor-pointer"
title="Copy Email to Clipboard"
>
Click to email OCF at <span>[email protected]</span>
</div>
}
position="left"
className={"text-right"}
fullWidth
>
<a href="mailto:[email protected]?subject=Nowcasting%20Feedback">
Help{" "}
<ExternalLinkIcon className="inline-block w-3 h-3 ml-[6px] mb-[1px] self-center text-inherit color-black" />
</a>
</Tooltip>
</div>
</Menu.Item>
<Menu.Item>
<div className="px-4 py-3 text-ocf-black-600 text-right">
<a
href="https://docs.google.com/forms/d/e/1FAIpQLSf08XJPFwsNHxYiHUTV4g9CHWQzxAn0gSiAXXFkaI_3wjpNWw/viewform"
target="_blank"
rel="noreferrer"
>
Give feedback{" "}
<ExternalLinkIcon className="inline-block w-3 h-3 ml-[6px] mb-[1px] self-center text-inherit color-black" />
</a>
</div>
</Menu.Item>

<div className="w-full border-t border-gray-300" />

<div className="px-4 pt-3">
<p className="text-xs font-medium text-ocf-black-300 truncate">Version {version}</p>
</div>
<div className="px-4 py-3">
<p className="text-xs text-ocf-black-300">Signed in as</p>
<p className="text-xs font-medium text-ocf-black-300 truncate">{user && user.email}</p>
</div>
<div className="w-full border-t border-gray-300" />
{isStaging && (
<Menu.Item>
{({ active }) => (
<div
className={classNames(
active ? "bg-gray-100" : "",
"block px-4 py-2 text-sm text-gray-700"
)}
>
<button
onClick={() => setShow4hView(!show4hView)}
className="ml-3 text-sx font-medium text-ocf-black-300 dark:text-gray-300"
>
{`${show4hView ? "Hide" : "Show"} 4-hour forecast`}
</button>
</div>
)}
</Menu.Item>
)}
<Menu.Item>
{({ active }) => (
<div
className={classNames(
active ? "bg-gray-100" : "",
"block px-4 py-2 text-sm text-gray-700"
)}
>
<Link href="/api/auth/logout">
<a>Sign out</a>
</Link>
</div>
)}
</Menu.Item>
</Menu.Items>
</Transition>
</Menu>
);
};
8 changes: 7 additions & 1 deletion apps/nowcasting-app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
"@auth0/nextjs-auth0": "^1.8.0",
"@headlessui/react": "^1.6.1",
"@heroicons/react": "^1.0.6",
"@openclimatefix/nowcasting-ui.layout.header": "^0.0.0-f649ced28a24a78d733ed24d1edad168057e7047",
"@react-icons/all-files": "^4.1.0",
"@sentry/nextjs": "^6.19.7",
"axios": "^0.27.2",
Expand All @@ -32,7 +33,7 @@
"devDependencies": {
"@babel/core": "^7.19.1",
"@babel/eslint-parser": "^7.19.1",
"@openclimatefix/nowcasting-tsconfig": "*",
"@openclimatefix/nowcasting-tsconfig": "file:../../packages/nowcasting-tsconfig",
"@storybook/addon-actions": "^6.4.22",
"@storybook/addon-essentials": "^6.4.22",
"@storybook/addon-links": "^6.4.22",
Expand All @@ -42,6 +43,7 @@
"@storybook/react": "^6.4.22",
"@tailwindcss/forms": "^0.5.1",
"@tailwindcss/typography": "^0.5.2",
"@testing-library/react": "^13.4.0",
"@types/leaflet": "^1.7.9",
"@types/mapbox-gl": "^2.7.2",
"@types/react": "^17.0.38",
Expand All @@ -60,6 +62,10 @@
"tailwindcss": "^3.0.24",
"typescript": "^4.6.4"
},
"resolutions": {
"@types/react": "17.0.2",
"@types/react-dom": "17.0.2"
},
"prettier": {
"trailingComma": "none",
"tabWidth": 2,
Expand Down
Loading