@mirai/ui 1.0.0

package/README.md

@@ -0,0 +1,349 @@
+# 💾 @mirai/ui
+
+> React components library.
+
+### 📦 Setup
+
+Add the package in your project:
+
+```
+yarn add @mirai/ui
+```
+
+## Primitives
+
+### Icon
+
+This primitive returns a span with an icon based on a mandatory string prop `name` with one of the following possible values: Left, Right, Up, Down, Close, CloseArrow, Plus, Minus, EyeOpen, EyeClose.
+
+```js
+import { Icon, View } from '@mirai/ui';
+
+const MyComponent = () => (
+  <View>
+    <Icon name="Left" />
+  </View>
+);
+```
+
+### Input
+
+This primitive returns an input or a textarea based on the following props:
+
+- `disabled:boolean` applying 'disabled' attribute
+- `multiline:boolean` if true returning textarea
+- `name:string` input name
+- `type:string` type attribute value
+- `onChange:function` executed when input value changes
+- `onEnter:function` executed when user clicks on input
+- `onError:function` executed once an error event fires
+- `onLeave:function` executed on click outside the input
+
+```js
+import { Input, View } from '@mirai/ui';
+
+const MyComponent = () => (
+  <View>
+    <Input
+      required
+      minLength={8}
+      placeholder="Input"
+      value={primitive}
+      test={(value) => value.includes('something')}
+      onChange={() => console.log('change')}
+      onError={(error) => console.log('Error:', error)}
+    />
+  </View>
+);
+```
+
+### Pressable
+
+This primitive returns pressable elements based on the following properties:
+
+- `children:node`
+- `disabled:boolean` disable attribute
+- `tag:string` html tag applied to a primitive
+- `onEnter:function` executed once the user hovers over the element
+- `onLeave:function` executed once the user hovers away
+- `onPress:function` executed on mouse click on the element
+
+```js
+import { Icon, Pressable, View } from '@mirai/ui';
+
+const MyComponent = () => (
+  <View>
+    <Pressable onPress={() => console.log('clicked')}>
+      <Icon name="Left" />
+    </Pressable>
+  </View>
+);
+```
+
+### ScrollView
+
+This primitive is used to make vertically scrollable views and receives the following props:
+
+- `behavior:string` type of scroll animation
+- `children:node`
+- `height:number` height value
+- `horizontal:boolean` layout direction
+- `scrollEventThrottle:number` scroll timeout value
+- `scrollIndicator:boolean` if true the scroll indicator is shown
+- `scrollTo:number` coordinate to scroll to
+- `tag:string` html tag of resulting element
+- `width:number` width value
+- `onscroll:function` executed when user scrolls over the element
+
+```js
+import { ScrollView, View } from '@mirai/ui';
+
+const MyComponent = ({ isDesktop }) => (
+  <ScrollView horizontal={isDesktop} onScroll={() => console.log('scrolling')}>
+    <View>Box 1</View>
+    <View>Box 2</View>
+  </ScrollView>
+);
+```
+
+### Text
+
+A primitive for displaying text. It receives the following props:
+
+- `action:boolean` modifying font-size
+- `bold:boolean` modifying font-weight
+- `children:string`
+- `headline:boolean` modifying font-size
+- `lighten:boolean` modifying text color
+- `upperCase:boolean` switching text to upper case
+- `small:boolean` modifying font-size
+- `tag:string` html tag of resulting element
+
+```js
+import { Text, View } from '@mirai/ui';
+
+const MyComponent = ({ headerText }) => (
+  <View>
+    <Text bold upperCase headline>
+      {headerText}
+    </Text>
+  </View>
+);
+```
+
+### View
+
+This primitive works as a container for displaying layout. It receives the following properties:
+
+- `children:node`
+- `fit:boolean` sets width CSS property as 'fit-content' if true
+- `row:boolean` sets flex-direction as 'row' if true
+- `tag:string` html tag of resulting element
+
+```js
+import { Text, View } from '@mirai/ui';
+
+const MyComponent = ({ headerText }) => (
+  <View row>
+    <Text bold upperCase headline>
+      {headerText}
+    </Text>
+    <View fit>Lorem ipsum very long text</View>
+  </View>
+);
+```
+
+## Components
+
+React components assembled with primitives.
+
+### Button
+
+A button component that receives the following props:
+
+- `children:node|string`
+- `disabled:boolean` applying 'disabled' attribute
+- `large:boolean` modifying the button size
+- `small:boolean` modifying the button size
+- `squared:boolean` if true gives rectangular shape to the button (false by default)
+- `tag:string` html tag of resulting element ('button' by default)
+- `onEnter:function` executed when the user hovers over
+- `onLeave:function` executed when the user hovers away
+- `onPress:function` executed on mouse click on the element
+
+```js
+import { Button } from '@mirai/ui';
+
+const MyComponent = (props) => {
+  const handleButtonClick = () => console.log('click');
+
+  return (
+    <>
+      <Button large onPress={handleButtonClick} />
+    </>
+  );
+};
+```
+
+### Calendar
+
+A calendar component that receives the following props:
+
+- `captions:object` captions to be placed into calendar cells
+- `disabledDates:[string]` dates to be shown as unavailable and can't be selected
+- `disabledPast:boolean` past dates to be shown as unavailable and can't be selected
+- `disabledWeekends` boolean: weekends to be shown as unavailable and can't be selected
+- `format:string` date display format (e.g. "DD/MM/YYYY")
+- `from:string` date in specific format (e.g. "31/03/2022")
+- `months:number` number of months to be visible
+- `locale:string` locale value
+- `range:boolean` Enable range selection
+- `rangeDays:number`
+- `to:string` date in specific format (e.g. "31/03/2022")
+- `value:string|[string]`
+- `onChange:function` executed when input value changes
+- `onFocus:function` executed on calendar cell hover
+
+```js
+import { Calendar } from '@mirai/ui';
+
+const MyComponent = props => {
+  const [value, setValue] = useState([]);
+  const [from, to] = value;
+
+  return (
+    <Calendar
+      captions={
+          '2022/03/31': '10.95$',
+          '2022/04/18': '510.95$',
+          '2022/04/20': '10.95$',
+          '2022/04/24': '9.95$',
+      }
+      disabledDates={['2022/04/14', '2022/04/25', '2022/04/29', '2022/04/30']}
+      format="DD/MM/YYYY"
+      months={2}
+      from={from}
+      to={to}
+      onChange={setValue}
+    />
+  );
+}
+```
+
+### InputNumber
+
+Input number component controling the value with 2 buttons. Receives the following props:
+
+- `hint:string` brief message
+- `label:string` input label
+- `max:number` maximum input value
+- `min:number` minimum input value
+- `name:string` input name attribute (required)
+- `step:number` to be added/subtracted from value on each button click
+- `value:number` input value
+- `onChange:function` executed when input value changes
+
+```js
+import { InputNumber } from '@mirai/ui';
+
+const MyComponent = (props) => {
+  const [number, setNumber] = useState(1);
+
+  return <InputNumber min={1} name="candies" label="Candies" value={number} onChange={(next) => setNumber(next)} />;
+};
+```
+
+### InputText
+
+Text input component receiving the following props:
+
+- `disabled:boolean` applying 'disabled' attribute
+- `error:boolean` true if error event fired
+- `hint:string` brief message
+- `label:string` input label
+- `multiline:boolean` : if true returning textarea
+- `name:string` : input name (required)
+- `type:string` : input type attribute
+- `onChange:function` : executed when input value changes
+- `onEnter:function` executed when user clicks on input
+- `onLeave:function` executed on click outside the input
+
+```js
+import { InputText } from '@mirai/ui';
+
+const MyComponent = (props) => {
+  const [text, setText] = useState();
+
+  return (
+    <InputText
+      name="text"
+      hint="hint"
+      label="My epic input"
+      placeholder="Some epic text"
+      type="text"
+      value={text}
+      onChange={(next) => setText(next)}
+    />
+  );
+};
+```
+
+### Modal
+
+A modal component receiving the following props:
+
+- `children:node`
+- `visible:boolean` if true modal is shown
+- `onClose:function` executed once modal close button is clicked
+
+```js
+import { Modal, View } from '@mirai/ui';
+
+const MyComponent = (props) => {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <Modal visible={visible} onClose={() => setVisible(false)}>
+      <View>Some modal text</View>
+    </Modal>
+  );
+};
+```
+
+## Theme
+
+Styles can be customised by using Theme utility.
+
+### get()
+
+This method returns current theme settings (variables with values). This method receives as an optional parameter a string with a prefix (domain) to specify the scope ('--mirai-ui-' by default);
+
+### set(variable, value, domain)
+
+This method sets a value of the variable passed as a parameter.
+
+```js
+import { Button, Text, Theme } from '../../src';
+
+export default () => {
+  const [theme, setTheme] = useState(Theme.get());
+
+  const handlePress = () => {
+    Theme.setVariable('base', '#222');
+    Theme.setVariable('content', '#fff');
+    Theme.setVariable('font', 'courier');
+    Theme.setVariable('accent', '#f0f');
+    setTheme(Theme.get());
+  };
+
+  const { accent, spaceXL } = Theme.get();
+
+  return (
+    <>
+      <Button style={{ marginTop: spaceXL, color: accent }} onPress={handlePress}>
+        Change Theme
+      </Button>
+    </>
+  );
+};
+```

