virtualvivek / react-windows-ui Goto Github PK

Build Windows native look & feel apps using ReactJS. Provides a set of accessible, reusable and composable react components that make it super easy to create websites and apps.

Home Page: https://virtualvivek.github.io/react-windows-ui/

License: MIT License

HTML 0.12% JavaScript 88.21% CSS 3.09% SCSS 3.90% TypeScript 4.68%

reactjs windows fluent-design webapp ui-design npm-package windows-app react components react-component component-library windows-11

react-windows-ui's Issues

Not able to setup the project

I am trying to use the react windows ui repo.

I pulled the source and run commands mentioned in the file - npm-scripts.txt. But getting the following error when running "npm run deploy". I did not see any documentation on how to use this repo. Can you please help me?

PS C:\D\Learnings\ReactWindowsUI\VirtualVivek\src\react-windows-ui> npm run deploy

[email protected] predeploy C:\D\Learnings\ReactWindowsUI\VirtualVivek\src\react-windows-ui
npm run build

[email protected] build C:\D\Learnings\ReactWindowsUI\VirtualVivek\src\react-windows-ui
react-scripts build

Creating an optimized production build...
Compiled successfully.

55.23 KB build\static\js\main.d5f5a95d.chunk.js
50.36 KB build\static\js\2.9a8275ea.chunk.js
45.8 KB build\static\css\main.7d03dcc7.chunk.css
796 B build\static\js\runtime-main.e8961d18.js

The project was built assuming it is hosted at /rajendrasp/react-windows-ui/.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.

Find out more about deployment here:

https://cra.link/deployment

[email protected] deploy C:\D\Learnings\ReactWindowsUI\VirtualVivek\src\react-windows-ui
gh-pages -d build

Logon failed, use ctrl+c to cancel basic credential prompt.
remote: Permission to virtualvivek/react-windows-ui.git denied to rajendrasp.
fatal: unable to access 'https://github.com/virtualvivek/react-windows-ui.git/': The requested URL returned error: 403

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] deploy: gh-pages -d build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\rpardesh\AppData\Roaming\npm-cache_logs\2021-05-06T20_22_19_843Z-debug.log

Get text from textbox programmatically

Hello,

Is there a way to get textboxes value programmatically ?

Why not make this into a fully fledged UI framwork like Material, antd, chakra, etc

Vivek,

Your components deserve much more appreciation than they got. Thanks for making them.

Consider working a bit on the documentation part similar to the popular UIs out there. And after adding some more components soon the community will see it as a major project to use Microsoft's UI style in their project and contribute and use it actively thus more sponsors to support this project.

Hope I make sense. Thanks

P.S - Include the link to the actual docs at multiple places, In the demo itself and in the readme.md file, It's hard to find.

Report errors in vite

Hello developer,
I try using vite to complie, but reported errors form core-js/modules/web.dom-collections.iterator.js.

env

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-router-dom": "^6.3.0",
    "react-windows-ui": "^4.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "@vitejs/plugin-react": "^1.3.0",
    "vite": "^2.9.9"
  }

Error

X [ERROR] Could not resolve "core-js/modules/web.dom-collections.iterator.js" 
                                                                              
    node_modules/react-windows-ui/dist/components/Select/index.js:1:99:       
      1 │ ...ts.default=void 0,require("core-js/modules/web.dom-collections.iterator.js");var _react=_interopRequ... 
        ╵                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "core-js/modules/web.dom-collections.iterator.js" as external to exclude it
  from the bundle, which will remove this error. You can also surround this "require" call with a
  try/catch block to handle this failure at run-time instead of bundle-time.

