sag_components 1.0.0

package/.babelrc.json

@@ -0,0 +1,15 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ],
+    "@babel/preset-typescript"
+  ],
+  "plugins": []
+}

package/.storybook/YourTheme.js

@@ -0,0 +1,11 @@
+// .storybook/YourTheme.js
+
+import { create } from "@storybook/theming";
+
+export default create({
+  base: "light",
+  brandTitle: "Sagramata storybook",
+  brandUrl: "https://www.sag121.com/",
+  brandImage: "https://www.sag121.com/wp-content/uploads/2022/09/logo-1.svg",
+  brandTarget: "_self",
+});

package/.storybook/main.js

@@ -0,0 +1,30 @@
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+const config = {
+  stories: ["../src/stories/**/*.mdx", "../src/stories/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    {
+      name: '@storybook/addon-storysource',
+      options: {
+        rule: {
+          test: [/\.stories\.jsx?$/], //This is default
+          //include: [path.resolve(__dirname, '../stories')], // You can specify directories
+        },
+        loaderOptions: {
+          prettierConfig: { printWidth: 80, singleQuote: false },
+          injectStoryParameters: false,
+        },
+      },
+    },
+  ],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

package/.storybook/manager.js

@@ -0,0 +1,8 @@
+// .storybook/manager.js
+
+import { addons } from "@storybook/addons";
+import yourTheme from "./YourTheme";
+
+addons.setConfig({
+  theme: yourTheme,
+});

package/.storybook/preview.js

@@ -0,0 +1,14 @@
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

package/.storybook/webpack.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+    module: {
+      rules: [
+        {
+            test: /\.svg$/,
+            use: ['@svgr/webpack']
+        },
+        {
+          test: /\.inline.svg$/,
+          loader: 'svg-react-loader'
+        }
+      ]
+    }
+  }
+
+  

package/README.md

@@ -0,0 +1,85 @@
+# Introduction 
+Storybook is a user interface development environment and playground for UI components. The tool enables developers to create interactive UI components in isolation, which helps in building and maintaining complex user interfaces.
+
+# Getting Started
+TODO: Guide users through getting your code up and running on their own system. In this section you can talk about:
+
+1.	Installation process
+In Strorybook project:
+Use the Storybook CLI to install it in a single command. Run this inside your existing project’s root directory:
+    npx storybook@latest init   
+Storybook init command needs to be installed into a project (react project) that is already set up with a framework.
+
+To create new Storybook project for Chromatic, first open new terminal, install chromatic package:
+  npm install --save-dev chromatic
+Then create a new react Storybook probect, use one command:
+  npx sb init
+Select project type: react
+
+
+Publish your Storybook
+On the command line, publish to Chromatic’s secure CDN for the first time with the following command:
+npx chromatic --project-token=
+
+
+2.	Software dependencies
+Storybook will look into your project's dependencies during its install process and provide you with the best configuration available.
+The installation will make the following changes to your local environment:
+    Install the required dependencies.
+    Setup the necessary scripts to run and build Storybook.
+    Add the default Storybook configuration.
+
+3.	Latest releases
+
+4.	API references
+
+5.  Deployment Storybook components in other applications:
+
+Publish your Storybook: Once your Storybook is built, you can publish it to a hosting service like GitHub Pages, Netlify, or AWS S3. This will make your Storybook accessible via a URL.
+
+Once your Storybook is published, you can install your components in other applications. You can do this by adding a dependency to your package.json file and then importing the component from your Storybook.
+
+For example, let's say you have a component called Button in your Storybook. To install this component in another application, you would add the following to your package.json file:
+{
+  "dependencies": {
+    "@your-username/your-storybook": "1.0.0"
+  }
+}
+Then, you can import the Button component like this:
+import { Button } from '@your-username/your-storybook';
+
+Use your Storybook components in other applications: Once you've installed your Storybook components in another application, you can use them just like any other component. For example, you could use the Button component like this:
+
+import React from 'react';
+import { Button } from '@your-username/your-storybook';
+
+function MyComponent() {
+  return (
+    <Button>Click me!</Button>
+  );
+}
+
+# Build and Test
+TODO: Describe and show how to build your code and run the tests. 
+
+First, build your own components in:
+\stories 
+Every component must include 3 files, for example the 'Button' component:
+button.css - defines the style of the button
+Button.jsx - includes React js code that defines the button 
+Button.stories.jsx - A *.stories.js file defines all the stories for a component. Each story has a corresponding sidebar item. 
+
+When you completed creating your component, check that everything worked by running:
+    npm run storybook
+It will start Storybook locally in a new browser tab (port 6006), 
+In sidebar item click on a story, it renders in the Canvas an isolated preview iframe.
+Navigate between stories by clicking on them in the sidebar. 
+If you want to learn more: https://storybook.js.org/docs/react/get-started/browse-stories
+
+# Contribute
+TODO: Explain how other users and developers can contribute to make your code better. 
+
+You can create or improve existed stories for your UI components in the src/stories directory. A story is a functional use case of a UI component. For example, if you have a button component, you might create stories for "Primary Button", "Secondary Button", "Disabled Button", etc.
+You can also add addons to Storybook to extend its functionality. Addons can do things like display component props, simulate different device sizes, and more. To add an addon, follow the instructions provided in the addon's documentation.
+Users and developers may use addons to investigate the functionality of components, get ideas what to improve, and in case of developers may try to change a code of components to make it better.
+