package/build/components/Button/Button.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Button = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _helpers = require("../../helpers");
+
+var _primitives = require("../../primitives");
+
+var _ButtonModule = _interopRequireDefault(require("./Button.module.css"));
+
+var _excluded = ["children", "disabled", "large", "outlined", "small", "squared", "tag"];
+
+var Button = function Button(_ref) {
+  var children = _ref.children,
+      disabled = _ref.disabled,
+      large = _ref.large,
+      outlined = _ref.outlined,
+      small = _ref.small,
+      _ref$squared = _ref.squared,
+      squared = _ref$squared === void 0 ? false : _ref$squared,
+      _ref$tag = _ref.tag,
+      tag = _ref$tag === void 0 ? 'button' : _ref$tag,
+      others = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_primitives.Pressable, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, others), {}, {
+    disabled: disabled,
+    tag: tag,
+    className: (0, _helpers.styles)(_ButtonModule.default.button, large && _ButtonModule.default.large, small && _ButtonModule.default.small, squared && _ButtonModule.default.squared, outlined && !disabled && _ButtonModule.default.outlined, disabled && _ButtonModule.default.disabled, others.className)
+  }), children);
+};
+
+exports.Button = Button;
+Button.displayName = 'Component:Button';
+//# sourceMappingURL=Button.js.map

