status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-02-08 17:43:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2 from nimbus-gui/ia.create-node-page

Browse Source 
Create CreateLocalNode page
This commit is contained in:
Ivana Andersson 2023-08-18 15:10:32 +03:00 committed by GitHub
commit a68b7787e5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 360 additions and 259 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -28,6 +28,7 @@
"@types/react-dom": "18",
"expo-modules-core": "^1.5.9",
"react": "18",
"react-color": "^2.19.3",
"react-dom": "18",
"react-native": "^0.72.3",
"react-native-svg": "^13.10.0",
@ -46,6 +47,7 @@
"@storybook/react-vite": "^7.2.0",
"@storybook/test-runner": "^0.12.0",
"@storybook/testing-library": "^0.2.0",
"@types/react-color": "^3.0.6",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"@vitejs/plugin-react": "^4.0.3",

27
src/App.css
View File

@ -1,30 +1,3 @@
#root {
width: 100%;
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
/* span {
display: inline-block;
vertical-align: middle;
line-height: 1;
} */
.mb-1 {
margin-bottom: 1em;
}
.mt-1 {
margin-top: 1em;
}
.my-1 {
margin-top: 1em;
margin-bottom: 1em;
}
.py-05 {
padding-top: 0.5em;
padding-bottom: 0.5em;
}

8
src/App.tsx
View File

