@soul-refiner/design-system 2.5.0-alpha.5 → 2.5.0-alpha.7

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "2.5.0-alpha.5",
+  "version": "2.5.0-alpha.7",
   "main": "dist/index.js",
-  "types": "dist/src/index.d.ts",
+  "types": "dist/index.d.ts",
   "license": "MIT",
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
@@ -13,12 +13,19 @@
   "files": [
     "dist/**/*"
   ],
+  "sideEffects": [
+    "**/*.css"
+  ],
   "exports": {
     ".": {
       "import": {
-        "types": "./dist/src/index.d.ts",
+        "types": "./dist/index.d.ts",
         "default": "./dist/index.js"
       }
+    },
+    "./dist/*.css": {
+      "import": "./dist/*.css",
+      "require": "./dist/*.css"
     }
   },
   "devDependencies": {
@@ -57,8 +64,8 @@
     "webpack": "~5.89.0"
   },
   "scripts": {
-    "build": "yarn rollup --config",
-    "build:tailwind": "npx tailwindcss -i ./src/styles/globals.css -o ./dist/styles/output.css",
+    "build": "yarn build:tailwind && tsc -p tsconfig.build.json && node_modules/.bin/tsc-alias",
+    "build:tailwind": "npx tailwindcss -i ./src/styles/globals.css -o ./dist/styles/globals.css",
     "format": "prettier --write .",
     "storybook": "yarn build:tailwind && storybook dev -p 6006",
     "build-storybook": "storybook build",

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

@@ -1,59 +0,0 @@
-import React from 'react';
-import { Button } from './button';
-import { Plus } from '../../../icons';
-const meta = {
-    title: 'Actions/Button',
-    parameters: {
-        layout: 'centered',
-    },
-};
-const Story = ({ children, icon, ...args }) => (React.createElement(Button, { icon: icon ? React.createElement(Plus, null) : undefined, ...args }, children));
-export const Default = Story.bind({});
-Default.argTypes = {
-    children: {
-        type: 'string',
-    },
-    disabled: {
-        type: 'boolean',
-    },
-    icon: {
-        type: 'boolean',
-    },
-    isDropdownOpen: {
-        type: 'boolean',
-    },
-    size: {
-        type: 'string',
-        options: ['large', 'small'],
-        control: 'select',
-    },
-    roundness: {
-        type: 'string',
-        options: ['none', 'small', 'medium-small', 'large'],
-        control: 'select',
-    },
-    type: {
-        type: 'string',
-        options: [
-            'primary',
-            'secondary',
-            'outlined',
-            'danger',
-            'text',
-            'raised',
-            'special',
-            'dropdown',
-        ],
-        control: 'select',
-    },
-};
-Default.args = {
-    children: 'Button',
-    disabled: false,
-    icon: undefined,
-    isDropdownOpen: undefined,
-    size: 'large',
-    roundness: 'large',
-    type: 'primary',
-};
-export default meta;

package/dist/src/components/actions/dropdown/dropdown.stories.d.ts

@@ -1,5 +0,0 @@
-import { StoryFn, Meta } from '@storybook/react';
-import { DropdownProps } from './dropdown';
-declare const meta: Meta;
-export declare const Default: StoryFn<DropdownProps>;
-export default meta;

package/dist/src/components/actions/dropdown/dropdown.stories.js

@@ -1,100 +0,0 @@
-import React from 'react';
-import { Avatar, Button } from '../../';
-import { Eye } from '../../../icons';
-import { Dropdown } from './dropdown';
-const meta = {
-    title: 'Actions/Dropdown',
-    args: {
-        checkbox: true,
-        closeOnBlur: true,
-        closeOnChange: true,
-        defaultValue: '',
-        hasArrow: true,
-        multiple: true,
-        maintainState: true,
-        open: 'right',
-    },
-    argTypes: {
-        checkbox: {
-            type: 'boolean',
-        },
-        closeOnBlur: {
-            type: 'boolean',
-        },
-        closeOnChange: {
-            type: 'boolean',
-        },
-        defaultValue: {
-            type: 'string',
-        },
-        hasArrow: {
-            type: 'boolean',
-            description: 'This does not add an arrow to the button. Arrow is added automatically to trigger if it is a Button',
-        },
-        maintainState: {
-            type: 'boolean',
-        },
-        multiple: {
-            type: 'boolean',
-        },
-        open: {
-            options: ['left', 'right'],
-            control: {
-                type: 'radio',
-            },
-        },
-        trigger: {
-            control: false,
-        },
-    },
-    parameters: {
-        backgrounds: {
-            default: 'dark',
-        },
-        layout: 'centered',
-    },
-};
-export const Default = (args) => (React.createElement(Dropdown, { ...args, options: [
-        {
-            label: 'Dropdown Option 1',
-            sublabel: 'option sublabel',
-            value: 'option1',
-        },
-        {
-            label: 'Dropdown 2',
-            sublabel: 'option sublabel',
-            value: 'option2',
-        },
-        {
-            label: 'Dropdown 3',
-            value: 'option3',
-        },
-        {
-            label: 'Dropdown 4',
-            value: 'option4',
-        },
-        {
-            label: 'Dropdown 5',
-            sublabel: 'option sublabel',
-            value: 'option5',
-        },
-        {
-            icon: React.createElement(Eye, null),
-            label: 'Dropdown 6',
-            sublabel: 'option sublabel',
-            value: 'option6',
-        },
-        {
-            icon: (React.createElement(Avatar, { image: "https://f005.backblazeb2.com/file/sr-platform/avatar.jpg", size: 16 })),
-            label: 'Dropdown 7',
-            value: 'option7',
-        },
-        'break',
-        {
-            disabled: true,
-            label: 'Disabled Option',
-            sublabel: 'option sublabel',
-            value: 'option8',
-        },
-    ], trigger: React.createElement(Button, null, "Trigger") }));
-export default meta;

package/dist/src/components/actions/rate/rate.stories.js

@@ -1,29 +0,0 @@
-import React from 'react';
-import { Rate } from './rate';
-const meta = {
-    title: 'Actions/Rate',
-    parameters: {
-        layout: 'centered',
-    },
-};
-const Story = (args) => {
-    const [userRating, setUserRating] = React.useState();
-    const handleRate = (rating) => setUserRating(rating);
-    return React.createElement(Rate, { onRate: handleRate, userRating: userRating, ...args });
-};
-export const Default = Story.bind({});
-Default.argTypes = {
-    percent: {
-        type: 'number',
-        control: 'range',
-    },
-    size: {
-        options: ['small', 'large'],
-        control: 'select',
-    },
-};
-Default.args = {
-    percent: 100,
-    size: 'large',
-};
-export default meta;

package/dist/src/components/actions/switch/switch.stories.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import { Switch } from './switch';
-import { Moon, Sun, Folder } from '../../../icons';
-const meta = {
-    title: 'Actions/Switch',
-    parameters: {
-        layout: 'centered',
-    },
-};
-const Story = (args) => {
-    const [value, setValue] = React.useState('value1');
-    const handleChange = (event) => {
-        setValue(event.target.value);
-    };
-    return (React.createElement(Switch, { ...args, onChange: handleChange, value: value },
-        React.createElement(Switch.Item, { icon: React.createElement(Moon, null), value: "value1" }, "Upload"),
-        React.createElement(Switch.Item, { icon: React.createElement(Sun, null), value: "value2" }, "Default"),
-        React.createElement(Switch.Item, { icon: React.createElement(Folder, null), value: "value3" }, "Another")));
-};
-export const Default = Story.bind({});
-Default.argTypes = {};
-Default.args = {
-    disabled: false,
-};
-export default meta;

package/dist/src/components/actions/toggle/toggle.stories.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import { Toggle } from './toggle';
-const meta = {
-    title: 'Actions/Toggle',
-    parameters: {
-        layout: 'centered',
-    },
-};
-// eslint-disable-next-line
-const Story = ({ checked: _, ...args }) => {
-    const [checked, setChecked] = React.useState();
-    const handleCheck = () => setChecked((prev) => (prev === undefined ? true : !prev));
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Toggle, { checked: checked, onChange: handleCheck, ...args })));
-};
-export const Default = Story.bind({});
-Default.args = {
-    label: 'Toggle Label',
-};
-export default meta;

