ajainvivek/preact-fluid

✅ A minimal UI kit for Preact

Minimal UI Kit for Preact, with reusable components.

Installation

Preact Fluid is available as an npm package.

npm install preact-fluid --save

Usage

Here is a quick example to get you started, it's all you need:

import { render } from 'preact';
import { Button } from 'preact-fluid';

function App() {
  return (
    <Button>
      Hello World
    </Button>
  );
}

render(<App />, document.querySelector('#app'));

Documentation

Check out our documentation website.

Contributing

We'd greatly appreciate any contribution you make. :D

License

This project is licensed under the terms of the MIT license.

preact-fluid's Issues

Moments with docs

not support htm

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

theme colors in css

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?

Modal is undefined in dom

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

Component Not Rendering

import { render, h } from 'preact';
import { Button } from 'preact-fluid';

const App = () => {
  return (
    <div id="app">
      hello world 1<Button>hello world 2</Button>
    </div>
  );
};

render(<App />, document.body);

No Errors

the deps styled-components depending react

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 ?

no longer working?

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

left is not defined

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

Demo page broken

@sabeurthabti the demo website is broken. Can you please look into it?

Typescript support

I'd be nice if this module had typescript bindings

not working with preact-cli generated app

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"
    }
  }
}

disabled buttons

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?

Way to create password text input?

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

Setup unit test

Description:

• Setup unit test
• Hook unit test to BUILD & PUSH
• Test at least one basic component (eg. Link)

Reference:

• https://preactjs.com/guide/unit-testing-with-enzyme

cannot read property 'protype'

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)

propTypes static error

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 ?

Code in the npm package is not the newest one

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.

Objects are not valid as a child

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"
  }
}