v0.1.2

August 29 2021

Summary

This release brings an overall rework of the theming system, which was introduced in early versions of Nuclui. Having very few components to theme, the structure lacked consistency and clarity on where parts of the palette should be used. After the form components were created, I decided to rework this structure based on them. The ultimate goal is to have a reusable palette for future components. However, I foresee changes to this structure as more components are added to the framework.

The deployment of this release has a new theme select and the Benchmark page has been used to test the overall theme. As of now, the themes presented will not ship with the package. They are only examples of what can be done by overriding theme properties of the Root component.

Theming Changes

Background

• primary has been renamed to main. This color should typically be used only once for the app's background.
• secondary has been renamed to surface. This color can be used to distinguish elements over main elements.
• dimmed has been renamed to surfaceAlt. This color is an alternate surface color. It can be used for less distinguishable elements over main elements.
• active and activeAlt have been added as colors that represent a component being interacted with. They can often be found on hover and active states.

Context

All context colors have been revamped. Previously, context colors had a "shading" structure (VLight, Light Dark and VDark). I realized it was the wrong approach for flexible themes. When building the dark theme, some components had the VLight color when I actually wanted much darker colors. At first, this resulted in VLight colors being dark. This didn't make much sense. Instead, I was inspired by the changes made to background to rename all context colors. The following list only shows primary, but this applies to all other context colors.

• primaryVLight, primaryLight, primaryDark and primaryVDark have been removed.
• primaryActive and primaryActiveAlt were added. Similarly to background, they represent colors when a component is being interacted with.
• primarySurface has been added. Although the only use case I've found so far for this one is the Slider's track, I can see future components using them, such as a Toast.
• primaryContrastText has been added. This is the text color that should be applied when it appears on a background of that context color. For example, this is what makes the color switch from black to white on a selected date of the DatePicker calendar

Border, Shadow and Text

So far, there has no been any issues with these theme properties. They haven't been modified.

Other

• Update packages to fix vulnerability warnings.

Nuclui 0.1.1

This release contains the new Form components/utilities, multiple fixes/improvements of Layout components, and new bundling for CJS and ESM support.

Form Components

Form components will aid you in building forms quickly for various data types. Many of them can be extended into more powerful components, should you need them. They also come with a powerful useForm hook, which will not only manage the form state but also return all the basic props you'll need to provide to the Form components, such as value, onChange, and errors.

InputBase

This component is the mother of all Form components. Every Form component extends it to have a common base. It is in charge of displaying the input label and errors. That said, it could potentially be used to create your own components, so you don't have to rewrite the basic logic.

Input Containers

These include InputContainer and the CheckboxContainer. They both extend InputBase and each Form component extends one of these (except Slider). They both have the same purpose as the InputBase, but with more functionality. Just like InputBase they can be extended into more specific components.

InputContainer

This container is for traditional "boxed" inputs that are text-based, like TextInput, NumberInput and DatePicker. There are multiple variants to customize the "boxed" look.

CheckboxContainer

This container is for boolean-like inputs, such as the Checkbox, RadioButton, and Switch. Unlike InputContainer, this one does not do much except overriding some styles from InputBase. It was created to be used in the future to add functionality to boolean-like inputs.

useForm

This powerful hook was designed to eliminate common tasks that the developer needs to do in order to create a form:

• Value state management
• onChange handler
• Validation

Every Form component was designed to work with this hook. It's also strongly typed using generics, so you're sure that you use the right input for the right data and that Intellisense will always assist you. There are some limitations to this at the moment, so you should only use it for simple forms. It's not designed to have dynamic fields, but that will hopefully change in the future!

You can see how all of the Form components can be used with useForm here.

MediaQueryContext

Under the hood, FlexItem uses the useMediaQuery hook to listen to MediaQueries using the matchMedia API and render different styles based on the given basis config for each breakpoint. This is what is used to replicate the common "Grid" behavior of other React libraries, such as Material-UI.

