@mirai/ui 1.0.55 → 1.0.57

package/build/primitives/View/View.stories.js

@@ -0,0 +1,39 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Story = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _View = require("./View");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _default = {
+  title: 'Primitives'
+};
+exports.default = _default;
+
+var Story = function Story(props) {
+  return /*#__PURE__*/React.createElement(_View.View, props, /*#__PURE__*/React.createElement("span", {
+    className: "children"
+  }, "child:1"), /*#__PURE__*/React.createElement("span", {
+    className: "children"
+  }, "child:2"));
+};
+
+exports.Story = Story;
+Story.storyName = 'View';
+Story.args = {
+  fit: false,
+  row: false,
+  tag: 'div'
+};
+Story.argTypes = {};
+//# sourceMappingURL=View.stories.js.map

package/build/primitives/View/View.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"View.stories.js","names":["title","Story","props","storyName","args","fit","row","tag","argTypes"],"sources":["../../../src/primitives/View/View.stories.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { View } from './View';\n\nexport default { title: 'Primitives' };\n\nexport const Story = (props) => (\n  <View {...props}>\n    <span className=\"children\">child:1</span>\n    <span className=\"children\">child:2</span>\n  </View>\n);\n\nStory.storyName = 'View';\n\nStory.args = {\n  fit: false,\n  row: false,\n  tag: 'div',\n};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;;;;AAAA;;AAEA;;;;;;eAEe;EAAEA,KAAK,EAAE;AAAT,C;;;AAER,IAAMC,KAAK,GAAG,SAARA,KAAQ,CAACC,KAAD;EAAA,oBACnB,oBAAC,UAAD,EAAUA,KAAV,eACE;IAAM,SAAS,EAAC;EAAhB,aADF,eAEE;IAAM,SAAS,EAAC;EAAhB,aAFF,CADmB;AAAA,CAAd;;;AAOPD,KAAK,CAACE,SAAN,GAAkB,MAAlB;AAEAF,KAAK,CAACG,IAAN,GAAa;EACXC,GAAG,EAAE,KADM;EAEXC,GAAG,EAAE,KAFM;EAGXC,GAAG,EAAE;AAHM,CAAb;AAMAN,KAAK,CAACO,QAAN,GAAiB,EAAjB"}

package/build/theme/default.theme.css

@@ -6,33 +6,30 @@
   --mirai-ui-font-bold: Arial, Regular;
   --mirai-ui-font-bold-weight: 700;
   --mirai-ui-font-size-headline-1: 32px;
-  --mirai-ui-font-size-headline-2: 24px;
-  --mirai-ui-font-size-headline-3: 18px;
-  --mirai-ui-font-size-headline-4: 16px;
-  --mirai-ui-font-size-paragraph: 14px;
-  --mirai-ui-font-size-action: 14px;
-  --mirai-ui-font-size-small: 12px;
-
   --mirai-ui-line-height-headline-1: 38px;
+  --mirai-ui-font-size-headline-2: 24px;
   --mirai-ui-line-height-headline-2: 25px;
+  --mirai-ui-font-size-headline-3: 18px;
   --mirai-ui-line-height-headline-3: 22px;
+  --mirai-ui-font-size-headline-4: 16px;
   --mirai-ui-line-height-headline-4: 19px;
+  --mirai-ui-font-size-paragraph: 14px;
   --mirai-ui-line-height-paragraph: 22px;
+  --mirai-ui-font-size-action: 14px;
   --mirai-ui-line-height-action: 20px;
+  --mirai-ui-font-size-small: 12px;
   --mirai-ui-line-height-small: 18px;
-
   --mirai-ui-text-direction: ltr;
   --mirai-ui-text-align: left;
 
   /* palette */
   --mirai-ui-base: #ffffff;
-  /* !TODO: Change to -text ------------------------------------------------- */
+
   --mirai-ui-content: #484848;
   --mirai-ui-content-background: #f6f6f6;
   --mirai-ui-content-border: #e4e4e4;
   --mirai-ui-content-dark: #202020;
   --mirai-ui-content-light: #999999;
-  /* !TODO ------------------------------------------------------------------ */
 
   --mirai-ui-accent: #3978c5;
   --mirai-ui-accent-background: #e9f1fc;
@@ -72,11 +69,10 @@
   --mirai-ui-space-XL: 48px;
   --mirai-ui-space-XXL: 64px;
 
-  /* layer */
-  --mirai-ui-layer-S: 0;
-  --mirai-ui-layer-M: 1;
-  --mirai-ui-layer-L: 10;
-  --mirai-ui-layer-XL: 100;
+  /* breakpoints */
+  --mirai-ui-breakpoint-S: 430px;
+  --mirai-ui-breakpoint-M: 768px;
+  /* --mirai-ui-breakpoint-L: 769px; */
 
   /* motion */
   --mirai-ui-motion-collapse: 200ms;
@@ -87,8 +83,160 @@
   --mirai-ui-input-font-size: var(--mirai-ui-font-size-paragraph);
   --mirai-ui-input-min-height: var(--mirai-ui-space-XL);
 
