diff --git a/README.md b/README.md index f42e4749..5d5a0234 100644 --- a/README.md +++ b/README.md @@ -23,7 +23,6 @@ All Lerna packages are in [packages](./packages) directory. Each individual proj * [Rockset JS SDK](./packages/client) * [Rockset CLI](./packages/cli) * [Rockset VSCode Plugin](./packages/rscode) -* [Rockset Developer UI](./packages/dev-server) ## Contributing diff --git a/packages/cli/README.md b/packages/cli/README.md index 4699891e..5a606ac1 100644 --- a/packages/cli/README.md +++ b/packages/cli/README.md @@ -387,17 +387,6 @@ You can also execute Query Lambda SQL direclty from the command line: $ rockset local:queryLambda:execute commons.helloWorld ``` -For more complex queries or queries with parameters, you can use the [Rockset Developer UI](/packages/dev-server). You can -start the Developer UI with the following command: - -``` -$ rockset local:serve -``` - -This command spins up a local webserver that displays all of the Query Lambdas found in your local project, allows -you to easily specify and manage query parameters, and offers fully featured data tables and JSON renderers to view your -SQL results. - ### Deploy Query Lambdas to Rockset Up to this point, none of the commands we've run have actually created or updated any resources in our Rockset account. diff --git a/packages/cli/package.json b/packages/cli/package.json index 013381a2..ee01f9a1 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -17,7 +17,6 @@ "@oclif/plugin-update": "^1.3.10", "@rockset/client": "0.8.2", "@rockset/core": "0.8.2", - "@rockset/dev-server": "0.8.2", "@rockset/eslint-config": "0.8.2", "@types/chalk": "^2.2.0", "@types/fs-extra": "^8.1.1", diff --git a/packages/cli/reference/local.md b/packages/cli/reference/local.md index abdf82e4..917efacc 100644 --- a/packages/cli/reference/local.md +++ b/packages/cli/reference/local.md @@ -11,7 +11,6 @@ Manage your local Query Lambdas. * [`rockset local:queryLambda:execute NAME`](#rockset-localquerylambdaexecute-name) * [`rockset local:queryLambda:list`](#rockset-localquerylambdalist) * [`rockset local:resolve NAME`](#rockset-localresolve-name) -* [`rockset local:serve`](#rockset-localserve) ## `rockset local:deploy` @@ -187,18 +186,3 @@ EXAMPLES ``` _See code: [src/commands/local/resolve.ts](../src/commands/local/resolve.ts)_ - -## `rockset local:serve` - -start development server and open the Developer UI. Used to configure parameters and execute SQL files in your local project - -``` -USAGE - $ rockset local:serve - -OPTIONS - -h, --help show CLI help - -p, --port=port [default: 3001] the port to listen at -``` - -_See code: [src/commands/local/serve.ts](../src/commands/local/serve.ts)_ diff --git a/packages/cli/src/commands/local/serve.ts b/packages/cli/src/commands/local/serve.ts deleted file mode 100644 index 560a5c37..00000000 --- a/packages/cli/src/commands/local/serve.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { flags } from '@oclif/command'; -import { RockCommand } from '../../base-command'; -import { serve } from '@rockset/dev-server'; - -class ServeQls extends RockCommand { - static flags = { - help: flags.help({ char: 'h' }), - port: flags.integer({ - char: 'p', - default: 3001, - description: 'the port to listen at', - }), - }; - - static description = `start development server and open the Developer UI. Used to configure parameters and execute SQL files in your local project`; - - async run() { - const { flags } = this.parse(ServeQls); - await serve(flags.port); - } -} - -export default ServeQls; diff --git a/packages/client/src/version.ts b/packages/client/src/version.ts index cc1bda77..6e028e5a 100644 --- a/packages/client/src/version.ts +++ b/packages/client/src/version.ts @@ -1,2 +1,2 @@ // generated by genversion -export const version = '0.8.0'; +export const version = '0.8.2'; diff --git a/packages/dev-server/.eslintrc.js b/packages/dev-server/.eslintrc.js deleted file mode 100644 index e10dd176..00000000 --- a/packages/dev-server/.eslintrc.js +++ /dev/null @@ -1,12 +0,0 @@ -const path = require('path'); -module.exports = { - extends: [ - "@rockset" - ], - parserOptions: { - project: path.resolve(__dirname, './tsconfig.json'), - tsconfigRootDir: __dirname, - ecmaVersion: 2018, - sourceType: 'module', - }, -}; diff --git a/packages/dev-server/LICENSE b/packages/dev-server/LICENSE deleted file mode 100644 index 36fa1700..00000000 --- a/packages/dev-server/LICENSE +++ /dev/null @@ -1,13 +0,0 @@ -Copyright 2020 Rockset - -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. diff --git a/packages/dev-server/README.md b/packages/dev-server/README.md deleted file mode 100644 index 03b0de51..00000000 --- a/packages/dev-server/README.md +++ /dev/null @@ -1,47 +0,0 @@ -# Rockset Developer UI - -The Official Home of the Rockset Developer UI. - -![Build|Lint|Test](https://github.com/rockset/rockset-js/workflows/Build%7CLint%7CTest/badge.svg) - -Gif failed to load - -## Getting Started - -The Rockset Dev UI is bundled with the Rockset CLI. Please first install and setup up the [Rockset CLI](../cli). It is intended to be used in a local Rockset project. Please see the CLI documentation for more information about downloading Query Lambdas and setting up a local project. - -```bash -# Initialize your local project -$ rockset local:init - -# Add a query lambda -$ rockset local:queryLambda:add commons.myLambda - -# Serve the Rockset Developer UI -$ rockset local:serve -p PORT -``` - -This will launch a development server on `localhost:PORT`. Whenever a request to execute a Query Lambda is sent to the server, it will grab the associated Query Lambda text from the file system and execute it with any parameters. - -The Projects Dev UI is tested and fully supported on the latest version of Google Chrome. You may experience minor bugs on other browsers. - -## Usage - -Once you have started the development server, navigate to `localhost:PORT` in your browser. - -You should see a listing of all of the different Query Lambdas in your local project. Select one of the Query Lambdas to start testing it. - -### Executing a Lambda - -When you hit the Run button, the following happens: - -1. The UI sends a request to the development server to run the associated query. -1. The development server loads the SQL text and Default Parameters for the Query Lambda from your local file system. -1. The development server sends a request to Rockset's remote API Server, using the active credentials configured for the CLI tool. -1. The development server passes the response to the UI. - -This means that all queries will execute the version in the local file system. Furthermore, the queries will be executed in the account associated with the CLI tool's current active profile. - -### Using Parameters - -Rockset SQL supports adding query parameters to parameterize a query. To add parameters in the Rockset Developer UI, click into the Parameters Tab and then click the "Add Parameters" button. You can also add default values for your parameters in the Lambda Definition File. Please see the [Rockset CLI Documentation](../cli) for more information about adding default parameters. diff --git a/packages/dev-server/assets/dev-ui-usage.gif b/packages/dev-server/assets/dev-ui-usage.gif deleted file mode 100644 index b61ae301..00000000 Binary files a/packages/dev-server/assets/dev-ui-usage.gif and /dev/null differ diff --git a/packages/dev-server/jest.config.js b/packages/dev-server/jest.config.js deleted file mode 100644 index 8040d252..00000000 --- a/packages/dev-server/jest.config.js +++ /dev/null @@ -1,6 +0,0 @@ -module.exports = { - transform: { '^.+\\.ts?$': 'ts-jest' }, - testEnvironment: 'node', - testRegex: '.*\\.(test|spec)?\\.(ts|tsx)$', - moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], -}; diff --git a/packages/dev-server/package.json b/packages/dev-server/package.json deleted file mode 100644 index 2c5ea943..00000000 --- a/packages/dev-server/package.json +++ /dev/null @@ -1,56 +0,0 @@ -{ - "dependencies": { - "@rockset/client": "0.8.2", - "@rockset/core": "0.8.2", - "@rockset/eslint-config": "0.8.2", - "@types/cors": "^2.8.6", - "@types/express": "^4.17.6", - "@types/morgan": "^1.9.0", - "cors": "^2.8.5", - "express": "^4.17.1", - "fp-ts": "^2.6.1", - "io-ts": "^2.2.2", - "io-ts-types": "^0.5.6", - "lodash.get": "^4.4.2", - "morgan": "^1.10.0", - "newtype-ts": "^0.3.4", - "open": "^7.0.4", - "prettier": "^2.0.5", - "prompts": "^2.3.2" - }, - "name": "@rockset/dev-server", - "version": "0.8.2", - "description": "Rockset Developer Local Server", - "main": "./dist/index.js", - "types": "dist/index.d.ts", - "devDependencies": { - "@types/lodash": "^4.14.150", - "@types/lodash.get": "^4.4.6", - "@types/mock-fs": "^4.10.0", - "@types/prompts": "^2.0.6", - "eslint": "^7.0.0", - "eslint-plugin-promise": "^4.2.1", - "generate": "^0.14.0", - "generate-license": "^1.0.0", - "jest": "^26.0.1", - "mock-fs": "^4.12.0", - "ts-jest": "^25.5.1", - "typescript": "^3.8.3" - }, - "scripts": { - "test": "echo 'NO TESTS'", - "start": "tsc --watch", - "clean": "rm -rf dist", - "build": "yarn run clean && tsc && cd ../dev-ui && yarn build && cp -r build ../dev-server/dist/ui", - "lint": "eslint 'src/**/*.ts'" - }, - "files": [ - "/dist" - ], - "author": "Rockset", - "publishConfig": { - "access": "public" - }, - "license": "Apache-2.0", - "gitHead": "a995e39183da8c1641b9b16917dfb5067e258893" -} diff --git a/packages/dev-server/src/index.ts b/packages/dev-server/src/index.ts deleted file mode 100644 index b75b9677..00000000 --- a/packages/dev-server/src/index.ts +++ /dev/null @@ -1,118 +0,0 @@ -import express from 'express'; -import cors from 'cors'; -import * as core from '@rockset/core'; -import { getQualifiedName } from '@rockset/core/dist/filesystem/pathutil'; -import open from 'open'; -import path from 'path'; -import morgan from 'morgan'; -import { QueryParameter, mergeParameters } from '@rockset/core/dist/types'; - -function notEmpty(value: TValue | null | undefined): value is TValue { - return value !== null && value !== undefined; -} - -export async function serve(port = 3001) { - const app = express(); - app.use(cors()); - app.use(morgan('tiny')); - app.use(express.json()); - - app.post( - '/v1/orgs/self/ws/:workspace/lambdas/:queryLambda/versions/:version', - async (req, res) => { - const ws = req.params.workspace; - const ql = req.params.queryLambda; - // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access - const params = req.body?.parameters as QueryParameter[]; - const [client, lambda] = await Promise.all([ - core.main.createClient(), - core.fileutil.readLambdaFromQualifiedName(getQualifiedName(ws, ql)), - ]); - try { - const result = await client.queries.query({ - sql: { - query: lambda.sql, - parameters: mergeParameters( - lambda.config.default_parameters ?? [], - params - ), - }, - }); - res.send(result); - } catch (e) { - console.error('Error during execution: ', e); - res.status(400); - res.send(e); - } - } - ); - - app.post('/validate', async (req, res) => { - // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access - const param = req.body?.param as QueryParameter; - const client = await core.main.createClient(); - try { - await client.queries.validate({ - sql: { - query: `Select :"${param.name}"`, - parameters: [param], - }, - }); - res.send({ success: true }); - } catch (e) { - console.error(e); - res.status(400); - res.send(e); - } - }); - - app.get('/lambdas', async (req, res) => { - try { - const [ - entityNames, - { api_server: apiserver }, - srcPath, - ] = await Promise.all([ - core.main.listEntityNames(), - core.auth.getAuthProfile(), - core.fileutil.getSrcPath(), - ]); - - const lambdaEntities = ( - await Promise.all( - entityNames.lambdas.map(async ([name]) => { - try { - return await core.fileutil.readLambdaFromQualifiedName(name); - } catch (e) { - return null; - } - }) - ) - ).filter(notEmpty); - - const lambdas = lambdaEntities.map((entity) => ({ - path: core.pathutil.getLambdaPathsFromEntity(srcPath, entity), - name: entity.name, - ws: entity.ws, - sql: entity.sql, - default_parameters: entity.config.default_parameters, - })); - res.send({ lambdas, apiserver }); - } catch (e) { - console.error(e); - res.status(500); - res.send(e); - } - }); - - app.use(express.static(path.join(__dirname, 'ui'))); - - app.get('/*', (req, res) => { - res.sendFile(path.join(__dirname, 'ui', 'index.html')); - }); - - app.listen(port, () => - console.log(`QL dev server listening at http://localhost:${port}`) - ); - await open(`http://localhost:${port}`); -} diff --git a/packages/dev-server/test.js b/packages/dev-server/test.js deleted file mode 100644 index 1ba29d54..00000000 --- a/packages/dev-server/test.js +++ /dev/null @@ -1,2 +0,0 @@ -const serve = require('./dist/index.js') -serve.serve() diff --git a/packages/dev-server/tsconfig.json b/packages/dev-server/tsconfig.json deleted file mode 100644 index d66628c0..00000000 --- a/packages/dev-server/tsconfig.json +++ /dev/null @@ -1,66 +0,0 @@ -{ - "compilerOptions": { - /* Basic Options */ - // "incremental": true, /* Enable incremental compilation */ - "target": "es2016" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */, - "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */, - // "lib": [], /* Specify library files to be included in the compilation. */ - // "allowJs": true, /* Allow javascript files to be compiled. */ - // "checkJs": true, /* Report errors in .js files. */ - // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ - "declaration": true /* Generates corresponding '.d.ts' file. */, - // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ - // "sourceMap": true, /* Generates corresponding '.map' file. */ - // "outFile": "./out/index.js", /* Concatenate and emit output to single file. */ - "outDir": "./dist" /* Redirect output structure to the directory. */, - // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ - // "composite": true, /* Enable project compilation */ - // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */ - // "removeComments": true, /* Do not emit comments to output. */ - // "noEmit": true, /* Do not emit outputs. */ - // "importHelpers": true, /* Import emit helpers from 'tslib'. */ - // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ - // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ - - /* Strict Type-Checking Options */ - "strict": true /* Enable all strict type-checking options. */, - // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ - // "strictNullChecks": true, /* Enable strict null checks. */ - // "strictFunctionTypes": true, /* Enable strict checking of function types. */ - // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ - // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ - // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ - // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ - - /* Additional Checks */ - // "noUnusedLocals": true, /* Report errors on unused locals. */ - // "noUnusedParameters": true, /* Report errors on unused parameters. */ - // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ - // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ - - /* Module Resolution Options */ - // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ - // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ - // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ - // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ - // "typeRoots": [], /* List of folders to include type definitions from. */ - "types": ["node", "jest"], /* Type declaration files to be included in compilation. */ - // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ - "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */, - // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ - // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ - - /* Source Map Options */ - // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ - // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ - // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ - // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ - - /* Experimental Options */ - // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ - // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ - - /* Advanced Options */ - "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */ - } -} diff --git a/packages/dev-ui/.env b/packages/dev-ui/.env deleted file mode 100644 index 7b6d6ef0..00000000 --- a/packages/dev-ui/.env +++ /dev/null @@ -1,3 +0,0 @@ -INLINE_RUNTIME_CHUNK=false -GENERATE_SOURCEMAP=false -SKIP_PREFLIGHT_CHECK=true diff --git a/packages/dev-ui/.eslintrc.js b/packages/dev-ui/.eslintrc.js deleted file mode 100644 index 29a8c46f..00000000 --- a/packages/dev-ui/.eslintrc.js +++ /dev/null @@ -1,69 +0,0 @@ -const path = require('path'); - -module.exports = { - extends: [ - 'plugin:react/recommended', - 'plugin:@typescript-eslint/recommended', - 'prettier/@typescript-eslint', - 'plugin:prettier/recommended', - ], - plugins: ['react', '@typescript-eslint', 'prettier', 'react-hooks'], - env: { - browser: true, - jest: true, - }, - rules: { - 'dot-notation': 2, - 'no-restricted-imports': [ - 'error', - { - patterns: ['../*'], - }, - ], - 'prettier/prettier': [ - 'error', - { - singleQuote: true, - }, - ], - '@typescript-eslint/no-explicit-any': 0, - '@typescript-eslint/explicit-function-return-type': 0, - '@typescript-eslint/camelcase': 0, - '@typescript-eslint/no-var-requires': 0, - '@typescript-eslint/no-use-before-define': 0, - '@typescript-eslint/no-unused-vars': 2, - '@typescript-eslint/ban-ts-ignore': 0, - '@typescript-eslint/no-empty-function': 0, - 'react/prop-types': 0, - 'react/jsx-key': 0, - 'react/no-unescaped-entities': 0, - 'react/display-name': 0, - 'react-hooks/rules-of-hooks': 2, - 'react-hooks/exhaustive-deps': 2, - }, - overrides: [ - { - files: ['*.hooks.ts'], - rules: { - '@typescript-eslint/no-explicit-any': 2, - '@typescript-eslint/camelcase': 2, - '@typescript-eslint/class-name-casing': 2, - '@typescript-eslint/require-await': 2, - }, - }, - ], - settings: { - react: { - pragma: 'React', - version: 'detect', - }, - }, - parser: '@typescript-eslint/parser', - parserOptions: { - project: path.resolve(__dirname, './tsconfig.json'), - tsconfigRootDir: __dirname, - ecmaVersion: 2018, - sourceType: 'module', - }, -}; - diff --git a/packages/dev-ui/.gitignore b/packages/dev-ui/.gitignore deleted file mode 100644 index 4d29575d..00000000 --- a/packages/dev-ui/.gitignore +++ /dev/null @@ -1,23 +0,0 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - -# dependencies -/node_modules -/.pnp -.pnp.js - -# testing -/coverage - -# production -/build - -# misc -.DS_Store -.env.local -.env.development.local -.env.test.local -.env.production.local - -npm-debug.log* -yarn-debug.log* -yarn-error.log* diff --git a/packages/dev-ui/LICENSE b/packages/dev-ui/LICENSE deleted file mode 100644 index 36fa1700..00000000 --- a/packages/dev-ui/LICENSE +++ /dev/null @@ -1,13 +0,0 @@ -Copyright 2020 Rockset - -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. diff --git a/packages/dev-ui/README.md b/packages/dev-ui/README.md deleted file mode 100644 index 7832f205..00000000 --- a/packages/dev-ui/README.md +++ /dev/null @@ -1,3 +0,0 @@ -# Rockset Developer UI - -This is the React code for the Rockset Developer UI. All documentation for the Rockset Developer UI is consolidated [here](../dev-server). diff --git a/packages/dev-ui/gulpfile.js b/packages/dev-ui/gulpfile.js deleted file mode 100644 index 5aebf33b..00000000 --- a/packages/dev-ui/gulpfile.js +++ /dev/null @@ -1,17 +0,0 @@ -const gulp = require('gulp'); -const inlinesource = require('gulp-inline-source'); -const replace = require('gulp-replace'); - -gulp.task('default', () => { - return gulp - .src('./build/*.html') - .pipe(replace('.js">', '.js" inline>')) - .pipe(replace('rel="stylesheet">', 'rel="stylesheet" inline>')) - .pipe( - inlinesource({ - compress: false, - ignore: ['png'], - }) - ) - .pipe(gulp.dest('./build')); -}); diff --git a/packages/dev-ui/package.json b/packages/dev-ui/package.json deleted file mode 100644 index 4f53bc3d..00000000 --- a/packages/dev-ui/package.json +++ /dev/null @@ -1,64 +0,0 @@ -{ - "name": "@rockset/dev-ui", - "version": "0.8.2", - "private": true, - "dependencies": { - "@fortawesome/fontawesome-pro": "^5.13.0", - "@fortawesome/fontawesome-svg-core": "^1.2.28", - "@fortawesome/pro-light-svg-icons": "^5.13.1", - "@fortawesome/pro-regular-svg-icons": "^5.13.0", - "@fortawesome/pro-solid-svg-icons": "^5.13.0", - "@fortawesome/react-fontawesome": "^0.1.9", - "@rockset/client": "0.8.2", - "@testing-library/jest-dom": "^4.2.4", - "@testing-library/react": "^9.3.2", - "@testing-library/user-event": "^7.1.2", - "@types/react": "^16.9.34", - "@types/react-router": "^5.1.8", - "@types/react-router-dom": "^5.1.5", - "@types/react-table": "^7.0.16", - "@types/styled-components": "^5.1.0", - "carbon-components": "9.82.12", - "carbon-components-react": "6.99.1", - "carbon-icons": "^7.0.7", - "clipboard-polyfill": "^3.0.0-pre5", - "lodash": "^4.17.15", - "react": "^16.13.1", - "react-dom": "^16.13.1", - "react-json-editor-ajrm": "^2.5.9", - "react-router-dom": "^5.1.2", - "react-scripts": "3.4.1", - "react-select": "^3.1.0", - "react-table": "6.5.3", - "react-tooltip": "^4.2.5", - "styled-components": "^5.1.0", - "typescript": "^3.8.3" - }, - "scripts": { - "start": "react-scripts start", - "build": "react-scripts build && npx gulp", - "test": "echo 'no tests'", - "eject": "react-scripts eject", - "lint": "eslint 'src/**/*.ts'" - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] - }, - "proxy": "http://localhost:3001", - "devDependencies": { - "@types/carbon-components-react": "^7.10.6", - "@types/react-select": "^3.0.14", - "gulp": "^4.0.2", - "gulp-inline-source": "^4.0.0", - "gulp-replace": "^1.0.0" - } -} diff --git a/packages/dev-ui/public/apple-touch-icon.png b/packages/dev-ui/public/apple-touch-icon.png deleted file mode 100644 index 63d5e540..00000000 Binary files a/packages/dev-ui/public/apple-touch-icon.png and /dev/null differ diff --git a/packages/dev-ui/public/favicon-16x16.png b/packages/dev-ui/public/favicon-16x16.png deleted file mode 100644 index 6b91b48d..00000000 Binary files a/packages/dev-ui/public/favicon-16x16.png and /dev/null differ diff --git a/packages/dev-ui/public/favicon-32x32.png b/packages/dev-ui/public/favicon-32x32.png deleted file mode 100644 index c937dbe2..00000000 Binary files a/packages/dev-ui/public/favicon-32x32.png and /dev/null differ diff --git a/packages/dev-ui/public/index.html b/packages/dev-ui/public/index.html deleted file mode 100644 index fd355f8b..00000000 --- a/packages/dev-ui/public/index.html +++ /dev/null @@ -1,44 +0,0 @@ - - - - - - - - - - - - - - Rockset Developer UI - - - -
- - - diff --git a/packages/dev-ui/public/logoSmall.svg b/packages/dev-ui/public/logoSmall.svg deleted file mode 100644 index 832fa2fc..00000000 --- a/packages/dev-ui/public/logoSmall.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - 48*48 - - - - - - - - \ No newline at end of file diff --git a/packages/dev-ui/public/robots.txt b/packages/dev-ui/public/robots.txt deleted file mode 100644 index e9e57dc4..00000000 --- a/packages/dev-ui/public/robots.txt +++ /dev/null @@ -1,3 +0,0 @@ -# https://www.robotstxt.org/robotstxt.html -User-agent: * -Disallow: diff --git a/packages/dev-ui/public/safari-pinned-tab.svg b/packages/dev-ui/public/safari-pinned-tab.svg deleted file mode 100644 index 1890426e..00000000 --- a/packages/dev-ui/public/safari-pinned-tab.svg +++ /dev/null @@ -1,28 +0,0 @@ - - - - -Created by potrace 1.11, written by Peter Selinger 2001-2013 - - - - - - - diff --git a/packages/dev-ui/src/App.tsx b/packages/dev-ui/src/App.tsx deleted file mode 100644 index be1124f9..00000000 --- a/packages/dev-ui/src/App.tsx +++ /dev/null @@ -1,99 +0,0 @@ -import React, { useEffect } from 'react'; - -import { Switch, Route, BrowserRouter as Router } from 'react-router-dom'; -import { Index } from 'pages/IndexPage'; -import { Lambda, LambdaResponse } from 'pages/index.types'; -import { Page } from 'pages/LambdaPage'; -import styled from 'styled-components'; -const logo = require('logo.svg'); - -// Make the a the same size as it's parent div -// Requires the parent to be positioned relatively -const HyperA = styled.a` - position: absolute; - width: 100%; - height: 100%; - left: 0; - top: 0; -`; - -const WrapAll = styled.div` - position: fixed; - height: 100vh; - width: 100vw; - display: flex; -`; - -const WrapInner = styled.div` - padding: 30px 0px 10px 30px; - overflow: hidden; - display: flex; - flex-direction: column; - font-family: Source Sans Pro; - flex: 1; -`; - -const Logo = () => { - return ( -
- - Rockset Logo -

