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

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

@@ -0,0 +1,211 @@
+import React, { useState } from 'react';
+import { FaQuestion, FaChevronLeft } from 'react-icons/fa';
+import {
+  TopBar,
+  SideBar,
+  Heading,
+  Button,
+  Card,
+  Drawer,
+  List,
+  Field,
+  Input,
+  RadioButton,
+  Select,
+  CheckBox,
+  Spacer,
+  Page,
+  Row,
+  Column,
+  FormRow,
+} 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 Reservoirs = () => {
+  const [open, setOpen] = useState(true);
+  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: 'Reservoirs',
+                items: [
+                  {
+                    id: 1,
+                    name: 'Lorem',
+                    active: true,
+                  },
+                  {
+                    id: 2,
+                    name: 'Ipsum',
+                  },
+                ],
+              }}
+            />
+          </Drawer>
+          <Column scroll padding borderLeft>
+            <Row>
+              <Column>
+                <Heading top>Reservoir name here</Heading>
+                <FormRow>
+                  <Field label="Name">
+                    <Input value="Reservoir name here" width="200px" />
+                  </Field>
+                  <Field label="Lorem">
+                    <RadioButton
+                      name="example"
+                      options={[
+                        { label: 'Aardvarks', value: 'termites' },
+                        { label: 'Monkeys', value: 'bananas' },
+                      ]}
+                      value={{ label: 'Monkeys', value: 'bananas' }}
+                      inline
+                    />
+                  </Field>
+                  <Field label="Ipsum">
+                    <Select
+                      name="example"
+                      options={[
+                        { label: 'Monkeys', value: 'bananas' },
+                        { label: 'Possums', value: 'slugs' },
+                      ]}
+                      value={{ label: 'Monkeys', value: 'bananas' }}
+                      native
+                    />
+                  </Field>
+                  <Field>
+                    <CheckBox label="Dolor" />
+                  </Field>
+                </FormRow>
+              </Column>
+              <Column flex={false}>
+                <Button onClick={() => {}} round icon={<FaQuestion />} />
+              </Column>
+            </Row>
+            <Spacer height={10} />
+            <Row>
+              <Column width="50%">
+                <Card
+                  heading={
+                    <Heading onClickHelp={() => console.log('help!')}>
+                      Reservoir Zone
+                    </Heading>
+                  }
+                >
+                  <Row>
+                    <Column width="50%">
+                      <Field label="Label" helpText="Lorem ipsum">
+                        <RadioButton
+                          options={[
+                            { label: 'Aardvarks', value: 'termites' },
+                            { label: 'Monkeys', value: 'bananas' },
+                          ]}
+                          value={{ label: 'Monkeys', value: 'bananas' }}
+                          inline
+                        />
+                        <Input width="100%" />
+                      </Field>
+                      <Field label="Label" helpText="Lorem ipsum">
+                        <CheckBox label="Lorem ipsum" />
+                        <Input width="100%" disabled />
+                      </Field>
+
+                      <Field label="Label" helpText="Lorem ipsum">
+                        <Input width="100%" />
+                      </Field>
+                      <Field label="Label" helpText="Lorem ipsum">
+                        <Input width="100%" />
+                      </Field>
+                    </Column>
+                    <Column width="50%">
+                      <Field label="Label" helpText="Lorem ipsum">
+                        <Input width="100%" />
+                      </Field>
+                      <Field label="Label" helpText="Lorem ipsum">
+                        <Input width="100%" />
+                      </Field>
+                      <Field label="Label" helpText="Lorem ipsum">
+                        <Input width="100%" />
+                      </Field>
+                      <Field label="Label" helpText="Lorem ipsum">
+                        <Input width="100%" />
+                      </Field>
+                    </Column>
+                  </Row>
+                </Card>
+              </Column>
+              <Column width="50%">
+                <Card heading={<Heading>Reservoir Size</Heading>}>
+                  <Row>
+                    <Column width="160px">
+                      <Field label="Length">
+                        <Input width="100%" />
+                      </Field>
+                      <Field label="Width">
+                        <Input width="100%" />
+                      </Field>
+                    </Column>
+                    <Column>
+                      <ImagePlaceholder width="100%" height="100%" />
+                    </Column>
+                  </Row>
+                </Card>
+                <Spacer />
+                <Card heading={<Heading>Reservoir Properties</Heading>}>
+                  <Row>
+                    <Column>
+                      <Field label="Label">
+                        <Input width="100%" />
+                      </Field>
+                    </Column>
+                    <Column>
+                      <Field label="Label">
+                        <Input width="100%" />
+                      </Field>
+                    </Column>
+                    <Column>
+                      <Field label="Label">
+                        <Input width="100%" />
+                      </Field>
+                    </Column>
+                  </Row>
+                </Card>
+              </Column>
+            </Row>
+          </Column>
+        </Row>
+      </Page>
+    </>
+  );
+};

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

