Skip to content

Commit 8164cac

Browse files
naveen-bandela-au2naveen-bandela-au2
authored
Merge pull request #19 from zopdev/development
added the CODE_OF_CONDUCT, CONTRIBUTING and updated the readme file with local setup guide
2 parents 05fdcae + 3327e8a commit 8164cac

File tree

5 files changed

+249
-41
lines changed

5 files changed

+249
-41
lines changed

‎.storybook/preview.js‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import '../src/index.css';
1+
import "../src/index.css";
22

33
import { withThemeByClassName } from "@storybook/addon-themes";
44

@@ -13,14 +13,15 @@ const preview = {
1313
},
1414
},
1515

16-
decorators: [withThemeByClassName({
16+
decorators: [
17+
withThemeByClassName({
1718
themes: {
18-
// nameOfTheme: 'classNameForTheme',
19-
'ZopDev': 'zopdev',
20-
'Forest': 'forest'
19+
ZopDev: "zopdev",
20+
Dark: "forest",
2121
},
22-
defaultTheme: 'ZopDev',
23-
})]
22+
defaultTheme: "ZopDev",
23+
}),
24+
],
2425
};
2526

2627
export default preview;

‎CODE_OF_CONDUCT.md‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
# Contributor Covenant Code of Conduct
2+
3+
## Our Pledge
4+
5+
We as members, contributors, and leaders pledge to make participation in our
6+
community a harassment-free experience for everyone, regardless of age, body
7+
size, visible or invisible disability, ethnicity, sex characteristics, gender
8+
identity and expression, level of experience, education, socio-economic status,
9+
nationality, personal appearance, race, religion, or sexual identity
10+
and orientation.
11+
12+
We pledge to act and interact in ways that contribute to an open, welcoming,
13+
diverse, inclusive, and healthy community.
14+
15+
## Our Standards
16+
17+
Examples of behavior that contributes to a positive environment for our
18+
community include:
19+
20+
- Demonstrating empathy and kindness toward other people
21+
- Being respectful of differing opinions, viewpoints, and experiences
22+
- Giving and gracefully accepting constructive feedback
23+
- Accepting responsibility and apologizing to those affected by our mistakes,
24+
and learning from the experience
25+
- Focusing on what is best not just for us as individuals, but for the
26+
overall community
27+
28+
Examples of unacceptable behavior include:
29+
30+
- The use of sexualized language or imagery, and sexual attention or
31+
advances of any kind
32+
- Trolling, insulting or derogatory comments, and personal or political attacks
33+
- Public or private harassment
34+
- Publishing others' private information, such as a physical or email
35+
address, without their explicit permission
36+
- Other conduct which could reasonably be considered inappropriate in a
37+
professional setting
38+
39+
## Enforcement Responsibilities
40+
41+
Community leaders are responsible for clarifying and enforcing our standards of
42+
acceptable behavior and will take appropriate and fair corrective action in
43+
response to any behavior that they deem inappropriate, threatening, offensive,
44+
or harmful.
45+
46+
Community leaders have the right and responsibility to remove, edit, or reject
47+
comments, commits, code, wiki edits, issues, and other contributions that are
48+
not aligned to this Code of Conduct, and will communicate reasons for moderation
49+
decisions when appropriate.
50+
51+
## Scope
52+
53+
This Code of Conduct applies within all community spaces, and also applies when
54+
an individual is officially representing the community in public spaces.
55+
Examples of representing our community include using an official e-mail address,
56+
posting via an official social media account, or acting as an appointed
57+
representative at an online or offline event.
58+
59+
## Enforcement
60+
61+
Instances of abusive, harassing, or otherwise unacceptable behavior may be
62+
reported to the community leaders responsible for enforcement at
63+
[[email protected]](mailto:[email protected]).
64+
All complaints will be reviewed and investigated promptly and fairly.
65+
66+
All community leaders are obligated to respect the privacy and security of the
67+
reporter of any incident.
68+
69+
## Enforcement Guidelines
70+
71+
Community leaders will follow these Community Impact Guidelines in determining
72+
the consequences for any action they deem in violation of this Code of Conduct:
73+
74+
### 1. Correction
75+
76+
**Community Impact**: Use of inappropriate language or other behavior deemed
77+
unprofessional or unwelcome in the community.
78+
79+
**Consequence**: A private, written warning from community leaders, providing
80+
clarity around the nature of the violation and an explanation of why the
81+
behavior was inappropriate. A public apology may be requested.
82+
83+
### 2. Warning
84+
85+
**Community Impact**: A violation through a single incident or series
86+
of actions.
87+
88+
**Consequence**: A warning with consequences for continued behavior. No
89+
interaction with the people involved, including unsolicited interaction with
90+
those enforcing the Code of Conduct, for a specified period of time. This
91+
includes avoiding interactions in community spaces as well as external channels
92+
like social media. Violating these terms may lead to a temporary or
93+
permanent ban.
94+
95+
### 3. Temporary Ban
96+
97+
**Community Impact**: A serious violation of community standards, including
98+
sustained inappropriate behavior.
99+
100+
**Consequence**: A temporary ban from any sort of interaction or public
101+
communication with the community for a specified period of time. No public or
102+
private interaction with the people involved, including unsolicited interaction
103+
with those enforcing the Code of Conduct, is allowed during this period.
104+
Violating these terms may lead to a permanent ban.
105+
106+
### 4. Permanent Ban
107+
108+
**Community Impact**: Demonstrating a pattern of violation of community
109+
standards, including sustained inappropriate behavior, harassment of an
110+
individual, or aggression toward or disparagement of classes of individuals.
111+
112+
**Consequence**: A permanent ban from any sort of public interaction within
113+
the community.
114+
115+
## Attribution
116+
117+
This Code of Conduct is adapted from the [Contributor Covenant][homepage],
118+
version 2.0, available at
119+
https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
120+
121+
Community Impact Guidelines were inspired by [Mozilla's code of conduct
122+
enforcement ladder](https://github.com/mozilla/diversity).
123+
124+
[homepage]: https://www.contributor-covenant.org
125+
126+
For answers to common questions about this code of conduct, see the FAQ at
127+
https://www.contributor-covenant.org/faq. Translations are available at
128+
https://www.contributor-covenant.org/translations.

‎CONTRIBUTING.md‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
# Contributing Guidelines
2+
3+
Thank you for your interest in contributing to this project! We welcome contributions to both the frontend and backend APIs, which are maintained in the same repository.
4+
5+
## Code of Conduct
6+
7+
Please read and follow our [Code of Conduct](CODE_OF_CONDUCT.md) to ensure a respectful and inclusive environment for everyone.
8+
9+
## How to Contribute
10+
11+
### Reporting Bugs
12+
13+
Did you find a bug? Encountered a hiccup in deployment? Discripency in documentation? We want to know! Raise an issue to let us know to get it fixed swiftly.
14+
15+
- Open an issue with a clear title and description.
16+
- Include steps to reproduce, expected behavior, actual behavior, and environment details.
17+
18+
### Suggesting Enhancements
19+
20+
If you spot a feature that isn't part of our official plan but could propel Zopdev forward, don't hesitate. Create an enhancement issue, and let us know you're ready to take the lead. We'll be quick to respond.
21+
22+
- Open an issue describing the enhancement you’d like to see.
23+
- Explain the motivation and potential use case.
24+
25+
#### Talk to us first
26+
27+
We encourage you to [discuss](https://github.com/zopdev/zopdev/discussions) your ideas before starting work on a large feature or change. This helps us ensure that your contribution aligns with the project goals and avoids duplication of effort.
28+
29+
### Submitting Pull Requests
30+
31+
1. Fork the repository and create a new branch.
32+
2. Make your changes, including tests and documentation if applicable.
33+
3. Ensure code passes linting and tests.
34+
4. Submit a pull request to the `main` branch with a descriptive title and summary.
35+
36+
<!-- ## Development Setup
37+
Follow respective setup instructions for frontend and backend.
38+
- **Frontend:** [Frontend Setup Instructions](https://github.com/zopdev/zopdev/frontend/README.md)
39+
- **Backend:** [Backend Setup Instructions](https://github.com/zopdev/zopdev/backend/README.md) -->
40+
41+
## Testing Policies
42+
43+
Testing is a crucial aspect of software development, and adherence to these guidelines ensures the stability, reliability, and maintainability of the zopdev codebase.
44+
45+
## Code Style
46+
47+
- **Frontend:** Follow the [JavaScript Standard Style Guide](https://github.com/standard/standard)
48+
49+
---
50+
51+
We appreciate your contributions and your effort to make this project better!

‎README.md‎

Lines changed: 51 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,53 @@
11
# UI Component Library
22

3-
This component library is made for React using tailwindcss.
4-
Goal of this project is to provide ready to use UI components to
5-
develop UI applications faster.
6-
7-
All components are documented in storybook. Use `npm run start`
8-
to start the storybook locally. Latest version of stories can also
9-
be accessed at https://zop.dev/ui-components
10-
11-
## Developer Notes
12-
All components needs to support variety of themes to be used across
13-
multiple projects with different design language. Therefore, we can
14-
not use absolute values for colors, sizes, margin, padding, font family
15-
etc in components. Using arbitary values like `bg-[#bada55] text-[22px]`
16-
are not allowed.
17-
18-
For colors, do not use something like `bg-slate-800`. Only allowed values are: primary, secondary, white, black, gray,
19-
red, yellow, green. In this context, red is used as a variable instead of
20-
an absolute color like #ff0000. One can use `text-red-200` to indicate
21-
error in the component or `text-yellow-500` to indicate warning. A theme can choose
22-
to override this value to something which is more appropriate.
23-
24-
Similarly, we will only use tailwind default classes for font-size.
3+
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
4+
[![React](https://img.shields.io/badge/React-18+-61dafb?logo=react&logoColor=white)](https://react.dev/)
5+
[![TailwindCSS](https://img.shields.io/badge/TailwindCSS-3.x-38bdf8?logo=tailwind-css&logoColor=white)](https://tailwindcss.com/)
6+
[![Storybook](https://img.shields.io/badge/Storybook-7.x-ff4785?logo=storybook&logoColor=white)](https://storybook.js.org/)
7+
8+
A **modern React + TailwindCSS UI component library** designed to help you build beautiful, accessible, and theme-friendly applications faster.
9+
10+
👉 Explore live stories: **[zop.dev/ui-components](https://zop.dev/ui-components)**
11+
12+
---
13+
14+
## ✨ Features
15+
16+
- 📦 **Ready-to-use components** with full Storybook documentation
17+
- 🎨 **Theme-aware** — works across multiple design systems
18+
- 🛠 **TailwindCSS utility classes only** (no arbitrary values)
19+
- ⚡ **Fast development** — drop in and ship UI quickly
20+
- 🔄 **Composable & flexible** — designed for reuse across projects
21+
22+
---
23+
24+
## 📖 Storybook
25+
26+
Run Storybook locally:
27+
28+
```bash
29+
npm install
30+
npm run start
31+
```
32+
33+
This launches Storybook at [http://localhost:6006](http://localhost:6006).
34+
35+
---
36+
37+
## 📝 Developer Guidelines
38+
39+
To ensure **theme compatibility** and **design consistency**, follow these rules:
40+
41+
1. **No arbitrary values**
42+
43+
- ❌ `bg-[#bada55] text-[22px]`
44+
- ✅ `bg-primary text-lg`
45+
46+
2. **Allowed color tokens only**
47+
48+
- `primary`, `secondary`, `white`, `black`, `gray`, `red`, `yellow`, `green`
49+
- Use semantic Tailwind classes like `text-red-200` (error) or `text-yellow-500` (warning).
50+
- Actual values may be overridden by project themes.
51+
52+
3. **Font sizes**
53+
- Only use Tailwind’s default typography scale (`text-sm`, `text-lg`, etc).

‎tailwind.config.js‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/** @type {DefaultColors} */
2-
const colors = require('tailwindcss/colors');
3-
const { createThemes } = require('tw-colors');
2+
const colors = require("tailwindcss/colors");
3+
const { createThemes } = require("tw-colors");
44

55
module.exports = {
66
content: ["./src/**/*.{html,js}"],
@@ -49,14 +49,13 @@ module.exports = {
4949
// ]
5050
// })
5151

52-
createThemes({
53-
forest: {
54-
primary: colors.green
55-
},
56-
zopdev: {
57-
primary: colors.cyan
58-
}
59-
})
52+
createThemes({
53+
forest: {
54+
primary: colors.black,
55+
},
56+
zopdev: {
57+
primary: colors.cyan,
58+
},
59+
}),
6060
],
61-
}
62-
61+
};

0 commit comments

Comments
 (0)