npm - sag_components - Versions diffs - 1.0.0 - Mend

sag_components 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (145) hide show

package/public/index.html ADDED Viewed

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+    />
+    <meta name="viewport" content="initial-scale=1, width=device-width" />
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

package/public/manifest.json ADDED Viewed

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

package/public/robots.txt ADDED Viewed

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

package/src/App.css ADDED Viewed

@@ -0,0 +1,7 @@
+.App {
+   display: block;
+   width: 300px;
+  padding-top: 5%;
+  padding-left: 5%;
+}

package/src/App.js ADDED Viewed

@@ -0,0 +1,55 @@
+import logo from "./logo.svg";
+import "./App.css";
+import { Button } from "./stories/Button";
+import Dropdown from "./stories/Dropdown";
+const onChangehandler = (event, newValue) => {
+  console.log("Dropdown onChange event returned:");
+  console.log(newValue);
+};
+const onInputChangeHandler = (event, newInputValue) => {
+  console.log("Dropdown onInputChange event returned:");
+  console.log(newInputValue);
+};
+function App() {
+  const options = [
+    { id: "1", label: "Shufersal" },
+    { id: "2", label: "EPC" },
+    { id: "3", label: "Food Lion" },
+    { id: "4", label: "Hannaford" },
+    { id: "5", label: "Giant Food" },
+    { id: "6", label: "The Giant Company" },
+    { id: "7", label: "Stop&Shop" },
+    { id: "8", label: "Price Chopper" },
+    { id: "9", label: "South Eastern Grocers" },
+  ];
+  return (
+    <div className="App">
+      <Dropdown
+        width="300"
+        size="small"
+        text="Select retailer......"
+        multiSelect={false}
+        options={options}
+        shape="round"
+        onChange={onChangehandler}
+        onInputChange={onInputChangeHandler}
+      />
+      <Dropdown
+        width={400}
+        size="small"
+        text="Select retailer......"
+        multiSelect={true}
+        options={options}
+        shape="round"
+        onChange={onChangehandler}
+        onInputChange={onInputChangeHandler}
+      />
+    </div>
+  );
+}
+export default App;

package/src/App.test.js ADDED Viewed

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

package/src/index.css ADDED Viewed

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

package/src/index.js ADDED Viewed

@@ -0,0 +1,22 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import '@fontsource/roboto/300.css';
+import '@fontsource/roboto/400.css';
+import '@fontsource/roboto/500.css';
+import '@fontsource/roboto/700.css';
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

package/src/logo.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

package/src/stories/ButtonText.jsx ADDED Viewed

@@ -0,0 +1,28 @@
+import * as React from "react";
+// import {Button as MuiButton}  from "@mui/material/Button" ;
+import Button from "@mui/material/Button";
+import Stack from "@mui/material/Stack";
+export const ButtonText = (text, size, disabled, onClick) => {
+  const myText = "Ok";
+  return (
+    <Stack direction="row" spacing={2}>
+      {/* <Button variant="contained"
+       >
+        {myText}
+        </Button> */}
+      <Button
+        variant="contained"
+        // size={size}
+        // disabled={disabled ? true : false}
+        // onClick={(event) => {
+        //   onClick(event);
+        // }}
+      >
+        {myText}
+      </Button>
+    </Stack>
+  );
+};
+export default ButtonText;

package/src/stories/ButtonText.stories.js ADDED Viewed

@@ -0,0 +1,65 @@
+import React from "react";
+import { ButtonText } from "./ButtonText";
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+export default {
+  title: "SAG BI/Button",
+  component: ButtonText,
+  tags: ["autodocs"],
+  argTypes: {
+    // width: {
+    //   control: { type: "number" },
+    //   description: "width of the input field",
+    //   defaultValue: 300,
+    // },
+    size: {
+      control: { type: "radio" },
+      options: ["small", "large"],
+      description: "size: small/large",
+    },
+    text: {
+      name: "text",
+      control: { type: "text" },
+      description: "text inside of the button",
+      defaultValue: "",
+    },
+    // shape: {
+    //   control: { type: "radio" },
+    //   options: ["round", "square"],
+    //   description: "shape: round/square",
+    // },
+    onClick: {
+      action: "onClick",
+      description: "returns an event click object when user clicks on a button",
+    },
+  },
+};
+const Template = (args) => <ButtonText {...args} />;
+export const Small = Template.bind({});
+Small.args = {
+  // width: 300,
+  size: "small",
+  text: "Yes",
+};
+export const Large = Template.bind({});
+Large.args = {
+  // width: 300,
+  size: "small",
+  text: "No",
+};
+export const Disabled = Template.bind({});
+Disabled.args = {
+  // width: 300,
+  size: "small",
+  text: "Ok",
+  disabled: true,
+};

package/src/stories/ButtonText.style.js ADDED Viewed

