cherry-styled-components 0.1.0-2 → 0.1.0-20

package/.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

package/.prettierrc

@@ -1,11 +1,11 @@
 {
-	"printWidth": 80,
-	"useTabs": true,
-	"tabWidth": 4,
-	"endOfLine": "lf",
-	"semi": true,
-	"singleQuote": false,
-	"trailingComma": "all",
-	"bracketSpacing": true,
-	"arrowParens": "always"
+  "printWidth": 100,
+  "useTabs": false,
+  "tabWidth": 2,
+  "endOfLine": "crlf",
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "arrowParens": "always"
 }

package/README.md

@@ -1,15 +1,37 @@
-# Cherry Design System
+# Cherry React Library
+
 ## Introduction
-The **Cherry Design System** is a versatile foundation for your projects. As a starting point, it provides a clean slate—a white label—upon which you can build and extend. Whether you’re creating a web application, mobile app, or any other digital interface, Cherry defines the essential components you need.
 
-## Key Features
-- **White Label Base**: Cherry serves as a neutral canvas, allowing you to customize and brand it according to your project’s requirements.
-- **React Components**: We’ve carefully curated the fundamental building blocks for a typical interface. These include components, typography, color schemes, and layout guidelines.
-- **Theming Support**: Cherry embraces theming, enabling you to adapt the design system to different contexts while maintaining consistency.
-Sanity and Consistency: By adhering to Cherry’s guidelines, you’ll create a cohesive user experience across various screens and interactions.
-- **Open Source**: Cherry takes it a step further by providing ready-to-use source code for the **Figma designs**. This means you not only get the visual templates but also the actual implementation. It’s like having a bridge between your design tool and your codebase.
+Cherry Design System is a versatile foundation for projects. It offers a white label base, ready-to-use Figma designs, open-source React components, built-in support for theming and dark mode. Explore the [docs](https://cherry.design/) to create delightful user interfaces.
+
+---
+
+# Installation
+
+This project requires Node.js v20+ installed.
+
+```bash
+npm install
+```
+
+To run the development environment, use the following command:
+
+```bash
+npm run dev
+```
+
+To build the library for production, use the following command:
+
+```bash
+npm run build
+```
+
+## Community
+
+For help, discussion about best practices, or any other conversation that would benefit from being searchable:
+
+[Discuss Cherry on GitHub](https://github.com/cherry-design-system/styled-components/discussions)
 
-Getting Started
-To begin using Cherry, refer to our comprehensive documentation at [cherry.design](https://cherry.design/). Explore the components, study the design principles, and integrate them seamlessly into your project. Remember, Cherry is not just a set of rules—it’s a toolkit that empowers you to create delightful user interfaces.
+For casual chit-chat with others using Cherry:
 
-Happy designing! 🍒
+[Join the Discord Server](https://discord.gg/6JvcWU5bke)

package/dist/App.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function App(): import("react").JSX.Element;
+export default App;