@xaypay/tui 0.0.54 → 0.0.55

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.
Files changed (16) hide show
  1. package/.storybook/main.js +27 -20
  2. package/cli-command.js +3 -0
  3. package/dist/index.es.js +185 -45
  4. package/dist/index.js +186 -45
  5. package/package.json +7 -5
  6. package/src/components/button/index.js +29 -20
  7. package/src/components/input/index.js +134 -34
  8. package/src/components/input/input.module.css +17 -15
  9. package/src/components/typography/index.js +59 -4
  10. package/src/components/typography/typography.stories.js +8 -2
  11. package/src/stories/Introduction.stories.mdx +82 -93
  12. package/src/stories/changelog.stories.mdx +118 -0
  13. package/src/stories/configuration.stories.mdx +317 -0
  14. package/src/stories/documentation.stories.mdx +118 -0
  15. package/tui.config.js +178 -50
  16. package/storybook-static/favicon.ico +0 -0
package/tui.config.js CHANGED
@@ -1,62 +1,190 @@
1
1
  module.exports = {
2
+ // default properties for <Button /> component
2
3
  BUTTON: {
3
- width: '100%',
4
- type: 'button',
5
- height: '46px',
6
- color: 'white',
7
- border: 'none',
8
- disabled: false,
9
- fontSize: '16px',
10
- cursor: 'pointer',
11
- borderRadius: '6px',
12
- contentWidth: false,
13
- padding: '12px 20px',
14
- boxSizing: 'border-box',
15
- bgColor: 'rgba(0, 35, 106, 1)',
16
- disabledThemeColor: 'rgba(60, 57, 62, 1)',
17
- disabledThemeLineColor: 'rgba(60, 57, 62, 1)',
18
- disabledThemeBgColor: 'rgba(238, 238, 238, 1)',
19
- transition: 'background-color 240ms, color 240ms'
4
+ size: '16px', // for font size
5
+ font: 'Arial', // for font family
6
+ radius: '6px', // for border radius
7
+ width: '100%', // for width
8
+ weight: '400', // for font weight
9
+ type: 'button', // for type
10
+ height: '46px', // for height
11
+ color: 'white', // for color
12
+ border: 'none', // for border
13
+ disabled: false, // for disabled
14
+ cursor: 'pointer', // for cursor
15
+ contentWidth: false, // for auto width, if contentWidth prop is exsit, then button get size automatically from inner content
16
+ padding: '12px 20px', // for padding
17
+ textTransform: 'none', // for text transform
18
+ boxSizing: 'border-box', // for box sizing
19
+ bgColor: 'rgba(0, 35, 106, 1)', // for background color
20
+ disabledColor: 'rgba(60, 57, 62, 1)', // for color in disabled mode
21
+ disabledLineColor: 'rgba(60, 57, 62, 1)', // for border color (outline) in disabled mode
22
+ disabledBgColor: 'rgba(238, 238, 238, 1)', // for background color in disabled mode
23
+ transition: 'background-color 240ms, color 240ms', // for transition
20
24
  },
25
+ // default properties for <Input /> component
21
26
  INPUT: {
22
- type: 'text',
23
- width: '100%',
24
- radius: '6px',
25
- height: '46px',
26
- required: false,
27
- disabled: false,
28
- fontSize: '16px',
29
- bgColor: 'white',
30
- iconWidth: '64px',
31
- autoComplete: 'off',
32
- tooltipLeft: '-73px',
33
- padding: '12px 15px',
34
- boxSizing: 'border-box',
35
- color: 'rgb(60, 57, 62)',
36
- tooltipTop: 'calc(-50% - 30px)',
37
- boxShadow: '0 0 0 2px #d1d1d1',
38
- boxShadowHover: '0 0 0 2px #3c393e'
27
+ size: '16px', // for font size
28
+ type: 'text', // for type
29
+ width: '100%', // for width
30
+ radius: '0px', // for input and also (if there exist left or right icons) icons block border-radius
31
+ className: '', // for input classname (you can set custom class for your custom css)
32
+ height: '46px', // for height
33
+ tooltip: false, // for tooltip
34
+ required: false, // for showing required mark on label (it meens input is required)
35
+ disabled: false, // for disabled
36
+ errorLeft: '0px', // for error message position from left (work when errorPosition prop is 'absolute')
37
+ errorZindex: '1', // for error message z-index (work when errorPosition prop is 'absolute')
38
+ iconWidth: '64px', // for left or right icon block width (you can add your custom icon and you can set icon block size)
39
+ errorSize: '14px', // for error font size
40
+ labelSize: '16px', // for label font size
41
+ errorColor: '#e00', // for error message color
42
+ labelWeight: '500', // for label font weight
43
+ errorClassName: '', // for error message classname (you can set custom class for your custom css)
44
+ autoComplete: 'off', // for autocomplete fill mode (browser specific, may not work)
45
+ errorBottom: '-20px', // for error message position from bottom (work when errorPosition prop is 'absolute')
46
+ padding: '12px 15px', // for padding
47
+ labelColor: '#3c393e', // for label color
48
+ errorAnimation: false, // for error showing animation
49
+ labelDisplay: 'block', // for label display
50
+ labelLineHeight: '22px', // for label line height
51
+ errorLineHeight: '19px', // for error message line height
52
+ boxSizing: 'border-box', // for box sizing
53
+ backgroundColor: 'white', // for input and also (if there exist left or right icons) icons block background color
54
+ color: 'rgb(60, 57, 62)', // for input color
55
+ labelMarginBottom: '6px', // for label margin bottom
56
+ errorPosition: 'absolute', // for error message position (maybe you want to show error message in custom place)
57
+ transform: 'scale3d(0,0,0)', // for transform (when have error message and errorAnimation prop is true)
58
+ boxShadow: '0 0 0 2px #d1d1d1', // for border size and color
59
+ errorAnimationDuration: '240ms', // for animation duration (when have error message and errorAnimation prop is true)
60
+ boxShadowHover: '0 0 0 2px #3c393e', // for border size and color in hover mode (set if you want to change it)
39
61
  },
40
62
  TOOLTIP: {
41
63
  width: '46px',
42
64
  height: '46px'
43
65
  },
66
+ // default properties for <Typography /> component
44
67
  TYPOGRAPHY: {
45
- fSizep: '13px',
46
- fSizeh1: '70px',
47
- fSizeh2: '50px',
48
- fSizeh3: '38px',
49
- fSizeh4: '24px',
50
- fSizeh5: '20px',
51
- fSizeh6: '14px',
52
- fWeightp: '500',
53
- fWeighth1: '400',
54
- fWeighth2: '400',
55
- fWeighth3: '400',
56
- fWeighth4: '600',
57
- fWeighth5: '600',
58
- fWeighth6: '600',
59
- fSizespan: '12px',
60
- fWeightspan: '500',
68
+ radius: '0px', // for border radius
69
+ border: 'none', // for border
70
+ cursor: 'default', // for cursor
71
+ textShadow: 'none', // for text shadow
72
+
73
+ marginp: '0px', // for variant p margin
74
+ marginh1: '0px', // for variant h1 margin
75
+ marginh2: '0px', // for variant h2 margin
76
+ marginh3: '0px', // for variant h3 margin
77
+ marginh4: '0px', // for variant h4 margin
78
+ marginh5: '0px', // for variant h5 margin
79
+ marginh6: '0px', // for variant h6 margin
80
+ marginspan: '0px', // for variant span margin
81
+
82
+ colorp: '#3C393E', // for variant p color
83
+ colorh1: '#3C393E', // for variant h1 color
84
+ colorh2: '#3C393E', // for variant h2 color
85
+ colorh3: '#3C393E', // for variant h3 color
86
+ colorh4: '#3C393E', // for variant h4 color
87
+ colorh5: '#3C393E', // for variant h5 color
88
+ colorh6: '#3C393E', // for variant h6 color
89
+ colorspan: '#3C393E', // for variant span color
90
+
91
+ paddingp: '0px', // for variant p padding
92
+ paddingh1: '0px', // for variant h1 padding
93
+ paddingh2: '0px', // for variant h2 padding
94
+ paddingh3: '0px', // for variant h3 padding
95
+ paddingh4: '0px', // for variant h4 padding
96
+ paddingh5: '0px', // for variant h5 padding
97
+ paddingh6: '0px', // for variant h6 padding
98
+ paddingspan: '0px', // for variant span padding
99
+
100
+ sizep: '13px', // for variant p font size
101
+ sizeh1: '70px', // for variant h1 font size
102
+ sizeh2: '50px', // for variant h2 font size
103
+ sizeh3: '38px', // for variant h3 font size
104
+ sizeh4: '24px', // for variant h4 font size
105
+ sizeh5: '20px', // for variant h5 font size
106
+ sizeh6: '14px', // for variant h6 font size
107
+ sizespan: '12px', // for variant span font size
108
+
109
+ textAlignp: '0px', // for variant p text align
110
+ textAlignh1: '0px', // for variant h1 text align
111
+ textAlignh2: '0px', // for variant h2 text align
112
+ textAlignh3: '0px', // for variant h3 text align
113
+ textAlignh4: '0px', // for variant h4 text align
114
+ textAlignh5: '0px', // for variant h5 text align
115
+ textAlignh6: '0px', // for variant h6 text align
116
+ textAlignspan: '0px', // for variant span text align
117
+
118
+ weightp: '500', // for variant p font weight
119
+ weighth1: '400', // for variant h1 font weight
120
+ weighth2: '400', // for variant h2 font weight
121
+ weighth3: '400', // for variant h3 font weight
122
+ weighth4: '600', // for variant h4 font weight
123
+ weighth5: '600', // for variant h5 font weight
124
+ weighth6: '600', // for variant h6 font weight
125
+ weightspan: '500', // for variant span font weight
126
+
127
+ colorHoverp: '#3C393E', // for variant p color in hover mode
128
+ colorHoverh1: '#3C393E', // for variant h1 color in hover mode
129
+ colorHoverh2: '#3C393E', // for variant h2 color in hover mode
130
+ colorHoverh3: '#3C393E', // for variant h3 color in hover mode
131
+ colorHoverh4: '#3C393E', // for variant h4 color in hover mode
132
+ colorHoverh5: '#3C393E', // for variant h5 color in hover mode
133
+ colorHoverh6: '#3C393E', // for variant h6 color in hover mode
134
+ colorHoverspan: '#3C393E', // for variant span color in hover mode
135
+
136
+ bgColorp: 'transparent', // for variant p background color
137
+ bgColorh1: 'transparent', // for variant h1 background color
138
+ bgColorh2: 'transparent', // for variant h2 background color
139
+ bgColorh3: 'transparent', // for variant h3 background color
140
+ bgColorh4: 'transparent', // for variant h4 background color
141
+ bgColorh5: 'transparent', // for variant h5 background color
142
+ bgColorh6: 'transparent', // for variant h6 background color
143
+ bgColorspan: 'transparent', // for variant span background color
144
+
145
+ textDecorationp: 'none', // for variant p text decoration
146
+ textDecorationh1: 'none', // for variant h1 text decoration
147
+ textDecorationh2: 'none', // for variant h2 text decoration
148
+ textDecorationh3: 'none', // for variant h3 text decoration
149
+ textDecorationh4: 'none', // for variant h4 text decoration
150
+ textDecorationh5: 'none', // for variant h5 text decoration
151
+ textDecorationh6: 'none', // for variant h6 text decoration
152
+ textDecorationspan: 'none', // for variant span text decoration
153
+
154
+ fontStylep: 'normal', // for variant p font style
155
+ fontStyleh1: 'normal', // for variant h1 font style
156
+ fontStyleh2: 'normal', // for variant h2 font style
157
+ fontStyleh3: 'normal', // for variant h3 font style
158
+ fontStyleh4: 'normal', // for variant h4 font style
159
+ fontStyleh5: 'normal', // for variant h5 font style
160
+ fontStyleh6: 'normal', // for variant h6 font style
161
+ fontStylespan: 'normal', // for variant span font style
162
+
163
+ lineHeightp: 'normal', // for variant p line height
164
+ lineHeighth1: 'normal', // for variant h1 line height
165
+ lineHeighth2: 'normal', // for variant h2 line height
166
+ lineHeighth3: 'normal', // for variant h3 line height
167
+ lineHeighth4: 'normal', // for variant h4 line height
168
+ lineHeighth5: 'normal', // for variant h5 line height
169
+ lineHeighth6: 'normal', // for variant h6 line height
170
+ lineHeightspan: 'normal', // for variant span line height
171
+
172
+ textTransformp: 'none', // for variant p text transform
173
+ textTransformh1: 'none', // for variant h1 text transform
174
+ textTransformh2: 'none', // for variant h2 text transform
175
+ textTransformh3: 'none', // for variant h3 text transform
176
+ textTransformh4: 'none', // for variant h4 text transform
177
+ textTransformh5: 'none', // for variant h5 text transform
178
+ textTransformh6: 'none', // for variant h6 text transform
179
+ textTransformspan: 'none', // for variant span text transform
180
+
181
+ fontFamilyp: 'Arial, sans-serif', // for variant p font family
182
+ fontFamilyh1: 'Arial, sans-serif', // for variant h1 font family
183
+ fontFamilyh2: 'Arial, sans-serif', // for variant h2 font family
184
+ fontFamilyh3: 'Arial, sans-serif', // for variant h3 font family
185
+ fontFamilyh4: 'Arial, sans-serif', // for variant h4 font family
186
+ fontFamilyh5: 'Arial, sans-serif', // for variant h5 font family
187
+ fontFamilyh6: 'Arial, sans-serif', // for variant h6 font family
188
+ fontFamilyspan: 'Arial, sans-serif', // for variant span font family
61
189
  }
62
190
  };
package/storybook-static/favicon.ico DELETED
Binary file