@@ -0,0 +1,263 @@
+import React, { useState } from 'react';
+import { FaChevronLeft } from 'react-icons/fa';
+import {
+  Accordion,
+  TopBar,
+  SideBar,
+  Heading,
+  Button,
+  Drawer,
+  List,
+  Field,
+  Input,
+  CheckBox,
+  Page,
+  Row,
+  Column,
+  Spacer,
+  Tabs,
+} from '../../../..';
+
+const options = [
+  {
+    label: 'Import',
+    value: 'import',
+    right: true,
+  },
+  {
+    label: 'Settings',
+    value: 'settings',
+    right: true,
+  },
+];
+
+const MapPlaceholder = () => (
+  <div
+    style={{
+      background: '#AAD3DF',
+      borderLeft: '1px solid #8AB3BF',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      color: 'white',
+      height: '100%',
+    }}
+  >
+    MAP
+  </div>
+);
+
+export default {
+  title: 'Layout/Layout Examples',
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      inlineStories: false,
+      iframeHeight: 800,
+    },
+  },
+};
+
+export const Site = () => {
+  const [open, setOpen] = useState(true);
+  return (
+    <>
+      <TopBar />
+      <SideBar options={{ title: '', sections: [] }} width="250px" />
+      <Page padding={false} scroll={false}>
+        <Row spacing={0} flex>
+          <Drawer
+            button={
+              <Button
+                onClick={() => setOpen(!open)}
+                round
+                icon={<FaChevronLeft />}
+              />
+            }
+            open={open}
+            width={300}
+            closedWidth={50}
+          >
+            <List
+              drawer
+              narrow={!open}
+              list={{
+                name: 'Sites',
+                items: [
+                  {
+                    id: 1,
+                    name: 'Main Site',
+                    type: 'Heading',
+                  },
+                  {
+                    id: 2,
+                    name: 'Site name here',
+                    active: true,
+                    label: {
+                      value: 1,
+                      color: '#69779b',
+                    },
+                  },
+                  {
+                    id: 3,
+                    name: 'Locations',
+                    type: 'Heading',
+                  },
+                  {
+                    id: 4,
+                    name: 'Ipsum',
+                    label: {
+                      value: 2,
+                      color: '#69779b',
+                    },
+                  },
+                  {
+                    id: 5,
+                    name: 'Dolor',
+                    label: {
+                      value: 3,
+                      color: '#69779b',
+                    },
+                  },
+                ],
+              }}
+            />
+            <List
+              drawer
+              narrow={!open}
+              list={{
+                name: 'Wells',
+                items: [
+                  {
+                    id: 1,
+                    name: 'Main Wellbore',
+                    type: 'Heading',
+                  },
+                  {
+                    id: 2,
+                    name: 'Lorem',
+                    label: {
+                      value: 1,
+                      color: '#77699b',
+                    },
+                  },
+                ],
+              }}
+            />
+            <List
+              drawer
+              narrow={!open}
+              list={{
+                name: 'Targets',
+                items: [
+                  {
+                    id: 1,
+                    name: 'Lorem',
+                    label: {
+                      value: 1,
+                      color: '#9b6977',
+                    },
+                  },
+                ],
+              }}
+            />
+          </Drawer>
+          <Column borderLeft flexbox>
+            <Tabs padding margin={false} options={options} />
+            <Row spacing={0} flex>
+              <Column scroll padding width={550}>
+                <Heading top>Site name here</Heading>
+                <Field label="Name">
+                  <Input value="Site name here" width="200px" />
+                </Field>
+                <Spacer />
+                <Accordion
+                  heading={<Heading>Coordinate Reference System</Heading>}
+                  managed
+                >
+                  <Field label="Label" labelLeft labelWidth="50px">
+                    <Input value="Value" width="100%" />
+                  </Field>
+                  <Field label="Label" labelLeft labelWidth="50px">
+                    <Input value="Value" width="100%" />
+                  </Field>
+                  <Field label="Label" labelLeft labelWidth="50px">
+                    <Input value="Value" width="100%" />
+                  </Field>
+                  <Field>
+                    <CheckBox label="Dolor" />
+                  </Field>
+                </Accordion>
+                <Spacer />
+                <Heading marginBottom={10}>Location</Heading>
+                <Row spacing={10}>
+                  <Column>
+                    <Field label="Label">
+                      <Input value="Value" width="100%" />
+                    </Field>
+                  </Column>
+                  <Column>
+                    <Field label="Label">
+                      <Input value="Value" width="100%" />
+                    </Field>
+                  </Column>
+                  <Column>
+                    <Field label="Label">
+                      <Input value="Value" width="100%" />
+                    </Field>
+                  </Column>
+                  <Column>
+                    <Field label="Label">
+                      <Input value="Value" width="100%" />
+                    </Field>
+                  </Column>
+                </Row>
+                <Spacer />
+                <Heading marginBottom={10}>Model</Heading>
+                <Row spacing={10}>
+                  <Column>
+                    <Field label="Label">
+                      <Input value="Value" width="100%" />
+                    </Field>
+                  </Column>
+                  <Column>
+                    <Field label="Label">
+                      <Input value="Value" width="100%" />
+                    </Field>
+                  </Column>
+                </Row>
+                <Spacer />
+                <Accordion heading={<Heading>Settings</Heading>} managed>
+                  <Field>
+                    <CheckBox label="Dolor" />
+                  </Field>
+                  <Row spacing={10}>
+                    <Column>
+                      <Field label="Label">
+                        <Input value="Value" width="100%" />
+                      </Field>
+                      <Field label="Label">
+                        <Input value="Value" width="100%" />
+                      </Field>
+                    </Column>
+                    <Column>
+                      <Field label="Label">
+                        <Input value="Value" width="100%" />
+                      </Field>
+                      <Field label="Label">
+                        <Input value="Value" width="100%" />
+                      </Field>
+                    </Column>
+                  </Row>
+                </Accordion>
+              </Column>
+              <Column>
+                <MapPlaceholder />
+              </Column>
+            </Row>
+          </Column>
+        </Row>
+      </Page>
+    </>
+  );
+};

