asma-core-ui 3.0.128-test → 3.0.129-pesterean1
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/CHANGELOG.md +686 -686
- package/Readme.md +76 -76
- package/dist/asma-core-ui.es.js +2 -2
- package/dist/src/components/inputs/select-autocomplete/StyledSelectAutocomplete.d.ts +2 -3
- package/package.json +126 -126
- package/tw-configs/twConfigs.json +122 -122
package/Readme.md
CHANGED
|
@@ -1,76 +1,76 @@
|
|
|
1
|
-
# How to create and use the Design System
|
|
2
|
-
|
|
3
|
-
## Component composition.
|
|
4
|
-
|
|
5
|
-
- When creating components that consists of several components, each component should be styled.
|
|
6
|
-
- Each components that is used to create a "composed" component should be styled, and remember to check if the component alread is styled.
|
|
7
|
-
- When creating a "composed component" evalute if it's really needed to create a composed component, or just document how to use the styled components.
|
|
8
|
-
- MUI often has documentation on how to create composed components.
|
|
9
|
-
|
|
10
|
-
## Documentation and testing
|
|
11
|
-
|
|
12
|
-
- All components shall be documented and tested in Storybook before PR is created.
|
|
13
|
-
|
|
14
|
-
## Changelog
|
|
15
|
-
|
|
16
|
-
The project uses "changesets" to automatically bump version and create a changelog.
|
|
17
|
-
|
|
18
|
-
For each new feature or change run "npx changeset". Choose patch for a change or bug fix, minor for a new feature or major version for a breaking change. This creates a markdown file in .changeset folder. Commit to brach/PR as normal.
|
|
19
|
-
|
|
20
|
-
A PR can have several changesets.
|
|
21
|
-
|
|
22
|
-
The pipeline will automatically bump version and create changelog after merge to master.
|
|
23
|
-
|
|
24
|
-
## Index file
|
|
25
|
-
|
|
26
|
-
- Index files shall not be edited manually.
|
|
27
|
-
- ctix is used for automatically create index files for exporting componens. Run "npm run create-index"
|
|
28
|
-
- 'src/styles/index.ccss' is imported to 'src/theme/customMuiColors.ts' so exporting works with ctix.
|
|
29
|
-
|
|
30
|
-
## Using MUI theme in App
|
|
31
|
-
|
|
32
|
-
```tsx
|
|
33
|
-
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
|
|
34
|
-
import { defaultTheme, customPalettes } from 'asma-core-ui';
|
|
35
|
-
|
|
36
|
-
const dataTheme = window.document.body.attributes.getNamedItem('data-theme');
|
|
37
|
-
|
|
38
|
-
const getTheme = () => {
|
|
39
|
-
switch (dataTheme?.value) {
|
|
40
|
-
case 'fretex':
|
|
41
|
-
return customPalettes.fretex.primary;
|
|
42
|
-
default:
|
|
43
|
-
return null;
|
|
44
|
-
}
|
|
45
|
-
};
|
|
46
|
-
|
|
47
|
-
const theme = createTheme(defaultTheme, {
|
|
48
|
-
palette: {
|
|
49
|
-
...defaultTheme.palette,
|
|
50
|
-
primary: {
|
|
51
|
-
...getTheme(),
|
|
52
|
-
},
|
|
53
|
-
role: customPalettes.role,
|
|
54
|
-
},
|
|
55
|
-
});
|
|
56
|
-
|
|
57
|
-
<React.Fragment>
|
|
58
|
-
<ThemeProvider theme={createMuiTheme(theme)}>
|
|
59
|
-
<... />
|
|
60
|
-
</ThemeProvider>
|
|
61
|
-
</React.Fragment>
|
|
62
|
-
```
|
|
63
|
-
|
|
64
|
-
## Using Components in App
|
|
65
|
-
|
|
66
|
-
```tsx
|
|
67
|
-
import { StyledButton } from 'asma-core-ui';
|
|
68
|
-
|
|
69
|
-
...
|
|
70
|
-
|
|
71
|
-
<>
|
|
72
|
-
<StyledButton>
|
|
73
|
-
Text
|
|
74
|
-
</StyledButton>
|
|
75
|
-
</>
|
|
76
|
-
```
|
|
1
|
+
# How to create and use the Design System
|
|
2
|
+
|
|
3
|
+
## Component composition.
|
|
4
|
+
|
|
5
|
+
- When creating components that consists of several components, each component should be styled.
|
|
6
|
+
- Each components that is used to create a "composed" component should be styled, and remember to check if the component alread is styled.
|
|
7
|
+
- When creating a "composed component" evalute if it's really needed to create a composed component, or just document how to use the styled components.
|
|
8
|
+
- MUI often has documentation on how to create composed components.
|
|
9
|
+
|
|
10
|
+
## Documentation and testing
|
|
11
|
+
|
|
12
|
+
- All components shall be documented and tested in Storybook before PR is created.
|
|
13
|
+
|
|
14
|
+
## Changelog
|
|
15
|
+
|
|
16
|
+
The project uses "changesets" to automatically bump version and create a changelog.
|
|
17
|
+
|
|
18
|
+
For each new feature or change run "npx changeset". Choose patch for a change or bug fix, minor for a new feature or major version for a breaking change. This creates a markdown file in .changeset folder. Commit to brach/PR as normal.
|
|
19
|
+
|
|
20
|
+
A PR can have several changesets.
|
|
21
|
+
|
|
22
|
+
The pipeline will automatically bump version and create changelog after merge to master.
|
|
23
|
+
|
|
24
|
+
## Index file
|
|
25
|
+
|
|
26
|
+
- Index files shall not be edited manually.
|
|
27
|
+
- ctix is used for automatically create index files for exporting componens. Run "npm run create-index"
|
|
28
|
+
- 'src/styles/index.ccss' is imported to 'src/theme/customMuiColors.ts' so exporting works with ctix.
|
|
29
|
+
|
|
30
|
+
## Using MUI theme in App
|
|
31
|
+
|
|
32
|
+
```tsx
|
|
33
|
+
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
|
|
34
|
+
import { defaultTheme, customPalettes } from 'asma-core-ui';
|
|
35
|
+
|
|
36
|
+
const dataTheme = window.document.body.attributes.getNamedItem('data-theme');
|
|
37
|
+
|
|
38
|
+
const getTheme = () => {
|
|
39
|
+
switch (dataTheme?.value) {
|
|
40
|
+
case 'fretex':
|
|
41
|
+
return customPalettes.fretex.primary;
|
|
42
|
+
default:
|
|
43
|
+
return null;
|
|
44
|
+
}
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
const theme = createTheme(defaultTheme, {
|
|
48
|
+
palette: {
|
|
49
|
+
...defaultTheme.palette,
|
|
50
|
+
primary: {
|
|
51
|
+
...getTheme(),
|
|
52
|
+
},
|
|
53
|
+
role: customPalettes.role,
|
|
54
|
+
},
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
<React.Fragment>
|
|
58
|
+
<ThemeProvider theme={createMuiTheme(theme)}>
|
|
59
|
+
<... />
|
|
60
|
+
</ThemeProvider>
|
|
61
|
+
</React.Fragment>
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
## Using Components in App
|
|
65
|
+
|
|
66
|
+
```tsx
|
|
67
|
+
import { StyledButton } from 'asma-core-ui';
|
|
68
|
+
|
|
69
|
+
...
|
|
70
|
+
|
|
71
|
+
<>
|
|
72
|
+
<StyledButton>
|
|
73
|
+
Text
|
|
74
|
+
</StyledButton>
|
|
75
|
+
</>
|
|
76
|
+
```
|