Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hello-softis/andromeda
Design System used by Softis.
https://github.com/hello-softis/andromeda
design-system front-end javascript react stitches storybook tailwind tailwindcss typescript
Last synced: 4 months ago
JSON representation
Design System used by Softis.
- Host: GitHub
- URL: https://github.com/hello-softis/andromeda
- Owner: hello-softis
- License: other
- Created: 2024-07-10T19:37:01.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-07-26T00:51:09.000Z (6 months ago)
- Last Synced: 2024-09-29T22:41:48.109Z (4 months ago)
- Topics: design-system, front-end, javascript, react, stitches, storybook, tailwind, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/~hello-softis
- Size: 9.7 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# Andromeda
Andromeda is the Design System of Softis, designed to create cohesive and efficient user interfaces. With reusable components, clear guidelines, and comprehensive documentation, Andromeda helps build digital products with consistency and quality.
---
## Badges
## Project Status
---
## Table of Contents
- [Prerequisites and How to Run the App](#prerequisites-and-how-to-run-the-app)
- [How to use](#how-to-use-andromeda)
- [Integration with Tailwind](#integration-with-tailwind)
- [Technologies Used](#technologies-used)
- [Author](#author)
- [License](#license)
---
## Prerequisites and How to Run the App
### Prerequisites
- Node.js version 21.x or higher
- Yarn or npm
Here's the updated section in English, without the Tailwind integration part:
---
## How to Use Andromeda
To integrate Andromeda into your project, follow these steps:
### 1. Install Dependencies
First, add Andromeda as a dependency in your project. Run the following commands to install the tokens package and the React components package:
```bash
npm install @hello.softis/andromeda-tokens
npm install @hello.softis/andromeda-react
```
### 2. Configure Design Tokens
Andromeda’s tokens provide values for colors, font sizes, and other design styles. To use them in your project, import the tokens and apply them in your styling files or directly in your components.
Here’s an example of how you might import and use tokens in a CSS-in-JS solution or inline styles:
```javascript
import * as tokens from '@hello.softis/andromeda-tokens';
const styles = {
color: tokens.twColors.primary,
fontSize: tokens.fontSizes.large,
};
function App() {
return (
Welcome to Andromeda
);
}
export default App;
```
### 3. Use React Components
The `@hello.softis/andromeda-react` package includes a set of pre-configured components that follow the Design System guidelines. To use them, import the desired components and include them in your project:
```javascript
import { Button, Card } from '@hello.softis/andromeda-react';
function App() {
return (
Welcome to Andromeda
Click Me
);
}
export default App;
```
### 4. Start Your Project
After setting up the dependencies and integrating the tokens and components, start your project to see the changes in action:
```bash
npm run dev
```
---
Feel free to let me know if there are any other changes you need!
## Integration with Tailwind
Andromeda can be easily integrated with Tailwind CSS, allowing you to use the colors defined in the Design System directly in your Tailwind utility classes. To do this, you need to configure your project's tailwind.config.js file to import the colors from the Andromeda tokens package.
First, install the tokens package:
```bash
npm install @hello.softis/andromeda-tokens
```
Next, configure the tailwind.config.js file to add Andromeda's colors:
```bash
/** @type {import('tailwindcss').Config} */
import * as tokens from '@hello.softis/andromeda-tokens';
export default {
content: ['../react/src/**/*.{js,ts,jsx,tsx}','./src/**/*.{js,ts,jsx,tsx,mdx}'],
theme: {
extend: {
colors: tokens.twColors,
fontSize: tokens.fontSizes,
fontWeight: tokens.fontWeights,
fontFamily: {
sans: tokens.fonts.default,
mono: tokens.fonts.code,
},
lineHeight: tokens.lineHeights,
borderRadius: tokens.radii,
spacing: tokens.space,
},
},
plugins: [],
};
```
With this configuration, you can use Andromeda's colors directly in Tailwind CSS classes, ensuring visual consistency and leveraging the benefits of a well-defined design system.
---
## Technologies Used
#### Others
- [Radix UI](https://radix-ui.com/ "Radix")
- [Chakra-UI](https://chakra-ui.com/ "Chakra")
- [Stitches](https://stitches.dev/ "Stitches")
- [Tailwind Variants](https://www.tailwind-variants.org/ "Tailwind Variants")
- [HugeIcons](https://hugeicons.com/ "HugeIcons")
## Author
Developed by [Softis©](https://github.com/hello-softis). Get in touch!
## License
This project is licensed under a closed license. See the [LICENSE](LICENSE.md) file for more details.