package/azure-pipelines.yml

@@ -0,0 +1,50 @@
+# Starter pipeline
+# Start with a minimal pipeline that you can customize to build and deploy your code.
+# Add steps that build, run tests, deploy, and more:
+# https://aka.ms/yaml
+
+
+# 👇 Event to trigger pipeline execution
+trigger:
+  - DEV
+
+# Other configurations
+
+# Pipeline stages
+stages:
+  - stage: Test
+    displayName: Chromatic Testing
+    # Job list
+    jobs:
+      - job: Chromatic_Deploy
+        displayName: Install packages and publishes to Chromatic
+        variables:
+          # Sets scoped environment variable to cache packages
+          npm_config_cache: $(Pipeline.Workspace)/.npm
+        # List of steps
+        steps:
+          - checkout: self
+            displayName: "Get full Git history"
+            fetchDepth: 0
+          # 👇 Installs and configures Node environment
+          - task: NodeTool@0
+            inputs:
+              versionSpec: "16.x"
+            displayName: "Install Node.js"
+          - task: Cache@2
+            displayName: Install and cache packages
+            inputs:
+              key: 'npm | "$(Agent.OS)" | package-lock.json'
+              restoreKeys: |
+                npm | "$(Agent.OS)"
+              path: $(npm_config_cache)
+          - script: npm ci
+            condition: ne(variables.CACHE_RESTORED, 'true')
+            # 👇 Adds Chromatic as a step
+          - task: CmdLine@2
+            displayName: Publish to Chromatic
+            inputs:
+              # 👇 Runs Chromatic
+              script: npx chromatic --project-token=c74e7c242a07 --exit-zero-on-changes
+            env:
+              CHROMATIC_PROJECT_TOKEN: $(CHROMATIC_PROJECT_TOKEN)

package/babel.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  presets: [
+    [
+      "react-app",
+      {
+        absoluteRuntime: false,
+      },
+    ],
+  ],
+};

package/build/manifest.json

@@ -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/build/robots.txt

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

package/dist/Dropdown.js

