@xaypay/tui 0.0.53 → 0.0.55

package/src/stories/configuration.stories.mdx

@@ -0,0 +1,317 @@
+import { Meta } from '@storybook/addon-docs';
+import Code from './assets/code-brackets.svg';
+import Colors from './assets/colors.svg';
+import Comments from './assets/comments.svg';
+import Direction from './assets/direction.svg';
+import Flow from './assets/flow.svg';
+import Plugin from './assets/plugin.svg';
+import Repo from './assets/repo.svg';
+import StackAlt from './assets/stackalt.svg';
+
+<Meta title="Intro/Configuration" />
+
+<style>
+  {`
+    .subheading {
+      --mediumdark: '#999999';
+      font-weight: 900;
+      font-size: 13px;
+      color: #999;
+      letter-spacing: 6px;
+      line-height: 24px;
+      text-transform: uppercase;
+      margin-bottom: 12px;
+      margin-top: 40px;
+    }
+
+    .sbdocs-content {
+      max-width: 80% !important;
+    }
+
+    .link-list {
+      display: grid;
+      grid-template-columns: 1fr;
+      grid-template-rows: 1fr 1fr;
+      row-gap: 10px;
+    }
+
+    @media (min-width: 620px) {
+      .link-list {
+        row-gap: 20px;
+        column-gap: 20px;
+        grid-template-columns: 1fr 1fr;
+      }
+    }
+
+    @media all and (-ms-high-contrast:none) {
+    .link-list {
+        display: -ms-grid;
+        -ms-grid-columns: 1fr 1fr;
+        -ms-grid-rows: 1fr 1fr;
+      }
+    }
+
+    .link-item {
+      display: block;
+      padding: 20px 30px 20px 15px;
+      border: 1px solid #00000010;
+      border-radius: 5px;
+      transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
+      color: #333333;
+      display: flex;
+      align-items: flex-start;
+    }
+
+    .link-item:hover {
+      border-color: #1EA7FD50;
+      transform: translate3d(0, -3px, 0);
+      box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
+    }
+
+    .link-item:active {
+      border-color: #1EA7FD;
+      transform: translate3d(0, 0, 0);
+    }
+
+    .link-item strong {
+      font-weight: 700;
+      display: block;
+      margin-bottom: 2px;
+    }
+
+    .link-item img {
+      height: 40px;
+      width: 40px;
+      margin-right: 15px;
+      flex: none;
+    }
+
+    .link-item span {
+      font-size: 14px;
+      line-height: 20px;
+    }
+
+    .tip {
+      display: inline-block;
+      border-radius: 1em;
+      font-size: 11px;
+      line-height: 12px;
+      font-weight: 700;
+      background: #E7FDD8;
+      color: #66BF3C;
+      padding: 4px 12px;
+      margin-right: 10px;
+      vertical-align: top;
+    }
+
+    .tip-wrapper {
+      font-size: 13px;
+      line-height: 20px;
+      margin-top: 40px;
+      margin-bottom: 40px;
+    }
+
+    .tip-wrapper code {
+      font-size: 12px;
+      display: inline-block;
+    }
+  `}
+</style>
+
+# Configuration
+
+### Button 
+
+```
+{
+    size: '16px',                                      // for font size
+    font: 'Arial',                                     // for font family
+    radius: '6px',                                     // for border radius
+    width: '100%',                                     // for width
+    weight: '400',                                     // for font weight
+    type: 'button',                                    // for type
+    height: '46px',                                    // for height
+    color: 'white',                                    // for color 
+    border: 'none',                                    // for border
+    disabled: false,                                   // for disabled
+    cursor: 'pointer',                                 // for cursor
+    contentWidth: false,                               // for auto width, if contentWidth prop is exsit, then button get size automatically from inner content 
+    padding: '12px 20px',                              // for padding
+    textTransform: 'none',                             // for text transform
+    boxSizing: 'border-box',                           // for box sizing
+    bgColor: 'rgba(0, 35, 106, 1)',                    // for background color
+    disabledColor: 'rgba(60, 57, 62, 1)',              // for color in disabled mode
+    disabledLineColor: 'rgba(60, 57, 62, 1)',          // for border color (outline) in disabled mode
+    disabledBgColor: 'rgba(238, 238, 238, 1)',         // for background color in disabled mode
+    transition: 'background-color 240ms, color 240ms', // for transition
+},
+```
+
+### Input
+
+```
+{
+    size: '16px',                                      // for font size
+    type: 'text',                                      // for type
+    width: '100%',                                     // for width
+    radius: '0px',                                     // for input and also (if there exist left or right icons) icons block border-radius
+    className: '',                                     // for input classname (you can set custom class for your custom css)
+    height: '46px',                                    // for height
+    tooltip: false,                                    // for tooltip
+    required: false,                                   // for showing required mark on label (it meens input is required)
+    disabled: false,                                   // for disabled
+    errorLeft: '0px',                                  // for error message position from left (work when errorPosition prop is 'absolute')
+    errorZindex: '1',                                  // for error message z-index (work when errorPosition prop is 'absolute')
+    iconWidth: '64px',                                 // for left or right icon block width (you can add your custom icon and you can set icon block size)
+    errorSize: '14px',                                 // for error font size
+    labelSize: '16px',                                 // for label font size
+    errorColor: '#e00',                                // for error message color
+    labelWeight: '500',                                // for label font weight
+    errorClassName: '',                                // for error message classname (you can set custom class for your custom css)
+    autoComplete: 'off',                               // for autocomplete fill mode (browser specific, may not work)
+    errorBottom: '-20px',                              // for error message position from bottom (work when errorPosition prop is 'absolute')
+    padding: '12px 15px',                              // for padding
+    labelColor: '#3c393e',                             // for label color
+    errorAnimation: false,                             // for error showing animation
+    labelDisplay: 'block',                             // for label display
+    labelLineHeight: '22px',                           // for label line height
+    errorLineHeight: '19px',                           // for error message line height
+    boxSizing: 'border-box',                           // for box sizing
+    backgroundColor: 'white',                          // for input and also (if there exist left or right icons) icons block background color 
+    color: 'rgb(60, 57, 62)',                          // for input color
+    labelMarginBottom: '6px',                          // for label margin bottom
+    errorPosition: 'absolute',                         // for error message position (maybe you want to show error message in custom place)
+    transform: 'scale3d(0,0,0)',                       // for transform (when have error message and errorAnimation prop is true)
+    boxShadow: '0 0 0 2px #d1d1d1',                    // for border size and color
+    errorAnimationDuration: '240ms',                   // for animation duration (when have error message and errorAnimation prop is true)
+    boxShadowHover: '0 0 0 2px #3c393e',               // for border size and color in hover mode (set if you want to change it)
+}
+```
+
+### Typography
+
+```
+{
+    radius: '0px',                                     // for border radius
+    border: 'none',                                    // for border
+    cursor: 'default',                                 // for cursor
+    textShadow: 'none',                                // for text shadow
+
+    marginp: '0px',                                    // for variant p margin
+    marginh1: '0px',                                   // for variant h1 margin 
+    marginh2: '0px',                                   // for variant h2 margin
+    marginh3: '0px',                                   // for variant h3 margin
+    marginh4: '0px',                                   // for variant h4 margin
+    marginh5: '0px',                                   // for variant h5 margin
+    marginh6: '0px',                                   // for variant h6 margin
+    marginspan: '0px',                                 // for variant span margin
+
+    colorp: '#3C393E',                                 // for variant p color
+    colorh1: '#3C393E',                                // for variant h1 color
+    colorh2: '#3C393E',                                // for variant h2 color 
+    colorh3: '#3C393E',                                // for variant h3 color
+    colorh4: '#3C393E',                                // for variant h4 color 
+    colorh5: '#3C393E',                                // for variant h5 color
+    colorh6: '#3C393E',                                // for variant h6 color
+    colorspan: '#3C393E',                              // for variant span color 
+
+    paddingp: '0px',                                   // for variant p padding
+    paddingh1: '0px',                                  // for variant h1 padding
+    paddingh2: '0px',                                  // for variant h2 padding
+    paddingh3: '0px',                                  // for variant h3 padding
+    paddingh4: '0px',                                  // for variant h4 padding
+    paddingh5: '0px',                                  // for variant h5 padding
+    paddingh6: '0px',                                  // for variant h6 padding
+    paddingspan: '0px',                                // for variant span padding
+
+    sizep: '13px',                                     // for variant p font size
+    sizeh1: '70px',                                    // for variant h1 font size
+    sizeh2: '50px',                                    // for variant h2 font size
+    sizeh3: '38px',                                    // for variant h3 font size
+    sizeh4: '24px',                                    // for variant h4 font size
+    sizeh5: '20px',                                    // for variant h5 font size
+    sizeh6: '14px',                                    // for variant h6 font size
+    sizespan: '12px',                                  // for variant span font size
+
+    textAlignp: '0px',                                 // for variant p text align
+    textAlignh1: '0px',                                // for variant h1 text align
+    textAlignh2: '0px',                                // for variant h2 text align
+    textAlignh3: '0px',                                // for variant h3 text align
+    textAlignh4: '0px',                                // for variant h4 text align
+    textAlignh5: '0px',                                // for variant h5 text align
+    textAlignh6: '0px',                                // for variant h6 text align
+    textAlignspan: '0px',                              // for variant span text align
+
+    weightp: '500',                                    // for variant p font weight
+    weighth1: '400',                                   // for variant h1 font weight
+    weighth2: '400',                                   // for variant h2 font weight
+    weighth3: '400',                                   // for variant h3 font weight
+    weighth4: '600',                                   // for variant h4 font weight
+    weighth5: '600',                                   // for variant h5 font weight
+    weighth6: '600',                                   // for variant h6 font weight
+    weightspan: '500',                                 // for variant span font weight
+
+    colorHoverp: '#3C393E',                            // for variant p color in hover mode
+    colorHoverh1: '#3C393E',                           // for variant h1 color in hover mode
+    colorHoverh2: '#3C393E',                           // for variant h2 color in hover mode
+    colorHoverh3: '#3C393E',                           // for variant h3 color in hover mode
+    colorHoverh4: '#3C393E',                           // for variant h4 color in hover mode
+    colorHoverh5: '#3C393E',                           // for variant h5 color in hover mode
+    colorHoverh6: '#3C393E',                           // for variant h6 color in hover mode
+    colorHoverspan: '#3C393E',                         // for variant span color in hover mode
+
+    bgColorp: 'transparent',                           // for variant p background color
+    bgColorh1: 'transparent',                          // for variant h1 background color
+    bgColorh2: 'transparent',                          // for variant h2 background color
+    bgColorh3: 'transparent',                          // for variant h3 background color
+    bgColorh4: 'transparent',                          // for variant h4 background color
+    bgColorh5: 'transparent',                          // for variant h5 background color
+    bgColorh6: 'transparent',                          // for variant h6 background color
+    bgColorspan: 'transparent',                        // for variant span background color
+
+    textDecorationp: 'none',                           // for variant p text decoration
+    textDecorationh1: 'none',                          // for variant h1 text decoration
+    textDecorationh2: 'none',                          // for variant h2 text decoration
+    textDecorationh3: 'none',                          // for variant h3 text decoration
+    textDecorationh4: 'none',                          // for variant h4 text decoration
+    textDecorationh5: 'none',                          // for variant h5 text decoration
+    textDecorationh6: 'none',                          // for variant h6 text decoration 
+    textDecorationspan: 'none',                        // for variant span text decoration
+
+    fontStylep: 'normal',                              // for variant p font style
+    fontStyleh1: 'normal',                             // for variant h1 font style
+    fontStyleh2: 'normal',                             // for variant h2 font style
+    fontStyleh3: 'normal',                             // for variant h3 font style
+    fontStyleh4: 'normal',                             // for variant h4 font style
+    fontStyleh5: 'normal',                             // for variant h5 font style
+    fontStyleh6: 'normal',                             // for variant h6 font style
+    fontStylespan: 'normal',                           // for variant span font style
+
+    lineHeightp: 'normal',                             // for variant p line height
+    lineHeighth1: 'normal',                            // for variant h1 line height
+    lineHeighth2: 'normal',                            // for variant h2 line height
+    lineHeighth3: 'normal',                            // for variant h3 line height
+    lineHeighth4: 'normal',                            // for variant h4 line height
+    lineHeighth5: 'normal',                            // for variant h5 line height
+    lineHeighth6: 'normal',                            // for variant h6 line height
+    lineHeightspan: 'normal',                          // for variant span line height
+
+    textTransformp: 'none',                            // for variant p text transform
+    textTransformh1: 'none',                           // for variant h1 text transform
+    textTransformh2: 'none',                           // for variant h2 text transform
+    textTransformh3: 'none',                           // for variant h3 text transform
+    textTransformh4: 'none',                           // for variant h4 text transform
+    textTransformh5: 'none',                           // for variant h5 text transform
+    textTransformh6: 'none',                           // for variant h6 text transform
+    textTransformspan: 'none',                         // for variant span text transform    
+    
+    fontFamilyp: 'Arial, sans-serif',                  // for variant p font family
+    fontFamilyh1: 'Arial, sans-serif',                 // for variant h1 font family
+    fontFamilyh2: 'Arial, sans-serif',                 // for variant h2 font family
+    fontFamilyh3: 'Arial, sans-serif',                 // for variant h3 font family
+    fontFamilyh4: 'Arial, sans-serif',                 // for variant h4 font family
+    fontFamilyh5: 'Arial, sans-serif',                 // for variant h5 font family
+    fontFamilyh6: 'Arial, sans-serif',                 // for variant h6 font family
+    fontFamilyspan: 'Arial, sans-serif',               // for variant span font family
+}
+```

