React-atomic-comp NPM

React Atomic Components

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

`npm run start`

npm start is a shortcut for npm run start. npm run is used to run scripts that you define in the scripts object of your package.json, if there is no start key in the scripts object, it will default to node server.js. npm start is the command used to run the project

`npm run storybook`

Runs the storybook in the development mode. Open http://localhost:9002/ to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.44

`npm test`

Launches the test runner in the interactive watch mode. See the section about running tests for more information.

`npm run build`

Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes. Your app is ready to be deployed!

Available Themes

Default Theme

Default theme defines different theme palette as:primary,secondary,danger,alert,success, white. It has various grayscales defined and fonts available as:

primary: Helvetica Neue, Helvetica,Roboto,sans-serif;
pre: Consolas, Liberation Mono, Menlo, Courier,monospace;
quote: Georgia, serif .

Generic Theme

Generic theme defined same as default one, the only difference relies in their theme sizes which can be adjusted accordingly to the user requirement.

Overview of the components:

Components

Component

Atoms

Block

Block is useful as it provide the block to add on the simple text.It further contain types as:default,reverse,palette,palette reverse,palette opaque and palette opaque reverse where palette has propstypes as string and reverse and opaque as bool .

Button

Button: A component that is necessary for fulfilment of different purposes as default, reverse,disabled or a link button.The following paramters are used while making the button:

const { to, href } = props;
if (to) {
  return <StyledLink {...props} />;
}
if (href) {
  return <Anchor {...props} />;
}

return <StyledButton {...props} type={type} />;
};

Button.propTypes = {
disabled: PropTypes.bool,
palette: PropTypes.string,
transparent: PropTypes.bool,
reverse: PropTypes.bool,
height: PropTypes.number,
type: PropTypes.string,
to: PropTypes.string,
href: PropTypes.string
};

Button.defaultProps = {
palette: "primary",
type: "button",
height: 40
};

Above code is having a parameter named as StyledLink which is explained as below :

const StyledLink = styled(
({ disabled, transparent, reverse, palette, height, theme, ...props }) => (
  <Link {...props} />
)
)`
${styles}
`;

Also, StyledButton is having the ${styles} included in it.

Label

The label defines a label for a <button>, <input>, <meter>, <output>, <progress>, <select>, or <textarea> etc. The label does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the label element, it toggles the control.Here, Label uses propTypes as boolean value.

Label.propTypes = {
reverse: PropTypes.bool
};

List

There are two types of List:

1.Unordered

The list items will be marked with bullets (small black circles) by default. The style of the list item marker: 1.disc Sets the list item marker to a bullet (default) 2.circle Sets the list item marker to a circle 3.square Sets the list item marker to a square 4.none The list items will not be marked

2.Ordered

The list items will be marked with numbers by default. The type of the list item marker: 1.type="1" The list items will be numbered with numbers (default) 2.type="A" The list items will be numbered with uppercase letters 3.type="a" The list items will be numbered with lowercase letters 4.type="I" The list items will be numbered with uppercase roman numbers 5.type="i" The list items will be numbered with lowercase roman numbers

Here, List Uses :

  return React.createElement(ordered ? Ol : Ul, props, children);
  };

Here, Ol and Ul are const using the {styles} And props and children are properties.

PreformattedText

In PreformattedText, text is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.

Spinner

Indicates the loading state of a component or page. Spinners can be used to show the loading state in your projects.Their appearance, alignment, and sizing can be easily customized with our amazing utility classes.

Tooltip

A tooltip is often used to specify extra information about something when the user moves the mouse pointer over an element. To create a tooltip, add the data-toggle="tooltip" attribute to an element.Use the title attribute to specify the text that should be displayed inside the tooltip.

Positioning Tooltips

By default, the tooltip will appear on top of the element.Use the data-placement attribute to set the position of the tooltip on top, bottom, left or the right side of the element.

const Tooltip = styled(
  ({ position, align, reverse, children, theme, ...props }) =>
    React.cloneElement(children, props)
)`
  ${styles}
`;

Tooltip.propTypes = {
  position: PropTypes.oneOf(["top", "right", "bottom", "left"]),
  align: PropTypes.oneOf(["start", "center", "end"]),
  reverse: PropTypes.bool,
  "data-title": PropTypes.string.isRequired,
  children: PropTypes.element.isRequired
};
Tooltip.defaultProps = {
  position: "top",
  align: "center",
  tabIndex: 0
};

Tooltip sets position as top and alignment as center bydefault.

Molecules

CardBox

A card is a bordered box with some padding around its content. It includes options for headers, footers, content, colors, etc. The user can add the header and footer to the respective card if needed by using .card-header class and the .card-footer class. You can also add on a background color to the card, use contextual classes like, (.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, bg-dark and .bg-light).

