irisrad-ui/src/components/irisGrid/IrisGrid.stories.js

UI elements developered for IRIS R&D Group Inc

import React from "react";

import { IrisGrid } from "./IrisGrid"; // ui element

// export for StoryBook as a tab
export default {
  title: "Example/IrisGrid", // could be represent on the url, example could be a root of the node
  component: IrisGrid,
};

const itemStyle = {
  width: "100%",
  height: "140px",
  backgroundColor: "#eee",
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
};

const itemWrapperStyle = {
  backgroundColor: "#000",
};

const getAllGridItems = () => {
  const items = [];
  [12, 6, 4, 3, 2, 1].map((number) => {
    const count = 12 / number;
    for (let i = 0; i < count; i++) {
      items.push(
        <IrisGrid
          key={`gird-item-auto-generated-${count}-${number}`}
          item
          xs={number}
          style={itemWrapperStyle}
        >
          <div style={itemStyle}>sm={number}</div>
        </IrisGrid>
      );
    }
  });
  return items;
};

/*================================================== container with spacing START ================================================== */
const GridContainerSpacingTemplate = (args) => (
  <div style={{ width: "90vw" }}>
    <IrisGrid {...args} />
  </div>
);

export const GridAsContainer = GridContainerSpacingTemplate.bind({});
GridAsContainer.args = {
  container: true,
  justifyContent: "center",
  alignItems: "center",
  spacing: 1,
  children: getAllGridItems(),
};
/*==================================================  container with spacing END  ================================================== */

/*================================================== responsive container items START ================================================== */
const GridItemResponsiveness = ({ justifyContent, alignItems, spacing }) => (
  <div style={{ width: "100vw" }}>
    <h1 style={{ textAlign: "center" }}>demo gird item responsiveness</h1>
    <IrisGrid
      container
      justifyContent={justifyContent}
      alignItems={alignItems}
      style={{ backgroundColor: "#000" }}
      spacing={spacing}
    >
      <IrisGrid item xs={12}>
        <div style={itemStyle}>xs=12</div>
      </IrisGrid>
      <IrisGrid item xs={12} sm={6}>
        <div style={itemStyle}>xs=12 sm=6</div>
      </IrisGrid>
      <IrisGrid item xs={12} sm={6}>
        <div style={itemStyle}>xs=12 sm=6</div>
      </IrisGrid>
      <IrisGrid item xs={6} sm={3}>
        <div style={itemStyle}>xs=6 sm=3</div>
      </IrisGrid>
      <IrisGrid item xs={6} sm={3}>
        <div style={itemStyle}>xs=6 sm=3</div>
      </IrisGrid>
      <IrisGrid item xs={6} sm={3}>
        <div style={itemStyle}>xs=6 sm=3</div>
      </IrisGrid>
      <IrisGrid item xs={6} sm={3}>
        <div style={itemStyle}>xs=6 sm=3</div>
      </IrisGrid>
    </IrisGrid>
  </div>
);

export const ResonsiveGridItems = GridItemResponsiveness.bind({});
ResonsiveGridItems.args = {
  justifyContent: "center",
  alignItems: "center",
  spacing: 1,
};
/*==================================================  responsive container items END  ================================================== */

const AlignmentTemplate = ({ justifyContent, alignItems, spacing }) => (
  <div style={{ width: "100vw" }}>
    <h1 style={{ textAlign: "center" }}>
      demo <em>justify content</em> &amp; <em>align items</em>
    </h1>
    <IrisGrid
      container
      justifyContent={justifyContent}
      alignItems={alignItems}
      style={{ backgroundColor: "#000", height: "500px" }}
      spacing={spacing}
    >
      <IrisGrid style={itemWrapperStyle} item>
        <div style={itemStyle}>alignment demo 0</div>
      </IrisGrid>
      <IrisGrid style={itemWrapperStyle} item>
        <div style={itemStyle}>alignment demo 1</div>
      </IrisGrid>
    </IrisGrid>
  </div>
);

export const GridItemAlignments = AlignmentTemplate.bind({});
GridItemAlignments.args = {
  justifyContent: "center",
  alignItems: "center",
};