@xaypay/tui 0.0.54 → 0.0.56

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