Developer UI

-
- ); -}; - -function App() { - const [apiserver, setApiserver] = React.useState('[apiserver]'); - const [lambdas, setLambdas] = React.useState([]); - - const fetchLambdas = () => { - fetch('/lambdas') - .then((res) => res.json()) - .then((l: LambdaResponse) => { - setLambdas(l.lambdas); - setApiserver(l.apiserver); - return true; - }) - .catch((e) => console.error(e)); - }; - useEffect(() => { - fetchLambdas(); - }, []); - - return ( - - - - - - - - - - - - - - - - ); -} - -export default App; diff --git a/packages/dev-ui/src/RockComponents/RockDataTable.tsx b/packages/dev-ui/src/RockComponents/RockDataTable.tsx deleted file mode 100644 index 5c558da2..00000000 --- a/packages/dev-ui/src/RockComponents/RockDataTable.tsx +++ /dev/null @@ -1,169 +0,0 @@ -/* eslint-disable @typescript-eslint/no-unsafe-call */ -/* eslint-disable @typescript-eslint/no-unsafe-member-access */ -/* eslint-disable @typescript-eslint/no-explicit-any */ -/* eslint-disable @typescript-eslint/no-unsafe-return */ -/* eslint-disable @typescript-eslint/no-unsafe-assignment */ - -/* LEGACY CODE copied from console. */ - -import * as React from 'react'; -import * as _ from 'lodash'; - -import { - StylesWrapper, - columnsFromData, - subComponentWithToggle, - columnsWithToggle, - SubComponent, -} from './utils'; - -import 'react-table/react-table.css'; -const ReactTable = require('react-table').default; - -export function setPath( - state: object, - path: string, - data: any -): Return { - return (_.setWith(_.clone(state), path, data, _.clone) as unknown) as Return; -} - -type Column = { - Header?: string; - accessor?: string; - minWidth?: number; - maxWidth?: number; - Cell?: JSX.Element; - expander?: boolean; - show?: boolean; -}; - -interface Props { - data: Record[]; - isSubTable?: boolean; - pageSize?: number; - sortColumns?: boolean; - initialColumnLimit?: number; -} - -interface State { - columns: Column[]; - expanded: Record; - prevProps: {}; - columnLimit: number; -} - -const defaultNumColumns = 10; -const columnIncrement = 10; - -export default class RockDataTable extends React.Component { - expandFuncs: any; - - constructor(props: Props) { - super(props); - this.state = { - prevProps: {}, - columns: columnsFromData( - props.data, - props.sortColumns, - props.initialColumnLimit || defaultNumColumns, - () => this.updateColumns() - ), - expanded: {}, - columnLimit: props.initialColumnLimit || defaultNumColumns, - }; - this.toggleRowSubComponent = this.toggleRowSubComponent.bind(this); - this.getActiveColumn = this.getActiveColumn.bind(this); - this.expandFuncs = { - toggleRowSubComponent: this.toggleRowSubComponent, - getActiveColumn: this.getActiveColumn, - }; - } - - updateColumns() { - this.setState({ - columnLimit: this.state.columnLimit + columnIncrement, - }); - } - - /* If data changes, regenerate columns. */ - componentDidUpdate(prevProps: Props, prevState: State) { - if ( - (prevProps && !_.isEqual(prevProps, this.props)) || - this.state.columnLimit > prevState.columnLimit - ) { - this.setState({ - columns: columnsFromData( - this.props.data, - this.props.sortColumns, - this.state.columnLimit, - () => this.updateColumns() - ), - }); - } - } - - getActiveColumn(nestingPath: string) { - return _.get(this.state.expanded, [nestingPath, 'column']); - } - - toggleRowSubComponent(rowInfo: any, e: any, column: any) { - const expandedCol = _.get(this.state.expanded, [ - rowInfo.nestingPath, - 'column', - ]); - - /* If the currently expanded cell is clicked, we want to collapse the row, - * however if a different cell in that row is clicked, we want to simply change - * the active column. */ - const expanded = setPath( - this.state.expanded, - rowInfo.nestingPath, - expandedCol && expandedCol === column ? false : { column } - ) as Record; - - this.setState({ expanded: expanded }); - } - - render() { - const { data, isSubTable } = this.props; - - /* Default 20 rows max page size */ - const pageSize = _.get(this.props, 'pageSize', 20); - - if (!data) { - return
; - } - - /* No need to show empty rows if less than pageSize rows.. */ - const defaultPageSize = data.length > pageSize ? pageSize : data.length; - - /* These wrappers gives columns and SubComponents access to the helper functions - * defined in this class, namely accessing and toggling active column states. */ - const wrappedColumns = columnsWithToggle( - this.state.columns, - this.expandFuncs - ); - const WrappedSubComponent = subComponentWithToggle( - SubComponent, - this.expandFuncs - ); - - return ( -
- - pageSize} - expanded={this.state.expanded} - SubComponent={WrappedSubComponent} - minRows={0} - /> - -
- ); - } -} diff --git a/packages/dev-ui/src/RockComponents/RockTabs.tsx b/packages/dev-ui/src/RockComponents/RockTabs.tsx deleted file mode 100644 index 7fdccd38..00000000 --- a/packages/dev-ui/src/RockComponents/RockTabs.tsx +++ /dev/null @@ -1,231 +0,0 @@ -import * as React from 'react'; -import * as _ from 'lodash'; -import styled from 'styled-components'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faTimes } from '@fortawesome/pro-regular-svg-icons'; -import { faTimesCircle, faCircle } from '@fortawesome/pro-regular-svg-icons'; - -export const RockTabsAllTabsDiv = styled.div` - display: flex; - flex-direction: row; - height: 35px; - max-height: 35px; - width: fit-content; - border-left: 1px solid #dadfe2; - border-top: 1px solid #dadfe2; -`; - -export const RockTabsIndividualTabDiv = styled.div.attrs<{ - selected?: boolean; - hideBorderTop?: boolean; - hideBorderRight?: boolean; - narrow?: boolean; - fillSpace?: boolean; - beta?: boolean; -}>(({ selected, hideBorderTop, hideBorderRight, narrow, fillSpace, beta }) => ({ - selected, - narrow, - fillSpace, - beta, - fontWeight: selected ? '600' : '400', - borderBottom: selected ? '0px' : '1px solid #dadfe2', - borderRight: hideBorderRight ? '0px' : '1px solid #dadfe2', -}))<{ - borderRight?: string; - borderTop?: string; - borderBottom?: string; - hideBorderTop?: boolean; - hideBorderRight?: boolean; - narrow?: boolean; - fillSpace?: boolean; - selected?: boolean; - fontWeight?: string; - center?: boolean; - beta?: boolean; -}>` - box-sizing: border-box; - position: relative; - height: 100%; - border-right: ${(props) => props.borderRight}; - border-top: ${(props) => props.borderTop}; - border-bottom: ${(props) => props.borderBottom}; - display: flex; - flex-direction: row; - align-items: center; - justify-content: flex-start; - text-align: center; - border-radius: ${(props) => (props.narrow ? '0px 5px 0px 0px' : '0px')}; - - width: ${(props) => (props.narrow ? '25px' : '100px')}; - cursor: pointer; - flex-grow: ${(props) => (props.fillSpace ? 1 : 0)}; - background-color: ${(props) => (props.selected ? '#e9f2f8' : 'white')}; - color: #175d8d; - font-size: 14px; - font-weight: ${(props) => props.fontWeight}; - - :after { - display: ${(props) => (props.beta ? 'block' : 'none')}; - content: 'Beta'; - height: 15px; - border-radius: 10px; - background-color: #680099; - font-size: 10px; - font-weight: 600; - line-height: 16px; - color: white; - position: absolute; - top: -1px; - right: -5px; - padding: 0px 6px; - z-index: 999; - } -`; - -export const RockTabsSelectedTabDiv = styled(RockTabsIndividualTabDiv); - -const TabText = styled.div<{ center?: boolean; fillSpace?: boolean }>` - display: flex; - align-items: center; - justify-content: ${(props) => (props.center ? 'center' : 'flex-start')}; - margin-left: ${(props) => (props.center ? '0px' : '10px')}; - text-align: center; - height: 100%; - - flex: 1; - max-width: ${(props) => (props.fillSpace ? 1000 : 80)}; -`; - -const Cross = styled.div` - display: flex; - align-items: center; - justify-content: center; - text-align: center; - height: 100%; - - margin-right: 7px; - padding-top: 3px; - width: 10px; - - .rock-tab-circle { - display: none; - } - - .rock-tab-cross { - display: block; - color: #9fa4a9; - } - - &:hover { - .rock-tab-circle { - display: block; - } - - .rock-tab-cross { - display: none; - } - } -`; - -export const RockTimesCircleHover = ({ onClick, style = {}, index = 0 }) => { - return ( - -
- -
-
- -
- - ); -}; - -const Filler = styled.div` - flex: 1; - border-bottom: 1px solid #dadfe2; -`; - -interface Props { - activeIdx: number; - headers: string[]; - onClickTab: (idx: number) => void; - onClickCross?: (idx: number) => void; - ids: string[]; - addButton?: boolean; - hideBorderTop?: boolean; - textStyles?: React.CSSProperties[]; - centerAllTabs?: boolean; - fillSpace?: boolean; - borderRight?: boolean; - includeFiller?: boolean; - errors?: boolean[]; - beta?: boolean[]; -} - -export const RockTabs: React.SFC = ({ - headers, - activeIdx, - onClickTab, - ids, - onClickCross, - addButton = false, - hideBorderTop = false, - textStyles = [], - centerAllTabs = false, - fillSpace = false, - borderRight = true, - includeFiller = false, - errors = [], - beta = [], -}) => { - const onClickCrossReal = onClickCross ?? (() => null); - const deletable = onClickCross != null; - return ( - - {_.map(headers, (header, index: number) => { - const lastTab = index === headers.length - 1; - return ( - onClickTab(index)} - key={ids[index]} - narrow={addButton && lastTab} - hideBorderTop={hideBorderTop} - fillSpace={fillSpace} - hideBorderRight={lastTab && !borderRight} - beta={(beta?.length ?? 0 > index) && beta[index]} - > - - {fillSpace ? header : _.truncate(header, { length: 11 })} - - {errors?.[index] && ( - - - - )} - {deletable && (!addButton || index !== headers.length - 1) && ( - onClickCrossReal(index)} - index={index} - /> - )} - - ); - })} - {includeFiller && } - - ); -}; diff --git a/packages/dev-ui/src/RockComponents/RockTooltip.tsx b/packages/dev-ui/src/RockComponents/RockTooltip.tsx deleted file mode 100644 index 25a3226d..00000000 --- a/packages/dev-ui/src/RockComponents/RockTooltip.tsx +++ /dev/null @@ -1,27 +0,0 @@ -/* eslint-disable @typescript-eslint/no-unsafe-member-access */ -/* eslint-disable @typescript-eslint/no-unsafe-call */ -/* eslint-disable @typescript-eslint/no-unsafe-assignment */ -/* LEGACY CODE copied fromconsole */ -/* Basic wrapper. See https://www.npmjs.com/package/react-tooltip for - * usage */ - -import * as React from 'react'; -import styled from 'styled-components'; - -// Not sure why, but ES6 imports don't work here... -// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -const ReactTooltip = require('react-tooltip'); - -const StyleWrapper = styled.div` - .__react_component_tooltip { - z-index: 99999; - max-width: 500px; - line-height: 16px; - } -`; - -export const RockTooltip: React.SFC = ({ ...props }) => ( - - - -); diff --git a/packages/dev-ui/src/RockComponents/utils.tsx b/packages/dev-ui/src/RockComponents/utils.tsx deleted file mode 100644 index 70d9af32..00000000 --- a/packages/dev-ui/src/RockComponents/utils.tsx +++ /dev/null @@ -1,354 +0,0 @@ -/* eslint-disable @typescript-eslint/no-unsafe-call */ -/* eslint-disable @typescript-eslint/no-unsafe-member-access */ -/* eslint-disable @typescript-eslint/no-explicit-any */ -/* eslint-disable @typescript-eslint/no-unsafe-return */ -/* eslint-disable @typescript-eslint/no-unsafe-assignment */ - -/* This code is copied from console, and throws a TON of errors with the above lint rules :P */ - -import * as React from 'react'; -import _ from 'lodash'; -import styled from 'styled-components'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { - faChevronRight, - faChevronDown, -} from '@fortawesome/pro-regular-svg-icons'; -import RockDataTable from './RockDataTable'; - -export const StylesWrapper = styled.div<{ isSubTable?: boolean }>` - margin-left: ${(props) => (props.isSubTable ? '5px' : '0px')}; - .ReactTable { - border-left: ${(props) => - props.isSubTable ? '2px solid #175d8d' : '0px solid transparent'}; - border-bottom: ${(props) => - props.isSubTable - ? '0px solid transparent' - : '1px solid rgba(0, 0, 0, 0.1)'}; - border-right: ${(props) => - props.isSubTable - ? '0px solid transparent' - : '1px solid rgba(0, 0, 0, 0.1)'}; - - .__react_component_tooltip { - white-space: pre-wrap; - } - - .rt-tbody .rt-tr:hover { - background: transparent !important; - } - - .rt-thead.-header { - box-shadow: none; - border-bottom: 1px solid rgba(232, 232, 232) !important; - } - - .rt-resizable-header:last-child { - border-right: 1px solid rgba(232, 232, 232) !important; - } - - .rt-td:last-child { - border-right: 1px solid rgba(232, 232, 232) !important; - } - - .rt-tr { - text-align: left !important; - } - - .rt-th { - background-color: #f2f2f2; - font-size: 12px; - font-weight: 600; - color: #1b2834; - padding: 7px 12px !important; - border-right: 1px solid transparent !important; - } - - .rt-td { - font-size: 14px; - padding: 0px 0px; - border-color: rgba(232, 232, 232) !important; - border-right: 1px solid transparent !important; - } - - .-pagination { - font-size: 14px; - padding: 0px; - .-btn { - padding: 0px; - border-radius: 0px; - } - - .-pageJump input { - padding: 2px 7px; - } - } - } -`; - -const Cell = styled.div<{ expandable?: boolean; isExpanded?: boolean }>` - cursor: ${(props) => (props.expandable ? 'pointer' : 'auto')}; - padding: 4px 4px 4px 8px; - overflow: hidden; - text-overflow: ellipsis; - background-color: ${(props) => - props.isExpanded ? 'rgba(85, 150, 230, 0.1)' : 'transparent'}; - border: 1px solid transparent !important; - :hover { - background-color: rgba(85, 150, 230, 0.1); - border: 1px solid #047cc0 !important; - svg { - color: #175d8d; - } - } -`; - -const IconWrapper = styled.span<{ expandable?: boolean; isExpanded?: boolean }>` - font-size: 10px; - display: ${(props) => (props.expandable ? 'inline-block' : 'none')}; - margin-right: 7px; - color: ${(props) => (props.isExpanded ? '#175d8d' : '#dadfe2')}; -`; - -// Computes the max char length of [all data, header] -const maxColumnChars = (data: any, key: any) => - _.min([ - _.reduce( - data, - (max: any, elem: any) => { - if (elem[key]) { - return _.max([max, JSON.stringify(elem[key]).length]); - } - return max; - }, - JSON.stringify(key).length - ), - 40, - ]); - -const parseRichJSONObj = (value: any) => { - let val: string; - let color: string; - - if (!value) { - return ['null', 'darkgray']; - } - // we may be parsing a non-typed object, - // so we just return a default color and value here. - if (!('__rockset_type' in value)) { - val = JSON.stringify(value); - color = '#1b2834'; - return [val, color]; - } - const rocksetType = value.__rockset_type.toLowerCase(); - switch (rocksetType) { - case 'int': - case 'bytes': - case 'datetime': - case 'date': - case 'time': - case 'timestamp': - return [value.value, '#000080']; - // undefined === null - case 'undefined': - return ['NULL', '#1b2834']; - default: - return [JSON.stringify(value), '#1b2834']; - } -}; - -const generateTableCell = (value: unknown) => { - let val: unknown; - let color: string; - switch (typeof value) { - case 'string': - val = `'${value.replace(/\n/g, ' ')}'`; - color = '#d14'; - break; - case 'boolean': - val = value.toString(); - color = '#219'; - break; - case 'number': - val = value; - color = '#164'; - break; - case 'object': - [val, color] = parseRichJSONObj(value); - break; - default: - val = value; - color = '#1b2834'; - } - - const tooltip = null; - const toolTipText = null; - const id = null; - - // values over length 40 will NOT be rendered by the DataTable and are instead relagated - // to '...'. By truncating here (37 chars plus '...') we can make sure to render something - // for all cells - if (val && val.toString().length > 40) { - val = _.truncate(val.toString(), { length: 37 }); - // If we are truncating a string type, let's at least show the full value in a tooltip - // (otherwise user will have no way of ever discovering full value) - // if (typeof value === 'string') { - // toolTipText = value; - // id = _.uniqueId(); - // tooltip = ; - // } - } - - return ( - <> - 
-        
-          {val}
-          {tooltip}
-        
-
- - ); -}; - -// Given arbitrary json array, compute column names. Only go one level deep in tree. -export const columnsFromData = ( - data: any[], - sortColumns: any, - limitColumns: any, - moreColumnsOnClick: any -) => { - if (!data || data.length === 0) { - return []; - } - - const dataKeys = data.map((d) => (_.isObject(d) ? Object.keys(d) : [])); - const allKeys = - _.reduce(dataKeys, (keys = [], nextKey) => _.union(keys, nextKey)) ?? []; - const maxNumKeys = allKeys.length; - const keys = allKeys.slice(0, limitColumns); - let columns: any = keys.map((key, index) => { - const cell = { - Header: key, - id: key || 'null key ???', - accessor: (obj: any) => obj[key], - minWidth: _.max([maxColumnChars(data, key) * 10, 200]), - Cell: (props: any) => { - const { - // react table props - column: { Header }, - columnProps: { - rest: { toggleRowSubComponent, getActiveColumn }, - }, - nestingPath, - } = props; - - const expandable = - (_.isObject(props.value) || _.isArray(props.value)) && - !_.isEmpty(props.value); - const isExpanded = expandable && getActiveColumn(nestingPath) === key; - - const value = props.value; - return ( - - expandable - ? toggleRowSubComponent({ nestingPath }, e, Header, props.value) - : null - } - > - - - - {generateTableCell(value)} - - ); - }, - ...(index !== keys.length - 1 - ? { maxWidth: _.min([maxColumnChars(data, key) * 10, 300]) } - : {}), - }; - return cell; - }); - - if (sortColumns) { - columns = _(columns) - .sortBy((c) => c.id.toLowerCase()) - .value(); - } - if (limitColumns < maxNumKeys) { - columns.push({ - Header: ( -
- Show More... -
- ), - id: '__more_columns_internal', - accessor: () => '', - maxWidth: 250, - Cell: () => <>, - }); - } - - /* If we create a table with a SubComponent that has no 'expander' columns, - * an expander column is automatically prepended to the table. By unshifting - * an 'expander' column with `show: false`, we can circumvent this. */ - columns.unshift({ - expander: true, - show: false, - }); - - return columns; -}; - -export const subComponentWithToggle = (SubComponent: any, expandFuncs: any) => ( - props: any -) => ; - -export const columnsWithToggle = (columns: any, expandFuncs: any) => - columns.map((column: any) => { - if (column.columns) { - return { - ...column, - columns: columnsWithToggle(column.columns, expandFuncs), - }; - } - return { - ...column, - getProps() { - return { - ...expandFuncs, - }; - }, - }; - }); - -/* Recursive table structure: if object, render new [object] table. If - * Array, render index => value table. */ -export const SubComponent = ({ getActiveColumn, nestingPath, row }: any) => { - const activeColumn = getActiveColumn(nestingPath); - let subData = row[activeColumn]; - if (_.isArray(subData)) { - subData = subData.map((value, index) => ({ index: index + 1, value })); - } else if (_.isObject(subData)) { - subData = [subData]; - } - return ; -}; diff --git a/packages/dev-ui/src/components/helper/util.tsx b/packages/dev-ui/src/components/helper/util.tsx deleted file mode 100644 index 4b9f0a8c..00000000 --- a/packages/dev-ui/src/components/helper/util.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import styled from 'styled-components'; - -export const Space = styled.div<{ height?: string; width?: string }>` - width: ${(props) => props.width}; - height: ${(p) => p.height}; - min-width: ${(props) => props.width}; - min-height: ${(p) => p.height}; -`; - -export const HorzFlex = styled.div` - display: flex; - flex-direction: row; -`; - -export const VertFlex = styled.div` - display: flex; - flex-direction: column; -`; diff --git a/packages/dev-ui/src/components/index.tsx b/packages/dev-ui/src/components/index.tsx deleted file mode 100644 index 016533bc..00000000 --- a/packages/dev-ui/src/components/index.tsx +++ /dev/null @@ -1,97 +0,0 @@ -import RockErrorMessage from './rock/RockErrorMessage'; - -import { RockUnclosableInlineNotification } from './rock/RockInlineNotification'; -import { SkeletonPlaceholder } from 'carbon-components-react'; -import { Space } from './helper/util'; - -import { PebbleButton } from 'components/pebble/button/PebbleButton'; -import { PebbleOverflowMenu } from 'components/pebble/button/PebbleOverflowMenu'; -import { - PebbleCheckboxControlled, - PebbleCheckboxUncontrolled, -} from 'components/pebble/checkbox/PebbleCheckbox'; -import { - PebbleH1, - PebbleH2, - PebbleH3, - PebbleH4, - PebbleH5, - PebbleContent, - PebbleLink, -} from 'components/pebble/text/PebbleText'; -import { PebbleDocsLink } from 'components/pebble/text/PebbleDocsLink'; -import { - PebbleListControlled, - PebbleListUncontrolled, -} from 'components/pebble/list/PebbleList'; -import { PebbleSearch } from 'components/pebble/search/PebbleSearch'; -import { PebbleModal } from 'components/pebble/modal/PebbleModal'; -import { PebbleTooltip } from 'components/pebble/tooltip/PebbleTooltip'; -import { - PebbleTextInput, - PebbleTextArea, -} from 'components/pebble/input/PebbleInput'; -import { PebbleFileUploadButton } from 'components/pebble/input/PebbleFileUploadButton'; -import { PebbleNotification } from 'components/pebble/notification/PebbleNotification'; -import { PebbleRadioButton } from 'components/pebble/radio/PebbleRadioButton'; -import { PebbleRadioButtonGroup } from 'components/pebble/radio/PebbleRadioButtonGroup'; -import { PebbleTable } from 'components/pebble/table/PebbleTable'; -import { - PebbleSelect, - PebbleMultiSelect, -} from 'components/pebble/select/PebbleSelect'; -import { - PebbleBreadcrumbs, - PebbleBreadcrumb, -} from 'components/pebble/breadcrumbs/PebbleBreadcrumbs'; -import { - PebbleAccordion, - PebbleAccordionItemControlled, - PebbleAccordionItemUncontrolled, -} from 'components/pebble/accordion/PebbleAccordion'; -import { PebbleTabs } from 'components/pebble/tabs/PebbleTabs'; -import { PebbleTile } from 'components/pebble/tile/PebbleTile'; -import { PebbleTag } from 'components/pebble/tag/PebbleTag'; -export { PebbleSkeleton } from 'components/pebble/skeleton/PebbleSkeleton'; - -export { - RockUnclosableInlineNotification, - RockErrorMessage, - SkeletonPlaceholder, - Space, - // Pebble - PebbleButton, - PebbleOverflowMenu, - PebbleCheckboxControlled, - PebbleCheckboxUncontrolled, - PebbleH1, - PebbleH2, - PebbleH3, - PebbleH4, - PebbleH5, - PebbleContent, - PebbleLink, - PebbleDocsLink, - PebbleListControlled, - PebbleListUncontrolled, - PebbleSearch, - PebbleModal, - PebbleTooltip, - PebbleTextInput, - PebbleTextArea, - PebbleFileUploadButton, - PebbleNotification, - PebbleRadioButton, - PebbleRadioButtonGroup, - PebbleTable, - PebbleSelect, - PebbleMultiSelect, - PebbleBreadcrumbs, - PebbleBreadcrumb, - PebbleAccordion, - PebbleAccordionItemControlled, - PebbleAccordionItemUncontrolled, - PebbleTabs, - PebbleTile, - PebbleTag, -}; diff --git a/packages/dev-ui/src/components/pebble/accordion/AccordionStyles.tsx b/packages/dev-ui/src/components/pebble/accordion/AccordionStyles.tsx deleted file mode 100644 index 0afed57e..00000000 --- a/packages/dev-ui/src/components/pebble/accordion/AccordionStyles.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import styled from 'styled-components'; -import { pebbleTheme } from 'styles/pebbleTheme'; - -export const Accordion = styled.ul` - border-color: ${pebbleTheme.baseColors.gray11}; - border-top-width: 1px; - border-style: solid; - &:hover { - cursor: pointer; - } -`; - -export const AccordionHeader = styled.div` - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - min-height: 32px; -`; - -export const AccordionItem = styled.li<{ open?: boolean }>` - border-color: ${pebbleTheme.baseColors.gray11}; - border-bottom-width: 1px; - border-style: solid; - display: flex; - flex-wrap: wrap; - user-select: none; - font-size: ${pebbleTheme.fonts.sizes.content}; - padding: 0px 5px; - min-height: 32px; - &:hover { - background-color: ${pebbleTheme.baseColors.gray15}; - } -`; - -export const AccordionItemContent = styled.div` - padding: 5px; -`; diff --git a/packages/dev-ui/src/components/pebble/accordion/PebbleAccordion.tsx b/packages/dev-ui/src/components/pebble/accordion/PebbleAccordion.tsx deleted file mode 100644 index d2bd762a..00000000 --- a/packages/dev-ui/src/components/pebble/accordion/PebbleAccordion.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import * as React from 'react'; -import { - Accordion, - AccordionItem, - AccordionHeader, - AccordionItemContent, -} from './AccordionStyles'; -import { CSSProperties } from 'styled-components'; -import { faAngleDown, faAngleUp } from '@fortawesome/pro-solid-svg-icons'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; - -interface AccordionProps { - children: React.ReactElement[]; - style?: CSSProperties; -} - -export const PebbleAccordion = ({ children, style }: AccordionProps) => { - return {children}; -}; - -interface AccordionItemProps { - header: any; - children: any; -} - -interface UncontrolledProps extends AccordionItemProps { - open: boolean; - onClick: (event: React.MouseEvent) => void; -} - -export const PebbleAccordionItemUncontrolled = ({ - open, - onClick, - header, - children, -}: UncontrolledProps) => { - return ( - <> - - - {header} - - - {open && children} - - - ); -}; - -export const PebbleAccordionItemControlled = ({ - header, - children, -}: AccordionItemProps) => { - const [open, setOpen] = React.useState(false); - return ( - setOpen(!open)} - header={header} - > - {children} - - ); -}; diff --git a/packages/dev-ui/src/components/pebble/breadcrumbs/BreadcrumbsStyles.tsx b/packages/dev-ui/src/components/pebble/breadcrumbs/BreadcrumbsStyles.tsx deleted file mode 100644 index a173f65a..00000000 --- a/packages/dev-ui/src/components/pebble/breadcrumbs/BreadcrumbsStyles.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import styled from 'styled-components'; -import { PebbleLink } from 'components/pebble/text/PebbleText'; -import { pebbleTheme } from 'styles/pebbleTheme'; - -export const Breadcrumbs = styled.div<{ noTrailingSlash: boolean }>` - a:last-child:after { - margin-right: 0; - content: '${(props) => (props.noTrailingSlash ? '' : '/')}'; - } -`; - -export const Breadcrumb = styled(PebbleLink)` - border-style: solid; - border-color: ${pebbleTheme.baseColors.gray11}; - - span:hover { - cursor: pointer; - color: ${pebbleTheme.baseColors.blue8}; - border-style: solid; - border-color: ${pebbleTheme.baseColors.gray11}; - border-bottom-width: 1px; - } - - &:after { - content: '/'; - margin-left: 1rem; - margin-right: 1rem; - } -`; diff --git a/packages/dev-ui/src/components/pebble/breadcrumbs/PebbleBreadcrumbs.tsx b/packages/dev-ui/src/components/pebble/breadcrumbs/PebbleBreadcrumbs.tsx deleted file mode 100644 index d11c1381..00000000 --- a/packages/dev-ui/src/components/pebble/breadcrumbs/PebbleBreadcrumbs.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import * as React from 'react'; -import { Breadcrumbs, Breadcrumb } from './BreadcrumbsStyles'; - -interface BreadcrumbsProps { - noTrailingSlash: boolean; - children: React.ReactElement[]; -} - -export const PebbleBreadcrumbs = ({ - noTrailingSlash, - children, -}: BreadcrumbsProps) => { - return ( - {children} - ); -}; - -interface BreadcrumbProps { - onClick: (event: React.MouseEvent) => void; - href: string; - key: string; - children: any; -} - -export const PebbleBreadcrumb = ({ children, ...rest }: BreadcrumbProps) => { - return ( - - {children} - - ); -}; diff --git a/packages/dev-ui/src/components/pebble/button/ButtonStyles.tsx b/packages/dev-ui/src/components/pebble/button/ButtonStyles.tsx deleted file mode 100644 index 96dd70c1..00000000 --- a/packages/dev-ui/src/components/pebble/button/ButtonStyles.tsx +++ /dev/null @@ -1,103 +0,0 @@ -import styled from 'styled-components'; -import { pebbleTheme } from 'styles/pebbleTheme'; -import { ButtonProps } from './PebbleButton'; - -export enum Roles { - primary = 'primary', - secondary = 'secondary', - tertiary = 'tertiary', - text = 'text', - primaryDanger = 'primary-danger', - secondaryDanger = 'secondary-danger', - textDanger = 'text-danger', -} - -export enum Sizes { - small = 'small', - large = 'large', -} - -const baseColors = pebbleTheme.baseColors; - -export const TextColors = { - [Roles.primary]: baseColors.white, - [Roles.secondary]: baseColors.blue1, - [Roles.tertiary]: baseColors.gray3, - [Roles.text]: baseColors.blue1, - [Roles.primaryDanger]: baseColors.white, - [Roles.secondaryDanger]: baseColors.red6, - [Roles.textDanger]: baseColors.red6, -}; - -const Borders = { - [Roles.primary]: 'none', - [Roles.secondary]: `1px solid ${baseColors.blue1}`, - [Roles.tertiary]: `1px solid ${baseColors.gray3}`, - [Roles.text]: 'none', - [Roles.primaryDanger]: 'none', - [Roles.secondaryDanger]: `1px solid ${baseColors.red6}`, - [Roles.textDanger]: 'none', -}; - -export const BackgroundColors = { - [Roles.primary]: baseColors.blue7, - [Roles.secondary]: 'transparent', - [Roles.tertiary]: 'transparent', - [Roles.text]: 'transparent', - [Roles.primaryDanger]: baseColors.red6, - [Roles.secondaryDanger]: 'transparent', - [Roles.textDanger]: 'transparent', -}; - -export const BackgroundHoverColors = { - [Roles.primary]: baseColors.blue6, - [Roles.secondary]: baseColors.blue15, - [Roles.tertiary]: baseColors.gray2, - [Roles.text]: baseColors.blue15, - [Roles.primaryDanger]: baseColors.red1, - [Roles.secondaryDanger]: baseColors.red5, - [Roles.textDanger]: baseColors.red5, -}; - -const MaxWidth = { - [Sizes.small]: '350px', - [Sizes.large]: '400px', -}; - -const Height = { - [Sizes.small]: '32px', - [Sizes.large]: '40px', -}; - -export const Button = styled.button` - display: inline-flex; - align-items: center; - justify-content: center; - border-radius: 2px; - padding: 0px 16px; - text-align: center; - white-space: nowrap; - - font-size: ${pebbleTheme.fonts.sizes.content}; - font-weight: ${pebbleTheme.fonts.weights.medium}; - font-family: ${pebbleTheme.fonts.families.ssp}; - - max-width: ${(props) => MaxWidth[props.size]}; - height: ${(props) => Height[props.size]}; - - color: ${(props) => TextColors[props.role]}; - border: ${(props) => Borders[props.role]}; - background-color: ${(props) => BackgroundColors[props.role]}; - opacity: ${(props) => (props.disabled ? 0.5 : 1)}; - transition: background-color 0.2s; - - :hover:not([disabled]) { - background-color: ${(props) => BackgroundHoverColors[props.role]}; - } - - :disabled .bx--tooltip__trigger { - cursor: not-allowed; - } - - cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')}; -`; diff --git a/packages/dev-ui/src/components/pebble/button/PebbleButton.tsx b/packages/dev-ui/src/components/pebble/button/PebbleButton.tsx deleted file mode 100644 index 700734bd..00000000 --- a/packages/dev-ui/src/components/pebble/button/PebbleButton.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import * as React from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { IconProp } from '@fortawesome/fontawesome-svg-core'; -import { Button } from './ButtonStyles'; -import { CSSProperties } from 'styled-components'; - -export interface ButtonProps - extends React.DetailedHTMLProps< - React.ButtonHTMLAttributes, - HTMLButtonElement - > { - onClick?: (event: React.MouseEvent) => void; - role?: - | 'primary' - | 'secondary' - | 'tertiary' - | 'text' - | 'primary-danger' - | 'secondary-danger' - | 'text-danger'; - size?: 'small' | 'large'; - text?: string; - children?: any; - icon?: IconProp; - disabled?: boolean; - style?: CSSProperties; - ref?: React.Ref; -} - -export const PebbleButton = ({ - role = 'primary', - size = 'small', - type = 'button', - text, - children, - icon, - ...rest -}: ButtonProps) => { - return ( - - ); -}; diff --git a/packages/dev-ui/src/components/pebble/button/PebbleOverflowMenu.tsx b/packages/dev-ui/src/components/pebble/button/PebbleOverflowMenu.tsx deleted file mode 100644 index c9712c5f..00000000 --- a/packages/dev-ui/src/components/pebble/button/PebbleOverflowMenu.tsx +++ /dev/null @@ -1,114 +0,0 @@ -import * as React from 'react'; -import styled from 'styled-components'; -import { ButtonProps, PebbleButton } from './PebbleButton'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { IconProp } from '@fortawesome/fontawesome-svg-core'; -import { pebbleTheme } from 'styles/pebbleTheme'; - -interface RowProps { - onClick: (event: React.MouseEvent) => void; - content?: any; - icon?: IconProp; - danger?: boolean; -} - -interface Props { - content: RowProps[]; - button?: ButtonProps; - menuPosition?: { - top?: number; - bottom?: number; - left?: number; - right?: number; - zIndex?: number; - }; -} - -export const PebbleOverflowMenu = ({ - content, - button, - menuPosition, -}: Props) => { - const [showMenu, setShowMenu] = React.useState(false); - const node = React.useRef(null); - - const handleEventListener = () => - showMenu - ? document.removeEventListener( - 'mouseup', - (event) => - !node?.current?.contains(event.target) && setShowMenu(false), - false - ) - : document.addEventListener( - 'mouseup', - (event) => - !node?.current?.contains(event.target) && setShowMenu(false), - false - ); - - return ( -
- { - handleEventListener(); - setShowMenu(!showMenu); - }} - {...button} - /> - {showMenu && ( - - {content.map((row) => { - return ( - row.content && ( - { - row.onClick(event); - setShowMenu(false); - }} - danger={row.danger} - > - {row.icon && ( - - )} - {row.content} - - ) - ); - })} - - )} -
- ); -}; - -const Row = styled.div<{ danger: boolean; onClick: Function }>` - color: ${(props) => - props.danger - ? pebbleTheme.contextColors.status.danger - : pebbleTheme.contextColors.text.primary}; - - cursor: ${(props) => props.onClick && 'pointer'}; - - font-size: ${pebbleTheme.fonts.sizes.content}; - padding: 12px; - - :hover { - background-color: ${(props) => - props.danger - ? pebbleTheme.baseColors.red5 - : pebbleTheme.baseColors.blue15}; - } -`; - -const Content = styled.div` - background-color: white; - box-shadow: ${pebbleTheme.baseColors.shade1} 0px 2px 4px 0px; - position: absolute; - height: fit-content; - width: fit-content; - border: 1px solid ${pebbleTheme.baseColors.gray11}; -`; diff --git a/packages/dev-ui/src/components/pebble/checkbox/CheckboxStyles.tsx b/packages/dev-ui/src/components/pebble/checkbox/CheckboxStyles.tsx deleted file mode 100644 index ae01dbf2..00000000 --- a/packages/dev-ui/src/components/pebble/checkbox/CheckboxStyles.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import styled from 'styled-components'; -import { pebbleTheme } from 'styles/pebbleTheme'; - -const baseColors = pebbleTheme.baseColors; - -export const CheckboxWrapper = styled.div<{ disabled?: boolean }>` - display: flex; - align-items: center; - cursor: ${(props) => (props.disabled ? 'default' : 'pointer')}; - opacity: ${(props) => (props.disabled ? 0.5 : 1)}; - width: auto; - user-select: none; - white-space: nowrap; - - label { - cursor: ${(props) => (props.disabled ? 'default' : 'pointer')}; - flex-shrink: 0; - padding: 2px 4px; - color: ${baseColors.gray3}; - white-space: nowrap; - } - - input { - cursor: ${(props) => (props.disabled ? 'default' : 'pointer')}; - outline: none; - position: relative; - flex-shrink: 0; - width: 18px; - height: 18px; - appearance: none; - -webkit-appearance: none; - -moz-appearance: none; - border: 2px solid ${baseColors.blue1}; - background-color: ${baseColors.white}; - - &:checked { - background-color: ${baseColors.blue1}; - - &::before { - box-sizing: border-box; - content: ''; - position: absolute; - top: 0px; - right: 0px; - bottom: 0px; - left: 0px; - left: 0; - } - &::after { - box-sizing: border-box; - content: ''; - position: absolute; - background: none; - width: 9px; - outline: none; - height: 6px; - border-left: 1px solid ${pebbleTheme.baseColors.white}; - border-bottom: 1px solid ${pebbleTheme.baseColors.white}; - left: 2px; - top: 50%; - margin-top: -4px; - opacity: 1; - transform: scale(1) rotate(-45deg); - } - } - - &::before { - content: ' '; - position: absolute; - top: 50%; - right: 50%; - bottom: 50%; - left: 50%; - background-color: ${baseColors.blue1}; - } - } -`; diff --git a/packages/dev-ui/src/components/pebble/checkbox/PebbleCheckbox.tsx b/packages/dev-ui/src/components/pebble/checkbox/PebbleCheckbox.tsx deleted file mode 100644 index a49b2f58..00000000 --- a/packages/dev-ui/src/components/pebble/checkbox/PebbleCheckbox.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import * as React from 'react'; -import { CheckboxWrapper } from './CheckboxStyles'; -import { PebbleContent } from 'components'; - -interface Props - extends React.DetailedHTMLProps< - React.InputHTMLAttributes, - HTMLInputElement - > { - onChange: (event: React.ChangeEvent) => void; - id?: string; - labelText?: string; - customLabel?: any; -} - -interface CheckboxControlledProps extends Props { - checked: boolean; -} - -export const PebbleCheckboxControlled = ({ - id, - labelText, - customLabel, - disabled, - style, - ...rest -}: CheckboxControlledProps) => { - const checkboxId = id; - return ( - - - {customLabel ? ( - - ) : ( - labelText && ( - - - - ) - )} - - ); -}; - -export const PebbleCheckboxUncontrolled = ({ onChange, ...rest }: Props) => { - const [checked, setChecked] = React.useState(false); - - return ( - ) => { - setChecked(!checked); - onChange(event); - }} - checked={checked} - {...rest} - /> - ); -}; diff --git a/packages/dev-ui/src/components/pebble/input/InputStyles.tsx b/packages/dev-ui/src/components/pebble/input/InputStyles.tsx deleted file mode 100644 index 5a7a1c72..00000000 --- a/packages/dev-ui/src/components/pebble/input/InputStyles.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import styled from 'styled-components'; -import { pebbleTheme } from 'styles/pebbleTheme'; -import { SharedProps } from './PebbleInput'; - -const baseColors = pebbleTheme.baseColors; -const contextColors = pebbleTheme.contextColors; - -export const InputWrapper = styled.div` - width: 100%; - input { - height: 40px; - box-sizing: border-box; - } - - textarea { - height: 140px; - max-height: 250px; - } - - input, - textarea { - background-color: ${baseColors.blue19}; - color: ${contextColors.text.primary}; - font-family: ${pebbleTheme.fonts.families.ssp}; - font-size: 14px; - outline: none; - padding: 10px 15px; - width: 100%; - border-width: 0px 0px 1px 0px; - border-style: solid; - border-color: ${baseColors.gray11}; - ::placeholder { - color: ${baseColors.gray9}; - } - resize: none; - :focus { - border-color: ${baseColors.blue7}; - } - } - - input:disabled, - input:read-only, - textarea:disabled, - textarea:read-only { - opacity: 0.5; - } - - input:-webkit-autofill { - box-shadow: 0 0 0 50px ${baseColors.blue19} inset; - -webkit-box-shadow: 0 0 0 50px ${baseColors.blue19} inset; - -webkit-text-fill-color: ${contextColors.text.primary}; - } - - input:-webkit-autofill:focus { - box-shadow: 0 0 0 50px ${baseColors.white} inset; - -webkit-box-shadow: 0 0 0 50px ${baseColors.blue19} inset; - -webkit-text-fill-color: ${contextColors.text.primary}; - } -`; - -export const LabelTextWrapper = styled.label` - display: inline-flex; - align-items: center; - height: 18px; - margin-bottom: 8px; - white-space: nowrap; -`; - -export const HelperTextWrapper = styled.span<{ invalid?: boolean }>` - display: inline-block; - text-align: left; - font-size: ${pebbleTheme.fonts.sizes.h4}; - line-height: 20px; - color: ${(props) => - props.invalid ? contextColors.status.danger : contextColors.text.label}; - a { - font-size: ${pebbleTheme.fonts.sizes.h4}; - } -`; - -export const RequiredText = styled.span<{ invalid?: boolean }>` - font-size: ${pebbleTheme.fonts.sizes.h4}; - display: inline; - margin-right: 5px; - color: ${(props) => - props.invalid ? contextColors.status.danger : contextColors.status.warning}; -`; - -export const LabelInvalidText = styled.span` - font-size: ${pebbleTheme.fonts.sizes.h4}; - font-weight: ${pebbleTheme.fonts.weights.light}; - display: inline-flex; - align-items: center; - color: ${contextColors.status.danger}; -`; diff --git a/packages/dev-ui/src/components/pebble/input/PebbleFileUploadButton.tsx b/packages/dev-ui/src/components/pebble/input/PebbleFileUploadButton.tsx deleted file mode 100644 index 6d5b568c..00000000 --- a/packages/dev-ui/src/components/pebble/input/PebbleFileUploadButton.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import * as React from 'react'; -import { PebbleListUncontrolled, PebbleH4 } from 'components'; -import styled, { CSSProperties } from 'styled-components'; -import { pebbleTheme } from 'styles/pebbleTheme'; - -interface Props - extends React.DetailedHTMLProps< - React.InputHTMLAttributes, - HTMLInputElement - > { - onChange: (event: React.ChangeEvent) => void; - multiple: boolean; - labelText: string; - id?: string; - style?: CSSProperties; -} - -export const PebbleFileUploadButton = ({ - onChange, - multiple, - id, - labelText, - style, - ...rest -}: Props) => { - const [selectedFiles, setSelectedFiles] = React.useState(); - const buttonId = id; - return ( - - { - setSelectedFiles( - event.currentTarget.files.length > 0 - ? Array.from(event.currentTarget.files).map((file) => file.name) - : selectedFiles - ); - onChange(event); - }} - type={'file'} - multiple={multiple} - id={buttonId} - {...rest} - style={{ visibility: 'hidden', width: 0 }} - /> - - - ); -}; - -const InputWrapper = styled.div<{ multiple: boolean }>` - display: flex; - align-items: center; - color: ${pebbleTheme.contextColors.text.link}; - text-decoration: ${(props) => (props.multiple ? 'none' : 'underline')}; - text-decoration-color: ${pebbleTheme.contextColors.text.link}; - cursor: pointer; -`; diff --git a/packages/dev-ui/src/components/pebble/input/PebbleInput.tsx b/packages/dev-ui/src/components/pebble/input/PebbleInput.tsx deleted file mode 100644 index 2e6fb996..00000000 --- a/packages/dev-ui/src/components/pebble/input/PebbleInput.tsx +++ /dev/null @@ -1,196 +0,0 @@ -import * as React from 'react'; -import { - InputWrapper, - LabelTextWrapper, - HelperTextWrapper, - RequiredText, - LabelInvalidText, -} from './InputStyles'; -import { PebbleH4, PebbleDocsLink, PebbleTooltip } from 'components'; -import { CSSProperties } from 'styled-components'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faInfoCircle } from '@fortawesome/pro-light-svg-icons'; -import { faExclamationCircle } from '@fortawesome/pro-solid-svg-icons'; -import { pebbleTheme } from 'styles/pebbleTheme'; - -export interface SharedProps { - helperText?: string; - labelText?: string; - customLabel?: JSX.Element; - tooltipText?: string; - docsLink?: string; - required?: boolean; - invalid?: boolean; - invalidText?: string; - style?: CSSProperties; -} - -interface TextInputProps - extends SharedProps, - React.DetailedHTMLProps< - React.InputHTMLAttributes, - HTMLInputElement - > { - id?: string; - type?: string; // e.g. 'text' | 'email' | 'password' -> read HTML docs for more types - value?: string; - onChange?: (event: React.ChangeEvent) => void; - children?: any; -} - -export const PebbleTextInput = ({ - id, - helperText, - labelText, - customLabel, - tooltipText, - docsLink, - invalid, - invalidText, - required, - children, - style, - ...rest -}: TextInputProps) => { - const inputId = id; - return ( - - {customLabel ? ( -
{customLabel}
- ) : ( - labelText && ( - - ) - )} - - {helperText && ( - - )} - {children} - - ); -}; - -interface TextAreaProps - extends SharedProps, - React.DetailedHTMLProps< - React.TextareaHTMLAttributes, - HTMLTextAreaElement - > { - id?: string; - value?: string; - onChange?: (event: React.ChangeEvent) => void; - children?: any; -} - -export const PebbleTextArea = ({ - id, - helperText, - labelText, - tooltipText, - docsLink, - invalid, - invalidText, - required, - children, - style, - ...rest -}: TextAreaProps) => { - const inputId = id; - return ( - - {labelText && ( - - )} -