Moved code into src folder. Added build for component library.

.eslintrc.json

@@ -19,22 +19,21 @@
     "plugin:@typescript-eslint/recommended",
     "next"
   ],
-
   "plugins": ["@typescript-eslint", "prettier"],
   "settings": {
     "import/resolver": {
       "alias": {
         "map": [
-          ["assets", "./assets"],
-          ["components", "./components"],
+          ["assets", "./src/assets"],
+          ["components", "./src/components"],
           ["db", "./db"],
-          ["hooks", "./hooks"],
-          ["lang", "./lang"],
-          ["lib", "./lib"],
+          ["hooks", "./src/components/hooks"],
+          ["lang", "./src/lang"],
+          ["lib", "./src/lib"],
           ["public", "./public"],
-          ["queries", "./queries"],
-          ["store", "./store"],
-          ["styles", "./styles"]
+          ["queries", "./src/queries"],
+          ["store", "./src/store"],
+          ["styles", "./src/styles"]
         ],
         "extensions": [".ts", ".tsx", ".js", ".jsx", ".json"]
       }

jsconfig.json

@@ -1,5 +1,5 @@
 {
   "compilerOptions": {
-    "baseUrl": "."
+    "baseUrl": "./src"
   }
-}
+}

package.components.json

@@ -0,0 +1,10 @@
+{
+  "name": "@umami/components",
+  "version": "0.1.0",
+  "description": "Umami React components.",
+  "author": "Mike Cao <mike@mikecao.com>",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts"
+}

package.json

@@ -18,7 +18,8 @@
     "start-env": "node scripts/start-env.js",
     "start-server": "node server.js",
     "build-app": "next build",
-    "build-tracker": "rollup -c rollup.tracker.config.js",
+    "build-components": "rollup -c rollup.components.config.mjs",
+    "build-tracker": "rollup -c rollup.tracker.config.mjs",
     "build-db": "npm-run-all copy-db-files build-db-client",
     "build-lang": "npm-run-all format-lang compile-lang download-country-names download-language-names",
     "build-geo": "node scripts/build-geo.js",
@@ -115,13 +116,16 @@
     "@formatjs/cli": "^4.2.29",
     "@netlify/plugin-nextjs": "^4.27.3",
     "@rollup/plugin-alias": "^5.0.0",
-    "@rollup/plugin-buble": "^0.21.3",
-    "@rollup/plugin-commonjs": "^24.1.0",
+    "@rollup/plugin-buble": "^1.0.2",
+    "@rollup/plugin-commonjs": "^25.0.4",
     "@rollup/plugin-json": "^6.0.0",
-    "@rollup/plugin-node-resolve": "^15.0.2",
-    "@rollup/plugin-replace": "^4.0.0",
-    "@svgr/rollup": "^7.0.0",
+    "@rollup/plugin-node-resolve": "^15.2.0",
+    "@rollup/plugin-replace": "^5.0.2",
+    "@svgr/rollup": "^8.1.0",
     "@svgr/webpack": "^6.2.1",
+    "@types/node": "^18.11.9",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.8",
     "@typescript-eslint/eslint-plugin": "^5.50.0",
     "@typescript-eslint/parser": "^5.50.0",
     "cross-env": "^7.0.3",
@@ -143,11 +147,12 @@
     "prettier": "^2.6.2",
     "prisma": "5.0.0",
     "prompts": "2.4.2",
-    "rollup": "^2.70.1",
+    "rollup": "^3.28.0",
+    "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-delete": "^2.0.0",
-    "rollup-plugin-dts": "^5.3.0",
+    "rollup-plugin-dts": "^6.0.0",
     "rollup-plugin-esbuild": "^5.0.0",
-    "rollup-plugin-node-externals": "^5.1.2",
+    "rollup-plugin-node-externals": "^6.1.1",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
     "stylelint": "^15.10.1",
@@ -156,6 +161,6 @@
     "stylelint-config-recommended": "^9.0.0",
     "tar": "^6.1.2",
     "ts-node": "^10.9.1",
-    "typescript": "^4.9.5"
+    "typescript": "^5.1.6"
   }
 }

rollup.components.config.mjs