In index.stories.js file we will add the addWithJSX function for displaying the code relevant to component on the jsx screen for that respective component.

storiesOf("CardBox", module)**.addWithJSX**("default", () => <CardBox>Hello Dev</CardBox>);

Also, in the index.js file:

const CardBox = ({ children, ...props }) => (
<CardWapper {...props}>
  <Card {...props}>{children}</Card>
</CardWapper> 
);

CardWapper used as contant having various CSS properties like background-color, width, padding etc for the CardBox as :

  const CardWapper = styled(Card)`
  .card {
    background-color: ${bgColor};
    font-family: ${font("quote")};
    width: ${cardWidth};
    min-height: ${cardMinHeight};
    padding: 25px; 
    margin: auto;
    ${ifProp(
  "responsive",
  css`
        @media screen and (max-width: ${prop("breakpoint")}px) {
          width: 100%;
        }
      `
)}
  }
`;

GridListToggle

Grid / List toggle is a simple plugin which adds a Grid / List toggle button to your product archives allowing users to, toggle between grid / list views of your product.The list view arranges products in a vertical list and pulls in the excerpt to give a more detailed overview.

   <ButtonGroup
        style={this.props.style}
        aria-label={this.props.ariaLabel}
        className={this.props.className}
      >
        <Button
          title="Grid View"
          variant={this.props.variant}
          onClick={() => {
            this.onToggle("grid");
          }}
          active={this.state.selectOption === "grid"}
        >
          <i className="fa fa-th" />
        </Button>
        <Button
          title="List View"
          variant={this.props.variant}
          onClick={() => {
            this.onToggle("list");
          }}
          active={this.state.selectOption === "list"}
        >
          <i className="fa fa-list" />
        </Button>
      </ButtonGroup>

Here, we are using two button one for The Grid view and another one is for TheList view. Whenever the button got active on click, the respective option got selected and displayed. Also, in its index.stories.js file the Alert got displayed on Toggle as shown on below code.

    storiesOf("GridListToggle", module).addWithJSX("default", () => (
    <GridListToggle
      default="list"
      onToggle={data => {
        alert(data);
      }}
    />
  ));

Slider

Slider with custom range is great opportunity and function to use.Create a dynamic range slider to display the current value.Here, we made out default, reverse, disabled, responsive with breakpoints sliders having Square Slider moving. For reference you can follow the below code as well:

     <Wrapper {...props}>
    <Text responsive={responsive} breakpoint={breakpoint}>{min}</Text>
    <Range id={id} min={min} max={max} defaultValue={defaultValue} step={step} {...props} />
    <Text responsive={responsive} breakpoint={breakpoint}>{max}</Text>
  </Wrapper>

StarRating

Rating helps in knowing the feedback from the end user from their experience and thoughts or they are used by reviewers for ranking things.

Table

A Basic Table has only horizontal dividers but here we use the bordered table and also table with heading and footer.We can asily add on the caption to a table. A table simply has a division of rows and columns.

Thumbnail

A thumbnail is a small image that represents a larger image (when clicked on), and is often recognized with a border around it. In the index.js file of the Thumbnail component we use bootstrap class fa fa-expand and set its position as fixed .


  render() {
    return (
      <StyledBlock
        className={this.props.className}
        style={this.props.style}
        {...this.props}
      >
        {this.props.enlarge && (
          <i
            onClick={() => {
              this.props.onEnlarge();
            }}
            className="fa fa-expand"
            aria-hidden="true"
            style={{
              position: "fixed",
              zIndex: "900",
              right: "0",
              cursor: "pointer"
            }}
          />
        )}
        {this.props.children}
      </StyledBlock>
    );
  }

TrayCarouselArrow

The TrayCarousel plugin is a component for cycling through elements and simply behaves like a tray of different images or videos. The feature is quite useful in achieving the beauty of a website. The Arrow here helps ion moving the tray images forward or backward.

TrayCarouselDots

These Dots indicates that on which Tray of Carousel user is currently heading or working.

Organisms

BarChart

The bar chart we are going to create displays a list of rectangles of varying height proportional to the values they represent. The number of bars, their values and labels are all inputs. If the values change the heights will animate from the old to the new value.The chart has many properties that describe how the data is displayed including color, margin and speed like in our snippet code as follows:

  
  componentDidMount() {
    const node = this.node;
    this.myChart = new Chart(node, {
      type: "bar",
      data: this.props.data,
      options: this.props.options
    });
  }
  componentWillUnmount = () => {
    this.myChart = {};
  };

  render() {
    const { ...props } = this.props;
    return (
      <div>
        <canvas style={props.canvasStyle} ref={node => (this.node = node)} />
      </div>
    );
  }

In componentDidMount method, create a new object for chart class whose displaying and execution type will be bar and also we are refering to the current node.

