added parent to ObjID

LICENSE

@@ -0,0 +1,674 @@
+                    GNU GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The GNU General Public License is a free, copyleft license for
+software and other kinds of works.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+the GNU General Public License is intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.  We, the Free Software Foundation, use the
+GNU General Public License for most of our software; it applies also to
+any other work released this way by its authors.  You can apply it to
+your programs, too.
+
+  When we speak of free software, we are referring to freedom, 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
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  To protect your rights, we need to prevent others from denying you
+these rights or asking you to surrender the rights.  Therefore, you have
+certain responsibilities if you distribute copies of the software, or if
+you modify it: responsibilities to respect the freedom of others.
+
+  For example, if you distribute copies of such a program, whether
+gratis or for a fee, you must pass on to the recipients the same
+freedoms that you received.  You must make sure that they, too, receive
+or can get the source code.  And you must show them these terms so they
+know their rights.
+
+  Developers that use the GNU GPL protect your rights with two steps:
+(1) assert copyright on the software, and (2) offer you this License
+giving you legal permission to copy, distribute and/or modify it.
+
+  For the developers' and authors' protection, the GPL clearly explains
+that there is no warranty for this free software.  For both users' and
+authors' sake, the GPL requires that modified versions be marked as
+changed, so that their problems will not be attributed erroneously to
+authors of previous versions.
+
+  Some devices are designed to deny users access to install or run
+modified versions of the software inside them, although the manufacturer
+can do so.  This is fundamentally incompatible with the aim of
+protecting users' freedom to change the software.  The systematic
+pattern of such abuse occurs in the area of products for individuals to
+use, which is precisely where it is most unacceptable.  Therefore, we
+have designed this version of the GPL to prohibit the practice for those
+products.  If such problems arise substantially in other domains, we
+stand ready to extend this provision to those domains in future versions
+of the GPL, as needed to protect the freedom of users.
+
+  Finally, every program is threatened constantly by software patents.
+States should not allow patents to restrict development and use of
+software on general-purpose computers, but in those that do, we wish to
+avoid the special danger that patents applied to a free program could
+make it effectively proprietary.  To prevent this, the GPL assures that
+patents cannot be used to render the program non-free.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If 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 convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Use with the GNU Affero General Public License.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU Affero General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the special requirements of the GNU Affero General Public License,
+section 13, concerning interaction through a network will apply to the
+combination as such.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU 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
+Program specifies that a certain numbered version of the GNU General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "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 PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM 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 PROGRAM (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 PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state 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 program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program 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 General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If the program does terminal interaction, make it output a short
+notice like this when it starts in an interactive mode:
+
+    <program>  Copyright (C) <year>  <name of author>
+    This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+    This is free software, and you are welcome to redistribute it
+    under certain conditions; type `show c' for details.
+
+The hypothetical commands `show w' and `show c' should show the appropriate
+parts of the General Public License.  Of course, your program's commands
+might be different; for a GUI interface, you would use an "about box".
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU GPL, see
+<http://www.gnu.org/licenses/>.
+
+  The GNU General Public License does not permit incorporating your program
+into proprietary programs.  If your program is a subroutine library, you
+may consider it more useful to permit linking proprietary applications with
+the library.  If this is what you want to do, use the GNU Lesser General
+Public License instead of this License.  But first, please read
+<http://www.gnu.org/philosophy/why-not-lgpl.html>.

codegen.yml

@@ -10,7 +10,10 @@ generates:
       - "typescript"
       - "typescript-operations"
       - "typescript-react-apollo"
+      - add:
+            content: "import ObjID from './../types/ObjID'"
     config:
       withHooks: true
       scalars:
         DateTime: string
+        objID: ObjID

craco.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+	style: {
+		postcss: {
+			plugins: [
+				require("tailwindcss"),
+				require("autoprefixer"),
+			],
+		},
+	},
+}

package.json

@@ -4,31 +4,22 @@
   "private": true,
   "dependencies": {
     "@apollo/client": "^3.3.21",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/jest": "^26.0.15",
-    "@types/node": "^12.0.0",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
     "graphql": "^15.5.1",
-    "node-sass": "^6.0.1",
-    "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-contexify": "^5.0.0",
     "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
-    "spectre.css": "^0.5.9",
-    "typescript": "^4.1.2",
-    "web-vitals": "^1.0.1"
+    "react-icons": "^4.2.0",
+    "react-router-dom": "^5.2.0",
+    "rooks": "^5.7.1",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test",
     "eject": "react-scripts eject",
     "graphql:gen": "graphql-codegen --config codegen.yml",
-    "graphql:download": "apollo schema:download --endpoint=http://localhost:8080/graphql src/generated/schema.json"
+    "graphql:download": "apollo schema:download --endpoint=http://localhost:8080/api/graphql src/generated/schema.json"
   },
   "eslintConfig": {
     "extends": [
@@ -49,16 +40,28 @@
     ]
   },
   "devDependencies": {
+    "@craco/craco": "^6.2.0",
+    "@graphql-codegen/add": "^3.1.0",
     "@graphql-codegen/cli": "1.21.7",
     "@graphql-codegen/introspection": "1.18.2",
     "@graphql-codegen/typescript": "^1.23.0",
     "@graphql-codegen/typescript-operations": "1.18.4",
     "@graphql-codegen/typescript-react-apollo": "2.3.1",
+    "@types/jest": "^26.0.15",
+    "@types/node": "^12.0.0",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@types/react-router-dom": "^5.1.8",
     "@typescript-eslint/eslint-plugin": "^4.28.4",
     "@typescript-eslint/parser": "^4.28.4",
     "apollo": "^2.33.4",
+    "autoprefixer": "^9",
     "eslint": "^7.31.0",
-    "eslint-plugin-react": "^7.24.0"
+    "eslint-plugin-react": "^7.24.0",
+    "node-sass": "^6.0.1",
+    "postcss": "^7",
+    "react-scripts": "4.0.3",
+    "typescript": "^4.1.2"
   },
   "proxy": "http://localhost:8080"
 }

public/index.html

@@ -1,13 +1,13 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="dark">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <title>React App</title>
+    <link rel="manifest" href="/manifest.json" />
+    <title>S3 Browser</title>
   </head>
-  <body>
+  <body class="dark:bg-gray-800">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
   </body>

src/App.module.scss

@@ -1,5 +0,0 @@
-.imageOpenerImage{
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-}

src/App.tsx

@@ -1,10 +1,57 @@
-import React from "react"
+import React, { useState } from "react"
 import FileBrowser from "./components/FileBrowser"
+import { BrowserRouter as Router, Switch, Route, Redirect } from "react-router-dom"
+import NotFound from "./components/NotFound"
+import Login from "./components/Login"
+import { useIsAuthQuery } from "./generated/graphql"
+import { useEffect } from "react"
+import BucketSelect from "./components/BucketSelect"
 
 const App: React.FC = () => {
+	const { data } = useIsAuthQuery()
+	const [isAuth,setIsAuth] = useState(false)
+	const [ready,setReady] = useState(false)
+
+	useEffect(()=>{
+		if (data){
+			setIsAuth(data.authorized)
+			setReady(true)
+		}
+	},[data])
+
 	return (
-		<div className="container">
-			<FileBrowser/>
+		<div className="dark:text-gray-300 px-2 pt-1">
+			{
+				ready&& 
+				<Router>
+					<Switch>
+						{/* Private only routes */}
+						{
+							isAuth && [
+								<Route path="/f/" exact component={BucketSelect} key={null} />,
+								<Route path="/f/" component={FileBrowser} key={null} />,
+								<Redirect from="/" exact to="/f/" key={null} />,
+								<Redirect from="/login" exact to="/f/" key={null} />,
+							]
+						}
+
+						{/* Public only routes */}
+						{
+							!isAuth && [
+								<Route path="/login" exact key={null} >
+									<Login onLogin={()=>{
+										setIsAuth(true)
+									}} />
+								</Route>,
+								<Redirect from="*" to="/login" key={null} />
+							]
+						}
+
+						{/* Public & private routes */}
+						<Route path="*" component={NotFound} />
+					</Switch>
+				</Router>
+			}
 		</div>
 	)
 }

src/Cache.ts

@@ -0,0 +1,55 @@
+import { InMemoryCache } from "@apollo/client"
+import ObjID from "./types/ObjID"
+
+const cache = new InMemoryCache({
+	typePolicies:{
+		File:{
+			fields:{
+				id:{
+					merge(_,incomming){
+						// HACK: i use the merge function to change the id from a string to ObjID object.
+						// afaik apollo does not yet support custom scalar types.
+						if (!incomming){
+							return incomming
+						}else if (incomming instanceof ObjID){
+							return incomming
+						}else{
+							return ObjID.fromString(incomming as string)
+						}
+					}
+				}
+			}
+		},
+		Directory:{
+			fields:{
+				id:{
+					merge(_,incomming){
+						if (!incomming){
+							return incomming
+						}else if (incomming instanceof ObjID){
+							return incomming
+						}else{
+							return ObjID.fromString(incomming as string)
+						}
+					}
+				}
+			}
+		},
+		Query: {
+			fields: {
+				files: {
+					merge(existing, incoming){
+						return incoming
+					}
+				},
+				directorys:{
+					merge(existing, incoming){
+						return incoming
+					}
+				}
+			}
+		}
+	}
+})
+
+export default cache

src/assets/breadcrum.svg

@@ -0,0 +1,10 @@
+<svg
+    fill="currentColor"
+    viewBox="0 0 20 20"
+>
+    <path
+        fillRule="evenodd"
+        d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+        clipRule="evenodd"
+    ></path>
+</svg>

src/assets/spinner.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+</svg>

src/components/AudioOpener.tsx

