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

package/src/components/label/label.module.less

@@ -0,0 +1,43 @@
+@import '../../style/variables.less';
+
+.label {
+  display: flex;
+  align-items: center;
+
+  &.labelLeft {
+    margin-bottom: 0;
+    flex-shrink: 0;
+    padding-right: 10px;
+
+    > label {
+      margin-bottom: 0;
+    }
+  }
+
+  .icons {
+    display: inline-flex;
+
+    > * {
+      margin-left: 8px;
+    }
+  }
+
+  .icon {
+    margin-left: auto;
+    color: var(--color-text-faint);
+    line-height: 0;
+    font-size: 13px;
+  }
+
+  > label {
+    display: flex;
+    align-items: center;
+    font-weight: bold;
+    font-size: 13px;
+    margin-bottom: 5px;
+
+    span {
+      line-height: 0; // Strip whitespace from icon
+    }
+  }
+}

package/src/components/label/label.stories.jsx

@@ -0,0 +1,60 @@
+import { useState } from '@storybook/addons';
+import React from 'react';
+import { Label } from '../../..';
+
+export default {
+  title: 'Forms/Label',
+  component: Label,
+  args: {
+    label: 'Label',
+  },
+};
+
+const Template = (args) => (
+  <Label
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args}
+  />
+);
+
+export const Default = Template.bind({});
+
+export const HelpIconTooltip = Template.bind({});
+HelpIconTooltip.args = {
+  helpText: 'Tooltip goes here',
+};
+
+export const HelpIconClickable = Template.bind({});
+HelpIconClickable.args = {
+  onClickHelp: () => {},
+};
+
+export const InfoIcon = Template.bind({});
+InfoIcon.args = {
+  info: 'Info goes here',
+};
+
+export const LockIcon = () => {
+  const [locked, setLocked] = useState(false);
+  const handleToggleLock = () => setLocked(!locked);
+  return (
+    <Label
+      label="Label"
+      lock={{
+        visible: true,
+        active: locked,
+        onClick: handleToggleLock,
+        tooltip: locked ? 'Unlock' : 'Lock',
+        testId: 'testId',
+      }}
+    />
+  );
+};
+
+export const LibraryIcon = Template.bind({});
+LibraryIcon.args = {
+  libraryIcon: {
+    onClick: () => {},
+    tooltip: 'View in library',
+  },
+};

package/src/components/layout/column/column.jsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { StyledColumn } from './styles.js';
+
+export const Column = ({
+  background,
+  borderLeft,
+  borderRight,
+  children,
+  flex,
+  flexbox,
+  padding,
+  scroll,
+  showScrollbar,
+  spacing,
+  width,
+  widthMobile,
+  widthTablet,
+  testId,
+}) => {
+  const getWidthString = (w) => {
+    return typeof w === 'string'
+      ? w
+      : typeof w === 'number'
+      ? `${w}px`
+      : undefined;
+  };
+
+  return (
+    <StyledColumn
+      background={background}
+      borderLeft={borderLeft}
+      borderRight={borderRight}
+      flex={flex}
+      flexbox={flexbox}
+      padding={padding}
+      scroll={scroll}
+      showScrollbar={showScrollbar}
+      spacing={spacing}
+      width={getWidthString(width)}
+      widthTablet={getWidthString(widthTablet)}
+      widthMobile={getWidthString(widthMobile)}
+    >
+      <div className="inner" data-testid={testId}>
+        {children}
+      </div>
+    </StyledColumn>
+  );
+};
+
+Column.defaultProps = {
+  background: 'transparent',
+  borderLeft: null,
+  borderRight: null,
+  children: null,
+  flex: true,
+  flexbox: false,
+  padding: false,
+  scroll: false,
+  showScrollbar: true,
+  spacing: 20,
+  width: null,
+  widthMobile: null,
+  widthTablet: null,
+  testId: '',
+};
+
+Column.propTypes = {
+  background: PropTypes.string,
+  borderLeft: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  borderRight: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  children: PropTypes.node,
+  /** Fill available `Row` width */
+  flex: PropTypes.bool,
+  /** Give `Column` children flexbox layout */
+  flexbox: PropTypes.bool,
+  padding: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  scroll: PropTypes.bool,
+  showScrollbar: PropTypes.bool,
+  spacing: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  widthMobile: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  widthTablet: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  testId: PropTypes.string,
+};

package/src/components/layout/column/styles.js

@@ -0,0 +1,45 @@
+import styled, { css } from 'styled-components';
+
+const noScrollbars = css`
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+
+export const StyledColumn = styled.div`
+  position: relative; //for react-laag
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex-basis: ${(p) => p.width || 'auto'};
+  flex-grow: ${(p) => (!p.width && p.flex ? '1' : '0')};
+  flex-shrink: ${(p) => (p.width || !p.flex ? '0' : '1')};
+  overflow: ${(p) => (p.scroll ? 'auto' : 'initial')};
+  background: ${(p) => p.background};
+  border-left: ${(p) =>
+    p.borderLeft === true ? '1px solid var(--color-border)' : p.borderLeft};
+  border-right: ${(p) =>
+    p.borderRight === true ? '1px solid var(--color-border)' : p.borderRight};
+  padding: ${(p) => (p.spacing ? `0 ${p.spacing / 2}px` : '0')};
+  ${(p) => !p.showScrollbar && noScrollbars}
+
+  @media (max-width: 992px) {
+    ${(p) => p.widthTablet && `flex-basis: ${p.widthTablet};`}
+  }
+
+  @media (max-width: 575px) {
+    ${(p) => p.widthMobile && `flex-basis: ${p.widthMobile};`}
+  }
+
+  > .inner {
+    flex-basis: 100%;
+    position: relative;
+    z-index: 0;
+    min-height: 0;
+    display: ${(p) => (p.flexbox && !p.scroll ? 'flex' : 'block')};
+    ${(p) => p.flexbox && `flex-direction: column;`}
+    padding: ${(p) => (p.padding === true ? '16px 20px' : p.padding)};
+  }
+`;

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Column, Row, Heading } from '../../..';
+
+export default {
+  title: 'Layout/Columns & Rows',
+  component: Column,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    width: '400px',
+    padding: '20px',
+    borderRight: true,
+  },
+  argTypes: {
+    width: { control: { type: 'text' } },
+    padding: { control: { type: 'text' } },
+    borderLeft: { control: { type: 'boolean' } },
+    borderRight: { control: { type: 'boolean' } },
+  },
+};
+
+const Template = (args) => {
+  const { height, wrap, ...columnArgs } = args;
+  return (
+    <Row spacing={0} height={height} wrap={wrap}>
+      <Column
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...columnArgs}
+      >
+        <Heading top>Column</Heading>
+        {'Example content goes here lorem ipsum. '.repeat(20)}
+      </Column>
+      <Column padding="20px" background="var(--color-background)" />
+    </Row>
+  );
+};
+
+export const Default = Template.bind({});
+
+export const Scroll = Template.bind({});
+Scroll.args = {
+  scroll: true,
+  height: '200px',
+};
+
+export const HideScrollbar = Template.bind({});
+HideScrollbar.args = {
+  scroll: true,
+  showScrollbar: false,
+  height: '200px',
+};
+
+export const ResponsiveWidth = Template.bind({});
+ResponsiveWidth.args = {
+  wrap: true,
+  widthTablet: '50%',
+  widthMobile: '100%',
+  borderRight: false,
+};

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

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

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