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 @hoangcung1804npm/voluptas-neque-ratione

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 @hoangcung1804npm/voluptas-neque-ratione
• 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 @hoangcung1804npm/voluptas-neque-ratione/dist/assets).
*/
import '@hoangcung1804npm/voluptas-neque-ratione/dist/assets/default-variables.css' // Use defaults or specify your own compatible variables based on `default-variables.scss` and `tailwind-compatible.scss`

import '@hoangcung1804npm/voluptas-neque-ratione/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 '@hoangcung1804npm/voluptas-neque-ratione'

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

Author

Alexander Aleshchenko

License

MIT