Skip to content

Commit

Permalink
Merge pull request #650 from IgniteUI/ikitanov/divider-samples-#1369
Browse files Browse the repository at this point in the history
Adding Divider Samples
  • Loading branch information
kacheshmarova authored Sep 16, 2024
2 parents 484ef68 + a5033af commit 7133249
Show file tree
Hide file tree
Showing 45 changed files with 1,365 additions and 0 deletions.
75 changes: 75 additions & 0 deletions samples/layouts/divider/base/.eslintrc.js
Original file line number Diff line number Diff line change
@@ -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"
}
}
]
};
56 changes: 56 additions & 0 deletions samples/layouts/divider/base/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<!-- NOTE: do not change this file because it's auto re-generated from template: -->
<!-- https://github.com/IgniteUI/igniteui-react-examples/tree/vnext/templates/sample/ReadMe.md -->

This folder contains implementation of React application with example of Icon feature using [Avatar](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component.


<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<body>
<a target="_blank" href="https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html" rel="noopener noreferrer">
<img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-docs.png"/>
</a>
<a target="_blank" href="./src/index.tsx" rel="noopener noreferrer">
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
</a>
<a target="_blank" href="https://www.infragistics.com/react-demos/samples/layouts/avatar/icon" rel="noopener noreferrer">
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
</a>
<a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-react-examples/tree/master/samples/layouts/avatar/icon?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/index.tsx" rel="noopener noreferrer">
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
</a>
</body>
</html>

## 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/layouts/avatar/icon
```

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).
38 changes: 38 additions & 0 deletions samples/layouts/divider/base/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
{
"name": "react-date-picker-overview",
"description": "This project provides example of Date Picker 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.3",
"igniteui-react": "18.7.0",
"igniteui-react-core": "18.7.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"
]
}
10 changes: 10 additions & 0 deletions samples/layouts/divider/base/public/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>DividerBase</title>
<link href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" rel="stylesheet" />
</head>
<body>
<div id="root"></div>
</body>
</html>
5 changes: 5 additions & 0 deletions samples/layouts/divider/base/sandbox.config.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"infiniteLoopProtection": false,
"hardReloadOnChange": false,
"view": "browser"
}
Empty file.
28 changes: 28 additions & 0 deletions samples/layouts/divider/base/src/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrDividerModule, IgrDivider } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrDividerModule.register();

export default class DividerBase extends React.Component<any, any> {

constructor(props: any) {
super(props);
}

public render(): JSX.Element {
return (
<div className="container sample">
<p>First paragraph</p>
<IgrDivider key="divider"></IgrDivider>
<p>Second paragraph</p>
</div>
);
}
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<DividerBase />);
1 change: 1 addition & 0 deletions samples/layouts/divider/base/src/react-app-env.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/// <reference types="react-scripts" />
45 changes: 45 additions & 0 deletions samples/layouts/divider/base/tsconfig.json
Original file line number Diff line number Diff line change
@@ -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-jsx",
"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"
]
}
75 changes: 75 additions & 0 deletions samples/layouts/divider/dashed/.eslintrc.js
Original file line number Diff line number Diff line change
@@ -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"
}
}
]
};
Loading

0 comments on commit 7133249

Please sign in to comment.