@@ -0,0 +1,99 @@
+import path from 'path';
+import crypto from 'crypto';
+import resolve from '@rollup/plugin-node-resolve';
+import alias from '@rollup/plugin-alias';
+import json from '@rollup/plugin-json';
+import postcss from 'rollup-plugin-postcss';
+import copy from 'rollup-plugin-copy';
+import del from 'rollup-plugin-delete';
+import nodeExternals from 'rollup-plugin-node-externals';
+import esbuild from 'rollup-plugin-esbuild';
+import dts from 'rollup-plugin-dts';
+import svgr from '@svgr/rollup';
+
+const md5 = str => crypto.createHash('md5').update(str).digest('hex');
+
+const customResolver = resolve({
+  extensions: ['.js', '.jsx', '.ts', '.tsx'],
+});
+
+const aliasConfig = {
+  entries: [
+    { find: /^components/, replacement: path.resolve('./src/components') },
+    { find: /^hooks/, replacement: path.resolve('./src/hooks') },
+    { find: /^lib/, replacement: path.resolve('./src/lib') },
+    { find: /^store/, replacement: path.resolve('./src/store') },
+    { find: /^public/, replacement: path.resolve('./public') },
+    { find: /^assets/, replacement: path.resolve('./src/assets') },
+  ],
+  customResolver,
+};
+
+const external = [
+  'react',
+  'react-dom',
+  'react/jsx-runtime',
+  'react-intl',
+  'react-basics',
+  'classnames',
+  'next',
+];
+
+const jsBundle = {
+  input: 'src/index.ts',
+  output: [
+    {
+      file: 'dist/index.js',
+      format: 'cjs',
+      sourcemap: true,
+    },
+    {
+      file: 'dist/index.mjs',
+      format: 'es',
+      sourcemap: true,
+    },
+  ],
+  plugins: [
+    del({ targets: 'dist/*', runOnce: true }),
+    copy({ targets: [{ src: './package.components.json', dest: 'dist', rename: 'package.json' }] }),
+    postcss({
+      config: false,
+      extract: 'styles.css',
+      sourceMap: true,
+      minimize: true,
+      modules: {
+        generateScopedName: function (name, filename, css) {
+          const file = path.basename(filename, '.css').replace('.module', '');
+          const hash = Buffer.from(md5(`${name}:${filename}:${css}`))
+            .toString('base64')
+            .substring(0, 5);
+
+          return `${file}-${name}--${hash}`;
+        },
+      },
+    }),
+    svgr({ icon: true }),
+    nodeExternals(),
+    json(),
+    alias(aliasConfig),
+    esbuild({
+      target: 'es6',
+      jsx: 'transform',
+      loaders: {
+        '.js': 'jsx',
+      },
+    }),
+  ],
+};
+
+const dtsBundle = {
+  input: 'src/index.ts',
+  output: {
+    file: 'dist/index.d.ts',
+    format: 'es',
+  },
+  plugins: [alias(aliasConfig), nodeExternals(), json(), dts()],
+  external: [/\.css/],
+};
+
+export default [jsBundle, dtsBundle];

rollup.tracker.config.mjs

