A UI library for GSV React frontends based on Radix UI primitives styled with Stitches
The UI is used on: GSV Dashboard GSV Kundeportal
To build our components, we use Radix UI. This is a library that provides a set of headless accessible components that we can use to build our application.
We use Stitches for a "styled-components"-like API. It also enables us to react to different state of our Radix UI based components.
We are using esbuild for bundling our code. The build code is located inside build.tsx
.
Newer versions of NodeJS all support ES Modules and this is a great way to reduce our bundlesize through tree-shaking.
npm install @adapt-agency/gsv-ui-react@latest
import { useState } from 'react'
import { Input } from '@adapt-agency/gsv-ui-react/dist/components/Input'
const Component = () => {
const [myInputValue, setMyInputValue] = useState('')
return (
<Input
name="myInput"
value={myInputValue}
onChange={(e) => setMyInputValue(e.target.value)}
placeholder="Type here ..."
/>
)
}
For usage in Next.js projects below configuration in next.config.js might be needed
const withTM = require('next-transpile-modules')(['@adapt-agency/gsv-ui-react'])
module.exports = withTM({})
Next.js is used as the development environment alongside Storybook
# Next
npm run dev
# Storybook
npm run storybook
The Storybook will automatically be deployed to our Vercel on pushes to main
Releasing to npm is done through a single release script, that will install dependencies, build, test, publish etc. We're using np by Sindre Sorhus alongside other packages to accomplish this.
npm run release
To run tests, run the following command
npm run test
Frontend Developer jakub@adaptagency.com