You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Finally it has arrived! A common design component library for all front-end platforms in the making. Are you using **ReactJS**...Let's go! Running **NextJS**... no sweat! ~~Are you using **VueJS**_(or Nuxt)_... We've got you coverd aswell. :grin:~~
3
+
A comprehensive React component library built with TypeScript and styled-components. This library provides a complete set of pre-styled, customizable UI components following atomic design principles, designed for internal Schuberg Philis projects.
4
4
5
-
With this platform it's easy to use and re-use default components without having to maintain them yourself. This platform will give you freedom by using a lot of pre-styled components for you website together with the ease of use of conventional platforms.
5
+
With this library, you can quickly build consistent, accessible user interfaces without maintaining component code yourself. All components are fully themed and support both light and dark modes out of the box.
6
6
7
-
We've chosen to style everything for internal use and projects that need styling as default. But don't judge a book by its cover. It's possible to use a lot of predefined style variants and customize the components with use styling variables. _(do not mistake them with css-variables)_
7
+
## Features
8
8
9
-
## Platforms
9
+
- 🎨 Complete theming system with light/dark mode support
- ⚡ Built with modern React (v19) and styled-components (v6)
10
16
11
-
This project is running on ReactJS together with some react based packages needed for styling. But our goal is that this can be used on multiple platforms:
| NextJS | ✅ | Works seamlessly with Next.js applications |
21
25
22
-
Using these components you only need to add this package to your project
26
+
## Installation
23
27
24
-
### Install
28
+
Install the package using your preferred package manager:
25
29
26
30
```bash
27
31
pnpm add @schubergphilis/sbp-frontend-style
28
32
29
33
# Or with npm:
30
-
31
34
npm install @schubergphilis/sbp-frontend-style
32
35
```
33
36
34
-
### React
37
+
### Peer Dependencies
38
+
39
+
This library requires React 19+ as a peer dependency:
40
+
41
+
```json
42
+
"peerDependencies": {
43
+
"react": "^19.2.3",
44
+
"react-dom": "^19.2.3"
45
+
}
46
+
```
47
+
48
+
## Quick Start
35
49
36
-
Within the base of the application it needs a Style wrapper **\<CloudStyle\>**to set the default styling and this will also be the input for customizing the components for your needs.
50
+
Wrap your application with the `<CloudStyle>` component to enable theming and default styles:
The `<CloudStyle>` component provides theme configuration for all child components. It applies global styles and CSS resets based on [Josh Comeau's CSS Reset](https://www.joshwcomeau.com/css/custom-css-reset/).
The library includes a live demo/playground application built with Vite:
176
+
177
+
```bash
178
+
pnpm dev
179
+
# or
180
+
npm run dev
181
+
```
182
+
183
+
Open [http://localhost:3005](http://localhost:3005) to view the interactive component showcase.
55
184
56
-
The basis of this style package is based upon React together wiht Styled-Components. When using this package inside a VueJS application there are some small differences and additional packages needed to format the properies towards the correct state.
185
+
### Building the Library
57
186
58
-
## CloudStyle settings
187
+
Build the library for distribution:
59
188
60
-
Within the CloudStyle component it is possible to make changes to the overall components. It also contains some base styling rules and it will reset/normalize all HTML components to a base setup.
| isDarkMode | boolean | false | true | Changing the styling between dark mode and light mode |
66
-
| isLargeMode | boolean | false | true | Changing the base font size from **16px** to **24px**. All components are based on **em** and **rem** and will scale up accordingly |
67
-
| lightStyle | DefaultStyle | undefined | true | based upon **DefaultStyle** interface it's possible to overwrite the default styling of each component |
68
-
| darkStyle | DefaultStyle | undefined | true | based upon **DefaultStyle** interface it's possible to overwrite the default darkStyle. It will keep in mind the overall styling and the changes that've been done within **lightStyle** property. |
69
-
| Childeren | JSX.Element \| JSX.Element[]\| React.ReactNode | null | false | Children are mandatory and can can be all types of components |
195
+
This uses Rollup to create optimized ESM and CJS bundles in the `dist` folder.
70
196
71
-
##Startup Development
197
+
### Running Tests
72
198
73
-
In the project directory, you can run:
199
+
Launch the Jest test runner:
74
200
75
-
### `pnpm start`
201
+
```bash
202
+
pnpm test
203
+
# or
204
+
npm test
205
+
```
76
206
77
-
Runs the app in the development mode.\
78
-
Open [https://localhost:3005](https://localhost:3005) to view it in the browser.
207
+
For debugging tests:
79
208
80
-
The page will reload if you make edits.\
81
-
You will also see any lint errors in the console.
209
+
```bash
210
+
pnpm test:debug
211
+
```
212
+
213
+
### Linting
82
214
83
-
### `pnpm test`
215
+
```bash
216
+
pnpm lint
217
+
```
84
218
85
-
Launches the test runner in the interactive watch mode.\
86
-
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
219
+
## Package Exports
87
220
88
-
### `pnpm build`
221
+
The library provides both ESM and CommonJS exports:
222
+
223
+
```json
224
+
{
225
+
"exports": {
226
+
"types": "./dist/index.d.ts",
227
+
"import": "./dist/esm/index.mjs.js",
228
+
"require": "./dist/cjs/index.js"
229
+
}
230
+
}
231
+
```
89
232
90
-
Builds the app for production to the `build` folder.\
91
-
It correctly bundles React in production mode and optimizes the build for the best performance.
233
+
## Contributing
92
234
93
-
The build is minified and the filenames include the hashes.\
94
-
Your app is ready to be deployed!
235
+
This library uses:
236
+
-**TypeScript** for type safety
237
+
-**styled-components** for styling
238
+
-**Rollup** for library bundling
239
+
-**Vite** for development
240
+
-**Jest** for testing
241
+
-**ESLint** and **Prettier** for code quality
95
242
96
-
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
243
+
## License
97
244
98
-
## Learn More
245
+
MIT
99
246
100
-
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
247
+
## Repository
101
248
102
-
To learn React, check out the [React documentation](https://reactjs.org/).
0 commit comments