hds-web 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-web",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -59,6 +59,7 @@
     "@babel/preset-react": "^7.12.10",
     "@rollup/plugin-commonjs": "^24.1.0",
     "@rollup/plugin-image": "^3.0.2",
+    "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-typescript": "^11.1.0",
     "@storybook/addon-actions": "^6.5.16",
@@ -90,8 +91,7 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
-    "tailwindcss": "^3.2.4",
-    "typescript": "^5.0.4"
+    "tailwindcss": "^3.2.4"
   },
   "peerDependencies": {
     "react": "^17.0.1",

package/rollup.config.js

@@ -7,7 +7,7 @@ import image from '@rollup/plugin-image';
 import svgr from '@svgr/rollup'
 import url from '@rollup/plugin-url'
 import commonjs from '@rollup/plugin-commonjs';
-
+import json from '@rollup/plugin-json';
 export default [
   {
     input: './src/index.js',
@@ -24,6 +24,7 @@ export default [
       },
     ],
     plugins: [
+      json(),
       postcss({
         extensions: ['.css'],
         extract: true,

package/src/HDS/assets/icons/hasura.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.90242 4.54755L7.31044 5.17685C8.69886 4.27665 10.3575 3.75351 12.1427 3.75351C13.9278 3.75351 15.5864 4.27665 16.9749 5.17685L16.9753 5.17712C17.7616 5.68623 18.8113 5.5224 19.3973 4.78435L19.4205 4.75511L19.4407 4.72371L20.4859 3.09894C20.7832 3.70359 21.0075 4.58795 21.1085 5.56141C21.2297 6.72912 21.1571 7.86576 20.9257 8.57919L20.9256 8.57948C20.6977 9.28328 20.6295 10.0391 20.7649 10.7837L20.7656 10.7873C20.8793 11.3956 20.98 12.0679 20.98 12.5018C20.98 17.3253 17.0299 21.2502 12.1404 21.2502C7.25292 21.2502 3.30071 17.3274 3.30071 12.5018C3.30071 12.0679 3.40144 11.3956 3.51518 10.7873L3.51536 10.7863C3.65353 10.0418 3.58819 9.28511 3.35967 8.57948L3.35949 8.57893C3.12825 7.86674 3.05558 6.73078 3.17677 5.56302C3.2778 4.58962 3.50216 3.70474 3.79965 3.09928L4.84456 4.72371L4.86593 4.75693L4.89067 4.78773C5.47582 5.516 6.52292 5.68922 7.31143 5.17621L6.90242 4.54755ZM6.90242 4.54755C6.43885 4.84916 5.82074 4.74787 5.47533 4.31797L3.37457 2.33707C2.38099 3.80178 2.09419 7.11061 2.64616 8.81055C2.83931 9.40701 2.89158 10.0372 2.77796 10.6494C2.66434 11.2572 2.55071 11.9909 2.55071 12.5018C2.55071 17.7484 6.84561 22.0002 12.1404 22.0002C17.4374 22.0002 21.73 17.7462 21.73 12.5018C21.73 11.9909 21.6164 11.2572 21.5028 10.6494C21.3914 10.0372 21.446 9.40701 21.6391 8.81055C22.1911 7.10851 21.9043 3.79969 20.9108 2.33684C20.8129 2.19276 20.641 2.12476 20.4674 2.13837C20.2979 2.15166 20.1444 2.24341 20.0525 2.38638L18.81 4.31797C18.4668 4.75012 17.8487 4.84916 17.3829 4.54755C15.8763 3.57071 14.0765 3.00351 12.1427 3.00351C10.2088 3.00351 8.40904 3.57071 6.90242 4.54755Z"  stroke-width="1.5"/>
+<path d="M12.4 12.5L10 15M10.8 10L14 15"  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/HDS/components/Carousels/carouselCard.js

@@ -56,6 +56,17 @@ export default function Carouseltest(props) {
             scrollToCard(currentCard - 1);
         }
     };
+    const slider = () => {
+     return(
+        <div className=' '>
+        <div
+            className='bg-blue-100 w-96 rounded-md content-center h-1'>
+            <div className="bg-blue-600 rounded-md h-1 w-6">
+            </div>
+        </div>
+    </div>
+     )
+    };
 
     const arrowStyle = ' text-2xl z-10 bg-black h-10 w-10 rounded-full bg-neutral-0 flex items-center justify-center';
 
@@ -82,52 +93,55 @@ export default function Carouseltest(props) {
     return (
         <div className="">
             <div className="block sm:hidden">
-            {props.cards.map((item, i) => (
-                            <div className="my-5" key={i} ref={refs[i]}>
-                                <div className="rounded-3xl ">
-                                    {React.createElement(props.component, item)}
-                                </div>
+                {props.cards.map((item, i) => (
+                    <div className="my-5" key={i} ref={refs[i]}>
+                        <div className="rounded-3xl ">
+                            {React.createElement(props.component, item)}
+                        </div>
 
-                            </div>
-                        ))}
+                    </div>
+                ))}
             </div>
 
-            <div className="invisible sm:visible">
-            <div className="flex ">
-                {sliderControl(true)}
-                {sliderControl()}
-            </div>
-            <div className="justify-center select-none  items-center"
-            onTouchStart={handleTouchStart}
-            onTouchMove={handleTouchMove}
-            onTouchEnd={handleTouchEnd}
-            onMouseDown={e => setTouchStart(e.clientX)}
-            onMouseUp={e => {
-              if (touchStart - e.clientX > 50) {
-                nextCard();
-              }
-          
-              if (touchStart - e.clientX < -50) {
-                previousCard();
-              }
-            }}
-            >
-                <div className="">
-                    <div className={`snap-x ${props.carouselWidth} inline-flex select-none overflow-x-hidden scrollbar-hide`}>
-
-                        {props.cards.map((item, i) => (
-                            <div className="snap-center mx-5 shrink-0" key={i} ref={refs[i]}>
-                                <div className="w-full select-none rounded-3xl object-contain">
-                                    {React.createElement(props.component, item)}
-                                </div>
+            <div className="invisible flex flex-col-reverse  sm:visible">
+                <div className="flex items-center justify-around mt-20 ">
+                    {slider()}
+                    <div className="flex">
+                        {sliderControl(true)}
+                        {sliderControl()}
+                    </div>
+                </div>
+                <div className="justify-center select-none  items-center"
+                    onTouchStart={handleTouchStart}
+                    onTouchMove={handleTouchMove}
+                    onTouchEnd={handleTouchEnd}
+                    onMouseDown={e => setTouchStart(e.clientX)}
+                    onMouseUp={e => {
+                        if (touchStart - e.clientX > 50) {
+                            nextCard();
+                        }
+
+                        if (touchStart - e.clientX < -50) {
+                            previousCard();
+                        }
+                    }}
+                >
+                    <div className="">
+                        <div className={`snap-x ${props.carouselWidth} inline-flex select-none overflow-x-hidden scrollbar-hide`}>
+
+                            {props.cards.map((item, i) => (
+                                <div className="snap-center mx-5 shrink-0" key={i} ref={refs[i]}>
+                                    <div className="w-full select-none rounded-3xl object-contain">
+                                        {React.createElement(props.component, item)}
+                                    </div>
 
-                            </div>
-                        ))}
+                                </div>
+                            ))}
 
+                        </div>
                     </div>
                 </div>
             </div>
-            </div>
 
         </div>
     );

package/src/HDS/components/common-components/Icon/IconMap.js

@@ -1172,9 +1172,10 @@ import {ReactComponent as PlaceholderIcon } from "../../../assets/icons/placehol
 import {ReactComponent as Home03Icon } from "../../../assets/icons/home-03.svg"
 import {ReactComponent as HasuraBlueLogoIcon } from "../../../assets/V3/HasuraBlueLogo.svg"
 import {ReactComponent as Minus01Icon } from "../../../assets/icons/minus-01.svg"
-
+import {ReactComponent as HasuraIcon } from "../../../assets/icons/hasura.svg"
 
 const iconReferenceMap = {
+    hasura: HasuraIcon,
     minus01: Minus01Icon,
     clockrewind: ClockrewindIcon,
     passport: PassportIcon,

package/src/HDS/foundation/ColorPalette/color.js

@@ -0,0 +1,19 @@
+import resolveConfig from 'tailwindcss/resolveConfig';
+import tailwindConfig from '../../../../tailwind.config';
+const fullConfig = resolveConfig(tailwindConfig);
+var HDSColors = {};
+let textCode = "";
+let colorCode = "";
+for (const x in fullConfig.theme.colors) {
+    for (const y in fullConfig.theme.colors[x]) {
+        colorCode = "bg-" + x + "-" + y;
+        textCode = "text-" + x + "-" + y;
+        HDSColors[colorCode] = colorCode;
+        HDSColors[textCode] = textCode;
+    }
+}
+export default function HDSColor(color = 'bg-blue-600') {
+    return HDSColors[color];
+}
+
+

package/src/HDS/foundation/ColorPalette/index.js

@@ -1,23 +1 @@
-
-import React from 'react';
-const ColorBox = ({ applyclass }) => {
-  return (
-    <div className=' flex place-content-evenly flex-wrap border-rose-500' >
-      {Object.entries(applyclass).map(([key, value]) => (
-        <div>
-          <div className='w-24'>
-            <div key={key} className={`bg-${key}`}>
-              <div className={`bg-${key}  h-24 my-5 text-sm-bold flex place-content-around items-center flex-wrap rounded`}>  </div>
-            </div>
-            <div className='flex place-content-around items-center text-sm-bold '> {value} <br /> {key}</div>
-          </div>
-        </div>
-
-      ))}
-
-    </div>
-  );
-};
-export default ColorBox;
-
-
+export {default as HDSColor} from './color';

package/src/styles/tailwind.css

@@ -1204,6 +1204,10 @@ select {
   margin-top: 2rem;
 }
 
+.mt-20 {
+  margin-top: 5rem;
+}
+
 .block {
   display: block;
 }
@@ -1308,6 +1312,10 @@ select {
   height: 100%;
 }
 
+.h-1 {
+  height: 0.25rem;
+}
+
 .w-1\/2 {
   width: 50%;
 }
@@ -1562,6 +1570,10 @@ select {
   flex-direction: column;
 }
 
+.flex-col-reverse {
+  flex-direction: column-reverse;
+}
+
 .flex-wrap {
   flex-wrap: wrap;
 }
@@ -1578,6 +1590,10 @@ select {
   place-content: space-evenly;
 }
 
+.content-center {
+  align-content: center;
+}
+
 .items-start {
   align-items: flex-start;
 }

package/src/HDS/foundation/ColorPalette/my-presets.js

@@ -1,134 +0,0 @@
-module.exports = {
-    theme: {
-      colors: {
-        'primary': {
-            'neutral-100': '#F3F4F6',
-            'blue-600': '#1E56E3',
-            'neutral-800': '#1F2A37',
-          },
-          'neutral': {
-            0: '#FFFFFF',
-            50: '#F9FAFB',
-            100: '#F3F4F6',
-            150: '#ECEDF0',
-            200: '#E5E7EB',
-          },
-          'neutral': {
-            300: '#D2D6DB',
-            400: '#9DA4AE',
-            500: '#6C737F',
-            600: '#4D5761',
-            700: '#384250',
-          },
-          'neutral': {
-            800: '#1F2A37',
-            850: '#18222F',
-            900: '#111927',
-            950: '#0D1420',
-            1000: '#000615',
-          },
-
-        'blue': {
-            100: '#F0F4FF',
-            200: '#DFE8FF',
-            300: '#C6D6FF',
-            400: '#80A3FF',
-            500: '#3970FD',
-            600: '#1E56E3',
-            700: '#0D41C6',
-            800: '#00288E',
-          },
-
-          'purple': {
-            100: '#F7F2FF',
-            200: '#EDE1FF',
-            300: '#DBC6FF',
-            400: '#B487FF',
-            500: '#8C49FA',
-            600: '#712BE3',
-            700: '#5E13D7',
-            800: '#3F01A6',
-          },
-
-          'cyan': {
-            100: '#E3FAFF',
-            200: '#C2F4FF',
-            300: '#93ECFF',
-            400: '#3ECAE8',
-            500: '#0E96B2',
-            600: '#04758D',
-            700: '#005A6C',
-            800: '#003945',
-          },
-
-          'green': {
-            100: '#DAFFF4',
-            200: '#B8FBE7',
-            300: '#91F5D7',
-            400: '#39DAAA',
-            500: '#0EA578',
-            600: '#027D59',
-            700: '#006043',
-            800: '#003C2B',
-          },
-          'pink': {
-            100: '#FFEDF4',
-            200: '#FFD9E7',
-            300: '#FFBCD6',
-            400: '#F677AA',
-            500: '#E13A7C',
-            600: '#C21E5F',
-            700: '#A50A48',
-            800: '#71002C',
-          },
-          'amber': {
-            100: '#FFF3D4',
-            200: '#FFE4B0',
-            300: '#FFCE70',
-            400: '#FFA81B',
-            500: '#E07900',
-            600: '#B85800',
-            700: '#993700',
-            800: '#782400',
-          },
-          'yellow': {
-            100: '#FFF9C7',
-            200: '#FFEF93',
-            300: '#FFDF5A',
-            400: '#FBCB3A',
-            500: '#EBB230',
-            600: '#CA8924',
-            700: '#A1611A',
-            800: '#854D18',
-          },
-          'orange': {
-            100: '#FFEDD7',
-            200: '#FED7AD',
-            300: '#FDB97A',
-            400: '#FB9147',
-            500: '#F87229',
-            600: '#E9571F',
-            700: '#C14018',
-            800: '#993418',
-          },
-          'red': {
-            100: '#FEE2E2',
-            200: '#FECACB',
-            300: '#FBA5A6',
-            400: '#F77173',
-            500: '#EE4447',
-            600: '#DB252B',
-            700: '#B81B20',
-            800: '#981A1E',
-          },
-      },
-     
-      extend: {
-      }
-    }
-  }
- 
- 
- 
- 
-

package/src/index.ts

@@ -1 +0,0 @@
-export * from './HDS';