glints-aries 4.0.185 → 4.0.187

package/lib/helpers/storybook/Decorators.js

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.withAlertProvider = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _AlertProvider = require("../../@next/Alert/AlertProvider");
+// Receive a component and apply a bordered container with max width of 400px.
+var withAlertProvider = function withAlertProvider(Story) {
+  return /*#__PURE__*/_react["default"].createElement(_AlertProvider.AlertProvider, null, /*#__PURE__*/_react["default"].createElement(Story, null));
+};
+exports.withAlertProvider = withAlertProvider;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glints-aries",
-  "version": "4.0.185",
+  "version": "4.0.187",
   "description": "Glints ui-kit for frontend",
   "main": "./lib/index.js",
   "module": "./es/index.js",
@@ -10,8 +10,8 @@
   },
   "scripts": {
     "build": "npm run build:icon && npm run build:next:icon && npm run build:lib && npm run build:es && npm run build:ts",
-    "build:lib": "rm -rf lib && babel src -d lib --extensions .ts,.tsx --ignore src/**/*.test.tsx,src/**/*.test.ts",
-    "build:es": "rm -rf es && cross-env BABEL_ENV=es babel src -d es --extensions .ts,.tsx --ignore src/**/*.test.tsx,src/**/*.test.ts",
+    "build:lib": "rm -rf lib && babel src -d lib --extensions .ts,.tsx --ignore .storybook/**/*,src/**/*.test.tsx,src/**/*.test.ts,src/**/*.spec.tsx,src/**/*.spec.ts,src/**/*.stories.tsx",
+    "build:es": "rm -rf es && cross-env BABEL_ENV=es babel src -d es --extensions .ts,.tsx --ignore .storybook/**/*,src/**/*.test.tsx,src/**/*.test.ts,src/**/*.spec.tsx,src/**/*.spec.ts,src/**/*.stories.tsx",
     "build:ts": "tsc --project tsconfig.declaration.json -d --declarationDir lib && tsc --project tsconfig.declaration.json -d --declarationDir es",
     "build:icon": "rm -rf src/General/Icon/components && babel-node --extensions .ts,.tsx src/Utils/Icon/generateIcons.ts && npm run format:icon",
     "build:next:icon": "npx @svgr/cli --typescript --out-dir src/@next/Icon/components -- src/@next/Icon/icons",

package/es/@next/Alert/Alert.stories.js

@@ -1,43 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React, { useState } from 'react';
-import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
-import { Button } from '../Button';
-import { Typography } from '../Typography';
-import { Alert } from './Alert';
-Alert.displayName = 'Alert';
-export default {
-  title: '@next/Alert',
-  component: Alert,
-  decorators: [function (Story) {
-    return /*#__PURE__*/React.createElement(BaseContainer, null, Story());
-  }]
-};
-var Template = function Template(args) {
-  var _useState = useState(false),
-    showAlert = _useState[0],
-    setShowAlert = _useState[1];
-  var triggerAlert = function triggerAlert() {
-    setShowAlert(true);
-  };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-    onClick: function onClick() {
-      return triggerAlert();
-    }
-  }, "Show Alert"), /*#__PURE__*/React.createElement(Alert, _extends({}, args, {
-    show: showAlert,
-    onDismissed: function onDismissed() {
-      return setShowAlert(false);
-    }
-  })));
-};
-export var Interactive = Template.bind({});
-Interactive.args = {
-  title: 'Title',
-  content: 'Alert content',
-  status: 'info',
-  children: /*#__PURE__*/React.createElement(Typography, {
-    as: "span",
-    variant: "body2",
-    color: "#017EB7"
-  }, "Learn more")
-};

package/es/@next/Alert/AlertWithProvider.stories.js

