@adapt-agency/gsv-ui-react

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.

  npm run release

Running Tests

To run tests, run the following command

  npm run test

Authors

Frontend Developer [e-mail]