virtualvivek / react-windows-ui

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.

react-windows-ui

Build Windows native look & feel apps using ReactJS.

« Explore Project Docs »

Status

Features

• Provides Native feel Windows UI Controls.
• Comparably small CSS file size.
• Cleaner HTML.
• Works with any Routing Library.

Works with

         

Getting Started

npm install react-windows-ui

// Be sure to include styles at some point, probably during your bootstraping
import "react-windows-ui/config/app-config.css";
import "react-windows-ui/dist/react-windows-ui.min.css";
import "react-windows-ui/icons/winui-icons.min.css";

🚀 See App.js code & more »

Usage

import { Button, InputText } from "react-windows-ui";

const App = () => (
  <>
    <Button type="primary" value="Press Me" />
    <InputText placeholder="Enter a text" />
  </>
);

Run Locally

git clone https://github.com/virtualvivek/react-windows-ui.git
cd react-windows-ui
npm install
npm start

Find this project useful? ❤️

Support it by joining stargazers for this repository. ⭐

License

react-windows-ui is licensed under MIT license. View license.
Copyright (c) 2021-24 virtualvivek.

react-windows-ui's Issues

AppTheme onChange props not work

How can i fix it ?

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

File Upload input

Hi,
Is FileUpload incoming to this great lib?

Demo page error

Console shows:

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?

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

Additional Component Request

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

Report errors in vite

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)

[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

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.

React-Native Support

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

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

Can not find documentation.

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

demo page is broken

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

textarea

hello developer,

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

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.

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.

Get text from textbox programmatically

Hello,

Is there a way to get textboxes value programmatically ?

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.

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)

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 ;)

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

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

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

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;