npm install react react-dom react-bootstrap gatsby

npm install react-helmet

npm install @legendarymediatv/bootstrap

exports.onCreateWebpackConfig = ({ actions, loaders, getConfig }) => {
  const config = getConfig();
  config.module.rules = [
    // omit the default rule where test === '\.jsx?$'
    ...config.module.rules.filter(
      (rule) => String(rule.test) !== String(/\.jsx?$/)
    ),
    // re-create it with custom exclude filter
    {
      // apply required Babel presets/plugins and merge in your configuration from `babel.config.js`.
      ...loaders.js(),
      test: /\.jsx?$/,
      // exclude all node_modules from transpilation, except for this plugin
      // NOTE: their pattern has "\/" but this has "[\\\/]" to support all OS path separators
      exclude: (modulePath) =>
        /node_modules/.test(modulePath) &&
        !/node_modules[\\\/]@legendarymediatv[\\\/]bootstrap/.test(modulePath),
    },
  ];
  // replace the webpack config with the modified object.
  actions.replaceWebpackConfig(config);
};

import React from "react";
import { Helmet } from "react-helmet";

import Container from "react-bootstrap/Container";

const Layout = (props) => {
  return (
    <>
      <Helmet htmlAttributes={{ lang: "en" }}>
        <title>{props.title}</title>

        <meta name="description" content={props.description} />

        <link
          rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
          integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
          crossorigin="anonymous"
        />
        <link
          rel="stylesheet"
          href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
        />
      </Helmet>
      <Container className="py-4">
        <h1 className="display-1">{props.title}</h1>

        {props.children}
      </Container>
    </>
  );
};

export default Layout;

// dependencies
import React from "react";

// page layout template
import Layout from "../components/Layout";

// sample LegendaryMediaTV component
import Icon from "@legendarymediatv/bootstrap/Icon";

const SamplePage = () => {
  return (
    <Layout title="Page Title" description="Page Description">
      <Icon name="fas fa-camera" />
    </Layout>
  );
};

export default SamplePage;

// package-level
import { Demo } from '@legendarymediatv/bootstrap';

// component level (preferred)
import Demo from '@legendarymediatv/bootstrap/Demo';

import Alert from '@legendarymediatv/bootstrap/Alert';

…

<Alert
  title="Alert Title"
  subtitle="Alert subtitle"
  variant="info"
  onClose={() => {
    alert("Insert dismiss logic here");
  }}
  dismissible
>
  Some text with a <Alert.Link to="/sample">link</Alert.Link>
</Alert>

<Alert
  error={{
    error: "Request failed with status code 401",
    url: "/",
    method: "GET",
  }}
  onRetry={() => {
    alert("Insert retry logic here");
  }}
/>

<Alert error={["Field 1 is required", "Field 2 is required"]} />

import BackgroundImage from '@legendarymediatv/bootstrap/BackgroundImage';

…

<BackgroundImage src="/images/sample.jpg" />

import Blockquote from '@legendarymediatv/bootstrap/Blockquote';

…

<Blockquote>
  <p className="mb-0">
    A well-known quote, contained in a blockquote element.
  </p>
</Blockquote>

<Blockquote>
  <p>
    Success, meaningful success, begins when we take ownership and actively
    take responsibility for our part in the shortcomings of our life.
  </p>

  <Blockquote.Footer>
    Dr Eric Thomas,{" "}
    <cite>Greatness Is Upon You: Laying the Foundation</cite>
  </Blockquote.Footer>
</Blockquote>

import Breakpoint from '@legendarymediatv/bootstrap/Breakpoint';

…

<Breakpoint />

import DatePicker from '@legendarymediatv/bootstrap/DatePicker';
…
// use React state to track selected date
const [componentState, setComponentState] = React.useState(null);
…
// select a new date
function dateHandler(selected) => {
  setComponentState(selected);
};
…
<DatePicker
  title="Contact Date"
  value={componentState}
  onChange={dateHandler}
/>

import Display from '@legendarymediatv/bootstrap/Display';

…

<Display.Heading1>Display Heading 1</Display.Heading1>

<Display.Heading2>Display Heading 2</Display.Heading2>

<Display.Heading3>Display Heading 3</Display.Heading3>

<Display.Heading4>Display Heading 4</Display.Heading4>

<Display.Heading5>Display Heading 5</Display.Heading5>

<Display.Heading6>Display Heading 6</Display.Heading6>

import Flipper from '@legendarymediatv/bootstrap/Flipper';

