https://github.com/ksalmon/ui-kit

Playground UI Kit
https://github.com/ksalmon/ui-kit

react storybook vitejs

Last synced: 21 days ago
JSON representation

Playground UI Kit

• Host: GitHub
• URL: https://github.com/ksalmon/ui-kit
• Owner: ksalmon
• Created: 2024-07-31T19:41:15.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-07-31T22:36:04.000Z (7 months ago)
• Last Synced: 2024-11-27T14:11:57.678Z (3 months ago)
• Topics: react, storybook, vitejs
• Language: TypeScript
• Homepage: http://ui-kit.raygun-playground.com/
• Size: 1.09 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# UI Kit 

Existing components are the ThemeProvider and the FileTreeBrowser.

### Running Locally

```bash

npm i

npm run storybook

```

Checkout localhost:6006

### The Why?

Total coding time was just over an hour. Built this using vite which was new to me, normally with UI kits I'll use tsup, rollup or just a webpack configuration. Can't say vite saved me time on the startup time but worked well with Storybook which I appreciated as that differs from webpack.

The FileTreeBrowser component is fairly simple with some small animations using useSpring. See the TreeData interface for more context on the data prop structure. The theme provider is a simple start at the concept of design tokens being set globally. An application would need to wrap all used components inside the ThemeProvider.

```javascript

  

```

### Todo's

- Specs in Cypress and/or Jest

- Add Eslint Configuration

- Add more design tokens to the ThemeProvider and pass to the existing components