shared-components build pipeline

2024-09-18 17:47:10 +05:30
parent f01c12d4b6
commit 87b8e4e942
936 changed files with 32906 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,48 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Dependencies
+node_modules
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+# Swap the comments on the following lines if you don't wish to use zero-installs
+# Documentation here: https://yarnpkg.com/features/zero-installs
+!.yarn/cache
+#.pnp.*
+
+# Testing
+coverage
+
+# Production
+build
+dist
+lib
+public
+
+# Miscellaneous
+*.local
+.DS_Store
+
+analyse.html
+stats.html
+
+*.pem
+*.d.ts
+
+analyticsrc.json
+
+Date
+backlog.yml
+Lottie Structure.txt
+LottieSchema.json
+.hintrc
--- a/33
+++ b/33
@@ -0,0 +1,33 @@
+# pull the Node.js Docker image as dependencies
+# ---- Dependencies Node ----
+FROM node:16-alpine AS build
+# copy the package.json files from local machine to the workdir in container
+COPY package.json .
+# install node packages
+RUN npm set progress=false && npm config set depth 0
+RUN npm install --legacy-peer-deps
+
+# #
+# # ---- Test ----
+# # run linters, setup and tests
+# FROM dependencies AS test
+# COPY . .
+# RUN  npm run lint && npm run test
+# copy app sources
+COPY ./src ./src
+COPY tsconfig.json vite.config.ts analyticsrc.json index.html /
+RUN npm run build
+
+FROM node:16-alpine
+# copy the generated modules and all other files to the container
+WORKDIR /usr/src/app
+RUN npm install -g serve
+COPY cert.pem /etc/ssl/certificates/cert.pem
+COPY chain.pem /etc/ssl/certificates/chain.pem
+COPY fullchain.pem /etc/ssl/certificates/fullchain.pem
+COPY privkey.pem /etc/ssl/certificates/privkey.pem
+COPY --from=build build .
+# our app is running on port 3000 within the container, so need to expose it
+EXPOSE 3000
+# the command that starts our app
+CMD ["serve", "-s", "."]
--- a/504
+++ b/504
@@ -0,0 +1,504 @@
+                  GNU LESSER GENERAL PUBLIC LICENSE
+                       Version 2.1, February 1999
+
+ Copyright (C) 1991, 1999 Free Software Foundation, Inc.
+ 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+[This is the first released version of the Lesser GPL.  It also counts
+ as the successor of the GNU Library Public License, version 2, hence
+ the version number 2.1.]
+
+                            Preamble
+
+  The licenses for most software are designed to take away your
+freedom to share and change it.  By contrast, the GNU General Public
+Licenses are intended to guarantee your freedom to share and change
+free software--to make sure the software is free for all its users.
+
+  This license, the Lesser General Public License, applies to some
+specially designated software packages--typically libraries--of the
+Free Software Foundation and other authors who decide to use it.  You
+can use it too, but we suggest you first think carefully about whether
+this license or the ordinary General Public License is the better
+strategy to use in any particular case, based on the explanations below.
+
+  When we speak of free software, we are referring to freedom of use,
+not price.  Our General Public Licenses are designed to make sure that
+you have the freedom to distribute copies of free software (and charge
+for this service if you wish); that you receive source code or can get
+it if you want it; that you can change the software and use pieces of
+it in new free programs; and that you are informed that you can do
+these things.
+
+  To protect your rights, we need to make restrictions that forbid
+distributors to deny you these rights or to ask you to surrender these
+rights.  These restrictions translate to certain responsibilities for
+you if you distribute copies of the library or if you modify it.
+
+  For example, if you distribute copies of the library, whether gratis
+or for a fee, you must give the recipients all the rights that we gave
+you.  You must make sure that they, too, receive or can get the source
+code.  If you link other code with the library, you must provide
+complete object files to the recipients, so that they can relink them
+with the library after making changes to the library and recompiling
+it.  And you must show them these terms so they know their rights.
+
+  We protect your rights with a two-step method: (1) we copyright the
+library, and (2) we offer you this license, which gives you legal
+permission to copy, distribute and/or modify the library.
+
+  To protect each distributor, we want to make it very clear that
+there is no warranty for the free library.  Also, if the library is
+modified by someone else and passed on, the recipients should know
+that what they have is not the original version, so that the original
+author's reputation will not be affected by problems that might be
+introduced by others.
+
+  Finally, software patents pose a constant threat to the existence of
+any free program.  We wish to make sure that a company cannot
+effectively restrict the users of a free program by obtaining a
+restrictive license from a patent holder.  Therefore, we insist that
+any patent license obtained for a version of the library must be
+consistent with the full freedom of use specified in this license.
+
+  Most GNU software, including some libraries, is covered by the
+ordinary GNU General Public License.  This license, the GNU Lesser
+General Public License, applies to certain designated libraries, and
+is quite different from the ordinary General Public License.  We use
+this license for certain libraries in order to permit linking those
+libraries into non-free programs.
+
+  When a program is linked with a library, whether statically or using
+a shared library, the combination of the two is legally speaking a
+combined work, a derivative of the original library.  The ordinary
+General Public License therefore permits such linking only if the
+entire combination fits its criteria of freedom.  The Lesser General
+Public License permits more lax criteria for linking other code with
+the library.
+
+  We call this license the "Lesser" General Public License because it
+does Less to protect the user's freedom than the ordinary General
+Public License.  It also provides other free software developers Less
+of an advantage over competing non-free programs.  These disadvantages
+are the reason we use the ordinary General Public License for many
+libraries.  However, the Lesser license provides advantages in certain
+special circumstances.
+
+  For example, on rare occasions, there may be a special need to
+encourage the widest possible use of a certain library, so that it becomes
+a de-facto standard.  To achieve this, non-free programs must be
+allowed to use the library.  A more frequent case is that a free
+library does the same job as widely used non-free libraries.  In this
+case, there is little to gain by limiting the free library to free
+software only, so we use the Lesser General Public License.
+
+  In other cases, permission to use a particular library in non-free
+programs enables a greater number of people to use a large body of
+free software.  For example, permission to use the GNU C Library in
+non-free programs enables many more people to use the whole GNU
+operating system, as well as its variant, the GNU/Linux operating
+system.
+
+  Although the Lesser General Public License is Less protective of the
+users' freedom, it does ensure that the user of a program that is
+linked with the Library has the freedom and the wherewithal to run
+that program using a modified version of the Library.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.  Pay close attention to the difference between a
+"work based on the library" and a "work that uses the library".  The
+former contains code derived from the library, whereas the latter must
+be combined with the library in order to run.
+
+                  GNU LESSER GENERAL PUBLIC LICENSE
+   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
+
+  0. This License Agreement applies to any software library or other
+program which contains a notice placed by the copyright holder or
+other authorized party saying it may be distributed under the terms of
+this Lesser General Public License (also called "this License").
+Each licensee is addressed as "you".
+
+  A "library" means a collection of software functions and/or data
+prepared so as to be conveniently linked with application programs
+(which use some of those functions and data) to form executables.
+
+  The "Library", below, refers to any such software library or work
+which has been distributed under these terms.  A "work based on the
+Library" means either the Library or any derivative work under
+copyright law: that is to say, a work containing the Library or a
+portion of it, either verbatim or with modifications and/or translated
+straightforwardly into another language.  (Hereinafter, translation is
+included without limitation in the term "modification".)
+
+  "Source code" for a work means the preferred form of the work for
+making modifications to it.  For a library, complete source code means
+all the source code for all modules it contains, plus any associated
+interface definition files, plus the scripts used to control compilation
+and installation of the library.
+
+  Activities other than copying, distribution and modification are not
+covered by this License; they are outside its scope.  The act of
+running a program using the Library is not restricted, and output from
+such a program is covered only if its contents constitute a work based
+on the Library (independent of the use of the Library in a tool for
+writing it).  Whether that is true depends on what the Library does
+and what the program that uses the Library does.
+
+  1. You may copy and distribute verbatim copies of the Library's
+complete source code as you receive it, in any medium, provided that
+you conspicuously and appropriately publish on each copy an
+appropriate copyright notice and disclaimer of warranty; keep intact
+all the notices that refer to this License and to the absence of any
+warranty; and distribute a copy of this License along with the
+Library.
+
+  You may charge a fee for the physical act of transferring a copy,
+and you may at your option offer warranty protection in exchange for a
+fee.
+
+  2. You may modify your copy or copies of the Library or any portion
+of it, thus forming a work based on the Library, and copy and
+distribute such modifications or work under the terms of Section 1
+above, provided that you also meet all of these conditions:
+
+    a) The modified work must itself be a software library.
+
+    b) You must cause the files modified to carry prominent notices
+    stating that you changed the files and the date of any change.
+
+    c) You must cause the whole of the work to be licensed at no
+    charge to all third parties under the terms of this License.
+
+    d) If a facility in the modified Library refers to a function or a
+    table of data to be supplied by an application program that uses
+    the facility, other than as an argument passed when the facility
+    is invoked, then you must make a good faith effort to ensure that,
+    in the event an application does not supply such function or
+    table, the facility still operates, and performs whatever part of
+    its purpose remains meaningful.
+
+    (For example, a function in a library to compute square roots has
+    a purpose that is entirely well-defined independent of the
+    application.  Therefore, Subsection 2d requires that any
+    application-supplied function or table used by this function must
+    be optional: if the application does not supply it, the square
+    root function must still compute square roots.)
+
+These requirements apply to the modified work as a whole.  If
+identifiable sections of that work are not derived from the Library,
+and can be reasonably considered independent and separate works in
+themselves, then this License, and its terms, do not apply to those
+sections when you distribute them as separate works.  But when you
+distribute the same sections as part of a whole which is a work based
+on the Library, the distribution of the whole must be on the terms of
+this License, whose permissions for other licensees extend to the
+entire whole, and thus to each and every part regardless of who wrote
+it.
+
+Thus, it is not the intent of this section to claim rights or contest
+your rights to work written entirely by you; rather, the intent is to
+exercise the right to control the distribution of derivative or
+collective works based on the Library.
+
+In addition, mere aggregation of another work not based on the Library
+with the Library (or with a work based on the Library) on a volume of
+a storage or distribution medium does not bring the other work under
+the scope of this License.
+
+  3. You may opt to apply the terms of the ordinary GNU General Public
+License instead of this License to a given copy of the Library.  To do
+this, you must alter all the notices that refer to this License, so
+that they refer to the ordinary GNU General Public License, version 2,
+instead of to this License.  (If a newer version than version 2 of the
+ordinary GNU General Public License has appeared, then you can specify
+that version instead if you wish.)  Do not make any other change in
+these notices.
+
+  Once this change is made in a given copy, it is irreversible for
+that copy, so the ordinary GNU General Public License applies to all
+subsequent copies and derivative works made from that copy.
+
+  This option is useful when you wish to copy part of the code of
+the Library into a program that is not a library.
+
+  4. You may copy and distribute the Library (or a portion or
+derivative of it, under Section 2) in object code or executable form
+under the terms of Sections 1 and 2 above provided that you accompany
+it with the complete corresponding machine-readable source code, which
+must be distributed under the terms of Sections 1 and 2 above on a
+medium customarily used for software interchange.
+
+  If distribution of object code is made by offering access to copy
+from a designated place, then offering equivalent access to copy the
+source code from the same place satisfies the requirement to
+distribute the source code, even though third parties are not
+compelled to copy the source along with the object code.
+
+  5. A program that contains no derivative of any portion of the
+Library, but is designed to work with the Library by being compiled or
+linked with it, is called a "work that uses the Library".  Such a
+work, in isolation, is not a derivative work of the Library, and
+therefore falls outside the scope of this License.
+
+  However, linking a "work that uses the Library" with the Library
+creates an executable that is a derivative of the Library (because it
+contains portions of the Library), rather than a "work that uses the
+library".  The executable is therefore covered by this License.
+Section 6 states terms for distribution of such executables.
+
+  When a "work that uses the Library" uses material from a header file
+that is part of the Library, the object code for the work may be a
+derivative work of the Library even though the source code is not.
+Whether this is true is especially significant if the work can be
+linked without the Library, or if the work is itself a library.  The
+threshold for this to be true is not precisely defined by law.
+
+  If such an object file uses only numerical parameters, data
+structure layouts and accessors, and small macros and small inline
+functions (ten lines or less in length), then the use of the object
+file is unrestricted, regardless of whether it is legally a derivative
+work.  (Executables containing this object code plus portions of the
+Library will still fall under Section 6.)
+
+  Otherwise, if the work is a derivative of the Library, you may
+distribute the object code for the work under the terms of Section 6.
+Any executables containing that work also fall under Section 6,
+whether or not they are linked directly with the Library itself.
+
+  6. As an exception to the Sections above, you may also combine or
+link a "work that uses the Library" with the Library to produce a
+work containing portions of the Library, and distribute that work
+under terms of your choice, provided that the terms permit
+modification of the work for the customer's own use and reverse
+engineering for debugging such modifications.
+
+  You must give prominent notice with each copy of the work that the
+Library is used in it and that the Library and its use are covered by
+this License.  You must supply a copy of this License.  If the work
+during execution displays copyright notices, you must include the
+copyright notice for the Library among them, as well as a reference
+directing the user to the copy of this License.  Also, you must do one
+of these things:
+
+    a) Accompany the work with the complete corresponding
+    machine-readable source code for the Library including whatever
+    changes were used in the work (which must be distributed under
+    Sections 1 and 2 above); and, if the work is an executable linked
+    with the Library, with the complete machine-readable "work that
+    uses the Library", as object code and/or source code, so that the
+    user can modify the Library and then relink to produce a modified
+    executable containing the modified Library.  (It is understood
+    that the user who changes the contents of definitions files in the
+    Library will not necessarily be able to recompile the application
+    to use the modified definitions.)
+
+    b) Use a suitable shared library mechanism for linking with the
+    Library.  A suitable mechanism is one that (1) uses at run time a
+    copy of the library already present on the user's computer system,
+    rather than copying library functions into the executable, and (2)
+    will operate properly with a modified version of the library, if
+    the user installs one, as long as the modified version is
+    interface-compatible with the version that the work was made with.
+
+    c) Accompany the work with a written offer, valid for at
+    least three years, to give the same user the materials
+    specified in Subsection 6a, above, for a charge no more
+    than the cost of performing this distribution.
+
+    d) If distribution of the work is made by offering access to copy
+    from a designated place, offer equivalent access to copy the above
+    specified materials from the same place.
+
+    e) Verify that the user has already received a copy of these
+    materials or that you have already sent this user a copy.
+
+  For an executable, the required form of the "work that uses the
+Library" must include any data and utility programs needed for
+reproducing the executable from it.  However, as a special exception,
+the materials to be distributed need not include anything that is
+normally distributed (in either source or binary form) with the major
+components (compiler, kernel, and so on) of the operating system on
+which the executable runs, unless that component itself accompanies
+the executable.
+
+  It may happen that this requirement contradicts the license
+restrictions of other proprietary libraries that do not normally
+accompany the operating system.  Such a contradiction means you cannot
+use both them and the Library together in an executable that you
+distribute.
+
+  7. You may place library facilities that are a work based on the
+Library side-by-side in a single library together with other library
+facilities not covered by this License, and distribute such a combined
+library, provided that the separate distribution of the work based on
+the Library and of the other library facilities is otherwise
+permitted, and provided that you do these two things:
+
+    a) Accompany the combined library with a copy of the same work
+    based on the Library, uncombined with any other library
+    facilities.  This must be distributed under the terms of the
+    Sections above.
+
+    b) Give prominent notice with the combined library of the fact
+    that part of it is a work based on the Library, and explaining
+    where to find the accompanying uncombined form of the same work.
+
+  8. You may not copy, modify, sublicense, link with, or distribute
+the Library except as expressly provided under this License.  Any
+attempt otherwise to copy, modify, sublicense, link with, or
+distribute the Library is void, and will automatically terminate your
+rights under this License.  However, parties who have received copies,
+or rights, from you under this License will not have their licenses
+terminated so long as such parties remain in full compliance.
+
+  9. You are not required to accept this License, since you have not
+signed it.  However, nothing else grants you permission to modify or
+distribute the Library or its derivative works.  These actions are
+prohibited by law if you do not accept this License.  Therefore, by
+modifying or distributing the Library (or any work based on the
+Library), you indicate your acceptance of this License to do so, and
+all its terms and conditions for copying, distributing or modifying
+the Library or works based on it.
+
+  10. Each time you redistribute the Library (or any work based on the
+Library), the recipient automatically receives a license from the
+original licensor to copy, distribute, link with or modify the Library
+subject to these terms and conditions.  You may not impose any further
+restrictions on the recipients' exercise of the rights granted herein.
+You are not responsible for enforcing compliance by third parties with
+this License.
+
+  11. If, as a consequence of a court judgment or allegation of patent
+infringement or for any other reason (not limited to patent issues),
+conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot
+distribute so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you
+may not distribute the Library at all.  For example, if a patent
+license would not permit royalty-free redistribution of the Library by
+all those who receive copies directly or indirectly through you, then
+the only way you could satisfy both it and this License would be to
+refrain entirely from distribution of the Library.
+
+If any portion of this section is held invalid or unenforceable under any
+particular circumstance, the balance of the section is intended to apply,
+and the section as a whole is intended to apply in other circumstances.
+
+It is not the purpose of this section to induce you to infringe any
+patents or other property right claims or to contest validity of any
+such claims; this section has the sole purpose of protecting the
+integrity of the free software distribution system which is
+implemented by public license practices.  Many people have made
+generous contributions to the wide range of software distributed
+through that system in reliance on consistent application of that
+system; it is up to the author/donor to decide if he or she is willing
+to distribute software through any other system and a licensee cannot
+impose that choice.
+
+This section is intended to make thoroughly clear what is believed to
+be a consequence of the rest of this License.
+
+  12. If the distribution and/or use of the Library is restricted in
+certain countries either by patents or by copyrighted interfaces, the
+original copyright holder who places the Library under this License may add
+an explicit geographical distribution limitation excluding those countries,
+so that distribution is permitted only in or among countries not thus
+excluded.  In such case, this License incorporates the limitation as if
+written in the body of this License.
+
+  13. The Free Software Foundation may publish revised and/or new
+versions of the Lesser General Public License from time to time.
+Such new versions will be similar in spirit to the present version,
+but may differ in detail to address new problems or concerns.
+
+Each version is given a distinguishing version number.  If the Library
+specifies a version number of this License which applies to it and
+"any later version", you have the option of following the terms and
+conditions either of that version or of any later version published by
+the Free Software Foundation.  If the Library does not specify a
+license version number, you may choose any version ever published by
+the Free Software Foundation.
+
+  14. If you wish to incorporate parts of the Library into other free
+programs whose distribution conditions are incompatible with these,
+write to the author to ask for permission.  For software which is
+copyrighted by the Free Software Foundation, write to the Free
+Software Foundation; we sometimes make exceptions for this.  Our
+decision will be guided by the two goals of preserving the free status
+of all derivatives of our free software and of promoting the sharing
+and reuse of software generally.
+
+                            NO WARRANTY
+
+  15. BECAUSE THE LIBRARY IS LICENSED FREE OF CHARGE, THERE IS NO
+WARRANTY FOR THE LIBRARY, TO THE EXTENT PERMITTED BY APPLICABLE LAW.
+EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR
+OTHER PARTIES PROVIDE THE LIBRARY "AS IS" WITHOUT WARRANTY OF ANY
+KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE
+LIBRARY IS WITH YOU.  SHOULD THE LIBRARY PROVE DEFECTIVE, YOU ASSUME
+THE COST OF ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN
+WRITING WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY
+AND/OR REDISTRIBUTE THE LIBRARY AS PERMITTED ABOVE, BE LIABLE TO YOU
+FOR DAMAGES, INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR
+CONSEQUENTIAL DAMAGES ARISING OUT OF THE USE OR INABILITY TO USE THE
+LIBRARY (INCLUDING BUT NOT LIMITED TO LOSS OF DATA OR DATA BEING
+RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD PARTIES OR A
+FAILURE OF THE LIBRARY TO OPERATE WITH ANY OTHER SOFTWARE), EVEN IF
+SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH
+DAMAGES.
+
+                     END OF TERMS AND CONDITIONS
+
+           How to Apply These Terms to Your New Libraries
+
+  If you develop a new library, and you want it to be of the greatest
+possible use to the public, we recommend making it free software that
+everyone can redistribute and change.  You can do so by permitting
+redistribution under these terms (or, alternatively, under the terms of the
+ordinary General Public License).
+
+  To apply these terms, attach the following notices to the library.  It is
+safest to attach them to the start of each source file to most effectively
+convey the exclusion of warranty; and each file should have at least the
+"copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the library's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This library is free software; you can redistribute it and/or
+    modify it under the terms of the GNU Lesser General Public
+    License as published by the Free Software Foundation; either
+    version 2.1 of the License, or (at your option) any later version.
+
+    This library is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+    Lesser General Public License for more details.
+
+    You should have received a copy of the GNU Lesser General Public
+    License along with this library; if not, write to the Free Software
+    Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301
+    USA
+
+Also add information on how to contact you by electronic and paper mail.
+
+You should also get your employer (if you work as a programmer) or your
+school, if any, to sign a "copyright disclaimer" for the library, if
+necessary.  Here is a sample; alter the names:
+
+  Yoyodyne, Inc., hereby disclaims all copyright interest in the
+  library `Frob' (a library for tweaking knobs) written by James Random
+  Hacker.
+
+  <signature of Ty Coon>, 1 April 1990
+  Ty Coon, President of Vice
+
+That's all there is to it!
--- a/build-tools/build.sh
+++ b/build-tools/build.sh
@@ -0,0 +1,27 @@
+#!/bin/bash
+
+# Get the directory of the current script
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+
+rm -rf build
+
+# Generate Styles (with unneeded js)
+# vite build --config vite-css.config.ts
+
+
+vite build
+
+# Generated source bundle
+# tsc -p tsconfig.cjs.build.json
+# tsc -p tsconfig.es.build.json
+
+# Cleanup unneeded js
+rm -f build/*.js
+
+# Copy image files
+find src/static -type f \( -name "*.jpg" -o -name "*.jpeg" -o -name "*.png" -o -name "*.gif" -o -name "*.svg" \) -exec cp {} build/cjs/static/ \;
+find src/static -type f \( -name "*.jpg" -o -name "*.jpeg" -o -name "*.png" -o -name "*.gif" -o -name "*.svg" \) -exec cp {} build/es/static/ \;
+
+# Run Post processors: Update style imports in .js files, create component modules
+node "$SCRIPT_DIR/post-processor.js" build/cjs
+node "$SCRIPT_DIR/post-processor.js" build/es
--- a/build-tools/fix-styles.js
+++ b/build-tools/fix-styles.js
@@ -0,0 +1,27 @@
+import { promises as fs } from "fs"
+import { join } from "path"
+
+async function fixStyles(file, dir) {
+  const filePath = join(dir, file)
+  if (filePath.endsWith(".js") || filePath.endsWith(".d.ts")) {
+    try {
+      let content = await fs.readFile(filePath, "utf8")
+      // Remove lines that import or require .scss files
+      content = content
+        .split("\n")
+        .filter((line) => {
+          return !line.match(/import.*\.scss|require\(".*\.scss"\)/)
+        })
+        .join("\n")
+      if (filePath.endsWith(".js")) {
+        // Add import "../style.css" at the top of js files
+        content = `import "../style.css";\n${content}`
+      }
+      await fs.writeFile(filePath, content, "utf8")
+    } catch (error) {
+      console.error(`Error processing file ${filePath}:`, error)
+    }
+  }
+}
+
+export default fixStyles
--- a/build-tools/generate-module.js
+++ b/build-tools/generate-module.js
@@ -0,0 +1,31 @@
+import { promises as fs } from "fs"
+import { dirname, resolve } from "path"
+import { fileURLToPath } from "url"
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+async function generateModule(fileName, parentDir) {
+  if (fileName.endsWith(".js")) {
+    const dir = fileName.slice(0, -3)
+    const name = `@armco/components/${dir}`
+    const packageJsonContent = {
+      name,
+      main: `../cjs/${dir}.js`,
+      module: `../es/${dir}.js`,
+      types: `../es/${dir}.d.ts`,
+    }
+    const dirPath = resolve(__dirname, `../build/${dir}`)
+    try {
+      await fs.mkdir(dirPath, { recursive: true })
+      await fs.writeFile(
+        resolve(dirPath, "package.json"),
+        JSON.stringify(packageJsonContent, null, 2),
+      )
+    } catch (error) {
+      console.error(`Error processing directory ${dirPath}:`, error)
+    }
+  }
+}
+
+export default generateModule
--- a/build-tools/post-processor.js
+++ b/build-tools/post-processor.js
@@ -0,0 +1,25 @@
+import { readdir } from "fs/promises"
+import fixStyles from "./fix-styles.js"
+import generateModule from "./generate-module.js"
+
+async function postProcessor(dir) {
+  try {
+    const files = await readdir(dir)
+    await Promise.all(
+      files.map(async (file) => {
+        await fixStyles(file, dir)
+        await generateModule(file, dir)
+      }),
+    )
+  } catch (error) {
+    console.error(`Error processing directory ${dir}:`, error)
+  }
+}
+
+const targetDir = process.argv[2]
+if (targetDir) {
+  postProcessor(targetDir)
+} else {
+  console.error("Please provide the build directory to run post processor on.")
+  process.exit(1)
+}
--- a/copy_files.sh
+++ b/copy_files.sh
@@ -0,0 +1,56 @@
+#!/bin/bash
+
+# Function to split the string into an array based on a delimiter
+split_string() {
+  local string="$1"
+  local delimiter="$2"
+  IFS="$delimiter" read -r -a array <<< "$string"
+  echo "${array[@]}"
+}
+
+# Function to move files
+copy_files() {
+  local input_path="$1"
+  local exclude_path="$2"
+  local destination_path="$3"
+
+  # Split the exclude path into an array
+  local -a exclude_dirs=($(split_string "$exclude_path" ","))
+
+  # Iterate over each directory under the input path
+  for dir in "$input_path"/*; do
+    if [ -d "$dir" ]; then
+      dir_name=$(basename "$dir")
+
+      # Check if the directory name is in the exclude array
+      if [[ " ${exclude_dirs[@]} " =~ " ${dir_name} " ]]; then
+        echo "Skipping directory: $dir_name"
+        continue
+      fi
+
+      # Find and move .ts, .tsx, and .scss files to the destination path, excluding *.test.ts and index.ts
+      find "$dir" -type f \( -name "*.ts" -o -name "*.tsx" -o -name "*.scss" \) ! -name "*.test.ts" ! -name "index.ts" -exec cp {} "$destination_path" \;
+    fi
+    find "$input_path" -maxdepth 1 -type f ! -name "*.test.ts" ! -name "index.ts" -exec cp {} "$destination_path" \;
+  done
+}
+
+# Main script execution
+if [ "$#" -ne 3 ]; then
+  echo "Usage: $0 <input_path> <exclude_path> <destination_path>"
+  exit 1
+fi
+
+input_path="$1"
+exclude_path="$2"
+destination_path="$3"
+
+rm -rf $destination_path
+
+# Ensure the destination path exists
+mkdir -p "$destination_path"
+
+# Call the move_files function
+copy_files "$input_path" "$exclude_path" "$destination_path"
+
+echo "Files moved successfully."
--- a/package.json
+++ b/package.json
@@ -0,0 +1,142 @@
+{
+  "name": "@armco/shared-components",
+  "description": "React Component Lib of independent components that can be utilised by sophisticated ones in @armco/components",
+  "version": "0.0.47",
+  "type": "module",
+  "author": "Armco (@restruct-corporate-advantage)",
+  "scripts": {
+    "build": "./build-tools/build.sh",
+    "build:publish": "./scripts/build.sh",
+    "build:publish:compile": "tsc --p ./tsconfig-build.json && vite build --config vite-publish.config.ts",
+    "plop": "plop component",
+    "format": "prettier --write .",
+    "lint": "eslint .",
+    "type-check": "tsc",
+    "publish:dry": "npm publish --dry-run",
+    "publish:local": "./scripts/publish-local.sh",
+    "publish:public": "./scripts/publish.sh"
+  },
+  "dependencies": {
+    "@armco/utils": "^0.0.0",
+    "@popperjs/core": "^2.11.8",
+    "bootstrap": "^5.3.0",
+    "classnames": "^2.3.2",
+    "d3": "^7.9.0",
+    "highcharts": "^11.2.0",
+    "highcharts-react-official": "^3.2.1",
+    "highlight.js": "^11.8.0",
+    "js-cookie": "^3.0.5",
+    "moment": "^2.29.4",
+    "react-app-polyfill": "^3.0.0",
+    "react-bootstrap": "^2.7.4",
+    "react-dev-utils": "^12.0.1",
+    "react-dnd": ">=16.0.0",
+    "react-dnd-html5-backend": ">=16.0.0",
+    "react-dnd-touch-backend": ">=16.0.0",
+    "react-draggable": "^4.4.6",
+    "react-redux": "^8.0.1",
+    "react-resizable": "^3.0.5",
+    "react-router-dom": "^6.13.0",
+    "react-table": "^7.8.0",
+    "resize-observer-polyfill": "^1.5.1",
+    "svgpath": "^2.6.0",
+    "uuid": "^9.0.0",
+    "vite-plugin-svgr": "^3.2.0"
+  },
+  "devDependencies": {
+    "@armco/types": "^0.0.6",
+    "@babel/preset-env": "^7.24.5",
+    "@babel/preset-react": "^7.24.1",
+    "@babel/preset-typescript": "^7.24.1",
+    "@testing-library/dom": "^9.2.0",
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.2.5",
+    "@types/bootstrap": "^5.2.6",
+    "@types/d3": "^7.4.0",
+    "@types/js-cookie": "^3.0.3",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.2.18",
+    "@types/react-resizable": "^3.0.7",
+    "@types/react-table": "^7.7.19",
+    "@types/testing-library__jest-dom": "^5.14.5",
+    "@types/uuid": "^9.0.2",
+    "@vitejs/plugin-react": "^4.0.0",
+    "chalk": "^5.3.0",
+    "cherry-pick": "^0.5.0",
+    "cpy-cli": "^5.0.0",
+    "eslint": "^8.0.0",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-storybook": "^0.6.12",
+    "execa": "^8.0.1",
+    "fs-extra": "^11.2.0",
+    "glob": "^10.3.10",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jsdom": "^21.1.0",
+    "plop": "^3.1.2",
+    "prettier": "^2.7.1",
+    "prettier-config-nick": "^1.0.2",
+    "prop-types": "^15.8.1",
+    "react": ">=16.8.0",
+    "react-dom": "^18.2.0",
+    "rollup-plugin-visualizer": "^5.12.0",
+    "sass": "^1.63.4",
+    "storybook": "^7.0.23",
+    "ts-jest": "^29.2.3",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.0.2",
+    "vite": "^4.0.0",
+    "vite-plugin-dts": "^3.7.1",
+    "vitest": "^0.30.1"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dnd": ">=16.0.0",
+    "react-dnd-html5-backend": ">=16.0.0",
+    "react-dnd-touch-backend": ">=16.0.0",
+    "react-redux": "^8.0.1",
+    "react-router-dom": "^6.13.0"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest",
+      "plugin:storybook/recommended"
+    ],
+    "plugins": [
+      "prettier"
+    ],
+    "rules": {
+      "prettier/prettier": "error",
+      "react/jsx-no-target-blank": "off"
+    }
+  },
+  "prettier": "prettier-config-nick",
+  "types": "build/es/index.d.ts",
+  "main": "build/cjs/index.js",
+  "module": "build/es/index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ReStruct-Corporate-Advantage/armory-react-components.git"
+  },
+  "keywords": [
+    "react",
+    "vite",
+    "reduxToolkit",
+    "sass",
+    "components",
+    "atomic",
+    "building-blocks",
+    "foundation"
+  ],
+  "files": [
+    "build"
+  ],
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/ReStruct-Corporate-Advantage/armory-react-components/issues"
+  },
+  "homepage": "https://github.com/ReStruct-Corporate-Advantage/armory-react-components#readme"
+}
--- a/plop-templates/Component/Component.component.scss.hbs
+++ b/plop-templates/Component/Component.component.scss.hbs
@@ -0,0 +1,3 @@
+.ar-{{pascalCase name}} {
+  
+}
--- a/plop-templates/Component/Component.test.ts.hbs
+++ b/plop-templates/Component/Component.test.ts.hbs
@@ -0,0 +1,8 @@
+import React from "react"
+import {{pascalCase name}} from "./{{pascalCase name}}"
+
+describe("{{pascalCase name}}", () => {
+   it("renders without error", () => {
+
+   })
+})
--- a/plop-templates/Component/Component.tsx.hbs
+++ b/plop-templates/Component/Component.tsx.hbs
@@ -0,0 +1,8 @@
+import { {{pascalCase name}}Props } from "@armco/types"
+import "./{{pascalCase name}}.component.scss"
+
+const {{pascalCase name}} = (props: {{pascalCase name}}Props): JSX.Element => {
+  return <div className="ar-{{pascalCase name}}">In Component {{pascalCase name}}</div>
+}
+
+export default {{pascalCase name}}
--- a/plop-templates/Component/index.ts.hbs
+++ b/plop-templates/Component/index.ts.hbs
@@ -0,0 +1,3 @@
+import {{pascalCase name}} from "./{{pascalCase name}}"
+
+export default {{pascalCase name}}
--- a/plop-templates/Page/Page.page.scss.hbs
+++ b/plop-templates/Page/Page.page.scss.hbs
@@ -0,0 +1,3 @@
+.ar-{{pascalCase name}} {
+  
+}
--- a/plop-templates/Page/Page.slice.ts.hbs
+++ b/plop-templates/Page/Page.slice.ts.hbs
@@ -0,0 +1,18 @@
+import { createSlice } from "@reduxjs/toolkit"
+
+export interface {{pascalCase name}}State {}
+
+const initialState: {{pascalCase name}}State = {}
+
+export const {{camelCase name}}Slice = createSlice({
+  name: "{{camelCase name}}",
+  initialState,
+  reducers: {
+    increment: (state) => {},
+  },
+  extraReducers: (builder) => {},
+})
+
+export const { increment } = {{camelCase name}}Slice.actions
+
+export default {{camelCase name}}Slice.reducer
--- a/plop-templates/Page/Page.test.ts.hbs
+++ b/plop-templates/Page/Page.test.ts.hbs
@@ -0,0 +1,8 @@
+import React from "react"
+import {{pascalCase name}} from "./{{pascalCase name}}"
+
+describe("{{pascalCase name}}", () => {
+   it("renders without error", () => {
+
+   })
+})
--- a/plop-templates/Page/Page.tsx.hbs
+++ b/plop-templates/Page/Page.tsx.hbs
@@ -0,0 +1,9 @@
+import "./{{pascalCase name}}.page.scss"
+
+interface {{pascalCase name}}Props {}
+
+const {{pascalCase name}} = (props: {{pascalCase name}}Props): JSX.Element => {
+  return <div className="ar-{{pascalCase name}}">In Page {{pascalCase name}}</div>
+}
+
+export default {{pascalCase name}}
--- a/plop-templates/Page/index.ts.hbs
+++ b/plop-templates/Page/index.ts.hbs
@@ -0,0 +1,3 @@
+import {{pascalCase name}} from "./{{pascalCase name}}"
+
+export default {{pascalCase name}}
--- a/plop-templates/components.interface.ts.hbs
+++ b/plop-templates/components.interface.ts.hbs
@@ -0,0 +1,2 @@
+/* PLOP_INJECT_INTERFACE */
+
--- a/plop-templates/injectable-index.ts.hbs
+++ b/plop-templates/injectable-index.ts.hbs
@@ -0,0 +1,13 @@
+/* PLOP_INJECT_IMPORT */
+
+import {
+  /* PLOP_INJECT_TYPE_IMPORT
+} from "../types/components.interface"
+
+export {
+  /* PLOP_INJECT_EXPORT */
+}
+
+export {
+  /* PLOP_INJECT_TYPE_EXPORT */
+}
--- a/plopfile.cjs
+++ b/plopfile.cjs
@@ -0,0 +1,261 @@
+module.exports = (plop) => {
+  plop.setGenerator("component", {
+    description: "Create a component",
+    prompts: [
+      {
+        type: "input",
+        name: "name",
+        message: "What is your component name?",
+      },
+    ],
+    actions: [
+      {
+        type: "add",
+        path: "src/app/components/{{pascalCase name}}/{{pascalCase name}}.tsx",
+        templateFile: "plop-templates/Component/Component.tsx.hbs",
+      },
+      {
+        type: "add",
+        path: "src/app/components/{{pascalCase name}}/{{pascalCase name}}.test.ts",
+        templateFile: "plop-templates/Component/Component.test.ts.hbs",
+      },
+      {
+        type: "add",
+        path: "src/app/components/{{pascalCase name}}/{{pascalCase name}}.component.scss",
+        templateFile: "plop-templates/Component/Component.component.scss.hbs",
+      },
+      {
+        type: "add",
+        path: "src/app/components/{{pascalCase name}}/index.ts",
+        templateFile: "plop-templates/Component/index.ts.hbs",
+      },
+      {
+        type: "add",
+        path: "src/app/components/index.ts",
+        templateFile: "plop-templates/injectable-index.ts.hbs",
+        skipIfExists: true,
+      },
+      {
+        type: "append",
+        path: "src/app/components/index.ts",
+        pattern: `/* PLOP_INJECT_IMPORT */`,
+        template: `import {{pascalCase name}} from "./{{pascalCase name}}"`,
+      },
+      {
+        type: "append",
+        path: "src/app/components/index.ts",
+        pattern: `/* PLOP_INJECT_EXPORT */`,
+        template: `  {{pascalCase name}},`,
+      },
+      {
+        type: "append",
+        path: "src/app/components/index.ts",
+        pattern: `/* PLOP_INJECT_TYPE_IMPORT */`,
+        template: `  {{pascalCase name}}Props,`,
+      },
+      {
+        type: "append",
+        path: "src/app/components/index.ts",
+        pattern: `/* PLOP_INJECT_TYPE_EXPORT */`,
+        template: `  type {{pascalCase name}}Props,`,
+      },
+      {
+        type: "append",
+        path: "src/app/types/components.interface.ts",
+        pattern: `/* PLOP_INJECT_INTERFACE */`,
+        template: `export interface {{pascalCase name}}Props extends BaseProps {\n}\n`,
+      },
+    ],
+  })
+  plop.setGenerator("atom", {
+    description: "Create a component",
+    prompts: [
+      {
+        type: "input",
+        name: "name",
+        message: "What is your component name?",
+      },
+    ],
+    actions: [
+      {
+        type: "add",
+        path: "src/app/components/atoms/{{pascalCase name}}/{{pascalCase name}}.tsx",
+        templateFile: "plop-templates/Component/Component.tsx.hbs",
+      },
+      {
+        type: "add",
+        path: "src/app/components/atoms/{{pascalCase name}}/{{pascalCase name}}.test.ts",
+        templateFile: "plop-templates/Component/Component.test.ts.hbs",
+      },
+      {
+        type: "add",
+        path: "src/app/components/atoms/{{pascalCase name}}/{{pascalCase name}}.component.scss",
+        templateFile: "plop-templates/Component/Component.component.scss.hbs",
+      },
+      {
+        type: "add",
+        path: "src/app/components/atoms/{{pascalCase name}}/index.ts",
+        templateFile: "plop-templates/Component/index.ts.hbs",
+      },
+      {
+        type: "add",
+        path: "src/app/components/index.ts",
+        templateFile: "plop-templates/injectable-index.ts.hbs",
+        skipIfExists: true,
+      },
+      {
+        type: "append",
+        path: "src/app/components/atoms/index.ts",
+        pattern: `/* PLOP_INJECT_IMPORT */`,
+        template: `import {{pascalCase name}} from "./{{pascalCase name}}"`,
+      },
+      {
+        type: "append",
+        path: "src/app/components/atoms/index.ts",
+        pattern: `/* PLOP_INJECT_EXPORT */`,
+        template: `  {{pascalCase name}},`,
+      },
+      {
+        type: "append",
+        path: "src/app/components/atoms/index.ts",
+        pattern: `/* PLOP_INJECT_TYPE_IMPORT */`,
+        template: `  {{pascalCase name}}Props,`,
+      },
+      {
+        type: "append",
+        path: "src/app/components/atoms/index.ts",
+        pattern: `/* PLOP_INJECT_TYPE_EXPORT */`,
+        template: `  type {{pascalCase name}}Props,`,
+      },
+      {
+        type: "append",
+        path: "src/app/types/components.interface.ts",
+        pattern: `/* PLOP_INJECT_INTERFACE */`,
+        template: `export interface {{pascalCase name}}Props extends BaseProps {\n}\n`,
+      },
+    ],
+  })
+  plop.setGenerator("molecule", {
+    description: "Create a rich component",
+    prompts: [
+      {
+        type: "input",
+        name: "name",
+        message: "What is your component name?",
+      },
+    ],
+    actions: [
+      {
+        type: "add",
+        path: "src/app/components/molecules/{{pascalCase name}}/{{pascalCase name}}.tsx",
+        templateFile: "plop-templates/Component/Component.tsx.hbs",
+      },
+      {
+        type: "add",
+        path: "src/app/components/molecules/{{pascalCase name}}/{{pascalCase name}}.test.ts",
+        templateFile: "plop-templates/Component/Component.test.ts.hbs",
+      },
+      {
+        type: "add",
+        path: "src/app/components/molecules/{{pascalCase name}}/{{pascalCase name}}.component.scss",
+        templateFile: "plop-templates/Component/Component.component.scss.hbs",
+      },
+      {
+        type: "add",
+        path: "src/app/components/molecules/{{pascalCase name}}/index.ts",
+        templateFile: "plop-templates/Component/index.ts.hbs",
+      },
+      {
+        type: "add",
+        path: "src/app/components/index.ts",
+        templateFile: "plop-templates/injectable-index.ts.hbs",
+        skipIfExists: true,
+      },
+      {
+        type: "append",
+        path: "src/app/components/molecules/index.ts",
+        pattern: `/* PLOP_INJECT_IMPORT */`,
+        template: `import {{pascalCase name}} from "./{{pascalCase name}}"`,
+      },
+      {
+        type: "append",
+        path: "src/app/components/molecules/index.ts",
+        pattern: `/* PLOP_INJECT_EXPORT */`,
+        template: `  {{pascalCase name}},`,
+      },
+      {
+        type: "append",
+        path: "src/app/components/molecules/index.ts",
+        pattern: `/* PLOP_INJECT_TYPE_IMPORT */`,
+        template: `  {{pascalCase name}}Props,`,
+      },
+      {
+        type: "append",
+        path: "src/app/components/molecules/index.ts",
+        pattern: `/* PLOP_INJECT_TYPE_EXPORT */`,
+        template: `  type {{pascalCase name}}Props,`,
+      },
+      {
+        type: "append",
+        path: "src/app/types/components.interface.ts",
+        pattern: `/* PLOP_INJECT_INTERFACE */`,
+        template: `export interface {{pascalCase name}}Props extends BaseProps {\n}\n`,
+      },
+    ],
+  })
+  plop.setGenerator("page", {
+    description: "Create a page",
+    prompts: [
+      {
+        type: "input",
+        name: "name",
+        message: "What is your page name?",
+      },
+    ],
+    actions: [
+      {
+        type: "add",
+        path: "src/app/pages/{{pascalCase name}}/{{pascalCase name}}.tsx",
+        templateFile: "plop-templates/Page/Page.tsx.hbs",
+      },
+      {
+        type: "add",
+        path: "src/app/pages/{{pascalCase name}}/{{pascalCase name}}.test.ts",
+        templateFile: "plop-templates/Page/Page.test.ts.hbs",
+      },
+      {
+        type: "add",
+        path: "src/app/pages/{{pascalCase name}}/{{pascalCase name}}.page.scss",
+        templateFile: "plop-templates/Page/Page.page.scss.hbs",
+      },
+      {
+        type: "add",
+        path: "src/app/pages/{{pascalCase name}}/index.ts",
+        templateFile: "plop-templates/Page/index.ts.hbs",
+      },
+      {
+        type: "add",
+        path: "src/app/pages/{{pascalCase name}}/{{pascalCase name}}.slice.ts",
+        templateFile: "plop-templates/Page/Page.slice.ts.hbs",
+      },
+      {
+        type: "add",
+        path: "src/app/pages/index.ts",
+        templateFile: "plop-templates/injectable-index.ts.hbs",
+        skipIfExists: true,
+      },
+      {
+        type: "append",
+        path: "src/app/pages/index.ts",
+        pattern: `/* PLOP_INJECT_IMPORT */`,
+        template: `import {{pascalCase name}} from "./{{pascalCase name}}"`,
+      },
+      {
+        type: "append",
+        path: "src/app/pages/index.ts",
+        pattern: `/* PLOP_INJECT_EXPORT */`,
+        template: `  {{pascalCase name}},`,
+      },
+    ],
+  })
+}
--- a/publish.sh
+++ b/publish.sh
@@ -0,0 +1,8 @@
+#!/bin/sh
+
+semver=${1:-patch}
+
+set -e
+source ./build-tools/build.sh
+npm --no-git-tag-version version ${semver}
+npm publish --access public
--- a/bkup/AboutUs/AboutUs.component.scss
+++ b/bkup/AboutUs/AboutUs.component.scss
@@ -0,0 +1,3 @@
+.ar-AboutUs {
+  
+}
--- a/bkup/AboutUs/AboutUs.test.ts
+++ b/bkup/AboutUs/AboutUs.test.ts
@@ -0,0 +1,8 @@
+import React from "react"
+import AboutUs from "./AboutUs"
+
+describe("AboutUs", () => {
+   it("renders without error", () => {
+
+   })
+})
--- a/bkup/AboutUs/AboutUs.tsx
+++ b/bkup/AboutUs/AboutUs.tsx
@@ -0,0 +1,8 @@
+import { AboutUsProps } from "@armco/types"
+import "./AboutUs.component.scss"
+
+const AboutUs = (props: AboutUsProps): JSX.Element => {
+  return <div className="ar-AboutUs">In Component AboutUs</div>
+}
+
+export default AboutUs
--- a/bkup/AboutUs/index.ts
+++ b/bkup/AboutUs/index.ts
@@ -0,0 +1,3 @@
+import AboutUs from "./AboutUs"
+
+export default AboutUs
--- a/bkup/Accordion/Accordion.component.scss
+++ b/bkup/Accordion/Accordion.component.scss
@@ -0,0 +1,32 @@
+.ar-Accordion {
+	.ar-AccordionExpansionPanel {
+		.ar-AccordionExpansionPanel__content {
+			max-height: 0;
+			transition: max-height 0.3s;
+			overflow: auto;
+		}
+		.ar-AccordionExpansionPanel__title-expand-icon {
+			transition: transform 0.3s;
+		}
+		&.expanded {
+			.ar-AccordionExpansionPanel__title-expand-icon {
+				transform: rotateZ(90deg);
+			}
+		}
+		&.expanded:not(:last-child) .ar-AccordionExpansionPanel__title, &:not(:last-child) .ar-AccordionExpansionPanel__content {
+			border-bottom: var(--ar-border);
+		}
+	}
+
+	&.stacked {
+		border-radius: 5px;
+		overflow: hidden;
+		border: var(--ar-border);
+		.ar-AccordionExpansionPanel {
+			.ar-AccordionExpansionPanel__title {
+				background-color: var(--ar-bg-mild);
+
+			}
+		}
+	}
+}
--- a/bkup/Accordion/Accordion.test.ts
+++ b/bkup/Accordion/Accordion.test.ts
@@ -0,0 +1,8 @@
+import React from "react"
+import Accordion from "./Accordion"
+
+describe("Accordion", () => {
+   it("renders without error", () => {
+
+   })
+})
--- a/bkup/Accordion/Accordion.tsx
+++ b/bkup/Accordion/Accordion.tsx
@@ -0,0 +1,150 @@
+import { ReactNode, useEffect, useRef, useState } from "react"
+import {
+  ArAccordionVariants,
+  ArThemes,
+  AccordionExpansionPanelProps,
+  AccordionProps,
+} from "@armco/types"
+import { Icon } from "@armco/icon"
+import "./Accordion.component.scss"
+
+const AccordionExpansionPanel = (
+  props: AccordionExpansionPanelProps,
+): ReactNode => {
+  const {
+    classes,
+    content,
+    expanded: expandedPre,
+    id,
+    isRemovable,
+    setExpandedId,
+    shouldGrow,
+    theme,
+    title,
+  } = props
+  const contentRef = useRef<HTMLDivElement>(null)
+  const [expanded, setExpanded] = useState<boolean>()
+
+  useEffect(() => {
+    setExpanded(expandedPre)
+  }, [expandedPre])
+
+  useEffect(() => {
+    if (contentRef.current) {
+      contentRef.current.style.maxHeight = expanded
+        ? shouldGrow
+          ? "100%"
+          : contentRef.current.scrollHeight + 5 + "px"
+        : 0 + "px"
+    }
+  }, [expanded, shouldGrow])
+
+  return (
+    <div
+      className={`ar-AccordionExpansionPanel${
+        shouldGrow ? " show-grow d-flex flex-column flex-grow-1" : ""
+      }${classes ? " " + classes : ""}${expanded ? " expanded" : ""}`}
+      id={id}
+      key={id}
+    >
+      <div
+        className="ar-AccordionExpansionPanel__title flex-v-center px-2 py-1 cursor-pointer"
+        onClick={() => {
+          setExpanded(!expanded)
+          setExpandedId && setExpandedId(id)
+        }}
+      >
+        <span className="ar-AccordionExpansionPanel__title-expand-icon p-2">
+          <Icon
+            attributes={{
+              colors: {
+                fillColor: ArThemes.DARK1 === theme ? "white" : "black",
+              },
+            }}
+            icon="md.MdKeyboardArrowRight"
+          />
+        </span>
+        {title}
+        {isRemovable && (
+          <Icon
+            attributes={{
+              colors: {
+                fillColor: ArThemes.DARK1 === theme ? "white" : "black",
+              },
+              classes: "ms-auto",
+            }}
+            icon="md.MdClose"
+          />
+        )}
+      </div>
+      <div
+        className={`ar-AccordionExpansionPanel__content${
+          shouldGrow ? " d-flex flex-grow-1" : ""
+        }`}
+        ref={contentRef}
+      >
+        {typeof content === "string" ? (
+          <div className="p-3">{content}</div>
+        ) : (
+          content
+        )}
+      </div>
+    </div>
+  )
+}
+
+const Accordion = (props: AccordionProps): JSX.Element => {
+  const {
+    appearance,
+    classes,
+    data,
+    firstExpanded,
+    isRemovable,
+    theme,
+    variant,
+  } = props
+  const [expanded, setExpanded] = useState<string>()
+  const [localData, setLocalData] =
+    useState<Array<AccordionExpansionPanelProps>>()
+
+  useEffect(() => {
+    if (data) {
+      if (firstExpanded) {
+        data[0] && (data[0].expanded = true)
+        setExpanded(data[0].id)
+      }
+      setLocalData(data)
+    }
+  }, [data, firstExpanded])
+
+  useEffect(() => {
+    if (variant === ArAccordionVariants.LIMITED) {
+      const dataClone = [...data]
+      dataClone.forEach((item) => (item.expanded = expanded === item.id))
+      setLocalData(dataClone)
+    }
+  }, [expanded, variant, data])
+
+  return (
+    <div
+      className={`ar-Accordion${classes ? " " + classes : ""}${
+        appearance ? " " + appearance : ""
+      }`}
+    >
+      {localData?.map((item, index) => {
+        item.setExpandedId = setExpanded
+        item.isRemovable =
+          item.isRemovable !== undefined ? item.isRemovable : !!isRemovable
+        return (
+          <AccordionExpansionPanel
+            key={"accordion-expansion-panel-" + index}
+            theme={theme}
+            {...item}
+          />
+        )
+      })}
+    </div>
+  )
+}
+
+export default Accordion
--- a/bkup/Accordion/index.ts
+++ b/bkup/Accordion/index.ts
@@ -0,0 +1,3 @@
+import Accordion from "./Accordion"
+
+export default Accordion
--- a/bkup/AdvancedColorPicker/AdvancedColorPicker.component.scss
+++ b/bkup/AdvancedColorPicker/AdvancedColorPicker.component.scss
@@ -0,0 +1,3 @@
+.ar-AdvancedColorPicker {
+  
+}
--- a/bkup/AdvancedColorPicker/AdvancedColorPicker.test.ts
+++ b/bkup/AdvancedColorPicker/AdvancedColorPicker.test.ts
@@ -0,0 +1,8 @@
+import React from "react"
+import AdvancedColorPicker from "./AdvancedColorPicker"
+
+describe("AdvancedColorPicker", () => {
+   it("renders without error", () => {
+
+   })
+})
--- a/bkup/AdvancedColorPicker/AdvancedColorPicker.tsx
+++ b/bkup/AdvancedColorPicker/AdvancedColorPicker.tsx
@@ -0,0 +1,123 @@
+import { useEffect, useState } from "react"
+import { AdvancedColorPickerProps } from "@armco/types"
+import { DomHelper } from "@armco/utils"
+import { Slider } from ".."
+import { ColorMapImage } from "../static"
+import COLOR_PICKER_CONFIG from "./ColorPickerConfig"
+import "./AdvancedColorPicker.component.scss"
+
+const AdvancedColorPicker = (props: AdvancedColorPickerProps): JSX.Element => {
+  const { demo, displaySample, id, onColorSelect, title } = props
+  const [color, setColor] = useState<string>()
+  const [hue, setHue] = useState<number>()
+  const [saturation, setSaturation] = useState<number>()
+  const [lightness, setLightness] = useState<number>()
+
+  useEffect(() => {
+    if (
+      hue !== undefined &&
+      saturation !== undefined &&
+      lightness !== undefined
+    ) {
+      const colorInHex = DomHelper.hslToHex(hue, saturation, lightness)
+      setColor(colorInHex)
+      onColorSelect && onColorSelect(colorInHex)
+    }
+  }, [hue, saturation, lightness, onColorSelect])
+
+  const getColorNameHsl = () => {
+    return hue !== undefined &&
+      saturation !== undefined &&
+      lightness !== undefined
+      ? "hsl(" +
+          Math.round(hue * 255) +
+          ", " +
+          Math.round(saturation * 100) +
+          "%, " +
+          Math.round(lightness * 100) +
+          "%)"
+      : ""
+  }
+
+  return (
+    <div className="ar-AdvancedColorPicker mb-4">
+      {title && (
+        <strong className="border-bottom mb-3 d-flex pb-2">{title}</strong>
+      )}
+      <img
+        className="flex-h-center"
+        src={ColorMapImage}
+        useMap={`#colormap-${id}`}
+        alt={`colormap-${id}`}
+      />
+      <map id={`colormap-${id}`} name={`colormap-${id}`}>
+        {COLOR_PICKER_CONFIG.map((config, index) => {
+          return (
+            <area
+              key={id + "-area-item-" + index}
+              className="cursor-pointer"
+              shape="poly"
+              coords={config.coord}
+              onClick={() => {
+                setColor(config.color)
+                const [h, s, l] = DomHelper.hexToHsl(config.color, true)
+                setHue(h as number)
+                setSaturation(s as number)
+                setLightness(l as number)
+                // onColorSelect && onColorSelect(config.color)
+              }}
+              alt={config.color}
+            />
+          )
+        })}
+      </map>
+      {displaySample && color && (
+        <div className="my-4 row">
+          <div
+            className="col-12 mb-3"
+            style={{ backgroundColor: getColorNameHsl(), height: "1rem" }}
+            title="Sample"
+          />
+          <strong className="col-12">{getColorNameHsl()}</strong>
+        </div>
+      )}
+      <div className="ar-AdvancedColorPicker__hsl-editor mt-4 mb-2">
+        <Slider
+          label="Hue"
+          min={0}
+          max={255}
+          onChange={(e) =>
+            setHue(parseInt((e.target as HTMLInputElement).value) / 255)
+          }
+          withManual
+        />
+        <Slider
+          label="Saturation"
+          min={0}
+          max={100}
+          onChange={(e) =>
+            setSaturation(parseInt((e.target as HTMLInputElement).value) / 100)
+          }
+          withManual
+        />
+        <Slider
+          label="Lightness"
+          min={0}
+          max={100}
+          onChange={(e) =>
+            setLightness(parseInt((e.target as HTMLInputElement).value) / 100)
+          }
+          withManual
+        />
+      </div>
+      {demo && (
+        <div
+          className="ar-AdvancedColorPicker__demo"
+          style={{ width: "5rem", height: "2rem", backgroundColor: color }}
+        />
+      )}
+    </div>
+  )
+}
+
+export default AdvancedColorPicker
--- a/bkup/AdvancedColorPicker/ColorPickerConfig.ts
+++ b/bkup/AdvancedColorPicker/ColorPickerConfig.ts
@@ -0,0 +1,221 @@
+const colorPickerConfig = [
+  { coord: "63,0,72,4,72,15,63,19,54,15,54,4", color: "#003366" },
+  { coord: "81,0,90,4,90,15,81,19,72,15,72,4", color: "#336699" },
+  { coord: "99,0,108,4,108,15,99,19,90,15,90,4", color: "#3366CC" },
+  { coord: "117,0,126,4,126,15,117,19,108,15,108,4", color: "#003399" },
+  { coord: "135,0,144,4,144,15,135,19,126,15,126,4", color: "#000099" },
+  { coord: "153,0,162,4,162,15,153,19,144,15,144,4", color: "#0000CC" },
+  { coord: "171,0,180,4,180,15,171,19,162,15,162,4", color: "#000066" },
+  { coord: "54,15,63,19,63,30,54,34,45,30,45,19", color: "#006666" },
+  { coord: "72,15,81,19,81,30,72,34,63,30,63,19", color: "#006699" },
+  { coord: "90,15,99,19,99,30,90,34,81,30,81,19", color: "#0099CC" },
+  { coord: "108,15,117,19,117,30,108,34,99,30,99,19", color: "#0066CC" },
+  { coord: "126,15,135,19,135,30,126,34,117,30,117,19", color: "#0033CC" },
+  { coord: "144,15,153,19,153,30,144,34,135,30,135,19", color: "#0000FF" },
+  { coord: "162,15,171,19,171,30,162,34,153,30,153,19", color: "#3333FF" },
+  { coord: "180,15,189,19,189,30,180,34,171,30,171,19", color: "#333399" },
+  { coord: "45,30,54,34,54,45,45,49,36,45,36,34", color: "#669999" },
+  { coord: "63,30,72,34,72,45,63,49,54,45,54,34", color: "#009999" },
+  { coord: "81,30,90,34,90,45,81,49,72,45,72,34", color: "#33CCCC" },
+  { coord: "99,30,108,34,108,45,99,49,90,45,90,34", color: "#00CCFF" },
+  { coord: "117,30,126,34,126,45,117,49,108,45,108,34", color: "#0099FF" },
+  { coord: "135,30,144,34,144,45,135,49,126,45,126,34", color: "#0066FF" },
+  { coord: "153,30,162,34,162,45,153,49,144,45,144,34", color: "#3366FF" },
+  { coord: "171,30,180,34,180,45,171,49,162,45,162,34", color: "#3333CC" },
+  { coord: "189,30,198,34,198,45,189,49,180,45,180,34", color: "#666699" },
+  { coord: "36,45,45,49,45,60,36,64,27,60,27,49", color: "#339966" },
+  { coord: "54,45,63,49,63,60,54,64,45,60,45,49", color: "#00CC99" },
+  { coord: "72,45,81,49,81,60,72,64,63,60,63,49", color: "#00FFCC" },
+  { coord: "90,45,99,49,99,60,90,64,81,60,81,49", color: "#00FFFF" },
+  { coord: "108,45,117,49,117,60,108,64,99,60,99,49", color: "#33CCFF" },
+  { coord: "126,45,135,49,135,60,126,64,117,60,117,49", color: "#3399FF" },
+  { coord: "144,45,153,49,153,60,144,64,135,60,135,49", color: "#6699FF" },
+  { coord: "162,45,171,49,171,60,162,64,153,60,153,49", color: "#6666FF" },
+  { coord: "180,45,189,49,189,60,180,64,171,60,171,49", color: "#6600FF" },
+  { coord: "198,45,207,49,207,60,198,64,189,60,189,49", color: "#6600CC" },
+  { coord: "27,60,36,64,36,75,27,79,18,75,18,64", color: "#339933" },
+  { coord: "45,60,54,64,54,75,45,79,36,75,36,64", color: "#00CC66" },
+  { coord: "63,60,72,64,72,75,63,79,54,75,54,64", color: "#00FF99" },
+  { coord: "81,60,90,64,90,75,81,79,72,75,72,64", color: "#66FFCC" },
+  { coord: "99,60,108,64,108,75,99,79,90,75,90,64", color: "#66FFFF" },
+  { coord: "117,60,126,64,126,75,117,79,108,75,108,64", color: "#66CCFF" },
+  { coord: "135,60,144,64,144,75,135,79,126,75,126,64", color: "#99CCFF" },
+  { coord: "153,60,162,64,162,75,153,79,144,75,144,64", color: "#9999FF" },
+  { coord: "171,60,180,64,180,75,171,79,162,75,162,64", color: "#9966FF" },
+  { coord: "189,60,198,64,198,75,189,79,180,75,180,64", color: "#9933FF" },
+  { coord: "207,60,216,64,216,75,207,79,198,75,198,64", color: "#9900FF" },
+  { coord: "18,75,27,79,27,90,18,94,9,90,9,79", color: "#006600" },
+  { coord: "36,75,45,79,45,90,36,94,27,90,27,79", color: "#00CC00" },
+  { coord: "54,75,63,79,63,90,54,94,45,90,45,79", color: "#00FF00" },
+  { coord: "72,75,81,79,81,90,72,94,63,90,63,79", color: "#66FF99" },
+  { coord: "90,75,99,79,99,90,90,94,81,90,81,79", color: "#99FFCC" },
+  { coord: "108,75,117,79,117,90,108,94,99,90,99,79", color: "#CCFFFF" },
+  { coord: "126,75,135,79,135,90,126,94,117,90,117,79", color: "#CCCCFF" },
+  { coord: "144,75,153,79,153,90,144,94,135,90,135,79", color: "#CC99FF" },
+  { coord: "162,75,171,79,171,90,162,94,153,90,153,79", color: "#CC66FF" },
+  { coord: "180,75,189,79,189,90,180,94,171,90,171,79", color: "#CC33FF" },
+  { coord: "198,75,207,79,207,90,198,94,189,90,189,79", color: "#CC00FF" },
+  { coord: "216,75,225,79,225,90,216,94,207,90,207,79", color: "#9900CC" },
+  { coord: "9,90,18,94,18,105,9,109,0,105,0,94", color: "#003300" },
+  { coord: "27,90,36,94,36,105,27,109,18,105,18,94", color: "#009933" },
+  { coord: "45,90,54,94,54,105,45,109,36,105,36,94", color: "#33CC33" },
+  { coord: "63,90,72,94,72,105,63,109,54,105,54,94", color: "#66FF66" },
+  { coord: "81,90,90,94,90,105,81,109,72,105,72,94", color: "#99FF99" },
+  { coord: "99,90,108,94,108,105,99,109,90,105,90,94", color: "#CCFFCC" },
+  { coord: "117,90,126,94,126,105,117,109,108,105,108,94", color: "#FFFFFF" },
+  { coord: "135,90,144,94,144,105,135,109,126,105,126,94", color: "#FFCCFF" },
+  { coord: "153,90,162,94,162,105,153,109,144,105,144,94", color: "#FF99FF" },
+  { coord: "171,90,180,94,180,105,171,109,162,105,162,94", color: "#FF66FF" },
+  { coord: "189,90,198,94,198,105,189,109,180,105,180,94", color: "#FF00FF" },
+  { coord: "207,90,216,94,216,105,207,109,198,105,198,94", color: "#CC00CC" },
+  { coord: "225,90,234,94,234,105,225,109,216,105,216,94", color: "#660066" },
+  { coord: "18,105,27,109,27,120,18,124,9,120,9,109", color: "#336600" },
+  { coord: "36,105,45,109,45,120,36,124,27,120,27,109", color: "#009900" },
+  { coord: "54,105,63,109,63,120,54,124,45,120,45,109", color: "#66FF33" },
+  { coord: "72,105,81,109,81,120,72,124,63,120,63,109", color: "#99FF66" },
+  { coord: "90,105,99,109,99,120,90,124,81,120,81,109", color: "#CCFF99" },
+  { coord: "108,105,117,109,117,120,108,124,99,120,99,109", color: "#FFFFCC" },
+  {
+    coord: "126,105,135,109,135,120,126,124,117,120,117,109",
+    color: "#FFCCCC",
+  },
+  {
+    coord: "144,105,153,109,153,120,144,124,135,120,135,109",
+    color: "#FF99CC",
+  },
+  {
+    coord: "162,105,171,109,171,120,162,124,153,120,153,109",
+    color: "#FF66CC",
+  },
+  {
+    coord: "180,105,189,109,189,120,180,124,171,120,171,109",
+    color: "#FF33CC",
+  },
+  {
+    coord: "198,105,207,109,207,120,198,124,189,120,189,109",
+    color: "#CC0099",
+  },
+  {
+    coord: "216,105,225,109,225,120,216,124,207,120,207,109",
+    color: "#993399",
+  },
+  { coord: "27,120,36,124,36,135,27,139,18,135,18,124", color: "#333300" },
+  { coord: "45,120,54,124,54,135,45,139,36,135,36,124", color: "#669900" },
+  { coord: "63,120,72,124,72,135,63,139,54,135,54,124", color: "#99FF33" },
+  { coord: "81,120,90,124,90,135,81,139,72,135,72,124", color: "#CCFF66" },
+  { coord: "99,120,108,124,108,135,99,139,90,135,90,124", color: "#FFFF99" },
+  {
+    coord: "117,120,126,124,126,135,117,139,108,135,108,124",
+    color: "#FFCC99",
+  },
+  {
+    coord: "135,120,144,124,144,135,135,139,126,135,126,124",
+    color: "#FF9999",
+  },
+  {
+    coord: "153,120,162,124,162,135,153,139,144,135,144,124",
+    color: "#FF6699",
+  },
+  {
+    coord: "171,120,180,124,180,135,171,139,162,135,162,124",
+    color: "#FF3399",
+  },
+  {
+    coord: "189,120,198,124,198,135,189,139,180,135,180,124",
+    color: "#CC3399",
+  },
+  {
+    coord: "207,120,216,124,216,135,207,139,198,135,198,124",
+    color: "#990099",
+  },
+  { coord: "36,135,45,139,45,150,36,154,27,150,27,139", color: "#666633" },
+  { coord: "54,135,63,139,63,150,54,154,45,150,45,139", color: "#99CC00" },
+  { coord: "72,135,81,139,81,150,72,154,63,150,63,139", color: "#CCFF33" },
+  { coord: "90,135,99,139,99,150,90,154,81,150,81,139", color: "#FFFF66" },
+  { coord: "108,135,117,139,117,150,108,154,99,150,99,139", color: "#FFCC66" },
+  {
+    coord: "126,135,135,139,135,150,126,154,117,150,117,139",
+    color: "#FF9966",
+  },
+  {
+    coord: "144,135,153,139,153,150,144,154,135,150,135,139",
+    color: "#FF6666",
+  },
+  {
+    coord: "162,135,171,139,171,150,162,154,153,150,153,139",
+    color: "#FF0066",
+  },
+  {
+    coord: "180,135,189,139,189,150,180,154,171,150,171,139",
+    color: "#CC6699",
+  },
+  {
+    coord: "198,135,207,139,207,150,198,154,189,150,189,139",
+    color: "#993366",
+  },
+  { coord: "45,150,54,154,54,165,45,169,36,165,36,154", color: "#999966" },
+  { coord: "63,150,72,154,72,165,63,169,54,165,54,154", color: "#CCCC00" },
+  { coord: "81,150,90,154,90,165,81,169,72,165,72,154", color: "#FFFF00" },
+  { coord: "99,150,108,154,108,165,99,169,90,165,90,154", color: "#FFCC00" },
+  {
+    coord: "117,150,126,154,126,165,117,169,108,165,108,154",
+    color: "#FF9933",
+  },
+  {
+    coord: "135,150,144,154,144,165,135,169,126,165,126,154",
+    color: "#FF6600",
+  },
+  {
+    coord: "153,150,162,154,162,165,153,169,144,165,144,154",
+    color: "#FF5050",
+  },
+  {
+    coord: "171,150,180,154,180,165,171,169,162,165,162,154",
+    color: "#CC0066",
+  },
+  {
+    coord: "189,150,198,154,198,165,189,169,180,165,180,154",
+    color: "#660033",
+  },
+  { coord: "54,165,63,169,63,180,54,184,45,180,45,169", color: "#996633" },
+  { coord: "72,165,81,169,81,180,72,184,63,180,63,169", color: "#CC9900" },
+  { coord: "90,165,99,169,99,180,90,184,81,180,81,169", color: "#FF9900" },
+  { coord: "108,165,117,169,117,180,108,184,99,180,99,169", color: "#CC6600" },
+  {
+    coord: "126,165,135,169,135,180,126,184,117,180,117,169",
+    color: "#FF3300",
+  },
+  {
+    coord: "144,165,153,169,153,180,144,184,135,180,135,169",
+    color: "#FF0000",
+  },
+  {
+    coord: "162,165,171,169,171,180,162,184,153,180,153,169",
+    color: "#CC0000",
+  },
+  {
+    coord: "180,165,189,169,189,180,180,184,171,180,171,169",
+    color: "#990033",
+  },
+  { coord: "63,180,72,184,72,195,63,199,54,195,54,184", color: "#663300" },
+  { coord: "81,180,90,184,90,195,81,199,72,195,72,184", color: "#996600" },
+  { coord: "99,180,108,184,108,195,99,199,90,195,90,184", color: "#CC3300" },
+  {
+    coord: "117,180,126,184,126,195,117,199,108,195,108,184",
+    color: "#993300",
+  },
+  {
+    coord: "135,180,144,184,144,195,135,199,126,195,126,184",
+    color: "#990000",
+  },
+  {
+    coord: "153,180,162,184,162,195,153,199,144,195,144,184",
+    color: "#800000",
+  },
+  {
+    coord: "171,180,180,184,180,195,171,199,162,195,162,184",
+    color: "#993333",
+  },
+]
+
+export default colorPickerConfig
--- a/bkup/AdvancedColorPicker/index.ts
+++ b/bkup/AdvancedColorPicker/index.ts
@@ -0,0 +1,3 @@
+import AdvancedColorPicker from "./AdvancedColorPicker"
+
+export default AdvancedColorPicker
--- a/bkup/Alert/Alert.component.scss
+++ b/bkup/Alert/Alert.component.scss
@@ -0,0 +1,89 @@
+.ar-Alert {
+	width: 20rem;
+	transition: all 0.3s;
+	border-radius: 0.2rem;
+	opacity: 0;
+
+	&.show {
+		opacity: 1;
+	}
+
+  &.top-right {
+		top: 1rem;
+		right: -8rem;
+
+		&.show {
+			right: 1rem;
+		}
+	}
+  &.top-left {
+		top: 1rem;
+		left: -8rem;
+
+		&.show {
+			left: 1rem;
+		}
+	}
+  &.bottom-right {
+		bottom: 1rem;
+		right: -8rem;
+
+		&.show {
+			right: 1rem;
+		}
+	}
+  &.bottom-left {
+		bottom: 1rem;
+		left: -8rem;
+
+		&.show {
+			left: 1rem;
+		}
+	}
+  &.top-center {
+		top: -5rem;
+		left: calc(50% - 7.5rem);
+
+		&.show {
+			top: 1rem;
+		}
+	}
+  &.bottom-center {
+		bottom: -5rem;
+		left: calc(50% - 7.5rem);
+
+		&.show {
+			bottom: 1rem;
+		}
+	}
+  &.warning {
+		background-color: rgba(237, 172, 61, 0.7);
+	}
+  &.information {
+		background-color: rgba(78, 205, 255, 0.7);
+	}
+  &.error {
+		background-color: rgba(246, 95, 95, 0.7);
+	}
+  &.success {
+		background-color: var(--ar-color-success-faded);
+	}
+
+	.ar-Alert__icon {
+		width: 2rem;
+		height: 2rem;
+	}
+
+	.ar-Alert__text {
+		max-width: calc(100% - 2rem);
+		overflow: auto;
+		line-height: 1rem;
+		// font-size: 0.85rem;
+	}
+
+	.ar-Alert__close-icon {
+		top: 0.5rem;
+		right: 0.5rem;
+		cursor: pointer;
+	}
+}
--- a/bkup/Alert/Alert.test.ts
+++ b/bkup/Alert/Alert.test.ts
@@ -0,0 +1,8 @@
+import React from "react"
+import Alert from "./Alert"
+
+describe("Alert", () => {
+   it("renders without error", () => {
+
+   })
+})
--- a/bkup/Alert/Alert.tsx
+++ b/bkup/Alert/Alert.tsx
@@ -0,0 +1,92 @@
+import { useEffect, useState } from "react"
+import { AlertProps, ArThemes } from "@armco/types"
+import { Icon } from "@armco/icon"
+import "./Alert.component.scss"
+
+let timeoutRef: any
+const Alert = (props: AlertProps): JSX.Element => {
+  const {
+    classes,
+    closeable,
+    demo,
+    message,
+    position,
+    show: externalShow,
+    theme,
+    type,
+    timeout,
+    uid,
+  } = props
+  const [showClass, show] = useState<string>()
+
+  useEffect(() => {
+    if (externalShow || demo) {
+      setTimeout(() => show("show"), 0)
+      if (!demo || timeout) {
+        clearTimeout(timeoutRef)
+        timeoutRef = setTimeout(() => {
+          show("")
+          window.top?.postMessage({ ar: null }, "*")
+        }, timeout || 5000)
+      }
+    }
+  }, [demo, externalShow, timeout, uid])
+
+  let icon
+  switch (type) {
+    case "success":
+      icon = "bs/BsCheckCircle"
+      break
+    case "warning":
+      icon = "vsc/VscWarning"
+      break
+    case "error":
+      icon = "vsc/VscError"
+      break
+    case "information":
+    default:
+      icon = "vsc/VscInfo"
+  }
+
+  return (
+    <div
+      className={`ar-Alert position-fixed d-flex ${position || "top-center"}${
+        classes ? " " + classes : ""
+      } ${type || "information"}${showClass ? " " + showClass : ""}`}
+    >
+      <span className="ar-Alert__icon d-inline-block p-2">
+        <Icon
+          icon={icon}
+          attributes={{
+            colors: {
+              fillColor: theme && theme === ArThemes.DARK1 ? "white" : "black",
+            },
+            classes: "stroke-color",
+          }}
+          theme={theme}
+        />
+      </span>
+      <span className="ar-Alert__text d-inline-block p-2 me-2">
+        {message || "This is a dummy alert"}
+      </span>
+      {closeable && (
+        <span
+          className="ar-Alert__close-icon position-absolute"
+          onClick={() => {
+            show("")
+            window.top?.postMessage({ ar: null }, "*")
+          }}
+        >
+          <Icon
+            icon="io5/IoClose"
+            attributes={{
+              colors: { fillColor: type === "success" ? "white" : "" },
+            }}
+          />
+        </span>
+      )}
+    </div>
+  )
+}
+
+export default Alert
--- a/bkup/Alert/index.ts
+++ b/bkup/Alert/index.ts
@@ -0,0 +1,3 @@
+import Alert from "./Alert"
+
+export default Alert
--- a/bkup/AlertStackManager/AlertStackManager.component.scss
+++ b/bkup/AlertStackManager/AlertStackManager.component.scss
@@ -0,0 +1,3 @@
+.ar-AlertStackManager {
+  
+}
--- a/bkup/AlertStackManager/AlertStackManager.test.ts
+++ b/bkup/AlertStackManager/AlertStackManager.test.ts
@@ -0,0 +1,8 @@
+import React from "react"
+import AlertStackManager from "./AlertStackManager"
+
+describe("AlertStackManager", () => {
+   it("renders without error", () => {
+
+   })
+})
--- a/bkup/AlertStackManager/AlertStackManager.tsx
+++ b/bkup/AlertStackManager/AlertStackManager.tsx
@@ -0,0 +1,13 @@
+import "./AlertStackManager.component.scss"
+
+interface AlertStackManagerProps {
+  max?: number
+}
+
+const AlertStackManager = (props: AlertStackManagerProps): JSX.Element => {
+  return (
+    <div className="ar-AlertStackManager">In Component AlertStackManager</div>
+  )
+}
+
+export default AlertStackManager
--- a/bkup/AlertStackManager/index.ts
+++ b/bkup/AlertStackManager/index.ts
@@ -0,0 +1,3 @@
+import AlertStackManager from "./AlertStackManager"
+
+export default AlertStackManager
--- a/bkup/AlphabetFilter/AlphabetFilter.component.scss
+++ b/bkup/AlphabetFilter/AlphabetFilter.component.scss
@@ -0,0 +1,3 @@
+.ar-AlphabetFilter {
+  
+}
--- a/bkup/AlphabetFilter/AlphabetFilter.test.ts
+++ b/bkup/AlphabetFilter/AlphabetFilter.test.ts
@@ -0,0 +1,8 @@
+import React from "react"
+import AlphabetFilter from "./AlphabetFilter"
+
+describe("AlphabetFilter", () => {
+   it("renders without error", () => {
+
+   })
+})
--- a/bkup/AlphabetFilter/AlphabetFilter.tsx
+++ b/bkup/AlphabetFilter/AlphabetFilter.tsx
@@ -0,0 +1,35 @@
+import { ArPillSizes, BasicFilterConfig } from "@armco/types"
+import { SelectionPill } from ".."
+import "./AlphabetFilter.component.scss"
+
+interface AlphabetFilterProps {
+  onSelectionChanged: Function
+}
+
+const AlphabetFilter = (props: AlphabetFilterProps): JSX.Element => {
+  const { onSelectionChanged } = props
+  const alpha = Array.from(Array(26)).map((e, i) => i + 65)
+  const alphabet = alpha.map((x) => String.fromCharCode(x))
+
+  return (
+    <div className="c-AlphabetFilter">
+      <label className="c-AlphabetFilter__label label">
+        Select icon starting with
+      </label>
+      <div className="c-AlphabetFilter__pill-container">
+        {alphabet.map((char) => (
+          <SelectionPill
+            classes="rounded me-2 mb-3"
+            data={{ label: char }}
+            size={ArPillSizes.SMALL}
+            onClick={(data: BasicFilterConfig) =>
+              onSelectionChanged(data, "alphabet")
+            }
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default AlphabetFilter
--- a/bkup/AlphabetFilter/index.ts
+++ b/bkup/AlphabetFilter/index.ts
@@ -0,0 +1,3 @@
+import AlphabetFilter from "./AlphabetFilter"
+
+export default AlphabetFilter
--- a/bkup/Anchor/Anchor.component.scss
+++ b/bkup/Anchor/Anchor.component.scss
@@ -0,0 +1,3 @@
+.ar-Anchor {
+  
+}
--- a/bkup/Anchor/Anchor.test.ts
+++ b/bkup/Anchor/Anchor.test.ts
@@ -0,0 +1,8 @@
+import React from "react"
+import Anchor from "./Anchor"
+
+describe("Anchor", () => {
+   it("renders without error", () => {
+
+   })
+})
--- a/bkup/Anchor/Anchor.tsx
+++ b/bkup/Anchor/Anchor.tsx
@@ -0,0 +1,13 @@
+import { AnchorProps } from "@armco/types"
+import "./Anchor.component.scss"
+
+const Anchor = (props: AnchorProps): JSX.Element => {
+  const { classes, text, ...rest } = props
+  return (
+    <a className={`ar-Anchor${classes ? " " + classes : ""}`} {...rest}>
+      {text}
+    </a>
+  )
+}
+
+export default Anchor
--- a/bkup/Anchor/index.ts
+++ b/bkup/Anchor/index.ts
@@ -0,0 +1,3 @@
+import Anchor from "./Anchor"
+
+export default Anchor
--- a/bkup/AppAndToolsSelector/AppAndToolsSelector.component.scss
+++ b/bkup/AppAndToolsSelector/AppAndToolsSelector.component.scss
@@ -0,0 +1,24 @@
+.ar-AppAndToolsSelector {
+	width: 21rem;
+	max-height: 70vh;
+	overflow: auto;
+  .ar-AppTile {
+		height: 5rem;
+		padding: 0.6rem;
+
+		&:hover {
+			.ar-AppTile__content {
+				background-color: var(--ar-bg-hover);
+				border-radius: 0.3rem;
+				overflow: hidden;
+
+			}
+		}
+		.ar-AppTile__name {
+			max-width: 100%;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			overflow: hidden;
+		}
+	}
+}
--- a/bkup/AppAndToolsSelector/AppAndToolsSelector.test.ts
+++ b/bkup/AppAndToolsSelector/AppAndToolsSelector.test.ts
@@ -0,0 +1,8 @@
+import React from "react"
+import AppAndToolsSelector from "./AppAndToolsSelector"
+
+describe("AppAndToolsSelector", () => {
+   it("renders without error", () => {
+
+   })
+})
--- a/bkup/AppAndToolsSelector/AppAndToolsSelector.tsx
+++ b/bkup/AppAndToolsSelector/AppAndToolsSelector.tsx
@@ -0,0 +1,79 @@
+import { useNavigate } from "react-router-dom"
+import {
+  ArThemes,
+  ArButtonVariants,
+  ArSizes,
+  AppAndToolsSelectorProps,
+  AppTileProps,
+} from "@armco/types"
+import { Icon } from "@armco/icon"
+import { useTheme } from "@armco/utils"
+import { Button } from ".."
+import "./AppAndToolsSelector.component.scss"
+
+const AppTile = (props: AppTileProps) => {
+  const { classes, label, icon, url, theme } = props
+  const navigate = useNavigate()
+  return (
+    <div
+      className={`ar-AppTile cursor-pointer${classes ? " " + classes : ""}`}
+      onClick={() => navigate(url || "/")}
+    >
+      <div className="ar-AppTile__content flex-center flex-column p-2">
+        <Icon
+          attributes={{
+            classes: "mb-2",
+            size: "2rem",
+            colors: {
+              fillColor: theme === ArThemes.LIGHT1 ? "#777" : "#bbb",
+              hoverFillColor: theme === ArThemes.LIGHT1 ? "black" : "white",
+            },
+          }}
+          icon={icon}
+        />
+        <span className="ar-AppTile__name">{label}</span>
+      </div>
+    </div>
+  )
+}
+
+const AppAndToolsSelector = (props: AppAndToolsSelectorProps): JSX.Element => {
+  const { data } = props
+  const { theme } = useTheme()
+  return (
+    <div className="ar-AppAndToolsSelector px-3">
+      <div className="ar-AppAndToolsSelector__apps-container">
+        {data.map((category, index) => {
+          const items = category.items
+          return (
+            <div key={"app-category-" + index}>
+              <strong className="border-bottom py-2 d-flex">
+                {category.label as string}
+              </strong>
+              <div className="ar-AppAndToolsSelector__items-container mb-3 mt-1 row">
+                {items?.map((item, indexInner) => (
+                  <AppTile
+                    key={"app-tile-" + index + "-" + indexInner}
+                    classes="col-4"
+                    theme={theme}
+                    {...item}
+                  />
+                ))}
+              </div>
+            </div>
+          )
+        })}
+        <Button
+          classes="w-100"
+          variant={ArButtonVariants.LIGHT}
+          content="API Repository"
+          size={ArSizes.REGULAR}
+          postIcon="io5.IoOpenOutline"
+          color="black"
+        />
+      </div>
+    </div>
+  )
+}
+
+export default AppAndToolsSelector
--- a/bkup/AppAndToolsSelector/index.ts
+++ b/bkup/AppAndToolsSelector/index.ts
@@ -0,0 +1,3 @@
+import AppAndToolsSelector from "./AppAndToolsSelector"
+
+export default AppAndToolsSelector
--- a/bkup/Application/Application.component.scss
+++ b/bkup/Application/Application.component.scss
@@ -0,0 +1,3 @@
+.ar-Application {
+  
+}
--- a/bkup/Application/Application.test.ts
+++ b/bkup/Application/Application.test.ts
@@ -0,0 +1,8 @@
+import React from "react"
+import Application from "./Application"
+
+describe("Application", () => {
+   it("renders without error", () => {
+
+   })
+})
--- a/bkup/Application/Application.tsx
+++ b/bkup/Application/Application.tsx
@@ -0,0 +1,14 @@
+import React from "react"
+import "./Application.component.scss"
+
+interface ApplicationProps {}
+
+const Application = (props: any): JSX.Element => {
+  return (
+    <div className="ar-Application">
+      In Component Application
+    </div>
+  )
+}
+
+export default Application
--- a/bkup/Application/index.ts
+++ b/bkup/Application/index.ts
@@ -0,0 +1,3 @@
+import Application from "./Application"
+
+export default Application
--- a/bkup/ArIconsViewer/ArIconsViewer.component.scss
+++ b/bkup/ArIconsViewer/ArIconsViewer.component.scss
@@ -0,0 +1,25 @@
+.ar-ArIconsViewer {
+  grid-template-columns: minmax(10rem, 1fr);
+
+  .ar-ScrollPagination__items-container.compact, .ar-ScrollPagination__items-container.comfy {
+    .ar-ArIconsViewer__icon-container:hover {
+      background-color: var(--ar-bg-hover);
+    }
+  }
+  .ar-ScrollPagination__items-container.compact {
+    grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr)) !important;
+    gap: 1rem !important;
+    grid-auto-rows: minmax(3rem, auto) !important;
+  }
+
+  .ar-ScrollPagination__items-container.list {
+    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)) !important;
+    grid-auto-rows: 2.5rem !important;
+    gap: 1rem !important;
+    .ar-ArIconsViewer__label {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+  }
+}
--- a/bkup/ArIconsViewer/ArIconsViewer.test.ts
+++ b/bkup/ArIconsViewer/ArIconsViewer.test.ts
@@ -0,0 +1,8 @@
+import React from "react"
+import ArIconsViewer from "./ArIconsViewer"
+
+describe("ArIconsViewer", () => {
+   it("renders without error", () => {
+
+   })
+})
--- a/bkup/ArIconsViewer/ArIconsViewer.tsx
+++ b/bkup/ArIconsViewer/ArIconsViewer.tsx
@@ -0,0 +1,166 @@
+import { ChangeEvent, useEffect, useState } from "react"
+import {
+  ArDndItemTypes,
+  ArIconTileTypes,
+  ArIconsViewerProps,
+  ArPopoverSlots,
+  ArThemes,
+  SegmentData,
+  IconResponse,
+  ArIconSourceTypes,
+} from "@armco/types"
+import { API_CONFIG, ENDPOINTS } from "@armco/configs"
+import { Helper, useTheme } from "@armco/utils"
+import { Icon } from "@armco/icon"
+import {
+  ScrollPagination,
+  SearchField,
+  SegmentedControl,
+  Draggable,
+  Tooltip,
+} from ".."
+import "./ArIconsViewer.component.scss"
+
+const pageApi =
+  API_CONFIG.STATIC_HOST[process.env.NODE_ENV] +
+  ENDPOINTS.STATIC.ICON.ROOT +
+  ENDPOINTS.STATIC.ICON.PAGE
+
+const compactionStyles = [
+  {
+    name: "comfy",
+    icon: "md/MdViewComfy",
+    tooltip: "View Comfortable",
+  },
+  {
+    name: "compact",
+    icon: "md/MdViewCompact",
+    tooltip: "View Compact",
+  },
+  {
+    name: "list",
+    icon: "io5/IoList",
+    tooltip: "Quick Peak",
+  },
+]
+
+const ArIconsViewer = (props: ArIconsViewerProps): JSX.Element => {
+  const {
+    demo,
+    view: externalView,
+    hasSearch,
+    hasViewSelector,
+    isDraggable,
+  } = props
+  const [view, setView] = useState<SegmentData>(compactionStyles[0])
+  const [searchText, setSearchText] = useState<string>()
+  const { theme } = useTheme()
+
+  useEffect(() => {
+    if (externalView) {
+      const foundView = compactionStyles.find(
+        (v) => v.name === externalView.name,
+      )
+      foundView && setView(foundView)
+    }
+  }, [externalView])
+
+  const getItem = (icon: IconResponse) => (
+    <span
+      className={`ar-ArIconsViewer__icon-container border-radius-l1 h-100 w-100${
+        view.name !== ArIconTileTypes.LIST
+          ? " flex-center"
+          : " border flex-v-center"
+      }`}
+      slot={ArPopoverSlots.ANCHOR}
+    >
+      <Icon
+        attributes={{
+          colors: {
+            fillColor: theme === ArThemes.DARK1 ? "#0dcaf0b3" : "#0b8dfa",
+          },
+          classes: isDraggable ? "" : "cursor-pointer",
+          size: "2rem",
+        }}
+        icon={{ source: icon.icon, type: ArIconSourceTypes.svgString }}
+      />
+      {view.name === ArIconTileTypes.LIST && (
+        <span
+          className="ar-ArIconsViewer__label ms-2 p-2"
+          style={{
+            color: theme === ArThemes.DARK1 ? "#0dcaf0b3" : "#0b8dfa",
+          }}
+        >
+          {icon.name}
+        </span>
+      )}
+    </span>
+  )
+
+  return (
+    <div className="ar-ArIconsViewer w-100 h-100 d-flex flex-column">
+      {(hasSearch || hasViewSelector) && (
+        <div className="ar-ArIconsViewer__view-controls p-2 border mb-2 d-flex">
+          {hasSearch && (
+            <SearchField
+              classes="bg-white"
+              placeholder="Search by name, tags, description"
+              onChange={Helper.debounce(
+                (event: ChangeEvent<HTMLInputElement>) =>
+                  setSearchText(event.target.value),
+                1000,
+              )}
+              items={[]}
+              hidePopup
+            />
+          )}
+          {hasViewSelector && (
+            <SegmentedControl
+              classes="ms-3"
+              hasUniformSegments
+              segments={compactionStyles}
+              selected={view.name}
+              onChange={(view) => setView(view as SegmentData)}
+              demo={demo}
+            />
+          )}
+        </div>
+      )}
+      <div className="px-3 py-2 border flex-1">
+        <ScrollPagination
+          apiEndpoint={pageApi}
+          component={(props) => {
+            const { icon } = props
+            let item = getItem(icon)
+            item = isDraggable ? (
+              <Draggable
+                itemType={ArDndItemTypes.ICON}
+                itemData={icon}
+                slot={ArPopoverSlots.ANCHOR}
+              >
+                {item}
+              </Draggable>
+            ) : (
+              item
+            )
+            item =
+              view.name !== ArIconTileTypes.LIST ? (
+                <Tooltip classes="flex-center" demo={demo}>
+                  {item}
+                  <span slot={ArPopoverSlots.POPOVER}>{icon.name}</span>
+                </Tooltip>
+              ) : (
+                item
+              )
+            return item
+          }}
+          filters={searchText !== undefined ? { search: searchText } : {}}
+          demo={demo}
+          gridClasses={view.name}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default ArIconsViewer
--- a/bkup/ArIconsViewer/index.ts
+++ b/bkup/ArIconsViewer/index.ts
@@ -0,0 +1,3 @@
+import ArIconsViewer from "./ArIconsViewer"
+
+export default ArIconsViewer
--- a/bkup/ArViz/ArViz.component.scss
+++ b/bkup/ArViz/ArViz.component.scss
@@ -0,0 +1,3 @@
+.ar-ArViz {
+  
+}
--- a/bkup/ArViz/ArViz.test.ts
+++ b/bkup/ArViz/ArViz.test.ts
@@ -0,0 +1,8 @@
+import React from "react"
+import ArViz from "./ArViz"
+
+describe("ArViz", () => {
+   it("renders without error", () => {
+
+   })
+})
--- a/bkup/ArViz/ArViz.tsx
+++ b/bkup/ArViz/ArViz.tsx
@@ -0,0 +1,45 @@
+import { useEffect, useRef } from "react"
+import { select } from "d3"
+import { ArVisualizationTypes, ArVizProps, ObjectType } from "@armco/types"
+import { generateBubbleChart } from "@armco/utils"
+import { BubbleChart } from ".."
+import "./ArViz.component.scss"
+
+// TODO: Replace this with ArViz dummy in dummies.txt
+const dataDummy = {}
+
+const ArViz = (props: ArVizProps): JSX.Element => {
+  const { clickHandler, type, data } = props
+  const svgContainerRef = useRef(null)
+
+  useEffect(() => {
+    if (data && svgContainerRef.current) {
+      switch (type) {
+        case ArVisualizationTypes.BUBBLE:
+          generateBubbleChart(dataDummy)
+      }
+      const svg = svgContainerRef.current as SVGSVGElement
+      const boundingBox = svg.getBBox()
+      const svgToUpdate = select("#ar-ArViz__chart-container")
+      svgToUpdate.attr(
+        "viewBox",
+        `${boundingBox.x} ${boundingBox.y} ${boundingBox.width} ${boundingBox.height}`,
+      )
+    }
+  }, [svgContainerRef, data, type])
+
+  return type === ArVisualizationTypes.BUBBLE ? (
+    <BubbleChart data={data as Array<ObjectType>} clickHandler={clickHandler} />
+  ) : (
+    <div className="ar-ArViz h-100 w-100 overflow-auto p-3">
+      <svg
+        id="ar-ArViz__chart-container"
+        className="h-100 w-100"
+        ref={svgContainerRef}
+        viewBox=""
+      />
+    </div>
+  )
+}
+
+export default ArViz
--- a/bkup/ArViz/index.ts
+++ b/bkup/ArViz/index.ts
@@ -0,0 +1,3 @@
+import ArViz from "./ArViz"
+
+export default ArViz
--- a/bkup/ArmcoIamProvider/ArmcoIamProvider.component.scss
+++ b/bkup/ArmcoIamProvider/ArmcoIamProvider.component.scss
@@ -0,0 +1,3 @@
+.ar-ArmcoIamProvider {
+  
+}
--- a/bkup/ArmcoIamProvider/ArmcoIamProvider.test.ts
+++ b/bkup/ArmcoIamProvider/ArmcoIamProvider.test.ts
@@ -0,0 +1,6 @@
+import React from "react"
+import ArmcoIamProvider from "./ArmcoIamProvider"
+
+describe("ArmcoIamProvider", () => {
+  it("renders without error", () => {})
+})
--- a/bkup/ArmcoIamProvider/ArmcoIamProvider.tsx
+++ b/bkup/ArmcoIamProvider/ArmcoIamProvider.tsx
@@ -0,0 +1,20 @@
+import { ArmcoIamProviderProps, ArDefaultLoginPage } from "@armco/types"
+import { WEB_CONFIG } from "@armco/configs"
+import { LoginProvider } from ".."
+import "./ArmcoIamProvider.component.scss"
+
+const ArmcoIamProvider = (props: ArmcoIamProviderProps): JSX.Element => {
+  const { defaultPage } = props
+  return (
+    <LoginProvider
+      url={
+        WEB_CONFIG.ARMORY[process.env.NODE_ENV] +
+        (!defaultPage || defaultPage === ArDefaultLoginPage.LOGIN
+          ? "/login"
+          : "/join")
+      }
+    />
+  )
+}
+
+export default ArmcoIamProvider
--- a/bkup/ArmcoIamProvider/index.ts
+++ b/bkup/ArmcoIamProvider/index.ts
@@ -0,0 +1,3 @@
+import ArmcoIamProvider from "./ArmcoIamProvider"
+
+export default ArmcoIamProvider
--- a/bkup/Badge/Badge.component.scss
+++ b/bkup/Badge/Badge.component.scss
@@ -0,0 +1,69 @@
+.ar-Badge {
+	--ar-badge-size-small: 8px;
+	--ar-badge-size-medium: 20px;
+	--ar-badge-size-large: 40px;
+  display: flex;
+	flex-flow: row wrap;
+	-webkit-box-pack: center;
+	place-content: center;
+	-webkit-box-align: center;
+	align-items: center;
+	position: absolute;
+	box-sizing: border-box;
+	font-family: Roboto, Helvetica, Arial, sans-serif;
+	font-weight: 500;
+	font-size: 0.75rem;
+	line-height: 1;
+	z-index: 1;
+	transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+	background-color: rgb(206, 147, 216);
+	color: rgba(0, 0, 0, 0.87);
+	// top: 0px;
+	// right: 0px;
+	// transform: scale(1) translate(50%, -50%);
+	transform-origin: 100% 0%;
+
+	&.small {
+		min-width: var(--ar-badge-size-small);
+		height: var(--ar-badge-size-small);
+		border-radius: calc(var(--ar-badge-size-small) / 2);
+		padding: 0;
+	}
+
+	&.regular {
+		min-width: var(--ar-badge-size-medium);
+		height: var(--ar-badge-size-medium);
+		border-radius: calc(var(--ar-badge-size-medium) / 2);
+		padding: 0 6px;
+	}
+
+	&.large {
+		min-width: var(--ar-badge-size-large);
+		height: var(--ar-badge-size-large);
+		border-radius: calc(var(--ar-badge-size-large) / 2);
+		padding: 0 12px;
+	}
+
+	&.inprogress {
+		background-color: var(--ar-color-font-warning);
+	}
+
+	&.complete {
+		background-color: var(--ar-color-font-success);
+		color: white;
+	}
+
+	&.deferred {
+		background-color: #60202d;
+		color: white;
+	}
+
+	&.atrisk {
+		background-color: var(--ar-color-font-danger);
+		color: white;
+	}
+
+	&.shadow {
+		box-shadow: 0px 4px 8px var(--ar-shadow);
+	}
+}
--- a/bkup/Badge/Badge.test.ts
+++ b/bkup/Badge/Badge.test.ts
@@ -0,0 +1,8 @@
+import React from "react"
+import Badge from "./Badge"
+
+describe("Badge", () => {
+   it("renders without error", () => {
+
+   })
+})
--- a/bkup/Badge/Badge.tsx
+++ b/bkup/Badge/Badge.tsx
@@ -0,0 +1,25 @@
+import { BadgeProps } from "@armco/types"
+import { Icon } from "@armco/icon"
+import "./Badge.component.scss"
+
+const Badge = (props: BadgeProps): JSX.Element => {
+  const { classes, icon, size, shadow, style, text, type } = props
+  if (icon?.indexOf("/") === -1) {
+    console.warn(
+      "Not sufficient information to render icon, needed format <icon_family>/<icon_name>",
+    )
+  }
+  return (
+    <span
+      className={`ar-Badge${size ? " " + size : " regular"}${
+        type ? " " + type : " inprogress"
+      }${shadow ? " shadow" : ""}${classes ? " " + classes : ""}`}
+      style={style}
+    >
+      {icon && size !== "small" && <Icon icon={icon} />}
+      {size !== "small" && (text || "+2")}
+    </span>
+  )
+}
+
+export default Badge
--- a/bkup/Badge/index.ts
+++ b/bkup/Badge/index.ts
@@ -0,0 +1,3 @@
+import Badge from "./Badge"
+
+export default Badge
--- a/bkup/Banner/Banner.component.scss
+++ b/bkup/Banner/Banner.component.scss
@@ -0,0 +1,3 @@
+.ar-Banner {
+  
+}
--- a/bkup/Banner/Banner.test.ts
+++ b/bkup/Banner/Banner.test.ts
@@ -0,0 +1,8 @@
+import React from "react"
+import Banner from "./Banner"
+
+describe("Banner", () => {
+   it("renders without error", () => {
+
+   })
+})
--- a/bkup/Banner/Banner.tsx
+++ b/bkup/Banner/Banner.tsx
@@ -0,0 +1,14 @@
+import React from "react"
+import "./Banner.component.scss"
+
+interface BannerProps {}
+
+const Banner = (props: any): JSX.Element => {
+  return (
+    <div className="ar-Banner">
+      In Component Banner
+    </div>
+  )
+}
+
+export default Banner
--- a/bkup/Banner/index.ts
+++ b/bkup/Banner/index.ts
@@ -0,0 +1,3 @@
+import Banner from "./Banner"
+
+export default Banner
--- a/bkup/Benefits/Benefits.component.scss
+++ b/bkup/Benefits/Benefits.component.scss
@@ -0,0 +1,3 @@
+.ar-Benefits {
+  
+}
--- a/bkup/Benefits/Benefits.test.ts
+++ b/bkup/Benefits/Benefits.test.ts
@@ -0,0 +1,8 @@
+import React from "react"
+import Benefits from "./Benefits"
+
+describe("Benefits", () => {
+   it("renders without error", () => {
+
+   })
+})
--- a/bkup/Benefits/Benefits.tsx
+++ b/bkup/Benefits/Benefits.tsx
@@ -0,0 +1,14 @@
+import React from "react"
+import "./Benefits.component.scss"
+
+interface BenefitsProps {}
+
+const Benefits = (props: any): JSX.Element => {
+  return (
+    <div className="ar-Benefits">
+      In Component Benefits
+    </div>
+  )
+}
+
+export default Benefits
--- a/bkup/Benefits/index.ts
+++ b/bkup/Benefits/index.ts
@@ -0,0 +1,3 @@
+import Benefits from "./Benefits"
+
+export default Benefits
--- a/bkup/Blog/Blog.component.scss
+++ b/bkup/Blog/Blog.component.scss
@@ -0,0 +1,3 @@
+.ar-Blog {
+  
+}
--- a/bkup/Blog/Blog.test.ts
+++ b/bkup/Blog/Blog.test.ts
@@ -0,0 +1,8 @@
+import React from "react"
+import Blog from "./Blog"
+
+describe("Blog", () => {
+   it("renders without error", () => {
+
+   })
+})
--- a/bkup/Blog/Blog.tsx
+++ b/bkup/Blog/Blog.tsx
@@ -0,0 +1,14 @@
+import React from "react"
+import "./Blog.component.scss"
+
+interface BlogProps {}
+
+const Blog = (props: any): JSX.Element => {
+  return (
+    <div className="ar-Blog">
+      In Component Blog
+    </div>
+  )
+}
+
+export default Blog
--- a/bkup/Blog/index.ts
+++ b/bkup/Blog/index.ts
@@ -0,0 +1,3 @@
+import Blog from "./Blog"
+
+export default Blog
--- a/bkup/Brands/Brands.component.scss
+++ b/bkup/Brands/Brands.component.scss
@@ -0,0 +1,3 @@
+.ar-Brands {
+  
+}
--- a/bkup/Brands/Brands.test.ts
+++ b/bkup/Brands/Brands.test.ts
@@ -0,0 +1,8 @@
+import React from "react"
+import Brands from "./Brands"
+
+describe("Brands", () => {
+   it("renders without error", () => {
+
+   })
+})
--- a/bkup/Brands/Brands.tsx
+++ b/bkup/Brands/Brands.tsx
@@ -0,0 +1,14 @@
+import React from "react"
+import "./Brands.component.scss"
+
+interface BrandsProps {}
+
+const Brands = (props: any): JSX.Element => {
+  return (
+    <div className="ar-Brands">
+      In Component Brands
+    </div>
+  )
+}
+
+export default Brands
--- a/bkup/Brands/index.ts
+++ b/bkup/Brands/index.ts
@@ -0,0 +1,3 @@
+import Brands from "./Brands"
+
+export default Brands
--- a/bkup/Breadcrumb/Breadcrumb.component.scss
+++ b/bkup/Breadcrumb/Breadcrumb.component.scss
@@ -0,0 +1,5 @@
+.ar-Breadcrumb {
+	&>span {
+  	font-size: 0.75rem;
+	}
+}
--- a/bkup/Breadcrumb/Breadcrumb.test.ts
+++ b/bkup/Breadcrumb/Breadcrumb.test.ts
@@ -0,0 +1,8 @@
+import React from "react"
+import Breadcrumb from "./Breadcrumb"
+
+describe("Breadcrumb", () => {
+   it("renders without error", () => {
+
+   })
+})
--- a/bkup/Breadcrumb/Breadcrumb.tsx
+++ b/bkup/Breadcrumb/Breadcrumb.tsx
@@ -0,0 +1,55 @@
+import { useNavigate } from "react-router-dom"
+import {
+  ArButtonVariants,
+  ArSizes,
+  BreadCrumbData,
+  BreadcrumbProps,
+} from "@armco/types"
+import { Button } from ".."
+import "./Breadcrumb.component.scss"
+
+const Breadcrumb = (props: BreadcrumbProps): JSX.Element => {
+  const { classes, data, demo, separator, size, onClick } = props
+  const navigate = useNavigate()
+
+  const demoDummy = [
+    { label: "Home", route: "/home" },
+    {
+      label: "Categories",
+    },
+    { label: "Footwear" },
+    {
+      label: "LikeMyShoe",
+    },
+  ]
+
+  const nodes = data || (demo && demoDummy)
+
+  return (
+    <div
+      className={`ar-Breadcrumb flex-v-center${classes ? " " + classes : ""}`}
+    >
+      {nodes.map((node: BreadCrumbData, index: number) => (
+        <>
+          <Button
+            key={"breadcrumb-part-" + index}
+            classes="d-inline-block"
+            content={node.label}
+            size={size || ArSizes.SMALL}
+            variant={ArButtonVariants.LINKNATIVE}
+            onClick={
+              "onClick" in node
+                ? (e) => node.onClick(e, node.data)
+                : onClick
+                ? (e) => onClick(e, node.data)
+                : () => navigate("route" in node ? node.route : "")
+            }
+          />
+          {index < nodes.length - 1 && (separator || "/")}
+        </>
+      ))}
+    </div>
+  )
+}
+
+export default Breadcrumb
--- a/bkup/Breadcrumb/index.ts
+++ b/bkup/Breadcrumb/index.ts
@@ -0,0 +1,3 @@
+import Breadcrumb from "./Breadcrumb"
+
+export default Breadcrumb
--- a/bkup/Breadcrumbs/Breadcrumbs.component.scss
+++ b/bkup/Breadcrumbs/Breadcrumbs.component.scss
@@ -0,0 +1,3 @@
+.ar-Breadcrumbs {
+  
+}
--- a/bkup/Breadcrumbs/Breadcrumbs.test.ts
+++ b/bkup/Breadcrumbs/Breadcrumbs.test.ts
@@ -0,0 +1,8 @@
+import React from "react"
+import Breadcrumbs from "./Breadcrumbs"
+
+describe("Breadcrumbs", () => {
+   it("renders without error", () => {
+
+   })
+})
--- a/bkup/Breadcrumbs/Breadcrumbs.tsx
+++ b/bkup/Breadcrumbs/Breadcrumbs.tsx
@@ -0,0 +1,14 @@
+import React from "react"
+import "./Breadcrumbs.component.scss"
+
+interface BreadcrumbsProps {}
+
+const Breadcrumbs = (props: any): JSX.Element => {
+  return (
+    <div className="ar-Breadcrumbs">
+      In Component Breadcrumbs
+    </div>
+  )
+}
+
+export default Breadcrumbs
--- a/bkup/Breadcrumbs/index.ts
+++ b/bkup/Breadcrumbs/index.ts
@@ -0,0 +1,3 @@
+import Breadcrumbs from "./Breadcrumbs"
+
+export default Breadcrumbs
--- a/bkup/BrowserIncompatibility/BrowserIncompatibility.component.scss
+++ b/bkup/BrowserIncompatibility/BrowserIncompatibility.component.scss
@@ -0,0 +1,16 @@
+.ar-BrowserIncompatibility {
+	border: var(--ar-border);
+	background-color: var(--ar-bg-base);
+	transition: box-shadow 0.3s;
+	font-size: 0.85rem;
+	&:hover {
+		box-shadow: 0px 4px 8px var(--ar-shadow);
+	}
+  .ar-BrowserIncompatibility__help-link {
+		border: var(--ar-border);
+		background-color: var(--ar-bg-hover);
+		border-radius: 3px;
+		font-size: 0.75rem;
+		cursor: pointer;
+	}
+}
--- a/Show More
+++ b/Show More