package/dist/src/components/actions/upload/upload.stories.d.ts

@@ -1,5 +0,0 @@
-import { StoryFn, Meta } from '@storybook/react';
-import { UploadProps } from './upload';
-declare const meta: Meta<UploadProps>;
-export declare const Default: StoryFn<UploadProps>;
-export default meta;

package/dist/src/components/actions/upload/upload.stories.js

@@ -1,57 +0,0 @@
-import React from 'react';
-import { COLORS } from '../../../common';
-import { Upload } from './upload';
-const meta = {
-    title: 'Actions/Upload',
-    component: Upload,
-    parameters: {
-        layout: 'padded',
-    },
-    argTypes: {
-        background: {
-            control: 'select',
-            options: Object.keys(COLORS),
-        },
-        borderColor: {
-            control: 'select',
-            options: Object.keys(COLORS),
-        },
-        iconColor: {
-            control: 'select',
-            options: Object.keys(COLORS),
-        },
-        size: {
-            control: 'select',
-            options: ['large', 'small', 'fit-content'],
-        },
-        type: {
-            control: 'select',
-            options: ['audio', 'image', 'file', 'video'],
-        },
-    },
-};
-const Template = (args) => React.createElement(Upload, { ...args });
-export const Default = Template.bind({});
-Default.args = {
-    background: 'hue-blue-3',
-    borderColor: 'hue-blue-2',
-    iconColor: 'primary-blue-2',
-    size: 'large',
-    subtext: '(Photo should be less than 2MB; Minimum size 180 x 180 px)',
-    text: 'Drag and drop your image here or',
-    type: 'image',
-    validation: {
-        format: ['image/jpeg', 'image/png'],
-        size: '2Mb',
-        minHeight: 180,
-        minWidth: 180,
-    },
-    onDrop: (files) => {
-        alert('Files dropped: ' +
-            Array.from(files)
-                .map((file) => file.name)
-                .join(', '));
-    },
-    validationMessage: "Your photos couldn't be uploaded. Photo should be less than 2 MB and saved as JPG, PNG, TIFF, HEIF or WebP files.",
-};
-export default meta;