package/build/components/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Button/Button.jsx"],"names":["Button","children","disabled","large","outlined","small","squared","tag","others","React","createElement","Pressable","className","style","button","displayName"],"mappings":";;;;;;;;;;;;;AACA;;AAEA;;AACA;;AACA;;;;AAEA,IAAMA,MAAM,GAAG,SAATA,MAAS;AAAA,MAAGC,QAAH,QAAGA,QAAH;AAAA,MAAaC,QAAb,QAAaA,QAAb;AAAA,MAAuBC,KAAvB,QAAuBA,KAAvB;AAAA,MAA8BC,QAA9B,QAA8BA,QAA9B;AAAA,MAAwCC,KAAxC,QAAwCA,KAAxC;AAAA,0BAA+CC,OAA/C;AAAA,MAA+CA,OAA/C,6BAAyD,KAAzD;AAAA,sBAAgEC,GAAhE;AAAA,MAAgEA,GAAhE,yBAAsE,QAAtE;AAAA,MAAmFC,MAAnF;AAAA,sBACbC,eAAMC,aAAN,CACEC,qBADF,8DAGOH,MAHP;AAIIN,IAAAA,QAAQ,EAARA,QAJJ;AAKIK,IAAAA,GAAG,EAAHA,GALJ;AAMIK,IAAAA,SAAS,EAAE,qBACTC,sBAAMC,MADG,EAETX,KAAK,IAAIU,sBAAMV,KAFN,EAGTE,KAAK,IAAIQ,sBAAMR,KAHN,EAITC,OAAO,IAAIO,sBAAMP,OAJR,EAKTF,QAAQ,IAAI,CAACF,QAAb,IAAyBW,sBAAMT,QALtB,EAMTF,QAAQ,IAAIW,sBAAMX,QANT,EAOTM,MAAM,CAACI,SAPE;AANf,MAgBEX,QAhBF,CADa;AAAA,CAAf;;;AAoBAD,MAAM,CAACe,WAAP,GAAqB,kBAArB","sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Pressable } from '../../primitives';\nimport style from './Button.module.css';\n\nconst Button = ({ children, disabled, large, outlined, small, squared = false, tag = 'button', ...others }) =>\n  React.createElement(\n    Pressable,\n    {\n      ...others,\n      disabled,\n      tag,\n      className: styles(\n        style.button,\n        large && style.large,\n        small && style.small,\n        squared && style.squared,\n        outlined && !disabled && style.outlined,\n        disabled && style.disabled,\n        others.className,\n      ),\n    },\n    children,\n  );\n\nButton.displayName = 'Component:Button';\n\nButton.propTypes = {\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  disabled: PropTypes.bool,\n  large: PropTypes.bool,\n  outlined: PropTypes.bool,\n  small: PropTypes.bool,\n  squared: PropTypes.bool,\n  tag: PropTypes.string,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n  onPress: PropTypes.func,\n};\n\nexport { Button };\n"],"file":"Button.js"}

package/build/components/Button/Button.module.css