package/src/components/layout/flex/flex.jsx

@@ -0,0 +1,48 @@
+import React, { Fragment, isValidElement } from 'react';
+import PropTypes from 'prop-types';
+
+export const Flex = ({
+  alignItems,
+  justifyContent,
+  direction,
+  height,
+  children,
+  wrap,
+  gap,
+}) => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: direction,
+        alignItems,
+        justifyContent,
+        height,
+        flexWrap: wrap ? 'wrap' : 'nowrap',
+        gap: gap === false ? 0 : gap === true ? '20px' : gap,
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+Flex.defaultProps = {
+  alignItems: 'initial',
+  direction: 'initial',
+  height: 'initial',
+  justifyContent: 'initial',
+  children: null,
+  wrap: true,
+  gap: false,
+};
+
+Flex.propTypes = {
+  alignItems: PropTypes.string,
+  direction: PropTypes.string,
+  height: PropTypes.string,
+  justifyContent: PropTypes.string,
+  children: PropTypes.node,
+  wrap: PropTypes.bool,
+  gap: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+};

package/src/components/layout/flex/flex.stories.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Flex, Button, Text } from '../../../..';
+
+export default {
+  title: 'Layout/Flex',
+  component: Flex,
+  argTypes: {
+    alignItems: {
+      control: {
+        type: 'inline-radio',
+      },
+      options: ['flex-start', 'center', 'flex-end'],
+    },
+    justifyContent: {
+      control: {
+        type: 'inline-radio',
+      },
+      options: ['flex-start', 'center', 'flex-end', 'space-between'],
+    },
+    gap: { control: { type: 'boolean' } },
+  },
+  args: {
+    alignItems: undefined,
+    justifyContent: undefined,
+    children: [<Button label="Button" />, <Text>Text</Text>],
+  },
+};
+
+const Template = (args) => (
+  <Flex
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args}
+  />
+);
+
+export const Default = Template.bind({});
+
+export const DefaultGap = Template.bind({});
+DefaultGap.args = { gap: true };
+
+export const CustomGap = Template.bind({});
+CustomGap.args = { gap: '50px' };
+
+export const Center = Template.bind({});
+Center.args = {
+  height: '200px',
+  alignItems: 'center',
+  justifyContent: 'center',
+};
+
+export const SpaceBetween = Template.bind({});
+SpaceBetween.args = {
+  justifyContent: 'space-between',
+};

