@oliasoft-open-source/react-ui-library 1.0.0

package/src/components/layout/examples/casing-loads.stories.jsx

@@ -0,0 +1,297 @@
+import React, { useState } from 'react';
+import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
+import {
+  TopBar,
+  SideBar,
+  Heading,
+  Button,
+  Drawer,
+  List,
+  Field,
+  Input,
+  Modal,
+  Dialog,
+  CheckBox,
+  FormRow,
+  Page,
+  Row,
+  Column,
+  Select,
+  Spacer,
+  Tabs,
+  Table,
+} from '../../../..';
+
+export default {
+  title: 'Layout/Layout Examples',
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      inlineStories: false,
+      iframeHeight: 800,
+    },
+  },
+};
+
+export const CasingLoads = () => {
+  const [dialogOpen, setDialogOpen] = useState(false);
+
+  const SchematicPlaceholder = () => (
+    <div
+      style={{
+        color: '#aaa',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        position: 'absolute',
+        overflow: 'hidden',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+      }}
+    >
+      SCHEMATIC
+    </div>
+  );
+
+  const casingTabs = [
+    {
+      label: 'Casing Loads',
+      value: 'casingloads',
+    },
+    {
+      label: 'Plot Charts',
+      value: 'charts',
+    },
+  ];
+
+  const casingListData = {
+    name: 'Casing Loads',
+    items: [
+      {
+        id: 1,
+        name: 'Sections',
+        type: 'Heading',
+      },
+      {
+        id: 2,
+        name: '30" Conductor Casing',
+        active: true,
+      },
+      {
+        id: 3,
+        name: 'Ipsum',
+      },
+      {
+        id: 4,
+        name: 'Dolor',
+      },
+    ],
+  };
+
+  const loadsTableData = {
+    columnWidths: ['auto', 'auto', 'auto', 'auto', '1%'],
+    headers: [
+      {
+        cells: [
+          { value: 'Load case name' },
+          { value: 'Internal profile' },
+          { value: 'External profile' },
+          { value: 'Temperature profile' },
+          { value: '' },
+        ],
+      },
+    ],
+    rows: [
+      {
+        cells: [
+          { value: 'Load case 1' },
+          { value: 'Profile 1' },
+          { value: 'Profile 2' },
+          { value: 'Profile 3' },
+          { value: 'Edit', type: 'Link', onClick: () => setDialogOpen(true) },
+        ],
+      },
+      {
+        cells: [
+          { value: 'Load case 2' },
+          { value: 'Profile 1' },
+          { value: 'Profile 2' },
+          { value: 'Profile 3' },
+          { value: 'Edit', type: 'Link', onClick: () => setDialogOpen(true) },
+        ],
+      },
+    ],
+  };
+
+  const LoadCaseForm = () => (
+    <>
+      <Field label="Name">
+        <Input value="Load case 1" />
+      </Field>
+      <Spacer />
+      <Heading>Internal Profile</Heading>
+      <Spacer height="10px" />
+      <FormRow>
+        <Field label="Profile">
+          <Select
+            native
+            width="auto"
+            options={[
+              { label: 'Profile 1', value: '1' },
+              { label: 'Profile 2', value: '2' },
+            ]}
+          />
+        </Field>
+        <Field label="Influx depth">
+          <Input width="120px" />
+        </Field>
+        <Field label="Gas gradient">
+          <Input width="120px" />
+        </Field>
+        <Field label="Mud weight">
+          <Input width="120px" />
+        </Field>
+        <Field label="Input n">
+          <Input width="120px" />
+        </Field>
+        <Field>
+          <CheckBox label="Limit gas at shoe" />
+        </Field>
+      </FormRow>
+      <Spacer />
+      <Heading>External Profile</Heading>
+      <Spacer height="10px" />
+      <FormRow>
+        <Field label="Profile">
+          <Select
+            native
+            width="auto"
+            options={[
+              { label: 'Profile 1', value: '1' },
+              { label: 'Profile 2', value: '2' },
+            ]}
+          />
+        </Field>
+        <Field label="FG above TOC">
+          <Input width="120px" />
+        </Field>
+        <Field label="FG below TOC">
+          <Input width="120px" />
+        </Field>
+      </FormRow>
+      <Spacer />
+      <Heading>Temperature Profile</Heading>
+      <Spacer height="10px" />
+      <FormRow>
+        <Field label="Profile">
+          <Select
+            native
+            width="auto"
+            options={[
+              { label: 'Profile 1', value: '1' },
+              { label: 'Profile 2', value: '2' },
+            ]}
+          />
+        </Field>
+        <Field label="Custome table">
+          <Select
+            native
+            width="auto"
+            options={[
+              { label: 'Custome table 1', value: '1' },
+              { label: 'Custome table 2', value: '2' },
+            ]}
+          />
+        </Field>
+      </FormRow>
+    </>
+  );
+
+  const CasingLoadsList = () => {
+    const [open, setOpen] = useState(true);
+    return (
+      <Drawer
+        button={
+          <Button
+            onClick={() => setOpen(!open)}
+            round
+            icon={<FaChevronLeft />}
+          />
+        }
+        open={open}
+        width={300}
+        closedWidth={50}
+      >
+        <List drawer narrow={!open} list={casingListData} />
+      </Drawer>
+    );
+  };
+
+  const CasingLoadsSchematic = () => {
+    const [open, setOpen] = useState(true);
+    return (
+      <Drawer
+        right
+        background="white"
+        button={
+          <Button
+            onClick={() => setOpen(!open)}
+            round
+            icon={<FaChevronRight />}
+          />
+        }
+        open={open}
+        width={300}
+        closedWidth={50}
+      >
+        <SchematicPlaceholder />
+      </Drawer>
+    );
+  };
+
+  const CasingLoadsEditModal = () => (
+    <Modal visible={dialogOpen}>
+      <Dialog
+        dialog={{
+          heading: 'Load case 1',
+          content: <LoadCaseForm />,
+          footer: (
+            <>
+              <Button
+                label="Save"
+                colored
+                onClick={() => setDialogOpen(false)}
+              />
+              <Button label="Cancel" onClick={() => setDialogOpen(false)} />
+            </>
+          ),
+          onClose: () => setDialogOpen(false),
+        }}
+      />
+    </Modal>
+  );
+
+  return (
+    <>
+      <TopBar />
+      <SideBar options={{ title: '', sections: [] }} />
+      <Page padding={false} scroll={false}>
+        <Row spacing={0} flex>
+          <CasingLoadsList />
+          <Column borderLeft borderRight padding scroll>
+            <Heading top marginBottom={0}>
+              30&quot; Conductor Casing
+            </Heading>
+            <Tabs margin={false} options={casingTabs} value={casingTabs[0]} />
+            <Spacer />
+            <Table table={loadsTableData} />
+          </Column>
+          <CasingLoadsSchematic />
+        </Row>
+      </Page>
+      <CasingLoadsEditModal />
+    </>
+  );
+};

