moaijs / moai

A React component library, where buttons look like buttons🗿

Heads up! This project is no longer in active development. It will be archived soon. Some suggestions:

• Build your own UI kit with a good foundation like Radix or Headless UI. This is what I'm actually doing these days myself.
• Fork this project. You have my sword, and bow, and axe, and only 22 unresolved bugs.
• Refactor Moai to utilise Radix (which is what I wanted to do, if I don't need to pay the bills)

---

Moai UI Kit 🗿

A React Component Library, Where Buttons Look Like Buttons.

• Website: moaijs.com
• Documentation: docs.moaijs.com
• NPM: @moai/core
• License: MIT

Contributing

• Contributing Overview: Report bugs, request features, write code and improve documentation.
• Design Principles: The unique traits that lead Moai's design and development.
• Development: Codebase overview and local development setup.
• Code of Conduct: How we treat each other.

Get in touch

• Email: [email protected]
  • For 1-1 support, security reports, business, etc.
• Chat: we-build-vn.slack.com
  • For community support, QAs, discussions, etc.
  • Look for "webuild-oss" channel
  • We speak English and Vietnamese
• Repository: moaijs/moai
  • For bug reports, feature requests, code contribution, etc.
  • See also: Contributing Overview

moai's Issues

Consistent font between OS

Currently the text rendered in Mac is bolder than in Linux. Should use font smoothing anti-aliased to have them consistent.

Support text area

Allow Table to have fixed column at last position

Some tables have an Action column which contains main control to interact with row data (usually Edit, Delete, or View Detail). With the current option, it’s not suitable to fixed that column at the first position.

Add non-ideal state component

Refs:

• https://blueprintjs.com/docs/#core/components/non-ideal-state
• 

[Table] Allow rowKey to use index as key

There are cases where "index" is the most appropriate key. For example, the list of passengers in a booking. We don't deal with each passenger individually but only render them as a list.

---

Implementation note: basically we'd need:

• The params of rowKey should be (row: R, index: number) instead of just "row"
• When trigger rowKey we must pass the "index" of that row.
• This means the props of "getTableRow" must receive the "index" of that row, which should be done when triggering it at the table

Include theme switcher

Upgrade autoprefixer

Blocking issue: egoist/rollup-plugin-postcss#324

mono font

    /* AVOID Ubuntu Mono as it's significantly smaller than others at the
	same font size */
    --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
        "Courier New", monospace;

checkbox should behind the header of table

Remove declaration bundling

Previously we think that bundling/merging TypeScript's declaration files (d.ts) is pretty cool because it makes the published content looks pretty clean (< 10 files). However, the process turns out to be quite complicated with even having some hacks (e.g. the "removing css imports") to make it works. It's just not worth it.

It's better to not bundling at the moment and wait for official support: microsoft/TypeScript#4433

Tag should have small size

We should touch:

• tag.tsx to add the sizing stuffs
• tag.module.css to add the necessary CSS
• button.tsx and input.tsx for reference on how to have sizing prop

[Table] expand row should behind header

date input should support minDate, maxDate, disabled, icon

useTheme

like this but with favicon

export const useTheme = (): [Theme, SetTheme] => {
    const state = useStorage("pref-theme", "theme-auto");

    const [theme] = state;
    React.useEffect(() => {
        html.classList.add(theme);
        return () => html.classList.remove(theme);
    }, [theme]);

    return state;
};

[Table] Allow column.render to use index

Like when we need to render a column with the ordinal number. This is quite simple, we only need to change the (2nd) type of the render prop:

moai/core/src/table/table.tsx

Lines 27 to 29 in d9c6561

	render:
	| keyof R // Accessor
	| ((row: R) => ReactNode); // Render function;

to have another param as "index: number", and later pass that param at:

moai/core/src/table/cell/cell.tsx

Line 21 in d9c6561

? column.render(row) // Render function

Distribute from root

Traditionally a lib is built from "src" to "dist", then the whole project is published to npm. This means to use something via an absolute path we would do import {} from "@moai/core/dist/something".

Previously, we think this is quite ugly and we do a little trick that we move the package.json to inside "dist" and then publish only the "dist" folder (as a whole project). This means the import above would now be nicer as @moai/core/something.

However, this yields more problems than benefits:

1. Is that we sym-link just won't work anymore. Yes we can sym-link to the dist folder itself, but most build will just delete the dist and create a new one instead of emptying its content.
2. Versioning is more difficult. We need to increase the version before the build because the "moving package.json" is a part of the build.

In conclusion, we should just rollback and publish from root

Support shared list in Input

Currently if using list then each Input will create its own List. There should be a way to specify an id so that multiple Input will use 1 list

Table support dataSource

• New feature:
  
  same antd :>3
  

• Current: I don't like index !!!
  

custom upload file input

• Nice to have drag and drop <3 <3

Focus outline of Radio checkbox should not be rectangle

The focus outline of radio button now displayed as rectangle, which should be in circle instead.

Support tag color.

• orange, violet, light...

Expandable table row overlap table heading

Allow setting initially selected tab

Support time picker

Exclude stories out of types generation

Toggle Button

Enforce button height using height

Instead of padding + line height + border. Why? To keep the same height between different styles (some have border and some don't)

Also it should fix the height issue of MenuButton, which uses Button.styles to have faked button appearance

Positive and Negative accent

Flash of white style when you first load the page

Great job on Moai – I love it.
If I have the dark theme activated, I see a flash of the light theme when I first load https://moaijs.com/

Suggest to use Button.Forwarded when using Button?

Document Tag component

Support button group

Basically Switcher should be implemented as a set of Buttons

Also it should be possible to group a Button and a MenuButton

Add Tree component

Already have in vim.md's source code

Support input counter

• Displays the maximum number of characters per user input.
  
• Value <= maximum number of characters.

ButtonMenu should be close after user select

Use Menu inside ButtonMenu

callout

see json app

Table should support renders when the data source empty. Example below

image removed due to having sensitive data

Add DatePicker component

The current has a blocking issue that its representational format is not customizable but always follow browser's locale format. This is pretty bad because for example most computers in Vietnam uses en-us language but users do expect to see (and input) as dd/mm/yyyy

Toast

Support option clear in select

• only show clear (X) when have value
  

Support button full height

Don't wake my kid up

Please make dark mode version for documents site

Support flat button + highlight

Currently we are banning the use of style={Button.styles.flat} and highlight={true} at the same time:

moai/core/src/button/button.tsx

Lines 103 to 106 in d0f0104

	[
	(p) => p.style === Button.styles.flat && p.highlight === true,
	"Flat buttons can not have highlight style",
	],

As we can see this is only a "soft" ban, which means we throw a run-time error to prevent the users from using them, without any technical limitation. In fact, previously we avoid this only because we haven't sure what should it look like. Now we have.

---

To start with this issue, first see that the "style" prop of Button is not a string, but an object. This allows Moai's themes can extend and modify the styles properly. However, it's pretty simple, a ButtonStyle is simply a group of classes to be applied to the button tag under different situations:

moai/core/src/button/button.tsx

Lines 11 to 16 in d0f0104

	export interface ButtonStyle {
	main: string;
	selected: string;
	highlight: string;
	busy: string;
	}

And there are 2 pre-defined styles: "outset" and "flat":

moai/core/src/button/button.tsx

Lines 157 to 170 in d0f0104

	Button.styles = {
	outset: {
	main: [border.radius, outset.main].join(" "),
	selected: outset.selected,
	highlight: outset.highlight,
	busy: outset.busy,
	} as ButtonStyle,
	flat: {
	main: [flat.main].join(" "),
	selected: flat.selected,
	highlight: "",
	busy: flat.busy,
	} as ButtonStyle,
	};

Which come from these 2 CSS Module files:

moai/core/src/button/button.tsx

Lines 8 to 9 in d0f0104

	import flat from "./flat.module.css";
	import outset from "./outset.module.css";

Notice that the "flat" style does not have a class for "highlight" field. Meanwhile, the "outset" style does, which is why outset buttons have highlight style, but flat button does not.

Our job here is to define the "highlight" CSS for the "flat" style, which should be coded inside "flat.module.css", and referenced at Button.styles.flat.highlight (replace the empty string).

The CSS is simple, it should set the button text to our primary color, something like this:

:global(.light) .highlight {
	color: var(--highlight-7);
}
:global(.dark) .highlight {
	color: var(--highlight-5);
}

---

To test your work, just run the storybook locally (yarn storybook), and look for the Button story, then set "style" to "flat" and "highlight" to "true". If it shows a blue text, you should PR!

Simplify Theming

Requested by downstream: https://github.com/banhmijs/banhmi/issues/1

Randomly disabling options cause mismatch between server and client

Dialog

Table row with compact height

The current height of each row feels too large for an Enterprise app. We should have a size option which controls table row height.

interface TableProps {
  size: "dense" | "normal" | "loose" // Maybe T-shirt sizes
}

Build(icon): Simplify icon build

Currently the build setup of core is much better than icon:

• Use yarn instead of NPM
• Publish the package, not package/dist
• No need for sh scripts

border should support parent align items center

use align self maybe