ajainvivek / preact-fluid Goto Github PK
View Code? Open in Web Editor NEW✅ A minimal UI kit for Preact
Home Page: https://ajainvivek.github.io/preact-fluid/
License: MIT License
✅ A minimal UI kit for Preact
Home Page: https://ajainvivek.github.io/preact-fluid/
License: MIT License
Currently the text field doesn't provide a way to create an password-type input?
EDIT:
Have created a PR to solve this issue: #9
Tried to use in a sample preact-cli project and got the following error
Uncaught ReferenceError: left is not defined
at eval (ListItem.js?64c6:38)
at Object.../node_modules/preact-fluid/src/List/ListItem.js (bundle.js:1572)
at __webpack_require__ (bundle.js:708)
at fn (bundle.js:113)
at eval (index.js?36e8:1)
at Object.../node_modules/preact-fluid/src/index.js (bundle.js:1660)
at __webpack_require__ (bundle.js:708)
at fn (bundle.js:113)
at eval (index.js:8)
at Object../components/header/index.js (bundle.js:1917)
(anonymous) @ ListItem.js?64c6:38
../node_modules/preact-fluid/src/List/ListItem.js @ bundle.js:1572
__webpack_require__ @ bundle.js:708
fn @ bundle.js:113
(anonymous) @ index.js?36e8:1
../node_modules/preact-fluid/src/index.js @ bundle.js:1660
__webpack_require__ @ bundle.js:708
fn @ bundle.js:113
(anonymous) @ index.js:8
./components/header/index.js @ bundle.js:1917
__webpack_require__ @ bundle.js:708
fn @ bundle.js:113
(anonymous) @ app.js:5
./components/app.js @ bundle.js:1909
__webpack_require__ @ bundle.js:708
fn @ bundle.js:113
(anonymous) @ index.js?1fdf:1
./index.js @ bundle.js:1932
__webpack_require__ @ bundle.js:708
fn @ bundle.js:113
(anonymous) @ entry.js?9dae:13
../node_modules/preact-cli/lib/lib/entry.js @ bundle.js:972
__webpack_require__ @ bundle.js:708
fn @ bundle.js:113
0 @ bundle.js:1962
__webpack_require__ @ bundle.js:708
(anonymous) @ bundle.js:806
(anonymous) @ bundle.js:809
@sabeurthabti the demo website is broken. Can you please look into it?
Hello,
I am new to preact and I saw this ui library. I wanted to use it so I tried to add my first button:
const displayCreateButton = () => {
if (!isCreating)
return <Button onClick={() => createTicket()}>create</Button>;
else return <div>creating ticket...</div>;
};
I replace my current by a but I got this error:
Is this library still maintained? I see there has not been any update in 2 years.
Thanks,
Thomas
it seems that fluid not support htm
import { html, render, Component } from 'htm/preact';
import { Button } from 'preact-fluid';
(function() {
render(html`
<Button> Hello World </Button>
`, document.body);
})();
Description:
Reference:
Awesome project - however I am running into some issues:
I keep getting the following error:
/Users/sabeur/workspace/x/node_modules/preact-fluid/src/Card/CardFooter.js:11:18: Unexpected token (11:18)
9 | */
10 | class CardFooter extends Component {
> 11 | static propTypes = {
| ^
12 | /**
13 | * Custom styles
14 | */
babelrc:
"presets": ["env", "es2015", "stage-2", "stage-0"],
... and
"transform-class-properties"
would it make sense to compile the project to a dist folder ?
I find it handy to have CSS vars for a top-level ThemeProvider.
I am currently doing this:
import { shadeColor } from './utils'
const primaryColor = '#5A33A7'
const secondaryColor = '#FF3776'
const linkColor = primaryColor
const darkColor = '#454d5d'
const lightColor = '#ffffff'
const grayColor = '#acb3c2'
const borderColor = '#e7e9ed'
const bgColor = shadeColor(darkColor, -66)
const controlSuccessColor = '#32b643'
const controlWarningColor = '#ffb700'
const controlErrorColor = '#e85600'
const codeColor = '#e06870'
const highlightColor = '#ffe9b3'
const notifyBgColor = '#ececec'
const listActiveColor = '#f0f3f5'
const colors = {
primaryColor,
primaryColorDark: shadeColor(primaryColor, 3),
primaryColorLight: shadeColor(primaryColor, -3),
secondaryColor,
secondaryColorDark: shadeColor(secondaryColor, 3),
secondaryColorLight: shadeColor(secondaryColor, -3),
linkColor: primaryColor,
linkColorDark: shadeColor(linkColor, 10),
darkColor,
lightColor,
grayColor,
grayColorLight: shadeColor(grayColor, 20),
grayColorDark: shadeColor(grayColor, -50),
borderColor,
borderColorDark: shadeColor(borderColor, 15),
bgColor: shadeColor(darkColor, -66),
bgColorDark: shadeColor(bgColor, 3),
bgColorLight: lightColor,
controlSuccessColor,
controlWarningColor,
controlErrorColor,
codeColor,
highlightColor,
notifyBgColor,
listActiveColor
}
// make theme available in CSS vars
Object.keys(colors).forEach(c => {
document.documentElement.style.setProperty(`--color-${c.replace('Color', '')}`, colors[c])
})
export default colors
This way, later in my CSS, I can use them like this:
a {
color: var(--color-link);
}
This works for CSS on any modern browser (also PostCSS can polyfill at build-time.) With a little thought, I could probly scope it to the current ThemeProvider
. Is there interest in a PR for this, in theme.js?
I generated default template using preact-cli,
install preact-fluid, import component but it said
✖ ERROR ./src/components/header/index.js
Module not found: Error: Can't resolve 'preact-fluid' in '/Users/azul/Sites/preactfluid/src/components/header'
@ ./src/components/header/index.js 13:0-38
@ ./src/components/app.js
@ ./src/index.js
@ ./node_modules/preact-cli/lib/lib/entry.js
@ multi ./node_modules/preact-cli/lib/lib/entry webpack-dev-server/client webpack/hot/dev-server
my header component
import { h, Component } from "preact";
import { Link } from "preact-router/match";
// import style from './style';
import { Button } from "preact-fluid";
export default class Header extends Component {
render() {
return <Button>Hello World</Button>;
}
}
my package.json
{
"private": true,
"name": "preactfluid",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"start": "if-env NODE_ENV=production && npm run -s serve || npm run -s dev",
"build": "preact build",
"serve": "preact build && preact serve",
"dev": "preact watch",
"lint": "eslint src",
"test": "jest ./tests"
},
"eslintConfig": {
"extends": "eslint-config-synacor"
},
"eslintIgnore": [
"build/*"
],
"devDependencies": {
"eslint": "^4.9.0",
"eslint-config-synacor": "^2.0.2",
"identity-obj-proxy": "^3.0.0",
"if-env": "^1.0.0",
"jest": "^21.2.1",
"preact-cli": "^2.1.0",
"preact-render-spy": "^1.2.1"
},
"dependencies": {
"preact": "^8.2.6",
"preact-compat": "^3.17.0",
"preact-fluid": "^0.5.8",
"preact-router": "^2.5.7"
},
"jest": {
"verbose": true,
"setupFiles": [
"<rootDir>/src/tests/__mocks__/browserMocks.js"
],
"testURL": "http://localhost:8080",
"moduleFileExtensions": [
"js",
"jsx"
],
"moduleDirectories": [
"node_modules"
],
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/tests/__mocks__/fileMock.js",
"\\.(css|less|scss)$": "identity-obj-proxy",
"^./style$": "identity-obj-proxy",
"^preact$": "<rootDir>/node_modules/preact/dist/preact.min.js",
"^react$": "preact-compat",
"^react-dom$": "preact-compat",
"^create-react-class$": "preact-compat/lib/create-react-class",
"^react-addons-css-transition-group$": "preact-css-transition-group"
}
}
}
I'd be nice if this module had typescript bindings
I got an erro:
Module not found: Error: Can't resolve 'react' in 'D:\myproject\node_modules\styled-components\dist'
but in my project I use preact with no react.
the styled-components
deps react
.
How to resolve it ?
I've noticed that package from the npm, doesn't have the disabled buttons change yet. Could you possibly update this?
Thank you in advance.
Hi, I'm quite new to fluid and trying to setup a simple project with the preact-cli:
npx preact-cli create simple preact-fluid-test
cd preact-fluid-test
npm install preact-fluid --save
Then I replace the default index.js page with the following:
import { Button } from 'preact-fluid';
import './style';
export default function App() {
return (
<Button>
Hello, World!
</Button>
);
}
And run npm run dev. However, I can see just an empty page in the browser and the following error in the DevTools:
Uncaught Error: Objects are not valid as a child. Encountered an object with the keys {nodeName,children,attributes,key}.
in Button
in App
at eval (debug.js?8a89:328:1)
at Array.forEach (<anonymous>)
at preact__WEBPACK_IMPORTED_MODULE_0__.options.diffed (debug.js?8a89:340:1)
at preact__WEBPACK_IMPORTED_MODULE_0__.options.diffed (index.js?a1c1:62:1)
at j (index.js?5962:267:1)
at w (children.js?36d0:137:1)
at j (index.js?5962:211:1)
at w (children.js?36d0:137:1)
at j (index.js?5962:211:1)
at P (render.js?e2d9:16:1)
The package.json
{
"private": true,
"name": "preact-fluid-test",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"build": "cross-env NODE_OPTIONS=--openssl-legacy-provider preact build",
"serve": "sirv build --port 8080 --cors --single",
"dev": "cross-env NODE_OPTIONS=--openssl-legacy-provider preact watch",
"lint": "eslint src"
},
"eslintConfig": {
"extends": "preact"
},
"eslintIgnore": [
"build/*"
],
"devDependencies": {
"cross-env": "^7.0.3",
"eslint": "^7.17.0",
"eslint-config-preact": "^1.1.3",
"jest": "^29.3.1",
"preact-cli": "^3.0.0",
"sirv-cli": "^1.0.3"
},
"dependencies": {
"preact": "^10.1.0",
"preact-fluid": "^0.9.1",
"preact-render-to-string": "^5.1.2"
}
}
I am doing something like this:
button:disabled,
button[disabled]{
background: #eee;
color: #666;
border-color: #777;
}
To get disabled buttons looking right. Is there interest in putting this in a PR for the button CSS?
package.json
:
{
"name": "foo",
"version": "1.0.0",
"description": "",
"main": "src/index.html",
"scripts": {
"start": "parcel src/index.html --open",
"build": "parcel build src/index.html"
},
"author": "",
"license": "MIT",
"devDependencies": {
"parcel-bundler": "^1.12.4"
},
"dependencies": {
"preact": "^10.3.4",
"preact-compat": "^3.19.0",
"preact-fluid": "^0.9.1"
},
"alias": {
"react": "preact/compat",
"react-dom": "preact/compat"
}
}
src/index.html
:
<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="app"></div>
<script src="./main.js"></script>
</body>
</html>
main.js
:
import { h, render } from 'preact'
import { Button } from 'preact-fluid'
function App() {
return (
<Button>
Click Me!
</Button>
)
}
render(<App />, document.querySelector('#app'))
Console output:
Uncaught TypeError: Cannot read property 'prototype' of undefined
at Object.parcelRequire.../node_modules/preact-compat/dist/preact-compat.es.js.prop-types (lodash.js:4274)
at newRequire (styles.js:43)
at localRequire (h.js:68)
at Object.parcelRequire.../node_modules/styled-components/dist/styled-components.es.js.is-plain-object (lodash.js:5041)
at newRequire (styles.js:43)
at localRequire (h.js:68)
at Object.parcelRequire.../node_modules/preact-fluid/lib/AppBar/styles.js.styled-components (lodash.js:6765)
at newRequire (styles.js:43)
at localRequire (h.js:68)
at Object.parcelRequire.../node_modules/preact-fluid/lib/AppBar/AppBar.js.preact (lodash.js:6828)
As in title in my DOM tree modal displays as <undefined></undefined>
.
I can't also pass id
prop, it's undefined too.
One more problem with modal is I can't open 2 at the same time it makes them buggy.
Same problem on your page https://ajainvivek.github.io/preact-fluid/#modal
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.