search

supabase / ui

Supabase UI Library
ui-storybook-pre-release.vercel.app
MIT License
1.57k stars 151 forks source link

feat: InputNumber styled arrows #152

Closed MildTomato closed 3 years ago

MildTomato commented 3 years ago

Feature request

Is your feature request related to a problem? Please describe.

Update InputNumber to have styled increment toggles rather than using native browser controls

antdesign image

chakra image

ghost commented 3 years ago

I wanted to work on this enhancement, but storybook isn't loading any stylesheets. Could you point where I would be going wrong?

git clone https://github.com/supabase/ui.git
cd ui
npm install
npm run storybook

image

MildTomato commented 3 years ago

@harshcut that looks strange. I can try and recreate it and see what the issue is. there's some npm errors relating to postcss that might be causing this, which i'm trying to fix now.

in the meantime can you confirm the following, as it might help isolate the issue:

what version of node are you running? run node -v

run npm list and get the following:

ghost commented 3 years ago
npm list ```shell PS D:\Projects\ui> npm list ├── @babel/cli@7.13.14 ├── @babel/core@7.13.14 ├── @babel/plugin-transform-runtime@7.13.10 ├── @babel/preset-env@7.13.12 ├── @babel/preset-react@7.13.13 ├── @babel/runtime@7.13.10 ├── @rollup/plugin-babel@5.3.0 ├── @rollup/plugin-commonjs@17.1.0 ├── @rollup/plugin-node-resolve@11.2.1 ├── @storybook/addon-actions@6.2.1 ├── @storybook/addon-essentials@6.2.1 ├── @storybook/addon-links@6.2.1 ├── @storybook/react@6.2.1 ├── @supabase/supabase-js@1.7.7 ├── @tailwindcss/forms@0.2.1 ├── @tailwindcss/typography@0.3.1 ├── @tailwindcssinjs/macro@0.10.0 ├── @testing-library/jest-dom@5.11.10 ├── @testing-library/react@11.2.6 ├── @testing-library/user-event@12.8.3 ├── autoprefixer@9.8.6 ├── babel-eslint@10.1.0 ├── babel-loader@8.2.2 ├── babel-plugin-add-react-displayname@0.0.5 ├── babel-plugin-macros@2.8.0 ├── css-loader@5.2.0 ├── eslint-config-prettier@6.15.0 ├── eslint-plugin-prettier@3.3.1 ├── lodash@4.17.21 ├── npm-run-all@4.1.5 ├── postcss-import@12.0.1 ├── postcss-modules-values@4.0.0 ├── postcss-preset-env@6.7.0 ├── postcss@7.0.35 ├── prettier@2.2.1 ├── prop-types@15.7.2 ├── react-dom@17.0.2 ├── react-feather@2.0.9 ├── react-markdown@5.0.3 ├── react-transition-group@4.4.1 ├── react@17.0.2 ├── remark-gfm@1.0.0 ├── rollup-plugin-delete@2.0.0 ├── rollup-plugin-node-externals@2.2.0 ├── rollup-plugin-peer-deps-external@2.2.4 ├── rollup-plugin-postcss-modules@2.0.2 ├── rollup-plugin-typescript2@0.29.0 ├── rollup@2.44.0 ├── storybook-dark-mode@1.0.7 ├── tailwindcss@npm:@tailwindcss/postcss7-compat@2.0.4 ├── typedoc@0.19.2 └── typescript@4.2.3 PS D:\Projects\ui> node -v v14.16.0 ```
MildTomato commented 3 years ago

@harshcut You might have more luck now on the master branch. There did seem to be an error with PostCSS, which might have caused the issue with tailwind not generating css.

ghost commented 3 years ago

