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

src/pages/settings/profile/index.js

@@ -0,0 +1,15 @@
+import AppLayout from 'components/layout/AppLayout';
+import SettingsLayout from 'components/layout/SettingsLayout';
+import ProfileSettings from 'components/pages/settings/profile/ProfileSettings';
+import useMessages from 'components/hooks/useMessages';
+
+export default function () {
+  const { formatMessage, labels } = useMessages();
+  return (
+    <AppLayout title={`${formatMessage(labels.settings)} - ${formatMessage(labels.profile)}`}>
+      <SettingsLayout>
+        <ProfileSettings />
+      </SettingsLayout>
+    </AppLayout>
+  );
+}

src/pages/settings/teams/[id].js

@@ -0,0 +1,31 @@
+import AppLayout from 'components/layout/AppLayout';
+import SettingsLayout from 'components/layout/SettingsLayout';
+import TeamSettings from 'components/pages/settings/teams/TeamSettings';
+import { useRouter } from 'next/router';
+import useMessages from 'components/hooks/useMessages';
+
+export default function ({ disabled }) {
+  const router = useRouter();
+  const { id } = router.query;
+  const { formatMessage, labels } = useMessages();
+
+  if (!id || disabled) {
+    return null;
+  }
+
+  return (
+    <AppLayout title={`${formatMessage(labels.settings)} - ${formatMessage(labels.teams)}`}>
+      <SettingsLayout>
+        <TeamSettings teamId={id} />
+      </SettingsLayout>
+    </AppLayout>
+  );
+}
+
+export async function getServerSideProps() {
+  return {
+    props: {
+      disabled: !!process.env.CLOUD_MODE,
+    },
+  };
+}

src/pages/settings/teams/index.js

@@ -0,0 +1,27 @@
+import AppLayout from 'components/layout/AppLayout';
+import SettingsLayout from 'components/layout/SettingsLayout';
+import TeamsList from 'components/pages/settings/teams/TeamsList';
+import useMessages from 'components/hooks/useMessages';
+
+export default function ({ disabled }) {
+  const { formatMessage, labels } = useMessages();
+  if (disabled) {
+    return null;
+  }
+
+  return (
+    <AppLayout title={`${formatMessage(labels.settings)} - ${formatMessage(labels.teams)}`}>
+      <SettingsLayout>
+        <TeamsList />
+      </SettingsLayout>
+    </AppLayout>
+  );
+}
+
+export async function getServerSideProps() {
+  return {
+    props: {
+      disabled: !!process.env.CLOUD_MODE,
+    },
+  };
+}

src/pages/settings/users/[id].js

@@ -0,0 +1,31 @@
+import AppLayout from 'components/layout/AppLayout';
+import SettingsLayout from 'components/layout/SettingsLayout';
+import UserSettings from 'components/pages/settings/users/UserSettings';
+import { useRouter } from 'next/router';
+import useMessages from 'components/hooks/useMessages';
+
+export default function ({ disabled }) {
+  const router = useRouter();
+  const { id } = router.query;
+  const { formatMessage, labels } = useMessages();
+
+  if (!id || disabled) {
+    return null;
+  }
+
+  return (
+    <AppLayout title={`${formatMessage(labels.settings)} - ${formatMessage(labels.users)}`}>
+      <SettingsLayout>
+        <UserSettings userId={id} />
+      </SettingsLayout>
+    </AppLayout>
+  );
+}
+
+export async function getServerSideProps() {
+  return {
+    props: {
+      disabled: !!process.env.CLOUD_MODE,
+    },
+  };
+}

src/pages/settings/users/index.js

@@ -0,0 +1,27 @@
+import AppLayout from 'components/layout/AppLayout';
+import SettingsLayout from 'components/layout/SettingsLayout';
+import UsersList from 'components/pages/settings/users/UsersList';
+import useMessages from 'components/hooks/useMessages';
+
+export default function ({ disabled }) {
+  const { formatMessage, labels } = useMessages();
+  if (disabled) {
+    return null;
+  }
+
+  return (
+    <AppLayout title={`${formatMessage(labels.settings)} - ${formatMessage(labels.users)}`}>
+      <SettingsLayout>
+        <UsersList />
+      </SettingsLayout>
+    </AppLayout>
+  );
+}
+
+export async function getServerSideProps() {
+  return {
+    props: {
+      disabled: !!process.env.CLOUD_MODE,
+    },
+  };
+}

src/pages/settings/websites/[id].js

@@ -0,0 +1,31 @@
+import AppLayout from 'components/layout/AppLayout';
+import { useRouter } from 'next/router';
+import WebsiteSettings from 'components/pages/settings/websites/WebsiteSettings';
+import SettingsLayout from 'components/layout/SettingsLayout';
+import useMessages from 'components/hooks/useMessages';
+
+export default function ({ disabled }) {
+  const router = useRouter();
+  const { id } = router.query;
+  const { formatMessage, labels } = useMessages();
+
+  if (!id || disabled) {
+    return null;
+  }
+
+  return (
+    <AppLayout title={`${formatMessage(labels.settings)} - ${formatMessage(labels.websites)}`}>
+      <SettingsLayout>
+        <WebsiteSettings websiteId={id} />
+      </SettingsLayout>
+    </AppLayout>
+  );
+}
+
+export async function getServerSideProps() {
+  return {
+    props: {
+      disabled: !!process.env.CLOUD_MODE,
+    },
+  };
+}

src/pages/settings/websites/index.js

@@ -0,0 +1,27 @@
+import AppLayout from 'components/layout/AppLayout';
+import SettingsLayout from 'components/layout/SettingsLayout';
+import WebsitesList from 'components/pages/settings/websites/WebsitesList';
+import useMessages from 'components/hooks/useMessages';
+
+export default function ({ disabled }) {
+  const { formatMessage, labels } = useMessages();
+  if (disabled) {
+    return null;
+  }
+
+  return (
+    <AppLayout title={`${formatMessage(labels.settings)} - ${formatMessage(labels.websites)}`}>
+      <SettingsLayout>
+        <WebsitesList />
+      </SettingsLayout>
+    </AppLayout>
+  );
+}
+
+export async function getServerSideProps() {
+  return {
+    props: {
+      disabled: !!process.env.CLOUD_MODE,
+    },
+  };
+}