package/dist/src/components/atoms/box/box.stories.d.ts

@@ -1,6 +0,0 @@
-import { StoryFn, Meta } from '@storybook/react';
-import { BoxProps } from './box';
-declare const meta: Meta;
-declare const Story: StoryFn<BoxProps>;
-export declare const Default: typeof Story;
-export default meta;

package/dist/src/components/atoms/box/box.stories.js

@@ -1,85 +0,0 @@
-import React from 'react';
-import { COLORS } from '../../../common';
-import { Box } from './box';
-const ALIGN_OPTIONS = [
-    'center',
-    'flex-start',
-    'flex-end',
-    'baseline',
-    'stretch',
-];
-const SIZE_OPTIONS = [
-    'extra-small',
-    'small',
-    'medium',
-    'medium-large',
-    'large',
-    'extra-large',
-    'full',
-];
-const meta = {
-    title: 'Atoms/Box',
-    argTypes: {
-        $align: {
-            type: 'string',
-            options: ALIGN_OPTIONS,
-            control: 'select',
-        },
-        $backgroundColor: {
-            type: 'string',
-            options: COLORS,
-            control: 'select',
-        },
-        $borderRadius: {
-            type: 'string',
-            options: SIZE_OPTIONS,
-            control: 'select',
-        },
-        $dir: {
-            type: 'string',
-            options: ['row', 'column', 'row-reverse', 'column-reverse'],
-            control: 'select',
-        },
-        $display: {
-            type: 'string',
-            options: ['flex', 'block'],
-            control: 'inline-radio',
-        },
-        $elevation: {
-            type: 'string',
-            options: [1, 2, 3, 4, 5, 6, 7, 8, 9],
-            control: 'select',
-        },
-        $gap: {
-            type: 'string',
-            options: SIZE_OPTIONS,
-            control: 'select',
-        },
-        $margin: {
-            type: 'string',
-            options: SIZE_OPTIONS,
-            control: 'select',
-        },
-        $padding: {
-            type: 'string',
-            options: SIZE_OPTIONS,
-            control: 'select',
-        },
-    },
-    args: {
-        $backgroundColor: 'grey-9',
-        $borderRadius: 'large',
-        $dir: 'row',
-        $display: 'flex',
-        $gap: 'small',
-        $elevation: 3,
-        $margin: 'large',
-        $padding: 'medium',
-    },
-    parameters: {
-        layout: 'fullscreen',
-    },
-};
-const Story = (args) => (React.createElement(Box, { ...args, sx: "width: 300px; height: 300px;" }, Array.from(Array(10).keys()).map((item) => (React.createElement(Box, { key: item, "$display": "block", "$backgroundColor": "blue-3", sx: "width: 15px; height: 15px;" })))));
-export const Default = Story.bind({});
-export default meta;

