thebigsasha/tbsui-ssr

CSS only React component library, built for static sites using NextJS or Gatsby.

TBSUI SSR

A library of components which can all be shipped with zero javascript using NextJS. For more complex components, including reactive animations, checkout tbsui.

What this library won't do

• Add interactivity and event listeners (onClick(), onChange(), etc)
• Use State and Lifecycle Effects (useState(), useReducer(), useEffect(), etc)
• Use browser-only APIs
• Use custom hooks that depend on state, effects, or browser-only APIs

Customization

Override default scss variables to style the library! If you want to use default values, import default-values.scss

Installation

pnpm i tbsui-ssr

Features

• Zero client side JS -- these components are css only
• 100% NextJS 13 Compatible
• ⚛️ React 18
• 📚 Storybook 7 - Components preview
• 🖌️ SCSS Modules
• ⏩ Vite - Run and build the project blazingly fast!
• ⚡ Vitest - Components Unit Testing
• 📐 ESLint & Prettier - Formatting and Linting
• 🌟 Typescript
• 🐶 Husky & Lint Staged - Pre-commit Hooks
• ⏰ Release Please — Generate the changelog with the release-please workflow
• 👷 Github Actions — Releasing versions to NPM
• Initial components setup using Atomic Design

Using the library in a React frontend app (NextJS)

• Install the library running pnpm i tbsui-ssr
• In your root layout / _app.tsx, import the stylesheets as follows:

/*
You must specify css variables to theme this library, and provide a `tailwind-compatible.scss` file which defines tailwind-style values (or use the `default-variables.css` file from tbsui-ssr/dist/assets).
*/
import 'tbsui-ssr/dist/assets/default-variables.css' // Use defaults or specify your own compatible variables based on `default-variables.scss` and `tailwind-compatible.scss`

import 'tbsui-ssr/dist/assets/popup-message.css' // and or the stylesheets for whatever components you wish to use

• Then, wherever you like, use the components as follows:

import { PopupMessage } from 'tbsui-ssr'

const MyComponent = () => {
  return <PopupMessage message="Hello World!" type="success" position="top-right" duration={5000} />
}

Author

Alexander Aleshchenko

License

MIT

tbsui-ssr's Issues

Navbar on larger displays should not fill screen

On displays smaller than 600 tall, don't make the expanded navbar go all the way down, instead make it go until the length of the content

Optional Event Callbacks for Nav

Add optional event callbacks to the nav component so that people can use optional client side logic to programatically control the nav, IE, pass a callback of the format

(menuSwitchID: string) => void

Which would be called whenever clicking off of the nav, on the button, or other reasonable slots.

We should also somehow see if we can expose the generated ID for the navbar closer to consumers of the library, perhaps with a vite extension, exporting a Typescript definition like TBSUI-SSR-NAVBAR-TOGGLE-ID.

Hooks for programatic Navbar control

Export a hook useNavbarControl() which exposes functions that allow you to set and observe the open state of the navbar.

To do this

• Import the navbar scss module to learn the hashed generated ID value for the navbar toggle
• Create a function that toggles the navbar's open state using the css ID
• Expose the current state of the navbar as a React state variable
• Return the above from the hook

Suggested usage

import { useNavbarControl } from "tbsui-ssr";
...
const [isNavbarOpen, setNavbarOpen] = useNavbarControl();

CSS only responsive navbar

CSS Bundling Options

Right now, we do not split css per module, because NextJS doesn't like to have style imports in components and the names of each stylesheet are not developer friendly.

Ideally, we'd like to simply import components only, and have them import their associated minified stylesheet build from every module stylesheet they import.

This works with the following in vue.config.ts

      libInjectCss({
        entry: {
          index: 'src/lib/index.ts', // Don't forget the main entry!
          ...scanEntries(['src/lib']),
        },
        rollupOptions: {
          output: {
            assetFileNames: 'assets/[hash][extname]',
          },
        },
      }),

However, this injects imports such as import '../../../assets/4gser621.css' in the components. This is great, but for NextJS it isn't good because stylesheet imports in components are unsupported.

If we continue with css splitting, we can indeed remove this and manually import these stylesheets in nextjs, but it would not be human friendly to import a separate stylesheet for each component, even with readable names.

Ideally, we'd build js files maintaining module imports, linking to minified import a from '[hash].module.css' files. This would work great in nextjs, but not work on targets not supporting css modules (who cares about them though).

Nav autoclose on navigate

When clicking a link in the nav, it doesn't close the nav view, only changing the route with the nav menu still open.