@@ -0,0 +1,9 @@
+import styled from "styled-components";
+export const DropdownContainer = styled.div`
+  width: ${(props) => props.width};
+  text-align: left;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+`;

package/src/stories/Dropdown.stories.jsx ADDED Viewed

@@ -0,0 +1,238 @@
+import React from "react";
+import { Dropdown } from "./components/Dropdown";
+const options = [
+  { id: 0, label: "Shufersal" },
+  { id: 1, label: "EPC" },
+  { id: 2, label: "Food Lion" },
+  { id: 3, label: "Hannaford" },
+  { id: 4, label: "Giant Food" },
+  { id: 5, label: "The Giant Company" },
+  { id: 6, label: "Stop&Shop" },
+  { id: 7, label: "Price Chopper" },
+  { id: 8, label: "South Eastern Grocers" },
+];
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+export default {
+  title: "SAG BI/Dropdown",
+  component: Dropdown,
+  tags: ["autodocs"],
+  argTypes: {
+    width: {
+      control: { type: "number" },
+      description: "width of the input field",
+      defaultValue: 300,
+    },
+    size: {
+      control: { type: "radio" },
+      options: ["small", "large"],
+      description: "size: small/large",
+    },
+    text: {
+      name: "text",
+      control: { type: "text" },
+      description: "text inside of the input field",
+      defaultValue: 'Search...',
+    },
+    placeHolder: {
+      name: "placeHolder",
+      control: { type: "text" },
+      description: "notify the user how to type a text",
+      defaultValue: "Type...",
+    },
+    multiSelect: {
+      name: "multiSelect",
+      // control: { type: "boolean",
+      //            },
+                 control: false,
+      description: "true/false - allows multi select - (switch multiSelect / singleSelect is disabled in this story)",
+    },
+    limitTagsOnMultiSelect: {
+      name: "limitTagsOnMultiSelect",
+      control: { type: "number" },
+      description: "limit noumber displayed tags on multi select when not focused",
+    },
+    options: {
+      description:
+        "array [] of objects: {id: string1 , label: string2 } to fill dropdown options ",
+    },
+    shape: {
+      control: { type: "radio" },
+      options: ["round", "square"],
+      description: "shape: round/square",
+    },
+    showPopupIcon: {
+      name: "showPopupIcon",
+      control: { type: "boolean" },
+      description: "show/hide popup (up/down arrow) icon",
+    },
+    showSearchIcon: {
+      name: "showSearchIcon",
+      control: { type: "boolean" },
+      description: "show/hide search icon ",
+    },
+    onChange: {
+      action: "onChange",
+      description: "returns an option (object) selected by the user",
+    },
+    onInputChange: {
+      action: "onInputChange",
+      description: "returns a value (string) displayed in the textbox",
+    },
+  },
+};
+const Template = (args) => <Dropdown {...args} />;
+export const SmallSquare = Template.bind({});
+SmallSquare.args = {
+  width: 300,
+  size: "small",
+  text: "Retailer",
+  multiSelect: false,
+  limitTagsOnMultiSelect: 0,
+  placeHolder: "Type...",
+  shape: "square",
+  showPopupIcon: false,
+  showSearchIcon: false,
+  options: options,
+};
+export const SmallRound = Template.bind({});
+SmallRound.args = {
+  width: 300,
+  size: "small",
+  text: "Retailer",
+  multiSelect: false,
+  limitTagsOnMultiSelect: 0,
+  placeHolder: "Type...",
+  shape: "round",
+  showPopupIcon: false,
+  showSearchIcon: false,
+  options: options,
+};
+export const UpDownArrowIcon = Template.bind({});
+UpDownArrowIcon.args = {
+  width: 300,
+  size: "small",
+  text: "Retailer",
+  multiSelect: false,
+  limitTagsOnMultiSelect: 0,
+  placeHolder: "Type...",
+  shape: "round",
+  showPopupIcon: true,
+  showSearchIcon: false,
+  options: options,
+};
+export const SearchIcon = Template.bind({});
+SearchIcon.args = {
+  width: 300,
+  size: "small",
+  text: "Retailer",
+  multiSelect: false,
+  limitTagsOnMultiSelect: 0,
+  placeHolder: "Type...",
+  shape: "round",
+  showPopupIcon: false,
+  showSearchIcon: true,
+  options: options,
+};
+export const MultiSelectSmall = Template.bind({});
+MultiSelectSmall.args = {
+  width: 400,
+  size: "small",
+  text: "Retailer",
+  multiSelect: true,
+  limitTagsOnMultiSelect: 2,
+  placeHolder: "Type...",
+  shape: "square",
+  showPopupIcon: false,
+  showSearchIcon: false,
+  options: options,
+};
+export const MultiSelectLarge = Template.bind({});
+MultiSelectLarge.args = {
+  width: 500,
+  size: "large",
+  text: "Retailer",
+  multiSelect: true,
+  limitTagsOnMultiSelect: 2,
+  placeHolder: "Type...",
+  shape: "round",
+  showPopupIcon: false,
+  showSearchIcon: false,
+  options: options,
+};
+export const MultiSelectWithIcons = Template.bind({});
+MultiSelectWithIcons.args = {
+  width: 500,
+  size: "large",
+  text: "Retailer",
+  multiSelect: true,
+  limitTagsOnMultiSelect: 2,
+  placeHolder: "Type...",
+  shape: "square",
+  showPopupIcon: true,
+  showSearchIcon: true,
+  options: options,
+};
+export const LargeRoundWithoutIcons = Template.bind({});
+LargeRoundWithoutIcons.args = {
+  width: 400,
+  size: "large",
+  text: "Retailer",
+  multiSelect: false,
+  limitTagsOnMultiSelect: 0,
+  placeHolder: "Type part of name...",
+  shape: "round",
+  showPopupIcon: false,
+  showSearchIcon: false,
+  options: options,
+};
+export const LargeSquareWithIcons = Template.bind({});
+LargeSquareWithIcons.args = {
+  width: 400,
+  size: "large",
+  text: "Retailer",
+  multiSelect: false,
+  limitTagsOnMultiSelect: 0,
+  placeHolder: "Type part of name...",
+  shape: "square",
+  showPopupIcon: true,
+  showSearchIcon: true,
+  options: options,
+};

package/src/stories/Dropdown.style.js ADDED Viewed

@@ -0,0 +1,9 @@
+import styled from "styled-components";
+export const DropdownContainer = styled.div`
+  width: ${(props) => props.width};
+  text-align: left;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+`;

package/src/stories/InfoIcon.jsx ADDED Viewed

@@ -0,0 +1,5 @@
+export const InfoIcon = ({clicked}) => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke={clicked ? "white" : "black"} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-info"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="8"></line></svg>
+    );
+  }

package/src/stories/Introduction.mdx ADDED Viewed

@@ -0,0 +1,119 @@
+import { Meta } from '@storybook/blocks';
+import Code from './assets/code-brackets.svg';
+import Colors from './assets/colors.svg';
+import Comments from './assets/comments.svg';
+import Direction from './assets/direction.svg';
+import Flow from './assets/flow.svg';
+import Plugin from './assets/plugin.svg';
+import Repo from './assets/repo.svg';
+import StackAlt from './assets/stackalt.svg';
+<Meta title="SAG/Introduction" />
+<style>
+  {`
+    .subheading {
+      --mediumdark: '#999999';
+      font-weight: 700;
+      font-size: 13px;
+      color: #999;
+      letter-spacing: 6px;
+      line-height: 24px;
+      text-transform: uppercase;
+      margin-bottom: 12px;
+      margin-top: 40px;
+    }
+    .link-list {
+      display: grid;
+      grid-template-columns: 1fr;
+      grid-template-rows: 1fr 1fr;
+      row-gap: 10px;
+    }
+    @media (min-width: 620px) {
+      .link-list {
+        row-gap: 20px;
+        column-gap: 20px;
+        grid-template-columns: 1fr 1fr;
+      }
+    }
+    @media all and (-ms-high-contrast:none) {
+    .link-list {
+        display: -ms-grid;
+        -ms-grid-columns: 1fr 1fr;
+        -ms-grid-rows: 1fr 1fr;
+      }
+    }
+    .link-item {
+      display: block;
+      padding: 20px;
+      border: 1px solid #00000010;
+      border-radius: 5px;
+      transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
+      color: #333333;
+      display: flex;
+      align-items: flex-start;
+    }
+    .link-item:hover {
+      border-color: #1EA7FD50;
+      transform: translate3d(0, -3px, 0);
+      box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
+    }
+    .link-item:active {
+      border-color: #1EA7FD;
+      transform: translate3d(0, 0, 0);
+    }
+    .link-item strong {
+      font-weight: 700;
+      display: block;
+      margin-bottom: 2px;
+    }
+    .link-item img {
+      height: 40px;
+      width: 40px;
+      margin-right: 15px;
+      flex: none;
+    }
+    .link-item span,
+    .link-item p {
+      margin: 0;
+      font-size: 14px;
+      line-height: 20px;
+    }
+    .tip {
+      display: inline-block;
+      border-radius: 1em;
+      font-size: 11px;
+      line-height: 12px;
+      font-weight: 700;
+      background: #E7FDD8;
+      color: #66BF3C;
+      padding: 4px 12px;
+      margin-right: 10px;
+      vertical-align: top;
+    }
+    .tip-wrapper {
+      font-size: 13px;
+      line-height: 20px;
+      margin-top: 40px;
+      margin-bottom: 40px;
+    }
+    .tip-wrapper code {
+      font-size: 12px;
+      display: inline-block;
+    }
+  `}
+</style>
+# Welcome to Sagramata Storybook