package/dist/src/components/atoms/colors/colors.stories.js

@@ -1,75 +0,0 @@
-import React from 'react';
-import { colorReference, COLORS } from '../../../common';
-import { Colors } from './colors';
-const meta = {
-    title: 'Atoms/Colors',
-    component: Colors,
-    argTypes: {
-        title: {
-            control: 'none',
-        },
-        colors: {
-            control: 'none',
-        },
-    },
-    parameters: {
-        layout: 'centered',
-    },
-};
-const Story = (args) => React.createElement(Colors, { ...args });
-export const PrimaryBlue = Story.bind({});
-PrimaryBlue.args = {
-    colors: COLORS.filter((color) => color.startsWith('primary-blue')).map((color) => colorReference[color]),
-    title: 'Primary Blue',
-};
-export const Grey = Story.bind({});
-Grey.args = {
-    colors: COLORS.filter((color) => color.startsWith('grey-')).map((color) => colorReference[color]),
-    title: 'Grey',
-};
-export const Red = Story.bind({});
-Red.args = {
-    colors: COLORS.filter((color) => color.startsWith('red-')).map((color) => colorReference[color]),
-    title: 'Red',
-};
-export const Green = Story.bind({});
-Green.args = {
-    colors: COLORS.filter((color) => color.startsWith('green-')).map((color) => colorReference[color]),
-    title: 'Green',
-};
-export const Blue = Story.bind({});
-Blue.args = {
-    colors: COLORS.filter((color) => color.startsWith('blue-')).map((color) => colorReference[color]),
-    title: 'Blue',
-};
-export const Turquoise = Story.bind({});
-Turquoise.args = {
-    colors: COLORS.filter((color) => color.startsWith('turquoise-')).map((color) => colorReference[color]),
-    title: 'Turquoise',
-};
-export const Purple = Story.bind({});
-Purple.args = {
-    colors: COLORS.filter((color) => color.startsWith('purple-')).map((color) => colorReference[color]),
-    title: 'Purple',
-};
-export const Yellow = Story.bind({});
-Yellow.args = {
-    colors: COLORS.filter((color) => color.startsWith('yellow-')).map((color) => colorReference[color]),
-    title: 'Yellow',
-};
-export const Orange = Story.bind({});
-Orange.args = {
-    colors: COLORS.filter((color) => color.startsWith('orange-')).map((color) => colorReference[color]),
-    title: 'Orange',
-};
-export const Colorify = Story.bind({});
-Colorify.args = {
-    colors: COLORS.filter((color) => color.startsWith('hue-')).map((color) => colorReference[color]),
-    title: 'Colorify',
-};
-export const Special = Story.bind({});
-Special.args = {
-    colors: COLORS.filter((color) => color.startsWith('special-')).map((color) => colorReference[color]),
-    title: 'Special',
-};
-export default meta;

