2.0 (#523)
* set up tailwind * add typography tokens * add shadows tokens * add border radius tokens * add react-aria * update tailwind config * update tokens * fix deps * add blur variant * update tw config * upgrade storybook * update storybook config * add inter * wip button * wip input * wip tabs * update typography tokens * u storybook * add types to src root * update storybook config * add sb type * u storybook * add icon button * add input * add checkbox * add counter * update checkbox * add dropdown * update button * f storybook types * u deps * update base config * update icon imports * add text * update colors build output * fix import * update colors format * add .vsode setting * update components buidl * mv * u button * add popover * u * add types * u shortcut * fix icons attributes * f * mv * u * add toast * update tw formatting * rm apps * rm examples * rm tamagui * dist tailwind config * rm more * stricter tsconfig * add source field * remove tokens * rm tamagui files * add prettier config to components * u text props * add tooltip * u toast * do not pass props * u icon buton * u dropdown button * add icon only to button * u type * checkbox * wip * fix build * fix components build * u tooltip * add theme * add input * u checkbox * update dropdown-button * add dropdown menu * move input to be reviewew * u dropdown button * u * u popover * u tabs * mv IconComponent -> IconElement * u tag * u context tag * u * fix context tag story * add provider * u button * u avatar * f avatar * a opacity to avatar * f prettier * f avatar * f * f * rm old setting * fix button props * skeleton wip * rm config * a dropdown submenu * add blur variant * add step * add step to tabs * add blur to context tag * u * add 80 to community * u tw config * add type * u checkbox * fix dropdown menu checkbox item * u button * unify content * customize color globally * add icons stories * add colors story * rm * u * rm dep * cleanup * u tsconfig * f opacity for emoji * remove "web#build" task from turbo.json * f dropdown menu * u tw export * add license * add changeset * update readme * f steps * f tag * f button * udpate colors format * update customisation color tailwind config * fix opacity * add shadow dark mode * u readme * u --------- Co-authored-by: Jakub Kotula <520927+jkbktl@users.noreply.github.com> Co-authored-by: Felicio Mununga <felicio@users.noreply.github.com>
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
'@status-im/eslint-config': major
|
||||
'@status-im/components': major
|
||||
'@status-im/js': major
|
||||
'@status-im/colors': major
|
||||
'@status-im/icons': major
|
||||
---
|
||||
|
||||
switch to tailwind
|
|
@ -4,5 +4,3 @@
|
|||
**/proto
|
||||
**/coverage
|
||||
**/storybook-static
|
||||
**/examples
|
||||
**/packages/status-react
|
||||
|
|
|
@ -11,7 +11,6 @@ env:
|
|||
NEXT_PUBLIC_GHOST_API_URL: ''
|
||||
NEXT_PUBLIC_GHOST_API_KEY: ''
|
||||
INFURA_API_KEY: ''
|
||||
TAMAGUI_TARGET: 'web'
|
||||
|
||||
jobs:
|
||||
build:
|
||||
|
|
|
@ -11,7 +11,6 @@ env:
|
|||
NEXT_PUBLIC_GHOST_API_URL: ''
|
||||
NEXT_PUBLIC_GHOST_API_KEY: ''
|
||||
INFURA_API_KEY: ''
|
||||
TAMAGUI_TARGET: 'web'
|
||||
|
||||
jobs:
|
||||
ci:
|
||||
|
|
|
@ -80,9 +80,6 @@ node_modules/
|
|||
# Vercel
|
||||
.vercel
|
||||
|
||||
# Tamagui
|
||||
.tamagui
|
||||
|
||||
# Storybook
|
||||
storybook-static
|
||||
|
||||
|
|
|
@ -1,5 +1,7 @@
|
|||
{
|
||||
"semi": false,
|
||||
"singleQuote": true,
|
||||
"arrowParens": "avoid"
|
||||
"arrowParens": "avoid",
|
||||
"plugins": ["prettier-plugin-tailwindcss"],
|
||||
"tailwindFunctions": ["cx", "cva"]
|
||||
}
|
||||
|
|
|
@ -1,11 +1,14 @@
|
|||
{
|
||||
"typescript.tsdk": "node_modules/typescript/lib",
|
||||
"eslint.packageManager": "yarn",
|
||||
"npm.packageManager": "yarn",
|
||||
"eslint.workingDirectories": [
|
||||
{
|
||||
"mode": "auto",
|
||||
"#comment": "See https://github.com/microsoft/vscode-eslint/issues/1161 for reason (i.e. multiple .eslintrc config files)"
|
||||
}
|
||||
],
|
||||
"tailwindCSS.experimental.classRegex": [
|
||||
["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
|
||||
["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
|
||||
]
|
||||
}
|
||||
|
|
|
@ -1,202 +0,0 @@
|
|||
|
||||
Apache License
|
||||
Version 2.0, January 2004
|
||||
http://www.apache.org/licenses/
|
||||
|
||||
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
||||
|
||||
1. Definitions.
|
||||
|
||||
"License" shall mean the terms and conditions for use, reproduction,
|
||||
and distribution as defined by Sections 1 through 9 of this document.
|
||||
|
||||
"Licensor" shall mean the copyright owner or entity authorized by
|
||||
the copyright owner that is granting the License.
|
||||
|
||||
"Legal Entity" shall mean the union of the acting entity and all
|
||||
other entities that control, are controlled by, or are under common
|
||||
control with that entity. For the purposes of this definition,
|
||||
"control" means (i) the power, direct or indirect, to cause the
|
||||
direction or management of such entity, whether by contract or
|
||||
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
||||
outstanding shares, or (iii) beneficial ownership of such entity.
|
||||
|
||||
"You" (or "Your") shall mean an individual or Legal Entity
|
||||
exercising permissions granted by this License.
|
||||
|
||||
"Source" form shall mean the preferred form for making modifications,
|
||||
including but not limited to software source code, documentation
|
||||
source, and configuration files.
|
||||
|
||||
"Object" form shall mean any form resulting from mechanical
|
||||
transformation or translation of a Source form, including but
|
||||
not limited to compiled object code, generated documentation,
|
||||
and conversions to other media types.
|
||||
|
||||
"Work" shall mean the work of authorship, whether in Source or
|
||||
Object form, made available under the License, as indicated by a
|
||||
copyright notice that is included in or attached to the work
|
||||
(an example is provided in the Appendix below).
|
||||
|
||||
"Derivative Works" shall mean any work, whether in Source or Object
|
||||
form, that is based on (or derived from) the Work and for which the
|
||||
editorial revisions, annotations, elaborations, or other modifications
|
||||
represent, as a whole, an original work of authorship. For the purposes
|
||||
of this License, Derivative Works shall not include works that remain
|
||||
separable from, or merely link (or bind by name) to the interfaces of,
|
||||
the Work and Derivative Works thereof.
|
||||
|
||||
"Contribution" shall mean any work of authorship, including
|
||||
the original version of the Work and any modifications or additions
|
||||
to that Work or Derivative Works thereof, that is intentionally
|
||||
submitted to Licensor for inclusion in the Work by the copyright owner
|
||||
or by an individual or Legal Entity authorized to submit on behalf of
|
||||
the copyright owner. For the purposes of this definition, "submitted"
|
||||
means any form of electronic, verbal, or written communication sent
|
||||
to the Licensor or its representatives, including but not limited to
|
||||
communication on electronic mailing lists, source code control systems,
|
||||
and issue tracking systems that are managed by, or on behalf of, the
|
||||
Licensor for the purpose of discussing and improving the Work, but
|
||||
excluding communication that is conspicuously marked or otherwise
|
||||
designated in writing by the copyright owner as "Not a Contribution."
|
||||
|
||||
"Contributor" shall mean Licensor and any individual or Legal Entity
|
||||
on behalf of whom a Contribution has been received by Licensor and
|
||||
subsequently incorporated within the Work.
|
||||
|
||||
2. Grant of Copyright License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
copyright license to reproduce, prepare Derivative Works of,
|
||||
publicly display, publicly perform, sublicense, and distribute the
|
||||
Work and such Derivative Works in Source or Object form.
|
||||
|
||||
3. Grant of Patent License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
(except as stated in this section) patent license to make, have made,
|
||||
use, offer to sell, sell, import, and otherwise transfer the Work,
|
||||
where such license applies only to those patent claims licensable
|
||||
by such Contributor that are necessarily infringed by their
|
||||
Contribution(s) alone or by combination of their Contribution(s)
|
||||
with the Work to which such Contribution(s) was submitted. If You
|
||||
institute patent litigation against any entity (including a
|
||||
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
||||
or a Contribution incorporated within the Work constitutes direct
|
||||
or contributory patent infringement, then any patent licenses
|
||||
granted to You under this License for that Work shall terminate
|
||||
as of the date such litigation is filed.
|
||||
|
||||
4. Redistribution. You may reproduce and distribute copies of the
|
||||
Work or Derivative Works thereof in any medium, with or without
|
||||
modifications, and in Source or Object form, provided that You
|
||||
meet the following conditions:
|
||||
|
||||
(a) You must give any other recipients of the Work or
|
||||
Derivative Works a copy of this License; and
|
||||
|
||||
(b) You must cause any modified files to carry prominent notices
|
||||
stating that You changed the files; and
|
||||
|
||||
(c) You must retain, in the Source form of any Derivative Works
|
||||
that You distribute, all copyright, patent, trademark, and
|
||||
attribution notices from the Source form of the Work,
|
||||
excluding those notices that do not pertain to any part of
|
||||
the Derivative Works; and
|
||||
|
||||
(d) If the Work includes a "NOTICE" text file as part of its
|
||||
distribution, then any Derivative Works that You distribute must
|
||||
include a readable copy of the attribution notices contained
|
||||
within such NOTICE file, excluding those notices that do not
|
||||
pertain to any part of the Derivative Works, in at least one
|
||||
of the following places: within a NOTICE text file distributed
|
||||
as part of the Derivative Works; within the Source form or
|
||||
documentation, if provided along with the Derivative Works; or,
|
||||
within a display generated by the Derivative Works, if and
|
||||
wherever such third-party notices normally appear. The contents
|
||||
of the NOTICE file are for informational purposes only and
|
||||
do not modify the License. You may add Your own attribution
|
||||
notices within Derivative Works that You distribute, alongside
|
||||
or as an addendum to the NOTICE text from the Work, provided
|
||||
that such additional attribution notices cannot be construed
|
||||
as modifying the License.
|
||||
|
||||
You may add Your own copyright statement to Your modifications and
|
||||
may provide additional or different license terms and conditions
|
||||
for use, reproduction, or distribution of Your modifications, or
|
||||
for any such Derivative Works as a whole, provided Your use,
|
||||
reproduction, and distribution of the Work otherwise complies with
|
||||
the conditions stated in this License.
|
||||
|
||||
5. Submission of Contributions. Unless You explicitly state otherwise,
|
||||
any Contribution intentionally submitted for inclusion in the Work
|
||||
by You to the Licensor shall be under the terms and conditions of
|
||||
this License, without any additional terms or conditions.
|
||||
Notwithstanding the above, nothing herein shall supersede or modify
|
||||
the terms of any separate license agreement you may have executed
|
||||
with Licensor regarding such Contributions.
|
||||
|
||||
6. Trademarks. This License does not grant permission to use the trade
|
||||
names, trademarks, service marks, or product names of the Licensor,
|
||||
except as required for reasonable and customary use in describing the
|
||||
origin of the Work and reproducing the content of the NOTICE file.
|
||||
|
||||
7. Disclaimer of Warranty. Unless required by applicable law or
|
||||
agreed to in writing, Licensor provides the Work (and each
|
||||
Contributor provides its Contributions) on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
||||
implied, including, without limitation, any warranties or conditions
|
||||
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
||||
PARTICULAR PURPOSE. You are solely responsible for determining the
|
||||
appropriateness of using or redistributing the Work and assume any
|
||||
risks associated with Your exercise of permissions under this License.
|
||||
|
||||
8. Limitation of Liability. In no event and under no legal theory,
|
||||
whether in tort (including negligence), contract, or otherwise,
|
||||
unless required by applicable law (such as deliberate and grossly
|
||||
negligent acts) or agreed to in writing, shall any Contributor be
|
||||
liable to You for damages, including any direct, indirect, special,
|
||||
incidental, or consequential damages of any character arising as a
|
||||
result of this License or out of the use or inability to use the
|
||||
Work (including but not limited to damages for loss of goodwill,
|
||||
work stoppage, computer failure or malfunction, or any and all
|
||||
other commercial damages or losses), even if such Contributor
|
||||
has been advised of the possibility of such damages.
|
||||
|
||||
9. Accepting Warranty or Additional Liability. While redistributing
|
||||
the Work or Derivative Works thereof, You may choose to offer,
|
||||
and charge a fee for, acceptance of support, warranty, indemnity,
|
||||
or other liability obligations and/or rights consistent with this
|
||||
License. However, in accepting such obligations, You may act only
|
||||
on Your own behalf and on Your sole responsibility, not on behalf
|
||||
of any other Contributor, and only if You agree to indemnify,
|
||||
defend, and hold each Contributor harmless for any liability
|
||||
incurred by, or claims asserted against, such Contributor by reason
|
||||
of your accepting any such warranty or additional liability.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
||||
APPENDIX: How to apply the Apache License to your work.
|
||||
|
||||
To apply the Apache License to your work, attach the following
|
||||
boilerplate notice, with the fields enclosed by brackets "[]"
|
||||
replaced with your own identifying information. (Don't include
|
||||
the brackets!) The text should be enclosed in the appropriate
|
||||
comment syntax for the file format. We also recommend that a
|
||||
file or class name and description of purpose be included on the
|
||||
same "printed page" as the copyright notice for easier
|
||||
identification within third-party archives.
|
||||
|
||||
Copyright 2018 Status Research & Development GmbH
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
21
LICENSE-MIT
|
@ -1,21 +0,0 @@
|
|||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2021 Status Research & Development GmbH
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
|
@ -0,0 +1,346 @@
|
|||
# Mozilla Public License Version 2.0
|
||||
|
||||
### 1. Definitions
|
||||
|
||||
**1.1. “Contributor”**
|
||||
means each individual or legal entity that creates, contributes to
|
||||
the creation of, or owns Covered Software.
|
||||
|
||||
**1.2. “Contributor Version”**
|
||||
means the combination of the Contributions of others (if any) used
|
||||
by a Contributor and that particular Contributor's Contribution.
|
||||
|
||||
**1.3. “Contribution”**
|
||||
means Covered Software of a particular Contributor.
|
||||
|
||||
**1.4. “Covered Software”**
|
||||
means Source Code Form to which the initial Contributor has attached
|
||||
the notice in Exhibit A, the Executable Form of such Source Code
|
||||
Form, and Modifications of such Source Code Form, in each case
|
||||
including portions thereof.
|
||||
|
||||
**1.5. “Incompatible With Secondary Licenses”**
|
||||
means
|
||||
|
||||
- **(a)** that the initial Contributor has attached the notice described
|
||||
in Exhibit B to the Covered Software; or
|
||||
- **(b)** that the Covered Software was made available under the terms of
|
||||
version 1.1 or earlier of the License, but not also under the
|
||||
terms of a Secondary License.
|
||||
|
||||
**1.6. “Executable Form”**
|
||||
means any form of the work other than Source Code Form.
|
||||
|
||||
**1.7. “Larger Work”**
|
||||
means a work that combines Covered Software with other material, in
|
||||
a separate file or files, that is not Covered Software.
|
||||
|
||||
**1.8. “License”**
|
||||
means this document.
|
||||
|
||||
**1.9. “Licensable”**
|
||||
means having the right to grant, to the maximum extent possible,
|
||||
whether at the time of the initial grant or subsequently, any and
|
||||
all of the rights conveyed by this License.
|
||||
|
||||
**1.10. “Modifications”**
|
||||
means any of the following:
|
||||
|
||||
- **(a)** any file in Source Code Form that results from an addition to,
|
||||
deletion from, or modification of the contents of Covered
|
||||
Software; or
|
||||
- **(b)** any new file in Source Code Form that contains any Covered
|
||||
Software.
|
||||
|
||||
**1.11. “Patent Claims” of a Contributor**
|
||||
means any patent claim(s), including without limitation, method,
|
||||
process, and apparatus claims, in any patent Licensable by such
|
||||
Contributor that would be infringed, but for the grant of the
|
||||
License, by the making, using, selling, offering for sale, having
|
||||
made, import, or transfer of either its Contributions or its
|
||||
Contributor Version.
|
||||
|
||||
**1.12. “Secondary License”**
|
||||
means either the GNU General Public License, Version 2.0, the GNU
|
||||
Lesser General Public License, Version 2.1, the GNU Affero General
|
||||
Public License, Version 3.0, or any later versions of those
|
||||
licenses.
|
||||
|
||||
**1.13. “Source Code Form”**
|
||||
means the form of the work preferred for making modifications.
|
||||
|
||||
**1.14. “You” (or “Your”)**
|
||||
means an individual or a legal entity exercising rights under this
|
||||
License. For legal entities, “You” includes any entity that
|
||||
controls, is controlled by, or is under common control with You. For
|
||||
purposes of this definition, “control” means **(a)** the power, direct
|
||||
or indirect, to cause the direction or management of such entity,
|
||||
whether by contract or otherwise, or **(b)** ownership of more than
|
||||
fifty percent (50%) of the outstanding shares or beneficial
|
||||
ownership of such entity.
|
||||
|
||||
### 2. License Grants and Conditions
|
||||
|
||||
#### 2.1. Grants
|
||||
|
||||
Each Contributor hereby grants You a world-wide, royalty-free,
|
||||
non-exclusive license:
|
||||
|
||||
- **(a)** under intellectual property rights (other than patent or trademark)
|
||||
Licensable by such Contributor to use, reproduce, make available,
|
||||
modify, display, perform, distribute, and otherwise exploit its
|
||||
Contributions, either on an unmodified basis, with Modifications, or
|
||||
as part of a Larger Work; and
|
||||
- **(b)** under Patent Claims of such Contributor to make, use, sell, offer
|
||||
for sale, have made, import, and otherwise transfer either its
|
||||
Contributions or its Contributor Version.
|
||||
|
||||
#### 2.2. Effective Date
|
||||
|
||||
The licenses granted in Section 2.1 with respect to any Contribution
|
||||
become effective for each Contribution on the date the Contributor first
|
||||
distributes such Contribution.
|
||||
|
||||
#### 2.3. Limitations on Grant Scope
|
||||
|
||||
The licenses granted in this Section 2 are the only rights granted under
|
||||
this License. No additional rights or licenses will be implied from the
|
||||
distribution or licensing of Covered Software under this License.
|
||||
Notwithstanding Section 2.1(b) above, no patent license is granted by a
|
||||
Contributor:
|
||||
|
||||
- **(a)** for any code that a Contributor has removed from Covered Software;
|
||||
or
|
||||
- **(b)** for infringements caused by: **(i)** Your and any other third party's
|
||||
modifications of Covered Software, or **(ii)** the combination of its
|
||||
Contributions with other software (except as part of its Contributor
|
||||
Version); or
|
||||
- **(c)** under Patent Claims infringed by Covered Software in the absence of
|
||||
its Contributions.
|
||||
|
||||
This License does not grant any rights in the trademarks, service marks,
|
||||
or logos of any Contributor (except as may be necessary to comply with
|
||||
the notice requirements in Section 3.4).
|
||||
|
||||
#### 2.4. Subsequent Licenses
|
||||
|
||||
No Contributor makes additional grants as a result of Your choice to
|
||||
distribute the Covered Software under a subsequent version of this
|
||||
License (see Section 10.2) or under the terms of a Secondary License (if
|
||||
permitted under the terms of Section 3.3).
|
||||
|
||||
#### 2.5. Representation
|
||||
|
||||
Each Contributor represents that the Contributor believes its
|
||||
Contributions are its original creation(s) or it has sufficient rights
|
||||
to grant the rights to its Contributions conveyed by this License.
|
||||
|
||||
#### 2.6. Fair Use
|
||||
|
||||
This License is not intended to limit any rights You have under
|
||||
applicable copyright doctrines of fair use, fair dealing, or other
|
||||
equivalents.
|
||||
|
||||
#### 2.7. Conditions
|
||||
|
||||
Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted
|
||||
in Section 2.1.
|
||||
|
||||
### 3. Responsibilities
|
||||
|
||||
#### 3.1. Distribution of Source Form
|
||||
|
||||
All distribution of Covered Software in Source Code Form, including any
|
||||
Modifications that You create or to which You contribute, must be under
|
||||
the terms of this License. You must inform recipients that the Source
|
||||
Code Form of the Covered Software is governed by the terms of this
|
||||
License, and how they can obtain a copy of this License. You may not
|
||||
attempt to alter or restrict the recipients' rights in the Source Code
|
||||
Form.
|
||||
|
||||
#### 3.2. Distribution of Executable Form
|
||||
|
||||
If You distribute Covered Software in Executable Form then:
|
||||
|
||||
- **(a)** such Covered Software must also be made available in Source Code
|
||||
Form, as described in Section 3.1, and You must inform recipients of
|
||||
the Executable Form how they can obtain a copy of such Source Code
|
||||
Form by reasonable means in a timely manner, at a charge no more
|
||||
than the cost of distribution to the recipient; and
|
||||
|
||||
- **(b)** You may distribute such Executable Form under the terms of this
|
||||
License, or sublicense it under different terms, provided that the
|
||||
license for the Executable Form does not attempt to limit or alter
|
||||
the recipients' rights in the Source Code Form under this License.
|
||||
|
||||
#### 3.3. Distribution of a Larger Work
|
||||
|
||||
You may create and distribute a Larger Work under terms of Your choice,
|
||||
provided that You also comply with the requirements of this License for
|
||||
the Covered Software. If the Larger Work is a combination of Covered
|
||||
Software with a work governed by one or more Secondary Licenses, and the
|
||||
Covered Software is not Incompatible With Secondary Licenses, this
|
||||
License permits You to additionally distribute such Covered Software
|
||||
under the terms of such Secondary License(s), so that the recipient of
|
||||
the Larger Work may, at their option, further distribute the Covered
|
||||
Software under the terms of either this License or such Secondary
|
||||
License(s).
|
||||
|
||||
#### 3.4. Notices
|
||||
|
||||
You may not remove or alter the substance of any license notices
|
||||
(including copyright notices, patent notices, disclaimers of warranty,
|
||||
or limitations of liability) contained within the Source Code Form of
|
||||
the Covered Software, except that You may alter any license notices to
|
||||
the extent required to remedy known factual inaccuracies.
|
||||
|
||||
#### 3.5. Application of Additional Terms
|
||||
|
||||
You may choose to offer, and to charge a fee for, warranty, support,
|
||||
indemnity or liability obligations to one or more recipients of Covered
|
||||
Software. However, You may do so only on Your own behalf, and not on
|
||||
behalf of any Contributor. You must make it absolutely clear that any
|
||||
such warranty, support, indemnity, or liability obligation is offered by
|
||||
You alone, and You hereby agree to indemnify every Contributor for any
|
||||
liability incurred by such Contributor as a result of warranty, support,
|
||||
indemnity or liability terms You offer. You may include additional
|
||||
disclaimers of warranty and limitations of liability specific to any
|
||||
jurisdiction.
|
||||
|
||||
### 4. Inability to Comply Due to Statute or Regulation
|
||||
|
||||
If it is impossible for You to comply with any of the terms of this
|
||||
License with respect to some or all of the Covered Software due to
|
||||
statute, judicial order, or regulation then You must: **(a)** comply with
|
||||
the terms of this License to the maximum extent possible; and **(b)**
|
||||
describe the limitations and the code they affect. Such description must
|
||||
be placed in a text file included with all distributions of the Covered
|
||||
Software under this License. Except to the extent prohibited by statute
|
||||
or regulation, such description must be sufficiently detailed for a
|
||||
recipient of ordinary skill to be able to understand it.
|
||||
|
||||
### 5. Termination
|
||||
|
||||
**5.1.** The rights granted under this License will terminate automatically
|
||||
if You fail to comply with any of its terms. However, if You become
|
||||
compliant, then the rights granted under this License from a particular
|
||||
Contributor are reinstated **(a)** provisionally, unless and until such
|
||||
Contributor explicitly and finally terminates Your grants, and **(b)** on an
|
||||
ongoing basis, if such Contributor fails to notify You of the
|
||||
non-compliance by some reasonable means prior to 60 days after You have
|
||||
come back into compliance. Moreover, Your grants from a particular
|
||||
Contributor are reinstated on an ongoing basis if such Contributor
|
||||
notifies You of the non-compliance by some reasonable means, this is the
|
||||
first time You have received notice of non-compliance with this License
|
||||
from such Contributor, and You become compliant prior to 30 days after
|
||||
Your receipt of the notice.
|
||||
|
||||
**5.2.** If You initiate litigation against any entity by asserting a patent
|
||||
infringement claim (excluding declaratory judgment actions,
|
||||
counter-claims, and cross-claims) alleging that a Contributor Version
|
||||
directly or indirectly infringes any patent, then the rights granted to
|
||||
You by any and all Contributors for the Covered Software under Section
|
||||
2.1 of this License shall terminate.
|
||||
|
||||
**5.3.** In the event of termination under Sections 5.1 or 5.2 above, all
|
||||
end user license agreements (excluding distributors and resellers) which
|
||||
have been validly granted by You or Your distributors under this License
|
||||
prior to termination shall survive termination.
|
||||
|
||||
### 6. Disclaimer of Warranty
|
||||
|
||||
> Covered Software is provided under this License on an “as is”
|
||||
> basis, without warranty of any kind, either expressed, implied, or
|
||||
> statutory, including, without limitation, warranties that the
|
||||
> Covered Software is free of defects, merchantable, fit for a
|
||||
> particular purpose or non-infringing. The entire risk as to the
|
||||
> quality and performance of the Covered Software is with You.
|
||||
> Should any Covered Software prove defective in any respect, You
|
||||
> (not any Contributor) assume the cost of any necessary servicing,
|
||||
> repair, or correction. This disclaimer of warranty constitutes an
|
||||
> essential part of this License. No use of any Covered Software is
|
||||
> authorized under this License except under this disclaimer.
|
||||
|
||||
### 7. Limitation of Liability
|
||||
|
||||
> Under no circumstances and under no legal theory, whether tort
|
||||
> (including negligence), contract, or otherwise, shall any
|
||||
> Contributor, or anyone who distributes Covered Software as
|
||||
> permitted above, be liable to You for any direct, indirect,
|
||||
> special, incidental, or consequential damages of any character
|
||||
> including, without limitation, damages for lost profits, loss of
|
||||
> goodwill, work stoppage, computer failure or malfunction, or any
|
||||
> and all other commercial damages or losses, even if such party
|
||||
> shall have been informed of the possibility of such damages. This
|
||||
> limitation of liability shall not apply to liability for death or
|
||||
> personal injury resulting from such party's negligence to the
|
||||
> extent applicable law prohibits such limitation. Some
|
||||
> jurisdictions do not allow the exclusion or limitation of
|
||||
> incidental or consequential damages, so this exclusion and
|
||||
> limitation may not apply to You.
|
||||
|
||||
### 8. Litigation
|
||||
|
||||
Any litigation relating to this License may be brought only in the
|
||||
courts of a jurisdiction where the defendant maintains its principal
|
||||
place of business and such litigation shall be governed by laws of that
|
||||
jurisdiction, without reference to its conflict-of-law provisions.
|
||||
Nothing in this Section shall prevent a party's ability to bring
|
||||
cross-claims or counter-claims.
|
||||
|
||||
### 9. Miscellaneous
|
||||
|
||||
This License represents the complete agreement concerning the subject
|
||||
matter hereof. If any provision of this License is held to be
|
||||
unenforceable, such provision shall be reformed only to the extent
|
||||
necessary to make it enforceable. Any law or regulation which provides
|
||||
that the language of a contract shall be construed against the drafter
|
||||
shall not be used to construe this License against a Contributor.
|
||||
|
||||
### 10. Versions of the License
|
||||
|
||||
#### 10.1. New Versions
|
||||
|
||||
Mozilla Foundation is the license steward. Except as provided in Section
|
||||
10.3, no one other than the license steward has the right to modify or
|
||||
publish new versions of this License. Each version will be given a
|
||||
distinguishing version number.
|
||||
|
||||
#### 10.2. Effect of New Versions
|
||||
|
||||
You may distribute the Covered Software under the terms of the version
|
||||
of the License under which You originally received the Covered Software,
|
||||
or under the terms of any subsequent version published by the license
|
||||
steward.
|
||||
|
||||
#### 10.3. Modified Versions
|
||||
|
||||
If you create software not governed by this License, and you want to
|
||||
create a new license for such software, you may create and use a
|
||||
modified version of this License if you rename the license and remove
|
||||
any references to the name of the license steward (except to note that
|
||||
such modified license differs from this License).
|
||||
|
||||
#### 10.4. Distributing Source Code Form that is Incompatible With Secondary Licenses
|
||||
|
||||
If You choose to distribute Source Code Form that is Incompatible With
|
||||
Secondary Licenses under the terms of this version of the License, the
|
||||
notice described in Exhibit B of this License must be attached.
|
||||
|
||||
## Exhibit A - Source Code Form License Notice
|
||||
|
||||
This Source Code Form is subject to the terms of the Mozilla Public
|
||||
License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
|
||||
If it is not possible or desirable to put the notice in a particular
|
||||
file, then You may include the notice in a location (such as a LICENSE
|
||||
file in a relevant directory) where a recipient would be likely to look
|
||||
for such a notice.
|
||||
|
||||
You may add additional accurate notices of copyright ownership.
|
||||
|
||||
## Exhibit B - “Incompatible With Secondary Licenses” Notice
|
||||
|
||||
This Source Code Form is "Incompatible With Secondary Licenses", as
|
||||
defined by the Mozilla Public License, v. 2.0.
|
165
README.md
|
@ -1,130 +1,85 @@
|
|||
# Status Web 🌐
|
||||
# `status-web`
|
||||
|
||||
[![CI](https://github.com/status-im/status-web/actions/workflows/ci.yml/badge.svg)](https://github.com/status-im/status-web/actions/workflows/ci.yml)
|
||||
|
||||
## About
|
||||
This monorepo contains packages for building web applications in the Status ecosystem. These packages can be used separately or combined to create consistent and beautiful user interfaces.
|
||||
|
||||
Embeddable, customizable and themable component for your Status Community.
|
||||
## Packages
|
||||
|
||||
### Who
|
||||
| Name | `npm` | Description |
|
||||
| ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| [`@status-im/components`](./packages/components) | [![npm version](https://img.shields.io/npm/v/@status-im/components)](https://www.npmjs.com/package/@status-im/components) | Component library built with Radix UI, React Aria, Tailwind CSS. |
|
||||
| [`@status-im/js`](./packages/status-js) | [![npm version](https://img.shields.io/npm/v/@status-im/js)](https://www.npmjs.com/package/@status-im/js) | Libary for Waku protocol integration and blockchain interactions. |
|
||||
| [`@status-im/icons`](./packages/icons) | [![npm version](https://img.shields.io/npm/v/@status-im/icons)](https://www.npmjs.com/package/@status-im/icons) | Auto-generated icon library based on our [design system](https://www.figma.com/design/qLLuMLfpGxK9OfpIavwsmK/Iconset?node-id=3239-987&node-type=frame&t=0h8iIiZ3Sf0g4MRV-11). |
|
||||
| [`@status-im/colors`](./packages/colors) | [![npm version](https://img.shields.io/npm/v/@status-im/colors.svg)](https://www.npmjs.com/package/@status-im/colors) | Auto-generated color palette based on our [design system](https://www.figma.com/design/v98g9ZiaSHYUdKWrbFg9eM/Foundations?node-id=619-5995&node-type=canvas&m=dev). |
|
||||
| [`@status-im/eslint-config`](./packages/eslint-config) | | Shared ESLint configuration for consistent code style across projects. |
|
||||
|
||||
- For community leaders
|
||||
- online content creators
|
||||
- and their followers
|
||||
## Prerequisites
|
||||
|
||||
### What
|
||||
Required:
|
||||
|
||||
- It is 100% open source
|
||||
- 100% decentralized
|
||||
- Peer-to-peer
|
||||
- Private
|
||||
- Pseudoanonymous
|
||||
- End-to-end encrypted
|
||||
- Free
|
||||
- Permissionless
|
||||
- Serverless
|
||||
- Group chat platform
|
||||
- And a virtual space outside the jurisdiction of any government
|
||||
- **[Node.js](https://nodejs.org/)** v18.x
|
||||
- **[Yarn](https://yarnpkg.com/)** v1.22.x
|
||||
|
||||
### Why
|
||||
Recommended:
|
||||
|
||||
- To communicate and collaborate freely without worrying about
|
||||
- Censorship
|
||||
- Persecution
|
||||
- Chilling effects
|
||||
- Interference
|
||||
- Oppression
|
||||
- Being deplatformed, or shut down
|
||||
- Support
|
||||
- Autonomy
|
||||
- Free speech
|
||||
- Freedom of association
|
||||
- Freedom to transact
|
||||
- Right to privacy
|
||||
- Crypto native and frictionless integration
|
||||
- Monetization
|
||||
- Facilitation of sharing of common interests, needs, desires and values
|
||||
- Be trusted alternative to centralized group chat application
|
||||
- **[Visual Studio Code](https://code.visualstudio.com/)**
|
||||
- install extensions listed in `.vscode/extensions.json` for optimal development experience
|
||||
|
||||
## Usage
|
||||
## Stack
|
||||
|
||||
### For Community owners 👥
|
||||
- **Turborepo**: Manages our monorepo and speeds up builds
|
||||
- **TypeScript**: Adds type safety to our code
|
||||
- **React**: Our main library for building UIs
|
||||
- **Radix UI / React Aria**: Provides accessible UI primitives
|
||||
- **Tailwind CSS**: Used for styling
|
||||
- **Vite**: Our build tool and dev server
|
||||
- **Storybook**: For developing and showcasing components
|
||||
- **ESLint**: Keeps our code consistent and catches potential issues
|
||||
- **Prettier**: Formats our code
|
||||
- **Changesets**: Manages versioning and changelogs
|
||||
|
||||
**Get public key to your pre-existing Community:**
|
||||
## Getting Started
|
||||
|
||||
1. Open Status Desktop
|
||||
2. Select Community
|
||||
3. Click on its overview in upper left corner
|
||||
4. Invite new people
|
||||
5. Share community
|
||||
6. Get only the public key from the URL (e.g. `0x033c88c950480493e2e759923bd38f9aad88e1b36295757a598679a569e6a96801`)
|
||||
1. Clone the repository:
|
||||
|
||||
**Or create new one first:**
|
||||
```
|
||||
git clone https://github.com/status-im/status-web.git
|
||||
cd status-web
|
||||
```
|
||||
|
||||
1. Get Status Desktop at <https://status.im/get>
|
||||
2. Go to Chat
|
||||
3. Click on plus icon
|
||||
4. Click on Communities
|
||||
2. Install dependencies:
|
||||
|
||||
**Use the Community component:**
|
||||
```
|
||||
yarn install
|
||||
```
|
||||
|
||||
In your project,
|
||||
3. Build all packages:
|
||||
|
||||
Install package:
|
||||
```
|
||||
yarn build
|
||||
```
|
||||
|
||||
```sh
|
||||
npm install @status-im/react
|
||||
4. Run tests:
|
||||
|
||||
```
|
||||
yarn test
|
||||
```
|
||||
|
||||
5. Start development mode:
|
||||
```
|
||||
yarn dev
|
||||
```
|
||||
|
||||
## Storybook
|
||||
|
||||
To view and interact with the components, you can run Storybook:
|
||||
|
||||
```
|
||||
yarn storybook
|
||||
```
|
||||
|
||||
Import component:
|
||||
|
||||
```js
|
||||
import { Community } from '@status-im/react'
|
||||
```
|
||||
|
||||
Set component props:
|
||||
|
||||
```js
|
||||
<Community
|
||||
publicKey="0x033c88c950480493e2e759923bd38f9aad88e1b36295757a598679a569e6a96801"
|
||||
theme="light"
|
||||
/>
|
||||
```
|
||||
|
||||
For an example, see [examples/with-vite/src/app.tsx](./examples/with-vite/src/app.tsx).
|
||||
|
||||
### For User 👤
|
||||
|
||||
**Simply visit your Community's URL from the browser:**
|
||||
|
||||
If the Community doesn't require a joining request, that would be it. So look around and get the feel for the space.
|
||||
|
||||
**Once ready to chat, create a throwaway profile:**
|
||||
|
||||
Use Throwaway Profile > wait for your request to be approved and the chat input enabled > react to and write messages
|
||||
|
||||
**Optionally, you could even run the application locally yourself.**
|
||||
|
||||
Get the source ready:
|
||||
|
||||
```sh
|
||||
git clone https://github.com/status-im/status-web.git
|
||||
cd ./status-web
|
||||
yarn install
|
||||
yarn run build
|
||||
```
|
||||
|
||||
Add your Community's public key to your environment:
|
||||
|
||||
```sh
|
||||
echo 'PUBLIC_KEY="0x033c88c950480493e2e759923bd38f9aad88e1b36295757a598679a569e6a96801"' >> examples/with-vite/.env
|
||||
```
|
||||
|
||||
And run it:
|
||||
|
||||
```sh
|
||||
yarn workspace with-vite run dev
|
||||
```
|
||||
This will start the Storybook server, allowing you to browse and test components in isolation.
|
||||
|
||||
## Sponsors
|
||||
|
||||
|
|
|
@ -1,3 +0,0 @@
|
|||
{
|
||||
"recommendations": ["tauri-apps.tauri-vscode", "rust-lang.rust-analyzer"]
|
||||
}
|
|
@ -1,7 +0,0 @@
|
|||
# Tauri + React + Typescript
|
||||
|
||||
This template should help get you started developing with Tauri, React and Typescript in Vite.
|
||||
|
||||
## Recommended IDE Setup
|
||||
|
||||
- [VS Code](https://code.visualstudio.com/) + [Tauri](https://marketplace.visualstudio.com/items?itemName=tauri-apps.tauri-vscode) + [rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer)
|
|
@ -1,27 +0,0 @@
|
|||
import react from '@vitejs/plugin-react'
|
||||
import { defineConfig } from 'vite'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
|
||||
// Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
|
||||
// prevent vite from obscuring rust errors
|
||||
clearScreen: false,
|
||||
// tauri expects a fixed port, fail if that port is not available
|
||||
server: {
|
||||
port: 1420,
|
||||
strictPort: true,
|
||||
},
|
||||
// to make use of `TAURI_DEBUG` and other env variables
|
||||
// https://tauri.studio/v1/api/config#buildconfig.beforedevcommand
|
||||
envPrefix: ['VITE_', 'TAURI_'],
|
||||
build: {
|
||||
// Tauri supports es2021
|
||||
target: process.env.TAURI_PLATFORM == 'windows' ? 'chrome105' : 'safari13',
|
||||
// don't minify for debug builds
|
||||
minify: !process.env.TAURI_DEBUG ? 'esbuild' : false,
|
||||
// produce sourcemaps for debug builds
|
||||
sourcemap: !!process.env.TAURI_DEBUG,
|
||||
},
|
||||
})
|
|
@ -1,36 +0,0 @@
|
|||
{
|
||||
"name": "desktop",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "tauri dev",
|
||||
"build": "vite build",
|
||||
"typecheck": "tsc",
|
||||
"preview": "vite preview",
|
||||
"clean": "rimraf node_modules .turbo"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tauri-apps/api": "^1.2.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tauri-apps/cli": "^1.2.2",
|
||||
"@types/node": "^18.15.11",
|
||||
"@types/react": "^18.0.33",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"@vitejs/plugin-react": "^3.1.0",
|
||||
"typescript": "^5.0.3",
|
||||
"vite": "^4.2.1"
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{ts,tsx,js,jsx,mjs}": [
|
||||
"eslint",
|
||||
"prettier --write"
|
||||
],
|
||||
"*.{md,mdx,yml,yaml,json}": [
|
||||
"prettier --write"
|
||||
]
|
||||
}
|
||||
}
|
|
@ -1,27 +0,0 @@
|
|||
[package]
|
||||
name = "desktop"
|
||||
version = "0.0.0"
|
||||
description = "A Tauri App"
|
||||
authors = ["you"]
|
||||
license = ""
|
||||
repository = ""
|
||||
edition = "2021"
|
||||
rust-version = "1.57"
|
||||
|
||||
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
|
||||
|
||||
[build-dependencies]
|
||||
tauri-build = { version = "1.2", features = [] }
|
||||
|
||||
[dependencies]
|
||||
serde_json = "1.0"
|
||||
serde = { version = "1.0", features = ["derive"] }
|
||||
tauri = { version = "1.2", features = ["api-all"] }
|
||||
|
||||
[features]
|
||||
# by default Tauri runs in production mode
|
||||
# when `tauri dev` runs it is executed with `cargo run --no-default-features` if `devPath` is an URL
|
||||
default = ["custom-protocol"]
|
||||
# this feature is used used for production builds where `devPath` points to the filesystem
|
||||
# DO NOT remove this
|
||||
custom-protocol = ["tauri/custom-protocol"]
|
|
@ -1,3 +0,0 @@
|
|||
fn main() {
|
||||
tauri_build::build()
|
||||
}
|
Before Width: | Height: | Size: 3.4 KiB |
Before Width: | Height: | Size: 6.8 KiB |
Before Width: | Height: | Size: 974 B |
Before Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 3.8 KiB |
Before Width: | Height: | Size: 3.9 KiB |
Before Width: | Height: | Size: 7.6 KiB |
Before Width: | Height: | Size: 903 B |
Before Width: | Height: | Size: 8.4 KiB |
Before Width: | Height: | Size: 1.3 KiB |
Before Width: | Height: | Size: 2.0 KiB |
Before Width: | Height: | Size: 2.4 KiB |
Before Width: | Height: | Size: 1.5 KiB |
Before Width: | Height: | Size: 85 KiB |
Before Width: | Height: | Size: 14 KiB |
|
@ -1,17 +0,0 @@
|
|||
#![cfg_attr(
|
||||
all(not(debug_assertions), target_os = "windows"),
|
||||
windows_subsystem = "windows"
|
||||
)]
|
||||
|
||||
// Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
|
||||
#[tauri::command]
|
||||
fn greet(name: &str) -> String {
|
||||
format!("Hello, {}! You've been greeted from Rust!", name)
|
||||
}
|
||||
|
||||
fn main() {
|
||||
tauri::Builder::default()
|
||||
.invoke_handler(tauri::generate_handler![greet])
|
||||
.run(tauri::generate_context!())
|
||||
.expect("error while running tauri application");
|
||||
}
|
|
@ -1,65 +0,0 @@
|
|||
{
|
||||
"build": {
|
||||
"devPath": "http://localhost:5173",
|
||||
"distDir": "../dist"
|
||||
},
|
||||
"package": {
|
||||
"productName": "desktop",
|
||||
"version": "0.0.0"
|
||||
},
|
||||
"tauri": {
|
||||
"allowlist": {
|
||||
"all": true
|
||||
},
|
||||
"bundle": {
|
||||
"active": true,
|
||||
"category": "DeveloperTool",
|
||||
"copyright": "",
|
||||
"deb": {
|
||||
"depends": []
|
||||
},
|
||||
"externalBin": [],
|
||||
"icon": [
|
||||
"icons/32x32.png",
|
||||
"icons/128x128.png",
|
||||
"icons/128x128@2x.png",
|
||||
"icons/icon.icns",
|
||||
"icons/icon.ico"
|
||||
],
|
||||
"identifier": "com.tauri.dev",
|
||||
"longDescription": "",
|
||||
"macOS": {
|
||||
"entitlements": null,
|
||||
"exceptionDomain": "",
|
||||
"frameworks": [],
|
||||
"providerShortName": null,
|
||||
"signingIdentity": null
|
||||
},
|
||||
"resources": [],
|
||||
"shortDescription": "",
|
||||
"targets": "all",
|
||||
"windows": {
|
||||
"certificateThumbprint": null,
|
||||
"digestAlgorithm": "sha256",
|
||||
"timestampUrl": ""
|
||||
}
|
||||
},
|
||||
"security": {
|
||||
"csp": null
|
||||
},
|
||||
"updater": {
|
||||
"active": false
|
||||
},
|
||||
"windows": [
|
||||
{
|
||||
"fullscreen": false,
|
||||
"height": 600,
|
||||
"resizable": true,
|
||||
"title": "desktop",
|
||||
"width": 800,
|
||||
"hiddenTitle": true,
|
||||
"titleBarStyle": "Overlay"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
|
@ -1,21 +0,0 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ESNext",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["DOM", "DOM.Iterable", "ESNext"],
|
||||
"allowJs": false,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": false,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx"
|
||||
},
|
||||
"include": ["src"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
|
@ -1,9 +0,0 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["_vite.config.ts"]
|
||||
}
|
|
@ -1,4 +0,0 @@
|
|||
{
|
||||
"root": true,
|
||||
"extends": ["@status-im/eslint-config"]
|
||||
}
|
|
@ -1,180 +0,0 @@
|
|||
// eslint-disable-next-line eslint-comments/disable-enable-pair
|
||||
/* eslint-disable import/namespace */
|
||||
import 'expo-dev-client'
|
||||
|
||||
import { useMemo, useState } from 'react'
|
||||
|
||||
import { useNavigation, useRoute } from '@react-navigation/native'
|
||||
import { createNativeStackNavigator } from '@react-navigation/native-stack'
|
||||
import { Heading, IconButton, Paragraph } from '@status-im/components'
|
||||
import { Avatar } from '@status-im/components/src/avatar'
|
||||
import { ArrowLeftIcon, MembersIcon } from '@status-im/icons'
|
||||
import { Stack as View, TamaguiProvider } from '@tamagui/core'
|
||||
import { useFonts } from 'expo-font'
|
||||
import { Platform } from 'react-native'
|
||||
import { SafeAreaProvider } from 'react-native-safe-area-context'
|
||||
import { AnimatePresence } from 'tamagui'
|
||||
|
||||
import { NavigationProvider } from './navigation/provider'
|
||||
import { ChannelScreen } from './screens/channel'
|
||||
import { HomeScreen } from './screens/home'
|
||||
import tamaguiConfig from './tamagui.config'
|
||||
|
||||
import type { RouteProp } from '@react-navigation/native'
|
||||
import type { HeaderBackButtonProps } from '@react-navigation/native-stack/lib/typescript/src/types'
|
||||
|
||||
export type RootStackParamList = {
|
||||
Home: undefined
|
||||
Channel: { channelId: string }
|
||||
}
|
||||
|
||||
const Stack = createNativeStackNavigator<RootStackParamList>()
|
||||
|
||||
const CustomHeaderLeft = (props: HeaderBackButtonProps) => {
|
||||
const navigation = useNavigation()
|
||||
const route = useRoute<RouteProp<RootStackParamList, 'Channel'>>()
|
||||
|
||||
return (
|
||||
<>
|
||||
<IconButton
|
||||
icon={<ArrowLeftIcon size={20} />}
|
||||
onPress={() => {
|
||||
props.canGoBack && navigation.goBack()
|
||||
}}
|
||||
/>
|
||||
<Paragraph weight="semibold" marginLeft={12}>
|
||||
# {route.params.channelId || 'channel'}
|
||||
</Paragraph>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
const [position, setPosition] = useState(0)
|
||||
|
||||
const [loaded] = useFonts({
|
||||
Inter: require('@tamagui/font-inter/otf/Inter-Medium.otf'),
|
||||
InterBold: require('@tamagui/font-inter/otf/Inter-Bold.otf'),
|
||||
// Tamagui does this for you on web, but you need to do it manually on native. Only for the demo. We should seek a better solution.
|
||||
UbuntuMono: require('./assets/fonts/UbuntuMono.ttf'),
|
||||
})
|
||||
|
||||
const onScroll = event => {
|
||||
if (event.nativeEvent.contentOffset.y > 90) {
|
||||
setPosition(event.nativeEvent.contentOffset.y)
|
||||
} else {
|
||||
setPosition(0)
|
||||
}
|
||||
}
|
||||
|
||||
const showMinimizedHeader = useMemo(() => {
|
||||
return position > 90
|
||||
}, [position])
|
||||
|
||||
if (!loaded) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<TamaguiProvider config={tamaguiConfig} defaultTheme="light">
|
||||
<NavigationProvider>
|
||||
<SafeAreaProvider>
|
||||
<Stack.Navigator
|
||||
screenOptions={{
|
||||
animation: 'slide_from_right',
|
||||
}}
|
||||
>
|
||||
<Stack.Screen
|
||||
name="Home"
|
||||
options={{
|
||||
headerTransparent: true,
|
||||
headerShadowVisible: false,
|
||||
header: () => (
|
||||
<View
|
||||
height={100}
|
||||
animation="fast"
|
||||
backgroundColor={
|
||||
showMinimizedHeader ? '$background' : 'transparent'
|
||||
}
|
||||
padding={16}
|
||||
paddingTop={48}
|
||||
flexDirection="row"
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
>
|
||||
<AnimatePresence>
|
||||
{showMinimizedHeader && (
|
||||
<View
|
||||
key="header"
|
||||
animation={[
|
||||
'fast',
|
||||
{
|
||||
opacity: {
|
||||
overshootClamping: true,
|
||||
},
|
||||
},
|
||||
]}
|
||||
enterStyle={{ opacity: 0 }}
|
||||
exitStyle={{ opacity: 0 }}
|
||||
opacity={1}
|
||||
flexDirection="row"
|
||||
alignItems="center"
|
||||
justifyContent="space-between"
|
||||
width="100%"
|
||||
>
|
||||
<Heading color="$textPrimary">Rarible</Heading>
|
||||
<Avatar
|
||||
src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images"
|
||||
size={48}
|
||||
outline
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</View>
|
||||
),
|
||||
}}
|
||||
>
|
||||
{props => (
|
||||
<HomeScreen
|
||||
{...props}
|
||||
onScroll={onScroll}
|
||||
isMinimized={showMinimizedHeader}
|
||||
/>
|
||||
)}
|
||||
</Stack.Screen>
|
||||
<Stack.Screen
|
||||
name="Channel"
|
||||
component={ChannelScreen}
|
||||
options={{
|
||||
headerBlurEffect: 'systemUltraThinMaterialLight',
|
||||
headerStyle: {
|
||||
backgroundColor: Platform.select({
|
||||
ios: 'transparent',
|
||||
default: 'white',
|
||||
}),
|
||||
},
|
||||
headerTransparent: true,
|
||||
headerShadowVisible: false,
|
||||
headerTitle: '',
|
||||
headerLeft(props) {
|
||||
return <CustomHeaderLeft {...props} />
|
||||
},
|
||||
headerRight() {
|
||||
return (
|
||||
<IconButton
|
||||
icon={<MembersIcon size={20} />}
|
||||
onPress={() => {
|
||||
// noop
|
||||
}}
|
||||
/>
|
||||
)
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Stack.Navigator>
|
||||
</SafeAreaProvider>
|
||||
</NavigationProvider>
|
||||
</TamaguiProvider>
|
||||
)
|
||||
}
|
|
@ -1,39 +0,0 @@
|
|||
{
|
||||
"expo": {
|
||||
"name": "mobile",
|
||||
"slug": "status-poc",
|
||||
"version": "1.0.3",
|
||||
"orientation": "portrait",
|
||||
"icon": "./assets/icon.png",
|
||||
"userInterfaceStyle": "light",
|
||||
"splash": {
|
||||
"image": "./assets/splash.png",
|
||||
"resizeMode": "contain",
|
||||
"backgroundColor": "#ffffff"
|
||||
},
|
||||
"updates": {
|
||||
"fallbackToCacheTimeout": 0
|
||||
},
|
||||
"assetBundlePatterns": ["**/*"],
|
||||
"ios": {
|
||||
"supportsTablet": true,
|
||||
"bundleIdentifier": "com.marcelines.statuspoc"
|
||||
},
|
||||
"android": {
|
||||
"adaptiveIcon": {
|
||||
"foregroundImage": "./assets/adaptive-icon.png",
|
||||
"backgroundColor": "#FFFFFF"
|
||||
},
|
||||
"package": "com.marcelines.statuspoc"
|
||||
},
|
||||
"web": {
|
||||
"favicon": "./assets/favicon.png"
|
||||
},
|
||||
"extra": {
|
||||
"eas": {
|
||||
"projectId": "e214cc8a-4e7e-4850-8a41-e280ca3a4469"
|
||||
}
|
||||
},
|
||||
"owner": "marcelines"
|
||||
}
|
||||
}
|
Before Width: | Height: | Size: 27 KiB |
Before Width: | Height: | Size: 1.4 KiB |
Before Width: | Height: | Size: 40 KiB |
Before Width: | Height: | Size: 24 KiB |
|
@ -1,39 +0,0 @@
|
|||
module.exports = function (api) {
|
||||
api.cache(true)
|
||||
return {
|
||||
presets: [['babel-preset-expo', { jsxRuntime: 'automatic' }]],
|
||||
plugins: [
|
||||
[
|
||||
require.resolve('babel-plugin-module-resolver'),
|
||||
{
|
||||
root: ['../..'],
|
||||
alias: {
|
||||
// define aliases to shorten the import paths
|
||||
|
||||
'@status-im/components': '../../packages/components',
|
||||
},
|
||||
extensions: ['.js', '.jsx', '.tsx', '.ios.js', '.android.js'],
|
||||
},
|
||||
],
|
||||
// if you want reanimated support
|
||||
// 'react-native-reanimated/plugin',
|
||||
...(process.env.EAS_BUILD_PLATFORM === 'android'
|
||||
? []
|
||||
: [
|
||||
[
|
||||
'@tamagui/babel-plugin',
|
||||
{
|
||||
components: ['@status-im/components'],
|
||||
config: './tamagui.config.ts',
|
||||
},
|
||||
],
|
||||
]),
|
||||
[
|
||||
'transform-inline-environment-variables',
|
||||
{
|
||||
include: 'TAMAGUI_TARGET',
|
||||
},
|
||||
],
|
||||
],
|
||||
}
|
||||
}
|
|
@ -1,23 +0,0 @@
|
|||
{
|
||||
"cli": {
|
||||
"version": ">= 3.3.2"
|
||||
},
|
||||
"build": {
|
||||
"development": {
|
||||
"developmentClient": true,
|
||||
"distribution": "internal"
|
||||
},
|
||||
"preview": {
|
||||
"distribution": "internal"
|
||||
},
|
||||
"production": {},
|
||||
"simulator": {
|
||||
"ios": {
|
||||
"simulator": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"submit": {
|
||||
"production": {}
|
||||
}
|
||||
}
|
|
@ -1,8 +0,0 @@
|
|||
import { registerRootComponent } from 'expo'
|
||||
|
||||
import App from './App'
|
||||
|
||||
// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
|
||||
// It also ensures that whether you load the app in Expo Go or in a native build,
|
||||
// the environment is set up appropriately
|
||||
registerRootComponent(App)
|
|
@ -1,21 +0,0 @@
|
|||
/* eslint-disable eslint-comments/disable-enable-pair */
|
||||
/* eslint-disable @typescript-eslint/no-var-requires */
|
||||
// Learn more https://docs.expo.io/guides/customizing-metro
|
||||
/**
|
||||
* @type {import('expo/metro-config')}
|
||||
*/
|
||||
const { getDefaultConfig } = require('@expo/metro-config')
|
||||
const path = require('path')
|
||||
|
||||
const projectRoot = __dirname
|
||||
const workspaceRoot = path.resolve(__dirname, '../..')
|
||||
|
||||
const config = getDefaultConfig(projectRoot)
|
||||
|
||||
config.watchFolders = [workspaceRoot]
|
||||
config.resolver.nodeModulesPaths = [
|
||||
path.resolve(projectRoot, 'node_modules'),
|
||||
path.resolve(workspaceRoot, 'node_modules'),
|
||||
]
|
||||
|
||||
module.exports = config
|
|
@ -1,9 +0,0 @@
|
|||
import { NavigationContainer } from '@react-navigation/native'
|
||||
|
||||
export function NavigationProvider({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return <NavigationContainer>{children}</NavigationContainer>
|
||||
}
|
|
@ -1,44 +0,0 @@
|
|||
{
|
||||
"name": "mobile",
|
||||
"version": "1.0.0",
|
||||
"main": "index.js",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "expo start -c",
|
||||
"ios": "TAMAGUI_TARGET=native yarn expo run:ios",
|
||||
"android": "TAMAGUI_TARGET=native yarn expo run:android",
|
||||
"start": "expo start --dev-client",
|
||||
"lint": "eslint screens",
|
||||
"#typecheck": "tsc",
|
||||
"clean": "rimraf node_modules .turbo"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.18.9",
|
||||
"@react-navigation/native": "^6.1.2",
|
||||
"@react-navigation/native-stack": "^6.9.8",
|
||||
"@status-im/components": "*",
|
||||
"expo": "~47.0.12",
|
||||
"expo-constants": "^14.0.2",
|
||||
"expo-dev-client": "^2.0.1",
|
||||
"expo-linear-gradient": "^12.0.1",
|
||||
"expo-splash-screen": "~0.17.5",
|
||||
"expo-status-bar": "^1.4.2",
|
||||
"expo-updates": "^0.15.6",
|
||||
"react": "18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-native": "0.70.5",
|
||||
"react-native-safe-area-context": "4.4.1",
|
||||
"react-native-screens": "~3.18.0",
|
||||
"react-native-svg": "^13.8.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.17.9",
|
||||
"@expo/metro-config": "^0.3.21",
|
||||
"@tamagui/babel-plugin": "1.74.21",
|
||||
"@types/react-native": "~0.70.6",
|
||||
"babel-plugin-module-resolver": "^4.1.0",
|
||||
"babel-plugin-transform-inline-environment-variables": "^0.4.4",
|
||||
"@status-im/eslint-config": "*",
|
||||
"typescript": "^5.0.3"
|
||||
}
|
||||
}
|
|
@ -1,53 +0,0 @@
|
|||
import { useRef } from 'react'
|
||||
|
||||
import { Composer, Messages } from '@status-im/components'
|
||||
import { Stack, useTheme } from '@tamagui/core'
|
||||
import { StatusBar } from 'expo-status-bar'
|
||||
import {
|
||||
Keyboard,
|
||||
KeyboardAvoidingView,
|
||||
Platform,
|
||||
TouchableWithoutFeedback,
|
||||
} from 'react-native'
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context'
|
||||
import { ScrollView } from 'tamagui'
|
||||
|
||||
import type { RootStackParamList } from '../App'
|
||||
import type { NativeStackScreenProps } from '@react-navigation/native-stack'
|
||||
|
||||
type ChannelScreenProps = NativeStackScreenProps<RootStackParamList, 'Channel'>
|
||||
|
||||
export const ChannelScreen = ({ route }: ChannelScreenProps) => {
|
||||
const insets = useSafeAreaInsets()
|
||||
const theme = useTheme()
|
||||
|
||||
// We need to get the channel name from the route params
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const _channelName = route.params.channelId
|
||||
const scrollRef = useRef(null)
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
||||
style={{ height: '100%', flex: 1, backgroundColor: theme.background.val }}
|
||||
>
|
||||
<StatusBar style={'dark'} animated />
|
||||
<ScrollView
|
||||
ref={scrollRef}
|
||||
paddingHorizontal={12}
|
||||
width="100%"
|
||||
onContentSizeChange={() => scrollRef.current?.scrollToEnd()}
|
||||
>
|
||||
<Stack pt={insets.top + 60} pb={insets.bottom}>
|
||||
<Messages />
|
||||
</Stack>
|
||||
</ScrollView>
|
||||
|
||||
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
|
||||
<Stack>
|
||||
<Composer />
|
||||
</Stack>
|
||||
</TouchableWithoutFeedback>
|
||||
</KeyboardAvoidingView>
|
||||
)
|
||||
}
|
|
@ -1,42 +0,0 @@
|
|||
// eslint-disable-next-line eslint-comments/disable-enable-pair
|
||||
/* eslint-disable import/namespace */
|
||||
|
||||
import { Sidebar } from '@status-im/components'
|
||||
import { Stack } from '@tamagui/core'
|
||||
import { StatusBar } from 'expo-status-bar'
|
||||
import { ScrollView } from 'tamagui'
|
||||
|
||||
import type { RootStackParamList } from '../App'
|
||||
import type { NativeStackScreenProps } from '@react-navigation/native-stack'
|
||||
import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native'
|
||||
|
||||
type HomeScreenProps = NativeStackScreenProps<RootStackParamList, 'Home'> & {
|
||||
onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void
|
||||
isMinimized?: boolean
|
||||
}
|
||||
|
||||
export const HomeScreen = ({
|
||||
navigation,
|
||||
onScroll,
|
||||
isMinimized,
|
||||
}: HomeScreenProps) => {
|
||||
const onChannelPress = (id: string) => {
|
||||
navigation.navigate('Channel', { channelId: id })
|
||||
}
|
||||
|
||||
return (
|
||||
<Stack flex={1} backgroundColor="$background">
|
||||
<StatusBar style={isMinimized ? 'dark' : 'light'} animated />
|
||||
<ScrollView onScroll={onScroll} scrollEventThrottle={16} flex={1}>
|
||||
<Stack pb={40}>
|
||||
<Sidebar
|
||||
name="Rarible"
|
||||
description="Multichain community-centric NFT marketplace. Create, buy and sell your NFTs."
|
||||
membersCount={123}
|
||||
onChannelPress={onChannelPress}
|
||||
/>
|
||||
</Stack>
|
||||
</ScrollView>
|
||||
</Stack>
|
||||
)
|
||||
}
|
|
@ -1,3 +0,0 @@
|
|||
import { config } from '@status-im/components'
|
||||
|
||||
export default config
|
|
@ -1,4 +0,0 @@
|
|||
{
|
||||
"compilerOptions": {},
|
||||
"extends": "expo/tsconfig.base"
|
||||
}
|
|
@ -1 +0,0 @@
|
|||
TAMAGUI_TARGET=web
|
|
@ -1 +0,0 @@
|
|||
TAMAGUI_TARGET=web
|
|
@ -1 +0,0 @@
|
|||
TAMAGUI_TARGET=web
|
|
@ -1,12 +0,0 @@
|
|||
{
|
||||
"root": true,
|
||||
"extends": [
|
||||
"@status-im/eslint-config",
|
||||
"plugin:tailwindcss/recommended",
|
||||
"next",
|
||||
"next/core-web-vitals"
|
||||
],
|
||||
"rules": {
|
||||
"@next/next/no-html-link-for-pages": "off"
|
||||
}
|
||||
}
|
|
@ -1,28 +0,0 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
# local env files
|
||||
!.env.*
|
||||
.env*.local
|
|
@ -1,17 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<title>Status</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="./src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
|
@ -1,42 +0,0 @@
|
|||
{
|
||||
"name": "web",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"dev": "TAMAGUI_TARGET=web vite",
|
||||
"build": "tsc && TAMAGUI_TARGET=web vite build",
|
||||
"preview": "TAMAGUI_TARGET=web vite preview",
|
||||
"lint": "eslint src",
|
||||
"typecheck": "tsc",
|
||||
"clean": "rimraf node_modules dist .turbo"
|
||||
},
|
||||
"dependencies": {
|
||||
"@status-im/components": "*",
|
||||
"@status-im/icons": "*",
|
||||
"@tamagui/core": "1.74.21",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-native-web": "^0.18.12",
|
||||
"use-resize-observer": "^9.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@status-im/eslint-config": "*",
|
||||
"@tamagui/vite-plugin": "1.74.21",
|
||||
"@types/react": "^18.0.33",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"@vitejs/plugin-react-swc": "^3.2.0",
|
||||
"next": "^13.4.12",
|
||||
"tailwindcss": "^3.3.3",
|
||||
"typescript": "^5.0.3",
|
||||
"vite": "^4.2.1"
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{ts,tsx,js,jsx,mjs}": [
|
||||
"eslint",
|
||||
"prettier --write"
|
||||
],
|
||||
"*.{md,mdx,yml,yaml,json}": [
|
||||
"prettier --write"
|
||||
]
|
||||
}
|
||||
}
|
Before Width: | Height: | Size: 1.2 KiB |
|
@ -1,148 +0,0 @@
|
|||
import { useEffect, useMemo, useRef, useState } from 'react'
|
||||
|
||||
import {
|
||||
AnchorActions,
|
||||
CHANNEL_GROUPS,
|
||||
Composer,
|
||||
Messages,
|
||||
SidebarCommunity,
|
||||
SidebarMembers,
|
||||
Topbar,
|
||||
useAppDispatch,
|
||||
useAppState,
|
||||
} from '@status-im/components'
|
||||
import useResizeObserver from 'use-resize-observer'
|
||||
|
||||
import { useScrollPosition } from './hooks/use-scroll-position'
|
||||
|
||||
const COMMUNITY = {
|
||||
name: 'Rarible',
|
||||
description:
|
||||
'Multichain community-centric NFT marketplace. Create, buy and sell your NFTs.',
|
||||
membersCount: 123,
|
||||
imageSrc:
|
||||
'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2264&q=80',
|
||||
}
|
||||
|
||||
const updateProperty = (property: string, value: number) => {
|
||||
document.documentElement.style.setProperty(property, `${value}px`)
|
||||
}
|
||||
|
||||
function App() {
|
||||
const [loading /*, setLoading*/] = useState(false)
|
||||
const [showMembers, setShowMembers] = useState(false)
|
||||
|
||||
// TODO: Use it to simulate loading
|
||||
// useEffect(() => {
|
||||
// setLoading(true)
|
||||
// setTimeout(() => {
|
||||
// setLoading(false)
|
||||
// }, 2000)
|
||||
// }, [])
|
||||
|
||||
const appState = useAppState()
|
||||
const appDispatch = useAppDispatch()
|
||||
|
||||
// TODO: This should change based on the URL
|
||||
const selectedChannel = useMemo(() => {
|
||||
for (const { channels } of CHANNEL_GROUPS) {
|
||||
for (const channel of channels) {
|
||||
if (channel.id === appState.channelId) {
|
||||
return channel
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [appState.channelId])
|
||||
|
||||
const topbarRef = useRef<HTMLDivElement>(null)
|
||||
const contentRef = useRef<HTMLDivElement>(null)
|
||||
const composerRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
useResizeObserver<HTMLDivElement>({
|
||||
ref: topbarRef,
|
||||
onResize({ height }) {
|
||||
updateProperty('--topbar-height', height!)
|
||||
},
|
||||
})
|
||||
|
||||
useResizeObserver<HTMLDivElement>({
|
||||
ref: composerRef,
|
||||
onResize({ height }) {
|
||||
updateProperty('--composer-height', height!)
|
||||
},
|
||||
})
|
||||
|
||||
const scrollPosition = useScrollPosition({
|
||||
ref: contentRef,
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
contentRef.current!.scrollTop = contentRef.current!.scrollHeight
|
||||
}, [selectedChannel])
|
||||
|
||||
return (
|
||||
<div id="app">
|
||||
<div id="sidebar-community" style={{ zIndex: 200 }}>
|
||||
<SidebarCommunity
|
||||
community={COMMUNITY}
|
||||
selectedChannelId={appState.channelId}
|
||||
onChannelPress={channelId =>
|
||||
appDispatch({ type: 'set-channel', channelId })
|
||||
}
|
||||
loading={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<main id="main">
|
||||
<div id="topbar" ref={topbarRef}>
|
||||
<Topbar
|
||||
blur={scrollPosition !== 'top'}
|
||||
channel={selectedChannel!}
|
||||
showMembers={showMembers}
|
||||
onMembersPress={() => setShowMembers(show => !show)}
|
||||
pinnedMessages={[
|
||||
{
|
||||
text: 'Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit.',
|
||||
reactions: {},
|
||||
pinned: true,
|
||||
id: '1234-1234',
|
||||
},
|
||||
{
|
||||
text: 'Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam.',
|
||||
reactions: {},
|
||||
pinned: true,
|
||||
id: '4321-4321',
|
||||
},
|
||||
]}
|
||||
loading={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="content" ref={contentRef}>
|
||||
<div id="messages">
|
||||
<Messages loading={loading} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loading === false && (
|
||||
<div id="composer" ref={composerRef}>
|
||||
{scrollPosition !== 'bottom' && (
|
||||
<div id="anchor-actions">
|
||||
<AnchorActions />
|
||||
</div>
|
||||
)}
|
||||
<Composer blur={scrollPosition !== 'bottom'} />
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
|
||||
{showMembers && (
|
||||
<div id="sidebar-members">
|
||||
<SidebarMembers />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
|
@ -1,49 +0,0 @@
|
|||
import { useEffect, useRef, useState } from 'react'
|
||||
|
||||
type Position = 'top' | 'middle' | 'bottom'
|
||||
|
||||
type Options = {
|
||||
ref: React.RefObject<HTMLElement>
|
||||
}
|
||||
|
||||
export function useScrollPosition(options: Options) {
|
||||
const { ref } = options
|
||||
|
||||
const [position, setPosition] = useState<Position>('bottom')
|
||||
const positionRef = useRef(position)
|
||||
|
||||
// Using ref for storing position because don't want to recreate the event listener
|
||||
positionRef.current = position
|
||||
|
||||
useEffect(() => {
|
||||
const node = ref.current!
|
||||
|
||||
const handleScroll = () => {
|
||||
if (!node) return
|
||||
|
||||
const { scrollTop, scrollHeight, clientHeight } = node
|
||||
|
||||
if (scrollTop === 0) {
|
||||
setPosition('top')
|
||||
return
|
||||
}
|
||||
|
||||
if (scrollTop + clientHeight === scrollHeight) {
|
||||
setPosition('bottom')
|
||||
return
|
||||
}
|
||||
|
||||
if (positionRef.current !== 'middle') {
|
||||
setPosition('middle')
|
||||
}
|
||||
}
|
||||
|
||||
node.addEventListener('scroll', handleScroll, { passive: true })
|
||||
|
||||
return () => {
|
||||
node.removeEventListener('scroll', handleScroll)
|
||||
}
|
||||
}, [ref])
|
||||
|
||||
return position
|
||||
}
|
|
@ -1,23 +0,0 @@
|
|||
import '../styles/reset.css'
|
||||
import '../styles/app.css'
|
||||
import '@tamagui/core/reset.css'
|
||||
import '@tamagui/font-inter/css/400.css'
|
||||
import '@tamagui/font-inter/css/700.css'
|
||||
|
||||
import { StrictMode } from 'react'
|
||||
|
||||
import { Provider, ToastContainer } from '@status-im/components'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
|
||||
import App from './app'
|
||||
|
||||
const root = document.getElementById('root') as HTMLElement
|
||||
|
||||
createRoot(root).render(
|
||||
<StrictMode>
|
||||
<Provider>
|
||||
<App />
|
||||
<ToastContainer />
|
||||
</Provider>
|
||||
</StrictMode>
|
||||
)
|
|
@ -1 +0,0 @@
|
|||
/// <reference types="vite/client" />
|
|
@ -1,81 +0,0 @@
|
|||
:root {
|
||||
--topbar-height: 56px;
|
||||
--composer-height: 100px;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
height: 100%;
|
||||
overscroll-behavior: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
*::selection {
|
||||
color: #fff;
|
||||
background: hsla(229, 71%, 57%, 1);
|
||||
}
|
||||
|
||||
#app {
|
||||
isolation: isolate;
|
||||
height: 100vh;
|
||||
display: grid;
|
||||
grid-template-columns: 352px 1fr auto;
|
||||
}
|
||||
|
||||
#sidebar-community {
|
||||
overflow: auto;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
#sidebar-members {
|
||||
width: 352px;
|
||||
overflow: auto;
|
||||
background-color: #fff;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#main {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#topbar {
|
||||
position: absolute;
|
||||
inset: 0 0 auto;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
#content {
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
padding-top: var(--topbar-height);
|
||||
padding-bottom: var(--composer-height);
|
||||
height: 100vh;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
#messages {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
#anchor-actions {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
transform: translateY(calc(-100% - 12px));
|
||||
}
|
||||
|
||||
#composer {
|
||||
position: absolute;
|
||||
inset: auto 0 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
#app {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
display: none;
|
||||
}
|
||||
}
|
|
@ -1,100 +0,0 @@
|
|||
/*
|
||||
1. Use a more-intuitive box-sizing model.
|
||||
*/
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #fff;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
/*
|
||||
2. Remove default margin
|
||||
*/
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
3. Allow percentage-based heights in the application
|
||||
*/
|
||||
html,
|
||||
body {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
overflow: hidden;
|
||||
overscroll-behavior-y: none; /* not working on Safari */
|
||||
}
|
||||
/*
|
||||
Typographic tweaks!
|
||||
4. Add accessible line-height
|
||||
5. Improve text rendering
|
||||
*/
|
||||
body {
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
padding: 0;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
/*
|
||||
6. Improve media defaults
|
||||
*/
|
||||
img,
|
||||
picture,
|
||||
video,
|
||||
canvas,
|
||||
svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
/*
|
||||
7. Remove built-in form typography styles
|
||||
*/
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
all: unset;
|
||||
}
|
||||
/*
|
||||
8. Avoid text overflows
|
||||
*/
|
||||
p,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
/*
|
||||
9. Create a root stacking context
|
||||
*/
|
||||
#root,
|
||||
#__next {
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
/* Temporary testing purposes of keyboard navigation */
|
||||
button:focus-visible {
|
||||
outline: 2px solid crimson;
|
||||
border-radius: 3px;
|
||||
}
|
|
@ -1,3 +0,0 @@
|
|||
import { config } from '@status-im/components'
|
||||
|
||||
export default config
|
|
@ -1,10 +0,0 @@
|
|||
{
|
||||
"extends": "../../tsconfig.base.json",
|
||||
"compilerOptions": {
|
||||
"target": "ESNext",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"module": "esnext",
|
||||
"jsx": "react-jsx"
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
|
@ -1,9 +0,0 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
|
@ -1,6 +0,0 @@
|
|||
{
|
||||
"$schema": "https://openapi.vercel.sh/vercel.json",
|
||||
"ignoreCommand": "git diff --quiet HEAD^ HEAD ../../{patches,package.json,turbo.json} ../../packages/{colors,components,icons,status-js} ./",
|
||||
"installCommand": "yarn install --cwd ../../ --frozen-lockfile",
|
||||
"buildCommand": "turbo run build --cwd ../../ --filter=web..."
|
||||
}
|
|
@ -1,39 +0,0 @@
|
|||
import { tamaguiPlugin } from '@tamagui/vite-plugin'
|
||||
import react from '@vitejs/plugin-react-swc'
|
||||
import path from 'path'
|
||||
import { defineConfig, loadEnv } from 'vite'
|
||||
|
||||
import type { PluginOption } from 'vite'
|
||||
|
||||
const tamaguiConfig = {
|
||||
components: ['@status-im/components'],
|
||||
config: './tamagui.config.ts',
|
||||
// useReactNativeWebLite: true,
|
||||
}
|
||||
|
||||
// @see: https://vitejs.dev/config
|
||||
export default defineConfig(({ mode }) => {
|
||||
const env = loadEnv(mode, process.cwd(), '')
|
||||
|
||||
return {
|
||||
resolve: {
|
||||
// mainFields: ['module', 'jsnext:main', 'jsnext'],
|
||||
alias: {
|
||||
'@status-im/components/hooks': path.resolve(
|
||||
'../../packages/components/hooks'
|
||||
),
|
||||
'@status-im/components': path.resolve('../../packages/components/src'),
|
||||
},
|
||||
},
|
||||
define: {
|
||||
// @see https://github.com/tamagui/tamagui/blob/a0d5fa0d05e6988a7cfa2a5e7823f295b82bae10/packages/tamagui/src/setup.ts#LL20C1-L20C28
|
||||
global: 'globalThis',
|
||||
'process.env.TAMAGUI_TARGET': JSON.stringify(env.TAMAGUI_TARGET),
|
||||
},
|
||||
plugins: [
|
||||
react(),
|
||||
tamaguiPlugin(tamaguiConfig) as PluginOption,
|
||||
// tamaguiExtractPlugin(tamaguiConfig)
|
||||
],
|
||||
}
|
||||
})
|
28
eas.json
|
@ -1,28 +0,0 @@
|
|||
{
|
||||
"cli": {
|
||||
"version": ">= 3.4.1"
|
||||
},
|
||||
"build": {
|
||||
"development": {
|
||||
"developmentClient": true,
|
||||
"distribution": "internal",
|
||||
"ios": {
|
||||
"resourceClass": "m1-medium"
|
||||
}
|
||||
},
|
||||
"preview": {
|
||||
"distribution": "internal",
|
||||
"ios": {
|
||||
"resourceClass": "m1-medium"
|
||||
}
|
||||
},
|
||||
"production": {
|
||||
"ios": {
|
||||
"resourceClass": "m1-medium"
|
||||
}
|
||||
}
|
||||
},
|
||||
"submit": {
|
||||
"production": {}
|
||||
}
|
||||
}
|
|
@ -1,2 +0,0 @@
|
|||
NEXT_PUBLIC_PUBLIC_KEY=""
|
||||
NEXT_PUBLIC_ENVIRONMENT=""
|
|
@ -1,5 +0,0 @@
|
|||
/// <reference types="next" />
|
||||
/// <reference types="next/image-types/global" />
|
||||
|
||||
// NOTE: This file should not be edited
|
||||
// see https://nextjs.org/docs/basic-features/typescript for more information.
|
|
@ -1,9 +0,0 @@
|
|||
/**
|
||||
* @type {import('next/dist/server/config-shared').NextConfig}
|
||||
*/
|
||||
export default {
|
||||
reactStrictMode: true,
|
||||
experimental: {
|
||||
esmExternals: true,
|
||||
},
|
||||
}
|
|
@ -1,27 +0,0 @@
|
|||
{
|
||||
"name": "with-next",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint",
|
||||
"clean": "rimraf node_modules .next"
|
||||
},
|
||||
"dependencies": {
|
||||
"@status-im/react": "^0.1.1",
|
||||
"next": "12.3.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"typescript": "^4.9.5"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16"
|
||||
}
|
||||
}
|
|
@ -1,9 +0,0 @@
|
|||
import '../styles.css'
|
||||
|
||||
import type { AppProps } from 'next/app'
|
||||
|
||||
function App({ Component, pageProps }: AppProps) {
|
||||
return <Component {...pageProps} />
|
||||
}
|
||||
|
||||
export default App
|
|
@ -1,23 +0,0 @@
|
|||
import { Head, Html, Main, NextScript } from 'next/document'
|
||||
|
||||
export default function Document() {
|
||||
return (
|
||||
<Html>
|
||||
<Head>
|
||||
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/tailwindcss@3.0.0/src/css/preflight.css"
|
||||
/>
|
||||
</Head>
|
||||
<body>
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</Html>
|
||||
)
|
||||
}
|
|
@ -1,36 +0,0 @@
|
|||
import { MemoryRouter } from '@status-im/react'
|
||||
import dynamic from 'next/dynamic'
|
||||
|
||||
const publicKey = process.env.NEXT_PUBLIC_PUBLIC_KEY
|
||||
|
||||
if (!publicKey) {
|
||||
throw new Error(
|
||||
'Add NEXT_PUBLIC_PUBLIC_KEY to your environment variables (see .env.example)'
|
||||
)
|
||||
}
|
||||
|
||||
const environment = process.env.NEXT_PUBLIC_ENVIRONMENT as
|
||||
| 'development'
|
||||
| 'preview'
|
||||
| 'production'
|
||||
|
||||
/**
|
||||
* For some reason the regular import fails with a server error:
|
||||
* Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
|
||||
* The error is caused by the react-content-loader package.
|
||||
* The workaround *for now* is to use the dynamic import and render the component on the client.
|
||||
*/
|
||||
const Community = dynamic(
|
||||
import('@status-im/react').then(({ Community }) => Community),
|
||||
{ ssr: false }
|
||||
)
|
||||
|
||||
export default function Index() {
|
||||
return (
|
||||
<Community
|
||||
publicKey={publicKey}
|
||||
environment={environment}
|
||||
router={MemoryRouter}
|
||||
/>
|
||||
)
|
||||
}
|
Before Width: | Height: | Size: 1.2 KiB |
|
@ -1,5 +0,0 @@
|
|||
html,
|
||||
body,
|
||||
#__next {
|
||||
height: 100%;
|
||||
}
|
|
@ -1,20 +0,0 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ESNext",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": false,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noEmit": true,
|
||||
"incremental": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve"
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
|
@ -1,2 +0,0 @@
|
|||
PUBLIC_KEY=""
|
||||
ENVIRONMENT=""
|
|
@ -1,24 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/tailwindcss@3.0.0/src/css/preflight.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>Status Communities</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="./src/index.tsx"></script>
|
||||
</body>
|
||||
</html>
|
|
@ -1,27 +0,0 @@
|
|||
{
|
||||
"name": "with-vite",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc && vite build",
|
||||
"start": "vite preview",
|
||||
"clean": "rimraf node_modules dist"
|
||||
},
|
||||
"dependencies": {
|
||||
"@status-im/react": "^0.1.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"@vitejs/plugin-react": "^2.1.0",
|
||||
"typescript": "^4.9.5",
|
||||
"vite": "^3.1.7"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16"
|
||||
}
|
||||
}
|
Before Width: | Height: | Size: 1.2 KiB |
|
@ -1,20 +0,0 @@
|
|||
import { Community } from '@status-im/react'
|
||||
|
||||
const publicKey = process.env.PUBLIC_KEY
|
||||
|
||||
if (!publicKey) {
|
||||
throw new Error(
|
||||
'Add PUBLIC_KEY to your environment variables (see .env.example)'
|
||||
)
|
||||
}
|
||||
|
||||
const environment = process.env.ENVIRONMENT as
|
||||
| 'development'
|
||||
| 'preview'
|
||||
| 'production'
|
||||
|
||||
export const App = () => {
|
||||
return (
|
||||
<Community publicKey={publicKey} environment={environment} theme="light" />
|
||||
)
|
||||
}
|
|
@ -1,11 +0,0 @@
|
|||
import { StrictMode } from 'react'
|
||||
import { render } from 'react-dom'
|
||||
|
||||
import { App } from './app'
|
||||
|
||||
render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
document.getElementById('root')
|
||||
)
|
|
@ -1 +0,0 @@
|
|||
/// <reference types="vite/client" />
|
|
@ -1,6 +0,0 @@
|
|||
body,
|
||||
html,
|
||||
#root {
|
||||
height: 100%;
|
||||
overscroll-behavior-y: none;
|
||||
}
|
|
@ -1,19 +0,0 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ESNext",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": false,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noEmit": true,
|
||||
"incremental": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "react-jsx"
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
|
@ -1,32 +0,0 @@
|
|||
import react from '@vitejs/plugin-react'
|
||||
import { defineConfig, loadEnv } from 'vite'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig(({ mode }) => {
|
||||
return {
|
||||
optimizeDeps: {
|
||||
esbuildOptions: {
|
||||
target: 'es2020',
|
||||
},
|
||||
},
|
||||
build: {
|
||||
target: 'es2020',
|
||||
},
|
||||
plugins: [react({})],
|
||||
define: {
|
||||
/**
|
||||
* Loads `.env` files and sets `process.env` varibales.
|
||||
*
|
||||
* @see https://vitejs.dev/config/#environment-variables
|
||||
* @see https://vitejs.dev/config/shared-options.html#define
|
||||
*/
|
||||
...Object.entries(loadEnv(mode, process.cwd(), '')).reduce(
|
||||
(variables, [key, value]) => ({
|
||||
...variables,
|
||||
[`process.env.${key}`]: `'${value}'`, // notice ''
|
||||
}),
|
||||
{}
|
||||
),
|
||||
},
|
||||
}
|
||||
})
|
14
package.json
|
@ -7,8 +7,7 @@
|
|||
"packages/status-js",
|
||||
"packages/colors",
|
||||
"packages/icons",
|
||||
"packages/components",
|
||||
"apps/*"
|
||||
"packages/components"
|
||||
]
|
||||
},
|
||||
"keywords": [],
|
||||
|
@ -22,9 +21,6 @@
|
|||
"typecheck": "turbo run typecheck",
|
||||
"format": "prettier --ignore-path .gitignore --write .",
|
||||
"clean": "turbo run clean && rimraf node_modules",
|
||||
"web": "yarn workspace web dev",
|
||||
"mobile": "yarn workspace mobile dev",
|
||||
"desktop": "yarn workspace desktop dev",
|
||||
"storybook": "yarn workspace @status-im/components storybook"
|
||||
},
|
||||
"resolutions": {
|
||||
|
@ -39,12 +35,12 @@
|
|||
"husky": "^8.0.3",
|
||||
"lint-staged": "^13.2.0",
|
||||
"patch-package": "^6.5.1",
|
||||
"prettier": "^2.8.8",
|
||||
"prettier-plugin-tailwindcss": "0.3.0",
|
||||
"prettier": "^3.3.3",
|
||||
"prettier-plugin-tailwindcss": "^0.6.6",
|
||||
"rimraf": "^4.4.1",
|
||||
"turbo": "^1.8.8",
|
||||
"typescript": "^5.0.3",
|
||||
"vite": "^4.2.1",
|
||||
"typescript": "^5.6.2",
|
||||
"vite": "^5.4.3",
|
||||
"vite-node": "^0.29.8",
|
||||
"vitest": "^0.29.8"
|
||||
},
|
||||
|
|
|
@ -1,19 +1,21 @@
|
|||
{
|
||||
"name": "@status-im/colors",
|
||||
"version": "0.4.0",
|
||||
"license": "MPL-2.0",
|
||||
"files": [
|
||||
"types",
|
||||
"dist",
|
||||
"src"
|
||||
],
|
||||
"main": "dist/colors.js",
|
||||
"module": "dist/colors.mjs",
|
||||
"types": "dist/types/index.d.ts",
|
||||
"main": "dist/index.cjs.js",
|
||||
"module": "dist/index.es.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"source": "src/index.ts",
|
||||
"exports": {
|
||||
".": {
|
||||
"types:": "./dist/types/index.d.ts",
|
||||
"import": "./dist/colors.mjs",
|
||||
"require": "./dist/colors.js"
|
||||
"types": "./dist/index.d.ts",
|
||||
"import": "./dist/index.es.js",
|
||||
"require": "./dist/index.cjs.js"
|
||||
},
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
|
@ -38,8 +40,8 @@
|
|||
"@status-im/eslint-config": "*",
|
||||
"figma-api": "^1.11.0",
|
||||
"fs-extra": "^11.1.1",
|
||||
"vite": "^4.1.4",
|
||||
"vite-node": "^0.29.7"
|
||||
"vite": "^5.4.3",
|
||||
"vite-node": "^2.0.5"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
|
|
|
@ -62,7 +62,7 @@ const nodeIds = styles
|
|||
|
||||
const { nodes } = (await figma.getFileNodes(
|
||||
FILE_KEY,
|
||||
nodeIds
|
||||
nodeIds,
|
||||
)) as GetFileNodesResult<'FRAME'>
|
||||
s2.stop('Done!')
|
||||
|
||||
|
@ -116,7 +116,7 @@ fs.writeFileSync(
|
|||
Object.keys(colors)
|
||||
.map(key => `export { ${key} } from './${key}'`)
|
||||
.join('\n'),
|
||||
{ encoding: 'utf-8' }
|
||||
{ encoding: 'utf-8' },
|
||||
)
|
||||
|
||||
s3.stop('Done!')
|
||||
|
|
|
@ -1,93 +1,119 @@
|
|||
export const customisation = {
|
||||
'army-50': 'rgba(33 98 102 / 100%)',
|
||||
'army-60': 'rgba(26 78 82 / 100%)',
|
||||
'army/10': 'rgba(33 98 102 / 10%)',
|
||||
'army/20': 'rgba(33 98 102 / 20%)',
|
||||
'army/30': 'rgba(33 98 102 / 30%)',
|
||||
'army/40': 'rgba(33 98 102 / 40%)',
|
||||
'army/5': 'rgba(33 98 102 / 5%)',
|
||||
'blue-50': 'rgba(42 74 245 / 100%)',
|
||||
'blue-60': 'rgba(34 59 196 / 100%)',
|
||||
'blue/10': 'rgba(42 74 245 / 10%)',
|
||||
'blue/20': 'rgba(42 74 245 / 20%)',
|
||||
'blue/30': 'rgba(42 74 245 / 30%)',
|
||||
'blue/40': 'rgba(42 74 245 / 40%)',
|
||||
'blue/5': 'rgba(42 74 245 / 5%)',
|
||||
'camel-50': 'rgba(199 143 103 / 100%)',
|
||||
'camel-60': 'rgba(159 114 82 / 100%)',
|
||||
'camel/10': 'rgba(199 143 103 / 10%)',
|
||||
'camel/20': 'rgba(199 143 103 / 20%)',
|
||||
'camel/30': 'rgba(199 143 103 / 30%)',
|
||||
'camel/40': 'rgba(199 143 103 / 40%)',
|
||||
'camel/5': 'rgba(199 143 103 / 5%)',
|
||||
'copper-50': 'rgba(203 98 86 / 100%)',
|
||||
'copper-60': 'rgba(162 78 69 / 100%)',
|
||||
'copper/10': 'rgba(203 98 86 / 10%)',
|
||||
'copper/20': 'rgba(203 98 86 / 20%)',
|
||||
'copper/30': 'rgba(203 98 86 / 30%)',
|
||||
'copper/40': 'rgba(203 98 86 / 40%)',
|
||||
'copper/5': 'rgba(203 98 86 / 5%)',
|
||||
'magenta-50': 'rgba(236 38 108 / 100%)',
|
||||
'magenta-60': 'rgba(189 30 86 / 100%)',
|
||||
'magenta/10': 'rgba(236 38 108 / 10%)',
|
||||
'magenta/20': 'rgba(236 38 108 / 20%)',
|
||||
'magenta/30': 'rgba(236 38 108 / 30%)',
|
||||
'magenta/40': 'rgba(236 38 108 / 40%)',
|
||||
'magenta/5': 'rgba(236 38 108 / 5%)',
|
||||
'orange-50': 'rgba(255 125 70 / 100%)',
|
||||
'orange-60': 'rgba(204 100 56 / 100%)',
|
||||
'orange/10': 'rgba(255 125 70 / 10%)',
|
||||
'orange/20': 'rgba(255 125 70 / 20%)',
|
||||
'orange/30': 'rgba(255 125 70 / 30%)',
|
||||
'orange/40': 'rgba(255 125 70 / 40%)',
|
||||
'orange/5': 'rgba(255 125 70 / 5%)',
|
||||
'pink-50': 'rgba(246 111 143 / 100%)',
|
||||
'pink-60': 'rgba(197 89 114 / 100%)',
|
||||
'pink/10': 'rgba(246 111 143 / 10%)',
|
||||
'pink/20': 'rgba(246 111 143 / 20%)',
|
||||
'pink/30': 'rgba(246 111 143 / 30%)',
|
||||
'pink/40': 'rgba(246 111 143 / 40%)',
|
||||
'pink/5': 'rgba(246 111 143 / 5%)',
|
||||
'purple-50': 'rgba(113 64 253 / 100%)',
|
||||
'purple-60': 'rgba(90 51 202 / 100%)',
|
||||
'purple/10': 'rgba(113 64 253 / 10%)',
|
||||
'purple/20': 'rgba(113 64 253 / 20%)',
|
||||
'purple/30': 'rgba(113 64 253 / 30%)',
|
||||
'purple/40': 'rgba(113 64 253 / 40%)',
|
||||
'purple/5': 'rgba(113 64 253 / 5%)',
|
||||
'sky-50': 'rgba(25 146 215 / 100%)',
|
||||
'sky-60': 'rgba(20 117 172 / 100%)',
|
||||
'sky/10': 'rgba(25 146 215 / 10%)',
|
||||
'sky/20': 'rgba(25 146 215 / 20%)',
|
||||
'sky/30': 'rgba(25 146 215 / 30%)',
|
||||
'sky/40': 'rgba(25 146 215 / 40%)',
|
||||
'sky/5': 'rgba(25 146 215 / 5%)',
|
||||
'turquoise-50': 'rgba(42 121 155 / 100%)',
|
||||
'turquoise-60': 'rgba(34 97 124 / 100%)',
|
||||
'turquoise/10': 'rgba(42 121 155 / 10%)',
|
||||
'turquoise/20': 'rgba(42 121 155 / 20%)',
|
||||
'turquoise/30': 'rgba(42 121 155 / 30%)',
|
||||
'turquoise/40': 'rgba(42 121 155 / 40%)',
|
||||
'turquoise/5': 'rgba(42 121 155 / 5%)',
|
||||
'yang-50': 'rgba(255 255 255 / 100%)',
|
||||
'yang-60': 'rgba(235 235 235 / 100%)',
|
||||
'yang/10': 'rgba(255 255 255 / 10%)',
|
||||
'yang/20': 'rgba(255 255 255 / 20%)',
|
||||
'yang/30': 'rgba(255 255 255 / 30%)',
|
||||
'yang/40': 'rgba(255 255 255 / 40%)',
|
||||
'yang/5': 'rgba(255 255 255 / 5%)',
|
||||
'yellow-50': 'rgba(246 176 60 / 100%)',
|
||||
'yellow-60': 'rgba(197 141 48 / 100%)',
|
||||
'yellow/10': 'rgba(246 176 60 / 10%)',
|
||||
'yellow/20': 'rgba(246 176 60 / 20%)',
|
||||
'yellow/30': 'rgba(246 176 60 / 30%)',
|
||||
'yellow/40': 'rgba(246 176 60 / 40%)',
|
||||
'yellow/5': 'rgba(246 176 60 / 5%)',
|
||||
'yin-50': 'rgba(9 16 28 / 100%)',
|
||||
'yin-60': 'rgba(29 35 46 / 100%)',
|
||||
'yin/10': 'rgba(9 16 28 / 10%)',
|
||||
'yin/20': 'rgba(9 16 28 / 20%)',
|
||||
'yin/30': 'rgba(9 16 28 / 30%)',
|
||||
'yin/40': 'rgba(9 16 28 / 40%)',
|
||||
'yin/5': 'rgba(9 16 28 / 5%)',
|
||||
army: {
|
||||
'50': 'rgba(33 98 102 / 100%)',
|
||||
'50/5': 'rgba(33 98 102 / 5%)',
|
||||
'50/10': 'rgba(33 98 102 / 10%)',
|
||||
'50/20': 'rgba(33 98 102 / 20%)',
|
||||
'50/30': 'rgba(33 98 102 / 30%)',
|
||||
'50/40': 'rgba(33 98 102 / 40%)',
|
||||
'60': 'rgba(26 78 82 / 100%)',
|
||||
},
|
||||
blue: {
|
||||
'50': 'rgba(42 74 245 / 100%)',
|
||||
'50/5': 'rgba(42 74 245 / 5%)',
|
||||
'50/10': 'rgba(42 74 245 / 10%)',
|
||||
'50/20': 'rgba(42 74 245 / 20%)',
|
||||
'50/30': 'rgba(42 74 245 / 30%)',
|
||||
'50/40': 'rgba(42 74 245 / 40%)',
|
||||
'60': 'rgba(34 59 196 / 100%)',
|
||||
},
|
||||
camel: {
|
||||
'50': 'rgba(199 143 103 / 100%)',
|
||||
'50/5': 'rgba(199 143 103 / 5%)',
|
||||
'50/10': 'rgba(199 143 103 / 10%)',
|
||||
'50/20': 'rgba(199 143 103 / 20%)',
|
||||
'50/30': 'rgba(199 143 103 / 30%)',
|
||||
'50/40': 'rgba(199 143 103 / 40%)',
|
||||
'60': 'rgba(159 114 82 / 100%)',
|
||||
},
|
||||
copper: {
|
||||
'50': 'rgba(203 98 86 / 100%)',
|
||||
'50/5': 'rgba(203 98 86 / 5%)',
|
||||
'50/10': 'rgba(203 98 86 / 10%)',
|
||||
'50/20': 'rgba(203 98 86 / 20%)',
|
||||
'50/30': 'rgba(203 98 86 / 30%)',
|
||||
'50/40': 'rgba(203 98 86 / 40%)',
|
||||
'60': 'rgba(162 78 69 / 100%)',
|
||||
},
|
||||
magenta: {
|
||||
'50': 'rgba(236 38 108 / 100%)',
|
||||
'50/5': 'rgba(236 38 108 / 5%)',
|
||||
'50/10': 'rgba(236 38 108 / 10%)',
|
||||
'50/20': 'rgba(236 38 108 / 20%)',
|
||||
'50/30': 'rgba(236 38 108 / 30%)',
|
||||
'50/40': 'rgba(236 38 108 / 40%)',
|
||||
'60': 'rgba(189 30 86 / 100%)',
|
||||
},
|
||||
orange: {
|
||||
'50': 'rgba(255 125 70 / 100%)',
|
||||
'50/5': 'rgba(255 125 70 / 5%)',
|
||||
'50/10': 'rgba(255 125 70 / 10%)',
|
||||
'50/20': 'rgba(255 125 70 / 20%)',
|
||||
'50/30': 'rgba(255 125 70 / 30%)',
|
||||
'50/40': 'rgba(255 125 70 / 40%)',
|
||||
'60': 'rgba(204 100 56 / 100%)',
|
||||
},
|
||||
pink: {
|
||||
'50': 'rgba(246 111 143 / 100%)',
|
||||
'50/5': 'rgba(246 111 143 / 5%)',
|
||||
'50/10': 'rgba(246 111 143 / 10%)',
|
||||
'50/20': 'rgba(246 111 143 / 20%)',
|
||||
'50/30': 'rgba(246 111 143 / 30%)',
|
||||
'50/40': 'rgba(246 111 143 / 40%)',
|
||||
'60': 'rgba(197 89 114 / 100%)',
|
||||
},
|
||||
purple: {
|
||||
'50': 'rgba(113 64 253 / 100%)',
|
||||
'50/5': 'rgba(113 64 253 / 5%)',
|
||||
'50/10': 'rgba(113 64 253 / 10%)',
|
||||
'50/20': 'rgba(113 64 253 / 20%)',
|
||||
'50/30': 'rgba(113 64 253 / 30%)',
|
||||
'50/40': 'rgba(113 64 253 / 40%)',
|
||||
'60': 'rgba(90 51 202 / 100%)',
|
||||
},
|
||||
sky: {
|
||||
'50': 'rgba(25 146 215 / 100%)',
|
||||
'50/5': 'rgba(25 146 215 / 5%)',
|
||||
'50/10': 'rgba(25 146 215 / 10%)',
|
||||
'50/20': 'rgba(25 146 215 / 20%)',
|
||||
'50/30': 'rgba(25 146 215 / 30%)',
|
||||
'50/40': 'rgba(25 146 215 / 40%)',
|
||||
'60': 'rgba(20 117 172 / 100%)',
|
||||
},
|
||||
turquoise: {
|
||||
'50': 'rgba(42 121 155 / 100%)',
|
||||
'50/5': 'rgba(42 121 155 / 5%)',
|
||||
'50/10': 'rgba(42 121 155 / 10%)',
|
||||
'50/20': 'rgba(42 121 155 / 20%)',
|
||||
'50/30': 'rgba(42 121 155 / 30%)',
|
||||
'50/40': 'rgba(42 121 155 / 40%)',
|
||||
'60': 'rgba(34 97 124 / 100%)',
|
||||
},
|
||||
yang: {
|
||||
'50': 'rgba(255 255 255 / 100%)',
|
||||
'50/5': 'rgba(255 255 255 / 5%)',
|
||||
'50/10': 'rgba(255 255 255 / 10%)',
|
||||
'50/20': 'rgba(255 255 255 / 20%)',
|
||||
'50/30': 'rgba(255 255 255 / 30%)',
|
||||
'50/40': 'rgba(255 255 255 / 40%)',
|
||||
'60': 'rgba(235 235 235 / 100%)',
|
||||
},
|
||||
yellow: {
|
||||
'50': 'rgba(246 176 60 / 100%)',
|
||||
'50/5': 'rgba(246 176 60 / 5%)',
|
||||
'50/10': 'rgba(246 176 60 / 10%)',
|
||||
'50/20': 'rgba(246 176 60 / 20%)',
|
||||
'50/30': 'rgba(246 176 60 / 30%)',
|
||||
'50/40': 'rgba(246 176 60 / 40%)',
|
||||
'60': 'rgba(197 141 48 / 100%)',
|
||||
},
|
||||
yin: {
|
||||
'50': 'rgba(9 16 28 / 100%)',
|
||||
'50/5': 'rgba(9 16 28 / 5%)',
|
||||
'50/10': 'rgba(9 16 28 / 10%)',
|
||||
'50/20': 'rgba(9 16 28 / 20%)',
|
||||
'50/30': 'rgba(9 16 28 / 30%)',
|
||||
'50/40': 'rgba(9 16 28 / 40%)',
|
||||
'60': 'rgba(29 35 46 / 100%)',
|
||||
},
|
||||
}
|
||||
|
|