@@ -0,0 +1,237 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Dropdown = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _DropdownStyle = require("../Dropdown.style.js");
+var _Autocomplete = _interopRequireDefault(require("@mui/material/Autocomplete"));
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
+var _InputAdornment = _interopRequireDefault(require("@mui/material/InputAdornment"));
+var _Icon = _interopRequireDefault(require("@mui/material/Icon"));
+var _CheckBoxOutlineBlank = _interopRequireDefault(require("@mui/icons-material/CheckBoxOutlineBlank"));
+var _CheckBox = _interopRequireDefault(require("@mui/icons-material/CheckBox"));
+var _Search = _interopRequireDefault(require("@mui/icons-material/Search.js"));
+var _ArrowDropDown = _interopRequireDefault(require("@mui/icons-material/ArrowDropDown.js"));
+//import PropTypes from "prop-types";
+
+// import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+// import { faChevronDown, faAsterisk } from "@fortawesome/free-solid-svg-icons";
+var icon = /*#__PURE__*/_react.default.createElement(_CheckBoxOutlineBlank.default, {
+  fontSize: "small"
+});
+var checkedIcon = /*#__PURE__*/_react.default.createElement(_CheckBox.default, {
+  fontSize: "small"
+});
+
+/**
+ *  SAG Dropdown
+ */
+var Dropdown = function Dropdown(_ref) {
+  var width = _ref.width,
+    size = _ref.size,
+    text = _ref.text,
+    shape = _ref.shape,
+    placeHolder = _ref.placeHolder,
+    multiSelect = _ref.multiSelect,
+    limitTagsOnMultiSelect = _ref.limitTagsOnMultiSelect,
+    showPopupIcon = _ref.showPopupIcon,
+    showSearchIcon = _ref.showSearchIcon,
+    options = _ref.options,
+    onChange = _ref.onChange,
+    onInputChange = _ref.onInputChange;
+  /**
+   *  SAG Dropdown
+   */
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    currentInputValue = _useState2[0],
+    setCurrentInputValue = _useState2[1];
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    currentOption = _useState4[0],
+    setCurrentOption = _useState4[1];
+  (0, _react.useEffect)(function () {
+    var delayDebounceFn = setTimeout(function () {
+      onInputChange(currentInputValue);
+    }, 1000);
+    return function () {
+      return clearTimeout(delayDebounceFn);
+    };
+  }, [currentInputValue]);
+
+  //defines shape: squire or round
+  var getTextFieldStyle = function getTextFieldStyle() {
+    if (shape === "round") {
+      // round
+      return {
+        "& .MuiOutlinedInput-root": {
+          borderRadius: "50px",
+          legend: {
+            marginLeft: "30px"
+          }
+        },
+        "& .MuiAutocomplete-inputRoot": {
+          paddingLeft: "20px !important",
+          borderRadius: "50px"
+        },
+        "& .MuiInputLabel-outlined": {
+          paddingLeft: "20px"
+        },
+        "& .MuiInputLabel-shrink": {
+          marginLeft: "20px",
+          paddingLeft: "10px",
+          paddingRight: 0,
+          background: "white"
+        }
+      };
+    } else {
+      //square
+      return null;
+    }
+  };
+  var onInputChangeHandler = function onInputChangeHandler(event, newInputValue) {
+    setCurrentInputValue({
+      syntheticBaseEvent: event,
+      inputValue: newInputValue
+    });
+  };
+  var onChangeHandler = function onChangeHandler(event, newValue) {
+    setCurrentOption(newValue);
+    onChange(event, newValue);
+  };
+  var getAutocompleteSingle = function getAutocompleteSingle() {
+    return /*#__PURE__*/_react.default.createElement(_Autocomplete.default, {
+      onChange: function onChange(event, newValue) {
+        onChangeHandler(event, newValue);
+      },
+      onInputChange: function onInputChange(event, newInputValue) {
+        onInputChangeHandler(event, newInputValue);
+      },
+      disablePortal: true,
+      id: "combo-box",
+      options: options,
+      sx: {
+        width: width
+      },
+      popupIcon: showPopupIcon ? /*#__PURE__*/_react.default.createElement(_ArrowDropDown.default, null) : null,
+      forcePopupIcon: "auto",
+      renderInput: function renderInput(params) {
+        return /*#__PURE__*/_react.default.createElement(_TextField.default, Object.assign({}, params, {
+          label: text,
+          size: size,
+          sx: getTextFieldStyle(),
+          placeholder: placeHolder,
+          InputProps: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, params.InputProps), {}, {
+            startAdornment: showSearchIcon ? /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
+              position: "start"
+            }, /*#__PURE__*/_react.default.createElement(_Search.default, {
+              fontSize: "medium"
+            })) : null
+          })
+        }));
+      }
+    });
+  };
+  var getAutocompleteMulti = function getAutocompleteMulti() {
+    return /*#__PURE__*/_react.default.createElement(_Autocomplete.default, {
+      onChange: function onChange(event, newValue) {
+        onChangeHandler(event, newValue);
+      },
+      onInputChange: function onInputChange(event, newInputValue) {
+        onInputChangeHandler(event, newInputValue);
+      },
+      multiple: true,
+      limitTags: limitTagsOnMultiSelect,
+      size: size,
+      id: "checkboxes-tags",
+      options: options,
+      disableCloseOnSelect: true,
+      getOptionLabel: function getOptionLabel(option) {
+        return option.label;
+      },
+      popupIcon: showPopupIcon ? /*#__PURE__*/_react.default.createElement(_ArrowDropDown.default, null) : null,
+      renderOption: function renderOption(props, option, _ref2) {
+        var selected = _ref2.selected;
+        return /*#__PURE__*/_react.default.createElement("li", props, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
+          icon: icon,
+          checkedIcon: checkedIcon,
+          style: {
+            marginRight: 8
+          },
+          checked: selected
+        }), option.label);
+      },
+      style: {
+        width: width
+      },
+      renderInput: function renderInput(params) {
+        return showSearchIcon && (!currentOption || currentOption && currentOption.length === 0) ? /*#__PURE__*/_react.default.createElement(_TextField.default, Object.assign({}, params, {
+          label: text,
+          size: size,
+          sx: getTextFieldStyle(),
+          placeholder: placeHolder,
+          InputProps: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, params.InputProps), {}, {
+            startAdornment: /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
+              position: "start"
+            }, /*#__PURE__*/_react.default.createElement(_Search.default, {
+              fontSize: "medium"
+            }))
+          })
+        })) : /*#__PURE__*/_react.default.createElement(_TextField.default, Object.assign({}, params, {
+          label: text,
+          size: size,
+          sx: getTextFieldStyle(),
+          placeholder: placeHolder
+        }));
+      }
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_DropdownStyle.DropdownContainer, {
+    width: width
+  }, multiSelect ? getAutocompleteMulti() : getAutocompleteSingle());
+};
+
+// Dropdown.propTypes = {
+//   /**
+//    *  dropdown width
+//    */
+//   width: PropTypes.string,
+
+//   /**
+//    *  dropdown size: small/large
+//    */
+//   size: PropTypes.string,
+
+//   /**
+//    * dropdown initial input text
+//    */
+//   text: PropTypes.string,
+
+//   /**
+//    * arrayOf <T> - options array to load into dropdown
+//    */
+//   options: PropTypes.arrayOf,
+
+//   /**
+//    *  shape: round/square
+//    */
+//   shape: PropTypes.string,
+// };
+
+// Dropdown.defaultProps = {
+//   width: 300,
+//   size: "small",
+//   text: "Select retailer...",
+//   options: [],
+//   shape: "round",
+// };
+exports.Dropdown = Dropdown;
+var _default = Dropdown;
+exports.default = _default;