package/dist/src/components/atoms/hide/hide.stories.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import { HideButRender } from './hide';
-import { H } from '../typography';
-const meta = {
-    title: 'Atoms/Hide',
-};
-const Story = (args) => (React.createElement(React.Fragment, null,
-    React.createElement(H.One, null, "Other Content"),
-    React.createElement(HideButRender, { ...args },
-        React.createElement(H.One, null, "Showing the Content")),
-    React.createElement(H.One, null, "Other Content")));
-export const Default = Story.bind({});
-Default.args = {
-    displaceContent: false,
-    show: false,
-};
-export default meta;

package/dist/src/components/atoms/seconds_to_duration/seconds_to_duration.stories.js

@@ -1,22 +0,0 @@
-import React from 'react';
-import { SecToDuration } from './seconds_to_duration';
-const meta = {
-    title: 'Atoms/Seconds To Duration',
-};
-const Story = (args) => (React.createElement(SecToDuration, { ...args }));
-export const Default = Story.bind({});
-Default.args = {
-    seconds: 500,
-};
-Default.argTypes = {
-    seconds: {
-        type: 'number',
-        control: {
-            type: 'number',
-            min: 0,
-            max: 10000,
-            step: 10,
-        },
-    },
-};
-export default meta;

package/dist/src/components/atoms/time_ago/time_ago.stories.js

@@ -1,11 +0,0 @@
-import React from 'react';
-import { TimeAgo } from './time_ago';
-const meta = {
-    title: 'Atoms/TimeAgo',
-};
-const Story = (args) => React.createElement(TimeAgo, { ...args });
-export const Default = Story.bind({});
-Default.args = {
-    date: new Date(new Date().getTime() - 500024),
-};
-export default meta;

package/dist/src/components/atoms/typography/typography.stories.js

@@ -1,96 +0,0 @@
-import React from 'react';
-import { COLORS } from '../../../common';
-import { Display as DisplayComponent } from './display';
-import { H } from './heading';
-import { P } from './paragraph';
-const meta = {
-    title: 'Atoms/Typography',
-    argTypes: {
-        as: {
-            control: 'none',
-        },
-        $color: {
-            type: 'string',
-            options: COLORS,
-            control: 'select',
-        },
-        $bold: {
-            control: 'inline-radio',
-            options: [false, true],
-        },
-        $semiBold: {
-            control: 'inline-radio',
-            options: [false, true],
-        },
-        $mediumBold: {
-            control: 'inline-radio',
-            options: [false, true],
-        },
-        $italic: {
-            control: 'inline-radio',
-            options: [false, true],
-        },
-        $textAlign: {
-            type: 'string',
-            options: ['left', 'center', 'right', 'justify'],
-            control: 'select',
-        },
-        $strikethrough: {
-            control: 'inline-radio',
-            options: [false, true],
-        },
-        $underline: {
-            control: 'inline-radio',
-            options: [false, true],
-        },
-    },
-    args: {
-        children: 'This is some text',
-        $color: 'grey-3',
-        $bold: false,
-        $semiBold: false,
-        $mediumBold: false,
-        $italic: false,
-        $textAlign: 'left',
-        $strikethrough: false,
-        $underline: false,
-    },
-    parameters: {
-        layout: 'fullscreen',
-    },
-};
-const DisplayStory = (args) => (React.createElement(DisplayComponent, { ...args }));
-export const Display = DisplayStory.bind({});
-const HStory = ({ type, ...args }) => {
-    const Component = type === 'One'
-        ? H.One
-        : type === 'Two'
-            ? H.Two
-            : type === 'Three'
-                ? H.Three
-                : type === 'Four'
-                    ? H.Four
-                    : type === 'Five'
-                        ? H.Five
-                        : type === 'Six'
-                            ? H.Six
-                            : type === 'Seven'
-                                ? H.Seven
-                                : H.Eight;
-    return React.createElement(Component, { ...args });
-};
-export const Heading = HStory.bind({});
-Heading.args = {
-    type: 'One',
-};
-Heading.argTypes = {
-    type: {
-        type: 'string',
-        defaultValue: 'One',
-        options: ['One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight'],
-        control: 'select',
-    },
-};
-const PStory = (args) => React.createElement(P, { ...args });
-export const Paragraph = PStory.bind({});
-export default meta;