@@ -1,42 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import { Button } from '../Button';
-import { useAlert } from './useAlert';
-import { AlertWithProvider } from './AlertWithProvider';
-import { withAlertProvider } from '../../../.storybook/Decorators';
-import { Typography } from '../Typography';
-AlertWithProvider.displayName = 'AlertWithProvider';
-export default {
-  title: '@next/AlertWithProvider',
-  component: AlertWithProvider
-};
-var Template = function Template(args) {
-  var _useAlert = useAlert(),
-    showAlert = _useAlert.showAlert;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AlertWithProvider, null), /*#__PURE__*/React.createElement(Button, {
-    onClick: function onClick() {
-      return showAlert(_extends({}, args));
-    }
-  }, "Show Alert"));
-};
-export var Interactive = Template.bind({});
-Interactive.args = {
-  title: 'Title',
-  content: 'Alert content',
-  status: 'info',
-  children: /*#__PURE__*/React.createElement(Typography, {
-    as: "span",
-    variant: "body2",
-    color: "#017EB7"
-  }, "Learn more")
-};
-Interactive.decorators = [withAlertProvider];
-Interactive.parameters = {
-  docs: {
-    source: {
-      code: "\n      // Add \"AlertProvider\" in your root app \n      import { AlertProvider } from 'glints-aries/lib/@next';\n\n      // index.js\n      ReactDOM.render(\n        <AlertProvider>\n         <App />\n        </AlertProvider>,\n        document.getElementById('root')\n      );\n\n      // Add \"AlertWithProvider\" component in the root so it's accessible from anywhere\n      // app.js\n      <>\n        <AlertWithProvider />\n        <Dashboard />\n      </>  \n\n      // Call \"showAlert\" anywhere from your component\n      import { useAlert } from 'glints-aries/lib/@next';\n\n      const { showAlert } = useAlert();\n      <Button\n        onClick={() =>\n          showAlert({\n            title: 'Title',\n            content: 'Content',\n            children: <a href=\"#\">Learn more</a>,\n          })\n        }\n      >\n        Show Alert\n      </Button>\n      "
-    },
-    language: 'javascript',
-    type: 'auto'
-  }
-};

package/es/@next/Avatar/Avatar.stories.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
-import { Avatar } from './Avatar';
-export default {
-  title: '@next/Avatar',
-  component: Avatar,
-  decorators: [function (Story) {
-    return /*#__PURE__*/React.createElement(BaseContainer, null, Story());
-  }],
-  argTypes: {}
-};
-var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(Avatar, args);
-};
-export var Interactive = Template.bind({});
-Interactive.args = {
-  initials: 'HE'
-};

package/es/@next/Badge/Badge.stories.js

@@ -1,28 +0,0 @@
-import React from 'react';
-import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
-import { Badge } from './Badge';
-Badge.displayName = 'Badge';
-var defaultText = 'Badge';
-export default {
-  title: '@next/Badge',
-  component: Badge,
-  decorators: [function (Story) {
-    return /*#__PURE__*/React.createElement(BaseContainer, null, Story());
-  }],
-  argTypes: {
-    textColor: {
-      description: 'Text color of the badge',
-      control: 'color',
-      table: {
-        category: 'Colors'
-      }
-    }
-  }
-};
-var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(Badge, args, defaultText);
-};
-export var Interactive = Template.bind({});
-Interactive.args = {
-  status: null
-};

package/es/@next/Banner/Banner.stories.js

@@ -1,34 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
-import { Banner } from './Banner';
-import { Button } from '../Button';
-Banner.displayName = 'Banner';
-var defaultText = 'Content of banner';
-export default {
-  title: '@next/Banner',
-  component: Banner,
-  decorators: [function (Story) {
-    return /*#__PURE__*/React.createElement(BaseContainer, null, Story());
-  }]
-};
-var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(Banner, args, defaultText);
-};
-export var Interactive = Template.bind({});
-Interactive.args = {
-  title: 'Title'
-};
-var WithButtonsTemplate = function WithButtonsTemplate(args) {
-  var action = /*#__PURE__*/React.createElement(Button, {
-    disabled: args.buttonDisabled
-  }, "Action");
-  return /*#__PURE__*/React.createElement(Banner, _extends({
-    action: action
-  }, args), defaultText);
-};
-export var WithButtons = WithButtonsTemplate.bind({});
-WithButtons.args = {
-  buttonDisabled: false,
-  title: 'Title'
-};