…

<Flipper
  front={<h3>auto-flipper front content</h3>}
  frontClassName="bg-primary text-light p-2"
  back={<h3>auto-flipper back content</h3>}
  backClassName="bg-secondary text-light p-2"
/>

…

// use React state to track flipped state
const [componentState, setComponentState] = React.useState(false);
…
function flipHandler(event) => {
  // un-click the button
  event.preventDefault();

  // toggle flip state
  setComponentState(!componentState);
};
…
<Flipper
  front={
    <Button
      onClick={flipHandler}
      className="w-100"
    >
      click to flip to the back
    </Button>
  }
  frontClassName="d-flex align-items-stretch"
  back={
    <Button
      onClick={flipHandler}
      variant="secondary"
      className="w-100"
    >
      click to flip to the front
    </Button>
  }
  backClassName="d-flex align-items-stretch"
  className="text-center"
  height="10rem"
  flipped={componentState}
  horizontal
/>

import FormGroup from '@legendarymediatv/bootstrap/FormGroup';

…

<FormGroup
  title="Sample textbox"
  info={<p>Things, <i>stuff</i>, <b>content</b>!</p>}
>
  <Form.Control
    name="sample"
    maxLength="80"
    defaultValue="eleventeen"
  />
</FormGroup>

import FullPage from '@legendarymediatv/bootstrap/FullPage';

…

<FullPage>
  <FullPage.Content>Page Content</FullPage.Content>
  <FullPage.Footer>Footer Content</FullPage.Footer>
</FullPage>

<div className="bg-dark">
  <Container className="bg-light p-0">
    <FullPage>
      <FullPage.Content>
        <Navbar bg="primary" variant="dark">
          <Navbar.Brand>LegendaryMediaTV</Navbar.Brand>
        </Navbar>

        <article className="py-4 px-2">
          <h1>Title or whatever</h1>
          <p>Things, stuff, content!</p>
        </article>
      </FullPage.Content>

      <FullPage.Footer className="bg-secondary py-2 text-center text-white">
        Footer Content
      </FullPage.Footer>
    </FullPage>
  </Container>
</div>

import Icon from '@legendarymediatv/bootstrap/Icon';

…

<Icon name="fas fa-camera" />

<Icon
  name="fas fa-camera"
  alt="DSLR"
  variant="success"
  className="ms-3"
  style={{ fontSize: '2rem' }}
/>

import InfoIcon from '@legendarymediatv/bootstrap/InfoIcon';

…

<InfoIcon title="Info Title">Info Content</InfoIcon>

<InfoIcon
  title="Info Title"
  name="bi bi-info-circle-fill"
  alt="help me!"
  variant="danger"
  iconStyle={{ fontSize: "2rem" }}
>
  Things, <i>stuff</i>, <b>content</b>!
</InfoIcon>

import Link from '@legendarymediatv/bootstrap/Link';

…

<Link href="/">Gatsby link</Link>

<Link href="#link">HTML link</Link>

<Link href="https://www.legendarymediatv.com">auto-external HTML link</Link>

<Link
  href="/external-somehow"
  externalIcon="bi bi-box-arrow-up-right"
  externalVariant="danger"
>
  HTML link with custom external icon and color
</Link>

<Navbar.Brand as={Link} to='/'>LegendaryMediaTV</Navbar.Brand>

<Nav.Link as={Link} to='/'>Home</Nav.Link>

import ListGroup from '@legendarymediatv/bootstrap/ListGroup';

…

const linkArray = [
  '/test',
  '/sample'
];
…
<ListGroup title="Array of Links" items={linkArray} />

…

const linkObjects = [
  { title: 'Test Link', url: '/test' },
  {
    title: 'Sample Link',
    subtitle: "additional information in a subtitle",
    url: '/sample'
  }
];
…
<ListGroup title="Array of Objects with Links" items={linkObjects} />

…

function sampleHandler(itemSelected) {
  alert(JSON.stringify(itemSelected, null, 4));
}
…
const objectArray = [
  { id: 1, title: 'Test Non-Link' },
  { id: 2, title: 'Sample Non-Link' }
];
…
<ListGroup
  title="Array of Objects with Click Handler"
  titleVariant="success"
  items={objectArray}
  click={sampleHandler}
  className="mt-3"
/>

import ListGroup from '@legendarymediatv/bootstrap/ListGroup';

…

<ListGroup
  title="ListGroup with items"
  titleVariant="info"