@@ -4,7 +4,7 @@ import replace from '@rollup/plugin-replace';
 import { terser } from 'rollup-plugin-terser';
 
 export default {
-  input: 'tracker/index.js',
+  input: 'src/tracker/index.js',
   output: {
     file: 'public/script.js',
     format: 'iife',

scripts/check-lang.js

@@ -2,7 +2,7 @@
 const fs = require('fs');
 const path = require('path');
 const chalk = require('chalk');
-const messages = require('../lang/en-US.json');
+const messages = require('../src/lang/en-US.json');
 const ignore = require('../lang-ignore.json');
 
 const dir = path.resolve(__dirname, '../lang');

src/components/common/ConfirmDeleteForm.js

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Button, LoadingButton, Form, FormButtons } from 'react-basics';
-import useMessages from 'hooks/useMessages';
+import useMessages from 'components/hooks/useMessages';
 
 export function ConfirmDeleteForm({ name, onConfirm, onClose }) {
   const [loading, setLoading] = useState(false);

src/components/common/Empty.js

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import styles from './Empty.module.css';
-import useMessages from 'hooks/useMessages';
+import useMessages from 'components/hooks/useMessages';
 
 export function Empty({ message, className }) {
   const { formatMessage, messages } = useMessages();

src/components/common/ErrorBoundary.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import { ErrorBoundary as Boundary } from 'react-error-boundary';
 import { Button } from 'react-basics';
-import useMessages from 'hooks/useMessages';
+import useMessages from 'components/hooks/useMessages';
 import styles from './ErrorBoundry.module.css';
 
 const logError = (error, info) => {

src/components/common/ErrorMessage.js

@@ -1,6 +1,6 @@
 import { Icon, Icons, Text } from 'react-basics';
 import styles from './ErrorMessage.module.css';
-import useMessages from 'hooks/useMessages';
+import useMessages from 'components/hooks/useMessages';
 
 export function ErrorMessage() {
   const { formatMessage, messages } = useMessages();

src/components/common/FilterLink.js

@@ -2,8 +2,8 @@ import { Icon, Icons } from 'react-basics';
 import classNames from 'classnames';
 import Link from 'next/link';
 import { safeDecodeURI } from 'next-basics';
-import usePageQuery from 'hooks/usePageQuery';
-import useMessages from 'hooks/useMessages';
+import usePageQuery from 'components/hooks/usePageQuery';
+import useMessages from 'components/hooks/useMessages';
 import styles from './FilterLink.module.css';
 
 export function FilterLink({ id, value, label, externalUrl, children, className }) {

src/components/common/HamburgerButton.js

@@ -2,8 +2,8 @@ import { Button, Icon } from 'react-basics';
 import { useState } from 'react';
 import MobileMenu from './MobileMenu';
 import Icons from 'components/icons';
-import useMessages from 'hooks/useMessages';
-import useConfig from 'hooks/useConfig';
+import useMessages from 'components/hooks/useMessages';
+import useConfig from 'components/hooks/useConfig';
 
 export function HamburgerButton() {
   const { formatMessage, labels } = useMessages();

src/components/common/LinkButton.js

@@ -2,7 +2,7 @@ import Link from 'next/link';
 import { Icon, Icons, Text } from 'react-basics';
 import styles from './LinkButton.module.css';
 
-export default function LinkButton({ href, icon, children }) {
+export function LinkButton({ href, icon, children }) {
   return (
     <Link className={styles.button} href={href}>
       <Icon>{icon || <Icons.ArrowRight />}</Icon>
@@ -10,3 +10,5 @@ export default function LinkButton({ href, icon, children }) {
     </Link>
   );
 }
+
+export default LinkButton;

src/components/common/Pager.js

@@ -1,6 +1,6 @@
 import styles from './Pager.module.css';
 import { Button, Flexbox, Icon, Icons } from 'react-basics';
-import useMessages from 'hooks/useMessages';
+import useMessages from 'components/hooks/useMessages';
 
 export function Pager({ page, pageSize, count, onPageChange }) {
   const { formatMessage, labels } = useMessages();

src/components/common/SettingsTable.js

@@ -1,5 +1,5 @@
 import Empty from 'components/common/Empty';
-import useMessages from 'hooks/useMessages';
+import useMessages from 'components/hooks/useMessages';
 import { useState } from 'react';
 import {
   SearchField,

src/components/common/UpdateNotice.js

@@ -4,7 +4,7 @@ import { setItem } from 'next-basics';
 import useStore, { checkVersion } from 'store/version';
 import { REPO_URL, VERSION_CHECK } from 'lib/constants';
 import styles from './UpdateNotice.module.css';
-import useMessages from 'hooks/useMessages';
+import useMessages from 'components/hooks/useMessages';
 import { useRouter } from 'next/router';
 
 export function UpdateNotice({ user, config }) {

src/components/common/WorldMap.js

@@ -5,9 +5,9 @@ import classNames from 'classnames';
 import { colord } from 'colord';
 import HoverTooltip from 'components/common/HoverTooltip';
 import { ISO_COUNTRIES, MAP_FILE } from 'lib/constants';
-import useTheme from 'hooks/useTheme';
-import useCountryNames from 'hooks/useCountryNames';
-import useLocale from 'hooks/useLocale';
+import useTheme from 'components/hooks/useTheme';
+import useCountryNames from 'components/hooks/useCountryNames';
+import useLocale from 'components/hooks/useLocale';
 import { formatLongNumber } from 'lib/format';
 import { percentFilter } from 'lib/filters';
 import styles from './WorldMap.module.css';

src/components/hooks/useConfig.js

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import useStore, { setConfig } from 'store/app';
-import useApi from 'hooks/useApi';
+import useApi from 'components/hooks/useApi';
 
 let loading = false;
 

src/components/hooks/useFilters.js

@@ -1,4 +1,4 @@
-import { useMessages } from 'hooks';
+import { useMessages } from './useMessages';
 import { OPERATORS } from 'lib/constants';
 
 export function useFilters() {

src/components/hooks/useLocale.js

@@ -4,7 +4,7 @@ import { httpGet, setItem } from 'next-basics';
 import { LOCALE_CONFIG } from 'lib/constants';
 import { getDateLocale, getTextDirection } from 'lib/lang';
 import useStore, { setLocale } from 'store/app';
-import useForceUpdate from 'hooks/useForceUpdate';
+import useForceUpdate from 'components/hooks/useForceUpdate';
 import enUS from 'public/intl/messages/en-US.json';
 
 const messages = {

src/components/hooks/useReports.js

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import useApi from './useApi';
-import useApiFilter from 'hooks/useApiFilter';
+import useApiFilter from 'components/hooks/useApiFilter';
 
 export function useReports() {
   const [modified, setModified] = useState(Date.now());

src/components/hooks/useRequireLogin.js

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { useRouter } from 'next/router';
-import useApi from 'hooks/useApi';
-import useUser from 'hooks/useUser';
+import useApi from 'components/hooks/useApi';
+import useUser from 'components/hooks/useUser';
 
 export function useRequireLogin() {
   const router = useRouter();

src/components/hooks/useWebsiteReports.js

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import useApi from './useApi';
-import useApiFilter from 'hooks/useApiFilter';
+import useApiFilter from 'components/hooks/useApiFilter';
 
 export function useWebsiteReports(websiteId) {
   const [modified, setModified] = useState(Date.now());

src/components/icons.ts

@@ -22,7 +22,7 @@ import User from 'assets/user.svg';
 import Users from 'assets/users.svg';
 import Visitor from 'assets/visitor.svg';
 
-const icons = {
+const icons: any = {
   ...Icons,
   AddUser,
   Bars,

src/components/input/DateFilter.js

@@ -2,10 +2,10 @@ import { useState } from 'react';
 import { Icon, Modal, Dropdown, Item, Text, Flexbox } from 'react-basics';
 import { endOfYear, isSameDay } from 'date-fns';
 import DatePickerForm from 'components/metrics/DatePickerForm';
-import useLocale from 'hooks/useLocale';
+import useLocale from 'components/hooks/useLocale';
 import { formatDate } from 'lib/date';
 import Icons from 'components/icons';
-import useMessages from 'hooks/useMessages';
+import useMessages from 'components/hooks/useMessages';
 
 export function DateFilter({
   value,

src/components/input/LanguageButton.js

@@ -1,7 +1,7 @@
 import { Icon, Button, PopupTrigger, Popup, Text } from 'react-basics';
 import classNames from 'classnames';
 import { languages } from 'lib/lang';
-import useLocale from 'hooks/useLocale';
+import useLocale from 'components/hooks/useLocale';
 import Icons from 'components/icons';
 import styles from './LanguageButton.module.css';
 

src/components/input/LogoutButton.js

@@ -1,11 +1,11 @@
 import { Button, Icon, Icons, TooltipPopup } from 'react-basics';
 import Link from 'next/link';
-import useMessages from 'hooks/useMessages';
+import useMessages from 'components/hooks/useMessages';
 
 export function LogoutButton({ tooltipPosition = 'top' }) {
   const { formatMessage, labels } = useMessages();
   return (
-    <Link href="/logout">
+    <Link href="/src/pages/logout">
       <TooltipPopup label={formatMessage(labels.logout)} position={tooltipPosition}>
         <Button variant="quiet">
           <Icon>

src/components/input/MonthSelect.js

@@ -10,7 +10,7 @@ import {
 } from 'react-basics';
 import { startOfMonth, endOfMonth } from 'date-fns';
 import Icons from 'components/icons';
-import { useLocale } from 'hooks';
+import { useLocale } from 'components/hooks';
 import { formatDate } from 'lib/date';
 import { getDateLocale } from 'lib/lang';
 import styles from './MonthSelect.module.css';

src/components/input/ProfileButton.js

@@ -1,11 +1,11 @@
 import { Icon, Button, PopupTrigger, Popup, Menu, Item, Text } from 'react-basics';
 import { useRouter } from 'next/router';
 import Icons from 'components/icons';
-import useMessages from 'hooks/useMessages';
-import useUser from 'hooks/useUser';
-import useConfig from 'hooks/useConfig';
+import useMessages from 'components/hooks/useMessages';
+import useUser from 'components/hooks/useUser';
+import useConfig from 'components/hooks/useConfig';
 import styles from './ProfileButton.module.css';
-import useLocale from 'hooks/useLocale';
+import useLocale from 'components/hooks/useLocale';
 
 export function ProfileButton() {
   const { formatMessage, labels } = useMessages();

src/components/input/RefreshButton.js

@@ -1,8 +1,8 @@
 import { LoadingButton, Icon, TooltipPopup } from 'react-basics';
 import { setWebsiteDateRange } from 'store/websites';
-import useDateRange from 'hooks/useDateRange';
+import useDateRange from 'components/hooks/useDateRange';
 import Icons from 'components/icons';
-import useMessages from 'hooks/useMessages';
+import useMessages from 'components/hooks/useMessages';
 
 export function RefreshButton({ websiteId, isLoading }) {
   const { formatMessage, labels } = useMessages();