@onextech/nova v0.2.1
Nova
Features
- React with TypeScript support
- Rollup for bundling (with a customizable bundler config file)
- Babel for transpiling
- Storybook for development and component explorer
- SVGR support
- Linting before commit support with ESLint, Husky and Lint Staged
- Supports CSS modules configurable with PostCSS
- Supports CJS, ESM and UMD formats
- Sourcemap creation
Introduction
Nova is an opinionated library for building modern web applications.
Modern
Assembled in 2022, Nova is a ESM library, supporting tree-shaking by default.
Why
We spend too much time recreating the same components across libraries.
Stack
Nova builds on top the following open-source technologies:
- React
- MUI
- Next
- Supabase
Peer Dependencies
Nova ships with the following key dependencies which are only injected into your app's bundle size if you use the respective modules thanks to tree-shaking.
Kindly install the following dependencies in your downstream app when using the following modules in the chart below:
Form
yarn add react-hook-form react-hot-toast react-quill react-number-format
// CSS
import 'react-quill/dist/quill.snow.css'
Other Requirements
- In app, add
<Toaster position="top-right" reverseOrder={false} />
inside<ThemeProvider>
in_app.tsx
Storage
yarn add @supabase/supabase-auth-helpers
Auth
yarn add @supabase/supabase-auth-helpers
Other requirements
- Add the following to
pages/api/auth/[...supabase].js
import { handleAuth } from '@supabase/supabase-auth-helpers/nextjs'
export default handleAuth()
- Add the following to
_app.tsx
inside theThemeProvider
import { AuthProvider } from '@onextech/nova/auth'
Usage
- Add the following to pages you need to guard
import { withAuthRequired } from '@supabase/supabase-auth-helpers/nextjs'
export const getServerSideProps = withAuthRequired()
CMS
yarn add @supabase/supabase-auth-helpers ag-grid-react ag-grid-community ag-grid-enterprise react-quill react-query
Other requirements
- Install deps from
form
,auth
,storage
- Add the following css to your
_app.tsx
// CSS
import 'ag-grid-community/dist/styles/ag-grid.css'
import 'ag-grid-community/dist/styles/ag-theme-alpine.css'
Supabase Installation
- Add
NEXT_PUBLIC_SUPABASE_URL
andNEXT_PUBLIC_SUPABASE_ANON_KEY
to your app's .env file like so:
NEXT_PUBLIC_SUPABASE_URL=http://localhost:6006
NEXT_PUBLIC_SUPABASE_ANON_KEY=MOCK
Architecture
/auth
// login
// resetpwd
// auth provider
/cms
// crudtable // ag-grid
// crudlist
// crudedit
// crudupdate
/ui
// Box
// Stack
/landing
// Block
/form
// TextField
// ControlledTextField
/storage
// StorageAvatar
// StorageFileDropzone
/utils
// printNumber
/config
// styleConfig
Usage
import { Button, Alert, Box } from '@onextech/nova/ui'
import { printNumber } from '@onextech/nova/utils'
Authoring
Building and Publishing Local Changes
Always publish from within dist folder as we don't want to have an extra dist wrapper in the import path. The following is a command you should run from the lib root locally to have your changes deployed:
yarn build; cp package.json dist; cd dist; yalc push; ../
Yalc
Running yarn install in your app breaks yalc
Install new dependencies in your downstream app to an existing yalc connected library locally breaks ccth
Legacy
Components that need to be migrated
- TextField
- PageHeader
Development
Clone this repo and run the following commands to start development with Storybook.
yarn install
yarn storybook
Go to localhost:6006
and you should see something like this.
Building
To build your project, run yarn build
.
Publishing
This builds commonjs
, esm
, and umd
versions of your module to dist/
and then publishes your module to npm
.
Make sure that any npm modules you want as peer dependencies are properly marked as peerDependencies
in package.json
. The rollup config will automatically recognize them as peers and not try to bundle them in your module.
Source
react-library-starter by Rhaidzsal Ali ⚡ A library starter kit and bundler for your React projects, powered by Rollup.
License
GPL-3.0
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago