Basic layout/issue #12 (#24)

* Initial structure. List and Detail pages + utils hooks. #3 * Container components + services + models. #3 * Adding List Page. #4 * Json component. #3 * Adding transformer and viewModels. #3 * Adding comments. #3 * Changing projectShortName to projectTitle. #3 * LinkTable component + list transformer. #4 * Fix. #4 * Adding vscode folder to gitignore #3 * generating static html * adding prettier * Config eslint * Adding husky pre-commit. #8 * husky fixes. #8 * setting correct folder * Build all detail pages. #9 * downgrading react and adding react-table. #10 * Adding react-table. #10 * React table type definition. #10 * Changing LinkTable to React-Table. #10 * Creating layout structure. #12 * Adding storybook. #12
DataBiosphere · May 13, 2022 · ae5e596 · ae5e596
1 parent 1d8edac
commit ae5e596
Show file tree

Hide file tree

Showing 18 changed files with 29,389 additions and 2,643 deletions.
diff --git a/explorer/.eslintrc.json b/explorer/.eslintrc.json
@@ -6,6 +6,7 @@
     "plugin:@typescript-eslint/recommended",
     "prettier",
     "plugin:prettier/recommended",
+    "plugin:storybook/recommended",
     "next"
   ]
 }
diff --git a/explorer/.storybook/main.js b/explorer/.storybook/main.js
@@ -0,0 +1,12 @@
+module.exports = {
+  "stories": [
+    "../app/**/*.stories.mdx",
+    "../app/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions"
+  ],
+  "framework": "@storybook/react"
+}
diff --git a/explorer/.storybook/preview.js b/explorer/.storybook/preview.js
@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}
diff --git a/explorer/app/components/Body/Body.tsx b/explorer/app/components/Body/Body.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+
+interface BodyProps {
+  children: React.ReactNode | React.ReactNode[];
+}
+
+export const Body = ({ children }: BodyProps) => {
+  return <div>{children}</div>;
+};
diff --git a/explorer/app/components/Body/index.ts b/explorer/app/components/Body/index.ts
@@ -0,0 +1 @@
+export { Body } from "./Body";
diff --git a/explorer/app/components/Footer/Footer.tsx b/explorer/app/components/Footer/Footer.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+
+interface FooterProps {
+  children: React.ReactNode | React.ReactNode[];
+}
+
+export const Footer = ({ children }: FooterProps) => {
+  return <footer>{children}</footer>;
+};
diff --git a/explorer/app/components/Footer/index.ts b/explorer/app/components/Footer/index.ts
@@ -0,0 +1 @@
+export { Footer } from "./Footer";
diff --git a/explorer/app/components/Header/Header.stories.tsx b/explorer/app/components/Header/Header.stories.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { Header } from "./Header";
+
+export default {
+  title: "Components/Header",
+  component: Header,
+  argTypes: {
+    children: { control: "object" },
+  },
+} as ComponentMeta<typeof Header>;
+
+const Template: ComponentStory<typeof Header> = (args) => <Header {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  children: "Header",
+};
diff --git a/explorer/app/components/Header/Header.tsx b/explorer/app/components/Header/Header.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+
+interface HeaderProps {
+  children: React.ReactNode | React.ReactNode[];
+}
+
+export const Header = ({ children }: HeaderProps) => {
+  return <header>{children}</header>;
+};
diff --git a/explorer/app/components/Header/index.ts b/explorer/app/components/Header/index.ts
@@ -0,0 +1 @@
+export { Header } from "./Header";
diff --git a/explorer/app/components/Page/Page.tsx b/explorer/app/components/Page/Page.tsx
@@ -0,0 +1,25 @@
+/**
+ * Page component will hold page's structure, header, content and footer.
+ * Header and Footer will be configurable through props.
+ */
+
+import React from "react";
+import { Body } from "../Body";
+import { Footer } from "../Footer";
+import { Header } from "../Header";
+
+interface PageProps {
+  children: React.ReactNode | React.ReactNode[];
+}
+
+export const Page = ({ children }: PageProps) => {
+  return (
+    //FIXME: Styling will change when we decide about the approach we want to
+    //   follow for this project
+    <div style={{ display: "flex", flexDirection: "column" }}>
+      <Header>Header</Header>
+      <Body>{children}</Body>
+      <Footer>Footer</Footer>
+    </div>
+  );
+};
diff --git a/explorer/app/components/Page/index.ts b/explorer/app/components/Page/index.ts
@@ -0,0 +1 @@
+export { Page } from "./Page";
diff --git a/explorer/app/components/index.ts b/explorer/app/components/index.ts
@@ -1,3 +1,7 @@
 export * from "./PrettyJSON";
 export * from "./LinkTable";
 export * from "./Table";
+export * from "./Body";
+export * from "./Footer";
+export * from "./Header";
+export * from "./Page";
diff --git a/explorer/app/models/responses.ts b/explorer/app/models/responses.ts
@@ -6,7 +6,7 @@ interface PaginatedResponse {
     count: number;
     total: number;
     size: number;
-    next: string;
+    next?: string;
     previous?: string;
     pages: number;
     sort: string;