Footer

A footer element typically contains:

Authorship information
Copyright information
Contact information
Sitemap
Back to top links

Related documents like we used footer for the Copyright information as follows:

  const Footer = () => {
    return (
      <NavBarWrapper bg="dark" variant="dark" expand="lg">
        <SubContainer>Copy Rights</SubContainer>
      </NavBarWrapper>
    );
  };

Header

A header element typically contains:

One or more heading elements
Logo or icon
Authorship information

ItemBox

The ItemBox displays the box having item listed in it with serial number and the order number.

    const ItemBox = ({
    palette,
    rating,
    reverse,
    transparent,
    addToCartClick,
    ...props
  }) => {
    return (
      <ItemWrapper onClick={props.itemClick}>
        <ImageWrapper
          {...props}
          style={{ backgroundPosition: "center center" }}
        />

        <TitleWrapper>{props.details.name}</TitleWrapper>
        <CodeWrapper>
          <span
            style={{
              display: "flex",
              flexDirection: "column",
              justifyContent: "center"
            }}
          >
            Serial No. - {props.details.serialNo}
          </span>
          <span
            style={{
              display: "flex",
              flexDirection: "column",
              justifyContent: "center"
            }}
          >
            |
          </span>
          <span
            style={{
              display: "flex",
              flexDirection: "column",
              justifyContent: "center"
            }}
          >
            Order No. - {props.details.orderNo}
          </span>
        </CodeWrapper>
        {rating && (
          <RatingWrapper>
            <StarRating
              editing={false}
              name={rating.name}
              value={rating.value}
              emptyStarColor={rating.emptyStarColor}
              starColor={rating.starColor}
              starCount={rating.starCount}
            />
          </RatingWrapper>
        )}
      </ItemWrapper>
    );
  };
  ItemBox.propTypes = {
    reverse: PropTypes.bool,
    details: PropTypes.object,
    transparent: PropTypes.bool,
    rating: PropTypes.shape({
      value: PropTypes.number.isRequired,
      emptyStarColor: PropTypes.string.isRequired,
      starColor: PropTypes.string.isRequired,
      starCount: PropTypes.number.isRequired,
      name: PropTypes.string.isRequired
    }),
    itemClick: PropTypes.func,
    addToCartClick: PropTypes.func
  };

Here, RatingWrapper is used for the StarRating, and CodeWrapper is helpful is displaying the serialno and orderno.

ItemList

The ItemList is list of the ItemBox having multiple serial number and the order number respective of the ItemBox.

Login

The login page should be the first page that users see in the modified application. It should provide two text fields - one for entering a login name i.e. USERNAME and one for entering a password i.e. PASSWORD. In addition it should have a command button that initiates the password checking action. If either of the text fields is left blank it is an error that must be reported to the user. If both fields are filled in but there is no record of the user name or the password is incorrect that must also be reported to the user.

Users that have not yet registered cannot log in. They must first register by clicking on the register button. They should be able to do this without getting an error for an empty name or password field.

The validation process for username and password can be done as:

    validateForm = e => {
    e.preventDefault();
    this.setState({ submitted: true });
    const username = findDOMNode(this.refs.username);
    const password = findDOMNode(this.refs.password);
    if (username.value && password.value) {
      this.setState({ username: username.value, password: password.value });
      this.props.handleLogin(
        username.value,
        password.value,
        this.loginCallback
      );
    }
  };

And

   loginCallback = response => {
    if (response) {
      if (response.message) {
        this.setState({ responseMessage: response.message });
      }
      if (response.redirectUrl) {
        this.setState({ redirectUrl: response.redirectUrl });
      }
    }
  };

ModalPopup

The Modal plugin is a dialog box/popup window that is displayed on top of the current page.Tooltips and popovers can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.You can better understand the popup scenario as follows:

 
    return (
      <Modal
        id={this.props.idName}
        size={this.props.size}
        show={this.props.show}
        onHide={() => this.props.onHide(false)}
        aria-labelledby={this.props.ariaLabelledby}
      >
        {this.props.headerTitle && (
          <Modal.Header closeButton>
            <Modal.Title id={`${this.props.idName}-title`}>
              {this.props.headerTitle}
            </Modal.Title>
          </Modal.Header>
        )}
        <Modal.Body>{this.props.children}</Modal.Body>
      </Modal>
    );

TrayCarousel

The TrayCarousel plugin is a component for cycling through elements and simply behaves like a tray of different images or videos. The feature is quite useful in beautifying a website.

TreeView

In this, there is a full fledge tree view of all the items. The important parameters used in this component are: displayNameKey for name, onExpandedNode for expanding the node, onSelectedNode indicates tree data last node, rootNameKey, treeData for further classification of the children of respective root node. In the Index.stories.js of TreeView component, file is containg the json format file in it.