package/es/@next/Button/Button.stories.js

@@ -1,51 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import { Button } from './Button';
-import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
-import { Icon } from '../Icon';
-import { PrimaryButton } from './PrimaryButtonStyle';
-Button.displayName = 'Button';
-var defaultText = 'Label';
-export default {
-  title: '@next/Button',
-  component: Button,
-  decorators: [function (Story) {
-    return /*#__PURE__*/React.createElement(BaseContainer, null, Story());
-  }],
-  argTypes: {
-    disabled: {
-      control: 'boolean'
-    }
-  }
-};
-var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(Button, _extends({}, args, {
-    type: "button"
-  }), defaultText);
-};
-export var Interactive = Template.bind({});
-Interactive.args = {
-  size: 'default',
-  disabled: false
-};
-var WithIconsTemplate = function WithIconsTemplate(args) {
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: 'flex',
-      gap: '10px'
-    }
-  }, /*#__PURE__*/React.createElement(Button, _extends({}, args, {
-    type: "button"
-  }), defaultText), /*#__PURE__*/React.createElement(PrimaryButton, _extends({}, args, {
-    type: "button"
-  }), defaultText));
-};
-export var WithIcon = WithIconsTemplate.bind({});
-WithIcon.args = {
-  size: 'default',
-  icon: /*#__PURE__*/React.createElement(Icon, {
-    name: "ri-arrow-up-down-fill"
-  }),
-  iconPosition: 'left',
-  disabled: false
-};

package/es/@next/Button/DesctructiveButton.stories.js

@@ -1,19 +0,0 @@
-import React from 'react';
-import { DestructiveButton } from './DesctructiveButtonStyle';
-import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
-DestructiveButton.displayName = 'DestructiveButton';
-var defaultText = 'Label';
-export default {
-  title: '@next/DestructiveButton',
-  component: DestructiveButton,
-  decorators: [function (Story) {
-    return /*#__PURE__*/React.createElement(BaseContainer, null, Story());
-  }]
-};
-var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(DestructiveButton, args, defaultText);
-};
-export var Interactive = Template.bind({});
-Interactive.args = {
-  size: 'default'
-};

package/es/@next/Button/OutlineButton.stories.js

@@ -1,19 +0,0 @@
-import React from 'react';
-import { OutlineButton } from './OutlineButtonStyle';
-import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
-OutlineButton.displayName = 'OutlineButton';
-var defaultText = 'Label';
-export default {
-  title: '@next/OutlineButton',
-  component: OutlineButton,
-  decorators: [function (Story) {
-    return /*#__PURE__*/React.createElement(BaseContainer, null, Story());
-  }]
-};
-var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(OutlineButton, args, defaultText);
-};
-export var Interactive = Template.bind({});
-Interactive.args = {
-  size: 'default'
-};

package/es/@next/Button/OutlineMonochromeButton.stories.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import { OutlineMonochromeButton } from './OutlineMonochromeStyle';
-import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
-OutlineMonochromeButton.displayName = 'OutlineMonochromeButton';
-var defaultText = 'Label';
-export default {
-  title: '@next/OutlineMonochromeButton',
-  component: OutlineMonochromeButton,
-  decorators: [function (Story) {
-    return /*#__PURE__*/React.createElement(BaseContainer, null, Story());
-  }]
-};
-var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(OutlineMonochromeButton, args, defaultText);
-};
-export var Interactive = Template.bind({});
-Interactive.args = {
-  size: 'default',
-  active: false
-};

package/es/@next/Button/PrimaryButton.stories.js