package/src/components/layout/form-row/form-row.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './form-row.module.less';
+
+export const FormRow = ({ children }) => {
+  return <div className={styles.formRow}>{children}</div>;
+};
+
+FormRow.defaultProps = {
+  children: null,
+};
+
+FormRow.propTypes = {
+  children: PropTypes.node,
+};

package/src/components/layout/form-row/form-row.module.less

@@ -0,0 +1,11 @@
+@import '../../../style/variables.less';
+
+.formRow {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+
+  > *:not(:last-child) {
+    margin-right: 20px;
+  }
+}

package/src/components/layout/grid/grid.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+const StyledGrid = styled.div`
+  display: grid;
+  gap: ${(p) => p.gap};
+  grid-template-rows: ${(p) => p.rows};
+  grid-template-columns: ${(p) => p.columns};
+  height: ${(p) => p.height};
+
+  @media (max-width: 992px) {
+    ${(p) => p.columnsTablet && `grid-template-columns: ${p.columnsTablet};`}
+  }
+
+  @media (max-width: 575px) {
+    ${(p) => p.columnsMobile && `grid-template-columns: ${p.columnsMobile};`}
+  }
+`;
+
+export const Grid = ({
+  rows,
+  columns,
+  columnsTablet,
+  columnsMobile,
+  gap,
+  height,
+  children,
+}) => {
+  return (
+    <StyledGrid
+      rows={rows}
+      columns={columns}
+      columnsTablet={columnsTablet}
+      columnsMobile={columnsMobile}
+      gap={gap === false ? 0 : gap === true ? '20px' : gap}
+      height={height}
+    >
+      {children}
+    </StyledGrid>
+  );
+};
+
+Grid.defaultProps = {
+  rows: 'initial',
+  columns: 'initial',
+  columnsTablet: null,
+  columnsMobile: null,
+  gap: false,
+  height: 'initial',
+  children: null,
+};
+
+Grid.propTypes = {
+  rows: PropTypes.string,
+  columns: PropTypes.string,
+  columnsTablet: PropTypes.string,
+  columnsMobile: PropTypes.string,
+  gap: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  height: PropTypes.string,
+  children: PropTypes.node,
+};