estevanmaito / windmill-react-ui Goto Github PK
View Code? Open in Web Editor NEW🧩 The component library for fast and accessible development of gorgeous interfaces.
Home Page: https://windmillui.com/react-ui
License: MIT License
🧩 The component library for fast and accessible development of gorgeous interfaces.
Home Page: https://windmillui.com/react-ui
License: MIT License
When I use this cofig I always get this error:
const windmill = require("@windmill/react-ui/config");
module.exports = windmill({
purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
theme: {
extend: {},
},
variants: {},
plugins: [],
});
Error:
./src/assets/dist/main.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/assets/dist/main.css)
TypeError: value.charCodeAt is not a function
When I use this cofig, I don´t get this error:
module.exports = {
purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
Is your feature request related to a problem? Please describe.
I would like @windmill/react-ui package to be supported in applications that are using tailwindcss v3 or above.
Describe the solution you'd like
With the current configuration, I see how windmill wrapper for config uses purge and not content. In order to use it with tailwindcss v3, I guess some changes will be required.
Describe alternatives you've considered
Not really at the moment.
Additional context
Meu, que massssssaaaa, tá show, nota dez.
Minha sugestão é fazer um boilerplate para web pages ou landing pages, que todo mundo vai utilizar.
Tem um cara muito legal que fez um milhao de exemplos grátis aqui: https://treact.owaiskhan.me/
Layouts de w-full ou centralizados, com colunas, ficaria muito massa.
Quando descer a serra te pago o almoço aqui em IVOTI-RS.
windmill-react-ui
version: 0.1.0-alpha.8
import React from 'react'
import '../css/tailwind.css'
import { Windmill } from 'windmill-react-ui'
function MyApp({ Component, pageProps }) {
return (
<Windmill>
<Component {...pageProps} />
</Windmill>
)
}
export default MyApp
Rendered Windmill
component with NextJS
Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://fb.me/react-uselayouteffect-ssr for common fixes.
Docs repo of this project (not available yet)
It would be nice to have a Input with fixed Text like this:
Bootstrap has this -> https://getbootstrap.com/docs/4.5/components/input-group/
windmill-react-ui
version: 0.5.0I updated the windmill-ui package on windmill-dashboard-react.
Components are not being animated on entrance.
It looks like modal and sidebar entrance is not animated as they should be, there's also no transition on the docs when you open the modal:
https://windmillui.com/react-ui/components/modal
Looks like downgrading back to 0.3.1 solves the issue.
Currently having trouble changing the styling to components. I've read the documentation for the windmill react ui repo but when it comes to changing colors would this need to happen in the myTheme.js file or in the tailwind.output.css file.
In the Customization
section of the documentation, the link(s) to the default theme are outdated (they point to default.js
instead of default.ts
).
Also, unless I'm doing it incorrectly, the note about importing the default theme is unclear:
You can reference it in your code importing the default theme
windmill-react-ui/defaultTheme.
I had to import it like so:
import defaultTheme from '@windmill/react-ui/lib/defaultTheme';
Thanks for the great work on this library!
The reports of my death were greatly exaggerated
TL;DR What is the recommended React Testing Library way to test this?
I successfully upgraded Tailwind (to v3) and React (to v18), but there's a problem: contrary to this library, Enzyme is dead and a move to React Testing Library is unavoidable. That's not a bad thing, RTL is better, but this project was setup using a different philosophy.
Testing like this is discouraged using RTL:
it('should render with large styles', () => {
const expected = 'w-10 h-10'
const wrapper = mount(<Avatar src="test" size="large" />)
expect(wrapper.find(Avatar).getDOMNode().getAttribute('class')).toContain(expected)
})
A WIP branch is available here if you want to try something, as I had to create my own version of jest-svg-transformer
: master...wip-upgrade
There, you'll find that Avatar
was already converted to RTL, while Alert
is broken and Backdrop
is still WIP.
May be the wrong place to post this, but it would be good to reinstate the website..
windmill-react-ui
version: 0.4.1Updated Windmill to the lastest version (with Typescript)
I'm deploying my NextJS project on Vercel and I'm receiving an error on build that says Type error: Cannot find name 'Mode'. Seems that the index.d.ts from types folder is not loading on my project or something like that, (sorry if I'm wrong, I started to use Typescript not a long time ago). My Visual Studio Code shows the following message on @windmill/react-ui import:
Could not find a declaration file for module '@windmill/react-ui'. 'c:/Users/toeof/Documents/React Projects/repair-service/frontend-next/node_modules/@windmill/react-ui/dist/index.js' implicitly has an 'any' type.
Trynpm install @types/windmill__react-ui
if it exists or add a new declaration (.d.ts) file containingdeclare module '@windmill/react-ui';
Tailwind-custom-froms breaks on TailwindCSS v2 and people are switching to official forms plugin. If anyone seeing "value.charCodeAt" error, this might be the reason.
Describe the solution you'd like
It would be very useful to have a built in drawer component. The drawer can be configured to appear from the right, left, top, bottom. The Size should also be configurable (small, medium, large)
import { Alert } from '@windmill/react-ui'
try it in both ways...
<Alert type="success" onClose={() => { console.log('Close clicked'); }} message={"error"} />
<Alert type="success">Lorem ipsum dolor sit</Alert>
version "@windmill/react-ui": "0.3.1",
Is your feature request related to a problem? Please describe.
As of now, there is no TypeScript support.
Describe the solution you'd like
Would you consider a pull request with typings written for each component?
For ModalHeader component, it would be good to have an option to place the contents within the <header>
tag of the Modal, currently, it places contents below it which may not be ideal when it comes to space effeicency. For placing within header, apply justify-between
to it so that the header text will be on left and close button on right hand side.
export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
/**
* Function executed when the dropdown is closed
*/
onClose: () => void
/**
* Defines if the modal is open
*/
isOpen: boolean
/**
* Defines custom child contents to place into header tag of Modal
*/
header?: React.ReactChild
}
<header className="flex justify-between">
<div>{props.header}</div>
<button
className="inline-flex items-center justify-center w-6 h-6 text-gray-400 transition-colors duration-150 rounded dark:hover:text-gray-200 hover: hover:text-gray-700"
aria-label="close"
onClick={onClose}
>
windmill-react-ui
version: 0.1.0-alpha.8
The current link Buttons, on dark themes, render the light styles when hovered/active
Add dark:
styles.
windmill-react-ui
version: ^0.5.1
tailwindcss
version: ^2.0.4
_app.tsx
import React from 'react'
import { AppProps } from 'next/app'
import { Windmill } from '@windmill/react-ui'
import '../styles/globals.css'
const MyApp: React.FC<AppProps> = ({ Component, pageProps }) => {
return (
<Windmill dark>
<Component {...pageProps} />
</Windmill>
)
}
export default MyApp
I installed and setup the project as instructed in the docs, but passing the dark
option does not make my application dark. (background still white)
Because of the bug reported here: #3 (comment)
I unfortunately can't use the dark theme provided by Windmill. Is there any plans to add support for nextjs?
Hello, I just came across this awesome UI library. The UI looks very clean and modern. So I want to use this for a project of mine. but I'll need to develop a few custom components, which are specific to my project. Later on, if I get the time I'm considering opening a PR and adding those to this library as well.
Is there any design project/ file that you can provide, with the existing components and layouts built-in ? that would be really helpful since I can do my modifications on top of that, and that way everything will be consistent.
Hello there! Nice project 👍
Any plans to support tailwind 2.0 in the near future?
hello @estevanmaito , im using the pagination component and I discover that onChange funtion is ejecuted on the first render, that's wrong because, onChange function only should be ejecuted when the page is changed, so, I was thinking and I found a problem in the useEffect that handle this function, the problem is that useEffect always will be ejecuted on first render , even if you don't change the state, so my proposal is create a reference using useRef , with that , useEffect will know when the component is rendered for first time.
windmill-react-ui/src/Pagination.tsx
Line 158 in fba3fb0
windmill-react-ui
version: 0.4.1I am trying to use this library with react 17.0.1 and Dropdown does not work. On click on the dropdown menu it close automatically.
I must to downgrade to react 16.14.0 and it work ok.
There havn't been any updates for entire year...
Prioritize atomic components to add when we get out of alpha.
Image cards with aspect-ratio option.
Add styled variants for h*
headings, display headings, normal paragraph, <code>
, anchor.
Different components, but very close in implementation.
(added on 0.4.0)
Don't leave the choice to make it inaccessible. An alert component, composed of a message, icon (danger, warning, success, etc), and a close button. Don't confuse with notifications.
<Alert type="danger" message={message} onClose={onClose} />
File and date picker.
Button with dropdown. the foundation already exists:
<Button layout="dropdown">
<span>Click here</span>
<Dropdown>
<DropdownItem>Item 1</DropdownItem>
<DropdownItem>Item 2</DropdownItem>
</Dropdown>
</Button>
Header, Sidebar, Footer, Navigation.
I don't see a case for touching layout with components, like columns, rows, etc.
Is your feature request related to a problem? Please describe.
Thanks for building something so awesome! Please build a dateTime picker and Tabs component.
Describe the solution you'd like
A component to pick time /date/DateTime & Tabs
Describe alternatives you've considered
Currently, have to use other library for it which doesnt suit the tailwind design
Is there a way to change the purple 600 to a blue or some other color?
Make a left click on a text inside of the modal and do not release the click. Move the mouse outside the modal, then the modal is closed, instead of remaining opened.
-->
Remove the onMouseRelease event on the drawer and only fire the closing event of the modal, when the drawer is clicked
I wanna see the source code of doc, i like the style you doc.
Is your feature request related to a problem? Please describe.
Not related to any problem but could be a usefull featuer. There are cases where users needs to programmatically change the active page number, eg. when searching, the page should change to first page. I have already a merge request prepared.
Describe the solution you'd like
Add support to programmatically change active page for Pagination.
windmill-react-ui
version: 0.5.0<Select
className="relative flex items-center h-10 py-2 text-base text-black border border-gray-300 w-100"
name="campaignType"
onChange={handleCampaignTypeChange}
>
<option value={undefined}>{t('allCampaigns')}</option>
</Select>
When using an option
tag with value undefined
, it is not captured in the onChange
handler of <Select>
.
Instead, the actual content of the option
tag is passed to the <Select>
.
When using an actual truthy value as option
value, it is passed on correctly.
In the example code, using a fallback value of undefined
is necessary though, since undefined
will be used as a query param and only ignored as actual undefined
.
Is your feature request related to a problem? Please describe.
I am not able to load the next x data set via pagination as it is useful if there are large data in the database and I can load data in chunks instead of the complete dataset.
Describe the solution you'd like
A next data and prev data set button that on click will execute a user-defined function to request fresh data it should be optional but very useful.
Additional context
can be passed as functional props to component.
Run <TableFooter>
within <Table>
.
index.js:1 Warning: validateDOMNesting(...): <div> cannot appear as a child of <tfoot>.
at div
at http://localhost:3000/static/js/vendors~main.chunk.js:4627:21
at tfoot
at table
at div
at http://localhost:3000/static/js/vendors~main.chunk.js:4340:21
at div
Use <tfoot>
element instead of plain div element for TableFooter component.
There are a bunch of issues which are not resolved for few months, is this library still maintained ?
windmill-react-ui
version: 0.6.0
tailwindcss
version: 3.0.24
remix
version: 1.4.0
tailwind.config.js
/* eslint unicorn/prefer-module: off, @typescript-eslint/no-var-requires: off */
const defaultTheme = require('tailwindcss/defaultTheme')
const windmill = require('@windmill/react-ui/config')
/**
* @type {import('tailwindcss').Config}
*/
module.exports = windmill({
mode: 'jit',
content: ['./app/**/*.{js,ts,jsx,tsx,md,mdx}'],
purge: ['./app/**/*.{js,ts,jsx,tsx,md,mdx}'],
theme: {
extend: {
...defaultTheme,
},
},
plugins: [
require('@tailwindcss/line-clamp'),
require('@tailwindcss/typography'),
],
})
root.tsx
import type { LinksFunction, MetaFunction } from '@remix-run/node'
import {
Links,
LiveReload,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from '@remix-run/react'
import { Windmill } from '@windmill/react-ui'
import globalStyles from './styles/global.css'
import tailwindStyles from './styles/app.css'
export const meta: MetaFunction = () => ({
// eslint-disable-next-line unicorn/text-encoding-identifier-case
charset: 'utf-8',
title: 'New Remix App',
viewport: 'width=device-width,initial-scale=1',
})
export const links: LinksFunction = () => [
{ rel: 'stylesheet', href: globalStyles },
{ rel: 'stylesheet', href: tailwindStyles },
]
export default function App() {
return (
<html lang="en">
<head>
<Meta />
<Links />
</head>
<body>
<Windmill>
<Outlet />
</Windmill>
<ScrollRestoration />
<Scripts />
<LiveReload />
</body>
</html>
)
}
I configurated library with documentation and got that error
warn - The `purge`/`content` options have changed in Tailwind CSS v3.0.
warn - Update your configuration file to eliminate this warning.
warn - https://tailwindcss.com/docs/upgrade-guide#configure-content-sources
/Users/igormakowski/Documents/rigtch-music-www/node_modules/@tailwindcss/forms/src/index.js:34
'border-color': theme('colors.gray.500', colors.gray[500]),
^
TypeError: Cannot read properties of undefined (reading '500')
at /Users/igormakowski/Documents/rigtch-music-www/node_modules/@tailwindcss/forms/src/index.js:34:63
at registerPlugins (/Users/igormakowski/Documents/rigtch-music-www/node_modules/tailwindcss/lib/lib/setupContextUtils.js:600:61)
at Object.createContext (/Users/igormakowski/Documents/rigtch-music-www/node_modules/tailwindcss/lib/lib/setupContextUtils.js:801:5)
at createContext (/Users/igormakowski/Documents/rigtch-music-www/node_modules/tailwindcss/lib/processTailwindFeatures.js:36:48)
at /Users/igormakowski/Documents/rigtch-music-www/node_modules/tailwindcss/lib/cli.js:487:36
at /Users/igormakowski/Documents/rigtch-music-www/node_modules/tailwindcss/lib/processTailwindFeatures.js:38:11
at Object.Once (/Users/igormakowski/Documents/rigtch-music-www/node_modules/tailwindcss/lib/cli.js:489:23)
at LazyResult.runOnRoot (/Users/igormakowski/Documents/rigtch-music-www/node_modules/tailwindcss/peers/index.js:5131:27)
at LazyResult.runAsync (/Users/igormakowski/Documents/rigtch-music-www/node_modules/tailwindcss/peers/index.js:5173:30)
at LazyResult.async (/Users/igormakowski/Documents/rigtch-music-www/node_modules/tailwindcss/peers/index.js:5024:34)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Application throws error on start
tailwindtest.zip
I followed all the steps and it is not working.
....
Hello, I'm getting this error "Cannot read properties of undefined (reading '500')",
i've search and found that i need to upgrade @tailwind/forms to latest but still the same .
windmill-react-ui
0.5.0:import React,from 'react';
import { Button } from '@windmill/react-ui';
const Store = () => {
return (
<div>
<Button> Button </Button>
<h1 className="text-5xl">This Is Store</h1>
</div>
);
};
export default Store;
The requested module '../../web_modules/@windmill/react-ui.js' does not provide an export named 'Button'
Place config files somewhere else (there are 11 files there right now 🤔)
Does it support RTL?
Under Contributing, you mention that you're looking for a better setup than styleguide for a local dev server. (In fact, the steps listed there don't work - the dev
script is broken.)
Would you be interested in using Storybook for this purpose? It's primarily a tool for developing components, but the latest version makes it possible to generate a full-featured documentation site from your stories, which would eliminate the need for this stand-alone documentation repo.
I could put together a quick proof of concept if this seems like something you might want.
Pagination information should receive labels instead of setting values as default in order to make it multi languange
Ex:
SHOWING 1-10 OF 344
a) "Showing" Label
b) "of" label
This is dead
windmill-react-ui
version: 0.5.0In development, the form inputs have a border and are styled, but when building a production bundle, the .form-input class loses some properties and the input style is messed up.
You can see a difference between applied styles in development and production here:
windmill-react-ui
version: 0.6.0(Simplified example. Typescript 4.2.4 is used.)
import { Input } from '@windmill/react-ui';
const TestComponent = () => (
<>
<Input />
<>
);
export default TestComponent;
We were trying to import the Input component from the Windmill React library. We have Typescript 4.2.4 embedded into our project and it gives us the following error: "Property 'css' is missing" (see screenshot for the full error message). This error persists regardless of what standard properties we include in the declaration (e.g. type="checkbox"
). If we add the css property to the code and provide it any value: (e.g. <Input css="" />
), the Typescript error disappears. As far as I'm aware an input component has never required or even included a css property.
Relevant screenshot providing the full error message:
The current behaviour with Typescript doesn't match any of the documentation, and leaving it as is causes our builds to fail. To work around this issue we've created a wrapper component to mask the css property from the rest of our code (see below), but it would be nice not to have this workaround as I'm sure this isn't an intended behaviour.
import { Input } from '@windmill/react-ui';
import { InputProps } from '@windmill/react-ui/dist/Input';
const InputWrapper = (props: InputProps) => (
<Input css={null} {...props} />
);
export default InputWrapper;
I found within Input.d.ts
that the Input component is declared with a "css" property. Maybe this shouldn't be part of the declaration?
I would like to mention that we've really been enjoying the library so far! Keep up the great work.
windmill-react-ui
version: 0.5.0<Input
name="nickname"
/>
I am trying to use react hook form with the Input component
name is not included in the property
it will be compiled error in the typescript
can try using include more the normal HTML input type
React.DetailedHTMLProps<
React.InputHTMLAttributes<HTMLInputElement>,
HTMLInputElement
>
import React, { useState } from "react";
import { Dropdown, DropdownItem } from "@windmill/react-ui";
interface Props {}
const UserDropdown = (props: Props) => {
const [isProfileMenuOpen, setIsProfileMenuOpen] = useState(false);
function handleProfileClick() {
setIsProfileMenuOpen(!isProfileMenuOpen);
}
return (<div className="relative">
<button
className="rounded-full focus:shadow-outline-purple focus:outline-none"
onClick={handleProfileClick}
aria-label="Account"
aria-haspopup="true"
>
Toggle
</button>
<Dropdown
align="right"
isOpen={isProfileMenuOpen}
onClose={() => {
setIsProfileMenuOpen(false);
}}
>
<DropdownItem tag="a" href="#">
User
</DropdownItem>
<DropdownItem tag="a" href="#">
Settings
</DropdownItem>
<DropdownItem onClick={() => alert("Signout")}>
Logout
</DropdownItem>
</Dropdown>
</div>)
}
export default UserDropdown;
Implemented a dropdown according to the full example of the documentation https://windmillui.com/react-ui/components/dropdown
On first render, when user clicks on toggle button, then dropdown pops up. When user clicks the toggle button again, then the dropdown is closed. After the second click the dropdown cannot be opened again and remains closed.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.