@@ -1,19 +0,0 @@
-import React from 'react';
-import { PrimaryButton } from './PrimaryButtonStyle';
-import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
-PrimaryButton.displayName = 'PrimaryButton';
-var defaultText = 'Label';
-export default {
-  title: '@next/PrimaryButton',
-  component: PrimaryButton,
-  decorators: [function (Story) {
-    return /*#__PURE__*/React.createElement(BaseContainer, null, Story());
-  }]
-};
-var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(PrimaryButton, args, defaultText);
-};
-export var Interactive = Template.bind({});
-Interactive.args = {
-  size: 'default'
-};

package/es/@next/ButtonGroup/ButtonGroup.stories.js

@@ -1,30 +0,0 @@
-import React from 'react';
-import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
-import { PrimaryButton } from '../Button/PrimaryButtonStyle';
-import { Button } from '../Button/Button';
-import { OutlineButton } from '../Button/OutlineButtonStyle';
-import { ButtonGroup } from './ButtonGroup';
-ButtonGroup.displayName = 'ButtonGroup';
-export default {
-  title: '@next/ButtonGroup',
-  component: ButtonGroup,
-  decorators: [function (Story) {
-    return /*#__PURE__*/React.createElement(BaseContainer, {
-      style: {
-        width: '1000px'
-      }
-    }, Story());
-  }]
-};
-var Template = function Template(args) {
-  var segmented = args.segmented;
-  var children = segmented ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(OutlineButton, null, "Label"), /*#__PURE__*/React.createElement(OutlineButton, null, "Label"), /*#__PURE__*/React.createElement(OutlineButton, {
-    active: true
-  }, "Label"), /*#__PURE__*/React.createElement(OutlineButton, null, "Label"), /*#__PURE__*/React.createElement(OutlineButton, null, "Label")) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, null, "Label"), /*#__PURE__*/React.createElement(PrimaryButton, null, "Label"));
-  return /*#__PURE__*/React.createElement(ButtonGroup, args, children);
-};
-export var Interactive = Template.bind({});
-Interactive.args = {
-  segmented: false,
-  fullWidth: false
-};

package/es/@next/Checkbox/Checkbox.stories.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import { Checkbox } from './Checkbox';
-import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
-Checkbox.displayName = 'Checkbox';
-export default {
-  title: '@next/Checkbox',
-  component: Checkbox,
-  decorators: [function (Story) {
-    return /*#__PURE__*/React.createElement(BaseContainer, null, Story());
-  }]
-};
-var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(Checkbox, args);
-};
-export var Interactive = Template.bind({});
-Interactive.args = {
-  label: 'Label'
-};

package/es/@next/CurrencyInput/CurrencyInput.stories.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
-import { CurrencyInput } from './CurrencyInput';
-CurrencyInput.displayName = 'Currency';
-export default {
-  title: '@next/CurrencyInput',
-  component: CurrencyInput,
-  decorators: [function (Story) {
-    return /*#__PURE__*/React.createElement(BaseContainer, null, Story());
-  }],
-  argTypes: {}
-};
-var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(CurrencyInput, args);
-};
-export var Interactive = Template.bind({});
-Interactive.args = {
-  placeholder: '0.0',
-  disabled: false,
-  locale: 'en',
-  value: 10000,
-  onChange: function onChange(value) {
-    console.log('Currency on changed value: ', value);
-  }
-};

package/es/@next/Divider/Divider.stories.js

@@ -1,16 +0,0 @@
-import React from 'react';
-import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
-import { Divider } from './Divider';
-Divider.displayName = 'Divider';
-export default {
-  title: '@next/Divider',
-  component: Divider,
-  decorators: [function (Story) {
-    return /*#__PURE__*/React.createElement(BaseContainer, null, Story());
-  }]
-};
-var Template = function Template() {
-  return /*#__PURE__*/React.createElement("div", null, "some text", /*#__PURE__*/React.createElement(Divider, null), "another text after divider");
-};
-export var Interactive = Template.bind({});
-Interactive.args = {};