-  /* defaults */
+  /* border */
   --mirai-ui-border-radius: 4px;
   --mirai-ui-border-width: 1px;
+
+  /* shadow */
   --mirai-ui-shadow: 0 0 var(--mirai-ui-space-XS) var(--mirai-ui-content-border);
 }
+
+/* ------------- ------------------------------------------------------------ */
+/* -- PRIMITIVES ------------------------------------------------------------ */
+/* ------------- ------------------------------------------------------------ */
+:root {
+  /* Checkbox */
+  --mirai-ui-checkbox-base: var(--mirai-ui-base);
+  --mirai-ui-checkbox-border-color: var(--mirai-ui-content-light);
+  --mirai-ui-checkbox-border-radius: var(--mirai-ui-border-radius);
+  --mirai-ui-checkbox-checked: var(--mirai-ui-accent);
+  --mirai-ui-checkbox-disabled: var(--mirai-ui-content-border);
+  --mirai-ui-checkbox-size: var(--mirai-ui-space-L);
+  /* Icon */
+
+  /* Input */
+  --mirai-ui-input-background: var(--mirai-ui-base);
+  --mirai-ui-input-color: var(--mirai-ui-content);
+  --mirai-ui-input-disabled: var(--mirai-ui-content-light);
+
+  /* Layer */
+  --mirai-ui-layer-content: var(--mirai-ui-layer-XL);
+  --mirai-ui-layer-S: 0;
+  --mirai-ui-layer-M: 1;
+  --mirai-ui-layer-L: 10;
+  --mirai-ui-layer-XL: 100;
+
+  /* Pressable */
+
+  /* Radio */
+  --mirai-ui-radio-base: var(--mirai-ui-base);
+  --mirai-ui-radio-border: var(--mirai-ui-content-light);
+  --mirai-ui-radio-checked: var(--mirai-ui-accent);
+  --mirai-ui-radio-disabled: var(--mirai-ui-content-border);
+  --mirai-ui-radio-size: var(--mirai-ui-space-L);
+
+  /* ScrollView */
+
+  /* Select */
+
+  /* Switch */
+  --mirai-ui-switch-base: var(--mirai-ui-base);
+  --mirai-ui-switch-border-color: var(--mirai-ui-content-light);
+  --mirai-ui-switch-border-size: calc(var(--mirai-ui-space-XS) / 4);
+  --mirai-ui-switch-border-radius: var(--mirai-ui-space-L);
+  --mirai-ui-switch-checked: var(--mirai-ui-accent);
+  --mirai-ui-switch-disabled: var(--mirai-ui-content-border);
+  --mirai-ui-switch-size: var(--mirai-ui-space-L);
+
+  /* Text */
+
+  /* View */
+}
+
+/* ------------- ------------------------------------------------------------ */
+/* -- COMPONENTS ------------------------------------------------------------ */
+/* ------------- ------------------------------------------------------------ */
+:root {
+  --mirai-ui-button-background: var(--mirai-ui-accent);
+  --mirai-ui-button-busy-width: 0%;
+  --mirai-ui-button-busy-motion: calc(var(--mirai-ui-motion-expand) * 10);
+  --mirai-ui-button-color: var(--mirai-ui-base);
+  --mirai-ui-button-color-active: rgba(255, 255, 255, 0.2);
+  --mirai-ui-button-color-focus: var(--mirai-ui-content);
+  --mirai-ui-button-disabled-background: var(--mirai-ui-content-border);
+  --mirai-ui-button-disabled-color: var(--mirai-ui-content-light);
+  --mirai-ui-button-font: var(--mirai-ui-font);
+  --mirai-ui-button-font-weight: var(--mirai-ui-font-weight);
+  --mirai-ui-button-padding-y: var(--mirai-ui-space-S);
+  --mirai-ui-button-padding-x: var(--mirai-ui-space-L);
+  --mirai-ui-button-radius: var(--mirai-ui-border-radius);
+  --mirai-ui-button-secondary-background: var(--mirai-ui-base);
+  --mirai-ui-button-squared: calc(var(--mirai-ui-space-M) * 2);
+
+  /* Calendar */
+  --mirai-ui-calendar-caption-color: var(--mirai-ui-content-light);
+  --mirai-ui-calendar-cell: var(--mirai-ui-space-XL);
+  --mirai-ui-calendar-highlight-color: var(--mirai-ui-accent);
+  --mirai-ui-calendar-padding: var(--mirai-ui-space-XS);
+  --mirai-ui-calendar-range-background: var(--mirai-ui-content-background);
+  --mirai-ui-calendar-selected-background: var(--mirai-ui-accent);
+  --mirai-ui-calendar-selected-color: var(--mirai-ui-base);
+  --mirai-ui-calendar-weekday-color: var(--mirai-ui-content-light);
+  --mirai-ui-calendar-week-margin: 2px;
+
+  /* Form */
+
+  /* InputDate */
+
+  /* InputNumber */
+  --mirai-ui-input-number-value-width: var(--mirai-ui-space-XL);
+
+  /* InputOption */
+  --mirai-ui-input-option-disabled: var(--mirai-ui-content-light);
+  --mirai-ui-input-option-label-margin: var(--mirai-ui-space-S);
+  --mirai-ui-input-option-padding-y: var(--mirai-ui-space-S);
+
+  /* InputSelect */
+
+  /* InputText */
+  --mirai-ui-input-text-border: solid var(--mirai-ui-border-width) var(--mirai-ui-content-border);
+  --mirai-ui-input-text-disabled: var(--mirai-ui-content-border);
+  --mirai-ui-input-text-error: var(--mirai-ui-error);
+  --mirai-ui-input-text-focus: var(--mirai-ui-accent);
+  --mirai-ui-input-text-icon: var(--mirai-ui-font-size-headline-4);
+  --mirai-ui-input-text-padding-x: var(--mirai-ui-space-S);
+  --mirai-ui-input-text-padding-y: var(--mirai-ui-space-S);
+  --mirai-ui-input-text-radius: var(--mirai-ui-border-radius);
+
+  /* Menu */
+  --mirai-ui-menu-base: var(--mirai-ui-base);
+  --mirai-ui-menu-border-radius: var(--mirai-ui-border-radius);
+  --mirai-ui-menu-min-width: 192px;
+  --mirai-ui-menu-shadow: var(--mirai-ui-shadow);
+  --mirai-ui-menu-option-disabled: var(--mirai-ui-content-border);
+  --mirai-ui-menu-option-hover-background: var(--mirai-ui-accent);
+  --mirai-ui-menu-option-hover-color: var(--mirai-ui-base);
+  --mirai-ui-menu-option-padding: var(--mirai-ui-space-M);
+
+  /* Modal */
+  --mirai-ui-modal-background: var(--mirai-ui-base);
+  --mirai-ui-modal-border-radius: var(--mirai-ui-border-radius);
+  --mirai-ui-modal-header-padding: var(--mirai-ui-space-M);
+  --mirai-ui-modal-icon: var(--mirai-ui-font-size-headline-2);
+  --mirai-ui-modal-layer: var(--mirai-ui-layer-L);
+  --mirai-ui-modal-overflow: rgba(72, 72, 72, 0.15);
+  --mirai-ui-modal-shadow: var(--mirai-ui-shadow);
+
+  /* Notification */
+  --mirai-ui-notification-border-radius: var(--mirai-ui-border-radius);
+  --mirai-ui-notification-padding: var(--mirai-ui-space-S);
+  --mirai-ui-notification-padding-small: var(--mirai-ui-space-XS);
+
+  /* Table */
+  --mirai-ui-table-base: var(--mirai-ui-base);
+  --mirai-ui-table-border-color: var(--mirai-ui-content-border);
+  --mirai-ui-table-content: var(--mirai-ui-content);
+  --mirai-ui-table-hover-background: var(--mirai-ui-accent-background);
+  --mirai-ui-table-head-color: var(--mirai-ui-content-light);
+  --mirai-ui-table-padding-x: var(--mirai-ui-space-M);
+  --mirai-ui-table-padding-y: var(--mirai-ui-space-M);
+  --mirai-ui-table-selected-background: var(--mirai-ui-accent-background);
+  --mirai-ui-table-selected-color: var(--mirai-ui-accent);
+
+  /* Tooltip */
+  --mirai-ui-tooltip-background: rgba(0, 0, 0, 0.8);
+  --mirai-ui-tooltip-border-radius: var(--mirai-ui-border-radius);
+  --mirai-ui-tooltip-color: var(--mirai-ui-base);
+  --mirai-ui-tooltip-space: var(--mirai-ui-space-XS);
+  --mirai-ui-tooltip-max-width: calc(var(--mirai-ui-space-XXL) * 4);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirai/ui",
-  "version": "1.0.55",
+  "version": "1.0.57",
   "repository": "git@gitlab.com:miraicorp/dev/frontend/ui.git",
   "author": "JΛVI <hello@soyjavi.com>",
   "license": "MIT",
@@ -13,13 +13,14 @@
     "setup": "rm -rf node_modules && rm -rf yarn.lock && yarn install --force",
     "build": "node scripts/build.js",
     "build:stats": "source-map-explorer 'build/**/*.js'",
+    "build:storybook": "ladle build -o storybook",
     "start": "parcel public/index.html --port 8080 --host local.mirai.com --open",
+    "start:storybook": "ladle serve",
     "lint": "eslint --cache --fix --format codeframe --ext .jsx,.js src",
     "test": "node scripts/test.js --watchAll=false",
     "test:watch": "node scripts/test.js",
     "pipeline": "yarn lint && yarn test && yarn build",
-    "release": "yarn version --patch && yarn publish --access public",
-    "storybook": "ladle serve"
+    "release": "yarn version --patch && yarn publish --access public"
   },
   "dependencies": {
     "@mirai/locale": "^0.2",