@soul-refiner/design-system 2.0.0-alpha.18 → 2.0.0-alpha.2

package/dist/types/attributes.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { COLORS } from '../common/colors';
+import { COLORS } from '../common';
 export type Align = 'center' | 'flex-start' | 'flex-end' | 'baseline' | 'stretch';
 export type Justify = 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around' | 'stretch';
 export type Sizes = 'extra-small' | 'small' | 'medium' | 'medium-large' | 'large' | 'extra-large' | 'full';

package/package.json

@@ -1,8 +1,7 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "2.0.0-alpha.18",
-  "main": "dist/src/index.js",
-  "types": "dist/index.d.ts",
+  "version": "2.0.0-alpha.2",
+  "main": "dist/index.js",
   "type": "module",
   "license": "MIT",
   "publishConfig": {
@@ -18,13 +17,13 @@
     ".": {
       "import": {
         "types": "./dist/index.d.ts",
-        "default": "./dist/src/index.js"
+        "default": "./dist/index.js"
       }
     }
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-typescript": "^11.1.6",
     "@storybook/addon-essentials": "^7.6.7",
     "@storybook/addon-interactions": "^7.6.7",
     "@storybook/addon-links": "^7.6.7",
@@ -46,13 +45,10 @@
     "rollup": "^4.12.0",
     "rollup-plugin-node-externals": "^7.0.1",
     "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-preserve-directives": "^0.4.0",
     "rollup-plugin-tailwindcss": "^1.0.0",
     "rollup-plugin-typescript2": "^0.36.0",
     "storybook": "~7.5.3",
     "tailwindcss": "^3.4.1",
-    "tsc-alias": "^1.8.8",
-    "tsconfig-paths-webpack-plugin": "~4.0.1",
     "tslib": "^2.6.2",
     "typescript": "~5.0.4",
     "typescript-plugin-styled-components": "^3.0.0"
@@ -61,6 +57,7 @@
     "build": "yarn rollup --config",
     "build:tailwind": "npx tailwindcss -i ./src/styles/globals.css -o ./dist/styles/output.css",
     "format": "prettier --write .",
+    "lint": "yarn eslint ./**/*.{ts,tsx}",
     "storybook": "yarn build:tailwind && storybook dev -p 6006",
     "build-storybook": "storybook build",
     "prepare": "husky install"

package/dist/common/colors.js

@@ -1,140 +0,0 @@
-'use strict';
-
-const COLORS = [
-    'inherit',
-    'page-bg',
-    'white',
-    'primary-blue-0',
-    'primary-blue-1',
-    'primary-blue-2',
-    'primary-blue-3',
-    'primary-blue-4',
-    'grey-0',
-    'grey-1',
-    'grey-2',
-    'grey-3',
-    'grey-4',
-    'grey-5',
-    'grey-6',
-    'grey-7',
-    'grey-8',
-    'grey-9',
-    'grey-10',
-    'red-0',
-    'red-1',
-    'red-2',
-    'red-3',
-    'red-4',
-    'red-5',
-    'red-6',
-    'red-7',
-    'red-8',
-    'red-9',
-    'red-10',
-    'green-0',
-    'green-1',
-    'green-2',
-    'green-3',
-    'green-4',
-    'green-5',
-    'green-6',
-    'green-7',
-    'green-8',
-    'green-9',
-    'green-10',
-    'blue-0',
-    'blue-1',
-    'blue-2',
-    'blue-3',
-    'blue-4',
-    'blue-5',
-    'blue-6',
-    'blue-7',
-    'blue-8',
-    'blue-9',
-    'blue-10',
-    'turquoise-0',
-    'turquoise-1',
-    'turquoise-2',
-    'turquoise-3',
-    'turquoise-4',
-    'turquoise-5',
-    'turquoise-6',
-    'turquoise-7',
-    'turquoise-8',
-    'turquoise-9',
-    'turquoise-10',
-    'purple-0',
-    'purple-1',
-    'purple-2',
-    'purple-3',
-    'purple-4',
-    'purple-5',
-    'purple-6',
-    'purple-7',
-    'purple-8',
-    'purple-9',
-    'purple-10',
-    'yellow-0',
-    'yellow-1',
-    'yellow-2',
-    'yellow-3',
-    'yellow-4',
-    'yellow-5',
-    'yellow-6',
-    'yellow-7',
-    'yellow-8',
-    'yellow-9',
-    'yellow-10',
-    'orange-0',
-    'orange-1',
-    'orange-2',
-    'orange-3',
-    'orange-4',
-    'orange-5',
-    'orange-6',
-    'orange-7',
-    'orange-8',
-    'orange-9',
-    'orange-10',
-    'hue-pink-1',
-    'hue-pink-2',
-    'hue-pink-3',
-    'hue-purple-1',
-    'hue-purple-2',
-    'hue-purple-3',
-    'hue-ocean-1',
-    'hue-ocean-2',
-    'hue-ocean-3',
-    'hue-mint-1',
-    'hue-mint-2',
-    'hue-mint-3',
-    'hue-blue-1',
-    'hue-blue-2',
-    'hue-blue-3',
-    'hue-orange-1',
-    'hue-orange-2',
-    'hue-orange-3',
-    'special-yellow-1',
-    'special-yellow-2',
-    'special-orange-1',
-    'special-orange-2',
-    'special-red-1',
-    'special-red-2',
-    'special-pink-1',
-    'special-pink-2',
-    'special-purple-1',
-    'special-purple-2',
-    'special-blue-1',
-    'special-blue-2',
-    'special-turquoise-1',
-    'special-turquoise-2',
-    'special-green-1',
-    'special-green-2',
-    'special-grape-1',
-    'special-grape-2',
-];
-const colorReference = Object.fromEntries(COLORS.map((item) => [item, `var(--color-${item})`]));
-
-exports.COLORS = COLORS;
-exports.colorReference = colorReference;

package/dist/common/date.js

@@ -1,34 +0,0 @@
-'use strict';
-
-const THIS_YEAR = +new Date().getFullYear();
-const THIS_MONTH = +new Date().getMonth() + 1;
-exports.WEEKDAYS = void 0;
-(function (WEEKDAYS) {
-    WEEKDAYS["MON"] = "Mon";
-    WEEKDAYS["TUE"] = "Tue";
-    WEEKDAYS["WED"] = "Wed";
-    WEEKDAYS["THU"] = "Thu";
-    WEEKDAYS["FRI"] = "Fri";
-    WEEKDAYS["SAT"] = "Sat";
-    WEEKDAYS["SUN"] = "Sun";
-})(exports.WEEKDAYS || (exports.WEEKDAYS = {}));
-exports.MONTHS = void 0;
-(function (MONTHS) {
-    MONTHS["JAN"] = "Jan";
-    MONTHS["FEB"] = "Feb";
-    MONTHS["MAR"] = "Mar";
-    MONTHS["APR"] = "Apr";
-    MONTHS["MAY"] = "May";
-    MONTHS["JUN"] = "Jun";
-    MONTHS["JUL"] = "Jul";
-    MONTHS["AUG"] = "Aug";
-    MONTHS["SEP"] = "Sep";
-    MONTHS["OCT"] = "Oct";
-    MONTHS["NOV"] = "Nov";
-    MONTHS["DEC"] = "Dec";
-})(exports.MONTHS || (exports.MONTHS = {}));
-const CALENDAR_WEEKS = 6;
-
-exports.CALENDAR_WEEKS = CALENDAR_WEEKS;
-exports.THIS_MONTH = THIS_MONTH;
-exports.THIS_YEAR = THIS_YEAR;

package/dist/common/styles.js

@@ -1,66 +0,0 @@
-'use strict';
-
-var styledComponents = require('styled-components');
-var colors = require('./colors.js');
-
-exports.Styles = void 0;
-(function (Styles) {
-    Styles.backgroundColor = styledComponents.css `
-    background-color: ${({ $backgroundColor }) => $backgroundColor ? colors.colorReference[$backgroundColor] : 'var(--page-bg)'};
-  `;
-    Styles.borderRadius = styledComponents.css `
-    border-radius: ${({ $borderRadius }) => $borderRadius ? `var(--${$borderRadius})` : ''};
-  `;
-    Styles.color = styledComponents.css `
-    color: ${({ $color }) => $color ? colors.colorReference[$color] : 'var(--color-grey-3)'};
-  `;
-    Styles.elevation = styledComponents.css `
-    box-shadow: ${({ $elevation }) => $elevation ? `var(--elevation-${$elevation})` : 'none'};
-  `;
-    Styles.flex = styledComponents.css `
-    align-items: ${({ $align }) => $align ?? 'normal'};
-    gap: ${({ $gap }) => $gap && typeof $gap === 'number'
-        ? `${$gap}px`
-        : $gap && typeof $gap === 'string'
-            ? `var(--${$gap})`
-            : '0px'};
-    flex: ${({ $flex }) => $flex ?? 'none'};
-    flex-flow: ${({ $flow }) => $flow ?? 'row'};
-    flex-direction: ${({ $dir }) => $dir ?? 'row'};
-    justify-content: ${({ $justify }) => $justify ?? 'normal'};
-  `;
-    Styles.margin = styledComponents.css `
-    margin: ${({ $margin }) => $margin && typeof $margin === 'number'
-        ? `${$margin}px`
-        : $margin && typeof $margin === 'string'
-            ? `var(--${$margin})`
-            : '0px'};
-  `;
-    Styles.padding = styledComponents.css `
-    padding: ${({ $padding }) => $padding && typeof $padding === 'number'
-        ? `${$padding}px;`
-        : $padding && typeof $padding === 'string' && $padding.includes('px')
-            ? $padding
-            : $padding && typeof $padding === 'string'
-                ? `var(--${$padding});`
-                : '0px'};
-  `;
-    Styles.styleable = styledComponents.css `
-    ${({ sx }) => (sx ? sx : '')}
-  `;
-    Styles.textClamp = styledComponents.css `
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    line-clamp: ${({ $textClampLines }) => $textClampLines ?? 1};
-    -webkit-line-clamp: ${({ $textClampLines }) => $textClampLines ?? 1};
-    -webkit-box-orient: vertical;
-  `;
-    Styles.typography = styledComponents.css `
-    font-style: ${({ $italic }) => ($italic ? 'italic' : 'normal')};
-    text-decoration: ${({ $strikethrough, $underline }) => $strikethrough ? 'line-through' : $underline ? 'underline' : 'none'};
-  `;
-    Styles.weight = styledComponents.css `
-    font-weight: ${({ $bold, $semiBold, $mediumBold }) => $bold ? 700 : $semiBold ? 600 : $mediumBold ? 500 : 400};
-  `;
-})(exports.Styles || (exports.Styles = {}));

package/dist/components/actions/button/button.js

@@ -1,329 +0,0 @@
-"use client";
-'use strict';
-
-var React = require('react');
-var styledComponents = require('styled-components');
-var styles = require('../../../common/styles.js');
-var paragraph = require('../../atoms/typography/paragraph.js');
-var box = require('../../atoms/box/box.js');
-var chevron_down = require('../../../icons/arrow/chevron_down.js');
-var chevron_up = require('../../../icons/arrow/chevron_up.js');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-const LG_ICON_SIZE = 20;
-const LG_ICON_SIZE_WO_CHILDREN = 24;
-const LG_FONT_SIZE = 16;
-const LG_PADDING = '11px 19px';
-const LG_PADDING_WO_CHILDREN = '11px';
-const SM_ICON_SIZE = 16;
-const SM_FONT_SIZE = 14;
-const SM_PADDING = '5px 15px';
-const SM_PADDING_WO_CHILDREN = '7px';
-const Button = ({ as = 'button', children, disabled, fluid = false, href, icon, isDropdownOpen, roundness = 'large', size = 'large', sx, type = 'primary', showChevron = true, customDropdownIcon, ...props }) => {
-    const Component = Components()[type];
-    const buttonIcon = React__default.default.Children.map(icon, (item) => {
-        if (React__default.default.isValidElement(item))
-            return {
-                ...item,
-                props: {
-                    ...(item.props ?? {}),
-                    size: size === 'large' && !children
-                        ? LG_ICON_SIZE_WO_CHILDREN
-                        : size === 'large'
-                            ? LG_ICON_SIZE
-                            : SM_ICON_SIZE,
-                },
-            };
-    })?.[0];
-    const CustomDropdownIcon = customDropdownIcon;
-    let dropdownIcon = undefined;
-    if (showChevron) {
-        if (isDropdownOpen === true) {
-            dropdownIcon = CustomDropdownIcon ? (React__default.default.createElement(CustomDropdownIcon, { sx: "margin-left:auto;", size: size === 'large' ? LG_ICON_SIZE : SM_ICON_SIZE })) : (React__default.default.createElement(chevron_up.ChevronUp, { sx: "margin-left:auto;", size: size === 'large' ? LG_ICON_SIZE : SM_ICON_SIZE }));
-        }
-        else if (isDropdownOpen === false) {
-            dropdownIcon = CustomDropdownIcon ? (React__default.default.createElement(CustomDropdownIcon, { sx: "margin-left:auto;", size: size === 'large' ? LG_ICON_SIZE : SM_ICON_SIZE })) : (React__default.default.createElement(chevron_down.ChevronDown, { sx: "margin-left:auto;", size: size === 'large' ? LG_ICON_SIZE : SM_ICON_SIZE }));
-        }
-    }
-    const padding = !!children
-        ? size === 'large'
-            ? LG_PADDING
-            : SM_PADDING
-        : size === 'large'
-            ? LG_PADDING_WO_CHILDREN
-            : SM_PADDING_WO_CHILDREN;
-    return (React__default.default.createElement(Component, { as: as, disabled: disabled, href: href, "$align": "center", "$display": "flex", "$fluid": fluid, "$gap": size === 'large' ? 12 : 8, "$hasChildren": !!children, "$justify": "center", "$padding": padding, "$roundness": roundness, "$size": size, "$sx": sx, ...props },
-        buttonIcon,
-        children && (React__default.default.createElement(paragraph.P, { as: "span", "$mediumBold": true, "$fontSize": size === 'large' ? LG_FONT_SIZE : SM_FONT_SIZE, "$color": "inherit" }, children)),
-        !!children && dropdownIcon));
-};
-const Components = () => ({
-    primary: Primary,
-    secondary: Secondary,
-    outlined: Outlined,
-    danger: Danger,
-    raised: Raised,
-    special: Special,
-    text: Text,
-    dropdown: Dropdown,
-});
-const base = styledComponents.css `
-  font-family: var(--font-inter);
-  display: flex;
-  border-radius: ${({ $roundness }) => $roundness === 'large'
-    ? '32px'
-    : $roundness === 'medium-small'
-        ? '8px'
-        : $roundness === 'small'
-            ? '4px'
-            : '0px'};
-  cursor: pointer;
-  user-select: none;
-  box-sizing: border-box;
-  outline: none;
-  ${({ $fluid }) => $fluid
-    ? `flex-basis: max-content;
-    flex: 1 !important;
-    width: max-content`
-    : ''}
-
-  svg {
-    fill: currentColor;
-  }
-
-  &:disabled {
-    background-color: var(--color-grey-9) !important;
-    border: 1px solid var(--color-grey-8) !important;
-    color: var(--color-grey-7) !important;
-    cursor: unset !important;
-  }
-`;
-const Primary = styledComponents.styled(box.Box) `
-  background-color: var(--color-primary-blue-2);
-  color: var(--color-white);
-  border: 1px solid var(--color-primary-blue-2);
-
-  &:hover {
-    border: 1px solid var(--color-primary-blue-1);
-    background-color: var(--color-primary-blue-1);
-  }
-
-  &:focus {
-    border: 1px solid var(--color-primary-blue-3);
-    background-color: var(--color-primary-blue-1);
-  }
-
-  &:active {
-    border: 1px solid var(--color-primary-blue-0);
-    background-color: var(--color-primary-blue-0);
-  }
-
-  ${base}
-  ${styles.Styles.flex}
-  ${styles.Styles.padding}
-
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-const Secondary = styledComponents.styled(box.Box) `
-  background-color: var(--color-primary-blue-4);
-  color: var(--color-primary-blue-2);
-  border: 1px solid var(--color-primary-blue-4);
-
-  &:hover {
-    background-color: var(--color-primary-blue-1);
-    color: var(--color-primary-blue-1);
-    border: 1px solid var(--color-primary-blue-1);
-  }
-
-  &:focus {
-    border: 1px solid var(--color-primary-blue-2);
-    color: var(--color-primary-blue-1);
-  }
-
-  &:active {
-    border: 1px solid var(--color-primary-blue-0);
-    color: var(--color-primary-blue-0);
-  }
-
-  ${base}
-  ${styles.Styles.flex}
-  ${styles.Styles.padding}
-
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-const Outlined = styledComponents.styled(box.Box) `
-  background-color: var(--color-white);
-  color: var(--color-grey-3);
-  border: 1px solid var(--color-grey-8);
-
-  &.icon {
-    border: 1px solid var(--color-white);
-  }
-
-  &:hover {
-    background-color: var(--color-grey-10);
-    border: 1px solid var(--color-grey-8);
-
-    &.icon {
-      border: 1px solid var(--color-grey-8);
-    }
-  }
-
-  &:focus {
-    background-color: var(--color-grey-10);
-    border: 1px solid var(--color-primary-blue-3);
-
-    &.icon {
-      border: 1px solid var(--color-grey-8);
-    }
-  }
-
-  &:active {
-    background-color: var(--color-grey-9);
-    border: 1px solid var(--color-grey-8);
-  }
-
-  ${base}
-  ${styles.Styles.flex}
-  ${styles.Styles.padding}
-
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-const Danger = styledComponents.styled(box.Box) `
-  background-color: var(--color-red-4);
-  color: var(--color-white);
-  border: 1px solid var(--color-red-4);
-
-  &:hover {
-    border: 1px solid var(--color-red-3);
-    background-color: var(--color-red-3);
-  }
-
-  &:focus {
-    border: 1px solid var(--color-primary-blue-2);
-    background-color: var(--color-red-3);
-  }
-
-  &:active {
-    border: 1px solid var(--color-red-2);
-    background-color: var(--color-red-2);
-  }
-
-  ${base}
-  ${styles.Styles.flex}
-  ${styles.Styles.padding}
-
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-const Text = styledComponents.styled(box.Box) `
-  background-color: transparent;
-  border: 1px solid transparent;
-  color: var(--color-primary-blue-2);
-
-  &:hover {
-    color: var(--color-primary-blue-1);
-  }
-
-  &:focus {
-    color: var(--color-primary-blue-1);
-    border: 1px solid var(--color-primary-blue-2);
-  }
-
-  &:active {
-    color: var(--color-primary-blue-0);
-  }
-
-  &:disabled {
-    background-color: transparent !important;
-    border: 1px solid transparent !important;
-  }
-
-  ${base}
-  ${styles.Styles.flex}
-  ${styles.Styles.padding}
-
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-const Raised = styledComponents.styled(box.Box) `
-  background-color: var(--color-white);
-  color: var(--color-grey-3);
-  border: 1px solid var(--color-white);
-  box-shadow: var(--elevation-1);
-
-  &:hover {
-    background-color: var(--color-grey-9);
-    border: 1px solid var(--color-grey-9);
-  }
-
-  &:active {
-    background-color: var(--color-grey-8);
-    border: 1px solid var(--color-grey-8);
-  }
-
-  &:disabled {
-    border: 1px solid var(--color-grey-9) !important;
-  }
-
-  ${base}
-  ${styles.Styles.flex}
-  ${styles.Styles.padding}
-
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-const Special = styledComponents.styled(box.Box) `
-  background-color: transparent;
-  border: 1px solid transparent;
-  color: var(--color-primary-grey-3);
-
-  &:hover {
-    background-color: var(--color-grey-10);
-  }
-
-  &:focus-visible {
-    background-color: var(--color-grey-10);
-    border: 1px solid var(--color-primary-blue-2);
-  }
-
-  &:active {
-    background-color: var(--color-grey-9);
-    border: 1px solid var(--color-grey-9);
-  }
-
-  &:disabled {
-    background-color: transparent !important;
-    border: 1px solid transparent !important;
-  }
-
-  ${base}
-  ${styles.Styles.flex}
-  ${styles.Styles.padding}
-
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-const Dropdown = styledComponents.styled(box.Box) `
-  width: 100%;
-  background-color: var(--color-blue-10);
-  color: var(--color-grey-3);
-  border: 1px solid var(--color-primary-blue-2);
-  justify-content: flex-start;
-  padding: 16px;
-  border: 0;
-
-  &:hover {
-    border: 0;
-    background-color: var(--color-blue-10);
-  }
-
-  ${base}
-  ${styles.Styles.flex}
-  ${styles.Styles.padding}
-
-  border-radius: 8px;
-
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-
-exports.Button = Button;