package/dist/OneColumnContainer.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OneColumnContainer = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _OneColumnContainer = require("./OneColumnContainer.style");
+var _InfoIcon = require("./InfoIcon");
+var _excluded = ["width", "height", "infoText"];
+/**
+ * Primary UI component for user interaction
+ */
+var OneColumnContainer = function OneColumnContainer(_ref) {
+  var width = _ref.width,
+    height = _ref.height,
+    infoText = _ref.infoText,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    clicked = _useState2[0],
+    setClicked = _useState2[1];
+  var onInfoClick = function onInfoClick() {
+    setClicked(!clicked);
+  };
+  return /*#__PURE__*/_react.default.createElement(_OneColumnContainer.StyledContainer, {
+    width: width,
+    height: height
+  }, /*#__PURE__*/_react.default.createElement(_OneColumnContainer.InfoTextContainer, {
+    clicked: clicked,
+    width: width,
+    height: height
+  }, /*#__PURE__*/_react.default.createElement(_OneColumnContainer.InfoTextLabel, null, infoText)), /*#__PURE__*/_react.default.createElement(_OneColumnContainer.IconContainer, {
+    onClick: onInfoClick
+  }, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
+    clicked: clicked
+  })));
+};
+exports.OneColumnContainer = OneColumnContainer;
+OneColumnContainer.defaultProps = {};

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "sag_components",
+  "version": "1.0.0",
+  "description": "",
+  "main": "dist/index.js",  
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "cross-env BABEL_ENV=production babel src -d dist",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "keywords": [],
+  "author": "SAG",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/cli": "^7.21.5",
+    "@babel/preset-env": "^7.21.4",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.4",
+    "@storybook/addon-a11y": "^7.0.7",
+    "@storybook/addon-essentials": "^7.0.6",
+    "@storybook/addon-interactions": "^7.0.6",
+    "@storybook/addon-links": "^7.0.6",
+    "@storybook/blocks": "^7.0.6",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "^7.0.6",
+    "@storybook/react-webpack5": "^7.0.6",
+    "@storybook/testing-library": "^0.0.14-next.2",
+    "cross-env": "^7.0.3",
+    "css-loader": "^5.2.7",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sass": "^1.62.0",
+    "sass-loader": "^10.4.1",
+    "storybook": "^7.0.6",
+    "style-loader": "^2.0.0",
+    "styled-components": "^5.3.10"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@fontsource/roboto": "^4.5.8",
+    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.13.0",
+    "@mui/styled-engine-sc": "^5.12.0",
+    "@storybook/addon-storysource": "^7.0.7",
+    "hoopy": "^0.1.4",
+    "react-scripts": "5.0.1"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}