@@ -4,7 +4,6 @@ import genDownloadLink from "../functions/genDownloadLink"
 import { FileOpenerProps } from "../types/FileOpenerProps"
 
 const AudioOpener: React.FC<FileOpenerProps> = (props) => {
-
 	const audio = React.createRef<HTMLAudioElement>()
 
 	useEffect(()=>{

src/components/Breadcrum.tsx

@@ -1,38 +1,63 @@
 import React from "react"
-import PropTypes from "prop-types"
+import ObjID from "../types/ObjID"
+import  { ReactComponent as BreadcrumImage } from "./../assets/breadcrum.svg"
+import { Link } from "react-router-dom"
 
 interface Props{
-    path: string
-    onDirClick?: (path: string) => void
+    path?: ObjID
+    onDirClick?: (path: ObjID) => void
 }
 
-const Breadcrum: React.FC<Props> = (props) => {
-	const parts = props.path.split("/").filter(e=>e.length > 0)
+const Breadcrum: React.FC<Props> = ({path,onDirClick}) => {
+
+	if (!path){
+		return <ul className="flex text-gray-500 dark:text-gray-400  text-lg ">
+			<div className="breadcrum-item text-blue-500">
+				<Link to="/f/">
+					Home
+				</Link>
+			</div>
+		</ul>
+	}
+
+	const keyParts = path.key.split("/").filter(e=>e.length > 0)
 
 	return (
-		<ul className="breadcrumb">
-			<li className="breadcrumb-item">
-				<a onClick={()=>{
-					props.onDirClick?.("/")
-				}}>
-                    Root
-				</a>
-			</li>
-			{parts.map((e,i,arr)=>(
-				<li key={e} className="breadcrumb-item">
-					<a onClick={()=>{
-						if (i != arr.length - 1){
-							props.onDirClick?.("/"+arr.slice(0,i-1).join("/"))
-						}
-					}}>{e}</a>
-				</li>))}
+		<ul className="flex text-gray-500 dark:text-gray-400  text-lg ">
+			<div className="breadcrum-item">
+				<Link to="/f/">
+					Home
+				</Link>
+			</div>
+			<div className="breadcrum-item">
+				<BreadcrumImage className="h-5 w-auto text-gray-400 cursor-default" />
+				<li>
+					<a className={!keyParts.length?"text-blue-500":""} onClick={()=>{
+						onDirClick?.(new ObjID(path.bucket,"/"))
+					}}>
+						{path.bucket}
+					</a>
+				</li>
+			</div>
+
+			{keyParts.map((e,i,arr)=>{
+				const last = i == arr.length - 1
+				return <div key={e} className="breadcrum-item">
+					<BreadcrumImage className="h-5 w-auto text-gray-400 cursor-default" />
+					<li>
+						<a 
+							className={`${last?"text-blue-500":""}`}
+							onClick={()=>{
+								if (!last){
+									onDirClick?.(new ObjID(path.bucket,arr.slice(0,i+1).join("/")))
+								}
+							}}>{e}</a>
+					</li>
+				</div>
+			})}
 		</ul>
+
 	)
 }
 
-Breadcrum.propTypes = {
-	path: PropTypes.string.isRequired,
-	onDirClick: PropTypes.func
-}
-
 export default Breadcrum

src/components/BucketSelect.tsx

@@ -0,0 +1,35 @@
+import React from "react"
+import { useHistory } from "react-router-dom"
+import { useListBucktesQuery } from "../generated/graphql"
+import Breadcrum from "./Breadcrum"
+import MoreMenu from "./MoreMenu"
+import { ReactComponent as Spinner } from "./../assets/spinner.svg"
+import Table, { Data } from "./Table"
+
+const BucketSelect: React.FC = () => {
+	const history = useHistory()
+	const {data: buckets, loading} = useListBucktesQuery()
+	const tableData: Data = {
+		headers:[{name:"Bucket"}],
+		body:(!buckets?[]:buckets.buckets.map(e=>{return {cells:[{name:e||""}],onClick:()=>{history.push(`/f/${e}`)}}}))
+	}
+
+	return (
+		<div>
+			<div className="flex justify-between h-12">
+				<Breadcrum />
+				<div className="ml-auto">
+					<MoreMenu />
+				</div>
+			</div>
+			<Table data={tableData}/>
+			{loading && 
+				<div className="flex justify-center mt-4">
+					<Spinner className="animate-spin h-6 w-6 dark:text-white"  />
+				</div>
+			}
+		</div>
+	)
+}
+
+export default BucketSelect

src/components/CreateDirButton.tsx

@@ -0,0 +1,57 @@
+import React, { useRef } from "react"
+import { useEffect } from "react"
+import { useState } from "react"
+import { MdCreateNewFolder } from "react-icons/md"
+
+interface Props {
+    onPressed?: (dirName: string)=>void
+}
+
+const CreateDirButton: React.FC<Props> = (props) => {
+	const [name,setName] = useState("")
+	const [show,setShow] = useState(false)
+	const input = useRef<HTMLInputElement>(null)
+
+	useEffect(()=>{
+		if(show){
+			input.current?.focus()
+		}
+	},[show])
+
+	return (
+		<div className="flex">
+			<button
+				onClick={()=>{
+					setShow(!show)
+
+				}}
+			>
+				<MdCreateNewFolder size="40"/>
+			</button>
+			<div className={`my-auto ${show?"w-44":"w-0"} overflow-hidden transition-all`} >
+				<form 
+					onSubmit={(e)=>{
+						e.preventDefault()
+						props.onPressed?.(name)
+						setName("")
+						setShow(false)
+					}}>
+
+					<input
+						className="mx-1 text-input"
+						type="text"
+						onChange={(e)=>setName(e.target.value)}
+						value={name}
+						ref={input}
+						onBlur={()=>{
+							setShow(false)
+							setName("")
+						}}
+					/>
+				</form>
+			</div>
+		</div>
+	)
+}
+
+export default CreateDirButton

src/components/DirectoryElement.tsx

@@ -1,27 +0,0 @@
-import React from "react"
-import PropTypes from "prop-types"
-import { Directory } from "../generated/graphql"
-
-interface Props {
-    dir: Directory
-}
-
-const DirectoryElement: React.FC<Props> = (props) => {
-	return (
-		<>
-			<td>
-				📂 {props.dir.name}
-			</td>
-			<td>
-			</td>
-			<td>	
-			</td>
-		</>
-	)
-}
-
-DirectoryElement.propTypes = {
-	dir: PropTypes.any.isRequired // TODO: maybe you can use the interface
-}
-
-export default DirectoryElement

src/components/DragAndDrop.tsx

@@ -1,80 +0,0 @@
-import React from "react"
-import { useState } from "react"
-import { useEffect } from "react"
-import style from "./../style/DragAndDrop.module.scss"
-
-interface Props {
-	onDrop?: ()=>void
-	onEnter?: (event: DragEvent)=>void
-	onLeave?: (event: DragEvent)=>void
-	onDragOver?: (event: DragEvent)=>void
-	handleDrop?: (files: FileList)=>void
-}
-
-const DragAndDrop: React.FC<Props> = (props) => {
-	const dropRef = React.createRef<HTMLDivElement>()
-	const [hover,setHover] = useState(false)
-
-	function handleDragEnter(event: DragEvent) {
-		// console.debug("dragenter",event)
-		event.preventDefault()
-		event.stopPropagation()
-		setHover(true)
-		props.onEnter?.(event)
-	}
-
-	function handleDragLeave(event: DragEvent) {
-		// console.debug("dragleave",event)
-		event.preventDefault()
-		event.stopPropagation()
-		setHover(false)
-		props.onLeave?.(event)
-	}
-
-	function handleDragOver(event:DragEvent) {
-		event.preventDefault()
-		event.stopPropagation()
-		setHover(true)
-		props.onDragOver?.(event)
-	}
-
-	function handleDrop(event: DragEvent) {
-		console.debug("drop",event)
-		event.preventDefault()
-		event.stopPropagation()
-		setHover(false)
-		props.onDrop?.()
-		if (event.dataTransfer?.files && event.dataTransfer.files.length > 0) {
-			props.handleDrop?.(event.dataTransfer.files)
-			// event.dataTransfer.clearData()
-		}
-	}
-
-	useEffect(()=>{
-		if(dropRef.current){
-			console.debug("Add drag event listner")
-			dropRef.current.addEventListener("dragenter",handleDragEnter)
-			dropRef.current.addEventListener("dragleave",handleDragLeave)
-			dropRef.current.addEventListener("dragover",handleDragOver)
-			dropRef.current.addEventListener("drop",handleDrop)
-
-			return ()=>{
-				if (dropRef.current){
-					console.debug("Remove drag event listner")
-					dropRef.current.removeEventListener("dragenter",handleDragEnter)
-					dropRef.current.removeEventListener("dragleave",handleDragLeave)
-					dropRef.current.removeEventListener("dragover",handleDragOver)
-					dropRef.current.removeEventListener("drop",handleDrop)
-				}
-			}
-		}
-	},[])
-
-	return (
-		<div ref={dropRef} className={`${style.dragAndDrop} ${hover? style.active:""}`}>
-			{props.children}
-		</div>
-	)
-}
-
-export default DragAndDrop

src/components/FileBrowser.tsx

@@ -1,19 +1,40 @@
 import React from "react"
 import { useState } from "react"
 import { useContextMenu } from "react-contexify"
+import { RouteComponentProps } from "react-router-dom"
+import downloadFile from "../functions/downloadFile"
+import genDownloadLink from "../functions/genDownloadLink"
 import uploadFile from "../functions/uploadFile"
-import { useOpenDirQuery } from "../generated/graphql"
+import { useCopyMutation, useCreateDirMutation, useDeleteDirMutation, useDeleteFileMutation, useMoveDirMutation, useMoveMutation, useOpenDirQuery } from "../generated/graphql"
 import Breadcrum from "./Breadcrum"
-import DragAndDrop from "./DragAndDrop"
-import FileBrowserContextMenu, { CONTEXT_MENU_DIR, CONTEXT_MENU_FILE } from "./FileBrowserContextMenu"
-import FileBrowserElement from "./FileBrowserElement"
+import CreateDirButton from "./CreateDirButton"
+import GlobalDragAndDrop from "./GlobalDragAndDrop"
+import FileBrowserContextMenu, { Action, CONTEXT_MENU_DIR, CONTEXT_MENU_FILE } from "./FileBrowserContextMenu"
 import FileOpen from "./FileOpen"
+import FileUploadButton from "./FileUploadButton"
+import { ReactComponent as Spinner } from "./../assets/spinner.svg"
+import FileBrowserList from "./FileBrowserList"
+import MoreMenu from "./MoreMenu"
+import ObjID from "../types/ObjID"
+import cache from "../Cache"
 
-const FileBrowser: React.FC = () => {
-	const [path,setPath] = useState("/")
-	const [openFileId, setOpenFileId] = useState("")
+const FileBrowser: React.FC<RouteComponentProps> = (props) => {
+	const path = ObjID.fromURI(props.location.pathname)
+	const [openFileId, setOpenFileId] = useState<ObjID>()
 	const [showFile, setShowFile] = useState(false)
 
+	const [srcID,setSrcID] = useState<ObjID | null>()
+	const [pasteAction,setPasteAction] = useState<Action>()
+	const [editID,setEditID] = useState<ObjID>()
+	const [editEnable,setEditEnable] = useState(false)
+
+	const [deleteMutation] = useDeleteFileMutation()
+	const [copyMutation] = useCopyMutation()
+	const [moveMutation] = useMoveMutation()
+	const [createDirMutation] = useCreateDirMutation()
+	const [deleteDirMutation] = useDeleteDirMutation()
+	const [moveDirMutation] = useMoveDirMutation()
+
 	const { show: showFileContext } = useContextMenu({
 		id: CONTEXT_MENU_FILE,
 	})
@@ -22,9 +43,9 @@ const FileBrowser: React.FC = () => {
 		id: CONTEXT_MENU_DIR,
 	})
 
-	const { data, loading } = useOpenDirQuery({
+	const { data, loading, refetch: refetchDir } = useOpenDirQuery({
 		variables:{
-			path
+			path: path
 		}
 	})
 
@@ -32,84 +53,147 @@ const FileBrowser: React.FC = () => {
 		const wait: Promise<boolean>[] = []
 		for (let i = 0; i < files.length; i++) {
 			const file = files[i]
-			wait.push(uploadFile(file, path + file.name))
+			wait.push(uploadFile(file, new ObjID(path.bucket,path.key + file.name)))
 		}
 
 		await Promise.all(wait)
+		refetchDir()
 	}
 
-	function openFileContextMenu(e: React.MouseEvent, id: string) {
-		e.preventDefault()
-		showFileContext(e,{
-			props:{
-				id
+	async function onContextSelect(action:Action, id: ObjID) {
+		switch (action) {
+		case Action.FileDelete:
+			await deleteMutation({variables:{id}})
+			refetchDir()
+			break
+		case Action.FileCopy:
+		case Action.FileMove:
+		case Action.DirMove:
+			setSrcID(id)
+			setPasteAction(action)
+			break
+		case Action.FilePaste:
+			if (pasteAction === Action.FileCopy && srcID){
+				await copyMutation({variables:{src:srcID,dest:path}})
+				refetchDir()
 			}
-		})
-	}
 
-	function openDirContextMenu(e: React.MouseEvent, id: string) {
-		e.preventDefault()
-		showDirContext(e,{
-			props:{
-				id
+			if (pasteAction === Action.FileMove && srcID){
+				await moveMutation({variables:{src:srcID,dest:path}})
+				refetchDir()
+				setSrcID(null)
 			}
-		})
+
+			if (pasteAction === Action.DirMove && srcID){
+				await moveDirMutation({variables:{src:srcID,dest:path}})
+				refetchDir()
+
+				cache.evict({
+					id: `Directory:${srcID.toString()}` // TODO: check for a better way to generate cache ids
+				})
+				
+				setSrcID(null)
+			}
+
+			break
+		case Action.DirDelete:
+			await deleteDirMutation({variables:{path:id}})
+			refetchDir()
+			break
+		case Action.FileDownload:
+			downloadFile(genDownloadLink(id))
+			break
+		case Action.FileRename:
+			setEditID(id)
+			setEditEnable(true)
+			break
+		default:
+			break
+		}
 	}
 
 	return (
 		<div>
-			<FileBrowserContextMenu/ >
-			<DragAndDrop
+			<FileBrowserContextMenu
+				onSelect={onContextSelect}
+				pasteActive={!!srcID}
+			/>
+			<GlobalDragAndDrop
 				handleDrop={async (files)=>{
 					await handleDrop(files)
-				}}
-			>
-				<Breadcrum path={path} onDirClick={(newPath)=>{
-					setPath(newPath)
 				}}/>
-				<div>
-					{loading && 
-						<div className="loading loading-lg"></div> // TODO: center
-					}
-					<table className="table table-striped table-hover">
-						<thead>
-							<tr>
-								<th>Name</th>
-								<th>Last Modified</th>
-								<th>Size</th>
-							</tr>
-						</thead>
-						<tbody>
-
-							{ data?.directorys.map(v => (<FileBrowserElement
-								key={v?.id}
-								dir={v}
-								onClick={(dir)=>{
-									setPath(dir.id)
-								}}
-								onContextMenu={(e)=>{
-									openDirContextMenu(e,v.id)
-								}}
-							/>))}
-								
-							{ data?.files.map(v => (<FileBrowserElement 
-								key={v?.id}
-								file={v}
-								onClick={(file)=>{
-									setOpenFileId(file.id)
-									setShowFile(true)
-								}}
-								onContextMenu={(e)=>{
-									openFileContextMenu(e,v.id)
-								}}
-							/>))}
-						</tbody>
-					</table>
+			<div className="flex justify-between h-12">
+				<Breadcrum path={path} onDirClick={(newPath)=>{
+					props.history.push(newPath.toURI())
+				}}/>
+				<div className="ml-auto">
+					<CreateDirButton 
+						onPressed={async (dirName)=>{
+							const dirID = new ObjID(path.bucket,path.key + dirName + "/")
+							await createDirMutation({variables:{path: dirID}})
+							refetchDir()
+						}}
+					/>
 				</div>
-				{<FileOpen id={openFileId} show={showFile} onCloseClick={()=>{
-					setShowFile(false)
-				}} />}
-			</DragAndDrop>
+				<div>
+					<FileUploadButton 
+						onUpload={(files)=>handleDrop(files)}
+					/>
+				</div>
+				<div>
+					<MoreMenu />
+				</div>
+
+			</div>
+			<div>
+				<FileBrowserList 
+					directorys={data?.directories || []}
+					files={data?.files || []}
+
+					onDirClick={(e,path)=>{
+						props.history.push(path.toURI())
+					}}
+
+					onDirContext={(e,path)=>{
+						e.preventDefault()
+						showDirContext(e,{props:{id:path}})
+					}}
+
+					onFileClick={(e,id)=>{
+						setOpenFileId(id)
+						setShowFile(true)
+					}}
+
+					onFileContext={(e,id)=>{
+						e.preventDefault()
+						showFileContext(e,{props:{id}})
+					}}
+
+					editId={editID}
+					editEnable={editEnable}
+
+					onRenameDone={async (id,changed,newName)=>{
+						setEditEnable(false)
+						if (changed){
+							// TODO: maybe change the name on client so it seems more smooth rather then haveing it refetch
+							// TODO: input check & error handling
+							await moveMutation({variables:{
+								src:id,
+								dest: id.rename(newName)
+							}})
+							refetchDir()
+						}
+					}}
+				/>
+				{loading && 
+					<div className="flex justify-center mt-4">
+						<Spinner className="animate-spin h-6 w-6 dark:text-white"  />
+					</div>
+				}
+			</div>
+			<FileOpen id={openFileId} show={showFile} onCloseClick={()=>{
+				setShowFile(false)
+			}} />
 		</div>
 	)
 }

src/components/FileBrowserContextMenu.tsx

@@ -1,45 +1,49 @@
 import React from "react"
-import { Item, ItemParams, Menu, Separator, Submenu } from "react-contexify"
-
+import { Item, ItemParams, Menu, Separator } from "react-contexify"
+import ObjID from "../types/ObjID"
 
 export const CONTEXT_MENU_FILE = "CONTEXT_MENU_FILE"
 export const CONTEXT_MENU_DIR = "CONTEXT_MENU_DIR"
 
+export enum Action {
+	FileDelete,
+	FileCopy,
+	FilePaste,
+	FileMove,
+	FileDownload,
+	FileRename,
+	DirDelete,
+	DirMove,
+}
+
 interface Props {
-    onSelect?: (action: string, id: string)=>void
+    onSelect?: (action: Action, id: ObjID)=>void
+	pasteActive?: boolean
 }
 
 const FileBrowserContextMenu: React.FC<Props> = (props) => {
-
-	function onClick({ props: itemProps, data }:  ItemParams<{id:string}, string>) {
-		if (itemProps?.id && data){
+	function onClick({ props: itemProps, data }:  ItemParams<{id:ObjID}, Action>) {
+		if (itemProps?.id && data != null){
 			props.onSelect?.(data,itemProps.id) 
 		}
 	}
 
 	return (
 		<>
-			<Menu id={CONTEXT_MENU_FILE} animation={false}>
-				<Item onClick={onClick} data="item1" >Item 1</Item>
-				<Item onClick={onClick} data="item2" >Item 2</Item>
+			<Menu id={CONTEXT_MENU_FILE} animation={false} className="dark:bg-gray-400">
+				<Item onClick={onClick} data={Action.FileDelete} >Delete</Item>
+				<Item onClick={onClick} data={Action.FileCopy} >Copy</Item>
+				<Item onClick={onClick} data={Action.FileMove} >Move</Item>
+				<Item onClick={onClick} data={Action.FileRename} >Rename</Item>
+				<Item onClick={onClick} data={Action.FileDownload} >Download</Item>
 				<Separator />
-				<Item disabled>Disabled</Item>
-				<Separator />
-				<Submenu label="Foobar">
-					<Item onClick={onClick}  >Sub Item 1</Item>
-					<Item onClick={onClick}  >Sub Item 2</Item>
-				</Submenu>
+				<Item onClick={onClick} data={Action.FilePaste} disabled={!props.pasteActive}>Paste</Item>
 			</Menu>
-			<Menu id={CONTEXT_MENU_DIR} animation={false}>
-				<Item onClick={onClick}  >Item 1</Item>
-				<Item onClick={onClick}  >Item 2</Item>
+			<Menu id={CONTEXT_MENU_DIR} animation={false} className="dark:bg-gray-400">
+				<Item onClick={onClick} data={Action.DirDelete} >Delete</Item>
+				<Item onClick={onClick} data={Action.DirMove} >Move</Item>
 				<Separator />
-				<Item disabled>Disabled</Item>
-				<Separator />
-				<Submenu label="Foobar">
-					<Item onClick={onClick}  >Sub Item 1</Item>
-					<Item onClick={onClick}  >Sub Item 2</Item>
-				</Submenu>
+				<Item onClick={onClick} data={Action.FilePaste} disabled={!props.pasteActive}>Paste</Item>
 			</Menu>
 		</>
 	)

src/components/FileBrowserElement.tsx

@@ -1,39 +0,0 @@
-import React from "react"
-import PropTypes from "prop-types"
-import { Directory, File } from "../generated/graphql"
-import DirectoryComponent from "./DirectoryElement"
-import FileElement from "./FileElement"
-
-interface Props {
-    file?: File | null
-    dir?: Directory | null
-    onClick?: (data: File | Directory) => void
-	onContextMenu?: (e:React.MouseEvent) => void
-}
-
-const FileBrowserElement: React.FC<Props> = (props) => {
-	return (
-		<tr 
-			onClick={()=>{
-				if(props.file){
-					props.onClick?.(props.file)
-				}else if(props.dir){
-					props.onClick?.(props.dir)
-				}
-			}}
-
-			onContextMenu={(e)=>props.onContextMenu?.(e)}
-			
-		>
-			{(props.file) ? <FileElement file={props.file}/>:(props.dir)?<DirectoryComponent dir={props.dir} />:<></>}
-		</tr>
-	)
-}
-
-FileBrowserElement.propTypes = {
-	dir: PropTypes.any,
-	file: PropTypes.any,
-	onClick: PropTypes.func
-}
-
-export default FileBrowserElement

src/components/FileBrowserList.tsx

@@ -0,0 +1,80 @@
+import React from "react"
+import { FaRegFileAlt } from "react-icons/fa"
+import { MdFolderOpen } from "react-icons/md"
+import dateFormat from "../functions/dateFomat"
+import sizeToReadable from "../functions/sizeToReadable"
+import { Directory, File } from "../generated/graphql"
+import ObjID from "../types/ObjID"
+import Renameable from "./Renameable"
+import Table, { Data, Row } from "./Table"
+
+interface Props{
+    directorys: Directory[]
+    files: File[]
+    
+	onFileContext?: (event: React.MouseEvent, id: ObjID)=>void
+    onDirContext?: (event: React.MouseEvent, path: ObjID)=>void
+    onFileClick?: (event: React.MouseEvent,id: ObjID)=>void
+    onDirClick?: (event: React.MouseEvent,path: ObjID)=>void
+
+	editId?:  ObjID
+	editEnable: boolean
+	onRenameDone?: (id: ObjID, changed: boolean, newName: string)=>void
+}
+
+const FileBrowserList: React.FC<Props> = ({
+	files,directorys,onDirClick,onDirContext,onFileClick,onFileContext,onRenameDone,editId,editEnable
+}) => {
+
+	const tableData: Data = {
+		headers: [
+			{name: "Name"},
+			{name: "Last Modified"},
+			{name: "Size"}
+		],
+		body:[
+			...directorys.map((e):Row<Directory>=>{return {
+				cells:[
+					{
+						name:e.name || "",
+						component: <div>
+							<MdFolderOpen className="inline" />
+							<Renameable
+								text={e.name || ""}
+								edit={editEnable && (e.id === editId)}
+								onRename={(newName)=>{e.name != newName?onRenameDone?.(e.id,true,newName):onRenameDone?.(e.id,false,newName)}}
+								onCancleRename={()=>onRenameDone?.(e.id,false,"")}
+							/>
+						</div>
+					}],
+				data: e,
+				onClick: ((e,data)=>onDirClick?.(e,data.id)),
+				onContextMenu: ((e,data)=>onDirContext?.(e,data.id))
+			}}),
+			...files.map((e):Row<File>=>{return {
+				cells:[
+					{
+						name:e.name || "",
+						component: <div>
+							<FaRegFileAlt className="inline" />
+							<Renameable
+								text={e.name || ""}
+								edit={editEnable && (e.id === editId)}
+								onRename={(newName)=>{e.name != newName?onRenameDone?.(e.id,true,newName):onRenameDone?.(e.id,false,newName)}}
+								onCancleRename={()=>onRenameDone?.(e.id,false,"")}
+							/>
+						</div>
+					},
+					{name:dateFormat(e.lastModified)},{name:sizeToReadable(e.size)}],
+				data: e,
+				onClick: ((e,data)=>onFileClick?.(e,data.id)),
+				onContextMenu: ((e,data)=>onFileContext?.(e,data.id))
+			}}),
+		],
+		
+	}
+
+	return <Table data={tableData} />
+}
+
+export default FileBrowserList

src/components/FileElement.tsx

@@ -1,32 +0,0 @@
-import React from "react"
-import PropTypes from "prop-types"
-import { File } from "../generated/graphql"
-import sizeToReadable from "../functions/sizeToReadable"
-import dateFormat from "../functions/dateFomat"
-
-interface Props {
-    file: File
-}
-
-const FileElement: React.FC<Props> = (props) => {
-	return (
-		<>
-			<td>
-				📄 {props.file.name}
-			</td>
-			<td>
-				{dateFormat(props.file.lastModified)}
-			</td>
-			<td>
-				{sizeToReadable(props.file.size)}
-			</td>
-
-		</>
-	)
-}
-
-FileElement.propTypes = {
-	file: PropTypes.any.isRequired
-}
-
-export default FileElement

src/components/FileOpen.tsx

@@ -1,19 +1,18 @@
 import React from "react"
-import PropTypes from "prop-types"
 import { useGetFileQuery } from "../generated/graphql"
 import ImageOpener from "./ImageOpener"
 import TextOpener from "./TextOpener"
 import Modal from "./Modal"
 import AudioOpener from "./AudioOpener"
+import ObjID from "../types/ObjID"
 
 interface Props {
-    id: string
+    id?: ObjID
 	show: boolean
 	onCloseClick?: ()=>void
 }
 
 const FileOpen: React.FC<Props> = (props) => {
-
 	if (!props.id) {
 		return <></>
 	}
@@ -66,10 +65,4 @@ const FileOpen: React.FC<Props> = (props) => {
 	)
 }
 
-FileOpen.propTypes = {
-	id: PropTypes.string.isRequired,
-	show: PropTypes.bool.isRequired,
-	onCloseClick: PropTypes.func
-}
-
 export default FileOpen

src/components/FileUploadButton.tsx

@@ -0,0 +1,26 @@
+import React from "react"
+import { useRef } from "react"
+import { MdFileUpload } from "react-icons/md"
+
+interface Props {
+    onUpload?: (files: FileList)=>void
+}
+
+const FileUploadButton: React.FC<Props> = (props) => {
+	const inputRef = useRef<HTMLInputElement>(null)
+    
+	return ( 
+		<>
+			<button onClick={()=>inputRef.current?.click()} >
+				<MdFileUpload size="40"/>
+			</button>
+			<input type="file" multiple className="hidden" ref={inputRef} onInput={()=>{
+				if (inputRef.current && inputRef.current.files){
+					props.onUpload?.(inputRef.current.files)
+				}
+			}}/>
+		</>
+	)
+}
+
+export default FileUploadButton

src/components/GlobalDragAndDrop.tsx

@@ -0,0 +1,69 @@
+import React from "react"
+import { useState } from "react"
+import { useEffect } from "react"
+
+interface Props {
+	onDrop?: ()=>void
+	onEnter?: (event: DragEvent)=>void
+	onLeave?: (event: DragEvent)=>void
+	onDragOver?: (event: DragEvent)=>void
+	handleDrop?: (files: FileList)=>void
+}
+
+const GlobalDragAndDrop: React.FC<Props> = (props) => {
+	const [hover,setHover] = useState(false)
+
+	function handleDragEnter(event: DragEvent) {
+		event.preventDefault()
+		event.stopPropagation()
+		setHover(true)
+		props.onEnter?.(event)
+	}
+
+	function handleDragLeave(event: DragEvent) {
+		event.preventDefault()
+		event.stopPropagation()
+		setHover(false)
+		props.onLeave?.(event)
+	}
+
+	function handleDragOver(event:DragEvent) {
+		event.preventDefault()
+		event.stopPropagation()
+		setHover(true)
+		props.onDragOver?.(event)
+	}
+
+	function handleDrop(event: DragEvent) {
+		event.preventDefault()
+		event.stopPropagation()
+		setHover(false)
+		props.onDrop?.()
+		if (event.dataTransfer?.files && event.dataTransfer.files.length > 0) {
+			props.handleDrop?.(event.dataTransfer.files)
+		}
+	}
+
+	useEffect(()=>{
+		document.addEventListener("dragenter",handleDragEnter)
+		document.addEventListener("dragleave",handleDragLeave)
+		document.addEventListener("dragover",handleDragOver)
+		document.addEventListener("drop",handleDrop)
+
+		return ()=>{
+			document.removeEventListener("dragenter",handleDragEnter)
+			document.removeEventListener("dragleave",handleDragLeave)
+			document.removeEventListener("dragover",handleDragOver)
+			document.removeEventListener("drop",handleDrop)
+			
+		}
+	
+	},[])
+
+	return (
+		<div className={`fixed top-0 left-0 w-full h-full z-10 pointer-events-none
+				${hover? "border-dashed border-gray-600 border-4":""}`} />
+	)
+}
+
+export default GlobalDragAndDrop

src/components/ImageOpener.tsx

@@ -1,17 +1,11 @@
 import React from "react"
-import PropTypes from "prop-types"
 import genDownloadLink from "../functions/genDownloadLink"
-import style from "./../App.module.scss"
 import { FileOpenerProps } from "../types/FileOpenerProps"
 
 const ImageOpener: React.FC<FileOpenerProps> = (props) => {
 	return (
-		<img className={`img-responsive img-fit-cover ${style.imageOpenerImage}`} src={genDownloadLink(props.file.id)}/>
+		<img src={genDownloadLink(props.file.id)}/>
 	)
 }
 
-ImageOpener.propTypes = {
-	file: PropTypes.any.isRequired
-}
-
 export default ImageOpener

src/components/Login.tsx

@@ -0,0 +1,85 @@
+import React from "react"
+import { useState } from "react"
+import { useHistory } from "react-router-dom"
+import { useLoginMutation } from "../generated/graphql"
+
+interface Props {
+	onLogin?: ()=>void
+}
+
+const Login: React.FC<Props> = (props) => {
+
+	const history = useHistory()
+
+	const [username,setUsername] = useState("")
+	const [password,setPassword] = useState("")
+
+	const [loginFailed,setLoginFailed] = useState(false)
+
+	const [loginMutation] = useLoginMutation()
+
+	return (
+		<div className="flex justify-center h-screen items-center">
+			<div>
+				<form onSubmit={async (e)=>{
+					e.preventDefault()
+
+					const result =  await loginMutation({
+						variables:{
+							username: username,
+							password: password
+						}
+					})
+					
+					const successful = result.data?.login.successful
+
+					if (!successful){
+						setLoginFailed(true)
+						return
+					}
+
+					const token = result.data?.login.token
+
+					if (token){
+						const response = await fetch("/api/cookie",{
+							method:"POST",
+							body: token
+						})
+
+						if (response.ok){
+							// Login successful
+							props.onLogin?.()
+							history.push("/f/")
+						}else{
+							setLoginFailed(true)
+						}
+					}
+				}} >
+					{loginFailed && 
+						<div className="text-red-600 mb-4" >
+							<div className="font-bold" >
+								Login failed
+							</div>
+							<div>
+								Wrong username or password
+							</div>
+						</div>
+					}
+					<input type="text" placeholder="Username"
+						className="block my-2 text-input"
+						required
+						onChange={(e)=>setUsername(e.target.value)}
+					/>
+					<input type="password" placeholder="Password" 
+						className="block my-2 text-input"
+						required
+						onChange={(e)=>setPassword(e.target.value)}
+					/>
+					<button className="block my-2 w-full" >Login</button>
+				</form>
+			</div>
+		</div>
+	)
+}
+
+export default Login

src/components/Modal.tsx

@@ -1,5 +1,4 @@
 import React from "react"
-import style from "./../style/Modal.module.scss"
 
 interface Props {
 	show: boolean
@@ -8,10 +7,14 @@ interface Props {
 
 const Modal: React.FC<Props> = (props) => {
 	return (
-		<div className={`${style.overlay} ${!props.show && style.hidden}`} onClick={()=>{
-			props.onCloseClick?.()
-		}}>
-			<div className={style.body} onClick={(e)=>{
+		<div 
+			className={`${!props.show?"hidden":"" } 
+			fixed z-10 left-0 top-0 w-full h-full 
+			flex justify-center items-center bg-white bg-opacity-80  dark:bg-gray-900 dark:bg-opacity-80`}
+			onClick={()=>{
+				props.onCloseClick?.()
+			}}>
+			<div className="bg-white dark:bg-gray-800 mx-auto p-5 border-2 dark:border-gray-800 w-10/12 overflow-hidden max-h-full" onClick={(e)=>{
 				e.stopPropagation()
 			}}>
 				{props.children}

src/components/MoreMenu.tsx

@@ -0,0 +1,56 @@
+import React from "react"
+import { useState } from "react"
+import { MdMoreVert } from "react-icons/md"
+import { useHistory } from "react-router-dom"
+import { useOutsideClickRef } from "rooks"
+import logout from "../functions/logout"
+import MoreMenuEntry from "./MoreMenuEntry"
+
+const MoreMenu: React.FC = () => {
+	const [showMenu,setShowMenu] = useState(false)
+	const history = useHistory()
+
+	const [outsideRef] = useOutsideClickRef(()=>{
+		setShowMenu(false)
+	})
+
+	return <>
+		<button
+			onClick={()=>{
+				setShowMenu(!showMenu)
+			}}
+		>
+			<MdMoreVert size="40"/>
+		</button>
+		<div className="" ref={outsideRef} >
+			{
+				showMenu && (
+					<div className="absolute -ml-32 bg-white dark:bg-gray-800 p-2 border-2 dark:border-gray-900">
+						{/* TODO: there has got to be a better way than "w-36" */}
+						<div className="w-36">
+							<ul>
+								<MoreMenuEntry>
+									Menu 1
+								</MoreMenuEntry>
+								<MoreMenuEntry>
+									Menu 2
+								</MoreMenuEntry>
+								<MoreMenuEntry
+									onclick={async ()=>{
+										setShowMenu(false)
+										await logout()
+										history.push("/login")
+									}}
+								>
+									Logout
+								</MoreMenuEntry>
+							</ul>
+						</div>
+					</div>
+				)
+			}
+		</div>
+	</>
+}
+
+export default MoreMenu

src/components/MoreMenuEntry.tsx

@@ -0,0 +1,18 @@
+import React from "react"
+
+interface Props {
+	onclick?: ()=>void
+}
+
+const MoreMenuEntry: React.FC<Props> = (props) => {
+	return (
+		<li 
+			className="py-2 px-2 hover:bg-gray-100 dark:hover:bg-gray-900 cursor-pointer text-xl"
+			onClick={props.onclick}
+		>
+			{props.children}
+		</li>
+	)
+}
+
+export default MoreMenuEntry

src/components/NotFound.tsx

@@ -0,0 +1,18 @@
+import React from "react"
+import { NavLink, RouteComponentProps } from "react-router-dom"
+
+const NotFound: React.FC<RouteComponentProps> = (props) => {
+	return <div className="dark:text-gray-300">
+		<div className="flex justify-center">
+			<h1 className="text-9xl " >404</h1>
+		</div>
+		<div className="flex justify-center text-4xl mb-3">
+            &quot;{props.location.pathname}&quot; not found.
+		</div>
+		<div className="flex justify-center text-4xl underline">
+			<NavLink to="/">Go back</NavLink>
+		</div>
+	</div>
+}
+
+export default NotFound

src/components/Renameable.tsx

@@ -0,0 +1,51 @@
+import React from "react"
+import { useEffect } from "react"
+import { useRef } from "react"
+import { useState } from "react"
+
+interface Props {
+    text: string
+    edit: boolean
+    onRename?: (newName: string)=>void
+	onCancleRename?: ()=>void
+}
+
+const Renameable: React.FC<Props> = (props) => {
+	const [inputValue,setinputValue] = useState(props.text)
+	const inputRef = useRef<HTMLInputElement>(null)
+
+	useEffect(()=>{
+		if (props.edit){
+			const i = inputValue.lastIndexOf(".")
+			inputRef.current?.select()
+			inputRef.current?.setSelectionRange(0,i == -1?inputValue.length:i)
+		}else{
+			setinputValue(props.text)
+		}
+	},[props.edit])
+
+	return (
+		<>
+			{props.edit && <form className="inline" onSubmit={(e)=>{
+				e.preventDefault()
+				props.onRename?.(inputValue)
+			}}>
+				<input
+					className="bg-transparent dark:text-gray-300 outline-none inline"
+					type="text"
+					ref={inputRef}
+					value={inputValue}
+					onClick={(e)=>e.stopPropagation()}
+					onChange={(e)=>{setinputValue(e.target.value)}}
+					onBlur={props.onCancleRename}
+				/></form>
+				
+			}
+			{!props.edit &&
+                <div className="inline">{props.text}</div>
+			}
+		</>
+	)
+}
+
+export default Renameable

src/components/Table.tsx

@@ -0,0 +1,61 @@
+import React from "react"
+
+export interface Header {
+	name: string
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export interface Row<T = any> {
+	cells: Cell[]
+	data?: T,
+	// TODO: maybe there is some TS magic to apply here so that rowData has the same type as data without using generics
+	onClick?: (e: React.MouseEvent, rowData: T ) => void 
+	onContextMenu?: (e: React.MouseEvent, data: T)=>void
+}
+
+export interface Cell {
+	name: string
+	component?: React.ReactNode
+}
+
+export interface Data {
+	headers: Header[]
+	body: Row[]
+}
+
+interface Props {
+	data: Data
+}
+
+const Table: React.FC<Props> = ({data:{headers,body}}) => {
+	const numCol = headers.length
+	return (
+		<table className="w-full">
+			<thead className="border-b-2 dark:border-gray-900">
+				<tr>
+					{headers.map((e,i)=><th key={i} className="text-left">{e.name}</th>)}
+				</tr>
+			</thead>
+			<tbody className="divide-y dark:divide-gray-900">
+				{body.map((row,rowIndex)=>
+					<tr 
+						className="hover:bg-gray-100 dark:hover:bg-gray-900 text-lg"
+						key={rowIndex}
+						onClick={e=>row.onClick?.(e,row.data)}
+						onContextMenu={e=>row.onContextMenu?.(e,row.data)}
+					>
+						{(row.cells.length >= numCol?
+							row.cells:
+							row.cells.concat(Array(numCol - row.cells.length).fill({name:""}))) // Pad array to fit numCol
+							.map((cell,cellIndex)=>
+								<td key={cellIndex}>
+									{cell.component || cell.name}
+								</td>
+							)}
+					</tr>)}
+			</tbody>
+		</table>
+	)
+}
+
+export default Table

src/components/TextOpener.tsx

@@ -1,5 +1,4 @@
 import React from "react"
-import PropTypes from "prop-types"
 import { FileOpenerProps } from "../types/FileOpenerProps"
 import { useEffect } from "react"
 import { useState } from "react"
@@ -23,8 +22,4 @@ const TextOpener: React.FC<FileOpenerProps> = (props) => {
 	)
 }
 
-TextOpener.propTypes = {
-	file: PropTypes.any.isRequired,
-}
-
 export default TextOpener

src/functions/downloadFile.ts

@@ -0,0 +1,9 @@
+function downloadFile(uri:string): void {
+	const link = document.createElement("a")
+	link.download = ""
+	link.href = uri
+	link.click()
+	link.remove()
+}
+
+export default downloadFile

src/functions/genDownloadLink.ts

@@ -1,5 +1,7 @@
-function genDownloadLink(id:string): string {
-	return `/api/file?id=${encodeURIComponent(id)}`
+import ObjID from "../types/ObjID"
+
+function genDownloadLink(id:ObjID): string {
+	return `/api/file?id=${encodeURIComponent(id.toString())}`
 }
 
 export default genDownloadLink

src/functions/logout.ts

@@ -0,0 +1,7 @@
+async function logout(): Promise<void> {
+	await fetch("/api/logout",{
+		method:"POST"
+	})
+}
+
+export default logout

src/functions/normalizeDirPath.ts

@@ -0,0 +1,5 @@
+function normalizeDirPath(path:string): string {
+	return path.endsWith("/")?path: (path + "/")
+}
+
+export default normalizeDirPath

src/functions/sizeToReadable.ts

@@ -1,6 +1,9 @@
 function sizeToReadable(size: number): string {
+	if (size == 0)
+		return "0 B"
 	const i = Math.floor(Math.log(size) / Math.log(1024))
-	return (size / Math.pow(1024, i)).toFixed(1) + " " + ["B", "kB", "MB", "GB", "TB"][i]
+	const num = (size / Math.pow(1024, i))
+	return (num.toFixed(1).endsWith("0")?num.toFixed(0):num.toFixed(1)) + " " + ["B", "kB", "MB", "GB", "TB"][i]
 
 }
 

src/functions/uploadFile.ts

@@ -1,9 +1,7 @@
-async function uploadFile(file:File,id: string): Promise<boolean> {
+import ObjID from "../types/ObjID"
 
-	console.debug(file)
-
-
-	const res = await fetch(`/api/file?${new URLSearchParams({id:id}).toString()}`,{
+async function uploadFile(file:File,id: ObjID): Promise<boolean> {
+	const res = await fetch(`/api/file?${new URLSearchParams({id:id.toString()}).toString()}`,{
 		method: "POST",
 		headers: {
 			"Content-Type": file.type

src/generated/graphql.tsx

@@ -1,3 +1,4 @@
+import ObjID from "./../types/ObjID"
 import { gql } from "@apollo/client"
 import * as Apollo from "@apollo/client"
 export type Maybe<T> = T | null;
@@ -14,6 +15,11 @@ export type Scalars = {
   Float: number;
   /** DateTime is a DateTime in ISO 8601 format */
   DateTime: string;
+  /**
+   * String representing a bucket, key and version combination.
+   * 			Looks like this: "bucketName:/name/of/key" or "bucketName@version:/name/of/key"
+   */
+  objID: ObjID;
 };
 
 
@@ -22,7 +28,7 @@ export type Directory = {
   __typename?: "Directory";
   directorys?: Maybe<Array<Maybe<Directory>>>;
   files?: Maybe<Array<Maybe<File>>>;
-  id: Scalars["ID"];
+  id: Scalars["objID"];
   name?: Maybe<Scalars["String"]>;
   parent?: Maybe<Directory>;
 };
@@ -33,61 +39,148 @@ export type File = {
   contentType?: Maybe<Scalars["String"]>;
   etag?: Maybe<Scalars["String"]>;
   /** The uniqe ID of the file. Represents the path and the s3 key. */
-  id: Scalars["ID"];
+  id: Scalars["objID"];
   lastModified?: Maybe<Scalars["DateTime"]>;
   name?: Maybe<Scalars["String"]>;
   parent?: Maybe<Directory>;
   size: Scalars["Int"];
 };
 
+/** Result of a login */
+export type LoginResut = {
+  __typename?: "LoginResut";
+  /** If the login was successful */
+  successful: Scalars["Boolean"];
+  /** JWT token if login was successful */
+  token?: Maybe<Scalars["String"]>;
+};
+
 export type RootMutation = {
   __typename?: "RootMutation";
   copy?: Maybe<File>;
+  createDir: Directory;
   delete?: Maybe<Scalars["String"]>;
-  move?: Maybe<File>;
+  deleteDir: Scalars["String"];
+  login: LoginResut;
+  move: File;
+  moveDir: Array<Maybe<File>>;
 };
 
 
 export type RootMutationCopyArgs = {
-  src: Scalars["ID"];
-  dest: Scalars["ID"];
+  src: Scalars["objID"];
+  dest: Scalars["objID"];
+};
+
+
+export type RootMutationCreateDirArgs = {
+  path: Scalars["objID"];
 };
 
 
 export type RootMutationDeleteArgs = {
-  id: Scalars["ID"];
+  id: Scalars["objID"];
+};
+
+
+export type RootMutationDeleteDirArgs = {
+  path: Scalars["objID"];
+};
+
+
+export type RootMutationLoginArgs = {
+  username: Scalars["String"];
+  password: Scalars["String"];
 };
 
 
 export type RootMutationMoveArgs = {
-  src: Scalars["ID"];
-  dest: Scalars["ID"];
+  src: Scalars["objID"];
+  dest: Scalars["objID"];
+};
+
+
+export type RootMutationMoveDirArgs = {
+  src: Scalars["objID"];
+  dest: Scalars["objID"];
 };
 
 export type RootQuery = {
   __typename?: "RootQuery";
-  directorys: Array<Directory>;
+  /** True if the user is authorized */
+  authorized: Scalars["Boolean"];
+  /** List available buckets */
+  buckets: Array<Maybe<Scalars["String"]>>;
+  directories: Array<Directory>;
   file?: Maybe<File>;
   files: Array<File>;
 };
 
 
-export type RootQueryDirectorysArgs = {
-  path: Scalars["String"];
+export type RootQueryDirectoriesArgs = {
+  path: Scalars["objID"];
 };
 
 
 export type RootQueryFileArgs = {
-  id: Scalars["ID"];
+  id: Scalars["objID"];
 };
 
 
 export type RootQueryFilesArgs = {
-  path: Scalars["String"];
+  path: Scalars["objID"];
 };
 
+
+export type CopyMutationVariables = Exact<{
+  src: Scalars["objID"];
+  dest: Scalars["objID"];
+}>;
+
+
+export type CopyMutation = (
+  { __typename?: "RootMutation" }
+  & { copy?: Maybe<(
+    { __typename?: "File" }
+    & Pick<File, "id">
+  )> }
+);
+
+export type CreateDirMutationVariables = Exact<{
+  path: Scalars["objID"];
+}>;
+
+
+export type CreateDirMutation = (
+  { __typename?: "RootMutation" }
+  & { createDir: (
+    { __typename?: "Directory" }
+    & Pick<Directory, "id">
+  ) }
+);
+
+export type DeleteDirMutationVariables = Exact<{
+  path: Scalars["objID"];
+}>;
+
+
+export type DeleteDirMutation = (
+  { __typename?: "RootMutation" }
+  & Pick<RootMutation, "deleteDir">
+);
+
+export type DeleteFileMutationVariables = Exact<{
+  id: Scalars["objID"];
+}>;
+
+
+export type DeleteFileMutation = (
+  { __typename?: "RootMutation" }
+  & Pick<RootMutation, "delete">
+);
+
 export type GetFileQueryVariables = Exact<{
-  id: Scalars["ID"];
+  id: Scalars["objID"];
 }>;
 
 
@@ -99,8 +192,66 @@ export type GetFileQuery = (
   )> }
 );
 
+export type IsAuthQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type IsAuthQuery = (
+  { __typename?: "RootQuery" }
+  & Pick<RootQuery, "authorized">
+);
+
+export type ListBucktesQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type ListBucktesQuery = (
+  { __typename?: "RootQuery" }
+  & Pick<RootQuery, "buckets">
+);
+
+export type LoginMutationVariables = Exact<{
+  username: Scalars["String"];
+  password: Scalars["String"];
+}>;
+
+
+export type LoginMutation = (
+  { __typename?: "RootMutation" }
+  & { login: (
+    { __typename?: "LoginResut" }
+    & Pick<LoginResut, "token" | "successful">
+  ) }
+);
+
+export type MoveMutationVariables = Exact<{
+  src: Scalars["objID"];
+  dest: Scalars["objID"];
+}>;
+
+
+export type MoveMutation = (
+  { __typename?: "RootMutation" }
+  & { move: (
+    { __typename?: "File" }
+    & Pick<File, "id">
+  ) }
+);
+
+export type MoveDirMutationVariables = Exact<{
+  src: Scalars["objID"];
+  dest: Scalars["objID"];
+}>;
+
+
+export type MoveDirMutation = (
+  { __typename?: "RootMutation" }
+  & { moveDir: Array<Maybe<(
+    { __typename?: "File" }
+    & Pick<File, "id">
+  )>> }
+);
+
 export type OpenDirQueryVariables = Exact<{
-  path: Scalars["String"];
+  path: Scalars["objID"];
 }>;
 
 
@@ -109,15 +260,144 @@ export type OpenDirQuery = (
   & { files: Array<(
     { __typename?: "File" }
     & Pick<File, "id" | "name" | "size" | "lastModified">
-  )>, directorys: Array<(
+  )>, directories: Array<(
     { __typename?: "Directory" }
     & Pick<Directory, "id" | "name">
   )> }
 );
 
 
+export const CopyDocument = gql`
+    mutation copy($src: objID!, $dest: objID!) {
+  copy(src: $src, dest: $dest) {
+    id
+  }
+}
+    `
+export type CopyMutationFn = Apollo.MutationFunction<CopyMutation, CopyMutationVariables>;
+
+/**
+ * __useCopyMutation__
+ *
+ * To run a mutation, you first call `useCopyMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useCopyMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [copyMutation, { data, loading, error }] = useCopyMutation({
+ *   variables: {
+ *      src: // value for 'src'
+ *      dest: // value for 'dest'
+ *   },
+ * });
+ */
+export function useCopyMutation(baseOptions?: Apollo.MutationHookOptions<CopyMutation, CopyMutationVariables>) {
+	const options = {...defaultOptions, ...baseOptions}
+	return Apollo.useMutation<CopyMutation, CopyMutationVariables>(CopyDocument, options)
+}
+export type CopyMutationHookResult = ReturnType<typeof useCopyMutation>;
+export type CopyMutationResult = Apollo.MutationResult<CopyMutation>;
+export type CopyMutationOptions = Apollo.BaseMutationOptions<CopyMutation, CopyMutationVariables>;
+export const CreateDirDocument = gql`
+    mutation createDir($path: objID!) {
+  createDir(path: $path) {
+    id
+  }
+}
+    `
+export type CreateDirMutationFn = Apollo.MutationFunction<CreateDirMutation, CreateDirMutationVariables>;
+
+/**
+ * __useCreateDirMutation__
+ *
+ * To run a mutation, you first call `useCreateDirMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useCreateDirMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [createDirMutation, { data, loading, error }] = useCreateDirMutation({
+ *   variables: {
+ *      path: // value for 'path'
+ *   },
+ * });
+ */
+export function useCreateDirMutation(baseOptions?: Apollo.MutationHookOptions<CreateDirMutation, CreateDirMutationVariables>) {
+	const options = {...defaultOptions, ...baseOptions}
+	return Apollo.useMutation<CreateDirMutation, CreateDirMutationVariables>(CreateDirDocument, options)
+}
+export type CreateDirMutationHookResult = ReturnType<typeof useCreateDirMutation>;
+export type CreateDirMutationResult = Apollo.MutationResult<CreateDirMutation>;
+export type CreateDirMutationOptions = Apollo.BaseMutationOptions<CreateDirMutation, CreateDirMutationVariables>;
+export const DeleteDirDocument = gql`
+    mutation deleteDir($path: objID!) {
+  deleteDir(path: $path)
+}
+    `
+export type DeleteDirMutationFn = Apollo.MutationFunction<DeleteDirMutation, DeleteDirMutationVariables>;
+
+/**
+ * __useDeleteDirMutation__
+ *
+ * To run a mutation, you first call `useDeleteDirMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useDeleteDirMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [deleteDirMutation, { data, loading, error }] = useDeleteDirMutation({
+ *   variables: {
+ *      path: // value for 'path'
+ *   },
+ * });
+ */
+export function useDeleteDirMutation(baseOptions?: Apollo.MutationHookOptions<DeleteDirMutation, DeleteDirMutationVariables>) {
+	const options = {...defaultOptions, ...baseOptions}
+	return Apollo.useMutation<DeleteDirMutation, DeleteDirMutationVariables>(DeleteDirDocument, options)
+}
+export type DeleteDirMutationHookResult = ReturnType<typeof useDeleteDirMutation>;
+export type DeleteDirMutationResult = Apollo.MutationResult<DeleteDirMutation>;
+export type DeleteDirMutationOptions = Apollo.BaseMutationOptions<DeleteDirMutation, DeleteDirMutationVariables>;
+export const DeleteFileDocument = gql`
+    mutation deleteFile($id: objID!) {
+  delete(id: $id)
+}
+    `
+export type DeleteFileMutationFn = Apollo.MutationFunction<DeleteFileMutation, DeleteFileMutationVariables>;
+
+/**
+ * __useDeleteFileMutation__
+ *
+ * To run a mutation, you first call `useDeleteFileMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useDeleteFileMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [deleteFileMutation, { data, loading, error }] = useDeleteFileMutation({
+ *   variables: {
+ *      id: // value for 'id'
+ *   },
+ * });
+ */
+export function useDeleteFileMutation(baseOptions?: Apollo.MutationHookOptions<DeleteFileMutation, DeleteFileMutationVariables>) {
+	const options = {...defaultOptions, ...baseOptions}
+	return Apollo.useMutation<DeleteFileMutation, DeleteFileMutationVariables>(DeleteFileDocument, options)
+}
+export type DeleteFileMutationHookResult = ReturnType<typeof useDeleteFileMutation>;
+export type DeleteFileMutationResult = Apollo.MutationResult<DeleteFileMutation>;
+export type DeleteFileMutationOptions = Apollo.BaseMutationOptions<DeleteFileMutation, DeleteFileMutationVariables>;
 export const GetFileDocument = gql`
-    query getFile($id: ID!) {
+    query getFile($id: objID!) {
   file(id: $id) {
     id
     name
@@ -155,15 +435,182 @@ export function useGetFileLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<Ge
 export type GetFileQueryHookResult = ReturnType<typeof useGetFileQuery>;
 export type GetFileLazyQueryHookResult = ReturnType<typeof useGetFileLazyQuery>;
 export type GetFileQueryResult = Apollo.QueryResult<GetFileQuery, GetFileQueryVariables>;
+export const IsAuthDocument = gql`
+    query isAuth {
+  authorized
+}
+    `
+
+/**
+ * __useIsAuthQuery__
+ *
+ * To run a query within a React component, call `useIsAuthQuery` and pass it any options that fit your needs.
+ * When your component renders, `useIsAuthQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useIsAuthQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useIsAuthQuery(baseOptions?: Apollo.QueryHookOptions<IsAuthQuery, IsAuthQueryVariables>) {
+	const options = {...defaultOptions, ...baseOptions}
+	return Apollo.useQuery<IsAuthQuery, IsAuthQueryVariables>(IsAuthDocument, options)
+}
+export function useIsAuthLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<IsAuthQuery, IsAuthQueryVariables>) {
+	const options = {...defaultOptions, ...baseOptions}
+	return Apollo.useLazyQuery<IsAuthQuery, IsAuthQueryVariables>(IsAuthDocument, options)
+}
+export type IsAuthQueryHookResult = ReturnType<typeof useIsAuthQuery>;
+export type IsAuthLazyQueryHookResult = ReturnType<typeof useIsAuthLazyQuery>;
+export type IsAuthQueryResult = Apollo.QueryResult<IsAuthQuery, IsAuthQueryVariables>;
+export const ListBucktesDocument = gql`
+    query listBucktes {
+  buckets
+}
+    `
+
+/**
+ * __useListBucktesQuery__
+ *
+ * To run a query within a React component, call `useListBucktesQuery` and pass it any options that fit your needs.
+ * When your component renders, `useListBucktesQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useListBucktesQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useListBucktesQuery(baseOptions?: Apollo.QueryHookOptions<ListBucktesQuery, ListBucktesQueryVariables>) {
+	const options = {...defaultOptions, ...baseOptions}
+	return Apollo.useQuery<ListBucktesQuery, ListBucktesQueryVariables>(ListBucktesDocument, options)
+}
+export function useListBucktesLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ListBucktesQuery, ListBucktesQueryVariables>) {
+	const options = {...defaultOptions, ...baseOptions}
+	return Apollo.useLazyQuery<ListBucktesQuery, ListBucktesQueryVariables>(ListBucktesDocument, options)
+}
+export type ListBucktesQueryHookResult = ReturnType<typeof useListBucktesQuery>;
+export type ListBucktesLazyQueryHookResult = ReturnType<typeof useListBucktesLazyQuery>;
+export type ListBucktesQueryResult = Apollo.QueryResult<ListBucktesQuery, ListBucktesQueryVariables>;
+export const LoginDocument = gql`
+    mutation Login($username: String!, $password: String!) {
+  login(username: $username, password: $password) {
+    token
+    successful
+  }
+}
+    `
+export type LoginMutationFn = Apollo.MutationFunction<LoginMutation, LoginMutationVariables>;
+
+/**
+ * __useLoginMutation__
+ *
+ * To run a mutation, you first call `useLoginMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useLoginMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [loginMutation, { data, loading, error }] = useLoginMutation({
+ *   variables: {
+ *      username: // value for 'username'
+ *      password: // value for 'password'
+ *   },
+ * });
+ */
+export function useLoginMutation(baseOptions?: Apollo.MutationHookOptions<LoginMutation, LoginMutationVariables>) {
+	const options = {...defaultOptions, ...baseOptions}
+	return Apollo.useMutation<LoginMutation, LoginMutationVariables>(LoginDocument, options)
+}
+export type LoginMutationHookResult = ReturnType<typeof useLoginMutation>;
+export type LoginMutationResult = Apollo.MutationResult<LoginMutation>;
+export type LoginMutationOptions = Apollo.BaseMutationOptions<LoginMutation, LoginMutationVariables>;
+export const MoveDocument = gql`
+    mutation move($src: objID!, $dest: objID!) {
+  move(src: $src, dest: $dest) {
+    id
+  }
+}
+    `
+export type MoveMutationFn = Apollo.MutationFunction<MoveMutation, MoveMutationVariables>;
+
+/**
+ * __useMoveMutation__
+ *
+ * To run a mutation, you first call `useMoveMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useMoveMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [moveMutation, { data, loading, error }] = useMoveMutation({
+ *   variables: {
+ *      src: // value for 'src'
+ *      dest: // value for 'dest'
+ *   },
+ * });
+ */
+export function useMoveMutation(baseOptions?: Apollo.MutationHookOptions<MoveMutation, MoveMutationVariables>) {
+	const options = {...defaultOptions, ...baseOptions}
+	return Apollo.useMutation<MoveMutation, MoveMutationVariables>(MoveDocument, options)
+}
+export type MoveMutationHookResult = ReturnType<typeof useMoveMutation>;
+export type MoveMutationResult = Apollo.MutationResult<MoveMutation>;
+export type MoveMutationOptions = Apollo.BaseMutationOptions<MoveMutation, MoveMutationVariables>;
+export const MoveDirDocument = gql`
+    mutation moveDir($src: objID!, $dest: objID!) {
+  moveDir(src: $src, dest: $dest) {
+    id
+  }
+}
+    `
+export type MoveDirMutationFn = Apollo.MutationFunction<MoveDirMutation, MoveDirMutationVariables>;
+
+/**
+ * __useMoveDirMutation__
+ *
+ * To run a mutation, you first call `useMoveDirMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useMoveDirMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [moveDirMutation, { data, loading, error }] = useMoveDirMutation({
+ *   variables: {
+ *      src: // value for 'src'
+ *      dest: // value for 'dest'
+ *   },
+ * });
+ */
+export function useMoveDirMutation(baseOptions?: Apollo.MutationHookOptions<MoveDirMutation, MoveDirMutationVariables>) {
+	const options = {...defaultOptions, ...baseOptions}
+	return Apollo.useMutation<MoveDirMutation, MoveDirMutationVariables>(MoveDirDocument, options)
+}
+export type MoveDirMutationHookResult = ReturnType<typeof useMoveDirMutation>;
+export type MoveDirMutationResult = Apollo.MutationResult<MoveDirMutation>;
+export type MoveDirMutationOptions = Apollo.BaseMutationOptions<MoveDirMutation, MoveDirMutationVariables>;
 export const OpenDirDocument = gql`
-    query openDir($path: String!) {
+    query openDir($path: objID!) {
   files(path: $path) {
     id
     name
     size
     lastModified
   }
-  directorys(path: $path) {
+  directories(path: $path) {
     id
     name
   }

src/graphql/copy.graphql

@@ -0,0 +1,5 @@
+mutation copy($src: objID!, $dest: objID!) {
+  copy(src: $src,dest: $dest){
+    id
+  }
+}

src/graphql/createDir.graphql

@@ -0,0 +1,5 @@
+mutation createDir($path: objID!){
+  createDir(path:$path){
+    id
+  }
+}

src/graphql/deleteDir.graphql

@@ -0,0 +1,3 @@
+mutation deleteDir($path: objID!){
+  deleteDir(path:$path)
+}

src/graphql/deleteFile.graphql

@@ -0,0 +1,3 @@
+mutation deleteFile($id: objID!) {
+  delete(id:$id)
+}

src/graphql/getFile.graphql

@@ -1,4 +1,4 @@
-query getFile($id: ID!){
+query getFile($id: objID!){
   file(id: $id){
     id
     name

src/graphql/isAuth.graphql

@@ -0,0 +1,3 @@
+query isAuth{
+    authorized
+}

src/graphql/listBuckets.graphql

@@ -0,0 +1,3 @@
+query listBucktes{
+    buckets
+}

src/graphql/login.graphql

@@ -0,0 +1,6 @@
+mutation Login($username: String!, $password: String!){
+  login(username:$username,password:$password){
+    token
+    successful
+  }
+}

src/graphql/move.graphql

@@ -0,0 +1,5 @@
+mutation move($src: objID!, $dest: objID!) {
+  move(src: $src,dest: $dest){
+    id
+  }
+}

src/graphql/moveDir.graphql

@@ -0,0 +1,5 @@
+mutation moveDir($src: objID!, $dest: objID!) {
+  moveDir(src: $src,dest: $dest){
+    id
+  }
+}

src/graphql/openDir.graphql

@@ -1,11 +1,11 @@
-query openDir($path: String!) {
+query openDir($path: objID!) {
   files(path:$path){
     id
     name
     size
     lastModified
   }
-  directorys(path: $path){
+  directories(path: $path){
     id
     name
   }

src/index.scss

@@ -1,2 +1,13 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
-@import "node_modules/spectre.css/src/spectre";
+/* Commonly used classes*/
+
+.text-input{
+    @apply bg-transparent border-gray-900 dark:border-gray-300 dark:text-gray-300 outline-none border-b
+}
+
+.breadcrum-item{
+    @apply inline-flex items-center cursor-pointer
+}

src/index.tsx

@@ -2,12 +2,13 @@ import React from "react"
 import ReactDOM from "react-dom"
 import "./index.scss"
 import App from "./App"
-import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client"
+import { ApolloClient, ApolloProvider } from "@apollo/client"
 import "react-contexify/dist/ReactContexify.css"
+import cache from "./Cache"
 
 const client = new ApolloClient({
-	uri: "/graphql",
-	cache: new InMemoryCache()
+	uri: "/api/graphql",
+	cache: cache,
 })
 
 // Disable drag and drop behaviour on document

src/style/DragAndDrop.module.scss

@@ -1,21 +0,0 @@
-.active{
-    border: dashed grey 4px;
-    background-color: rgba(255,255,255,.8);
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 2;
-}
-
-.dragAndDrop{
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    z-index: 2;
-}

src/style/Modal.module.scss

@@ -1,27 +0,0 @@
-.overlay{
-    position: fixed;
-    z-index: 1;
-    left: 0;
-    top: 0;
-    width: 100%; 
-    height: 100%;
-    background-color: rgba(0,0,0,0.4);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.body{
-    background-color: #fefefe;
-    margin-left: auto;
-    margin-right: auto;
-    padding: 20px;
-    border: 1px solid #888;
-    width: 80%;
-    max-height: 99%;
-    overflow: hidden;
-}
-
-.hidden{
-    display: none;
-}

src/types/ObjID.ts

@@ -0,0 +1,106 @@
+const stringRegex =  /(.*?)(@(.*))?:(.*)/
+
+class ObjID {
+	public bucket: string
+	public key: string
+	public version?: string
+
+	constructor(bucket: string, key: string, version?: string) {
+		this.bucket = bucket
+		if(!key){
+			this.key = "/"
+		}else{
+			this.key = key
+		}
+		if (version){
+			this.version = version
+		}
+
+		this.normalize()
+	}
+	
+	public toString(): string {
+		if (this.version) {
+			return `${this.bucket}@${this.version}:${this.key}`
+		}else{
+			return `${this.bucket}:${this.key}`
+		}
+	}
+
+	public normalize(): void{
+		if (!this.key.startsWith("/")){
+			this.key = "/" + this.key
+		}
+	}
+
+	public isDirectory(): boolean {
+		return this.key.endsWith("/")
+	}
+
+	public toURI(): string {
+		return `/f/${this.bucket}${this.key}`
+	}
+
+	public toJSON(): string{
+		// HACK: toJSON is required so that apollo can parse the ObjID back to a string
+		// that can be used in gql query
+		return this.toString()
+	}
+
+	public rename(name: string): ObjID{
+		const parts = this.key.split("/")
+		parts[parts.length - (this.isDirectory()?2:1)] = name
+		return new ObjID(this.bucket,parts.join("/"))
+	}
+
+	/**
+	 * Get the parent of the object. If Obj is a file then the containing directory
+	 * if Obj is a directory it returns the parent
+	 * @returns parent ObjID or null if already at root
+	 */
+	public parent(): ObjID | null {
+		if (this.key == "/") {
+			// Already at root. We dont have a parent
+			return null
+		}
+	
+		if (this.isDirectory()) {
+			const parts = this.key.split("/")
+			const parent = new ObjID(this.bucket, parts.slice(0,-2).join("/") + "/")
+			parent.normalize()
+			return parent
+		} else {
+			const parts = this.key.split("/")
+			const parent = new ObjID(this.bucket, parts.slice(0,-1).join("/")  + "/")
+			parent.normalize()
+			return parent
+		}
+	}
+
+	public static fromString(from: string): ObjID{
+		const match = stringRegex.exec(from)
+
+		if (!match){
+			throw new Error("Failed to parse ObjID")
+		}
+
+		return new ObjID(match[1],match[4],match[3])
+	}
+
+	public static fromURI(uri: string): ObjID{
+		let uri2 = uri
+
+		if (!uri2.endsWith("/")){
+			uri2 += "/"
+		}
+
+		const parts = uri2.split("/")
+
+		const bucket = parts[2]
+		const key = parts.slice(3).join("/")
+
+		return new ObjID(bucket,key)
+	}
+}
+
+export default ObjID

tailwind.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+	purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
+	darkMode: "class", // or 'media' or 'class'
+	theme: {
+		extend: {},
+	},
+	variants: {
+		extend: {},
+	},
+	plugins: [],
+}

yarn.lock

@@ -1246,13 +1246,20 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4":
   version "7.14.8"
   resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.8.tgz"
   integrity sha512-twj3L8Og5SaCRCErB4x4ajbvBIVV77CGeFglHpeg5WC5FF8TZzBWXtTJ4MqaD9QszLYTtr+IsaAL2rEUevb+eg==
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.1":
+  version "7.15.3"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.3.tgz#2e1c2880ca118e5b2f9988322bd8a7656a32502b"
+  integrity sha512-OvwMLqNXkCXSz1kSm58sEsNuhqOx/fKpnUnKnFB5v8uDda5bLNEHNgKPvhDN6IU0LDcnHQ90LlJ0Q6jnyBSIBA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.10.4", "@babel/template@^7.14.5", "@babel/template@^7.3.3":
   version "7.14.5"
   resolved "https://registry.npmjs.org/@babel/template/-/template-7.14.5.tgz"
@@ -1330,6 +1337,16 @@
     exec-sh "^0.3.2"
     minimist "^1.2.0"
 
+"@craco/craco@^6.2.0":
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/@craco/craco/-/craco-6.2.0.tgz#93847ae20899f5e810359443f2055bcf2b1a584e"
+  integrity sha512-kLc4GSdgR9D5JiZmSxtzbvBKcUFSJqMXImRjjYf5pacwiyAs3XfQwai7T+pExfLQNUnytgkL8jRFUJeYrkVr7g==
+  dependencies:
+    cross-spawn "^7.0.0"
+    lodash "^4.17.15"
+    semver "^7.3.2"
+    webpack-merge "^4.2.2"
+
 "@csstools/convert-colors@^1.4.0":
   version "1.4.0"
   resolved "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-1.4.0.tgz"
@@ -1375,6 +1392,14 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@graphql-codegen/add@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@graphql-codegen/add/-/add-3.1.0.tgz#cd02fd6d80a7f62839cb27160b62e48366a237c5"
+  integrity sha512-vRRHpuUFadYXnPrb5RNiIzm3Ao39UxjvrdX760lEfXh2qeG7YddM5QFC+ev2BH3X452R15gv/gf/rXy0+Hqm1A==
+  dependencies:
+    "@graphql-codegen/plugin-helpers" "^2.1.0"
+    tslib "~2.3.0"
+
 "@graphql-codegen/cli@1.21.7":
   version "1.21.7"
   resolved "https://registry.npmjs.org/@graphql-codegen/cli/-/cli-1.21.7.tgz"
@@ -1449,6 +1474,18 @@
     lodash "~4.17.0"
     tslib "~2.3.0"
 
+"@graphql-codegen/plugin-helpers@^2.1.0":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@graphql-codegen/plugin-helpers/-/plugin-helpers-2.1.1.tgz#fc13e735763574ef308045bbb95c3e7201ec0027"
+  integrity sha512-7jjN9fekMQkpd7cRTbaBxgqt/hkR3CXeOUSsEyHFDDHKtvCrnev3iyc75IeWXpO9tOwDE8mVPTzEZnu4QukrNA==
+  dependencies:
+    "@graphql-tools/utils" "^8.1.1"
+    change-case-all "1.0.14"
+    common-tags "1.8.0"
+    import-from "4.0.0"
+    lodash "~4.17.0"
+    tslib "~2.3.0"
+
 "@graphql-codegen/typescript-operations@1.18.4":
   version "1.18.4"
   resolved "https://registry.npmjs.org/@graphql-codegen/typescript-operations/-/typescript-operations-1.18.4.tgz"
@@ -1703,6 +1740,13 @@
     camel-case "4.1.2"
     tslib "~2.2.0"
 
+"@graphql-tools/utils@^8.1.1":
+  version "8.2.3"
+  resolved "https://registry.yarnpkg.com/@graphql-tools/utils/-/utils-8.2.3.tgz#9d7b9e7e116d11d26c2687f4d9cfb2b54568838b"
+  integrity sha512-RR+aiusf2gIfnPmrDIH1uA45QuPiHB54RD+BmWyMcl88tWAjeJtqZeWPqUTq/1EXrNeocJAJQqogHV4Fbbzx3A==
+  dependencies:
+    tslib "~2.3.0"
+
 "@graphql-tools/wrap@^7.0.4":
   version "7.0.8"
   resolved "https://registry.npmjs.org/@graphql-tools/wrap/-/wrap-7.0.8.tgz"
@@ -2340,60 +2384,11 @@
   dependencies:
     defer-to-connect "^1.0.1"
 
-"@testing-library/dom@^7.28.1":
-  version "7.31.2"
-  resolved "https://registry.npmjs.org/@testing-library/dom/-/dom-7.31.2.tgz"
-  integrity sha512-3UqjCpey6HiTZT92vODYLPxTBWlM8ZOOjr3LX5F37/VRipW2M1kX6I/Cm4VXzteZqfGfagg8yXywpcOgQBlNsQ==
-  dependencies:
-    "@babel/code-frame" "^7.10.4"
-    "@babel/runtime" "^7.12.5"
-    "@types/aria-query" "^4.2.0"
-    aria-query "^4.2.2"
-    chalk "^4.1.0"
-    dom-accessibility-api "^0.5.6"
-    lz-string "^1.4.4"
-    pretty-format "^26.6.2"
-
-"@testing-library/jest-dom@^5.11.4":
-  version "5.14.1"
-  resolved "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.14.1.tgz"
-  integrity sha512-dfB7HVIgTNCxH22M1+KU6viG5of2ldoA5ly8Ar8xkezKHKXjRvznCdbMbqjYGgO2xjRbwnR+rR8MLUIqF3kKbQ==
-  dependencies:
-    "@babel/runtime" "^7.9.2"
-    "@types/testing-library__jest-dom" "^5.9.1"
-    aria-query "^4.2.2"
-    chalk "^3.0.0"
-    css "^3.0.0"
-    css.escape "^1.5.1"
-    dom-accessibility-api "^0.5.6"
-    lodash "^4.17.15"
-    redent "^3.0.0"
-
-"@testing-library/react@^11.1.0":
-  version "11.2.7"
-  resolved "https://registry.npmjs.org/@testing-library/react/-/react-11.2.7.tgz"
-  integrity sha512-tzRNp7pzd5QmbtXNG/mhdcl7Awfu/Iz1RaVHY75zTdOkmHCuzMhRL83gWHSgOAcjS3CCbyfwUHMZgRJb4kAfpA==
-  dependencies:
-    "@babel/runtime" "^7.12.5"
-    "@testing-library/dom" "^7.28.1"
-
-"@testing-library/user-event@^12.1.10":
-  version "12.8.3"
-  resolved "https://registry.npmjs.org/@testing-library/user-event/-/user-event-12.8.3.tgz"
-  integrity sha512-IR0iWbFkgd56Bu5ZI/ej8yQwrkCv8Qydx6RzwbKz9faXazR/+5tvYKsZQgyXJiwgpcva127YO6JcWy7YlCfofQ==
-  dependencies:
-    "@babel/runtime" "^7.12.5"
-
 "@tootallnate/once@1":
   version "1.1.2"
   resolved "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz"
   integrity sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==
 
-"@types/aria-query@^4.2.0":
-  version "4.2.2"
-  resolved "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.2.tgz"
-  integrity sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig==
-
 "@types/babel__core@^7.0.0", "@types/babel__core@^7.1.7":
   version "7.1.15"
   resolved "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.15.tgz"
@@ -2460,6 +2455,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/history@*":
+  version "4.7.9"
+  resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.9.tgz#1cfb6d60ef3822c589f18e70f8b12f9a28ce8724"
+  integrity sha512-MUc6zSmU3tEVnkQ78q0peeEjKWPUADMlC/t++2bI8WnAG2tvYRPIgHG8lWkXwqc8MsUF6Z2MOf+Mh5sazOmhiQ==
+
 "@types/html-minifier-terser@^5.0.0":
   version "5.1.2"
   resolved "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz"
@@ -2491,7 +2491,7 @@
   dependencies:
     "@types/istanbul-lib-report" "*"
 
-"@types/jest@*", "@types/jest@^26.0.15":
+"@types/jest@^26.0.15":
   version "26.0.24"
   resolved "https://registry.npmjs.org/@types/jest/-/jest-26.0.24.tgz"
   integrity sha512-E/X5Vib8BWqZNRlDxj9vYXhsDwPYbPINqKF9BsnSoon4RQ0D9moEuLD8txgyypFLH7J4+Lho9Nr/c8H0Fi+17w==
@@ -2581,6 +2581,23 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-router-dom@^5.1.8":
+  version "5.1.8"
+  resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.1.8.tgz#bf3e1c8149b3d62eaa206d58599de82df0241192"
+  integrity sha512-03xHyncBzG0PmDmf8pf3rehtjY0NpUj7TIN46FrT5n1ZWHPZvXz32gUyNboJ+xsL8cpg8bQVLcllptcQHvocrw==
+  dependencies:
+    "@types/history" "*"
+    "@types/react" "*"
+    "@types/react-router" "*"
+
+"@types/react-router@*":
+  version "5.1.16"
+  resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.1.16.tgz#f3ba045fb96634e38b21531c482f9aeb37608a99"
+  integrity sha512-8d7nR/fNSqlTFGHti0R3F9WwIertOaaA1UEB8/jr5l5mDMOs4CidEgvvYMw4ivqrBK+vtVLxyTj2P+Pr/dtgzg==
+  dependencies:
+    "@types/history" "*"
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@^17.0.0":
   version "17.0.15"
   resolved "https://registry.npmjs.org/@types/react/-/react-17.0.15.tgz"
@@ -2617,13 +2634,6 @@
   resolved "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.8.tgz"
   integrity sha512-ipixuVrh2OdNmauvtT51o3d8z12p6LtFW9in7U79der/kwejjdNchQC5UMn5u/KxNoM7VHHOs/l8KS8uHxhODQ==
 
-"@types/testing-library__jest-dom@^5.9.1":
-  version "5.14.1"
-  resolved "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.1.tgz"
-  integrity sha512-Gk9vaXfbzc5zCXI9eYE9BI5BNHEp4D3FWjgqBE/ePGYElLAP+KvxBcsdkwfIVvezs605oiyd/VrpiHe3Oeg+Aw==
-  dependencies:
-    "@types/jest" "*"
-
 "@types/uglify-js@*":
   version "3.13.1"
   resolved "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.13.1.tgz"
@@ -3003,7 +3013,16 @@ acorn-jsx@^5.3.1:
   resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
-acorn-walk@^7.1.1:
+acorn-node@^1.6.1:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/acorn-node/-/acorn-node-1.8.2.tgz#114c95d64539e53dede23de8b9d96df7c7ae2af8"
+  integrity sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==
+  dependencies:
+    acorn "^7.0.0"
+    acorn-walk "^7.0.0"
+    xtend "^4.0.2"
+
+acorn-walk@^7.0.0, acorn-walk@^7.1.1:
   version "7.2.0"
   resolved "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz"
   integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
@@ -3013,7 +3032,7 @@ acorn@^6.4.1:
   resolved "https://registry.npmjs.org/acorn/-/acorn-6.4.2.tgz"
   integrity sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==
 
-acorn@^7.1.0, acorn@^7.1.1, acorn@^7.4.0:
+acorn@^7.0.0, acorn@^7.1.0, acorn@^7.1.1, acorn@^7.4.0:
   version "7.4.1"
   resolved "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
@@ -3435,6 +3454,11 @@ arg@^4.1.0:
   resolved "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz"
   integrity sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==
 
+arg@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.0.tgz#a20e2bb5710e82950a516b3f933fee5ed478be90"
+  integrity sha512-4P8Zm2H+BRS+c/xX1LrHw0qKpEhdlZjLCgWy+d78T9vqa2Z2SiD2wMrYuWIAFy5IZUD7nnNXroRttz+0RzlrzQ==
+
 argparse@^1.0.7:
   version "1.0.10"
   resolved "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz"
@@ -3646,7 +3670,7 @@ auto-bind@~4.0.0:
   resolved "https://registry.npmjs.org/auto-bind/-/auto-bind-4.0.0.tgz"
   integrity sha512-Hdw8qdNiqdJ8LqT0iK0sVzkFbzg6fhnQqqfWhBDxcHZvU75+B+ayzTy8x+k5Ix0Y92XOhOUlx74ps+bA6BeYMQ==
 
-autoprefixer@^9.6.1:
+autoprefixer@^9, autoprefixer@^9.6.1:
   version "9.8.6"
   resolved "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.6.tgz"
   integrity sha512-XrvP4VVHdRBCdX1S3WXVD8+RyG9qeb1D5Sn1DeLiG2xfSpzellk5k54xbUERJ3M5DggQxes39UGOTP8CFrEGbg==
@@ -4222,7 +4246,7 @@ bytes@3.0.0:
   resolved "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz"
   integrity sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=
 
-bytes@3.1.0:
+bytes@3.1.0, bytes@^3.0.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz"
   integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==
@@ -4339,6 +4363,11 @@ camel-case@4.1.2, camel-case@^4.1.1, camel-case@^4.1.2:
     pascal-case "^3.1.2"
     tslib "^2.0.3"
 
+camelcase-css@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
+  integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
+
 camelcase-keys@^6.2.2:
   version "6.2.2"
   resolved "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-6.2.2.tgz"
@@ -4443,6 +4472,14 @@ chalk@^4.0.0, chalk@^4.1.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+chalk@^4.1.1:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
 change-case-all@1.0.14:
   version "1.0.14"
   resolved "https://registry.npmjs.org/change-case-all/-/change-case-all-1.0.14.tgz"
@@ -4817,7 +4854,7 @@ color-string@^1.6.0:
     color-name "^1.0.0"
     simple-swizzle "^0.2.2"
 
-color@^3.0.0:
+color@^3.0.0, color@^3.2.0:
   version "3.2.1"
   resolved "https://registry.npmjs.org/color/-/color-3.2.1.tgz"
   integrity sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==
@@ -4852,6 +4889,11 @@ commander@^4.1.1:
   resolved "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz"
   integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
 
+commander@^6.0.0:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c"
+  integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==
+
 common-tags@1.8.0, common-tags@^1.5.1, common-tags@^1.8.0:
   version "1.8.0"
   resolved "https://registry.npmjs.org/common-tags/-/common-tags-1.8.0.tgz"
@@ -5255,6 +5297,11 @@ css-tree@^1.1.2:
     mdn-data "2.0.14"
     source-map "^0.6.1"
 
+css-unit-converter@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.2.tgz#4c77f5a1954e6dbff60695ecb214e3270436ab21"
+  integrity sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==
+
 css-what@^3.2.1:
   version "3.4.2"
   resolved "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz"
@@ -5265,11 +5312,6 @@ css-what@^5.0.0:
   resolved "https://registry.npmjs.org/css-what/-/css-what-5.0.1.tgz"
   integrity sha512-FYDTSHb/7KXsWICVsxdmiExPjCfRC4qRFBdVwv7Ax9hMnvMmEjP9RfxTEZ3qPZGmADDn2vAKSo9UcN1jKVYscg==
 
-css.escape@^1.5.1:
-  version "1.5.1"
-  resolved "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz"
-  integrity sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=
-
 css@^2.0.0:
   version "2.2.4"
   resolved "https://registry.npmjs.org/css/-/css-2.2.4.tgz"
@@ -5280,15 +5322,6 @@ css@^2.0.0:
     source-map-resolve "^0.5.2"
     urix "^0.1.0"
 
-css@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/css/-/css-3.0.0.tgz"
-  integrity sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==
-  dependencies:
-    inherits "^2.0.4"
-    source-map "^0.6.1"
-    source-map-resolve "^0.6.0"
-
 cssdb@^4.4.0:
   version "4.4.0"
   resolved "https://registry.npmjs.org/cssdb/-/cssdb-4.4.0.tgz"
@@ -5575,6 +5608,11 @@ define-property@^2.0.2:
     is-descriptor "^1.0.2"
     isobject "^3.0.1"
 
+defined@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
+  integrity sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=
+
 del@^4.1.1:
   version "4.1.1"
   resolved "https://registry.npmjs.org/del/-/del-4.1.1.tgz"
@@ -5644,6 +5682,20 @@ detect-port-alt@1.1.6:
     address "^1.0.1"
     debug "^2.6.0"
 
+detective@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/detective/-/detective-5.2.0.tgz#feb2a77e85b904ecdea459ad897cc90a99bd2a7b"
+  integrity sha512-6SsIx+nUUbuK0EthKjv0zrdnajCCXVYGmbYYiYjFVpzcjwEs/JMDZ8tPRG29J/HhN56t3GJp2cGSWDRjjot8Pg==
+  dependencies:
+    acorn-node "^1.6.1"
+    defined "^1.0.0"
+    minimist "^1.1.1"
+
+didyoumean@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
+  integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==
+
 diff-sequences@^26.6.2:
   version "26.6.2"
   resolved "https://registry.npmjs.org/diff-sequences/-/diff-sequences-26.6.2.tgz"
@@ -5670,6 +5722,11 @@ dir-glob@^3.0.1:
   dependencies:
     path-type "^4.0.0"
 
+dlv@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
+  integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==
+
 dns-equal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz"
@@ -5704,11 +5761,6 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
-dom-accessibility-api@^0.5.6:
-  version "0.5.6"
-  resolved "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.6.tgz"
-  integrity sha512-DplGLZd8L1lN64jlT27N9TVSESFR5STaEJvX+thCby7fuCHonfPpAlodYc3vuUYbDuDec5w8AMP7oCM5TWFsqw==
-
 dom-converter@^0.2.0:
   version "0.2.0"
   resolved "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz"
@@ -6549,7 +6601,7 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-glob@^3.1.1:
+fast-glob@^3.1.1, fast-glob@^3.2.7:
   version "3.2.7"
   resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.7.tgz"
   integrity sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q==
@@ -6849,6 +6901,15 @@ from2@^2.1.0:
     inherits "^2.0.1"
     readable-stream "^2.0.0"
 
+fs-extra@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.0.0.tgz#9ff61b655dde53fb34a82df84bb214ce802e17c1"
+  integrity sha512-C5owb14u9eJwizKGdchcDUQeFtlSHHthBk8pbX9Vc1PFZrLombudjDnNns88aYslCyF6IY5SUw3Roz6xShcEIQ==
+  dependencies:
+    graceful-fs "^4.2.0"
+    jsonfile "^6.0.1"
+    universalify "^2.0.0"
+
 fs-extra@^7.0.0:
   version "7.0.1"
   resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz"
@@ -7050,6 +7111,13 @@ glob-parent@^5.1.2, glob-parent@~5.1.2:
   dependencies:
     is-glob "^4.0.1"
 
+glob-parent@^6.0.0:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.1.tgz#42054f685eb6a44e7a7d189a96efa40a54971aa7"
+  integrity sha512-kEVjS71mQazDBHKcsq4E9u/vUzaLcw1A8EtUeydawvIWQCJM0qQ08G1H7/XTjFUulla6XQiDOG6MXSaG0HDKog==
+  dependencies:
+    is-glob "^4.0.1"
+
 glob@7.1.5:
   version "7.1.5"
   resolved "https://registry.npmjs.org/glob/-/glob-7.1.5.tgz"
@@ -7406,6 +7474,18 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
+history@^4.9.0:
+  version "4.10.1"
+  resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
+  integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    loose-envify "^1.2.0"
+    resolve-pathname "^3.0.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+    value-equal "^1.0.1"
+
 hmac-drbg@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz"
@@ -7415,7 +7495,7 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -7489,6 +7569,11 @@ html-minifier-terser@^5.0.1:
     relateurl "^0.2.7"
     terser "^4.6.3"
 
+html-tags@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.1.0.tgz#7b5e6f7e665e9fb41f30007ed9e0d41e97fb2140"
+  integrity sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg==
+
 html-webpack-plugin@4.5.0:
   version "4.5.0"
   resolved "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-4.5.0.tgz"
@@ -7691,6 +7776,13 @@ import-cwd@^2.0.0:
   dependencies:
     import-from "^2.1.0"
 
+import-cwd@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-3.0.0.tgz#20845547718015126ea9b3676b7592fb8bd4cf92"
+  integrity sha512-4pnzH16plW+hgvRECbDWpQl3cqtvSofHWh44met7ESfZ8UZOWWddm8hEyDTqREJ9RbYHY8gi8DqmaelApoOGMg==
+  dependencies:
+    import-from "^3.0.0"
+
 import-fresh@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz"
@@ -7707,7 +7799,7 @@ import-fresh@^3.0.0, import-fresh@^3.1.0, import-fresh@^3.2.1:
     parent-module "^1.0.0"
     resolve-from "^4.0.0"
 
-import-from@3.0.0:
+import-from@3.0.0, import-from@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/import-from/-/import-from-3.0.0.tgz"
   integrity sha512-CiuXOFFSzkU5x/CR0+z7T91Iht4CXgfCxVOFRhh2Zyhg5wOpWvvDLQUsWl+gcN+QscYBjez8hDCt85O7RLDttQ==
@@ -8269,6 +8361,11 @@ is-wsl@^2.1.1, is-wsl@^2.2.0:
   dependencies:
     is-docker "^2.0.0"
 
+isarray@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+  integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=
+
 isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz"
@@ -9108,6 +9205,11 @@ levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
+lilconfig@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.3.tgz#68f3005e921dafbd2a2afb48379986aa6d2579fd"
+  integrity sha512-EHKqr/+ZvdKCifpNrJCKxBTgk5XupZA3y/aCPY9mxfgBzmgh93Mt/WqjjQ38oMxXuvDokaKiM3lAgvSH2sjtHg==
+
 lines-and-columns@^1.1.6:
   version "1.1.6"
   resolved "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz"
@@ -9333,6 +9435,11 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "^3.0.0"
 
+lodash.topath@^4.5.2:
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/lodash.topath/-/lodash.topath-4.5.2.tgz#3616351f3bba61994a0931989660bd03254fd009"
+  integrity sha1-NhY1Hzu6YZlKCTGYlmC9AyVP0Ak=
+
 lodash.truncate@^4.4.2:
   version "4.4.2"
   resolved "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz"
@@ -9382,7 +9489,7 @@ loglevel@^1.6.8:
   resolved "https://registry.npmjs.org/loglevel/-/loglevel-1.7.1.tgz"
   integrity sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw==
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -9427,11 +9534,6 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
-lz-string@^1.4.4:
-  version "1.4.4"
-  resolved "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz"
-  integrity sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=
-
 magic-string@^0.25.0, magic-string@^0.25.7:
   version "0.25.7"
   resolved "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz"
@@ -9660,6 +9762,14 @@ min-indent@^1.0.0:
   resolved "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz"
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
 
+mini-create-react-context@^0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz#072171561bfdc922da08a60c2197a497cc2d1d5e"
+  integrity sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==
+  dependencies:
+    "@babel/runtime" "^7.12.1"
+    tiny-warning "^1.0.3"
+
 mini-css-extract-plugin@0.11.3:
   version "0.11.3"
   resolved "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.3.tgz"
@@ -9773,6 +9883,11 @@ mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.5, mkdirp@~0.5.1:
   dependencies:
     minimist "^1.2.5"
 
+modern-normalize@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/modern-normalize/-/modern-normalize-1.1.0.tgz#da8e80140d9221426bd4f725c6e11283d34f90b7"
+  integrity sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==
+
 moment@2.29.1, moment@^2.22.1:
   version "2.29.1"
   resolved "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz"
@@ -9900,6 +10015,13 @@ no-case@^3.0.4:
     lower-case "^2.0.2"
     tslib "^2.0.3"
 
+node-emoji@^1.8.1:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/node-emoji/-/node-emoji-1.11.0.tgz#69a0150e6946e2f115e9d7ea4df7971e2628301c"
+  integrity sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==
+  dependencies:
+    lodash "^4.17.21"
+
 node-fetch@2.6.1, node-fetch@^2.6.1:
   version "2.6.1"
   resolved "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz"
@@ -10149,6 +10271,11 @@ object-copy@^0.1.0:
     define-property "^0.2.5"
     kind-of "^3.0.3"
 
+object-hash@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-2.2.0.tgz#5ad518581eefc443bd763472b8ff2e9c2c0d54a5"
+  integrity sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==
+
 object-inspect@^1.10.3, object-inspect@^1.9.0:
   version "1.11.0"
   resolved "https://registry.npmjs.org/object-inspect/-/object-inspect-1.11.0.tgz"
@@ -10627,6 +10754,13 @@ path-to-regexp@0.1.7:
   resolved "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz"
   integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
 
+path-to-regexp@^1.7.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.8.0.tgz#887b3ba9d84393e87a0a0b9f4cb756198b53548a"
+  integrity sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==
+  dependencies:
+    isarray "0.0.1"
+
 path-type@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz"
@@ -10938,6 +11072,16 @@ postcss-font-variant@^4.0.0:
   dependencies:
     postcss "^7.0.2"
 
+postcss-functions@^3:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-functions/-/postcss-functions-3.0.0.tgz#0e94d01444700a481de20de4d55fb2640564250e"
+  integrity sha1-DpTQFERwCkgd4g3k1V+yZAVkJQ4=
+  dependencies:
+    glob "^7.1.2"
+    object-assign "^4.1.1"
+    postcss "^6.0.9"
+    postcss-value-parser "^3.3.0"
+
 postcss-gap-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-2.0.0.tgz"
@@ -10960,6 +11104,14 @@ postcss-initial@^3.0.0:
   dependencies:
     postcss "^7.0.2"
 
+postcss-js@^2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-2.0.3.tgz#a96f0f23ff3d08cec7dc5b11bf11c5f8077cdab9"
+  integrity sha512-zS59pAk3deu6dVHyrGqmC3oDXBdNdajk4k1RyxeVXCrcEDBUBHoIhE4QTsmhxgzXxsaqFDAkUZfmMa5f/N/79w==
+  dependencies:
+    camelcase-css "^2.0.1"
+    postcss "^7.0.18"
+
 postcss-lab-function@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-2.0.1.tgz"
@@ -10977,6 +11129,15 @@ postcss-load-config@^2.0.0:
     cosmiconfig "^5.0.0"
     import-cwd "^2.0.0"
 
+postcss-load-config@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-3.1.0.tgz#d39c47091c4aec37f50272373a6a648ef5e97829"
+  integrity sha512-ipM8Ds01ZUophjDTQYSVP70slFSYg3T0/zyfII5vzhN6V57YSxMgG5syXuwi5VtS8wSf3iL30v0uBdoIVx4Q0g==
+  dependencies:
+    import-cwd "^3.0.0"
+    lilconfig "^2.0.3"
+    yaml "^1.10.2"
+
 postcss-loader@3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/postcss-loader/-/postcss-loader-3.0.0.tgz"
@@ -11096,6 +11257,14 @@ postcss-modules-values@^3.0.0:
     icss-utils "^4.0.0"
     postcss "^7.0.6"
 
+postcss-nested@^4:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-4.2.3.tgz#c6f255b0a720549776d220d00c4b70cd244136f6"
+  integrity sha512-rOv0W1HquRCamWy2kFl3QazJMMe1ku6rCFoAAH+9AcxdbpDeBr6k968MLWuLjvjMcGEip01ak09hKOEgpK9hvw==
+  dependencies:
+    postcss "^7.0.32"
+    postcss-selector-parser "^6.0.2"
+
 postcss-nesting@^7.0.0:
   version "7.0.1"
   resolved "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-7.0.1.tgz"
@@ -11345,7 +11514,7 @@ postcss-selector-parser@^5.0.0-rc.3, postcss-selector-parser@^5.0.0-rc.4:
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
-postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2:
+postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.6:
   version "6.0.6"
   resolved "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.6.tgz"
   integrity sha512-9LXrvaaX3+mcv5xkg5kFwqSzSH1JIObIx51PrndZwlmznwXRfxMddDvo9gve3gVR8ZTKgoFDdWkbRFmEhT4PMg==
@@ -11371,7 +11540,7 @@ postcss-unique-selectors@^4.0.1:
     postcss "^7.0.0"
     uniqs "^2.0.0"
 
-postcss-value-parser@^3.0.0:
+postcss-value-parser@^3.0.0, postcss-value-parser@^3.3.0:
   version "3.3.1"
   resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz"
   integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
@@ -11390,7 +11559,7 @@ postcss-values-parser@^2.0.0, postcss-values-parser@^2.0.1:
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
-postcss@7.0.36, postcss@^7, postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.26, postcss@^7.0.27, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6:
+postcss@7.0.36, postcss@^7, postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.18, postcss@^7.0.2, postcss@^7.0.26, postcss@^7.0.27, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6:
   version "7.0.36"
   resolved "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz"
   integrity sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==
@@ -11399,7 +11568,16 @@ postcss@7.0.36, postcss@^7, postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, pos
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
-postcss@^8.1.0:
+postcss@^6.0.9:
+  version "6.0.23"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
+  integrity sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==
+  dependencies:
+    chalk "^2.4.1"
+    source-map "^0.6.1"
+    supports-color "^5.4.0"
+
+postcss@^8.1.0, postcss@^8.2.1:
   version "8.3.6"
   resolved "https://registry.npmjs.org/postcss/-/postcss-8.3.6.tgz"
   integrity sha512-wG1cc/JhRgdqB6WHEuyLTedf3KIRuD0hG6ldkFEZNCjRxiC+3i6kkWUUbiJQayP28iwG35cEmAbe98585BYV0A==
@@ -11451,6 +11629,11 @@ pretty-format@^26.0.0, pretty-format@^26.6.0, pretty-format@^26.6.2:
     ansi-styles "^4.0.0"
     react-is "^17.0.1"
 
+pretty-hrtime@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
+  integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=
+
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz"
@@ -11501,7 +11684,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.7.2:
+prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -11585,6 +11768,16 @@ punycode@^2.1.0, punycode@^2.1.1:
   resolved "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
+purgecss@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/purgecss/-/purgecss-4.0.3.tgz#8147b429f9c09db719e05d64908ea8b672913742"
+  integrity sha512-PYOIn5ibRIP34PBU9zohUcCI09c7drPJJtTDAc0Q6QlRz2/CHQ8ywGLdE7ZhxU2VTqB7p5wkvj5Qcm05Rz3Jmw==
+  dependencies:
+    commander "^6.0.0"
+    glob "^7.0.0"
+    postcss "^8.2.1"
+    postcss-selector-parser "^6.0.2"
+
 q@^1.1.2:
   version "1.5.1"
   resolved "https://registry.npmjs.org/q/-/q-1.5.1.tgz"
@@ -11655,6 +11848,11 @@ quick-lru@^4.0.1:
   resolved "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz"
   integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==
 
+quick-lru@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932"
+  integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==
+
 raf@^3.4.1:
   version "3.4.1"
   resolved "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz"
@@ -11765,7 +11963,12 @@ react-error-overlay@^6.0.9:
   resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz"
   integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
 
-react-is@^16.7.0, react-is@^16.8.1:
+react-icons@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.2.0.tgz#6dda80c8a8f338ff96a1851424d63083282630d0"
+  integrity sha512-rmzEDFt+AVXRzD7zDE21gcxyBizD/3NqjbX6cmViAgdqfJ2UiLer8927/QhhrXQV7dEj/1EGuOTPp7JnLYVJKQ==
+
+react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -11780,6 +11983,35 @@ react-refresh@^0.8.3:
   resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz"
   integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
 
+react-router-dom@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.2.0.tgz#9e65a4d0c45e13289e66c7b17c7e175d0ea15662"
+  integrity sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    history "^4.9.0"
+    loose-envify "^1.3.1"
+    prop-types "^15.6.2"
+    react-router "5.2.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+
+react-router@5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.2.0.tgz#424e75641ca8747fbf76e5ecca69781aa37ea293"
+  integrity sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    history "^4.9.0"
+    hoist-non-react-statics "^3.1.0"
+    loose-envify "^1.3.1"
+    mini-create-react-context "^0.4.0"
+    path-to-regexp "^1.7.0"
+    prop-types "^15.6.2"
+    react-is "^16.6.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+
 react-scripts@4.0.3:
   version "4.0.3"
   resolved "https://registry.npmjs.org/react-scripts/-/react-scripts-4.0.3.tgz"
@@ -11967,6 +12199,14 @@ redeyed@~2.1.0:
   dependencies:
     esprima "~4.0.0"
 
+reduce-css-calc@^2.1.8:
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz#7ef8761a28d614980dc0c982f772c93f7a99de03"
+  integrity sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==
+  dependencies:
+    css-unit-converter "^1.1.1"
+    postcss-value-parser "^3.3.0"
+
 regenerate-unicode-properties@^8.2.0:
   version "8.2.0"
   resolved "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz"
@@ -12211,6 +12451,11 @@ resolve-from@^4.0.0:
   resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
+resolve-pathname@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd"
+  integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==
+
 resolve-url-loader@^3.1.2:
   version "3.1.4"
   resolved "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-3.1.4.tgz"
@@ -12386,6 +12631,14 @@ rollup@^1.31.1:
     "@types/node" "*"
     acorn "^7.1.0"
 
+rooks@^5.7.1:
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/rooks/-/rooks-5.7.1.tgz#a9c91e94e760e21a9df5afc1de4ba07d09a6156d"
+  integrity sha512-Gztycgm+e+bS0vqLMSGlGe8f7rkXMxjfPj3FucM06/xu1CEFQx1pZ0zMVdWVxDeMXRePaQ2/g1K7ArIlGKyHbQ==
+  dependencies:
+    lodash.debounce "^4.0.8"
+    raf "^3.4.1"
+
 rsvp@^4.8.4:
   version "4.8.5"
   resolved "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz"
@@ -12874,14 +13127,6 @@ source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
     source-map-url "^0.4.0"
     urix "^0.1.0"
 
-source-map-resolve@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.6.0.tgz"
-  integrity sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==
-  dependencies:
-    atob "^2.1.2"
-    decode-uri-component "^0.2.0"
-
 source-map-support@^0.5.17, source-map-support@^0.5.6, source-map-support@~0.5.12, source-map-support@~0.5.19:
   version "0.5.19"
   resolved "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz"
@@ -12971,11 +13216,6 @@ spdy@^4.0.2:
     select-hose "^2.0.0"
     spdy-transport "^3.0.0"
 
-spectre.css@^0.5.9:
-  version "0.5.9"
-  resolved "https://registry.yarnpkg.com/spectre.css/-/spectre.css-0.5.9.tgz#86c732d093036d9fdc0a2ba570f005e4023ae6ca"
-  integrity sha512-9jUqwZmCnvflrxFGcK+ize43TvjwDjqMwZPVubEtSIHzvinH0TBUESm1LcOJx3Ur7bdPaeOHQIjOqBl1Y5kLFw==
-
 split-on-first@^1.0.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz"
@@ -13448,6 +13688,46 @@ table@^6.0.9:
     string-width "^4.2.0"
     strip-ansi "^6.0.0"
 
+"tailwindcss@npm:@tailwindcss/postcss7-compat":
+  version "2.2.7"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/postcss7-compat/-/postcss7-compat-2.2.7.tgz#5e7e436ed0f4e0ed945d35b1f87189daa681dd1f"
+  integrity sha512-1QkWUEeLV1AoNipMCE6IlL7XYScGb+DAzaXy35ooMDvl0G8kCMHBNqGxyVAnTcK8gyJNUzkKXExkUnbjAndd/g==
+  dependencies:
+    arg "^5.0.0"
+    autoprefixer "^9"
+    bytes "^3.0.0"
+    chalk "^4.1.1"
+    chokidar "^3.5.2"
+    color "^3.2.0"
+    cosmiconfig "^7.0.0"
+    detective "^5.2.0"
+    didyoumean "^1.2.2"
+    dlv "^1.1.3"
+    fast-glob "^3.2.7"
+    fs-extra "^10.0.0"
+    glob-parent "^6.0.0"
+    html-tags "^3.1.0"
+    is-glob "^4.0.1"
+    lodash "^4.17.21"
+    lodash.topath "^4.5.2"
+    modern-normalize "^1.1.0"
+    node-emoji "^1.8.1"
+    normalize-path "^3.0.0"
+    object-hash "^2.2.0"
+    postcss "^7"
+    postcss-functions "^3"
+    postcss-js "^2"
+    postcss-load-config "^3.1.0"
+    postcss-nested "^4"
+    postcss-selector-parser "^6.0.6"
+    postcss-value-parser "^4.1.0"
+    pretty-hrtime "^1.0.3"
+    purgecss "^4.0.3"
+    quick-lru "^5.1.1"
+    reduce-css-calc "^2.1.8"
+    resolve "^1.20.0"
+    tmp "^0.2.1"
+
 tapable@^1.0.0, tapable@^1.1.3:
   version "1.1.3"
   resolved "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz"
@@ -13584,6 +13864,16 @@ timsort@^0.3.0:
   resolved "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
+tiny-invariant@^1.0.2:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
+  integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==
+
+tiny-warning@^1.0.0, tiny-warning@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
+  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
+
 title-case@^3.0.3:
   version "3.0.3"
   resolved "https://registry.npmjs.org/title-case/-/title-case-3.0.3.tgz"
@@ -13598,6 +13888,13 @@ tmp@^0.0.33:
   dependencies:
     os-tmpdir "~1.0.2"
 
+tmp@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14"
+  integrity sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==
+  dependencies:
+    rimraf "^3.0.0"
+
 tmpl@1.0.x:
   version "1.0.4"
   resolved "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz"
@@ -14182,6 +14479,11 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
+value-equal@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c"
+  integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==
+
 value-or-promise@1.0.6:
   version "1.0.6"
   resolved "https://registry.npmjs.org/value-or-promise/-/value-or-promise-1.0.6.tgz"
@@ -14293,11 +14595,6 @@ wbuf@^1.1.0, wbuf@^1.7.3:
   dependencies:
     minimalistic-assert "^1.0.0"
 
-web-vitals@^1.0.1:
-  version "1.1.2"
-  resolved "https://registry.npmjs.org/web-vitals/-/web-vitals-1.1.2.tgz"
-  integrity sha512-PFMKIY+bRSXlMxVAQ+m2aw9c/ioUYfDgrYot0YUa+/xa0sakubWhSDyxAKwzymvXVdF4CZI71g06W+mqhzu6ig==
-
 webidl-conversions@^5.0.0:
   version "5.0.0"
   resolved "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-5.0.0.tgz"
@@ -14376,6 +14673,13 @@ webpack-manifest-plugin@2.2.0:
     object.entries "^1.1.0"
     tapable "^1.0.0"
 
+webpack-merge@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-4.2.2.tgz#a27c52ea783d1398afd2087f547d7b9d2f43634d"
+  integrity sha512-TUE1UGoTX2Cd42j3krGYqObZbOD+xF7u28WB7tfUordytSjbWTIjK/8V0amkBfTYN4/pB/GIDlJZZ657BGG19g==
+  dependencies:
+    lodash "^4.17.15"
+
 webpack-sources@^1.1.0, webpack-sources@^1.3.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1, webpack-sources@^1.4.3:
   version "1.4.3"
   resolved "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz"
@@ -14762,7 +15066,7 @@ xmlchars@^2.2.0:
   resolved "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz"
   integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
 
-xtend@^4.0.0, xtend@~4.0.1:
+xtend@^4.0.0, xtend@^4.0.2, xtend@~4.0.1:
   version "4.0.2"
   resolved "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz"
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
@@ -14792,7 +15096,7 @@ yaml-ast-parser@^0.0.43:
   resolved "https://registry.npmjs.org/yaml-ast-parser/-/yaml-ast-parser-0.0.43.tgz"
   integrity sha512-2PTINUwsRqSd+s8XxKaJWQlUuEMHJQyEuh2edBbW8KNJz0SJPwUSD2zRWqezFEdN7IzAgeuYHFUCF7o8zRdZ0A==
 
-yaml@^1.10.0, yaml@^1.7.2:
+yaml@^1.10.0, yaml@^1.10.2, yaml@^1.7.2:
   version "1.10.2"
   resolved "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==