Develop: tags

.github/workflows/release_master_tags.yml

@@ -16,7 +16,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 12
+          node-version: 14
       - run: yarn install
       - run: npm run test-build
   publish-npm:
@@ -26,7 +26,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 12
+          node-version: 14
           registry-url: https://registry.npmjs.org/
       - run: yarn install
       - run: node package.js

.storybook/main.js

@@ -1,8 +1,43 @@
+const path = require('path');
+const pathToInlineSvg = path.resolve(__dirname, '../src/assets/icons');
+
 module.exports = {
+    core: {
+        builder: 'webpack5',
+    },
     stories: ['../stories/**/*.stories.@(tsx|jsx|mdx)'],
-    addons: ['@storybook/addon-docs', '@storybook/addon-actions', '@storybook/addon-links', '@storybook/addon-viewport', '@storybook/addon-knobs'],
+    addons: [
+        '@storybook/addon-docs',
+        '@storybook/addon-actions',
+        '@storybook/addon-links',
+        '@storybook/addon-viewport',
+        '@storybook/addon-knobs',
+        {
+            name: '@storybook/addon-postcss',
+            options: {
+                postcssLoaderOptions: {
+                    implementation: require('postcss'),
+                },
+            },
+        },
+    ],
+    typescript: {
+        reactDocgen: 'react-docgen-typescript-plugin',
+    },
     babel: async (options) => ({
         ...options,
-        plugins : ['@babel/plugin-proposal-export-default-from']
+        plugins: ['@babel/plugin-proposal-export-default-from'],
     }),
+    webpackFinal: async (config, { configType }) => {
+        const file_loader_rule = config.module.rules.find((rule) => rule.test && rule.test.test('.svg'));
+        file_loader_rule.exclude = /svg$/;
+        config.module.rules.push({
+            test: /\.svg$/,
+            use: ['@svgr/webpack', 'url-loader'],
+        });
+
+        return {
+            ...config,
+        };
+    },
 };

.storybook/preview-body.html

@@ -1,13 +1,13 @@
 <style>
-    @import url('https://fonts.googleapis.com/css?family=Muli:400,600,700,800,900');
+    @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
 
-
-    html,body {
+    html,
+    body {
         margin: 0;
         padding: 0;
         width: 100%;
         background-color: #f5f5f5;
-        font-family: 'Avenir Next','Roboto', "open sans", "Arial";
+        font-family: 'Roboto', 'open sans', 'Arial';
         font-weight: 400;
     }
 
@@ -18,17 +18,13 @@
     }
 
     a {
-        textDecoration: none !important;
-    }
-
-    *:focus {
-        outline: none;
+        textdecoration: none !important;
     }
 
-    [contenteditable=true]:empty:before{
+    [contenteditable='true']:empty:before {
         content: attr(placeholder);
         display: block;
-        color: #8e8e8e
+        color: #8e8e8e;
     }
 
     #Avataaar #Color\/Palette\/Blue-01 {
@@ -48,5 +44,4 @@
         cursor: pointer;
         outline: inherit;
     }
-
 </style>

.storybook/preview.js

@@ -1,13 +1,17 @@
 import React from 'react';
 
-import { addDecorator, addParameters } from '@storybook/react';
-import { DesignSystemProvider } from '../src/design_system_context/design_system_context';
-import ThemeProvider from '@material-ui/styles/ThemeProvider';
-import { DEFAULT_THEME } from '../src/styles/theme';
-import { ELEVATION_PROPS } from '../src/card/card_elevation_props';
-import { createMuiTheme } from '@material-ui/core';
 
-export const theme = createMuiTheme({
+import {addDecorator, addParameters} from '@storybook/react';
+import {DesignSystemProvider} from '../src/design_system_context/design_system_context';
+import {DEFAULT_THEME} from '../src/styles/theme';
+import {ELEVATION_PROPS} from '../src/card/card_elevation_props';
+import {createTheme, adaptV4Theme} from '@mui/material';
+
+import '../src/styles/tailwind.css';
+import './style.css';
+
+
+export const theme = createTheme(adaptV4Theme({
     ...DEFAULT_THEME,
     shadows: ['none', ...new Array(40).fill(ELEVATION_PROPS[0])],
     spacing: 8,
@@ -16,16 +20,7 @@ export const theme = createMuiTheme({
         accCopy[name].main = values[500];
         return accCopy;
     }, DEFAULT_THEME.palette),
-});
-
-addDecorator((story) => (
-    <ThemeProvider theme={theme}>
-        <DesignSystemProvider>{story()}</DesignSystemProvider>
-    </ThemeProvider>
-));
+}));
+export const argTypes = {colors: {control: {options: Object.keys(DEFAULT_THEME.palette)}}};
 
-addParameters({
-    options: {
-        theme: theme,
-    },
-});
+addDecorator((story) => (<DesignSystemProvider>{story()}</DesignSystemProvider>));

.storybook/style.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';

dist/cjs/assets/icons/arrow_component.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const ArrowIcon: React.FC<{
+    className?: string;
+}>;

dist/cjs/assets/icons/move.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const MoveIcon: React.FC<{
+    className?: string;
+}>;

dist/cjs/assets/icons/speech_bubble_arrow_component.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const SpeechBubbleArrow: React.FC<{
+    className?: string;
+}>;

dist/cjs/assets/icons/swipe_component.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const SwipeIcon: React.FC<{
+    className?: string;
+}>;

dist/cjs/assets/icons/trash.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const TrashIcon: React.FC<{
+    className?: string;
+}>;

dist/cjs/assets/icons/warning_component.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const WarningIcon: React.FC<{
+    className?: string;
+}>;

dist/cjs/autocomplete/autocomplete.d.ts