@@ -0,0 +1,79 @@
+:root {
+  --mirai-ui-button-color: var(--mirai-ui-accent);
+  --mirai-ui-button-color-active: rgba(255, 255, 255, 0.2);
+  --mirai-ui-button-color-focus: var(--mirai-ui-content);
+  --mirai-ui-button-color-text: var(--mirai-ui-base);
+  --mirai-ui-button-radius: var(--mirai-ui-border-radius);
+}
+
+.button {
+  align-items: center;
+  background-color: var(--mirai-ui-button-color);
+  border-radius: var(--mirai-ui-button-radius);
+  color: var(--mirai-ui-button-color-text);
+  display: flex;
+  font-family: var(--mirai-ui-font);
+  font-size: var(--mirai-ui-font-size-action);
+  font-weight: var(--mirai-ui-font-bold-weight);
+  justify-content: center;
+  padding: var(--mirai-ui-space-S) var(--mirai-ui-space-L);
+  transition: background-color var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing),
+    box-shadow var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing),
+    color var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
+  width: fit-content;
+}
+
+.disabled {
+  background-color: var(--mirai-ui-disabled);
+  color: var(--mirai-ui-lighten);
+}
+
+.outlined {
+  border: solid 1px var(--mirai-ui-button-color);
+  background-color: var(--mirai-ui-base);
+  color: var(--mirai-ui-button-color);
+}
+
+.button:not(.disabled):active {
+  box-shadow: inset 0 0 var(--mirai-ui-space-XXL) var(--mirai-ui-space-XXL) var(--mirai-ui-button-color-active);
+}
+
+.large:not(.squared) {
+  font-size: var(--mirai-ui-font-size-headline);
+  padding: var(--mirai-ui-space-M) var(--mirai-ui-space-XL);
+}
+
+.small:not(.squared) {
+  font-size: var(--mirai-ui-font-size-small);
+  padding: var(--mirai-ui-space-XS) var(--mirai-ui-space-S);
+}
+
+.squared {
+  padding: 0;
+  height: var(--mirai-ui-space-XL);
+  width: var(--mirai-ui-space-XL);
+}
+
+.squared.small {
+  height: var(--mirai-ui-space-L);
+  width: var(--mirai-ui-space-L);
+}
+
+.squared.large {
+  height: var(--mirai-ui-space-XXL);
+  width: var(--mirai-ui-space-XXL);
+}
+
+@media only screen and (max-width: 600px) {
+}
+
+@media only screen and (min-width: 600px) {
+  .button:not(.disabled).outlined:hover {
+    border-color: var(--mirai-ui-button-color-hover);
+    color: var(--mirai-ui-button-color-focus);
+  }
+
+  .button:not(.disabled):not(.outlined):hover {
+    background-color: var(--mirai-ui-button-color-focus);
+  }
+}

package/build/components/Button/__tests__/__snapshots__/Button.test.js.snap

@@ -0,0 +1,113 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[` 1`] = `
+<DocumentFragment>
+  <button
+    class="pressable button squared"
+  >
+    children
+  </button>
+</DocumentFragment>
+`;
+
+exports[`component:<Button> inherit:className 1`] = `
+<DocumentFragment>
+  <button
+    class="pressable button mirai"
+  >
+    children
+  </button>
+</DocumentFragment>
+`;
+
+exports[`component:<Button> prop:disabled 1`] = `
+<DocumentFragment>
+  <button
+    class="pressable disabled button disabled"
+    disabled=""
+  >
+    children
+  </button>
+</DocumentFragment>
+`;
+
+exports[`component:<Button> prop:large 1`] = `
+<DocumentFragment>
+  <button
+    class="pressable button large"
+  >
+    children
+  </button>
+</DocumentFragment>
+`;
+
+exports[`component:<Button> prop:outlined 1`] = `
+<DocumentFragment>
+  <button
+    class="pressable button outlined"
+  >
+    children
+  </button>
+</DocumentFragment>
+`;
+
+exports[`component:<Button> prop:small 1`] = `
+<DocumentFragment>
+  <button
+    class="pressable button small"
+  >
+    children
+  </button>
+</DocumentFragment>
+`;
+
+exports[`component:<Button> prop:squared & large 1`] = `
+<DocumentFragment>
+  <button
+    class="pressable button large squared"
+  >
+    children
+  </button>
+</DocumentFragment>
+`;
+
+exports[`component:<Button> prop:squared & small 1`] = `
+<DocumentFragment>
+  <button
+    class="pressable button small squared"
+  >
+    children
+  </button>
+</DocumentFragment>
+`;
+
+exports[`component:<Button> prop:tag 1`] = `
+<DocumentFragment>
+  <a
+    class="pressable button"
+  >
+    children
+  </a>
+</DocumentFragment>
+`;
+
+exports[`component:<Button> renders 1`] = `
+<DocumentFragment>
+  <button
+    class="pressable button"
+  >
+    children
+  </button>
+</DocumentFragment>
+`;
+
+exports[`component:<Button> testID 1`] = `
+<DocumentFragment>
+  <button
+    class="pressable button"
+    data-testid="mirai"
+  >
+    children
+  </button>
+</DocumentFragment>
+`;

package/build/components/Button/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Button = require("./Button");
+
+Object.keys(_Button).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Button[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Button[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

package/build/components/Button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Button/index.js"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './Button';\n"],"file":"index.js"}