diff --git a/lib/app-setup/root.tsx b/lib/app-setup/root.tsx index 55824610f..f959a4f38 100644 --- a/lib/app-setup/root.tsx +++ b/lib/app-setup/root.tsx @@ -15,7 +15,6 @@ import { ReactNode, useEffect } from 'react'; import skeletonCSS from 'react-loading-skeleton/dist/skeleton.css'; import styleReactPulsable from 'react-pulsable/index.css'; import reactToast from 'react-toastify/dist/ReactToastify.css'; -import styleZenerSelect from '@oshq/react-select/index.css'; import rcss from 'react-highlightjs-logs/dist/index.css'; import Container from '~/components/atoms/container'; import ProgressContainer, { @@ -42,7 +41,6 @@ export const links: LinksFunction = () => [ { rel: 'stylesheet', href: skeletonCSS }, { rel: 'stylesheet', href: rcSlide }, { rel: 'stylesheet', href: styleReactPulsable }, - { rel: 'stylesheet', href: styleZenerSelect }, { rel: 'stylesheet', href: rcss }, { rel: 'stylesheet', diff --git a/package.json b/package.json index 2f6cb2ad0..247b0e0d2 100644 --- a/package.json +++ b/package.json @@ -1,143 +1,143 @@ { - "name": "kloudlite.github.io", - "private": true, - "version": "0.0.0", - "homepage": "https://kloudlite.github.io", - "type": "module", - "scripts": { - "postinstall": "cd src/generated && pnpm i", - "fake": "esbuild fake-data-generator/gen.ts --format=cjs --outfile=public/dist/fake-data-generator.cjs --platform=node && node public/dist/fake-data-generator.cjs", - "dev": "remix dev", - "serve": "remix-serve ./public/${APP}/server", - "watch": "nodemon --watch lib --watch src/${APP} --exec \"pnpm typecheck\"", - "start": "sh scripts/run.sh", - "build:ts": "pnpm fake && pnpm typecheck && remix build", - "build": "remix build", - "dbuild": "docker build --build-arg APP=${APP} . -t ghcr.io/kloudlite/web/${APP}:${IMAGE_TAG}", - "dpush": "docker push ghcr.io/kloudlite/web/${APP}:${IMAGE_TAG}", - "typecheck:watch": "tsc -w --p tsconfig-compile.json", - "typecheck": "tsc --p tsconfig-compile.json", - "typecheck:withtsgen": "pnpm tsgen && pnpm typecheck", - "gql:parse": "esbuild gql-queries-generator/index.ts --bundle --format=cjs --outfile=public/dist/gql-generator.cjs --platform=node && node public/dist/gql-generator.cjs", - "tsgen": "pnpm gql:parse && cd src/generated && pnpm tsgen", - "tsc": "tsc /Users/piyush/workspace/kloudlite/web/src/apps/iot-console/utils/commons.tsx" - }, - "dependencies": { - "@jengaicons/react": "1.6.0", - "@mdx-js/react": "^2.3.0", - "@monaco-editor/react": "^4.6.0", - "@oshq/react-select": "^1.4.4", - "@radix-ui/primitive": "^1.0.1", - "@radix-ui/react-alert-dialog": "1.0.4", - "@radix-ui/react-checkbox": "^1.0.4", - "@radix-ui/react-collection": "^1.0.3", - "@radix-ui/react-compose-refs": "^1.0.1", - "@radix-ui/react-context": "^1.0.1", - "@radix-ui/react-dialog": "1.0.4", - "@radix-ui/react-direction": "1.0.1", - "@radix-ui/react-dismissable-layer": "^1.0.5", - "@radix-ui/react-dropdown-menu": "^2.0.6", - "@radix-ui/react-focus-guards": "^1.0.1", - "@radix-ui/react-focus-scope": "^1.0.4", - "@radix-ui/react-id": "^1.0.1", - "@radix-ui/react-menu": "2.0.5", - "@radix-ui/react-navigation-menu": "^1.1.4", - "@radix-ui/react-popover": "1.0.6", - "@radix-ui/react-popper": "^1.1.3", - "@radix-ui/react-portal": "^1.0.4", - "@radix-ui/react-presence": "^1.0.1", - "@radix-ui/react-primitive": "^1.0.3", - "@radix-ui/react-radio-group": "1.1.3", - "@radix-ui/react-roving-focus": "^1.0.4", - "@radix-ui/react-select": "^2.0.0", - "@radix-ui/react-separator": "^1.0.3", - "@radix-ui/react-slot": "^1.0.2", - "@radix-ui/react-switch": "^1.0.3", - "@radix-ui/react-toast": "^1.1.5", - "@radix-ui/react-toggle-group": "^1.0.4", - "@radix-ui/react-tooltip": "^1.0.7", - "@radix-ui/react-use-callback-ref": "^1.0.1", - "@radix-ui/react-use-controllable-state": "^1.0.1", - "@react-aria/focus": "^3.16.0", - "@react-aria/gridlist": "^3.7.3", - "@react-types/shared": "^3.22.0", - "@remix-run/node": "^1.19.3", - "@remix-run/react": "^1.19.3", - "anser": "^2.1.1", - "apexcharts": "^3.45.2", - "aria-hidden": "^1.2.3", - "axios": "^1.6.3", - "classnames": "^2.5.1", - "cookie": "^0.5.0", - "dayjs": "^1.11.10", - "framer-motion": "^11.0.23", - "fuse.js": "^6.6.2", - "graphql": "^16.8.1", - "graphql-tag": "^2.12.6", - "highlight.js": "^11.9.0", - "isbot": "^3.8.0", - "js-cookie": "^3.0.5", - "js-yaml": "^4.1.0", - "pino": "^8.17.2", - "rc-slider": "^10.5.0", - "react": "18.2.0", - "react-diff-viewer-continued": "^3.4.0", - "react-dom": "^18.2.0", - "react-google-recaptcha-v3": "^1.10.1", - "react-highlightjs-logs": "^1.1.0", - "react-hook-form": "^7.49.2", - "react-loading-skeleton": "^3.3.1", - "react-pulsable": "^1.0.17", - "react-qr-code": "^2.0.12", - "react-remove-scroll": "^2.5.7", - "react-router-dom": "^6.21.1", - "react-toastify": "^9.1.3", - "react-tooltip": "^5.27.0", - "react-viewport-list": "^7.1.2", - "reconnecting-websocket": "^4.4.0", - "remix": "^1.19.3", - "search-in-json": "^1.0.67", - "swr": "^2.2.4", - "use-immer": "^0.9.0", - "uuid": "^9.0.1", - "yup": "^1.3.3" - }, - "devDependencies": { - "@babel/core": "^7.23.7", - "@babel/preset-env": "^7.23.7", - "@faker-js/faker": "^8.3.1", - "@remix-run/dev": "^1.19.3", - "@remix-run/serve": "^1.19.3", - "@types/cookie": "^0.5.4", - "@types/js-cookie": "^3.0.6", - "@types/js-yaml": "^4.0.9", - "@types/react": "^18.2.46", - "@types/react-dom": "^18.2.18", - "@types/react-ranger": "^2.0.4", - "@types/uuid": "^9.0.7", - "@typescript-eslint/eslint-plugin": "^6.17.0", - "@typescript-eslint/parser": "^6.17.0", - "autoprefixer": "^10.4.16", - "esbuild": "^0.19.11", - "eslint": "^8.56.0", - "eslint-config-airbnb": "19.0.4", - "eslint-config-prettier": "^8.10.0", - "eslint-import-resolver-jsconfig": "^1.1.0", - "eslint-import-resolver-node": "^0.3.9", - "eslint-import-resolver-typescript": "^3.6.1", - "eslint-plugin-import": "^2.29.1", - "eslint-plugin-jsx-a11y": "^6.8.0", - "eslint-plugin-prefer-arrow-functions": "^3.2.4", - "eslint-plugin-prettier": "^4.2.1", - "eslint-plugin-react": "^7.33.2", - "eslint-plugin-react-hooks": "^4.6.0", - "faker": "^5.5.3", - "json-schema-faker": "^0.5.4", - "nodemon": "^2.0.22", - "prettier": "^2.8.8", - "remix-flat-routes": "^0.6.4", - "tailwindcss": "^3.4.0", - "typescript": "^5.3.3", - "typescript-json-schema": "^0.62.0" - } + "name": "kloudlite.github.io", + "private": true, + "version": "0.0.0", + "homepage": "https://kloudlite.github.io", + "type": "module", + "scripts": { + "postinstall": "cd src/generated && pnpm i", + "fake": "esbuild fake-data-generator/gen.ts --format=cjs --outfile=public/dist/fake-data-generator.cjs --platform=node && node public/dist/fake-data-generator.cjs", + "dev": "remix dev", + "serve": "remix-serve ./public/${APP}/server", + "watch": "nodemon --watch lib --watch src/${APP} --exec \"pnpm typecheck\"", + "start": "sh scripts/run.sh", + "build:ts": "pnpm fake && pnpm typecheck && remix build", + "build": "remix build", + "dbuild": "docker build --build-arg APP=${APP} . -t ghcr.io/kloudlite/web/${APP}:${IMAGE_TAG}", + "dpush": "docker push ghcr.io/kloudlite/web/${APP}:${IMAGE_TAG}", + "typecheck:watch": "tsc -w --p tsconfig-compile.json", + "typecheck": "tsc --p tsconfig-compile.json", + "typecheck:withtsgen": "pnpm tsgen && pnpm typecheck", + "gql:parse": "esbuild gql-queries-generator/index.ts --bundle --format=cjs --outfile=public/dist/gql-generator.cjs --platform=node && node public/dist/gql-generator.cjs", + "tsgen": "pnpm gql:parse && cd src/generated && pnpm tsgen", + "tsc": "tsc /Users/piyush/workspace/kloudlite/web/src/apps/iot-console/utils/commons.tsx" + }, + "dependencies": { + "@jengaicons/react": "1.6.0", + "@mdx-js/react": "^2.3.0", + "@monaco-editor/react": "^4.6.0", + "@oshq/react-select": "^1.4.6", + "@radix-ui/primitive": "^1.0.1", + "@radix-ui/react-alert-dialog": "1.0.4", + "@radix-ui/react-checkbox": "^1.0.4", + "@radix-ui/react-collection": "^1.0.3", + "@radix-ui/react-compose-refs": "^1.0.1", + "@radix-ui/react-context": "^1.0.1", + "@radix-ui/react-dialog": "1.0.4", + "@radix-ui/react-direction": "1.0.1", + "@radix-ui/react-dismissable-layer": "^1.0.5", + "@radix-ui/react-dropdown-menu": "^2.0.6", + "@radix-ui/react-focus-guards": "^1.0.1", + "@radix-ui/react-focus-scope": "^1.0.4", + "@radix-ui/react-id": "^1.0.1", + "@radix-ui/react-menu": "2.0.5", + "@radix-ui/react-navigation-menu": "^1.1.4", + "@radix-ui/react-popover": "1.0.6", + "@radix-ui/react-popper": "^1.1.3", + "@radix-ui/react-portal": "^1.0.4", + "@radix-ui/react-presence": "^1.0.1", + "@radix-ui/react-primitive": "^1.0.3", + "@radix-ui/react-radio-group": "1.1.3", + "@radix-ui/react-roving-focus": "^1.0.4", + "@radix-ui/react-select": "^2.0.0", + "@radix-ui/react-separator": "^1.0.3", + "@radix-ui/react-slot": "^1.0.2", + "@radix-ui/react-switch": "^1.0.3", + "@radix-ui/react-toast": "^1.1.5", + "@radix-ui/react-toggle-group": "^1.0.4", + "@radix-ui/react-tooltip": "^1.0.7", + "@radix-ui/react-use-callback-ref": "^1.0.1", + "@radix-ui/react-use-controllable-state": "^1.0.1", + "@react-aria/focus": "^3.16.0", + "@react-aria/gridlist": "^3.7.3", + "@react-types/shared": "^3.22.0", + "@remix-run/node": "^1.19.3", + "@remix-run/react": "^1.19.3", + "anser": "^2.1.1", + "apexcharts": "^3.45.2", + "aria-hidden": "^1.2.3", + "axios": "^1.6.3", + "classnames": "^2.5.1", + "cookie": "^0.5.0", + "dayjs": "^1.11.10", + "framer-motion": "^11.0.23", + "fuse.js": "^6.6.2", + "graphql": "^16.8.1", + "graphql-tag": "^2.12.6", + "highlight.js": "^11.9.0", + "isbot": "^3.8.0", + "js-cookie": "^3.0.5", + "js-yaml": "^4.1.0", + "pino": "^8.17.2", + "rc-slider": "^10.5.0", + "react": "18.2.0", + "react-diff-viewer-continued": "^3.4.0", + "react-dom": "^18.2.0", + "react-google-recaptcha-v3": "^1.10.1", + "react-highlightjs-logs": "^1.1.0", + "react-hook-form": "^7.49.2", + "react-loading-skeleton": "^3.3.1", + "react-pulsable": "^1.0.17", + "react-qr-code": "^2.0.12", + "react-remove-scroll": "^2.5.7", + "react-router-dom": "^6.21.1", + "react-toastify": "^9.1.3", + "react-tooltip": "^5.27.0", + "react-viewport-list": "^7.1.2", + "reconnecting-websocket": "^4.4.0", + "remix": "^1.19.3", + "search-in-json": "^1.0.67", + "swr": "^2.2.4", + "use-immer": "^0.9.0", + "uuid": "^9.0.1", + "yup": "^1.3.3" + }, + "devDependencies": { + "@babel/core": "^7.23.7", + "@babel/preset-env": "^7.23.7", + "@faker-js/faker": "^8.3.1", + "@remix-run/dev": "^1.19.3", + "@remix-run/serve": "^1.19.3", + "@types/cookie": "^0.5.4", + "@types/js-cookie": "^3.0.6", + "@types/js-yaml": "^4.0.9", + "@types/react": "^18.2.46", + "@types/react-dom": "^18.2.18", + "@types/react-ranger": "^2.0.4", + "@types/uuid": "^9.0.7", + "@typescript-eslint/eslint-plugin": "^6.17.0", + "@typescript-eslint/parser": "^6.17.0", + "autoprefixer": "^10.4.16", + "esbuild": "^0.19.11", + "eslint": "^8.56.0", + "eslint-config-airbnb": "19.0.4", + "eslint-config-prettier": "^8.10.0", + "eslint-import-resolver-jsconfig": "^1.1.0", + "eslint-import-resolver-node": "^0.3.9", + "eslint-import-resolver-typescript": "^3.6.1", + "eslint-plugin-import": "^2.29.1", + "eslint-plugin-jsx-a11y": "^6.8.0", + "eslint-plugin-prefer-arrow-functions": "^3.2.4", + "eslint-plugin-prettier": "^4.2.1", + "eslint-plugin-react": "^7.33.2", + "eslint-plugin-react-hooks": "^4.6.0", + "faker": "^5.5.3", + "json-schema-faker": "^0.5.4", + "nodemon": "^2.0.22", + "prettier": "^2.8.8", + "remix-flat-routes": "^0.6.4", + "tailwindcss": "^3.4.0", + "typescript": "^5.3.3", + "typescript-json-schema": "^0.62.0" + } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 19ab52d3e..fd3d30c30 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -15,8 +15,8 @@ dependencies: specifier: ^4.6.0 version: 4.6.0(monaco-editor@0.49.0)(react-dom@18.3.1)(react@18.2.0) '@oshq/react-select': - specifier: ^1.4.4 - version: 1.4.4(@radix-ui/react-portal@1.0.4)(classnames@2.5.1)(framer-motion@11.2.9)(rc-virtual-list@3.14.2)(react@18.2.0) + specifier: ^1.4.6 + version: 1.4.6(@radix-ui/react-portal@1.0.4)(classnames@2.5.1)(framer-motion@11.2.9)(rc-virtual-list@3.14.2)(react@18.2.0) '@radix-ui/primitive': specifier: ^1.0.1 version: 1.0.1 @@ -2557,8 +2557,8 @@ packages: json-parse-even-better-errors: 2.3.1 dev: true - /@oshq/react-select@1.4.4(@radix-ui/react-portal@1.0.4)(classnames@2.5.1)(framer-motion@11.2.9)(rc-virtual-list@3.14.2)(react@18.2.0): - resolution: {integrity: sha512-jfMSnookesY0ge/q1amjpj16cmG09MU6YAjfHlpJ3GDxB5vjo/60I+cv9pWzTUcKNlZd1tuRZd9zKjggALz3IA==} + /@oshq/react-select@1.4.6(@radix-ui/react-portal@1.0.4)(classnames@2.5.1)(framer-motion@11.2.9)(rc-virtual-list@3.14.2)(react@18.2.0): + resolution: {integrity: sha512-3hB9XHPeyr4HNOVp9YriCd2GduChrEUkc17aa6cAi9sNn62eNHPdRlVRS+1CUibc31H2Gu5z2CqGaeFAovJzCQ==} peerDependencies: '@radix-ui/react-portal': ^1.0.4 classnames: ^2.3.2 diff --git a/src/design-system/components/atoms/input.tsx b/src/design-system/components/atoms/input.tsx index 36f7e0693..77fa0c8e9 100644 --- a/src/design-system/components/atoms/input.tsx +++ b/src/design-system/components/atoms/input.tsx @@ -163,8 +163,13 @@ export const TextInputBase = forwardRef( disabled, 'pr-0': component !== 'input', }, - size === 'xl' ? 'h-[60px] !px-2xl' : 'px-lg', - className + { + 'h-[48px]': size === 'lg' && component === 'input', + 'h-[60px]': size === 'xl' && component === 'input', + 'h-[32px]': size === 'md' && component === 'input', + }, + size === 'xl' ? '!px-2xl' : 'px-lg', + className, )} > {!!prefixIcon && ( @@ -214,7 +219,7 @@ export const TextInputBase = forwardRef( 'no-spinner': type === 'number', }, size === 'xl' ? '' : 'bodyMd', - textFieldClassName + textFieldClassName, )} value={value} onChange={(e: any) => { @@ -266,7 +271,7 @@ export const TextInputBase = forwardRef( 'outline-none flex items-center rounded justify-center', { 'cursor-default': disabled, - } + }, )} > @@ -283,7 +288,7 @@ export const TextInputBase = forwardRef( 'outline-none flex items-center rounded justify-center', { 'cursor-default': disabled, - } + }, )} > {t === 'password' ? ( @@ -303,7 +308,7 @@ export const TextInputBase = forwardRef( 'text-text-critical': error, 'text-text-default': !error, }, - 'pt-md' + 'pt-md', )} > {message} @@ -311,7 +316,7 @@ export const TextInputBase = forwardRef( ); - } + }, ); export const NumberInput = ({ @@ -365,7 +370,7 @@ export const NumberInput = ({ ref?.current?.focus(); }} className={cn( - 'flex-1 p-sm disabled:text-icon-disabled hover:bg-surface-basic-hovered active:bg-surface-basic-pressed' + 'flex-1 p-sm disabled:text-icon-disabled hover:bg-surface-basic-hovered active:bg-surface-basic-pressed', )} > @@ -383,7 +388,7 @@ export const NumberInput = ({ ref?.current?.focus(); }} className={cn( - 'flex-1 p-sm disabled:text-icon-disabled hover:bg-surface-basic-hovered active:bg-surface-basic-pressed' + 'flex-1 p-sm disabled:text-icon-disabled hover:bg-surface-basic-hovered active:bg-surface-basic-pressed', )} > @@ -405,7 +410,7 @@ export const TextInput = forwardRef( {...{ ...props, id, component: 'input', type: 'text', ref }} /> ); - } + }, ); export const TextArea = forwardRef( @@ -417,7 +422,7 @@ export const TextArea = forwardRef( rows = '3', ...etc }, - ref + ref, ) => { const id = useId(); return ( @@ -435,7 +440,7 @@ export const TextArea = forwardRef( }} /> ); - } + }, ); export const PasswordInput = (props: IInputRow) => { diff --git a/src/design-system/components/atoms/select.tsx b/src/design-system/components/atoms/select.tsx index dc8685da7..ae997dcfc 100644 --- a/src/design-system/components/atoms/select.tsx +++ b/src/design-system/components/atoms/select.tsx @@ -14,10 +14,13 @@ const menuItemRender = (props: IMenuItemRender) => { return (
{typeof render === 'string' ? render @@ -50,7 +53,7 @@ const suffixRender = ({
{loading && ( @@ -75,7 +78,7 @@ const Select = ( message?: ReactNode; loading?: boolean; error?: boolean; - } + }, ) => { const { value, @@ -98,6 +101,9 @@ const Select = ( open, disableWhileLoading, createLabel, + className, + portalClass, + tabIndex, } = props; return ( @@ -109,25 +115,30 @@ const Select = (
{ - const c = cn( - 'rounded flex flex-row items-center border bodyMd outline-none cursor-default', - { - 'py-[10px] px-lg': size === 'lg', - 'py-[6px] px-lg': size === 'md', - }, - error && !disabled - ? 'bg-surface-critical-subdued border-text-critical text-text-critical' - : '' - ); - return { - default: `${c} border-border-default bg-surface-basic-input text-text-default`, - disabled: `${c} border-border-disabled text-text-disabled`, - focus: `${c} bg-surface-basic-default border-border-input text-text-default ring-offset-1 ring-2 ring-border-focus`, - }; - }} + className={ + className || + (() => { + const c = cn( + 'rounded flex flex-row items-center border bodyMd outline-none cursor-default', + { + 'py-[10px] px-lg h-[48px]': size === 'lg', + 'py-[6px] px-lg h-[36px]': size === 'md', + }, + error && !disabled + ? 'bg-surface-critical-subdued border-text-critical text-text-critical' + : '', + ); + return { + default: `${c} border-border-default bg-surface-basic-input text-text-default`, + disabled: `${c} border-border-disabled text-text-disabled`, + focus: `${c} bg-surface-basic-default border-border-input text-text-default ring-offset-1 ring-2 ring-border-focus`, + }; + }) + } + tabIndex={tabIndex} open={open} menuClass="shadow-popover bg-surface-basic-default border border-border-default rounded py-lg" + portalClass={portalClass} menuItemRender={menuItemRender} value={value} options={options} @@ -136,7 +147,7 @@ const Select = ( className={cn( error && !disabled ? 'text-text-critical/70' - : 'text-text-disabled' + : 'text-text-disabled', )} > {placeholder} @@ -160,7 +171,13 @@ const Select = ( multiple={multiple} onSearch={onSearch} searchable={searchable} - noOptionMessage={noOptionMessage} + noOptionMessage={ + noOptionMessage || ( +
+ No options +
+ ) + } disableWhileLoading={disableWhileLoading} createLabel={createLabel} /> @@ -175,7 +192,7 @@ const Select = ( 'text-text-critical': !!error, 'text-text-default': !error, }, - 'pt-md' + 'pt-md', )} > {message} diff --git a/src/design-system/components/css/index.scss b/src/design-system/components/css/index.scss index b36aed074..7a0c587a8 100644 --- a/src/design-system/components/css/index.scss +++ b/src/design-system/components/css/index.scss @@ -412,6 +412,649 @@ border-style: none; } +.zener-select,.zener-select *{ + scroll-behavior:unset!important +} + +.zener-select svg{ + display:block +} + +.zener-select button{ + cursor:pointer; + -webkit-appearance:button; + background-color:transparent; + background-image:none +} + +.zener-select input,.zener-select button{ + font-family:inherit; + font-feature-settings:inherit; + font-variation-settings:inherit; + font-size:100%; + font-weight:inherit; + line-height:inherit; + color:inherit; + margin:0; + padding:0 +} + +.zener-pointer-events-auto{ + pointer-events:auto +} + +.zener-invisible{ + visibility:hidden +} + +.zener-absolute{ + position:absolute +} + +.zener-relative{ + position:relative +} + +.zener-inset-0{ + inset:0 +} + +.zener-left-0{ + left:0 +} + +.zener-z-10{ + z-index:10 +} + +.zener-z-\[99999999999999999999\]{ + z-index:100000000000000000000 +} + +.zener-z-\[9999999999999999999\]{ + z-index:10000000000000000000 +} + +.zener-mx-0{ + margin-left:0; + margin-right:0 +} + +.zener-mx-0\.5{ + margin-left:.125rem; + margin-right:.125rem +} + +.zener-mx-1{ + margin-left:.25rem; + margin-right:.25rem +} + +.zener-mx-1\.5{ + margin-left:.375rem; + margin-right:.375rem +} + +.-zener-ml-1{ + margin-left:-.25rem +} + +.zener-ml-0{ + margin-left:0 +} + +.zener-mr-0{ + margin-right:0 +} + +.zener-mr-0\.5{ + margin-right:.125rem +} + +.zener-mt-3{ + margin-top:.75rem +} + +.zener-flex{ + display:flex +} + +.zener-hidden{ + display:none +} + +.zener-h-0{ + height:0px +} + +.zener-h-5{ + height:1.25rem +} + +.zener-h-6{ + height:1.5rem +} + +.zener-h-full{ + height:100% +} + +.zener-min-h-\[24px\]{ + min-height:24px +} + +.zener-w-5{ + width:1.25rem +} + +.zener-w-fit{ + width:-moz-fit-content; + width:fit-content +} + +.zener-w-full{ + width:100% +} + +.zener-min-w-0{ + min-width:0px +} + +.zener-min-w-\[50px\]{ + min-width:50px +} + +.zener-max-w-full{ + max-width:100% +} + +.zener-flex-1{ + flex:1 1 0% +} + +@keyframes zener-spin{ + to{ + transform:rotate(360deg) + } +} + +.zener-animate-spin{ + animation:zener-spin 1s linear infinite +} + +.zener-cursor-pointer{ + cursor:pointer +} + +.zener-cursor-text{ + cursor:text +} + +.zener-flex-row{ + flex-direction:row +} + +.zener-flex-col{ + flex-direction:column +} + +.zener-flex-wrap{ + flex-wrap:wrap +} + +.zener-items-center{ + align-items:center +} + +.zener-justify-center{ + justify-content:center +} + +.zener-gap-0{ + gap:0px +} + +.zener-gap-0\.5{ + gap:.125rem +} + +.zener-gap-1{ + gap:.25rem +} + +.zener-gap-2{ + gap:.5rem +} + +.zener-self-center{ + align-self:center +} + +.zener-overflow-hidden{ + overflow:hidden +} + +.zener-truncate{ + overflow:hidden; + text-overflow:ellipsis; + white-space:nowrap +} + +.zener-whitespace-pre{ + white-space:pre +} + +.zener-rounded{ + border-radius:.25rem +} + +.zener-rounded-lg{ + border-radius:.5rem +} + +.zener-border{ + border-width:1px +} + +.zener-border-0{ + border-width:0px +} + +.zener-border-t{ + border-top-width:1px +} + +.zener-border-solid{ + border-style:solid +} + +.zener-border-stone-100{ + --tw-border-opacity: 1; + border-color:rgb(245 245 244/var(--tw-border-opacity)) +} + +.zener-border-stone-200{ + --tw-border-opacity: 1; + border-color:rgb(231 229 228/var(--tw-border-opacity)) +} + +.zener-border-t-white{ + --tw-border-opacity: 1; + border-top-color:rgb(255 255 255/var(--tw-border-opacity)) +} + +.zener-bg-\[\#E3E3E3\]{ + --tw-bg-opacity: 1; + background-color:rgb(227 227 227/var(--tw-bg-opacity)) +} + +.zener-bg-\[\#f0f0f0\]{ + --tw-bg-opacity: 1; + background-color:rgb(240 240 240/var(--tw-bg-opacity)) +} + +.zener-bg-black{ + --tw-bg-opacity: 1; + background-color:rgb(0 0 0/var(--tw-bg-opacity)) +} + +.zener-bg-black\/25{ + background-color:#00000040 +} + +.zener-bg-black\/5{ + background-color:#0000000d +} + +.zener-bg-blue-200{ + --tw-bg-opacity: 1; + background-color:rgb(191 219 254/var(--tw-bg-opacity)) +} + +.zener-bg-gray-400\/10{ + background-color:#9ca3af1a +} + +.zener-bg-green-200{ + --tw-bg-opacity: 1; + background-color:rgb(187 247 208/var(--tw-bg-opacity)) +} + +.zener-bg-red-200{ + --tw-bg-opacity: 1; + background-color:rgb(254 202 202/var(--tw-bg-opacity)) +} + +.zener-bg-stone-200{ + --tw-bg-opacity: 1; + background-color:rgb(231 229 228/var(--tw-bg-opacity)) +} + +.zener-bg-transparent{ + background-color:transparent +} + +.zener-bg-white{ + --tw-bg-opacity: 1; + background-color:rgb(255 255 255/var(--tw-bg-opacity)) +} + +.zener-bg-yellow-400{ + --tw-bg-opacity: 1; + background-color:rgb(250 204 21/var(--tw-bg-opacity)) +} + +.zener-bg-yellow-500{ + --tw-bg-opacity: 1; + background-color:rgb(234 179 8/var(--tw-bg-opacity)) +} + +.zener-bg-yellow-600{ + --tw-bg-opacity: 1; + background-color:rgb(202 138 4/var(--tw-bg-opacity)) +} + +.zener-p-1{ + padding:.25rem +} + +.zener-p-2{ + padding:.5rem +} + +.zener-px-1{ + padding-left:.25rem; + padding-right:.25rem +} + +.zener-px-1\.5{ + padding-left:.375rem; + padding-right:.375rem +} + +.zener-px-2{ + padding-left:.5rem; + padding-right:.5rem +} + +.zener-px-4{ + padding-left:1rem; + padding-right:1rem +} + +.zener-py-0{ + padding-top:0; + padding-bottom:0 +} + +.zener-py-0\.5{ + padding-top:.125rem; + padding-bottom:.125rem +} + +.zener-py-2{ + padding-top:.5rem; + padding-bottom:.5rem +} + +.zener-py-px{ + padding-top:1px; + padding-bottom:1px +} + +.zener-pl-5{ + padding-left:1.25rem +} + +.zener-pr-2{ + padding-right:.5rem +} + +.zener-pt-3{ + padding-top:.75rem +} + +.zener-text-center{ + text-align:center +} + +.zener-font-sans{ + font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji" +} + +.zener-text-sm{ + font-size:.875rem; + line-height:1.25rem +} + +.zener-text-xs{ + font-size:.75rem; + line-height:1rem +} + +.zener-font-bold{ + font-weight:700 +} + +.zener-text-black{ + --tw-text-opacity: 1; + color:rgb(0 0 0/var(--tw-text-opacity)) +} + +.zener-text-black\/20{ + color:#0003 +} + +.zener-text-black\/25{ + color:#00000040 +} + +.zener-text-black\/50{ + color:#00000080 +} + +.zener-text-gray-400{ + --tw-text-opacity: 1; + color:rgb(156 163 175/var(--tw-text-opacity)) +} + +.zener-text-white{ + --tw-text-opacity: 1; + color:rgb(255 255 255/var(--tw-text-opacity)) +} + +.zener-text-white\/50{ + color:#ffffff80 +} + +.zener-opacity-0{ + opacity:0 +} + +.zener-opacity-100{ + opacity:1 +} + +.zener-opacity-30{ + opacity:.3 +} + +.zener-opacity-40{ + opacity:.4 +} + +.zener-opacity-60{ + opacity:.6 +} + +.zener-opacity-80{ + opacity:.8 +} + +.zener-shadow-2xl{ + --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25); + --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); + box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow) +} + +.zener-shadow-menu{ + --tw-shadow: 0 6px 16px 0 rgba(0,0,0,.08), 0 3px 6px -4px rgba(0,0,0,.12), 0 9px 28px 8px rgba(0,0,0,.05); + --tw-shadow-colored: 0 6px 16px 0 var(--tw-shadow-color), 0 3px 6px -4px var(--tw-shadow-color), 0 9px 28px 8px var(--tw-shadow-color); + box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow) +} + +.zener-outline-none{ + outline:2px solid transparent; + outline-offset:2px +} + +.zener-ring-1{ + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 rgba(0, 0, 0, 0)) +} + +.zener-ring-orange-400{ + --tw-ring-opacity: 1; + --tw-ring-color: rgb(251 146 60 / var(--tw-ring-opacity)) +} + +.zener-transition-all{ + transition-property:all; + transition-timing-function:cubic-bezier(.4,0,.2,1); + transition-duration:.15s +} + +*,:before,:after{ + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / .5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: +} + +::backdrop{ + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / .5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: +} + +.focus-within\:zener-ring-1:focus-within{ + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 rgba(0, 0, 0, 0)) +} + +.focus-within\:zener-ring-blue-400:focus-within{ + --tw-ring-opacity: 1; + --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity)) +} + +.hover\:zener-opacity-100:hover{ + opacity:1 +} + +.hover\:zener-opacity-60:hover{ + opacity:.6 +} + +.focus\:zener-ring-1:focus{ + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 rgba(0, 0, 0, 0)) +} + +.focus\:zener-ring-blue-400:focus{ + --tw-ring-opacity: 1; + --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity)) +} + html { font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; } @@ -1076,6 +1719,13 @@ video { font-weight: 500 !important; } +.bodyLg { + font-family: "Inter var", sans-serif; + font-feature-settings: "cv02", "cv03", "cv04", "cv11"; + font-size: 16px; + line-height: 24px; +} + .headingSm { font-family: "Inter var", sans-serif; font-feature-settings: "cv02", "cv03", "cv04", "cv11"; @@ -1332,6 +1982,18 @@ video { height: 24px; } +.h-\[32px\] { + height: 32px; +} + +.h-\[36px\] { + height: 36px; +} + +.h-\[48px\] { + height: 48px; +} + .h-\[60px\] { height: 60px; } @@ -1884,7 +2546,8 @@ video { } .bg-surface-basic-default { - background-color: var(--surface-basic-default); + --tw-bg-opacity: 1; + background-color: color-mix(in srgb, var(--surface-basic-default) calc(100% * var(--tw-bg-opacity)), transparent); } .bg-surface-basic-hovered { @@ -2035,7 +2698,7 @@ video { } .fill-surface-basic-default { - fill: var(--surface-basic-default); + fill: color-mix(in srgb, var(--surface-basic-default) calc(100% * 1), transparent); } .fill-text-soft { @@ -2698,7 +3361,8 @@ select { } .disabled\:bg-surface-basic-default:disabled { - background-color: var(--surface-basic-default); + --tw-bg-opacity: 1; + background-color: color-mix(in srgb, var(--surface-basic-default) calc(100% * var(--tw-bg-opacity)), transparent); } .disabled\:bg-surface-basic-input:disabled { @@ -2743,7 +3407,8 @@ select { } .data-\[disabled\]\:bg-surface-basic-default[data-disabled] { - background-color: var(--surface-basic-default); + --tw-bg-opacity: 1; + background-color: color-mix(in srgb, var(--surface-basic-default) calc(100% * var(--tw-bg-opacity)), transparent); } .data-\[state\=checked\]\:bg-surface-primary-default[data-state=checked] { @@ -2755,7 +3420,8 @@ select { } .data-\[state\=unchecked\]\:bg-surface-basic-default[data-state=unchecked] { - background-color: var(--surface-basic-default); + --tw-bg-opacity: 1; + background-color: color-mix(in srgb, var(--surface-basic-default) calc(100% * var(--tw-bg-opacity)), transparent); } .data-\[disabled\]\:text-text-disabled[data-disabled] { @@ -2779,7 +3445,8 @@ select { } .group[data-disabled] .group-data-\[disabled\]\:bg-surface-basic-default { - background-color: var(--surface-basic-default); + --tw-bg-opacity: 1; + background-color: color-mix(in srgb, var(--surface-basic-default) calc(100% * var(--tw-bg-opacity)), transparent); } .group[data-state=checked] .group-data-\[state\=checked\]\:bg-surface-primary-default { @@ -2791,7 +3458,7 @@ select { } .group[data-state=checked] .group-data-\[state\=checked\]\:fill-surface-basic-default { - fill: var(--surface-basic-default); + fill: color-mix(in srgb, var(--surface-basic-default) calc(100% * 1), transparent); } .group[data-state=unchecked] .group-data-\[state\=unchecked\]\:fill-surface-primary-default { diff --git a/src/design-system/index.css b/src/design-system/index.css index f38b53e82..0785bf3c2 100644 --- a/src/design-system/index.css +++ b/src/design-system/index.css @@ -4,6 +4,7 @@ @import './css/default.css'; @import './css/dark.css'; @import 'css/slider.css'; +@import '../../node_modules/@oshq/react-select/dist/index.css'; html { font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; diff --git a/src/design-system/prod-package.js b/src/design-system/prod-package.js index a7ade907a..791cb715b 100644 --- a/src/design-system/prod-package.js +++ b/src/design-system/prod-package.js @@ -1,7 +1,7 @@ import fs from 'fs'; import path from 'path'; -import logger from '~/root/lib/client/helpers/log'; +// import logger from '~/root/lib/client/helpers/log'; import p from './package.json' with { type: 'json' }; const { @@ -31,7 +31,7 @@ function readDirectoryRecursively(directoryPath, p) { ...result, ...readDirectoryRecursively( path.join(directoryPath, file), - `${p}/${file}` + `${p}/${file}`, ), }; } else if ( @@ -91,10 +91,10 @@ const setup = () => { try { fs.writeFileSync(`${outPath}/package.json`, packageJson); } catch (e) { - logger.log('e', e); + // logger.log('e', e); } - logger.log('Done!'); + // logger.log('Done!'); }; setup();