@@ -0,0 +1,36 @@
+import { ReactElement } from 'react';
+import { TextFieldProps } from '../text_field/text_field';
+import { PopperProps } from '@mui/material/Popper';
+export interface SuggestionSelectedEventData<TSuggestion> {
+    suggestion: TSuggestion;
+    suggestionValue: string;
+    suggestionIndex: number;
+    sectionIndex: number | null;
+    method: 'click' | 'enter';
+}
+interface Props<T> {
+    multiple?: boolean;
+    selectedSuggestions?: string[];
+    placeholder?: string;
+    suggestions: T[];
+    onChange: (value: any) => void;
+    onSelect: (data: SuggestionSelectedEventData<T>) => void;
+    getSuggestionValue: (value: any) => any;
+    renderSuggestion?: (value: any) => 'string' | ReactElement | JSX.Element;
+    renderSuggestionsContainer?: (value: any) => 'string' | ReactElement | JSX.Element;
+    renderInputComponent?: (value: any) => 'string' | ReactElement | JSX.Element;
+    filterFunction?: (input: string) => (value: any) => boolean;
+    renderNoSuggestion?: (...attibutes: any[]) => 'string' | ReactElement | JSX.Element;
+    maxLength?: number;
+    value: string;
+    id?: string;
+    name?: string;
+    transformSuggestionValue?: (value: any) => any;
+    classes?: {
+        popper?: string;
+        field?: string;
+    };
+    popperProps?: Partial<PopperProps>;
+}
+export declare const AutoComplete: <T extends unknown>({ multiple, ...other }: Omit<TextFieldProps, "onChange" | "onSelect" | "multiple"> & Props<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

dist/cjs/banner/banner.d.ts

@@ -0,0 +1,13 @@
+import React, { PropsWithChildren } from 'react';
+import { BannerType } from './banner_data';
+interface Props {
+    type?: BannerType;
+    icon?: any;
+    className?: string;
+    classes?: {
+        container?: string;
+    };
+    size?: 'small';
+}
+export declare const Banner: React.FC<PropsWithChildren<Props>>;
+export {};

dist/cjs/banner/banner_data.d.ts

@@ -0,0 +1,9 @@
+import { ElementType } from 'react';
+import { PaletteColors } from '../styles/palette';
+export type BannerType = 'warning' | 'error' | 'success' | 'info' | 'default';
+export declare const BANNER_DATA: {
+    [key in BannerType]: {
+        color: PaletteColors;
+        icon?: ElementType | null;
+    };
+};

dist/cjs/banner/banner_styles.d.ts

@@ -0,0 +1,20 @@
+export declare const baseStyles: {
+    container: {
+        regular: string;
+        small: string;
+    };
+    background: {
+        regular: string;
+        small: null;
+    };
+};
+export declare const iconStyles: {
+    container: {
+        regular: string;
+        small: string;
+    };
+    icon: {
+        regular: string;
+        small: string;
+    };
+};

dist/cjs/button/button.d.ts

@@ -0,0 +1,27 @@
+import React, { ButtonHTMLAttributes } from 'react';
+import { PaletteColors } from '../styles';
+import { ButtonVariants } from './button_styles';
+interface CustomProps {
+    component?: string;
+    className?: string;
+    containerRef?: any;
+    disabled?: boolean;
+    size?: 'small' | 'xs' | 'regular';
+    color?: PaletteColors;
+    containerProps?: any;
+    typographyClassName?: any;
+    variant?: ButtonVariants;
+    onMouseEnter?: any;
+    onMouseLeave?: any;
+    onFocus?: any;
+    onBlur?: any;
+    onClick?: any;
+    classes?: {
+        container?: string;
+        typography?: string;
+    };
+    style?: any;
+}
+export type ButtonProps = CustomProps & ButtonHTMLAttributes<HTMLButtonElement>;
+export declare const Button: React.ForwardRefExoticComponent<CustomProps & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<unknown>>;
+export {};

dist/cjs/button/button_styles.d.ts

@@ -0,0 +1,28 @@
+import { ButtonProps } from './button';
+type StylesKeys = 'container' | 'typography';
+export type ButtonVariants = 'contained' | 'outlined' | 'text' | 'raised';
+export type Classes = {
+    [key in StylesKeys]?: string;
+};
+export declare const baseStyles: {
+    container: string;
+    brightLayer: string;
+    typography: string;
+    disabled: string;
+};
+export declare const sizeStyles: {
+    [key in Exclude<ButtonProps['size'], undefined>]: string;
+};
+export declare const typographysizeStyles: {
+    [key in Exclude<ButtonProps['size'], undefined>]: string;
+};
+export declare const variantStyles: {
+    [key in Exclude<ButtonProps['variant'], undefined> | 'default']: string;
+};
+export declare const layerVariantStyles: {
+    [key in Exclude<ButtonProps['variant'], undefined>]: string;
+};
+export declare const textVariantStyles: {
+    [key in Exclude<ButtonProps['variant'], undefined>]: string;
+};
+export {};

dist/cjs/card/card.d.ts

@@ -0,0 +1,18 @@
+import React, { CSSProperties } from 'react';
+export type CardVariant = 'flat';
+interface Props {
+    component?: string;
+    className?: string;
+    containerRef?: any;
+    elevation?: 0 | 1 | 'drawer';
+    style?: CSSProperties;
+    classes?: {
+        container?: string;
+    };
+    customClasses?: {
+        container?: string;
+    };
+    variant?: CardVariant;
+}
+export declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<any> & Props & React.RefAttributes<any>>;
+export {};

dist/cjs/card/card_elevation_props.d.ts

@@ -0,0 +1,4 @@
+import { CardVariant } from './card';
+export declare const ELEVATION_PROPS: {
+    [key in CardVariant | 'regular']: any;
+};