InfluxDB is the Time Series Platform where developers build real-time applications for analytics, IoT and cloud-native services. Easy to start, it is available in the cloud or on-premises. Learn more →
Top 23 TypeScript Storybook Projects
-
storybook
Storybook is a frontend workshop for building UI components and pages in isolation. Made for UI development, testing, and documentation.
It it based on several core technologies - GraphQL for making API calls, Prisma as an ORM, TypeScript for type safety (optional), Jest for testing, Pino for logging and Storybook to assist with creating UI.
-
We think that Nx is uniquely positioned to be an essential tool in this current generation of JS stacks.
-
Appwrite
Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!
-
-
After designing your user interface within Figma, teams can utilize a plugin like Builder.io to turn the beautiful and functional look into code.
-
This Jira clone is a very good example https://github.com/trungk18/jira-clone-angular (Tutorials on the bottom)
-
Project mention: ReactiveTraderCloud: NEW Extended Research - star count:1739.0 | reddit.com/r/algoprojects | 2023-01-21
-
next-boilerplate
A well-structured production ready Next.js boilerplate with Typescript, Redux, Jest, Enzyme, Express.js, Sass, Css, EnvConfig, Fetch, Reverse Proxy, Bundle Analyzer and Built-in Project CLI. https://pankod.github.io/next-boilerplate/
A) your tsconfig/eslint configuration should have a few more rules turned on. Look at github projects such as this one and copy/paste their tsconfig/eslint files in your project.
-
Klotho
AWS Cloud-aware infrastructure-from-code toolbox [NEW]. Build cloud backends with Infrastructure-from-Code (IfC), a revolutionary technique for generating and updating cloud infrastructure. Try IfC with AWS and Klotho now (Now open-source)
-
Project mention: How to use npm workspace with create-react-app and typescript? | reddit.com/r/typescript | 2023-01-20
Make sure you've copied the jest craco config and that you've set up path aliases accordingly.
-
-
testing-react
Testing utilities that allow you to reuse your Storybook stories in your React unit tests!
When I started to play with this idea the first option which came to my mind was to launch Storybook and then tell Cypress to navigate to the component’s iFrame source url and start interacting with it. It can work but it has some challenges, like making sure the Storybook is up first, and how it is accessed on on-demand spawned environments in the build pipeline, but then another method presented itself to me - using a library that Storybook team has developed called @storybook/testing-react
-
storybook-design-token
Display design token documentation generated from your stylesheets and icon files. Preview design token changes in the browser. Add your design tokens to your Storybook Docs pages using the custom Doc Blocks.
-
assistant
✏️ Bring your Figma design & development pipeline to the next level - with design to code, in-design-content-management, component management, tools for faster design
Star & watch our design-to-code engine repo & assistant repo and be the first to access the latest updates.
-
-
nuxt3 hacks: there may be ways to do what I want with nuxt but nothing seems stable and/or clean. Here is the best option I found (which I don't fully understand tbh): https://github.com/nuxt-community/storybook/pull/385
-
Project mention: GitLanding: A beautiful landing page for your Github project in a matter of minutes. | dev.to | 2022-03-28
Gitlanding.dev itself
-
Project mention: Anybody know of a multi select list component for React? | reddit.com/r/webdev | 2022-07-13
Actually there are quite a few, here are some that I know of: React Multi Select Component: https://github.com/hc-oss/react-multi-select-component React Multi Select Dropdown: https://github.com/srigar/multiselect-react-dropdown
-
eslint-config-galex
hopefully the last eslint config you'll ever need - customizable & modern best practices for JS, TS, Node, React, Remix, Next, Jest, testing-library & storybook
-
-
-
-
Project mention: Been out of the loop with the latest trends for about 2 years. What's worth investing my free time in? | reddit.com/r/reactjs | 2022-07-17
-
I'm the maintainer of react-you-do-you – hope it helps.
-
-
Sonar
Write Clean JavaScript Code. Always.. Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.
TypeScript Storybook related posts
- Top packages for React Development
- How we started setting up a design system at Escape
- Test your React Components with Nightwatch and Testing Library
- Anyone used @ladle/react ?
- Building a Design System: Lessons Learned
- I don't understand the role of the person who's using Figma for Frontend Design
- How can I make a playground similar to Figma but with components?
-
A note from our sponsor - InfluxDB
www.influxdata.com | 28 Jan 2023
Index
What are some of the best open-source Storybook projects in TypeScript? This list will help you:
Project | Stars | |
---|---|---|
1 | storybook | 76,268 |
2 | nx | 16,217 |
3 | React95 | 2,273 |
4 | html-figma | 1,978 |
5 | jira-clone-angular | 1,910 |
6 | ReactiveTraderCloud | 1,740 |
7 | next-boilerplate | 1,459 |
8 | ts-monorepo | 1,129 |
9 | molecule | 656 |
10 | testing-react | 579 |
11 | storybook-design-token | 531 |
12 | assistant | 429 |
13 | react-native-storybook-loader | 298 |
14 | storybook | 280 |
15 | gitlanding | 237 |
16 | multiselect-react-dropdown | 174 |
17 | eslint-config-galex | 164 |
18 | eslint-plugin-storybook | 150 |
19 | solid-ui | 131 |
20 | json-schema-viewer | 113 |
21 | react-uswds | 109 |
22 | react-you-do-you | 107 |
23 | mealdrop | 88 |