GSV UI React

A UI library for GSV React frontends based on Radix UI primitives styled with Stitches

The UI is used on: GSV Dashboard GSV Kundeportal

Storybook

https://gsv-ui.vercel.app/

Tech Stack

• React
• Testing Library
  • React Testing Library
• TypeScript
• Storybook
• Radix UI
• Stitches
• esbuild

Components

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.

Building

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.

Installation

  npm install @adapt-agency/gsv-ui-react@latest

Usage

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({})

Development

Next.js is used as the development environment alongside Storybook

  # Next
  npm run dev

  # Storybook
  npm run storybook

Deployment

The Storybook will automatically be deployed to our Vercel on pushes to main

Publishing to NPM

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. Two factor auth with Authenticator app is required.

  npm run bundle
  npm login
  npm run release

Running Tests

To run tests, run the following command

  npm run test

Test changes without releasing to npm

In this project run

  yarn link

In desired project

  yarn link @adapt-agency/gsv-ui-react

Authors

Frontend Developer [email protected]