>
  <ListGroup.Item subitem="sample sub-item">
    ListGroup.Item with a sub-item below
  </ListGroup.Item>

  <ListGroup.Item to="/sample">
    ListGroup.Item auto-converted to a link/action
  </ListGroup.Item>

  <ListGroup.Item
    onClick={() => {
      alert("clicked");
    }}
  >
    ListGroup.Item auto-converted to a button
  </ListGroup.Item>

  <ListGroup.Item
    to="#list-group"
    subactions={[
      {
        to: "/sample",
        variant: "info",
        children: <Icon name="fas fa-camera" />,
      },
      {
        onClick: () => {
          alert("deleted!");
        },
        variant: "danger",
        children: <Icon name="fas fa-trash-alt" />,
      },
    ]}
  >
    ListGroup.Item with a URL and sub-actions
  </ListGroup.Item>
</ListGroup.Item>

import Pagination from '@legendarymediatv/bootstrap/Pagination';
…
<Pagination>
  <Pagination.First />
  <Pagination.Prev />

  <Pagination.Ellipsis />

  <Pagination.Item>1</Pagination.Item>
  <Pagination.Item to="/sample">2</Pagination.Item>
  <Pagination.Item onClick={sampleHandler.bind(this, 3)}>3</Pagination.Item>
  <Pagination.Item active>4</Pagination.Item>
  <Pagination.Item disabled>5</Pagination.Item>

  <Pagination.Ellipsis />

  <Pagination.Next />
  <Pagination.Last />
</Pagination>

…

<Pagination size="sm">
  <Pagination.First>
    <Icon name="fas fa-angle-double-left" alt="first" />
  </Pagination.First>

  <Pagination.Prev>
    <Icon name="fas fa-angle-left" alt="previous" />
  </Pagination.Prev>

  <Pagination.Ellipsis>
    <Icon name="fas fa-ellipsis-h" alt="more" />
  </Pagination.Ellipsis>

  <Pagination.Next>
    <Icon name="fas fa-angle-right" alt="next" />
  </Pagination.Next>

 <Pagination.Last>
    <Icon name="fas fa-angle-double-right" alt="last" />
  </Pagination.Last>
</Pagination>

import ScrollToTop from '@legendarymediatv/bootstrap/ScrollToTop';

…

<ScrollToTop />

<ScrollToTop name="fas fa-caret-square-up" variant="success" />

import Spinner from '@legendarymediatv/bootstrap/Spinner';

…

<Spinner />

<Spinner
  animation="grow"
  variant="success"
/>

<Spinner alert />

<Spinner
  title="Reticulating splines …"
  variant="primary"
/>

import VisuallyHidden from '@legendarymediatv/bootstrap/VisuallyHidden';

…

<p className="text-danger">
  <VisuallyHidden>Danger: </VisuallyHidden>
  This action is not reversible
</p>

import { combine, prepare } from "@legendarymediatv/bootstrap/functions";

…

// prepare properties
const [properties, children] = prepare(props);

// add variant to class
properties.className.push(`text-${properties.variant}`);
delete properties.variant;

// merge classes
properties.className = combine(properties.className);

// render component
return (
  <div {...properties}>{children}</div>
);

import { formData } from "@legendarymediatv/bootstrap/functions";

...

const submitHander = (event) => {
  // don't traditionally submit the form
  event.preventDefault();

  // extract data from the form
  const data = formData(event.target);

  // display the form data object
  alert(JSON.stringify(data, null, 4));
}

...

<Form onSubmit={submitHandler}>
  <FormGroup title="Simple textbox">
    <Form.Control name="sample" />
  </FormGroup>
  <Button type="submit">Submit</Button>
</Form>

import { sleep } from '@legendarymediatv/bootstrap/functions';

…

// wait one second and then do something
sleep(1000)
  .then(() => {
    // do something
  });

function async sample() {
  // do something

  // wait 1/4 second
  await sleep(250);

  // do something else
}

import { title } from '@legendarymediatv/bootstrap/functions';

…

<Helmet>
  <title>{title("LegendaryMediaTV", "Bootstrap Demo")}</title>
</Helmet>

<Helmet>
  <title>
    {title("LegendaryMediaTV", "Full Page Demo", "Bootstrap Demo")}
  </title>
</Helmet>

import { scrollToTopHandler } from '@legendarymediatv/bootstrap/ScrollToTop';

…

<Button onClick={scrollToTopHandler}>Scroll to Top</Button>

<Link to="#" onClick={scrollToTopHandler}>
  scroll to top
</Link>