@oliasoft-open-source/react-ui-library 2.4.8 → 3.0.0

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

@@ -1,180 +0,0 @@
-import React, { useState } from 'react';
-import { FaChevronLeft } from 'react-icons/fa';
-import {
-  Page,
-  Column,
-  Row,
-  FormRow,
-  TopBar,
-  SideBar,
-  Heading,
-  Button,
-  Drawer,
-  List,
-  Field,
-  Input,
-  Select,
-  CheckBox,
-  Tabs,
-  Accordion,
-  InputGroup,
-  InputGroupAddon,
-  Spacer,
-} from '../../../..';
-
-const options = [
-  {
-    label: 'Settings',
-    value: 'settings',
-  },
-  {
-    label: 'Simulation Results',
-    value: 'results',
-  },
-];
-const casingOptions = [
-  '30, Conductor, Casing',
-  '20, Surface, Casing',
-  '13 3/8, Intermediate, Casing',
-  '11 3/4, Surface, Casing',
-  '9 5/8, Production, Casing',
-];
-
-export default {
-  title: 'Layout/Layout Examples',
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      inlineStories: false,
-      iframeHeight: 800,
-    },
-  },
-};
-
-export const AFESimulation = () => {
-  const [open, setOpen] = useState(true);
-  const [selectedTab, setSelectedTab] = useState(options[0]);
-  return (
-    <>
-      <TopBar />
-      <SideBar options={{ title: '', sections: [] }} />
-      <Page padding={false} scroll={false}>
-        <Row spacing={0} height="100%">
-          <Drawer
-            button={
-              <Button
-                onClick={() => setOpen(!open)}
-                round
-                icon={<FaChevronLeft />}
-              />
-            }
-            open={open}
-            width={300}
-            closedWidth={50}
-          >
-            <List
-              drawer
-              narrow={!open}
-              list={{
-                name: 'AFE Simulation',
-                items: [
-                  {
-                    id: 1,
-                    name: 'Simulation name here',
-                    active: true,
-                  },
-                  {
-                    id: 2,
-                    name: 'Ipsum',
-                  },
-                ],
-              }}
-            />
-          </Drawer>
-          <Column scroll padding borderLeft>
-            <Heading top>Simulation name here</Heading>
-            <Tabs
-              options={options}
-              value={selectedTab}
-              onChange={(evt) => {
-                const { value, label } = evt.target;
-                setSelectedTab({ value, label });
-              }}
-            />
-            <FormRow>
-              <Field label="Name">
-                <Input value="Simulation name here" width="200px" />
-              </Field>
-              <Field label="Initial condition">
-                <Select
-                  options={[
-                    {
-                      label: 'E3 - Circulation through drillpipe',
-                      value: 'e3',
-                    },
-                  ]}
-                  value={{
-                    label: 'E3 - Circulation through drillpipe',
-                    value: 'e3',
-                  }}
-                  native
-                />
-              </Field>
-            </FormRow>
-            <Spacer />
-            {casingOptions.map((option) => (
-              <div key={option}>
-                <Accordion
-                  heading={<Heading>{option}</Heading>}
-                  managed
-                  bordered
-                >
-                  <FormRow>
-                    <Field label="Leak off @TVD 425">
-                      <CheckBox label="Use formation data" checked />
-                    </Field>
-                    <Field>
-                      <InputGroup>
-                        <Input
-                          width="200px"
-                          disabled
-                          value="1.532142857142857"
-                        />
-                        <InputGroupAddon>m</InputGroupAddon>
-                      </InputGroup>
-                    </Field>
-                    <Field>
-                      <CheckBox label="Gas cap" />
-                    </Field>
-                    <Field>
-                      <CheckBox label="Max allowable pressure buildup" />
-                    </Field>
-                  </FormRow>
-                </Accordion>
-                <Spacer height={5} />
-              </div>
-            ))}
-            <Spacer />
-            <Field label="Final condition">
-              <Select
-                options={[
-                  {
-                    label: 'Undisturbed',
-                    value: 'Undisturbed',
-                  },
-                ]}
-                value={{
-                  label: 'Undisturbed',
-                  value: 'Undisturbed',
-                }}
-                native
-                width="auto"
-              />
-            </Field>
-            <Button label="Simulate" colored />
-          </Column>
-        </Row>
-      </Page>
-    </>
-  );
-};

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

@@ -1,68 +0,0 @@
-import React from 'react';
-import { FaQuestion } from 'react-icons/fa';
-import {
-  TopBar,
-  SideBar,
-  Heading,
-  Button,
-  Card,
-  Column,
-  Row,
-  Page,
-  Spacer,
-} from '../../../..';
-
-const ImagePlaceholder = ({ width, height }) => (
-  <div style={{ background: '#ddd', width, height }}></div>
-);
-
-export default {
-  title: 'Layout/Layout Examples',
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      inlineStories: false,
-      iframeHeight: 800,
-    },
-  },
-};
-
-export const Blowout = () => {
-  return (
-    <>
-      <TopBar />
-      <SideBar options={{ title: '', sections: [] }} />
-      <Page padding="16px 20px">
-        <Row>
-          <Column width="80px">
-            <ImagePlaceholder width={60} height={80} />
-          </Column>
-          <Column>
-            <Heading top>Blowout Simulation</Heading>
-            <Button colored label="Save & run simulation" />
-          </Column>
-          <Column flex={false}>
-            <Button onClick={() => {}} round icon={<FaQuestion />} />
-          </Column>
-        </Row>
-        <Spacer />
-        <Row>
-          <Column>
-            <Card heading={<Heading>Reservoir Zones</Heading>}>Content</Card>
-            <Spacer />
-            <Card heading={<Heading>Simulation Models</Heading>}>Content</Card>
-            <Spacer />
-            <Card heading={<Heading>Simulation Options</Heading>}>Content</Card>
-          </Column>
-          <Column>
-            <Card heading={<Heading>Drill String</Heading>}>Content</Card>
-            <Spacer />
-            <Card heading={<Heading>Surface Roughness</Heading>}>Content</Card>
-            <Spacer />
-            <Card heading={<Heading>Weighted Rates</Heading>}>Content</Card>
-          </Column>
-        </Row>
-      </Page>
-    </>
-  );
-};

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

@@ -1,297 +0,0 @@
-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

@@ -1,110 +0,0 @@
-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>
-    </>
-  );
-};