[outdated] tailwind components for studio advanced mode

packages/client-core/src/admin/components/invites/RemoveInviteModal.tsx

@@ -1,6 +1,5 @@
 /*
 CPAL-1.0 License
-
 The contents of this file are subject to the Common Public Attribution License
 Version 1.0. (the "License"); you may not use this file except in compliance
 with the License. You may obtain a copy of the License at
@@ -9,16 +8,12 @@ The License is based on the Mozilla Public License Version 1.1, but Sections 14
 and 15 have been added to cover use of software over a computer network and 
 provide for limited attribution for the Original Developer. In addition, 
 Exhibit A has been modified to be consistent with Exhibit B.
-
 Software distributed under the License is distributed on an "AS IS" basis,
 WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the
 specific language governing rights and limitations under the License.
-
 The Original Code is Ethereal Engine.
-
 The Original Developer is the Initial Developer. The Initial Developer of the
 Original Code is the Ethereal Engine team.
-
 All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 
 Ethereal Engine. All Rights Reserved.
 */

packages/client-core/src/common/services/ThemeService.tsx

@@ -55,7 +55,7 @@ const lightTheme = {
 
 const darkTheme = {
  'bg-primary': '#111113',
- 'bg-secondary': '#1A1B1E',
+ 'bg-secondary': '#1A1B1E', // not important now
  'bg-highlight': '#212226',
  'bg-surface-main': '#1A1B1E',
  'bg-surface-input': '#141619',

packages/client/src/themes/base.css

@@ -1 +1,2 @@
-@import "tailwindcss/base";
+@import "tailwindcss/base";
+

packages/editor/package.json

@@ -40,8 +40,10 @@
  "@mui/material": "5.11.13",
  "@mui/styles": "5.11.13",
  "@uiw/react-color-sketch": "^2.1.1",
+ "autoprefixer": "^10.4.19",
  "i18next": "21.6.16",
  "lodash": "4.17.21",
+ "postcss": "^8.4.38",
  "potpack": "^2.0.0",
  "rc-dock": "3.2.18",
  "rc-slider": "10.5.0",
@@ -57,6 +59,8 @@
  "react-virtualized-auto-sizer": "1.0.7",
  "react-window": "1.8.8",
  "reactflow": "^11.10.1",
+ "tailwind-merge": "^2.2.2",
+ "tailwindcss": "^3.4.3",
  "typescript": "5.0.2",
  "use-http": "1.0.27",
  "uuid": "9.0.0"

packages/editor/postcss.config.js

@@ -0,0 +1,43 @@
+/*
+CPAL-1.0 License
+
+The contents of this file are subject to the Common Public Attribution License
+Version 1.0. (the "License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE.
+The License is based on the Mozilla Public License Version 1.1, but Sections 14
+and 15 have been added to cover use of software over a computer network and 
+provide for limited attribution for the Original Developer. In addition, 
+Exhibit A has been modified to be consistent with Exhibit B.
+
+Software distributed under the License is distributed on an "AS IS" basis,
+WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the
+specific language governing rights and limitations under the License.
+
+The Original Code is Ethereal Engine.
+
+The Original Developer is the Initial Developer. The Initial Developer of the
+Original Code is the Ethereal Engine team.
+
+All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 
+Ethereal Engine. All Rights Reserved.
+*/
+
+import Component from './index'
+
+const argTypes = {}
+
+export default {
+ title: 'Primitives/Tailwind/Password',
+ component: Component,
+ parameters: {
+ componentSubtitle: 'Password',
+ jest: 'Password.test.tsx',
+ design: {
+ type: 'figma',
+ url: ''
+ }
+ },
+ argTypes
+}
+export const Default = { args: Component.defaultProps }

packages/editor/src/components/EditorContainer.css

@@ -1,6 +1,9 @@
 /* this is basically style for the editor page*/
 /* we can drill down furthur if needed*/
 
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 .dock-panel {
  background: transparent;

packages/editor/src/components/assets/ImageCompressionPanel.tsx

@@ -40,7 +40,7 @@ import { KTX2Encoder } from '@etherealengine/xrui/core/textures/KTX2Encoder'
 
 import { NotificationService } from '@etherealengine/client-core/src/common/services/NotificationService'
 import { fileBrowserUploadPath } from '@etherealengine/common/src/schema.type.module'
-import BooleanInput from '../inputs/BooleanInput'
+import BooleanInput from '@etherealengine/ui/src/components/editor/input/Boolean'
 import CompoundNumericInput from '../inputs/CompoundNumericInput'
 import InputGroup from '../inputs/InputGroup'
 import SelectInput from '../inputs/SelectInput'

packages/editor/src/components/assets/ImageConvertPanel.tsx

@@ -31,7 +31,7 @@ import { State } from '@etherealengine/hyperflux'
 
 import { Dialog, DialogTitle, Grid, Typography } from '@mui/material'
 
-import BooleanInput from '../inputs/BooleanInput'
+import BooleanInput from '@etherealengine/ui/src/components/editor/input/Boolean'
 import { Button } from '../inputs/Button'
 import NumericInput from '../inputs/NumericInput'
 import SelectInput from '../inputs/SelectInput'

packages/editor/src/components/assets/ImportSettingsPanel.tsx

@@ -26,6 +26,7 @@ Ethereal Engine. All Rights Reserved.
 import Menu from '@etherealengine/client-core/src/common/components/Menu'
 import { KTX2EncodeDefaultArguments } from '@etherealengine/engine/src/assets/constants/CompressionParms'
 import { NO_PROXY, defineState, getMutableState, syncStateWithLocalStorage } from '@etherealengine/hyperflux'
+import { BooleanInput } from '@etherealengine/ui/src/components/editor/input/Boolean'
 import { useHookstate } from '@hookstate/core'
 import {
  Box,
@@ -42,7 +43,6 @@ import { t } from 'i18next'
 import React, { useEffect, useState } from 'react'
 import { LODList, LODVariantDescriptor, defaultLODs } from '../../constants/GLTFPresets'
 import { DialogState } from '../dialogs/DialogState'
-import BooleanInput from '../inputs/BooleanInput'
 import CompoundNumericInput from '../inputs/CompoundNumericInput'
 import InputGroup from '../inputs/InputGroup'
 import SelectInput from '../inputs/SelectInput'

packages/editor/src/components/assets/ModelCompressionPanel.tsx

@@ -32,7 +32,6 @@ import { getState, NO_PROXY, State, useHookstate } from '@etherealengine/hyperfl
 import CircularProgress from '@etherealengine/ui/src/primitives/mui/CircularProgress'
 import Typography from '@etherealengine/ui/src/primitives/mui/Typography'
 
-import BooleanInput from '../inputs/BooleanInput'
 import InputGroup from '../inputs/InputGroup'
 import styles from './styles.module.scss'
 
@@ -63,6 +62,7 @@ import {
  EntityTreeComponent,
  removeEntityNodeRecursively
 } from '@etherealengine/spatial/src/transform/components/EntityTree'
+import BooleanInput from '@etherealengine/ui/src/components/editor/input/Boolean'
 import { Box, List, ListItem, ListItemButton, ListItemText, Modal } from '@mui/material'
 import { Group, LoaderUtils } from 'three'
 import { defaultLODs, LODList, LODVariantDescriptor } from '../../constants/GLTFPresets'

packages/editor/src/components/inputs/EulerInput.tsx

@@ -27,8 +27,8 @@ import { useHookstate } from '@hookstate/core'
 import React, { useCallback, useEffect } from 'react'
 import { Euler, Quaternion, MathUtils as _Math } from 'three'
 
+import { UniformButtonContainer, Vector3InputContainer, Vector3Scrubber } from '../inputs/Vector3Input'
 import NumericInput from './NumericInput'
-import { UniformButtonContainer, Vector3InputContainer, Vector3Scrubber } from './Vector3Input'
 
 const { RAD2DEG, DEG2RAD } = _Math
 /**

packages/editor/src/components/inputs/ParameterInput.tsx

@@ -27,7 +27,7 @@ import React, { Fragment } from 'react'
 
 import { generateDefaults } from '@etherealengine/engine/src/scene/materials/constants/DefaultArgs'
 
-import BooleanInput from './BooleanInput'
+import BooleanInput from '@etherealengine/ui/src/components/editor/input/Boolean'
 import ColorInput from './ColorInput'
 import InputGroup from './InputGroup'
 import NumericInput from './NumericInput'

packages/editor/src/components/inputs/Vector2Input.tsx

@@ -30,6 +30,7 @@ import LinkIcon from '@mui/icons-material/Link'
 import LinkOffIcon from '@mui/icons-material/LinkOff'
 
 import { useHookstate } from '@etherealengine/hyperflux'
+
 import Hidden from '../layout/Hidden'
 import NumericInput from './NumericInput'
 import { UniformButtonContainer, Vector3InputContainer, Vector3Scrubber } from './Vector3Input'

packages/editor/src/components/properties/AudioAnalysisEditor.tsx

@@ -25,9 +25,9 @@ Ethereal Engine. All Rights Reserved.
 
 import { useComponent } from '@etherealengine/ecs'
 import { AudioAnalysisComponent } from '@etherealengine/engine/src/scene/components/AudioAnalysisComponent'
+import { BooleanInput } from '@etherealengine/ui/src/components/editor/input/Boolean'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import BooleanInput from '../inputs/BooleanInput'
 import CompoundNumericInput from '../inputs/CompoundNumericInput'
 import InputGroup from '../inputs/InputGroup'
 import PropertyGroup from './PropertyGroup'

packages/editor/src/components/properties/CoreNodeEditor.tsx

@@ -39,13 +39,13 @@ import { VisibleComponent } from '@etherealengine/spatial/src/renderer/component
 import { Entity, EntityUUID } from '@etherealengine/ecs'
 import { ModelComponent } from '@etherealengine/engine/src/scene/components/ModelComponent'
 import { EntityTreeComponent } from '@etherealengine/spatial/src/transform/components/EntityTree'
+import BooleanInput from '@etherealengine/ui/src/components/editor/input/Boolean'
 import LockIcon from '@mui/icons-material/Lock'
 import UnlockIcon from '@mui/icons-material/LockOpen'
 import { EditorControlFunctions } from '../../functions/EditorControlFunctions'
 import { exportRelativeGLTF } from '../../functions/exportGLTF'
 import { EditorState } from '../../services/EditorServices'
 import { SelectionState } from '../../services/SelectionServices'
-import BooleanInput from '../inputs/BooleanInput'
 import { PropertiesPanelButton } from '../inputs/Button'
 import InputGroup from '../inputs/InputGroup'
 import { PanelIcon } from '../layout/Panel'

packages/editor/src/components/properties/DirectionalLightNodeEditor.tsx

@@ -31,7 +31,7 @@ import { DirectionalLightComponent } from '@etherealengine/spatial/src/renderer/
 
 import BoltIcon from '@mui/icons-material/Bolt'
 
-import BooleanInput from '../inputs/BooleanInput'
+import BooleanInput from '@etherealengine/ui/src/components/editor/input/Boolean'
 import ColorInput from '../inputs/ColorInput'
 import InputGroup from '../inputs/InputGroup'
 import NumericInputGroup from '../inputs/NumericInputGroup'

packages/editor/src/components/properties/EnvMapBakeNodeEditor.tsx

@@ -31,8 +31,8 @@ import { EnvMapBakeTypes } from '@etherealengine/engine/src/scene/types/EnvMapBa
 
 import SportsGolfIcon from '@mui/icons-material/SportsGolf'
 
+import BooleanInput from '@etherealengine/ui/src/components/editor/input/Boolean'
 import { uploadBPCEMBakeToServer } from '../../functions/uploadEnvMapBake'
-import BooleanInput from '../inputs/BooleanInput'
 import { PropertiesPanelButton } from '../inputs/Button'
 import InputGroup from '../inputs/InputGroup'
 import SelectInput from '../inputs/SelectInput'

packages/editor/src/components/properties/EnvMapBakeProperties.tsx

@@ -31,7 +31,7 @@ import { EnvMapBakeComponent } from '@etherealengine/engine/src/scene/components
 import { EnvMapBakeRefreshTypes } from '@etherealengine/engine/src/scene/types/EnvMapBakeRefreshTypes'
 import { EnvMapBakeTypes } from '@etherealengine/engine/src/scene/types/EnvMapBakeTypes'
 
-import BooleanInput from '../inputs/BooleanInput'
+import BooleanInput from '@etherealengine/ui/src/components/editor/input/Boolean'
 import InputGroup from '../inputs/InputGroup'
 import SelectInput from '../inputs/SelectInput'
 import Vector3Input from '../inputs/Vector3Input'

packages/editor/src/components/properties/GLTFTransformProperties.tsx

@@ -32,7 +32,7 @@ import {
 } from '@etherealengine/engine/src/assets/classes/ModelTransform'
 import { State } from '@etherealengine/hyperflux'
 
-import BooleanInput from '../inputs/BooleanInput'
+import { BooleanInput } from '@etherealengine/ui/src/components/editor/input/Boolean'
 import InputGroup from '../inputs/InputGroup'
 import NumericInput from '../inputs/NumericInput'
 import NumericInputGroup from '../inputs/NumericInputGroup'

packages/editor/src/components/properties/GroundPlaneNodeEditor.tsx

@@ -31,7 +31,7 @@ import { GroundPlaneComponent } from '@etherealengine/engine/src/scene/component
 
 import SquareIcon from '@mui/icons-material/Square'
 
-import BooleanInput from '../inputs/BooleanInput'
+import { BooleanInput } from '@etherealengine/ui/src/components/editor/input/Boolean'
 import ColorInput from '../inputs/ColorInput'
 import InputGroup from '../inputs/InputGroup'
 import NodeEditor from './NodeEditor'

packages/editor/src/components/properties/LightShadowProperties.tsx

@@ -29,7 +29,7 @@ import { useTranslation } from 'react-i18next'
 import { Component, useComponent } from '@etherealengine/ecs/src/ComponentFunctions'
 import { Entity } from '@etherealengine/ecs/src/Entity'
 
-import BooleanInput from '../inputs/BooleanInput'
+import { BooleanInput } from '@etherealengine/ui/src/components/editor/input/Boolean'
 import InputGroup from '../inputs/InputGroup'
 import NumericInputGroup from '../inputs/NumericInputGroup'
 import { commitProperty, updateProperty } from './Util'

packages/editor/src/components/properties/LinkNodeEditor.tsx

@@ -32,7 +32,7 @@ import LinkIcon from '@mui/icons-material/Link'
 
 import { getEntityErrors } from '@etherealengine/engine/src/scene/components/ErrorComponent'
 import { LinkComponent } from '@etherealengine/engine/src/scene/components/LinkComponent'
-import BooleanInput from '../inputs/BooleanInput'
+import { BooleanInput } from '@etherealengine/ui/src/components/editor/input/Boolean'
 import InputGroup from '../inputs/InputGroup'
 import { ControlledStringInput } from '../inputs/StringInput'
 import NodeEditor from './NodeEditor'

packages/editor/src/components/properties/MediaNodeEditor.tsx

@@ -35,10 +35,9 @@ import {
  setTime
 } from '@etherealengine/engine/src/scene/components/MediaComponent'
 import { PlayMode } from '@etherealengine/engine/src/scene/constants/PlayMode'
-
+import { BooleanInput } from '@etherealengine/ui/src/components/editor/input/Boolean'
 import { SupportedFileTypes } from '../../constants/AssetTypes'
 import ArrayInputGroup from '../inputs/ArrayInputGroup'
-import BooleanInput from '../inputs/BooleanInput'
 import { PropertiesPanelButton } from '../inputs/Button'
 import CompoundNumericInput from '../inputs/CompoundNumericInput'
 import InputGroup from '../inputs/InputGroup'

packages/editor/src/components/properties/MediaSettingsEditor.tsx

@@ -30,7 +30,7 @@ import { useComponent } from '@etherealengine/ecs/src/ComponentFunctions'
 import { DistanceModel, DistanceModelOptions } from '@etherealengine/engine/src/audio/constants/AudioConstants'
 import { MediaSettingsComponent } from '@etherealengine/engine/src/scene/components/MediaSettingsComponent'
 
-import BooleanInput from '../inputs/BooleanInput'
+import { BooleanInput } from '@etherealengine/ui/src/components/editor/input/Boolean'
 import CompoundNumericInput from '../inputs/CompoundNumericInput'
 import InputGroup from '../inputs/InputGroup'
 import NumericInputGroup from '../inputs/NumericInputGroup'

packages/editor/src/components/properties/ModelNodeEditor.tsx

@@ -38,9 +38,9 @@ import config from '@etherealengine/common/src/config'
 import { pathJoin } from '@etherealengine/common/src/utils/miscUtils'
 import { pathResolver } from '@etherealengine/engine/src/assets/functions/pathResolver'
 import { recursiveHipsLookup } from '@etherealengine/engine/src/avatar/AvatarBoneMatching'
+import { BooleanInput } from '@etherealengine/ui/src/components/editor/input/Boolean'
 import { exportRelativeGLTF } from '../../functions/exportGLTF'
 import { EditorState } from '../../services/EditorServices'
-import BooleanInput from '../inputs/BooleanInput'
 import { PropertiesPanelButton } from '../inputs/Button'
 import InputGroup from '../inputs/InputGroup'
 import ModelInput from '../inputs/ModelInput'

packages/editor/src/components/properties/ModelTransformProperties.tsx

@@ -50,9 +50,9 @@ import { NO_PROXY, State, getMutableState } from '@etherealengine/hyperflux/func
 
 import { modelTransformPath } from '@etherealengine/common/src/schema.type.module'
 import { transformModel as clientSideTransformModel } from '@etherealengine/engine/src/assets/compression/ModelTransformFunctions'
+import { BooleanInput } from '@etherealengine/ui/src/components/editor/input/Boolean'
 import exportGLTF from '../../functions/exportGLTF'
 import { SelectionState } from '../../services/SelectionServices'
-import BooleanInput from '../inputs/BooleanInput'
 import { Button } from '../inputs/Button'
 import InputGroup from '../inputs/InputGroup'
 import StringInput from '../inputs/StringInput'

packages/editor/src/components/properties/ParticleSystemNodeEditor.tsx

@@ -56,7 +56,7 @@ import { State } from '@etherealengine/hyperflux'
 
 import ScatterPlotOutlined from '@mui/icons-material/ScatterPlotOutlined'
 
-import BooleanInput from '../inputs/BooleanInput'
+import { BooleanInput } from '@etherealengine/ui/src/components/editor/input/Boolean'
 import { Button } from '../inputs/Button'
 import InputGroup from '../inputs/InputGroup'
 import ModelInput from '../inputs/ModelInput'

packages/editor/src/components/properties/PortalNodeEditor.tsx

@@ -42,9 +42,9 @@ import MeetingRoomIcon from '@mui/icons-material/MeetingRoom'
 
 import { PortalType, portalPath } from '@etherealengine/common/src/schema.type.module'
 import { imageDataToBlob } from '@etherealengine/engine/src/scene/classes/ImageUtils'
+import { BooleanInput } from '@etherealengine/ui/src/components/editor/input/Boolean'
 import { useHookstate } from '@hookstate/core'
 import { bakeEnvmapTexture, uploadCubemapBakeToServer } from '../../functions/uploadEnvMapBake'
-import BooleanInput from '../inputs/BooleanInput'
 import { Button } from '../inputs/Button'
 import EulerInput from '../inputs/EulerInput'
 import ImagePreviewInput from '../inputs/ImagePreviewInput'

packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx

@@ -38,7 +38,7 @@ import Checkbox from '@mui/material/Checkbox'
 import Collapse from '@mui/material/Collapse'
 import IconButton from '@mui/material/IconButton'
 
-import BooleanInput from '../inputs/BooleanInput'
+import { BooleanInput } from '@etherealengine/ui/src/components/editor/input/Boolean'
 import ColorInput from '../inputs/ColorInput'
 import CompoundNumericInput from '../inputs/CompoundNumericInput'
 import InputGroup from '../inputs/InputGroup'

packages/editor/src/components/properties/RenderSettingsEditor.tsx

@@ -40,7 +40,7 @@ import {
 import { useComponent } from '@etherealengine/ecs/src/ComponentFunctions'
 import { RenderSettingsComponent } from '@etherealengine/engine/src/scene/components/RenderSettingsComponent'
 
-import BooleanInput from '../inputs/BooleanInput'
+import { BooleanInput } from '@etherealengine/ui/src/components/editor/input/Boolean'
 import CompoundNumericInput from '../inputs/CompoundNumericInput'
 import InputGroup from '../inputs/InputGroup'
 import SelectInput from '../inputs/SelectInput'

packages/editor/src/components/properties/SDFEditor.tsx

@@ -28,7 +28,7 @@ import React from 'react'
 import { useComponent } from '@etherealengine/ecs/src/ComponentFunctions'
 import { SDFComponent, SDFMode } from '@etherealengine/engine/src/scene/components/SDFComponent'
 
-import BooleanInput from '../inputs/BooleanInput'
+import { BooleanInput } from '@etherealengine/ui/src/components/editor/input/Boolean'
 import ColorInput from '../inputs/ColorInput'
 import InputGroup from '../inputs/InputGroup'
 import SelectInput from '../inputs/SelectInput'

packages/editor/src/components/properties/ScreenshareTargetNodeEditor.tsx

@@ -31,8 +31,8 @@ import { ScreenshareTargetComponent } from '@etherealengine/engine/src/scene/com
 
 import ScreenShareIcon from '@mui/icons-material/ScreenShare'
 
+import { BooleanInput } from '@etherealengine/ui/src/components/editor/input/Boolean'
 import { EditorControlFunctions } from '../../functions/EditorControlFunctions'
-import BooleanInput from '../inputs/BooleanInput'
 import NodeEditor from './NodeEditor'
 import { EditorComponentType } from './Util'
 

packages/editor/src/components/properties/ShadowProperties.tsx

@@ -29,7 +29,7 @@ import { useTranslation } from 'react-i18next'
 import { useComponent } from '@etherealengine/ecs/src/ComponentFunctions'
 import { ShadowComponent } from '@etherealengine/engine/src/scene/components/ShadowComponent'
 
-import BooleanInput from '../inputs/BooleanInput'
+import { BooleanInput } from '@etherealengine/ui/src/components/editor/input/Boolean'
 import InputGroup from '../inputs/InputGroup'
 import NodeEditor from './NodeEditor'
 import { EditorComponentType, commitProperty } from './Util'

packages/editor/src/components/properties/SplineTrackNodeEditor.tsx

@@ -35,7 +35,7 @@ import { UUIDComponent } from '@etherealengine/ecs'
 import { useQuery } from '@etherealengine/ecs/src/QueryFunctions'
 import { SplineComponent } from '@etherealengine/engine/src/scene/components/SplineComponent'
 import { NameComponent } from '@etherealengine/spatial/src/common/NameComponent'
-import BooleanInput from '../inputs/BooleanInput'
+import { BooleanInput } from '@etherealengine/ui/src/components/editor/input/Boolean'
 import InputGroup from '../inputs/InputGroup'
 import NumericInput from '../inputs/NumericInput'
 import SelectInput from '../inputs/SelectInput'