package/src/components/layout/examples/formation.stories.jsx

@@ -0,0 +1,110 @@
+import React, { useState } from 'react';
+import {
+  TopBar,
+  SideBar,
+  Heading,
+  Table,
+  Tabs,
+  Page,
+  Row,
+  Spacer,
+  Column,
+} from '../../../..';
+
+const ChartPlaceholder = () => (
+  <div
+    style={{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      background: 'rgba(0,0,0,0.05)',
+      height: '100%',
+      minHeight: 400,
+      textAlign: 'center',
+    }}
+  >
+    CHART <br />
+    (fills height, minHeight 400px)
+  </div>
+);
+
+export default {
+  title: 'Layout/Layout Examples',
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      inlineStories: false,
+      iframeHeight: 800,
+    },
+  },
+};
+
+export const Formation = () => {
+  const options = [
+    {
+      label: 'Monkeys',
+      value: 'monkeys',
+    },
+    {
+      label: 'Bananas',
+      value: 'bananas',
+    },
+    {
+      label: 'Squirrels',
+      value: 'squirrels',
+    },
+    {
+      label: 'Pomegranates',
+      value: 'pomegranates',
+    },
+  ];
+  const [selectedTab, setSelectedTab] = useState(options[0]);
+  return (
+    <>
+      <TopBar />
+      <SideBar options={{ title: '', sections: [] }} />
+      <Page padding="16px 20px" scroll>
+        <Heading top marginBottom={0}>
+          Formation Inputs
+        </Heading>
+        <Tabs
+          margin={false}
+          options={options}
+          value={selectedTab}
+          onChange={(evt) => {
+            const { value, label } = evt.target;
+            setSelectedTab({ value, label });
+          }}
+        />
+        <Spacer height={20} />
+        <Row flex>
+          <Column width={400}>
+            <Table
+              table={{
+                headers: [
+                  {
+                    cells: [{ value: 'Name' }, { value: 'Origin' }],
+                  },
+                ],
+                rows: [
+                  {
+                    cells: [{ value: 'Brown rice' }, { value: 'Vietnam' }],
+                  },
+                  {
+                    cells: [{ value: 'Buckwheat' }, { value: 'Poland' }],
+                  },
+                  {
+                    cells: [{ value: 'Couscous' }, { value: 'France' }],
+                  },
+                ],
+              }}
+            />
+          </Column>
+          <Column>
+            <ChartPlaceholder />
+          </Column>
+        </Row>
+      </Page>
+    </>
+  );
+};

