From af7dbbf250617117cb7005c26571b028f8c11650 Mon Sep 17 00:00:00 2001 From: Ivan Kitanov Date: Thu, 30 May 2024 17:49:27 +0300 Subject: [PATCH 1/2] Adding textarea samples --- .../textarea/form-integration/.eslintrc.js | 75 +++++++++++++++++++ .../textarea/form-integration/README.md | 56 ++++++++++++++ .../textarea/form-integration/package.json | 38 ++++++++++ .../form-integration/public/index.html | 10 +++ .../form-integration/sandbox.config.json | 5 ++ .../textarea/form-integration/src/index.css | 5 ++ .../textarea/form-integration/src/index.tsx | 52 +++++++++++++ .../form-integration/src/react-app-env.d.ts | 1 + .../textarea/form-integration/tsconfig.json | 45 +++++++++++ samples/inputs/textarea/overview/.eslintrc.js | 75 +++++++++++++++++++ samples/inputs/textarea/overview/README.md | 56 ++++++++++++++ samples/inputs/textarea/overview/package.json | 38 ++++++++++ .../textarea/overview/public/index.html | 10 +++ .../textarea/overview/sandbox.config.json | 5 ++ .../inputs/textarea/overview/src/index.css | 2 + .../inputs/textarea/overview/src/index.tsx | 26 +++++++ .../textarea/overview/src/react-app-env.d.ts | 1 + .../inputs/textarea/overview/tsconfig.json | 45 +++++++++++ samples/inputs/textarea/resize/.eslintrc.js | 75 +++++++++++++++++++ samples/inputs/textarea/resize/README.md | 56 ++++++++++++++ samples/inputs/textarea/resize/package.json | 38 ++++++++++ .../inputs/textarea/resize/public/index.html | 10 +++ .../textarea/resize/sandbox.config.json | 5 ++ samples/inputs/textarea/resize/src/index.css | 2 + samples/inputs/textarea/resize/src/index.tsx | 34 +++++++++ .../textarea/resize/src/react-app-env.d.ts | 1 + samples/inputs/textarea/resize/tsconfig.json | 45 +++++++++++ samples/inputs/textarea/slots/.eslintrc.js | 75 +++++++++++++++++++ samples/inputs/textarea/slots/README.md | 56 ++++++++++++++ samples/inputs/textarea/slots/package.json | 38 ++++++++++ .../inputs/textarea/slots/public/index.html | 10 +++ .../inputs/textarea/slots/sandbox.config.json | 5 ++ samples/inputs/textarea/slots/src/index.css | 2 + samples/inputs/textarea/slots/src/index.tsx | 44 +++++++++++ .../textarea/slots/src/react-app-env.d.ts | 1 + samples/inputs/textarea/slots/tsconfig.json | 45 +++++++++++ samples/inputs/textarea/styling/.eslintrc.js | 75 +++++++++++++++++++ samples/inputs/textarea/styling/README.md | 56 ++++++++++++++ samples/inputs/textarea/styling/package.json | 38 ++++++++++ .../inputs/textarea/styling/public/index.html | 10 +++ .../textarea/styling/sandbox.config.json | 5 ++ samples/inputs/textarea/styling/src/index.css | 17 +++++ samples/inputs/textarea/styling/src/index.tsx | 44 +++++++++++ .../textarea/styling/src/react-app-env.d.ts | 1 + samples/inputs/textarea/styling/tsconfig.json | 45 +++++++++++ 45 files changed, 1378 insertions(+) create mode 100644 samples/inputs/textarea/form-integration/.eslintrc.js create mode 100644 samples/inputs/textarea/form-integration/README.md create mode 100644 samples/inputs/textarea/form-integration/package.json create mode 100644 samples/inputs/textarea/form-integration/public/index.html create mode 100644 samples/inputs/textarea/form-integration/sandbox.config.json create mode 100644 samples/inputs/textarea/form-integration/src/index.css create mode 100644 samples/inputs/textarea/form-integration/src/index.tsx create mode 100644 samples/inputs/textarea/form-integration/src/react-app-env.d.ts create mode 100644 samples/inputs/textarea/form-integration/tsconfig.json create mode 100644 samples/inputs/textarea/overview/.eslintrc.js create mode 100644 samples/inputs/textarea/overview/README.md create mode 100644 samples/inputs/textarea/overview/package.json create mode 100644 samples/inputs/textarea/overview/public/index.html create mode 100644 samples/inputs/textarea/overview/sandbox.config.json create mode 100644 samples/inputs/textarea/overview/src/index.css create mode 100644 samples/inputs/textarea/overview/src/index.tsx create mode 100644 samples/inputs/textarea/overview/src/react-app-env.d.ts create mode 100644 samples/inputs/textarea/overview/tsconfig.json create mode 100644 samples/inputs/textarea/resize/.eslintrc.js create mode 100644 samples/inputs/textarea/resize/README.md create mode 100644 samples/inputs/textarea/resize/package.json create mode 100644 samples/inputs/textarea/resize/public/index.html create mode 100644 samples/inputs/textarea/resize/sandbox.config.json create mode 100644 samples/inputs/textarea/resize/src/index.css create mode 100644 samples/inputs/textarea/resize/src/index.tsx create mode 100644 samples/inputs/textarea/resize/src/react-app-env.d.ts create mode 100644 samples/inputs/textarea/resize/tsconfig.json create mode 100644 samples/inputs/textarea/slots/.eslintrc.js create mode 100644 samples/inputs/textarea/slots/README.md create mode 100644 samples/inputs/textarea/slots/package.json create mode 100644 samples/inputs/textarea/slots/public/index.html create mode 100644 samples/inputs/textarea/slots/sandbox.config.json create mode 100644 samples/inputs/textarea/slots/src/index.css create mode 100644 samples/inputs/textarea/slots/src/index.tsx create mode 100644 samples/inputs/textarea/slots/src/react-app-env.d.ts create mode 100644 samples/inputs/textarea/slots/tsconfig.json create mode 100644 samples/inputs/textarea/styling/.eslintrc.js create mode 100644 samples/inputs/textarea/styling/README.md create mode 100644 samples/inputs/textarea/styling/package.json create mode 100644 samples/inputs/textarea/styling/public/index.html create mode 100644 samples/inputs/textarea/styling/sandbox.config.json create mode 100644 samples/inputs/textarea/styling/src/index.css create mode 100644 samples/inputs/textarea/styling/src/index.tsx create mode 100644 samples/inputs/textarea/styling/src/react-app-env.d.ts create mode 100644 samples/inputs/textarea/styling/tsconfig.json diff --git a/samples/inputs/textarea/form-integration/.eslintrc.js b/samples/inputs/textarea/form-integration/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/textarea/form-integration/.eslintrc.js @@ -0,0 +1,75 @@ +// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project +module.exports = { + parser: "@typescript-eslint/parser", // Specifies the ESLint parser + parserOptions: { + ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features + sourceType: "module", // Allows for the use of imports + ecmaFeatures: { + jsx: true // Allows for the parsing of JSX + } + }, + settings: { + react: { + version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use + } + }, + extends: [ + "eslint:recommended", + "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react + "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin + ], + rules: { + // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs + "default-case": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + }, + "overrides": [ + { + "files": ["*.ts", "*.tsx"], + "rules": { + "default-case": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + } + } + ] + }; \ No newline at end of file diff --git a/samples/inputs/textarea/form-integration/README.md b/samples/inputs/textarea/form-integration/README.md new file mode 100644 index 0000000000..b00ea4ed98 --- /dev/null +++ b/samples/inputs/textarea/form-integration/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Overview feature using [Input](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +Follow these instructions to run this example: + + +``` +git clone https://github.com/IgniteUI/igniteui-react-examples.git +git checkout master +cd ./igniteui-react-examples +cd ./samples/inputs/input/overview +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: +``` +npm install --legacy-peer-deps +npm run-script start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html). diff --git a/samples/inputs/textarea/form-integration/package.json b/samples/inputs/textarea/form-integration/package.json new file mode 100644 index 0000000000..d11b4ecd94 --- /dev/null +++ b/samples/inputs/textarea/form-integration/package.json @@ -0,0 +1,38 @@ +{ + "name": "react-input-overview", + "description": "This project provides example of Input Overview using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "private": true, + "scripts": { + "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start", + "build": "react-scripts --max_old_space_size=10240 build ", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + }, + "dependencies": { + "igniteui-dockmanager": "1.14.2", + "igniteui-react": "18.6.0", + "igniteui-react-core": "18.6.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-scripts": "^5.0.1", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@types/jest": "^29.2.0", + "@types/node": "^18.11.7", + "@types/react": "^18.0.24", + "@types/react-dom": "^18.0.8", + "react-app-rewired": "^2.2.1", + "typescript": "^4.8.4", + "worker-loader": "^3.0.8" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} diff --git a/samples/inputs/textarea/form-integration/public/index.html b/samples/inputs/textarea/form-integration/public/index.html new file mode 100644 index 0000000000..e6fcd73310 --- /dev/null +++ b/samples/inputs/textarea/form-integration/public/index.html @@ -0,0 +1,10 @@ + + + + TextAreaFormIntegration + + + +
+ + \ No newline at end of file diff --git a/samples/inputs/textarea/form-integration/sandbox.config.json b/samples/inputs/textarea/form-integration/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/inputs/textarea/form-integration/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/inputs/textarea/form-integration/src/index.css b/samples/inputs/textarea/form-integration/src/index.css new file mode 100644 index 0000000000..3e45a6d28f --- /dev/null +++ b/samples/inputs/textarea/form-integration/src/index.css @@ -0,0 +1,5 @@ +/* shared styles are loaded from: */ +/* https://static.infragistics.com/xplatform/css/samples */ +.controls { + margin-top: 1rem; +} diff --git a/samples/inputs/textarea/form-integration/src/index.tsx b/samples/inputs/textarea/form-integration/src/index.tsx new file mode 100644 index 0000000000..58797d0f82 --- /dev/null +++ b/samples/inputs/textarea/form-integration/src/index.tsx @@ -0,0 +1,52 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrTextarea, IgrTextareaModule, IgrButton, IgrButtonModule, IgrToast, IgrToastModule } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +IgrTextareaModule.register(); +IgrButtonModule.register(); +IgrToastModule.register(); + +export default class TextAreaFormIntegration extends React.Component { + + public toastRef: IgrToast; + + constructor(props: any) { + super(props); + this.onSubmitButtonClicked = this.onSubmitButtonClicked.bind(this); + this.onToastRef = this.onToastRef.bind(this); + } + + public render(): JSX.Element { + return ( +
+
+ + +
+ Submit review + Reset +
+ Your review was submitted +
+
+ ); + } + + public onToastRef(toast: IgrToast){ + if (!toast) { return; } + this.toastRef = toast; + } + + public onSubmitButtonClicked(e:React.FormEvent) { + if(this.toastRef){ + e.preventDefault(); + this.toastRef.show(); + } + } +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/textarea/form-integration/src/react-app-env.d.ts b/samples/inputs/textarea/form-integration/src/react-app-env.d.ts new file mode 100644 index 0000000000..6431bc5fc6 --- /dev/null +++ b/samples/inputs/textarea/form-integration/src/react-app-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/samples/inputs/textarea/form-integration/tsconfig.json b/samples/inputs/textarea/form-integration/tsconfig.json new file mode 100644 index 0000000000..8f5c3b15e4 --- /dev/null +++ b/samples/inputs/textarea/form-integration/tsconfig.json @@ -0,0 +1,45 @@ +{ + "compilerOptions": { + "resolveJsonModule": true, + "esModuleInterop": true, + "baseUrl": ".", + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": [ + "es6", + "dom" + ], + "sourceMap": true, + "allowJs": true, + "jsx": "react", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "noUnusedLocals": false, + "importHelpers": true, + "suppressImplicitAnyIndexErrors": true, + "allowSyntheticDefaultImports": true, + "skipLibCheck": true, + "strict": false, + "isolatedModules": true, + "noEmit": true + }, + "exclude": [ + "node_modules", + "build", + "scripts", + "acceptance-tests", + "webpack", + "jest", + "src/setupTests.ts", + "**/odatajs-4.0.0.js", + "config-overrides.js" + ], + "include": [ + "src" + ] +} diff --git a/samples/inputs/textarea/overview/.eslintrc.js b/samples/inputs/textarea/overview/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/textarea/overview/.eslintrc.js @@ -0,0 +1,75 @@ +// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project +module.exports = { + parser: "@typescript-eslint/parser", // Specifies the ESLint parser + parserOptions: { + ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features + sourceType: "module", // Allows for the use of imports + ecmaFeatures: { + jsx: true // Allows for the parsing of JSX + } + }, + settings: { + react: { + version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use + } + }, + extends: [ + "eslint:recommended", + "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react + "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin + ], + rules: { + // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs + "default-case": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + }, + "overrides": [ + { + "files": ["*.ts", "*.tsx"], + "rules": { + "default-case": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + } + } + ] + }; \ No newline at end of file diff --git a/samples/inputs/textarea/overview/README.md b/samples/inputs/textarea/overview/README.md new file mode 100644 index 0000000000..b00ea4ed98 --- /dev/null +++ b/samples/inputs/textarea/overview/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Overview feature using [Input](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +Follow these instructions to run this example: + + +``` +git clone https://github.com/IgniteUI/igniteui-react-examples.git +git checkout master +cd ./igniteui-react-examples +cd ./samples/inputs/input/overview +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: +``` +npm install --legacy-peer-deps +npm run-script start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html). diff --git a/samples/inputs/textarea/overview/package.json b/samples/inputs/textarea/overview/package.json new file mode 100644 index 0000000000..d11b4ecd94 --- /dev/null +++ b/samples/inputs/textarea/overview/package.json @@ -0,0 +1,38 @@ +{ + "name": "react-input-overview", + "description": "This project provides example of Input Overview using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "private": true, + "scripts": { + "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start", + "build": "react-scripts --max_old_space_size=10240 build ", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + }, + "dependencies": { + "igniteui-dockmanager": "1.14.2", + "igniteui-react": "18.6.0", + "igniteui-react-core": "18.6.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-scripts": "^5.0.1", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@types/jest": "^29.2.0", + "@types/node": "^18.11.7", + "@types/react": "^18.0.24", + "@types/react-dom": "^18.0.8", + "react-app-rewired": "^2.2.1", + "typescript": "^4.8.4", + "worker-loader": "^3.0.8" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} diff --git a/samples/inputs/textarea/overview/public/index.html b/samples/inputs/textarea/overview/public/index.html new file mode 100644 index 0000000000..ace1cccb87 --- /dev/null +++ b/samples/inputs/textarea/overview/public/index.html @@ -0,0 +1,10 @@ + + + + TextAreaOverview + + + +
+ + \ No newline at end of file diff --git a/samples/inputs/textarea/overview/sandbox.config.json b/samples/inputs/textarea/overview/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/inputs/textarea/overview/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/inputs/textarea/overview/src/index.css b/samples/inputs/textarea/overview/src/index.css new file mode 100644 index 0000000000..0fe9368715 --- /dev/null +++ b/samples/inputs/textarea/overview/src/index.css @@ -0,0 +1,2 @@ +/* shared styles are loaded from: */ +/* https://static.infragistics.com/xplatform/css/samples */ \ No newline at end of file diff --git a/samples/inputs/textarea/overview/src/index.tsx b/samples/inputs/textarea/overview/src/index.tsx new file mode 100644 index 0000000000..387d50306b --- /dev/null +++ b/samples/inputs/textarea/overview/src/index.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrTextarea, IgrTextareaModule } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +IgrTextareaModule.register(); + +export default class InputOverview extends React.Component { + + constructor(props: any) { + super(props); + } + + public render(): JSX.Element { + return ( +
+ It was a dark and stormy night... +
+ ); + } +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/textarea/overview/src/react-app-env.d.ts b/samples/inputs/textarea/overview/src/react-app-env.d.ts new file mode 100644 index 0000000000..6431bc5fc6 --- /dev/null +++ b/samples/inputs/textarea/overview/src/react-app-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/samples/inputs/textarea/overview/tsconfig.json b/samples/inputs/textarea/overview/tsconfig.json new file mode 100644 index 0000000000..8f5c3b15e4 --- /dev/null +++ b/samples/inputs/textarea/overview/tsconfig.json @@ -0,0 +1,45 @@ +{ + "compilerOptions": { + "resolveJsonModule": true, + "esModuleInterop": true, + "baseUrl": ".", + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": [ + "es6", + "dom" + ], + "sourceMap": true, + "allowJs": true, + "jsx": "react", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "noUnusedLocals": false, + "importHelpers": true, + "suppressImplicitAnyIndexErrors": true, + "allowSyntheticDefaultImports": true, + "skipLibCheck": true, + "strict": false, + "isolatedModules": true, + "noEmit": true + }, + "exclude": [ + "node_modules", + "build", + "scripts", + "acceptance-tests", + "webpack", + "jest", + "src/setupTests.ts", + "**/odatajs-4.0.0.js", + "config-overrides.js" + ], + "include": [ + "src" + ] +} diff --git a/samples/inputs/textarea/resize/.eslintrc.js b/samples/inputs/textarea/resize/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/textarea/resize/.eslintrc.js @@ -0,0 +1,75 @@ +// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project +module.exports = { + parser: "@typescript-eslint/parser", // Specifies the ESLint parser + parserOptions: { + ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features + sourceType: "module", // Allows for the use of imports + ecmaFeatures: { + jsx: true // Allows for the parsing of JSX + } + }, + settings: { + react: { + version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use + } + }, + extends: [ + "eslint:recommended", + "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react + "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin + ], + rules: { + // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs + "default-case": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + }, + "overrides": [ + { + "files": ["*.ts", "*.tsx"], + "rules": { + "default-case": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + } + } + ] + }; \ No newline at end of file diff --git a/samples/inputs/textarea/resize/README.md b/samples/inputs/textarea/resize/README.md new file mode 100644 index 0000000000..b00ea4ed98 --- /dev/null +++ b/samples/inputs/textarea/resize/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Overview feature using [Input](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +Follow these instructions to run this example: + + +``` +git clone https://github.com/IgniteUI/igniteui-react-examples.git +git checkout master +cd ./igniteui-react-examples +cd ./samples/inputs/input/overview +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: +``` +npm install --legacy-peer-deps +npm run-script start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html). diff --git a/samples/inputs/textarea/resize/package.json b/samples/inputs/textarea/resize/package.json new file mode 100644 index 0000000000..d11b4ecd94 --- /dev/null +++ b/samples/inputs/textarea/resize/package.json @@ -0,0 +1,38 @@ +{ + "name": "react-input-overview", + "description": "This project provides example of Input Overview using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "private": true, + "scripts": { + "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start", + "build": "react-scripts --max_old_space_size=10240 build ", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + }, + "dependencies": { + "igniteui-dockmanager": "1.14.2", + "igniteui-react": "18.6.0", + "igniteui-react-core": "18.6.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-scripts": "^5.0.1", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@types/jest": "^29.2.0", + "@types/node": "^18.11.7", + "@types/react": "^18.0.24", + "@types/react-dom": "^18.0.8", + "react-app-rewired": "^2.2.1", + "typescript": "^4.8.4", + "worker-loader": "^3.0.8" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} diff --git a/samples/inputs/textarea/resize/public/index.html b/samples/inputs/textarea/resize/public/index.html new file mode 100644 index 0000000000..9849e41137 --- /dev/null +++ b/samples/inputs/textarea/resize/public/index.html @@ -0,0 +1,10 @@ + + + + TextAreaResize + + + +
+ + \ No newline at end of file diff --git a/samples/inputs/textarea/resize/sandbox.config.json b/samples/inputs/textarea/resize/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/inputs/textarea/resize/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/inputs/textarea/resize/src/index.css b/samples/inputs/textarea/resize/src/index.css new file mode 100644 index 0000000000..0fe9368715 --- /dev/null +++ b/samples/inputs/textarea/resize/src/index.css @@ -0,0 +1,2 @@ +/* shared styles are loaded from: */ +/* https://static.infragistics.com/xplatform/css/samples */ \ No newline at end of file diff --git a/samples/inputs/textarea/resize/src/index.tsx b/samples/inputs/textarea/resize/src/index.tsx new file mode 100644 index 0000000000..10c4ad0d23 --- /dev/null +++ b/samples/inputs/textarea/resize/src/index.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrTextarea, IgrTextareaModule } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +IgrTextareaModule.register(); + +export default class InputOverview extends React.Component { + + constructor(props: any) { + super(props); + } + + public render(): JSX.Element { + return ( +
+ +

This textarea does not resize and uses a scroll bar to show overflow text.

+ + +

This textarea lets the user resize vertically.

+ + +

This textarea shows all the user input at once. Overflow text wraps onto a new line and expands the text area.

+ +
+ ); + } +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/textarea/resize/src/react-app-env.d.ts b/samples/inputs/textarea/resize/src/react-app-env.d.ts new file mode 100644 index 0000000000..6431bc5fc6 --- /dev/null +++ b/samples/inputs/textarea/resize/src/react-app-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/samples/inputs/textarea/resize/tsconfig.json b/samples/inputs/textarea/resize/tsconfig.json new file mode 100644 index 0000000000..8f5c3b15e4 --- /dev/null +++ b/samples/inputs/textarea/resize/tsconfig.json @@ -0,0 +1,45 @@ +{ + "compilerOptions": { + "resolveJsonModule": true, + "esModuleInterop": true, + "baseUrl": ".", + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": [ + "es6", + "dom" + ], + "sourceMap": true, + "allowJs": true, + "jsx": "react", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "noUnusedLocals": false, + "importHelpers": true, + "suppressImplicitAnyIndexErrors": true, + "allowSyntheticDefaultImports": true, + "skipLibCheck": true, + "strict": false, + "isolatedModules": true, + "noEmit": true + }, + "exclude": [ + "node_modules", + "build", + "scripts", + "acceptance-tests", + "webpack", + "jest", + "src/setupTests.ts", + "**/odatajs-4.0.0.js", + "config-overrides.js" + ], + "include": [ + "src" + ] +} diff --git a/samples/inputs/textarea/slots/.eslintrc.js b/samples/inputs/textarea/slots/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/textarea/slots/.eslintrc.js @@ -0,0 +1,75 @@ +// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project +module.exports = { + parser: "@typescript-eslint/parser", // Specifies the ESLint parser + parserOptions: { + ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features + sourceType: "module", // Allows for the use of imports + ecmaFeatures: { + jsx: true // Allows for the parsing of JSX + } + }, + settings: { + react: { + version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use + } + }, + extends: [ + "eslint:recommended", + "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react + "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin + ], + rules: { + // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs + "default-case": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + }, + "overrides": [ + { + "files": ["*.ts", "*.tsx"], + "rules": { + "default-case": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + } + } + ] + }; \ No newline at end of file diff --git a/samples/inputs/textarea/slots/README.md b/samples/inputs/textarea/slots/README.md new file mode 100644 index 0000000000..b00ea4ed98 --- /dev/null +++ b/samples/inputs/textarea/slots/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Overview feature using [Input](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +Follow these instructions to run this example: + + +``` +git clone https://github.com/IgniteUI/igniteui-react-examples.git +git checkout master +cd ./igniteui-react-examples +cd ./samples/inputs/input/overview +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: +``` +npm install --legacy-peer-deps +npm run-script start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html). diff --git a/samples/inputs/textarea/slots/package.json b/samples/inputs/textarea/slots/package.json new file mode 100644 index 0000000000..d11b4ecd94 --- /dev/null +++ b/samples/inputs/textarea/slots/package.json @@ -0,0 +1,38 @@ +{ + "name": "react-input-overview", + "description": "This project provides example of Input Overview using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "private": true, + "scripts": { + "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start", + "build": "react-scripts --max_old_space_size=10240 build ", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + }, + "dependencies": { + "igniteui-dockmanager": "1.14.2", + "igniteui-react": "18.6.0", + "igniteui-react-core": "18.6.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-scripts": "^5.0.1", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@types/jest": "^29.2.0", + "@types/node": "^18.11.7", + "@types/react": "^18.0.24", + "@types/react-dom": "^18.0.8", + "react-app-rewired": "^2.2.1", + "typescript": "^4.8.4", + "worker-loader": "^3.0.8" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} diff --git a/samples/inputs/textarea/slots/public/index.html b/samples/inputs/textarea/slots/public/index.html new file mode 100644 index 0000000000..07a8139d43 --- /dev/null +++ b/samples/inputs/textarea/slots/public/index.html @@ -0,0 +1,10 @@ + + + + TextAreaSlots + + + +
+ + \ No newline at end of file diff --git a/samples/inputs/textarea/slots/sandbox.config.json b/samples/inputs/textarea/slots/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/inputs/textarea/slots/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/inputs/textarea/slots/src/index.css b/samples/inputs/textarea/slots/src/index.css new file mode 100644 index 0000000000..0fe9368715 --- /dev/null +++ b/samples/inputs/textarea/slots/src/index.css @@ -0,0 +1,2 @@ +/* shared styles are loaded from: */ +/* https://static.infragistics.com/xplatform/css/samples */ \ No newline at end of file diff --git a/samples/inputs/textarea/slots/src/index.tsx b/samples/inputs/textarea/slots/src/index.tsx new file mode 100644 index 0000000000..344469e19c --- /dev/null +++ b/samples/inputs/textarea/slots/src/index.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrTextarea, IgrTextareaModule, IgrIcon, IgrIconModule } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +IgrTextareaModule.register(); +IgrIconModule.register(); + +export default class TextAreaSlot extends React.Component { + + constructor(props: any) { + super(props); + } + + public render(): JSX.Element { + return ( +
+ + + + +

Give us a short description of what you liked/disliked

+ +
+ ); + + } + + public iconRef(icon: IgrIcon){ + if(!icon){ + return; + } + + icon.registerIconFromText( "feedback", + ``, + "material"); + } +} + + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/textarea/slots/src/react-app-env.d.ts b/samples/inputs/textarea/slots/src/react-app-env.d.ts new file mode 100644 index 0000000000..6431bc5fc6 --- /dev/null +++ b/samples/inputs/textarea/slots/src/react-app-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/samples/inputs/textarea/slots/tsconfig.json b/samples/inputs/textarea/slots/tsconfig.json new file mode 100644 index 0000000000..8f5c3b15e4 --- /dev/null +++ b/samples/inputs/textarea/slots/tsconfig.json @@ -0,0 +1,45 @@ +{ + "compilerOptions": { + "resolveJsonModule": true, + "esModuleInterop": true, + "baseUrl": ".", + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": [ + "es6", + "dom" + ], + "sourceMap": true, + "allowJs": true, + "jsx": "react", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "noUnusedLocals": false, + "importHelpers": true, + "suppressImplicitAnyIndexErrors": true, + "allowSyntheticDefaultImports": true, + "skipLibCheck": true, + "strict": false, + "isolatedModules": true, + "noEmit": true + }, + "exclude": [ + "node_modules", + "build", + "scripts", + "acceptance-tests", + "webpack", + "jest", + "src/setupTests.ts", + "**/odatajs-4.0.0.js", + "config-overrides.js" + ], + "include": [ + "src" + ] +} diff --git a/samples/inputs/textarea/styling/.eslintrc.js b/samples/inputs/textarea/styling/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/textarea/styling/.eslintrc.js @@ -0,0 +1,75 @@ +// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project +module.exports = { + parser: "@typescript-eslint/parser", // Specifies the ESLint parser + parserOptions: { + ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features + sourceType: "module", // Allows for the use of imports + ecmaFeatures: { + jsx: true // Allows for the parsing of JSX + } + }, + settings: { + react: { + version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use + } + }, + extends: [ + "eslint:recommended", + "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react + "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin + ], + rules: { + // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs + "default-case": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + }, + "overrides": [ + { + "files": ["*.ts", "*.tsx"], + "rules": { + "default-case": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + } + } + ] + }; \ No newline at end of file diff --git a/samples/inputs/textarea/styling/README.md b/samples/inputs/textarea/styling/README.md new file mode 100644 index 0000000000..b00ea4ed98 --- /dev/null +++ b/samples/inputs/textarea/styling/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Overview feature using [Input](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +Follow these instructions to run this example: + + +``` +git clone https://github.com/IgniteUI/igniteui-react-examples.git +git checkout master +cd ./igniteui-react-examples +cd ./samples/inputs/input/overview +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: +``` +npm install --legacy-peer-deps +npm run-script start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html). diff --git a/samples/inputs/textarea/styling/package.json b/samples/inputs/textarea/styling/package.json new file mode 100644 index 0000000000..d11b4ecd94 --- /dev/null +++ b/samples/inputs/textarea/styling/package.json @@ -0,0 +1,38 @@ +{ + "name": "react-input-overview", + "description": "This project provides example of Input Overview using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "private": true, + "scripts": { + "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start", + "build": "react-scripts --max_old_space_size=10240 build ", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + }, + "dependencies": { + "igniteui-dockmanager": "1.14.2", + "igniteui-react": "18.6.0", + "igniteui-react-core": "18.6.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-scripts": "^5.0.1", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@types/jest": "^29.2.0", + "@types/node": "^18.11.7", + "@types/react": "^18.0.24", + "@types/react-dom": "^18.0.8", + "react-app-rewired": "^2.2.1", + "typescript": "^4.8.4", + "worker-loader": "^3.0.8" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} diff --git a/samples/inputs/textarea/styling/public/index.html b/samples/inputs/textarea/styling/public/index.html new file mode 100644 index 0000000000..ed6dfb0bf0 --- /dev/null +++ b/samples/inputs/textarea/styling/public/index.html @@ -0,0 +1,10 @@ + + + + TextAreaStyling + + + +
+ + \ No newline at end of file diff --git a/samples/inputs/textarea/styling/sandbox.config.json b/samples/inputs/textarea/styling/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/inputs/textarea/styling/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/inputs/textarea/styling/src/index.css b/samples/inputs/textarea/styling/src/index.css new file mode 100644 index 0000000000..a6c1150f22 --- /dev/null +++ b/samples/inputs/textarea/styling/src/index.css @@ -0,0 +1,17 @@ +/* shared styles are loaded from: */ +/* https://static.infragistics.com/xplatform/css/samples */ +igc-textarea::part(input) { + background-color: rgb(169, 214, 229); + border-color: rgb(42, 111, 151); +} + +igc-textarea::part(label) { + color: rgb(1, 42, 74); +} + +igc-textarea::part(prefix), +igc-textarea::part(suffix) { + color: white; + border-color: rgb(42, 111, 151); + background-color: rgb(70, 143, 175); +} diff --git a/samples/inputs/textarea/styling/src/index.tsx b/samples/inputs/textarea/styling/src/index.tsx new file mode 100644 index 0000000000..213582950a --- /dev/null +++ b/samples/inputs/textarea/styling/src/index.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrTextarea, IgrTextareaModule, IgrIcon, IgrIconModule } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +IgrTextareaModule.register(); +IgrIconModule.register(); + +export default class TextAreaStyling extends React.Component { + + constructor(props: any) { + super(props); + } + + public render(): JSX.Element { + return ( +
+ + + + +

Provide a detailed description of the steps that led to the issue you experienced

+ +
+ ); + + } + + public iconRef(icon: IgrIcon){ + if(!icon){ + return; + } + + icon.registerIconFromText( "feedback", + ``, + "material"); + } +} + + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/textarea/styling/src/react-app-env.d.ts b/samples/inputs/textarea/styling/src/react-app-env.d.ts new file mode 100644 index 0000000000..6431bc5fc6 --- /dev/null +++ b/samples/inputs/textarea/styling/src/react-app-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/samples/inputs/textarea/styling/tsconfig.json b/samples/inputs/textarea/styling/tsconfig.json new file mode 100644 index 0000000000..8f5c3b15e4 --- /dev/null +++ b/samples/inputs/textarea/styling/tsconfig.json @@ -0,0 +1,45 @@ +{ + "compilerOptions": { + "resolveJsonModule": true, + "esModuleInterop": true, + "baseUrl": ".", + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": [ + "es6", + "dom" + ], + "sourceMap": true, + "allowJs": true, + "jsx": "react", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "noUnusedLocals": false, + "importHelpers": true, + "suppressImplicitAnyIndexErrors": true, + "allowSyntheticDefaultImports": true, + "skipLibCheck": true, + "strict": false, + "isolatedModules": true, + "noEmit": true + }, + "exclude": [ + "node_modules", + "build", + "scripts", + "acceptance-tests", + "webpack", + "jest", + "src/setupTests.ts", + "**/odatajs-4.0.0.js", + "config-overrides.js" + ], + "include": [ + "src" + ] +} From 6c26a3aa797066cc99b9e6224f541bb52302849c Mon Sep 17 00:00:00 2001 From: Ivan Kitanov Date: Thu, 6 Jun 2024 15:48:21 +0300 Subject: [PATCH 2/2] Addressing comments --- samples/inputs/textarea/form-integration/package.json | 8 ++++---- samples/inputs/textarea/overview/package.json | 8 ++++---- samples/inputs/textarea/overview/src/index.tsx | 4 ++-- samples/inputs/textarea/resize/package.json | 8 ++++---- samples/inputs/textarea/resize/src/index.tsx | 4 ++-- samples/inputs/textarea/slots/package.json | 8 ++++---- samples/inputs/textarea/slots/src/index.tsx | 4 ++-- samples/inputs/textarea/styling/package.json | 4 ++-- 8 files changed, 24 insertions(+), 24 deletions(-) diff --git a/samples/inputs/textarea/form-integration/package.json b/samples/inputs/textarea/form-integration/package.json index d11b4ecd94..4cfde522b2 100644 --- a/samples/inputs/textarea/form-integration/package.json +++ b/samples/inputs/textarea/form-integration/package.json @@ -1,6 +1,6 @@ { - "name": "react-input-overview", - "description": "This project provides example of Input Overview using Infragistics React components", + "name": "react-textarea-form-integration", + "description": "This project provides example of Text Area Form Integration using Infragistics React components", "author": "Infragistics", "homepage": ".", "version": "1.4.0", @@ -13,8 +13,8 @@ }, "dependencies": { "igniteui-dockmanager": "1.14.2", - "igniteui-react": "18.6.0", - "igniteui-react-core": "18.6.0", + "igniteui-react": "18.6.1-alpha.0", + "igniteui-react-core": "18.6.1-alpha.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "^5.0.1", diff --git a/samples/inputs/textarea/overview/package.json b/samples/inputs/textarea/overview/package.json index d11b4ecd94..4d58abb0ba 100644 --- a/samples/inputs/textarea/overview/package.json +++ b/samples/inputs/textarea/overview/package.json @@ -1,6 +1,6 @@ { - "name": "react-input-overview", - "description": "This project provides example of Input Overview using Infragistics React components", + "name": "react-textarea-overview", + "description": "This project provides example of Text Area Overview using Infragistics React components", "author": "Infragistics", "homepage": ".", "version": "1.4.0", @@ -13,8 +13,8 @@ }, "dependencies": { "igniteui-dockmanager": "1.14.2", - "igniteui-react": "18.6.0", - "igniteui-react-core": "18.6.0", + "igniteui-react": "18.6.1-alpha.0", + "igniteui-react-core": "18.6.1-alpha.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "^5.0.1", diff --git a/samples/inputs/textarea/overview/src/index.tsx b/samples/inputs/textarea/overview/src/index.tsx index 387d50306b..6420c3cbc4 100644 --- a/samples/inputs/textarea/overview/src/index.tsx +++ b/samples/inputs/textarea/overview/src/index.tsx @@ -6,7 +6,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; IgrTextareaModule.register(); -export default class InputOverview extends React.Component { +export default class TextAreaOverview extends React.Component { constructor(props: any) { super(props); @@ -23,4 +23,4 @@ export default class InputOverview extends React.Component { // rendering above class to the React DOM const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); +root.render(); diff --git a/samples/inputs/textarea/resize/package.json b/samples/inputs/textarea/resize/package.json index d11b4ecd94..7580ebd2ad 100644 --- a/samples/inputs/textarea/resize/package.json +++ b/samples/inputs/textarea/resize/package.json @@ -1,6 +1,6 @@ { - "name": "react-input-overview", - "description": "This project provides example of Input Overview using Infragistics React components", + "name": "react-textarea-resize", + "description": "This project provides example of Text Area Resize using Infragistics React components", "author": "Infragistics", "homepage": ".", "version": "1.4.0", @@ -13,8 +13,8 @@ }, "dependencies": { "igniteui-dockmanager": "1.14.2", - "igniteui-react": "18.6.0", - "igniteui-react-core": "18.6.0", + "igniteui-react": "18.6.1-alpha.0", + "igniteui-react-core": "18.6.1-alpha.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "^5.0.1", diff --git a/samples/inputs/textarea/resize/src/index.tsx b/samples/inputs/textarea/resize/src/index.tsx index 10c4ad0d23..650a0009e8 100644 --- a/samples/inputs/textarea/resize/src/index.tsx +++ b/samples/inputs/textarea/resize/src/index.tsx @@ -6,7 +6,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; IgrTextareaModule.register(); -export default class InputOverview extends React.Component { +export default class TextAreaResize extends React.Component { constructor(props: any) { super(props); @@ -31,4 +31,4 @@ export default class InputOverview extends React.Component { // rendering above class to the React DOM const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); +root.render(); diff --git a/samples/inputs/textarea/slots/package.json b/samples/inputs/textarea/slots/package.json index d11b4ecd94..9ca3176b9b 100644 --- a/samples/inputs/textarea/slots/package.json +++ b/samples/inputs/textarea/slots/package.json @@ -1,6 +1,6 @@ { - "name": "react-input-overview", - "description": "This project provides example of Input Overview using Infragistics React components", + "name": "react-textarea-slots", + "description": "This project provides example of Text Area Slots using Infragistics React components", "author": "Infragistics", "homepage": ".", "version": "1.4.0", @@ -13,8 +13,8 @@ }, "dependencies": { "igniteui-dockmanager": "1.14.2", - "igniteui-react": "18.6.0", - "igniteui-react-core": "18.6.0", + "igniteui-react": "18.6.1-alpha.0", + "igniteui-react-core": "18.6.1-alpha.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "^5.0.1", diff --git a/samples/inputs/textarea/slots/src/index.tsx b/samples/inputs/textarea/slots/src/index.tsx index 344469e19c..523cbb025d 100644 --- a/samples/inputs/textarea/slots/src/index.tsx +++ b/samples/inputs/textarea/slots/src/index.tsx @@ -7,7 +7,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; IgrTextareaModule.register(); IgrIconModule.register(); -export default class TextAreaSlot extends React.Component { +export default class TextAreaSlots extends React.Component { constructor(props: any) { super(props); @@ -41,4 +41,4 @@ export default class TextAreaSlot extends React.Component { // rendering above class to the React DOM const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); +root.render(); diff --git a/samples/inputs/textarea/styling/package.json b/samples/inputs/textarea/styling/package.json index d11b4ecd94..f0b19a1102 100644 --- a/samples/inputs/textarea/styling/package.json +++ b/samples/inputs/textarea/styling/package.json @@ -1,6 +1,6 @@ { - "name": "react-input-overview", - "description": "This project provides example of Input Overview using Infragistics React components", + "name": "react-textarea-styling", + "description": "This project provides example of Text Area Styling using Infragistics React components", "author": "Infragistics", "homepage": ".", "version": "1.4.0",