cssier 0.1.4 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +148 -24
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,42 +1,166 @@
|
|
|
1
|
-
#
|
|
1
|
+
# 🪅cssier
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
`cssier` is a React component library designed to simplify inline styling for pseudo-classes and pseudo-elements. With `cssier`, you can easily manage and apply custom styles for standard HTML and SVG elements, making your styling both dynamic and maintainable.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Features
|
|
6
6
|
|
|
7
|
-
- React
|
|
8
|
-
-
|
|
9
|
-
-
|
|
7
|
+
- **Pre-built Components**: Import ready-to-use React components for HTML and SVG tags.
|
|
8
|
+
- **Advanced Styling**: Use the `useStylesheet` hook to manage custom styles for pseudo-classes and pseudo-elements.
|
|
9
|
+
- **TypeScript Support**: Includes TypeScript definitions for a smoother development experience.
|
|
10
|
+
- **Storybook Integration**: Automatically generates Storybook stories for visual testing and documentation.
|
|
11
|
+
- **Public Storybook**: Explore and interact with the components live at [cssier.danberman.dev](https://cssier.danberman.dev).
|
|
10
12
|
|
|
11
|
-
##
|
|
13
|
+
## Installation
|
|
12
14
|
|
|
13
|
-
|
|
15
|
+
To install `cssier`, use npm, Yarn, or pnpm:
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm install cssier
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
or with Yarn:
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
yarn add cssier
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
or with pnpm:
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
pnpm add cssier
|
|
31
|
+
```
|
|
14
32
|
|
|
15
33
|
## Usage
|
|
16
34
|
|
|
17
|
-
|
|
18
|
-
|
|
35
|
+
### Importing Components
|
|
36
|
+
|
|
37
|
+
You can import pre-built React components for HTML and SVG tags from `cssier/components`:
|
|
38
|
+
|
|
39
|
+
```jsx
|
|
40
|
+
import { Button, Svg } from 'cssier/components'
|
|
41
|
+
|
|
42
|
+
const MyComponent = () => (
|
|
43
|
+
<div>
|
|
44
|
+
<Button onClick={() => alert('Clicked!')}>Click Me</Button>
|
|
45
|
+
<Svg width="100" height="100">
|
|
46
|
+
<circle cx="50" cy="50" r="40" stroke="black" strokeWidth="3" fill="red" />
|
|
47
|
+
</Svg>
|
|
48
|
+
</div>
|
|
49
|
+
)
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### Using the `useStylesheet` Hook
|
|
53
|
+
|
|
54
|
+
The `useStylesheet` hook from `cssier/hooks` allows you to apply styles for pseudo-classes (`:hover`, `:focus`, etc.) and pseudo-elements (`::before`, `::after`, etc.) directly to your components.
|
|
55
|
+
|
|
56
|
+
#### Values Returned by `useStylesheet`
|
|
57
|
+
|
|
58
|
+
The `useStylesheet` hook returns an array where:
|
|
59
|
+
|
|
60
|
+
- The first element is a unique CSS class ID that can be applied to the component.
|
|
61
|
+
- The second element is a string of CSS styles that were injected into the document. This is useful for debugging, though you typically won't need to use it in production.
|
|
62
|
+
|
|
63
|
+
```jsx
|
|
64
|
+
import { useStylesheet } from 'cssier/hooks'
|
|
19
65
|
|
|
20
|
-
|
|
66
|
+
const CustomComponent = (props) => {
|
|
67
|
+
const { pseudo, pseudoId: id, ...rest } = props
|
|
68
|
+
const [pseudoId, css] = useStylesheet(pseudo, id)
|
|
21
69
|
|
|
22
|
-
|
|
70
|
+
return (
|
|
71
|
+
<>
|
|
72
|
+
<style>{css}</style>
|
|
73
|
+
<div {...rest} className={`${rest.className ?? ''}pseudoId`}>
|
|
74
|
+
Styled with pseudo-classes and pseudo-elements!
|
|
75
|
+
</div>
|
|
76
|
+
</>
|
|
77
|
+
)
|
|
78
|
+
}
|
|
79
|
+
```
|
|
23
80
|
|
|
24
|
-
|
|
25
|
-
- `build`: Builds the static storybook project.
|
|
26
|
-
- `build:lib`: Builds the component library into the **dist** folder.
|
|
27
|
-
- `lint:fix`: Applies linting based on the rules defined in **.eslintrc.js**.
|
|
28
|
-
- `format:prettier`: Formats files using the prettier rules defined in **.prettierrc**.
|
|
29
|
-
- `test`: Runs testing using watch mode.
|
|
30
|
-
- `test:cov`: Runs testing displaying a coverage report.
|
|
81
|
+
#### Example of Custom Styling with Pseudo-classes
|
|
31
82
|
|
|
32
|
-
|
|
83
|
+
```jsx
|
|
84
|
+
<CustomComponent
|
|
85
|
+
pseudo={{
|
|
86
|
+
hover: { backgroundColor: 'lightblue' },
|
|
87
|
+
focus: { outline: '2px solid blue' },
|
|
88
|
+
}}
|
|
89
|
+
pseudoId="custom-id"
|
|
90
|
+
>
|
|
91
|
+
Hover or focus on me!
|
|
92
|
+
</CustomComponent>
|
|
93
|
+
```
|
|
33
94
|
|
|
34
|
-
|
|
95
|
+
#### Example of Custom Styling with Pseudo-elements
|
|
35
96
|
|
|
36
|
-
|
|
97
|
+
```jsx
|
|
98
|
+
<CustomComponent
|
|
99
|
+
pseudo={{
|
|
100
|
+
before: { content: '"Prefix"', color: 'gray' },
|
|
101
|
+
after: { content: '"Suffix"', color: 'gray' },
|
|
102
|
+
}}
|
|
103
|
+
pseudoId="custom-id"
|
|
104
|
+
>
|
|
105
|
+
Content with pseudo-elements
|
|
106
|
+
</CustomComponent>
|
|
107
|
+
```
|
|
37
108
|
|
|
38
|
-
|
|
109
|
+
### Dynamic Hover Color Example Using `<Button />`
|
|
110
|
+
|
|
111
|
+
Here's an example of using the `<Button />` component from `cssier` to create a button that changes its hover color each time it is clicked:
|
|
112
|
+
|
|
113
|
+
```jsx
|
|
114
|
+
import { useState } from 'react'
|
|
115
|
+
import { Button } from 'cssier/components'
|
|
116
|
+
|
|
117
|
+
const DynamicButton = () => {
|
|
118
|
+
const [colorIndex, setColorIndex] = useState(0)
|
|
119
|
+
const colors = ['lightblue', 'lightcoral', 'lightgreen', 'lightgoldenrodyellow']
|
|
120
|
+
|
|
121
|
+
const handleClick = () => {
|
|
122
|
+
setColorIndex((prevIndex) => (prevIndex + 1) % colors.length)
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
return (
|
|
126
|
+
<Button
|
|
127
|
+
pseudo={{
|
|
128
|
+
hover: { backgroundColor: colors[colorIndex] },
|
|
129
|
+
}}
|
|
130
|
+
onClick={handleClick}
|
|
131
|
+
>
|
|
132
|
+
Click me to change hover color!
|
|
133
|
+
</Button>
|
|
134
|
+
)
|
|
135
|
+
}
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
### Props and Compatibility
|
|
139
|
+
|
|
140
|
+
The components provided by `cssier` accept all standard props for their HTML or SVG counterparts. For example, a `<Button>` component will accept props such as `onClick`, `disabled`, `type`, etc., just like a native HTML `<button>` element.
|
|
141
|
+
|
|
142
|
+
## Public Storybook
|
|
143
|
+
|
|
144
|
+
Explore and interact with the `cssier` components in our publicly available Storybook at [cssier.danberman.dev](https://cssier.danberman.dev). This is a great way to see the components in action and understand how different styles and props affect their appearance.
|
|
145
|
+
|
|
146
|
+
## Contributing
|
|
147
|
+
|
|
148
|
+
To contribute to `cssier`:
|
|
149
|
+
|
|
150
|
+
1. Fork the repository.
|
|
151
|
+
2. Create a new branch (`git checkout -b feature/your-feature`).
|
|
152
|
+
3. Make your changes.
|
|
153
|
+
4. Commit your changes (`git commit -am 'Add new feature'`).
|
|
154
|
+
5. Push to the branch (`git push origin feature/your-feature`).
|
|
155
|
+
6. Create a Pull Request on GitHub.
|
|
39
156
|
|
|
40
157
|
## License
|
|
41
158
|
|
|
42
|
-
[
|
|
159
|
+
`cssier` is licensed under the MIT License. See the [LICENSE](LICENSE) file for more details.
|
|
160
|
+
|
|
161
|
+
## Additional Resources
|
|
162
|
+
|
|
163
|
+
- [GitHub Repository](https://github.com/DanBermanTech/cssier) – Source code and issue tracking.
|
|
164
|
+
- [Storybook Documentation](https://storybook.js.org/) – Learn how to use Storybook with your components.
|
|
165
|
+
|
|
166
|
+
Thank you for choosing `cssier`! We hope it makes managing your styles more intuitive and flexible.
|