I tried npm install and it resulted in an node-gyp error (which hasn't happened before), so I installed it using yarn (using yarn import) but it still won't generate css.

P.S. Even after npm install success, storybook won't load css.

npm install (error) ``` PS C:\Users\Admin\Desktop\ui> npm install npm ERR! code 1 npm ERR! path C:\Users\Admin\Desktop\ui\node_modules\bufferutil npm ERR! command failed npm ERR! command C:\Windows\system32\cmd.exe /d /s /c node-gyp rebuild npm ERR! gyp info it worked if it ends with ok npm ERR! gyp info using node-gyp@7.1.2 npm ERR! gyp info using node@14.16.0 | win32 | x64 npm ERR! gyp ERR! find Python npm ERR! gyp ERR! find Python Python is not set from command line or npm configuration npm ERR! gyp ERR! find Python Python is not set from environment variable PYTHON npm ERR! gyp ERR! find Python checking if "python3" can be used npm ERR! gyp ERR! find Python - "python3" is not in PATH or produced an error npm ERR! gyp ERR! find Python checking if "python" can be used npm ERR! gyp ERR! find Python - "python" is not in PATH or produced an error npm ERR! gyp ERR! find Python checking if "python2" can be used npm ERR! gyp ERR! find Python - "python2" is not in PATH or produced an error npm ERR! gyp ERR! find Python checking if Python is C:\Python37\python.exe npm ERR! gyp ERR! find Python - "C:\Python37\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Python27\python.exe npm ERR! gyp ERR! find Python - "C:\Python27\python.exe" could not be run npm ERR! gyp ERR! find Python checking if the py launcher can be used to find Python npm ERR! gyp ERR! find Python - "py.exe" is not in PATH or produced an error npm ERR! gyp ERR! find Python npm ERR! gyp ERR! find Python ********************************************************** npm ERR! gyp ERR! find Python You need to install the latest version of Python. npm ERR! gyp ERR! find Python Node-gyp should be able to find and use Python. If not, npm ERR! gyp ERR! find Python you can try one of the following options: npm ERR! gyp ERR! find Python - Use the switch --python="C:\Path\To\python.exe" npm ERR! gyp ERR! find Python (accepted by both node-gyp and npm) npm ERR! gyp ERR! find Python - Set the environment variable PYTHON npm ERR! gyp ERR! find Python - Set the npm configuration variable python: npm ERR! gyp ERR! find Python npm config set python "C:\Path\To\python.exe" npm ERR! gyp ERR! find Python For more information consult the documentation at: npm ERR! gyp ERR! find Python https://github.com/nodejs/node-gyp#installation npm ERR! gyp ERR! find Python ********************************************************** npm ERR! gyp ERR! find Python npm ERR! gyp ERR! configure error npm ERR! gyp ERR! stack Error: Could not find any Python installation to use npm ERR! gyp ERR! stack at PythonFinder.fail (C:\Users\Admin\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\find-python.js:302:47) npm ERR! gyp ERR! stack at PythonFinder.runChecks (C:\Users\Admin\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\find-python.js:136:21) npm ERR! gyp ERR! stack at PythonFinder. (C:\Users\Admin\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\find-python.js:200:18) npm ERR! gyp ERR! stack at PythonFinder.execFileCallback (C:\Users\Admin\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\find-python.js:266:16) npm ERR! gyp ERR! stack at exithandler (child_process.js:315:5) npm ERR! gyp ERR! stack at ChildProcess.errorhandler (child_process.js:327:5) npm ERR! gyp ERR! stack at ChildProcess.emit (events.js:315:20) npm ERR! gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12) npm ERR! gyp ERR! stack at onErrorNT (internal/child_process.js:465:16) npm ERR! gyp ERR! stack at processTicksAndRejections (internal/process/task_queues.js:80:21) npm ERR! gyp ERR! System Windows_NT 10.0.19042 npm ERR! gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\Admin\\AppData\\Roaming\\npm\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" npm ERR! gyp ERR! cwd C:\Users\Admin\Desktop\ui\node_modules\bufferutil npm ERR! gyp ERR! node -v v14.16.0 npm ERR! gyp ERR! node-gyp -v v7.1.2 npm ERR! gyp ERR! not ok npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Admin\AppData\Local\npm-cache\_logs\2021-04-06T09_32_54_186Z-debug.log ```
how to install using yarn? ``` yarn import rm package-lock.json yarn yarn storybook ```
MildTomato commented 3 years ago

@harshcut just to make sure we've tried this. Have you tried deleting package-lock.json and the ui/node-modules folder before running npm install ?

YashKandalkar commented 3 years ago

image

I have the same issue, css styles aren't applied to components in storybook. Did a fresh install. node -v: v15.12.0

npm list:
``` @supabase/ui@0.1.3 D:\ui +-- @babel/cli@7.13.14 +-- @babel/core@7.13.14 +-- @babel/plugin-transform-runtime@7.13.10 +-- @babel/preset-env@7.13.12 +-- @babel/preset-react@7.13.13 +-- @babel/runtime@7.13.10 +-- @rollup/plugin-babel@5.3.0 +-- @rollup/plugin-commonjs@17.1.0 +-- @rollup/plugin-node-resolve@11.2.1 +-- @storybook/addon-actions@6.2.2 +-- @storybook/addon-essentials@6.2.2 +-- @storybook/addon-links@6.2.2 +-- @storybook/react@6.2.2 +-- @supabase/supabase-js@1.7.7 +-- @tailwindcss/forms@0.2.1 +-- @tailwindcss/typography@0.3.1 +-- @testing-library/jest-dom@5.11.10 +-- @testing-library/react@11.2.6 +-- @testing-library/user-event@12.8.3 +-- autoprefixer@9.8.6 +-- babel-eslint@10.1.0 +-- babel-loader@8.2.2 +-- babel-plugin-add-react-displayname@0.0.5 +-- babel-plugin-macros@2.8.0 +-- css-loader@5.2.0 +-- eslint-config-prettier@6.15.0 +-- eslint-plugin-prettier@3.3.1 +-- lodash@4.17.21 +-- npm-run-all@4.1.5 +-- postcss-import@12.0.1 +-- postcss-modules-values@4.0.0 +-- postcss-preset-env@6.7.0 +-- postcss@7.0.35 +-- prettier@2.2.1 +-- prop-types@15.7.2 +-- react-dom@17.0.2 +-- react-feather@2.0.9 +-- react-markdown@5.0.3 +-- react-transition-group@4.4.1 +-- react@17.0.2 +-- remark-gfm@1.0.0 +-- rollup-plugin-delete@2.0.0 +-- rollup-plugin-node-externals@2.2.0 +-- rollup-plugin-peer-deps-external@2.2.4 +-- rollup-plugin-postcss-modules@2.0.2 +-- rollup-plugin-typescript2@0.29.0 +-- rollup@2.44.0 +-- storybook-dark-mode@1.0.7 +-- tailwindcss@npm:@tailwindcss/postcss7-compat@2.0.4 +-- typedoc@0.19.2 `-- typescript@4.2.3 ```

Version of react: 17.0.2 Version of react-dom: 17.0.2 Version of tailwindcss: tailwindcss@npm:@tailwindcss/postcss7-compat@2.0.4 Version of postcss: 7.0.35 Version of @storybook/react: 6.2.2

ghost commented 3 years ago

@harshcut just to make sure we've tried this. Have you tried deleting package-lock.json and the ui/node-modules folder before running npm install ?

Yes @MildTomato, I removed package-lock.json and node_modules from the root directory. This time npm install resulted in a upstream dependency conflict (logs below). After adding --legacy-peer-deps it installed but didn't generate the styles.

git clone https://github.com/supabase/ui.git
cd ui
rm package-lock.json
npm install --legacy-peer-deps
npm run storybook
Upstream Dependency Conflict ``` PS C:\Users\Admin\Desktop\ui> npm install npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: @supabase/ui@0.1.3 npm ERR! Found: postcss@7.0.35 npm ERR! node_modules/postcss npm ERR! dev postcss@"^7.0.35" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer postcss@"^8.1.0" from postcss-modules-values@4.0.0 npm ERR! node_modules/postcss-modules-values npm ERR! dev postcss-modules-values@"^4.0.0" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See C:\Users\Admin\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\Admin\AppData\Local\npm-cache\_logs\2021-04-09T13_23_13_467Z-debug.log ```
MildTomato commented 3 years ago

Not sure what is causing this yet - I'm still trying to replicate the issue myself.

If anyone knows what is causing this and has a fix, a PR would be amazing.

ghost commented 3 years ago

Hey @Iamshankhadeep, it would be helpful if you could provide us your system information and the steps you did take to run this project on your local machine. I am having a problem with storybook not loading the styles.

Iamshankhadeep commented 3 years ago

Hey @Iamshankhadeep, it would be helpful if you could provide us your system information and the steps you did take to run this project on your local machine. I am having a problem with storybook not loading the styles.

  • Operating System
  • Version of npm
  • Version of node

Linux, npm v6.14.13 and node v14.15.5