add playground

redisinsight/ui/src/components/main-router/config.ts

@@ -4,6 +4,7 @@ import { getConfig } from 'uiSrc/config'
 const riConfig = getConfig()
 
 export const LAZY_LOAD = riConfig?.app?.lazyLoad
+export const LOAD_PLAYGROUND = riConfig?.app?.env !== 'production'
 
 export const ROUTES_EXCLUDED_BY_ENV = riConfig?.app?.routesExcludedByEnv
 

redisinsight/ui/src/components/main-router/constants/commonRoutes.ts

@@ -6,7 +6,9 @@ import {
   SentinelDatabasesResultPage,
   SentinelPage,
 } from 'uiSrc/pages/autodiscover-sentinel'
-import { LAZY_LOAD } from '../config'
+import { PlaygroundPage } from 'uiSrc/pages/playground/PlaygroundPage'
+
+import { LAZY_LOAD, LOAD_PLAYGROUND } from '../config'
 
 const LazySettingsPage = lazy(() => import('uiSrc/pages/settings'))
 const LazySentinelDatabasesPage = lazy(
@@ -44,4 +46,11 @@ const ROUTES: IRoute[] = [
   },
 ]
 
+if (LOAD_PLAYGROUND) {
+  ROUTES.push({
+    path: '/playground',
+    component: PlaygroundPage,
+  })
+}
+
 export default ROUTES

redisinsight/ui/src/pages/playground/Colors.tsx

@@ -0,0 +1,85 @@
+import React from 'react'
+import { useTheme } from '@redis-ui/styles'
+import { Col, Grid } from 'uiSrc/components/base/layout/flex'
+import { Text } from 'uiSrc/components/base/text'
+import { Title } from 'uiSrc/components/base/text/Title'
+
+const ColorItem = ({
+  color,
+  colorName,
+}: {
+  color: string
+  colorName: string
+}) => (
+  <Col
+    gap="m"
+    style={{
+      alignItems: 'center',
+      backgroundColor: '#aaa',
+      opacity: 0.8,
+      padding: 10,
+      minWidth: 200,
+    }}
+  >
+    <Text variant="semiBold">{colorName}</Text>
+    <div
+      style={{
+        width: 50,
+        height: 50,
+        backgroundColor: color,
+        border: '1px solid',
+      }}
+    />
+    <Text variant="semiBold"> {color}</Text>
+  </Col>
+)
+const ColorSectionTitle = ({ title }: { title: string }) => (
+  <Title size="S" style={{ textAlign: 'center', marginTop: 10 }}>
+    {title}
+  </Title>
+)
+
+const ColorSection = ({
+  title,
+  colors,
+}: {
+  title: string
+  colors: [string, string][]
+}) => (
+  <>
+    <ColorSectionTitle title={title} />
+    <Grid
+      columns={4}
+      gap="m"
+      centered
+      responsive
+      style={{
+        flexGrow: 1,
+        padding: 10,
+      }}
+    >
+      {colors.map(([colorName, color]) => (
+        <ColorItem key={colorName} color={color} colorName={colorName} />
+      ))}
+    </Grid>
+  </>
+)
+
+export const Colors = () => {
+  const theme = useTheme()
+  const { color: rootColors, semantic } = theme
+  const { color: semanticColors } = semantic
+  return (
+    <>
+      <ColorSection title="Root colors" colors={Object.entries(rootColors)} />
+      <ColorSectionTitle title="Semantic colors" />
+      {Object.entries(semanticColors).map(([colorSection, colors]) => (
+        <ColorSection
+          title={`Semantic: ${colorSection}`}
+          colors={Object.entries(colors)}
+          key={`semantic-${colorSection}`}
+        />
+      ))}
+    </>
+  )
+}

redisinsight/ui/src/pages/playground/Gallery.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import { FlexItem, Grid } from 'uiSrc/components/base/layout/flex'
+import { AllIconsType, RiIcon } from 'uiSrc/components/base/icons/RiIcon'
+import * as Icons from 'uiSrc/components/base/icons/iconRegistry'
+
+const skip = [
+  'IconProps',
+  'Icon',
+  'IconSizeType',
+  'IconColorType',
+  'ColorIconProps',
+  'MonochromeIconProps',
+  'IconType',
+]
+export const Gallery = () => (
+  <Grid
+    columns={4}
+    gap="m"
+    centered
+    responsive
+    style={{
+      padding: 10,
+      flexGrow: 1,
+    }}
+  >
+    {Object.keys(Icons).map((icon) => {
+      if (skip.includes(icon)) {
+        return null
+      }
+      return (
+        <FlexItem
+          key={icon}
+          style={{
+            alignItems: 'center',
+            backgroundColor: '#ccc',
+            padding: '10px',
+          }}
+        >
+          <RiIcon
+            type={icon as AllIconsType}
+            size="XL"
+            color="informative400"
+          />
+          <span>{icon}</span>
+        </FlexItem>
+      )
+    })}
+  </Grid>
+)

redisinsight/ui/src/pages/playground/PlaygroundPage.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import { Col, Row } from 'uiSrc/components/base/layout/flex'
+import { Title } from 'uiSrc/components/base/text/Title'
+import { Theme } from './Theme'
+import { Gallery } from './Gallery'
+import { Colors } from './Colors'
+
+export const PlaygroundPage = () => (
+  <Row
+    gap="m"
+    style={{
+      padding: '2rem',
+      // backgroundColor: 'yellow',
+      maxWidth: '100%',
+      position: 'relative',
+      maxHeight: '100%',
+      overflow: 'auto',
+    }}
+  >
+    <Col
+      gap="m"
+      style={{ minWidth: 300, position: 'fixed', top: 100, left: 100 }}
+    >
+      <Title size="L">Playground</Title>
+      <ul
+        style={{
+          listStyle: 'none',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 10,
+        }}
+      >
+        <li>
+          <a href="#theme">Theme</a>
+        </li>
+        <li>
+          <a href="#icons">Icons</a>
+        </li>
+        <li>
+          <a href="#colors">Colors</a>
+        </li>
+      </ul>
+    </Col>
+    <Col gap="xl" align="center">
+      <Title id="theme" size="XL" style={{ textAlign: 'center' }}>
+        Theme
+      </Title>
+      <Theme />
+      <Title id="icons" size="XL" style={{ textAlign: 'center' }}>
+        Icons
+      </Title>
+      <Gallery />
+      <Title
+        id="colors"
+        size="XL"
+        style={{
+          textAlign: 'center',
+          marginTop: 100,
+        }}
+      >
+        Colors
+      </Title>
+      <Colors />
+    </Col>
+  </Row>
+)