@ -7,6 +7,7 @@ import LandingPage from './pages/LandingPage/LandingPage'
import DeviceHealthCheck from './pages/DeviceHealthCheck/DeviceHealthCheck'
import ConnectDevicePage from './pages/ConnectDevicePage/ConnectDevicePage'
import DeviceSyncStatus from './pages/DeviceSyncStatus/DeviceSyncStatus'
import CreateLocalNodePage from './pages/CreateLocalNodePage/CreateLocalNodePage'
const router = createBrowserRouter([
{
@ -20,12 +21,15 @@ const router = createBrowserRouter([
{
path: '/connect-device',
element: <ConnectDevicePage />,
},
{
path: '/device-sync-status',
element: <DeviceSyncStatus />,
}
},
{
path: '/create-local-node',
element: <CreateLocalNodePage />,
},
])
function App() {

16
src/components/General/BreadcrumbBar/breadcrumbbar.css → src/components/General/BreadcrumbBar/BreadcrumbBar.css
View File

@ -4,19 +4,14 @@
padding: 1rem 2rem;
margin: 0.5rem;
}
.breadcrumb-bar-ul {
list-style-type: none;
display: flex;
padding: 0;
margin: 0;
}
.breadcrumb-bar-li {
padding: 0 1em;
color: #647084;
font-size: 15px;
font-weight: 500;
position: relative;
}
.breadcrumb-bar-li:last-child {
color: #09101C;
}
.breadcrumb-bar-li::after {
display: inline-block;
content: url("/icons/chevron.svg");
@ -26,10 +21,7 @@
left: 100%;
transform: translateX(-50%);
}
.breadcrumb-bar-li:last-child {
color: #09101C;
}
.breadcrumb-bar-li:last-child::after {
display: none;
}
}

2
src/components/General/BreadcrumbBar/BreadcrumbBar.tsx
View File

@ -1,4 +1,4 @@
import './breadcrumbbar.css'
import './BreadcrumbBar.css'
type BreadcrumbBarProps = {
breadcrumbList: string[]

19
src/components/General/ColorPicker.stories.tsx Normal file
View File

@ -0,0 +1,19 @@
import type { Meta, StoryObj } from '@storybook/react'
import ColorPicker from './ColorPicker'
const meta = {
title: 'General/ColorPicker',
component: ColorPicker,
parameters: {
layout: 'centered',
},
tags: ['autodocs'],
} satisfies Meta<typeof ColorPicker>
export default meta
type Story = StoryObj<typeof meta>
export const DefaultColors: Story = {
args: {},
}

33
src/components/General/ColorPicker.tsx Normal file
View File

@ -0,0 +1,33 @@
import { useState } from 'react'
import { CirclePicker } from 'react-color'
import { XStack } from 'tamagui'
const ColorPicker = () => {
const [chosenColor, setChosenColor] = useState('#FFFFFF')
return (
<XStack my={10}>
<CirclePicker
width="80%"
circleSize={40}
circleSpacing={12}
colors={[
'#2A4AF5',
'#F6B03C',
'#7140FD',
'#2A799B',
'#EC266C',
'#1992D7',
'#FF7D46',
'#216266',
'#F66F8F',
'#C78F67',
'#CB6256',
]}
color={chosenColor}
onChange={color => setChosenColor(color.hex)}
/>
</XStack>
)
}
export default ColorPicker

6
src/components/General/LabelInputField.css Normal file
View File

@ -0,0 +1,6 @@
.input-container {
background-color: #fff;
border-radius: 12px;
margin-top: 8px;
width: 100%;
}

5
src/components/General/LabelInputField.tsx
View File

@ -1,5 +1,6 @@
import { Input as StatusInput, Text } from '@status-im/components'
import { Label } from 'tamagui'
import './LabelInputField.css'
type LabelInputProps = {
labelText: string
@ -12,7 +13,9 @@ function LabelInputField({ labelText, placeholderText }: LabelInputProps) {
<Text size={13} weight="regular" color={'#647084'}>
{labelText}
</Text>
<StatusInput placeholder={placeholderText} width={'100%'} />
<div className="input-container">
<StatusInput placeholder={placeholderText} width={'100%'} />
</div>
</Label>
)
}

12
src/components/General/QuickStartBar/QuickStartBar.css
View File

@ -14,22 +14,12 @@
}
.quick-start-bar > div {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 24px;
background: rgba(100, 112, 132, 0.05);
margin-left: 1rem;
padding: 1rem 0.5rem;
}
.quick-start-bar ul {
list-style-type: none;
display: flex;
padding: 0;
margin: 0;
}
.quick-start-bar ul li {
padding: 0 1rem;
color: #0D1625;
font-size: 13px;
}

1
src/components/General/QuickStartBar/QuickStartBar.tsx
View File

@ -38,7 +38,6 @@ const QuickStartBar = () => {
<li>Nodes Community</li>
<li>Documentation</li>
</ul>
<button className="inversed">Quick Start</button>
</div>
</nav>
)

4
src/components/General/TagContainer.css Normal file
View File

@ -0,0 +1,4 @@
.tag-container div:nth-child(1) {
background:transparent;
}

16
src/components/General/TagContainer.tsx Normal file
View File

@ -0,0 +1,16 @@
import { Tag } from '@status-im/components'
import { XStack } from 'tamagui'
import PairIcon from '../Icons/PairIcon'
import CreateIcon from '../Icons/CreateIcon'
import './TagContainer.css'
const TagContainer = () => {
return (
<XStack space={'$2'} alignItems="center" className="tag-container">
<Tag icon={PairIcon} label="Pair" size={32} />
<Tag selected icon={CreateIcon} label="Create" size={32} />
</XStack>
)
}
export default TagContainer

2
src/components/General/Title.tsx
View File

@ -7,7 +7,7 @@ type TitleProps = {
const Title = ({ color, children }: TitleProps) => {
return (
<Text size={27} weight={'medium'} color={color}>
<Text size={27} weight={'semibold'} color={color}>
{children}
</Text>
)

2
src/components/General/Titles.tsx
View File

@ -11,7 +11,7 @@ type TitlesProps = {
const Titles = ({ title, subtitle, isAdvancedSettings }: TitlesProps) => {
return (
<YStack style={{ width: '100%' }}>
<YStack style={{ width: '100%', margin: '0 0 1em' }}>
<XStack style={{ justifyContent: 'space-between', alignItems: 'center' }}>
<Title color={'#09101C'}>{title}</Title>
{isAdvancedSettings && (

16
src/components/Icons/ReactionIcon.tsx Normal file
View File

@ -0,0 +1,16 @@
function ReactionIcon() {
return (
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="20/reaction">
<path
id="body"
fillRule="evenodd"
clipRule="evenodd"
d="M9.2416 3.15729C10.5065 2.96514 11.7973 3.25797 12.9173 4.00409L13.5826 3.0054C12.2242 2.10051 10.6337 1.73206 9.06137 1.9709C7.49044 2.20954 6.04779 3.03734 4.9503 4.30368C3.8539 5.56876 3.15891 7.20428 2.95938 8.95297C2.75985 10.7017 3.06503 12.4813 3.83416 14.0184C4.60352 15.556 5.80023 16.7757 7.25373 17.4704C8.70989 18.1663 10.3311 18.2901 11.8595 17.8176C13.3854 17.3458 14.7159 16.312 15.6563 14.8979C16.5962 13.4846 17.0999 11.763 17.0999 9.99994H15.8999C15.8999 10.2934 15.8839 10.585 15.8524 10.8732C15.8428 10.8931 15.8307 10.9166 15.816 10.943C15.7594 11.0449 15.6664 11.185 15.5256 11.3258C15.2556 11.5958 14.7804 11.9 13.9499 11.9C13.1194 11.9 12.6442 11.5958 12.3742 11.3258C12.2334 11.185 12.1404 11.0449 12.0838 10.943C12.0556 10.8924 12.0372 10.8524 12.0268 10.8281C12.0216 10.8161 12.0185 10.8081 12.0173 10.8048L12.0169 10.8037L12.0177 10.806L12.0183 10.8079L12.0187 10.809L12.0189 10.8096C12.019 10.81 12.0191 10.8103 11.4499 11C10.8807 11.1898 10.8808 11.1901 10.8809 11.1905L10.8812 11.1912L10.8817 11.1927L10.8829 11.1963L10.8859 11.205L10.8947 11.2289C10.9018 11.2477 10.9114 11.2719 10.9238 11.3008C10.9486 11.3586 10.9848 11.4358 11.0348 11.5258C11.1344 11.7052 11.2914 11.94 11.5256 12.1743C12.0056 12.6542 12.7804 13.1 13.9499 13.1C14.514 13.1 14.9863 12.9963 15.3779 12.8351C15.1868 13.3304 14.9453 13.8001 14.6571 14.2334C13.8554 15.4389 12.7433 16.2883 11.505 16.6712C10.2691 17.0533 8.95894 16.9554 7.77119 16.3877C6.58079 15.8187 5.56884 14.8035 4.90732 13.4814C4.24558 12.159 3.97764 10.614 4.15165 9.08901C4.32565 7.56394 4.92997 6.15939 5.85712 5.08959C6.78319 4.02105 7.97527 3.34966 9.2416 3.15729ZM10.4999 8.49994C11.0522 8.49994 11.4999 7.82836 11.4999 6.99994C11.4999 6.17151 11.0522 5.49993 10.4999 5.49993C9.94762 5.49993 9.49991 6.17151 9.49991 6.99994C9.49991 7.82836 9.94762 8.49994 10.4999 8.49994ZM16.9999 6.99994C16.9999 7.82836 16.5522 8.49994 15.9999 8.49994C15.4476 8.49994 14.9999 7.82836 14.9999 6.99994C14.9999 6.17151 15.4476 5.49993 15.9999 5.49993C16.5522 5.49993 16.9999 6.17151 16.9999 6.99994Z"
fill="currentColor"
/>
</g>
</svg>
)
}
export default ReactionIcon

5
src/components/Logos/NimbusLogo.css Normal file
View File

@ -0,0 +1,5 @@
.nimbus-logomark{
width: auto;
height: 30%;
}

1
src/components/Logos/NimbusLogo.tsx
View File

@ -1,5 +1,6 @@
import { XStack } from 'tamagui'
import BetaTag from './BetaTag'
import './NimbusLogo.css'
const NimbusLogo = () => {
return (

118
src/components/PageWrappers/layout.css
View File

@ -25,8 +25,8 @@
display: flex;
flex-wrap: wrap;
justify-content: end;
height: 100%;
margin: 0 auto;
height: 100%;
padding: 70px 0 0;
}
.container-inner {
max-width: 70%;
@ -34,88 +34,42 @@
display: flex;
flex-direction: column;
}
header {
width: 100%;
display: flex;
justify-content: space-between;
padding: 1.5rem 0;
}
header > div {
display: flex;
align-items: center;
}
.logo-title {
font-size: 27px;
font-weight: 700;
display: flex;
align-items: center;
}
.logo-title .beta{
color: #FFF;
font-size: 10px;
font-weight: 600;
border-radius: 66.667px;
background-color: #2A4AF5;
padding: 4px 6px;
margin-left: 10px;
}
.content {
flex-grow: 1;
}
.content .title {
font-size: 27px;
font-weight: 600;
margin-bottom: 0.25em;
}
.content .subtitle {
font-size: 15px;
margin: 0.1em;
}
.content .subtitle span{
font-weight: 700;
}
.content button {
display: flex;
align-items: center;
}
.content button span {
padding-right: 10px;
/* LAYOUT RIGHT ELEMENT WITH IMAGE TAKING UP THE WHOLE HIGHT OF THE VIEWPORT */
.layout-right {
flex: 0 0 45%;
max-width: 45%;
z-index: 0;
}
/* LAYOUT RIGHT ELEMENT WITH IMAGE TAKING UP THE WHOLE HIGHT OF THE VIEWPORT */
.layout-right {
flex: 0 0 45%;
max-width: 45%;
z-index: 0;
}
.image-container {
height: 100%;
position: relative;
overflow: hidden;
}
.image-container::before {
display: block;
content: "";
padding-bottom: 100%;
}
.image-container::after {
display: block;
content: "";
position: absolute;
top: 0;
left: -1%;
width: 50%;
height: 100%;
background: linear-gradient(to right, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0.0));
}
.image-container img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 140%;
width: auto;
}
.image-container {
height: 100%;
position: relative;
overflow: hidden;
}
.image-container::before {
display: block;
content: "";
padding-bottom: 100%;
}
.image-container::after {
display: block;
content: "";
position: absolute;
top: 0;
left: -1%;
width: 50%;
height: 100%;
background: linear-gradient(to right, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0.0));
}
.image-container img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 140%;
width: auto;
}

43
src/index.css
View File

@ -13,69 +13,46 @@
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}
#storybook-root {
width: 100%;
width: 100%;
}
body {
margin: 0;
display: flex;
min-width: 320px;
min-height: 100vh;
}
h1, h2, h3, h4, h5, h6 {
line-height: 1.2;
font-weight: 700;
}
h1 {
font-size: 3.2em;
}
a {
font-weight: 500;
text-decoration: inherit;
cursor: pointer;
}
a:hover {
color: #535bf2;
}
button {
border-radius: 12px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 15px;
font-weight: 500;
font-family: inherit;
background-color: #2A4AF5;
cursor: pointer;
transition: border-color 0.25s;
}
button.inversed {
border-radius: 12px;
border: 1px solid #2A4AF5;
color: #2A4AF5;
padding: 0.75em 1.2em;
font-size: 15px;
background-color:transparent;
font-weight: 500;
font-family: inherit;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
.nimbus-logomark{
width: auto;
height: 30%;
ul{
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
}
ul li {
padding: 0 1rem;
font-size: 15px;
}
@media (prefers-color-scheme: light) {
:root {

20
src/pages/CreateLocalNodePage/CreateLocalNodePage.stories.ts Normal file
View File

@ -0,0 +1,20 @@
import type { Meta, StoryObj } from '@storybook/react'
import CreateLocalNodePage from './CreateLocalNodePage'
const meta = {
title: 'Pages/CreateLocalNodePage',
component: CreateLocalNodePage,
parameters: {
layout: 'centered',
},
tags: ['autodocs'],
argTypes: {},
} satisfies Meta<typeof CreateLocalNodePage>
export default meta
type Story = StoryObj<typeof meta>
export const Page: Story = {
args: {},
}

76
src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx Normal file
View File

@ -0,0 +1,76 @@
import { useState } from 'react'
import { Button as StatusButton, Text, Avatar, Checkbox } from '@status-im/components'
import { Label, Separator, XStack, YStack } from 'tamagui'
import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
import NimbusLogo from '../../components/Logos/NimbusLogo'
import TagContainer from '../../components/General/TagContainer'
import Titles from '../../components/General/Titles'
import NodeIcon from '../../components/Icons/NodeIcon'
import LabelInputField from '../../components/General/LabelInputField'
import ReactionIcon from '../../components/Icons/ReactionIcon'
import ColorPicker from '../../components/General/ColorPicker'
const CreateLocalNodePage = () => {
const [autoConnectChecked, setAutoConnectChecked] = useState(false)
return (
<PageWrapperShadow rightImageSrc="/background-images/day-night-bg.png">
<div className="connection-page">
<XStack justifyContent={'space-between'}>
<NimbusLogo />
<TagContainer />
</XStack>
<article className="content">
<Titles
title="Create Local Node"
subtitle="Configure your device to start Staking on Nimbus"
/>
<YStack my={16}>
<XStack space>
<LabelInputField labelText="Device Name" placeholderText="Stake and chips" />
</XStack>
<XStack my={10} justifyContent={'space-between'}>
<YStack mr={30}>
<Text size={13} weight="regular" color={'#647084'}>
Device Avatar
</Text>
<XStack my={10}>
<Avatar type="account" size={80} name="Device Avatar" />
<Avatar type="icon" size={32} icon={<ReactionIcon />} backgroundColor={'white'} />
</XStack>
</YStack>
<YStack>
<Text size={13} weight="regular" color={'#647084'}>
Highlight Color
</Text>
<ColorPicker />
</YStack>
</XStack>
</YStack>
<YStack my={16}>
<Text size={19} weight="semibold">
Settings
</Text>
<XStack my={16} space={'$4'}>
<Checkbox
id="auto-connect"
selected={autoConnectChecked}
onCheckedChange={v => setAutoConnectChecked(v)}
variant="outline"
/>
<Label htmlFor="auto-connect">
<Text size={15} weight="regular">
Auto Connect Paired Device
</Text>
</Label>
</XStack>
<Separator alignSelf="stretch" borderColor={'#F0F2F5'} />
</YStack>
<StatusButton icon={<NodeIcon />}>Continue</StatusButton>
</article>
</div>
</PageWrapperShadow>
)
}
export default CreateLocalNodePage

7
src/pages/LandingPage/LandingPage.css
View File

@ -1,7 +1,4 @@
.landing-page header div img {
margin-right: 0.5rem;
.landing-page {
height: 100%;
}
.landing-page .content .subtitle {
margin-bottom: 3em;
}

97
src/pages/LandingPage/LandingPage.tsx
View File

File diff suppressed because one or more lines are too long

81
yarn.lock
View File

@ -2158,6 +2158,15 @@ __metadata:
languageName: node
linkType: hard
"@icons/material@npm:^0.2.4":
version: 0.2.4
resolution: "@icons/material@npm:0.2.4"
peerDependencies:
react: "*"
checksum: 24baa360cb83f7e1a9e6784ac11185d57eb895b0efd3070ec915693378330f35ff9feb248f650b9649fa3e1045601286585dc05795a4c734d4849b33900351ee
languageName: node
linkType: hard
"@isaacs/cliui@npm:^8.0.2":
version: 8.0.2
resolution: "@isaacs/cliui@npm:8.0.2"
@ -7033,6 +7042,16 @@ __metadata:
languageName: node
linkType: hard
"@types/react-color@npm:^3.0.6":
version: 3.0.6
resolution: "@types/react-color@npm:3.0.6"
dependencies:
"@types/react": "*"
"@types/reactcss": "*"
checksum: 8cd881d6eb725190be942c1d71f7917d3dd1b418417740f64fa6c03ae3ba16cb91d07c4b3b348cf5bae20071c8ca5d4aaf514c9a5318077d5e50bd782a5e8da2
languageName: node
linkType: hard
"@types/react-dom@npm:18":
version: 18.2.7
resolution: "@types/react-dom@npm:18.2.7"
@ -7062,6 +7081,15 @@ __metadata:
languageName: node
linkType: hard
"@types/reactcss@npm:*":
version: 1.2.6
resolution: "@types/reactcss@npm:1.2.6"
dependencies:
"@types/react": "*"
checksum: f4711d707a1af653178c8941080e989a945feb0c529d848fed36687ee5e8a462cda183383caadf8848497b5c03bec16e6cdf22fc70462913d8d706cabb597130
languageName: node
linkType: hard
"@types/resolve@npm:1.20.2":
version: 1.20.2
resolution: "@types/resolve@npm:1.20.2"
@ -12820,6 +12848,13 @@ __metadata:
languageName: node
linkType: hard
"lodash-es@npm:^4.17.15":
version: 4.17.21
resolution: "lodash-es@npm:4.17.21"
checksum: 05cbffad6e2adbb331a4e16fbd826e7faee403a1a04873b82b42c0f22090f280839f85b95393f487c1303c8a3d2a010048bf06151a6cbe03eee4d388fb0a12d2
languageName: node
linkType: hard
"lodash.debounce@npm:^4.0.8":
version: 4.0.8
resolution: "lodash.debounce@npm:4.0.8"
@ -12848,7 +12883,7 @@ __metadata:
languageName: node
linkType: hard
"lodash@npm:^4.17.15, lodash@npm:^4.17.21":
"lodash@npm:^4.0.1, lodash@npm:^4.17.15, lodash@npm:^4.17.21":
version: 4.17.21
resolution: "lodash@npm:4.17.21"
checksum: eb835a2e51d381e561e508ce932ea50a8e5a68f4ebdd771ea240d3048244a8d13658acbd502cd4829768c56f2e16bdd4340b9ea141297d472517b83868e677f7
@ -13024,6 +13059,13 @@ __metadata:
languageName: node
linkType: hard
"material-colors@npm:^1.2.1":
version: 1.2.6
resolution: "material-colors@npm:1.2.6"
checksum: 72d005ccccb82bab68eef3cd757e802668634fc86976dedb9fc564ce994f2d3258273766b7efecb7404a0031969e2d72201a1b74169763f0a53c0dd8d649209f
languageName: node
linkType: hard
"mdast-util-definitions@npm:^4.0.0":
version: 4.0.0
resolution: "mdast-util-definitions@npm:4.0.0"
@ -13717,6 +13759,7 @@ __metadata:
"@tamagui/react-17-patch": 1.36.4
"@tamagui/vite-plugin": 1.36.4
"@types/react": 18
"@types/react-color": ^3.0.6
"@types/react-dom": 18
"@typescript-eslint/eslint-plugin": ^6.0.0
"@typescript-eslint/parser": ^6.0.0
@ -13728,6 +13771,7 @@ __metadata:
expo-modules-core: ^1.5.9
prettier: ^3.0.1
react: 18
react-color: ^2.19.3
react-dom: 18
react-native: ^0.72.3
react-native-svg: ^13.10.0
@ -14585,7 +14629,7 @@ __metadata:
languageName: node
linkType: hard
"prop-types@npm:*, prop-types@npm:^15.7.2":
"prop-types@npm:*, prop-types@npm:^15.5.10, prop-types@npm:^15.7.2":
version: 15.8.1
resolution: "prop-types@npm:15.8.1"
dependencies:
@ -14729,6 +14773,23 @@ __metadata:
languageName: node
linkType: hard
"react-color@npm:^2.19.3":
version: 2.19.3
resolution: "react-color@npm:2.19.3"
dependencies:
"@icons/material": ^0.2.4
lodash: ^4.17.15
lodash-es: ^4.17.15
material-colors: ^1.2.1
prop-types: ^15.5.10
reactcss: ^1.2.0
tinycolor2: ^1.4.1
peerDependencies:
react: "*"
checksum: 40b49e1aa2ab27a099cc37a3fa2d5bb906b8def4dbe2d922c0e42365e386d82b03f9b06a2b29a44a51f1e114cef72e61c0ba0740581a128d951936ea4617429b
languageName: node
linkType: hard
"react-colorful@npm:^5.1.2":
version: 5.6.1
resolution: "react-colorful@npm:5.6.1"
@ -15109,6 +15170,15 @@ __metadata:
languageName: node
linkType: hard
"reactcss@npm:^1.2.0":
version: 1.2.3
resolution: "reactcss@npm:1.2.3"
dependencies:
lodash: ^4.0.1
checksum: c53e386a0881f1477e1cff661f6a6ad4c662230941f3827862193ac30f9b75cdf7bc7b4c7e5ca543d3e4e80fee1a3e9fa0056c206b1c0423726c41773ab3fe45
languageName: node
linkType: hard
"read-pkg-up@npm:^7.0.1":
version: 7.0.1
resolution: "read-pkg-up@npm:7.0.1"
@ -16391,6 +16461,13 @@ __metadata:
languageName: node
linkType: hard
"tinycolor2@npm:^1.4.1":
version: 1.6.0
resolution: "tinycolor2@npm:1.6.0"
checksum: 6df4d07fceeedc0a878d7bac47e2cd47c1ceeb1078340a9eb8a295bc0651e17c750f73d47b3028d829f30b85c15e0572c0fd4142083e4c21a30a597e47f47230
languageName: node
linkType: hard
"tmpl@npm:1.0.5":
version: 1.0.5
resolution: "tmpl@npm:1.0.5"