diff --git a/README.md b/README.md index 9dfb6439..418f2f17 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,10 @@ # CSPR.design -> **Build faster with CSPR.design** +CSPR.design is a React-based UI component library powering the CSPR.suite application family, including [CSPR.live](https://cspr.live) and [Casper Wallet](https://casperwallet.io). It provides a consistent design language, reusable components, and shared styling utilities to ensure a cohesive user experience across products. CSPR.design enables faster development, easier maintenance, and a unified brand presence throughout the Casper Ecosystem. -A production-ready React UI component library for Casper blockchain applications. Part of the **CSPR Products Suite**, used by [cspr.live](https://cspr.live/), CSPR.market, and other major ecosystem projects. +✅ **Battle-tested** components from production apps \ +✅ **Blockchain-focused** with Casper-specific utilities \ +✅ **Consistent design** across the Casper ecosystem [![Install](https://img.shields.io/badge/npm-github%3Amake--software%2Fcspr--design-blue)](https://github.com/make-software/cspr-design) [![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue)](https://www.typescriptlang.org/) @@ -10,25 +12,19 @@ A production-ready React UI component library for Casper blockchain applications --- -## Get started in 5 minutes +## Get started -Install from NPM to access ready-to-use components that bring the beloved Casper community UI to your dApp. Save time on design and implementation with clean, consistent look tailored for Web3. - -✅ **Battle-tested** components from production apps \ -✅ **Blockchain-focused** with Casper-specific utilities \ -✅ **Consistent design** across the Casper ecosystem - -## Installation +Install from [NPM](https://www.npmjs.com/package/@make-software/cspr-design) to access ready-to-use components that bring the beloved [Casper blockchain](https://casper.network) community UI to your dApp: ```bash npm install @make-software/cspr-design ``` -## Quick Start +Save time on design and implementation with a consistent Casper Network look: ```jsx import { - Cspr, + CSPR, BodyText, FlexColumn, AccountInfo, @@ -38,49 +34,28 @@ import { const MyApp = () => ( Account Balance: - ); ``` -## Perfect Match with CSPR Ecosystem - -**🌐 [CSPR.cloud](https://docs.cspr.cloud/)** - Get blockchain data -**🔐 [CSPR.click](https://docs.cspr.click/)** - Handle wallet connections -**🎨 CSPR.design** - Build beautiful UIs - -```jsx -// Data from CSPR.cloud + UI from CSPR.design = 🚀 -const DeployInfo = ({ deploy }) => ( - - Deploy Cost: - - -); -``` - -## Check examples in the storybook +## Storybook examples -Explore live previews of every component, complete with usage guidelines and props. See how each UI element behaves in real-world scenarios. No guesswork, just plug and play. +Explore [CSPR.design Storybook](https://storybook.cspr.design) for live previews of every component, complete with usage guidelines and props. See how each UI element behaves in real-world scenarios. No guesswork, just plug and play. -```bash -# View components in Storybook -npm run build-storybook && npm run storybook +![CSPR.design Storybook](docs/images/storybook.png) -# Build library -npm run build:dist -``` -### Troubleshooting +## Troubleshooting -**Vite + styled-components issue?** Add to your `vite.config.js`: +Please add the following to your `vite.config.js` if you are experiencing issues with `vite` and `styled-components`: ```js resolve: { @@ -96,17 +71,17 @@ resolve: { ## Resources -📖 **[Full Documentation](https://cspr.design/)** - Complete guide -🎨 **[Storybook](https://storybook.cspr.design/)** - Interactive components -🐛 **[Report Issues](https://github.com/make-software/cspr-design/issues)** - Bugs & features -💬 **[Community](telegram-url)** - Get help & discuss + +📕 **[Storybook](https://storybook.cspr.design)**: Interactive examples +🐞 **[Report Issues](https://github.com/make-software/cspr-design/issues)**: Please report issues here +💬 **[Casper Telegram Community](https://t.me/CSPRDevelopers)**: Ask developers and fellow builders for help ---
-**Built by [MAKE](https://make.services) for the Casper ecosystem** +⭐ **Star this repo if CSPR.design helped you build something cool!** -⭐ **Star this repo if CSPR.design helped you build something cool!** +Built by [MAKE](https://makegroup.io) for the Casper ecosystem
diff --git a/docs/images/storybook.png b/docs/images/storybook.png new file mode 100644 index 00000000..4e387b45 Binary files /dev/null and b/docs/images/storybook.png differ diff --git a/docs/overview.md b/docs/overview.md deleted file mode 100644 index e0622002..00000000 --- a/docs/overview.md +++ /dev/null @@ -1,50 +0,0 @@ -## Overview - -CSPR.design is a UI library designed to provide a set of reusable components and styles for building user interfaces in the Casper ecosystem. It is built with React and styled-components, leveraging modern web technologies to create a consistent and visually appealing design system. -Adapted for use in Casper ecosystem projects, this library provides a consistent design language and functionality across applications. - -### To install in yout project, run: - -`npm i github:make-software/cspr-design` - -### To run this project locally, follow these steps: - -#### Clone repository: - -`git clone git@github.com:make-software/cspr-design.git` - -#### In the project directory, you need to build and run storybook: - - `npm run build-storybook` - - `npm run storybook` - -#### To make the prod build: - -`npm run build:dist` - -Builds the app for production to the `dist` folder.\ -It correctly bundles React in production mode and optimizes the build for the best performance. - -The build is minified and the filenames include the hashes.\ -Your app is ready to be deployed! - - - -#### DEVELOPER NOTE: - - In rare cases, if your project using `vite && styled-components`, it could be a race condition with the `styled-components` -from library. - -Here a solution to fix it: - -Add the following to your `vite.config.js`: -```js -resolve: { - alias: { - 'styled-components': resolve(__dirname, 'node_modules', 'styled-components'), - }, -}, -``` -##### Here is the link to explanation to official documentation: -https://styled-components.com/docs/faqs#why-am-i-getting-a-warning-about-several-instances-of-module-on-the-page \ No newline at end of file diff --git a/package.json b/package.json index 4f8a218b..14be090d 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,18 @@ { "name": "@make-software/cspr-design", "version": "2.0.0", + "description": "React-based UI component library powering Casper Blockchain applications", "main": "dist/cspr-design.umd.js", "module": "dist/cspr-design.es.js", "types": "dist/lib/index.d.ts", "type": "module", "repository": "git://github.com/make-software/cspr-design", + "keywords": [ + "casper", + "blockchain", + "react", + "web3" + ], "exports": { ".": { "import": "./dist/cspr-design.es.js", diff --git a/src/01-Home.mdx b/src/01-Home.mdx index b1d45f0a..d9dea0aa 100644 --- a/src/01-Home.mdx +++ b/src/01-Home.mdx @@ -22,7 +22,7 @@ It provides a consistent design language, reusable components, and shared stylin # Get started -Install from [NPM](https://www.npmjs.com/package/@make-software/cspr-design) to access ready-to-use components that bring the beloved [Casper blockchain](https://casper.networ) community UI to your dApp: +Install from [NPM](https://www.npmjs.com/package/@make-software/cspr-design) to access ready-to-use components that bring the beloved [Casper blockchain](https://casper.network) community UI to your dApp: ``` npm install @make-software/cspr-design --save