However, during the development of the Form components, it has come to my attention that there were several performance issues with having multiple FlexItem instances. Each one of them would register a new listener with the matchMedia API, which would become very costly. To fix this, MediaQueryContext registers all Media Queries and ensures no duplicated query listeners are created. It then dispatches change events whenever the query is updated. useMediaQuery now consumes this context and uses it to register new queries, but can also work standalone. Using useMediaQuery alone without a wrapping MediaQueryContext is highly discouraged and will cause a warning when using a FlexItem without it. The Root component also comes with a built-in MediaQueryContext.

CJS and ESM

Nothing too complex, I want a tree-shakable library but realized I was always compiling it in CommonJs. Nuclui now bundles both CJS and ESM to support any configuration. This means that you can use the import syntax to import only the components you need. Bundlers like Webpack will then strip out unused components as "dead code". The concept of tree-shaking is fairly new to me, so I'm unsure if it actually works.

Final Notes

I just want to re-iterate that Nuclui is not yet ready for production. The structure and code are still highly subject to change, I've seen it between this release and the last one.

If you run the start script right now, you'll only see a sandbox of components. It's basically a single page I've been using to create components. It's kind of nice because you see the progression from the bottom to the top, but it has no documentation yet. I have yet to plan for official docs, but I don't want to jump into it right now. I will wait until the library comes to a more stable condition, which is not happening any time soon!

Nuclui 0.1.0 - Beta.0

This is a pre-release for the upcoming Form components. Also, many fixes were made to some Layout components.

A new website has been created for dev and staging environments. At the moment of writing, this pre-release can be viewed on the staging website.

Installation

npm i nuclui@next # or nuclui@0.1.0-beta.0

New Components

Form Components

• Button
• Checkbox
• CheckboxContainer
• CycleSelect
• DatePicker
• FilePicker
• InputBase
• InputContainer
• NumberInput
• RadioButton
• RadioGroup
• Select
• Slider
• Switch
• Textarea
• TextInput

Display Components

• Calendar

Layout Components

• Popover

Nuclui 0.0.8

This release marks the initial core layout components release: Container, Flex, FlexItem, Card, Spacer, and HR. This doesn't mean they are done, however. I had some ideas for other components, but I am not sure yet if their place is in Nuclui, as they can often be derived from these previously mentioned components. I'd rather start to focus on a new group of components.

Nuclui 0.0.8 - Beta.0

v0.0.8-beta.0

0.0.8-beta.0

Nuclui 0.0.7 - Beta.0

This release completes the Container component and an initial version of the Flex component.

Nuclui 0.0.6 - Beta.2

Renamed the Page component to Container, because it made more sense. Page should be something that only appears once per page, but it was actually designed to be used multiple times in with other layout components.

Nuclui 0.0.6 - Beta.1

Fixed issue with Root not actually providing the right theme to components

Nuclui 0.0.6 - Beta.0

This beta build brings the first components of Nuclui: Page and Root.

• Page can be used to display the main content of your page.
• Root serves as the root element of Nuclui. It provides a CSS Reset, imports the necessary fonts and gives the option to give a custom theme. I am trying as much as possible to make Nuclui independent of these kinds of root components. So far, the Root is optional, meaning components can work without it and you can do what it does manually:
  • Add your own CSS Reset, Nuclui uses normalize.css to do so.
    • Can also be added using the Normalize component in nuclui/dist/src/components/Root/Normalize
  • Import the fonts needed (so far, only the Quicksand font is used)
    • Can also be added using the Fonts component in nuclui/dist/src/components/Root/Fonts
  • Add your own ThemeProvider from styled-components with nui as the root of the theme. ({ nui: { /* custom theme */ } })

As you can see, theming will be an option in Nuclui! Using a predefined palette for common colors that can be overriden completely (or partially) to make your own custom theme.

Nuclui 0.0.5

This release marks the end of the workflow setup phase of Nuclui! The next releases should start to introduce the first features of the framework (hopefully!)