X [ERROR] Could not resolve "core-js/modules/web.dom-collections.iterator.js" 

    node_modules/react-windows-ui/dist/components/TableView/index.js:1:99:
      1 │ ...ts.default=void 0,require("core-js/modules/web.dom-collections.iterator.js"),require("core-js/module... 
        ╵                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "core-js/modules/web.dom-collections.iterator.js" as external to exclude it
  from the bundle, which will remove this error. You can also surround this "require" call with a
  try/catch block to handle this failure at run-time instead of bundle-time.

X [ERROR] Could not resolve "core-js/modules/web.dom-collections.iterator.js"

    node_modules/react-windows-ui/dist/components/ImageView/index.js:1:99:
      1 │ ...ts.default=void 0,require("core-js/modules/web.dom-collections.iterator.js");var _react=_interopRequ... 
        ╵                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "core-js/modules/web.dom-collections.iterator.js" as external to exclude it
  from the bundle, which will remove this error. You can also surround this "require" call with a
  try/catch block to handle this failure at run-time instead of bundle-time.

X [ERROR] Could not resolve "core-js/modules/web.dom-collections.iterator.js"

    node_modules/react-windows-ui/dist/components/MenuBar/index.js:1:99:
      1 │ ...ts.default=void 0,require("core-js/modules/web.dom-collections.iterator.js"),require("core-js/module... 
        ╵                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "core-js/modules/web.dom-collections.iterator.js" as external to exclude it
  from the bundle, which will remove this error. You can also surround this "require" call with a
  try/catch block to handle this failure at run-time instead of bundle-time.

X [ERROR] Could not resolve "core-js/modules/web.dom-collections.iterator.js"

    node_modules/react-windows-ui/dist/components/InputText/index.js:1:21:
      1 │ "use strict";require("core-js/modules/web.dom-collections.iterator.js"),Object.defineProperty(exports,"... 
        ╵                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "core-js/modules/web.dom-collections.iterator.js" as external to exclude it
  from the bundle, which will remove this error. You can also surround this "require" call with a
  try/catch block to handle this failure at run-time instead of bundle-time.

X [ERROR] Could not resolve "core-js/modules/web.dom-collections.iterator.js" 

    node_modules/react-windows-ui/dist/components/AppTheme/index.js:1:21:
      1 │ "use strict";require("core-js/modules/web.dom-collections.iterator.js"),Object.defineProperty(exports,"... 
        ╵                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "core-js/modules/web.dom-collections.iterator.js" as external to exclude it
  from the bundle, which will remove this error. You can also surround this "require" call with a
  try/catch block to handle this failure at run-time instead of bundle-time.

X [ERROR] Could not resolve "core-js/modules/web.dom-collections.iterator.js"

    node_modules/react-windows-ui/dist/components/AvatarView/index.js:1:99:
      1 │ ...ts.default=void 0,require("core-js/modules/web.dom-collections.iterator.js");var _react=_interopRequ... 
        ╵                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

  You can mark the path "core-js/modules/web.dom-collections.iterator.js" as external to exclude it
  from the bundle, which will remove this error. You can also surround this "require" call with a
  try/catch block to handle this failure at run-time instead of bundle-time.

X [ERROR] Could not resolve "core-js/modules/web.dom-collections.iterator.js"

    node_modules/react-windows-ui/dist/components/NavBar/NavBar/index.js:1:99:
      1 │ ...ts.default=void 0,require("core-js/modules/web.dom-collections.iterator.js");var _react=_interopRequ... 
        ╵                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "core-js/modules/web.dom-collections.iterator.js" as external to exclude it
  from the bundle, which will remove this error. You can also surround this "require" call with a
  try/catch block to handle this failure at run-time instead of bundle-time.

X [ERROR] Could not resolve "core-js/modules/web.dom-collections.iterator.js"

    node_modules/react-windows-ui/dist/components/NavBar/NavPageContainer/index.js:1:21:
      1 │ "use strict";require("core-js/modules/web.dom-collections.iterator.js"),Object.defineProperty(exports,"... 
        ╵                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "core-js/modules/web.dom-collections.iterator.js" as external to exclude it
  from the bundle, which will remove this error. You can also surround this "require" call with a
  try/catch block to handle this failure at run-time instead of bundle-time.

X [ERROR] Could not resolve "core-js/modules/es.string.trim.js"

    node_modules/react-windows-ui/dist/components/_api/ThemeManager.js:1:99:
      1 │ ...),exports.default=void 0,require("core-js/modules/es.string.trim.js"),require("core-js/modules/es.re... 
        ╵                                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "core-js/modules/es.string.trim.js" as external to exclude it from the
  bundle, which will remove this error. You can also surround this "require" call with a try/catch
  block to handle this failure at run-time instead of bundle-time.

X [ERROR] Could not resolve "core-js/modules/es.object.assign.js" 

    node_modules/react-windows-ui/dist/components/Link/index.js:1:99:
      1 │ ...,exports.default=void 0,require("core-js/modules/es.object.assign.js");var _react=_interopRequireDef... 
        ╵                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "core-js/modules/es.object.assign.js" as external to exclude it from the
  bundle, which will remove this error. You can also surround this "require" call with a try/catch
  block to handle this failure at run-time instead of bundle-time.

X [ERROR] Could not resolve "core-js/modules/web.dom-collections.iterator.js"

    node_modules/react-windows-ui/dist/components/NavBar/NavThemeSwitcher/index.js:1:99:
      1 │ ...ts.default=void 0,require("core-js/modules/web.dom-collections.iterator.js");var _react=_interopRequ... 
        ╵                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "core-js/modules/web.dom-collections.iterator.js" as external to exclude it
  from the bundle, which will remove this error. You can also surround this "require" call with a
  try/catch block to handle this failure at run-time instead of bundle-time.

X [ERROR] Could not resolve "core-js/modules/web.dom-collections.iterator.js"

    node_modules/react-windows-ui/dist/components/ListItem/index.js:1:99:
      1 │ ...ts.default=void 0,require("core-js/modules/web.dom-collections.iterator.js");var _react=_interopRequ... 
        ╵                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "core-js/modules/web.dom-collections.iterator.js" as external to exclude it
  from the bundle, which will remove this error. You can also surround this "require" call with a
  try/catch block to handle this failure at run-time instead of bundle-time.

X [ERROR] Could not resolve "core-js/modules/web.dom-collections.iterator.js"

    node_modules/react-windows-ui/dist/components/Alert/index.js:1:21:
      1 │ "use strict";require("core-js/modules/web.dom-collections.iterator.js"),Object.defineProperty(exports,"... 
        ╵                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

  You can mark the path "core-js/modules/web.dom-collections.iterator.js" as external to exclude it
  from the bundle, which will remove this error. You can also surround this "require" call with a
  try/catch block to handle this failure at run-time instead of bundle-time.

X [ERROR] Could not resolve "core-js/modules/web.dom-collections.iterator.js"

    node_modules/react-windows-ui/dist/components/NavBar/NavSearchSuggestion/index.js:1:99:
      1 │ ...ts.default=void 0,require("core-js/modules/web.dom-collections.iterator.js"),require("core-js/module... 
        ╵                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "core-js/modules/web.dom-collections.iterator.js" as external to exclude it
  from the bundle, which will remove this error. You can also surround this "require" call with a
  try/catch block to handle this failure at run-time instead of bundle-time.

X [ERROR] Could not resolve "core-js/modules/es.regexp.to-string.js"

    node_modules/react-windows-ui/dist/components/_api/Appearance.js:1:99:
      1 │ ...xports.default=void 0,require("core-js/modules/es.regexp.to-string.js");const getColorScheme=()=>{le... 
        ╵                                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "core-js/modules/es.regexp.to-string.js" as external to exclude it from the
  bundle, which will remove this error. You can also surround this "require" call with a try/catch
  block to handle this failure at run-time instead of bundle-time.

X [ERROR] Could not resolve "core-js/modules/web.dom-collections.iterator.js" 

    node_modules/react-windows-ui/dist/components/CommandBarButton/index.js:1:99:
      1 │ ...ts.default=void 0,require("core-js/modules/web.dom-collections.iterator.js");var _react=_interopRequ... 
        ╵                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "core-js/modules/web.dom-collections.iterator.js" as external to exclude it
  from the bundle, which will remove this error. You can also surround this "require" call with a
  try/catch block to handle this failure at run-time instead of bundle-time.

X [ERROR] Could not resolve "core-js/modules/web.dom-collections.iterator.js"

    node_modules/react-windows-ui/dist/components/InputSearchSuggestion/index.js:1:99:
      1 │ ...ts.default=void 0,require("core-js/modules/web.dom-collections.iterator.js"),require("core-js/module... 
        ╵                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "core-js/modules/web.dom-collections.iterator.js" as external to exclude it
  from the bundle, which will remove this error. You can also surround this "require" call with a
  try/catch block to handle this failure at run-time instead of bundle-time.

X [ERROR] Could not resolve "core-js/modules/es.array.sort.js" 

    node_modules/react-windows-ui/dist/components/TableView/index.js:1:158:
      1 │ ...ollections.iterator.js"),require("core-js/modules/es.array.sort.js");var _react=_interopRequireWildc... 
        ╵                                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

  You can mark the path "core-js/modules/es.array.sort.js" as external to exclude it from the
  bundle, which will remove this error. You can also surround this "require" call with a try/catch
  block to handle this failure at run-time instead of bundle-time.

X [ERROR] Could not resolve "core-js/modules/es.array.includes.js"

    node_modules/react-windows-ui/dist/components/MenuBar/index.js:1:158:
      1 │ ...lections.iterator.js"),require("core-js/modules/es.array.includes.js"),require("core-js/modules/es.s... 
        ╵                                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "core-js/modules/es.array.includes.js" as external to exclude it from the
  bundle, which will remove this error. You can also surround this "require" call with a try/catch
  block to handle this failure at run-time instead of bundle-time.

X [ERROR] Could not resolve "core-js/modules/web.dom-collections.iterator.js" 

    node_modules/react-windows-ui/dist/components/ColorPicker/ColorPickerPalette/index.js:1:152:
      1 │ ...ts.default=void 0,require("core-js/modules/web.dom-collections.iterator.js");function _getRequireWil... 
        ╵                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "core-js/modules/web.dom-collections.iterator.js" as external to exclude it
  from the bundle, which will remove this error. You can also surround this "require" call with a
  try/catch block to handle this failure at run-time instead of bundle-time.

X [ERROR] Could not resolve "core-js/modules/web.dom-collections.iterator.js" 

    node_modules/react-windows-ui/dist/components/Gauge/index.js:1:151:
      1 │ ...ts.default=void 0,require("core-js/modules/web.dom-collections.iterator.js");function _interopRequir... 
        ╵                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "core-js/modules/web.dom-collections.iterator.js" as external to exclude it
  from the bundle, which will remove this error. You can also surround this "require" call with a
  try/catch block to handle this failure at run-time instead of bundle-time.

X [ERROR] Could not resolve "core-js/modules/web.dom-collections.iterator.js" 

    node_modules/react-windows-ui/dist/components/SplashScreen/index.js:1:152:
      1 │ ...ts.default=void 0,require("core-js/modules/web.dom-collections.iterator.js");function _getRequireWil... 
        ╵                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "core-js/modules/web.dom-collections.iterator.js" as external to exclude it
  from the bundle, which will remove this error. You can also surround this "require" call with a
  try/catch block to handle this failure at run-time instead of bundle-time.

X [ERROR] Could not resolve "core-js/modules/web.dom-collections.iterator.js"

    node_modules/react-windows-ui/dist/components/NavBar/NavSearchBox/index.js:1:152:
      1 │ ...ts.default=void 0,require("core-js/modules/web.dom-collections.iterator.js");function _getRequireWil... 
        ╵                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "core-js/modules/web.dom-collections.iterator.js" as external to exclude it
  from the bundle, which will remove this error. You can also surround this "require" call with a
  try/catch block to handle this failure at run-time instead of bundle-time.

X [ERROR] Could not resolve "core-js/modules/web.dom-collections.iterator.js"

    node_modules/react-windows-ui/dist/components/Accordion/index.js:1:152:
      1 │ ...ts.default=void 0,require("core-js/modules/web.dom-collections.iterator.js");function _getRequireWil... 
        ╵                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

  You can mark the path "core-js/modules/web.dom-collections.iterator.js" as external to exclude it
  from the bundle, which will remove this error. You can also surround this "require" call with a
  try/catch block to handle this failure at run-time instead of bundle-time.

X [ERROR] Could not resolve "core-js/modules/web.dom-collections.iterator.js"

    node_modules/react-windows-ui/dist/components/NavBar/NavBarSubMenu/index.js:1:152:
      1 │ ...ts.default=void 0,require("core-js/modules/web.dom-collections.iterator.js");function _getRequireWil... 
        ╵                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "core-js/modules/web.dom-collections.iterator.js" as external to exclude it
  from the bundle, which will remove this error. You can also surround this "require" call with a
  try/catch block to handle this failure at run-time instead of bundle-time.

X [ERROR] Could not resolve "core-js/modules/es.regexp.exec.js"

    node_modules/react-windows-ui/dist/components/_api/ThemeManager.js:1:144:
      1 │ ...ules/es.string.trim.js"),require("core-js/modules/es.regexp.exec.js"),require("core-js/modules/es.st... 
        ╵                                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "core-js/modules/es.regexp.exec.js" as external to exclude it from the
  bundle, which will remove this error. You can also surround this "require" call with a try/catch
  block to handle this failure at run-time instead of bundle-time.

X [ERROR] Could not resolve "core-js/modules/es.array.includes.js"

    node_modules/react-windows-ui/dist/components/NavBar/NavSearchSuggestion/index.js:1:158:
      1 │ ...lections.iterator.js"),require("core-js/modules/es.array.includes.js"),require("core-js/modules/es.s... 
        ╵                                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "core-js/modules/es.array.includes.js" as external to exclude it from the
  bundle, which will remove this error. You can also surround this "require" call with a try/catch
  block to handle this failure at run-time instead of bundle-time.

X [ERROR] Could not resolve "core-js/modules/es.array.includes.js"

    node_modules/react-windows-ui/dist/components/InputSearchSuggestion/index.js:1:158:
      1 │ ...lections.iterator.js"),require("core-js/modules/es.array.includes.js"),require("core-js/modules/es.s... 
        ╵                                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

  You can mark the path "core-js/modules/es.array.includes.js" as external to exclude it from the
  bundle, which will remove this error. You can also surround this "require" call with a try/catch
  block to handle this failure at run-time instead of bundle-time.

X [ERROR] Could not resolve "core-js/modules/es.string.includes.js"

    node_modules/react-windows-ui/dist/components/MenuBar/index.js:1:206:
      1 │ ...es.array.includes.js"),require("core-js/modules/es.string.includes.js");var _react=_interopRequireWi... 
        ╵                                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "core-js/modules/es.string.includes.js" as external to exclude it from the
  bundle, which will remove this error. You can also surround this "require" call with a try/catch
  block to handle this failure at run-time instead of bundle-time.

X [ERROR] Could not resolve "core-js/modules/es.string.replace.js" 

    node_modules/react-windows-ui/dist/components/_api/ThemeManager.js:1:189:
      1 │ ...es/es.regexp.exec.js"),require("core-js/modules/es.string.replace.js"),require("core-js/modules/es.r... 
        ╵                                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "core-js/modules/es.string.replace.js" as external to exclude it from the
  bundle, which will remove this error. You can also surround this "require" call with a try/catch
  block to handle this failure at run-time instead of bundle-time.

X [ERROR] Could not resolve "core-js/modules/es.string.includes.js"

    node_modules/react-windows-ui/dist/components/NavBar/NavSearchSuggestion/index.js:1:206:
      1 │ ...es.array.includes.js"),require("core-js/modules/es.string.includes.js");var _react=_interopRequireWi... 
        ╵                                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "core-js/modules/es.string.includes.js" as external to exclude it from the
  bundle, which will remove this error. You can also surround this "require" call with a try/catch
  block to handle this failure at run-time instead of bundle-time.

X [ERROR] Could not resolve "core-js/modules/es.string.includes.js" 

    node_modules/react-windows-ui/dist/components/InputSearchSuggestion/index.js:1:206:
      1 │ ...es.array.includes.js"),require("core-js/modules/es.string.includes.js");var _react=_interopRequireDe... 
        ╵                                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "core-js/modules/es.string.includes.js" as external to exclude it from the
  bundle, which will remove this error. You can also surround this "require" call with a try/catch
  block to handle this failure at run-time instead of bundle-time.

X [ERROR] Could not resolve "core-js/modules/es.regexp.to-string.js" 

    node_modules/react-windows-ui/dist/components/_api/ThemeManager.js:1:237:
      1 │ ...s.string.replace.js"),require("core-js/modules/es.regexp.to-string.js"),require("core-js/modules/es.... 
        ╵                                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "core-js/modules/es.regexp.to-string.js" as external to exclude it from the
  bundle, which will remove this error. You can also surround this "require" call with a try/catch
  block to handle this failure at run-time instead of bundle-time.

X [ERROR] Could not resolve "core-js/modules/es.parse-int.js" 

    node_modules/react-windows-ui/dist/components/_api/ThemeManager.js:1:287:
      1 │ .../es.regexp.to-string.js"),require("core-js/modules/es.parse-int.js");const createAlphaPrimaryColor=(... 
        ╵                                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "core-js/modules/es.parse-int.js" as external to exclude it from the bundle,
  which will remove this error. You can also surround this "require" call with a try/catch block to
  handle this failure at run-time instead of bundle-time.

10:19:57 [vite] error while updating dependencies: 
Error: Build failed with 35 errors:
node_modules/react-windows-ui/dist/components/Accordion/index.js:1:152: ERROR: Could not resolve "core-js/modules/web
.dom-collections.iterator.js"
node_modules/react-windows-ui/dist/components/Alert/index.js:1:21: ERROR: Could not resolve "core-js/modules/web.dom-
collections.iterator.js"
node_modules/react-windows-ui/dist/components/AppTheme/index.js:1:21: ERROR: Could not resolve "core-js/modules/web.d
om-collections.iterator.js"
node_modules/react-windows-ui/dist/components/AvatarView/index.js:1:99: ERROR: Could not resolve "core-js/modules/web
.dom-collections.iterator.js"
node_modules/react-windows-ui/dist/components/ColorPicker/ColorPickerPalette/index.js:1:152: ERROR: Could not resolve
 "core-js/modules/web.dom-collections.iterator.js"
...
    at failureErrorWithLog (D:\Gitlab\mccl\frontend\node_modules\esbuild\lib\main.js:1624:15)
    at D:\Gitlab\mccl\frontend\node_modules\esbuild\lib\main.js:1266:28
    at runOnEndCallbacks (D:\Gitlab\mccl\frontend\node_modules\esbuild\lib\main.js:1046:63)
    at buildResponseToResult (D:\Gitlab\mccl\frontend\node_modules\esbuild\lib\main.js:1264:7)
    at D:\Gitlab\mccl\frontend\node_modules\esbuild\lib\main.js:1377:14
    at D:\Gitlab\mccl\frontend\node_modules\esbuild\lib\main.js:678:9
    at handleIncomingPacket (D:\Gitlab\mccl\frontend\node_modules\esbuild\lib\main.js:775:9)
    at Socket.readFromStdout (D:\Gitlab\mccl\frontend\node_modules\esbuild\lib\main.js:644:7)
    at Socket.emit (node:events:520:28)
    at addChunk (node:internal/streams/readable:315:12)

JS code to manipulate components

Hello,
I created a React application with this template and noticed that there was no documentation on component manipulation (eg. retrieving text from a text box) in JS. Could you help me ?
Thank you in advance ;)

Interoperability with other library - way to check which theme is in use

Hi,
As i saw ThemeManger is only setting given color in dom. Maybe there should be callback when it happen?

Can not find documentation.

I am looking to use it in my upcoming CRM projects. But I can't find the documentation for it.

CommandBar

I think that having CommandBar like in Fluent library will be great addition to this set of components.

https://developer.microsoft.com/en-us/fluentui#/controls/web/commandbar

I really like this library, but I found that I miss CommandBar.

Will there be context menu support?

Your ui library is beautiful and comfortable to use. I'm planning to use your library to make a home page for my own use. It has every component I need except the context menu, so I take the liberty to ask if there are plans to support a context menu component, and if so I'm very much looking forward to it.

Additional Component Request

any plan to support more components like the one below?
https://ant.design/components/transfer

add key support and pagination to TableView

Please i get this error when trying to load table with data from api... the table renders successfully but i get error on console :

act_devtools_backend.js:2655 Warning: Encountered two children with the same key, `9`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

see attached screen shot

here's my code:

import React, { useEffect, useState } from "react";
import { LoaderBusy, NavPageContainer, TableView } from "react-windows-ui";
import ApiEndpoints from "../../utils/api-endpoints";
import ApiService from "../../services/api-service";

const Users = () => {
 const [usersList, setUsersList] = useState([]);
 const [isLoading, setIsLoading] = useState(true);

 useEffect(() => {
   // Call the API service to get the message
   ApiService.apiCall({ endpoint: ApiEndpoints.getUsers, secured: true }).then((response) => {
     if (response.success) {
       setUsersList(response.data.data);
     }
     setIsLoading(false);
   });
 }, []);

 if (isLoading) {
   return <NavPageContainer hasPadding={true} animateTransition={true}>
     <div className="centered">
       <LoaderBusy isLoading={true} />
     </div>
   </NavPageContainer>
 }
 else {
   return (
     <NavPageContainer hasPadding={true} animateTransition={true}>
       <h1>Users</h1>
       <TableView
         columns={Object.keys(usersList[0]).map((key) => ({
           title: key,
           showSortIcon: true,
           sortable: true,
         }))}
         rows={usersList.map((user) => Object.values(user))}
       />
     </NavPageContainer>
   );
 }
};

export default Users;

Missing exports for Appearance.js

Right not, src/lib/src/api/Appearance.js is not exported and cannot be used with import { Appearance } from "react-windows-ui"; as reported in the documentation.

Importing it with import Appearance from "react-windows-ui/dist/api/Appearance"; works just fine.

I'm using version 4.2.2 from npm

Vite Support

Can I use it in vite？

There are no type definitions available for use with typescript

I would like to use these components in a typescript / react project.
(I will do a fork later this week and create the definitions myself)

React-Native Support

The library is fascinating, but is it possible to integrate it with the react-native project for desktop?

demo page is broken

https://virtualvivek.github.io/react-windows-ui/#/

Demo page error

Console shows:

AppTheme onChange props not work

How can i fix it ?

  <AppTheme
        scheme={"light"}
        onColorChange={() => {alert("as")}}
        onSchemeChange={() => {alert("asa")}}
    />

npx create-react-app report errors

Hello developer,

I'm a new in the react and while using templates, I got many errors.

env

nodejs:16.14.0
npm/npx:8.6.0
os:windows10

output

init:

$ npx create-react-app smireact --template windows-ui
npm WARN exec The following package was not found and will be installed: create-react-app
npm WARN deprecated [email protected]: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.

Creating a new React app in D:\GitHub\smireact.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template-windows-ui...


added 1395 packages in 3m

Initialized a git repository.

Installing template dependencies using npm...
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.1" from [email protected]
npm ERR! node_modules/react-windows-ui
npm ERR!   react-windows-ui@"^4.1.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\xxxxxxxx\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\xxxxxxxxx\AppData\Local\npm-cache\_logs\2022-08-11T14_42_58_602Z-debug-0.log
`npm install --no-audit --save react-windows-ui@^4.1.0 react-router-dom@^6.3.0 web-vitals@^2.1.4` failed

start:

$ npm start

> [email protected] start
> react-scripts start

(node:9092) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:9092) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...

Failed to compile.

Module not found: Error: Can't resolve 'react-router-dom' in 'D:\GitHub\smireact\src'
ERROR in ./src/App.js 7:0-74
Module not found: Error: Can't resolve 'react-router-dom' in 'D:\GitHub\smireact\src'

ERROR in ./src/App.js 8:0-117
Module not found: Error: Can't resolve 'react-windows-ui' in 'D:\GitHub\smireact\src'

ERROR in ./src/index.js 6:0-48
Module not found: Error: Can't resolve 'react-windows-ui/config/app-config.css' in 'D:\GitHub\smireact\src'

ERROR in ./src/index.js 7:0-56
Module not found: Error: Can't resolve 'react-windows-ui/dist/react-windows-ui.min.css' in 'D:\GitHub\smireact\src'

ERROR in ./src/index.js 8:0-52
Module not found: Error: Can't resolve 'react-windows-ui/icons/fonts/fonts.min.css' in 'D:\GitHub\smireact\src'

ERROR in ./src/pages/page0/index.js 5:0-52
Module not found: Error: Can't resolve 'react-windows-ui' in 'D:\GitHub\smireact\src\pages\page0'

ERROR in ./src/pages/page1/index.js 5:0-58
Module not found: Error: Can't resolve 'react-windows-ui' in 'D:\GitHub\smireact\src\pages\page1'

ERROR in ./src/pages/page2/index.js 5:0-104
Module not found: Error: Can't resolve 'react-windows-ui' in 'D:\GitHub\smireact\src\pages\page2'

webpack compiled with 8 errors

How to resolve it? pls

[Feature] Add this beautiful hover effect

It would be really nice to have this nice hover effect over the buttons. Without it, it doesn't really feel like Windows.

Example: https://codepen.io/21stCenturyJonas/pen/gQGXdd

textarea

hello developer,

I find the textinput cannot be multi-line. Could you add a textarea?
thanks a lot!

File Upload input

Hi,
Is FileUpload incoming to this great lib?

Some components are missed

1: grid layout (row, col)
2: multi level menu in side bar
3: drop-down menu
4: react-select
5: option menu

The mentioned components will rise up of the betterment of template

NavBar customization

Hi,
I'm Andrea. First of all congratulations for the great work!

I would like to ask you if there is any way to hide the Light/Dark switch on the NavBar without modify your code.
Is there any way to open the NavBar in "mobile mode" (icons only) when the page is opened?

Thank You
Andrea

Question on license and permissible usage

I am DevOps engineer for a small company that makes VTOL drones.
I am thinking I wanted to use this framework for creating a site that allows download and deployment of our embedded software to our drones.
I understand such a usage as covered by the MIT license.
Can you please let me know if there is something else I need to cover to begin to use your software.

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.

Jobs

Jooble