package/src/components/layout/examples/projects.stories.jsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import { TopBar, List, Tabs, Page, Row, Column } from '../../../..';
+
+const tabs = [
+  {
+    label: 'Browse',
+    value: 'Browse',
+  },
+  {
+    label: 'Recent',
+    value: 'Recent',
+  },
+  {
+    label: 'My Projects',
+    value: 'My Projects',
+  },
+];
+
+const items = [
+  { id: 1, name: 'Lorem', active: true },
+  { id: 2, name: 'Ipsum' },
+  { id: 3, name: 'Dolor' },
+  { id: 4, name: 'Long name goes here lorem ipsum' },
+  { id: 5, name: 'Lorem' },
+  { id: 6, name: 'Ipsum' },
+  { id: 7, name: 'Dolor' },
+  { id: 8, name: 'Long name goes here lorem ipsum' },
+  { id: 9, name: 'Lorem' },
+  { id: 10, name: 'Ipsum' },
+  { id: 11, name: 'Dolor' },
+  { id: 12, name: 'Long name goes here lorem ipsum' },
+  { id: 13, name: 'Lorem' },
+  { id: 14, name: 'Ipsum' },
+  { id: 15, name: 'Dolor' },
+  { id: 16, name: 'Long name goes here lorem ipsum' },
+];
+
+export default {
+  title: 'Layout/Layout Examples',
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      inlineStories: false,
+      iframeHeight: 800,
+    },
+  },
+};
+
+export const Projects = () => {
+  return (
+    <>
+      <TopBar />
+      <Page padding={false} left={0} scroll={false}>
+        <Tabs margin={false} padding options={tabs} value={tabs[0]} />
+        <Row spacing={0} flex height="100%">
+          <Column borderRight scroll showScrollbar={false}>
+            <List
+              list={{
+                name: 'Country',
+                items,
+              }}
+            />
+          </Column>
+          <Column borderRight scroll showScrollbar={false}>
+            <List
+              list={{
+                name: 'Field',
+                items,
+              }}
+            />
+          </Column>
+          <Column borderRight scroll showScrollbar={false}>
+            <List
+              list={{
+                name: 'Site',
+                items,
+              }}
+            />
+          </Column>
+          <Column borderRight scroll showScrollbar={false}>
+            <List
+              list={{
+                name: 'Well',
+                items,
+              }}
+            />
+          </Column>
+          <Column borderRight scroll showScrollbar={false}>
+            <List
+              list={{
+                name: 'Wellbore',
+                items,
+              }}
+            />
+          </Column>
+          <Column scroll showScrollbar={false}>
+            <List
+              list={{
+                name: 'Design',
+                items,
+              }}
+            />
+          </Column>
+        </Row>
+      </Page>
+    </>
+  );
+};