package/src/stories/documentation.stories.mdx

@@ -0,0 +1,118 @@
+import { Meta } from '@storybook/addon-docs';
+import Code from './assets/code-brackets.svg';
+import Colors from './assets/colors.svg';
+import Comments from './assets/comments.svg';
+import Direction from './assets/direction.svg';
+import Flow from './assets/flow.svg';
+import Plugin from './assets/plugin.svg';
+import Repo from './assets/repo.svg';
+import StackAlt from './assets/stackalt.svg';
+
+<Meta title="Intro/Documentation" />
+
+<style>
+  {`
+    .subheading {
+      --mediumdark: '#999999';
+      font-weight: 900;
+      font-size: 13px;
+      color: #999;
+      letter-spacing: 6px;
+      line-height: 24px;
+      text-transform: uppercase;
+      margin-bottom: 12px;
+      margin-top: 40px;
+    }
+
+    .link-list {
+      display: grid;
+      grid-template-columns: 1fr;
+      grid-template-rows: 1fr 1fr;
+      row-gap: 10px;
+    }
+
+    @media (min-width: 620px) {
+      .link-list {
+        row-gap: 20px;
+        column-gap: 20px;
+        grid-template-columns: 1fr 1fr;
+      }
+    }
+
+    @media all and (-ms-high-contrast:none) {
+    .link-list {
+        display: -ms-grid;
+        -ms-grid-columns: 1fr 1fr;
+        -ms-grid-rows: 1fr 1fr;
+      }
+    }
+
+    .link-item {
+      display: block;
+      padding: 20px 30px 20px 15px;
+      border: 1px solid #00000010;
+      border-radius: 5px;
+      transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
+      color: #333333;
+      display: flex;
+      align-items: flex-start;
+    }
+
+    .link-item:hover {
+      border-color: #1EA7FD50;
+      transform: translate3d(0, -3px, 0);
+      box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
+    }
+
+    .link-item:active {
+      border-color: #1EA7FD;
+      transform: translate3d(0, 0, 0);
+    }
+
+    .link-item strong {
+      font-weight: 700;
+      display: block;
+      margin-bottom: 2px;
+    }
+
+    .link-item img {
+      height: 40px;
+      width: 40px;
+      margin-right: 15px;
+      flex: none;
+    }
+
+    .link-item span {
+      font-size: 14px;
+      line-height: 20px;
+    }
+
+    .tip {
+      display: inline-block;
+      border-radius: 1em;
+      font-size: 11px;
+      line-height: 12px;
+      font-weight: 700;
+      background: #E7FDD8;
+      color: #66BF3C;
+      padding: 4px 12px;
+      margin-right: 10px;
+      vertical-align: top;
+    }
+
+    .tip-wrapper {
+      font-size: 13px;
+      line-height: 20px;
+      margin-top: 40px;
+      margin-bottom: 40px;
+    }
+
+    .tip-wrapper code {
+      font-size: 12px;
+      display: inline-block;
+    }
+  `}
+</style>
+
+# Documentation
+