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

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

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

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

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

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

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

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

@@ -1,15 +0,0 @@
-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,
-};