@soyfri/template 1.0.3 → 1.0.5
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 +122 -23
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,39 +1,138 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @soyfri/template
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
## Features
|
|
6
|
-
|
|
7
|
-
- **Theme Layout Helpers**: Functions to streamline the implementation of Metronic's layout components.
|
|
8
|
-
- **Utility Variables**: Predefined variables for consistent theming and styling across your application.
|
|
9
|
-
- **CSS Utility Classes**: A collection of classes to apply common styles effortlessly.
|
|
3
|
+
## Description
|
|
4
|
+
This package contains a Metronic template specifically designed for FRI frontend projects. It provides a set of pre-built components, styles, and utilities to streamline frontend development.
|
|
10
5
|
|
|
11
6
|
## Installation
|
|
12
|
-
|
|
13
|
-
To install the package, run:
|
|
14
|
-
|
|
15
7
|
```bash
|
|
16
|
-
npm install
|
|
8
|
+
npm install @soyfri/template
|
|
9
|
+
# or
|
|
10
|
+
yarn add @soyfri/template
|
|
17
11
|
```
|
|
18
12
|
|
|
19
|
-
##
|
|
13
|
+
## Requirements
|
|
14
|
+
### Peer Dependencies
|
|
15
|
+
- React >=16.8.0
|
|
16
|
+
- React DOM >=16.8.0
|
|
20
17
|
|
|
21
|
-
|
|
18
|
+
## Usage
|
|
22
19
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
20
|
+
### Basic Layout
|
|
21
|
+
Create a basic application layout using the package's wrapper components:
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
import { HeaderWrapper, FooterWrapper, Content } from '@soyfri/template';
|
|
25
|
+
|
|
26
|
+
function App() {
|
|
27
|
+
return (
|
|
28
|
+
<>
|
|
29
|
+
<HeaderWrapper />
|
|
30
|
+
<Content>
|
|
31
|
+
{/* Your content here */}
|
|
32
|
+
</Content>
|
|
33
|
+
<FooterWrapper />
|
|
34
|
+
</>
|
|
35
|
+
);
|
|
36
|
+
}
|
|
26
37
|
```
|
|
27
38
|
|
|
28
|
-
|
|
39
|
+
### Styling
|
|
40
|
+
To import the main SCSS stylesheet, add the following import to your main stylesheet or entry file:
|
|
29
41
|
|
|
30
|
-
|
|
42
|
+
```scss
|
|
43
|
+
@import '@soyfri/template/_metronic/assets/sass/style.react.scss';
|
|
44
|
+
```
|
|
31
45
|
|
|
32
|
-
|
|
46
|
+
### Internationalization
|
|
47
|
+
The package includes i18n support. To use it:
|
|
33
48
|
|
|
34
|
-
|
|
49
|
+
```tsx
|
|
50
|
+
import { MetronicI18nProvider, setLanguage } from '@soyfri/template';
|
|
35
51
|
|
|
36
|
-
|
|
52
|
+
function App() {
|
|
53
|
+
return (
|
|
54
|
+
<MetronicI18nProvider>
|
|
55
|
+
{/* Your app content */}
|
|
56
|
+
</MetronicI18nProvider>
|
|
57
|
+
);
|
|
58
|
+
}
|
|
59
|
+
```
|
|
37
60
|
|
|
38
|
-
|
|
61
|
+
## Features
|
|
62
|
+
- Pre-built React components
|
|
63
|
+
- Responsive design
|
|
64
|
+
- SCSS styling
|
|
65
|
+
- Internationalization support
|
|
66
|
+
- Easy integration with FRI frontend projects
|
|
67
|
+
|
|
68
|
+
## Avilable Imports and utils
|
|
69
|
+
- Layout Core
|
|
70
|
+
- HeaderWrapper
|
|
71
|
+
- FooterWrapper
|
|
72
|
+
- Content
|
|
73
|
+
- Sidebar
|
|
74
|
+
- ScrollTop
|
|
75
|
+
- Toolbar
|
|
76
|
+
- MasterLayout
|
|
77
|
+
- MasterInit
|
|
78
|
+
|
|
79
|
+
---
|
|
80
|
+
- LayoutProvider
|
|
81
|
+
- PageDataProvider
|
|
82
|
+
- useLayout
|
|
83
|
+
---
|
|
84
|
+
- ThemeModeProvider
|
|
85
|
+
- ThemeModeSwitcher
|
|
86
|
+
---
|
|
87
|
+
- MetronicI18nProvider
|
|
88
|
+
- i18nProvider
|
|
89
|
+
- setLanguage
|
|
90
|
+
- useLang
|
|
91
|
+
---
|
|
92
|
+
- FeedsWidget2, FeedsWidget3, FeedsWidget4, FeedsWidget5, FeedsWidget6
|
|
93
|
+
- MixedWidget1 through MixedWidget15
|
|
94
|
+
- ListsWidget1 through ListsWidget9
|
|
95
|
+
- StatisticsWidget1 through StatisticsWidget6
|
|
96
|
+
- Check the metronic docs for more information: tronic docs for more information
|
|
97
|
+
---
|
|
98
|
+
|
|
99
|
+
- KTIcon
|
|
100
|
+
- KTCard
|
|
101
|
+
- KTCardBody
|
|
102
|
+
- KTSVG
|
|
103
|
+
- CreateAppModal
|
|
104
|
+
- SelectLocationModal
|
|
105
|
+
- InviteUsers
|
|
106
|
+
- UpgradePlan
|
|
107
|
+
- toAbsoluteUrl
|
|
108
|
+
- getLayoutFromLocalStorage
|
|
109
|
+
- setLayoutToLocalStorage
|
|
110
|
+
- getEmptyCssClasses
|
|
111
|
+
- getEmptyCSSVariables
|
|
112
|
+
- getEmptyHTMLAttributes
|
|
113
|
+
- ID type
|
|
114
|
+
- PaginationState
|
|
115
|
+
- SortState
|
|
116
|
+
- FilterState
|
|
117
|
+
- SearchState
|
|
118
|
+
- QueryState
|
|
119
|
+
---
|
|
120
|
+
|
|
121
|
+
- CookieComponent
|
|
122
|
+
- DrawerComponent
|
|
123
|
+
- FeedbackComponent
|
|
124
|
+
- ImageInputComponent
|
|
125
|
+
- ScrollComponent
|
|
126
|
+
- ScrollTopComponent
|
|
127
|
+
- StepperComponent
|
|
128
|
+
- StickyComponent
|
|
129
|
+
- ToggleComponent
|
|
130
|
+
- PasswordMeterComponent
|
|
131
|
+
- SwapperComponent
|
|
132
|
+
- MenuComponent
|
|
133
|
+
- SearchComponent
|
|
134
|
+
## License
|
|
135
|
+
MIT
|
|
39
136
|
|
|
137
|
+
## Support
|
|
138
|
+
For support, please contact the FRI frontend development team.
|