@integrigo/integrigo-ui 1.6.7-c → 1.6.10-a

package/lib/src/components/molecules/Dropdown/Dropdown.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ValidationType } from '../../../types/validation';
+import { Option } from './Option';
+export interface DropdwonStaticProps {
+    Option: typeof Option;
+}
+export interface DropdownProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+    validationType: ValidationType;
+    label?: string;
+    size: 'xl' | 'l' | 'm' | 's';
+}
+declare const DropdownWithStatic: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLSelectElement>> & {
+    Option: React.FC<{}>;
+};
+export { DropdownWithStatic as Dropdown };

package/lib/src/components/molecules/Dropdown/Dropdown.stories.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<React.ForwardRefExoticComponent<import("./Dropdown").DropdownProps & React.RefAttributes<HTMLSelectElement>> & {
+    Option: React.FC<{}>;
+}>;
+export default _default;
+export declare const Basic: ComponentStory<React.ForwardRefExoticComponent<import("./Dropdown").DropdownProps & React.RefAttributes<HTMLSelectElement>> & {
+    Option: React.FC<{}>;
+}>;
+export declare const WithLabel: ComponentStory<React.ForwardRefExoticComponent<import("./Dropdown").DropdownProps & React.RefAttributes<HTMLSelectElement>> & {
+    Option: React.FC<{}>;
+}>;

package/lib/src/components/molecules/Dropdown/Option.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Option: React.FC;

package/lib/src/components/molecules/Dropdown/index.d.ts

@@ -0,0 +1 @@
+export { Dropdown } from './Dropdown';

package/lib/src/components/molecules/InfoCard/InfoCard.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface InfoCardProps {
+    title: string;
+    body: React.ReactNode;
+    background?: React.ReactNode;
+    inverse?: boolean;
+    size?: 's' | 'm' | 'l' | 'xl' | 'xxl';
+}
+export declare const InfoCard: React.FC<InfoCardProps>;

package/lib/src/components/molecules/InfoCard/InfoCard.stories.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<React.FC<import("./InfoCard").InfoCardProps>>;
+export default _default;
+export declare const Basic: ComponentStory<React.FC<import("./InfoCard").InfoCardProps>>;
+export declare const WithBackground: ComponentStory<React.FC<import("./InfoCard").InfoCardProps>>;
+export declare const Inversed: ComponentStory<React.FC<import("./InfoCard").InfoCardProps>>;

package/lib/src/components/molecules/InfoCard/index.d.ts

@@ -0,0 +1 @@
+export { InfoCard } from './InfoCard';

package/lib/src/components/molecules/Input/Input.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { FieldProps } from 'formik';
+import { ValidationType } from '../../../types/validation';
+import { IconType } from '../../atoms/Icon';
+export declare type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & FieldProps & {
+    label?: string;
+    validationType?: ValidationType;
+    icon?: IconType;
+    size?: 'xl' | 'l' | 'm' | 's';
+    direction?: 'ltr' | 'rtl';
+    onIconClick?: () => void;
+};
+export declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & FieldProps<any, any> & {
+    label?: string | undefined;
+    validationType?: ValidationType | undefined;
+    icon?: "angle-down" | "arrow-left" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "close" | "dice-five" | "edit" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user-circle" | "users" | undefined;
+    size?: "xl" | "l" | "m" | "s" | undefined;
+    direction?: "ltr" | "rtl" | undefined;
+    onIconClick?: (() => void) | undefined;
+} & React.RefAttributes<HTMLInputElement>>;

package/lib/src/components/molecules/Input/Input.stories.d.ts

@@ -0,0 +1,75 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & import("formik").FieldProps<any, any> & {
+    label?: string | undefined;
+    validationType?: import("../../../types/validation").ValidationType | undefined;
+    icon?: "close" | "angle-down" | "arrow-left" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "dice-five" | "edit" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user-circle" | "users" | undefined;
+    size?: "s" | "m" | "l" | "xl" | undefined;
+    direction?: "rtl" | "ltr" | undefined;
+    onIconClick?: (() => void) | undefined;
+} & React.RefAttributes<HTMLInputElement>>>;
+export default _default;
+export declare const Basic: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & import("formik").FieldProps<any, any> & {
+    label?: string | undefined;
+    validationType?: import("../../../types/validation").ValidationType | undefined;
+    icon?: "close" | "angle-down" | "arrow-left" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "dice-five" | "edit" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user-circle" | "users" | undefined;
+    size?: "s" | "m" | "l" | "xl" | undefined;
+    direction?: "rtl" | "ltr" | undefined;
+    onIconClick?: (() => void) | undefined;
+} & React.RefAttributes<HTMLInputElement>>>;
+export declare const Success: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & import("formik").FieldProps<any, any> & {
+    label?: string | undefined;
+    validationType?: import("../../../types/validation").ValidationType | undefined;
+    icon?: "close" | "angle-down" | "arrow-left" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "dice-five" | "edit" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user-circle" | "users" | undefined;
+    size?: "s" | "m" | "l" | "xl" | undefined;
+    direction?: "rtl" | "ltr" | undefined;
+    onIconClick?: (() => void) | undefined;
+} & React.RefAttributes<HTMLInputElement>>>;
+export declare const Error: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & import("formik").FieldProps<any, any> & {
+    label?: string | undefined;
+    validationType?: import("../../../types/validation").ValidationType | undefined;
+    icon?: "close" | "angle-down" | "arrow-left" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "dice-five" | "edit" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user-circle" | "users" | undefined;
+    size?: "s" | "m" | "l" | "xl" | undefined;
+    direction?: "rtl" | "ltr" | undefined;
+    onIconClick?: (() => void) | undefined;
+} & React.RefAttributes<HTMLInputElement>>>;
+export declare const Disabled: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & import("formik").FieldProps<any, any> & {
+    label?: string | undefined;
+    validationType?: import("../../../types/validation").ValidationType | undefined;
+    icon?: "close" | "angle-down" | "arrow-left" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "dice-five" | "edit" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user-circle" | "users" | undefined;
+    size?: "s" | "m" | "l" | "xl" | undefined;
+    direction?: "rtl" | "ltr" | undefined;
+    onIconClick?: (() => void) | undefined;
+} & React.RefAttributes<HTMLInputElement>>>;
+export declare const IconLTR: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & import("formik").FieldProps<any, any> & {
+    label?: string | undefined;
+    validationType?: import("../../../types/validation").ValidationType | undefined;
+    icon?: "close" | "angle-down" | "arrow-left" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "dice-five" | "edit" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user-circle" | "users" | undefined;
+    size?: "s" | "m" | "l" | "xl" | undefined;
+    direction?: "rtl" | "ltr" | undefined;
+    onIconClick?: (() => void) | undefined;
+} & React.RefAttributes<HTMLInputElement>>>;
+export declare const IconRTL: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & import("formik").FieldProps<any, any> & {
+    label?: string | undefined;
+    validationType?: import("../../../types/validation").ValidationType | undefined;
+    icon?: "close" | "angle-down" | "arrow-left" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "dice-five" | "edit" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user-circle" | "users" | undefined;
+    size?: "s" | "m" | "l" | "xl" | undefined;
+    direction?: "rtl" | "ltr" | undefined;
+    onIconClick?: (() => void) | undefined;
+} & React.RefAttributes<HTMLInputElement>>>;
+export declare const DisabledIcon: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & import("formik").FieldProps<any, any> & {
+    label?: string | undefined;
+    validationType?: import("../../../types/validation").ValidationType | undefined;
+    icon?: "close" | "angle-down" | "arrow-left" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "dice-five" | "edit" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user-circle" | "users" | undefined;
+    size?: "s" | "m" | "l" | "xl" | undefined;
+    direction?: "rtl" | "ltr" | undefined;
+    onIconClick?: (() => void) | undefined;
+} & React.RefAttributes<HTMLInputElement>>>;
+export declare const WithLabel: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & import("formik").FieldProps<any, any> & {
+    label?: string | undefined;
+    validationType?: import("../../../types/validation").ValidationType | undefined;
+    icon?: "close" | "angle-down" | "arrow-left" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "dice-five" | "edit" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user-circle" | "users" | undefined;
+    size?: "s" | "m" | "l" | "xl" | undefined;
+    direction?: "rtl" | "ltr" | undefined;
+    onIconClick?: (() => void) | undefined;
+} & React.RefAttributes<HTMLInputElement>>>;

package/lib/src/components/molecules/Input/index.d.ts

@@ -0,0 +1 @@
+export { Input } from './Input';

package/lib/src/components/molecules/Profile/Profile.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Avatar } from '../../atoms';
+declare type ProfileProps = Partial<React.ComponentProps<typeof Avatar>> & {
+    name: string;
+    children?: React.ReactNode;
+};
+export declare const Profile: React.FC<ProfileProps>;
+export {};

package/lib/src/components/molecules/Profile/Profile.stories.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<import("react").FC<Partial<{
+    src: string;
+    alt: string;
+    size?: "s" | "m" | "l" | "xl" | "xxl" | undefined;
+} & {
+    children?: import("react").ReactNode;
+}> & {
+    name: string;
+    children?: import("react").ReactNode;
+}>>;
+export default _default;
+export declare const Basic: ComponentStory<import("react").FC<Partial<{
+    src: string;
+    alt: string;
+    size?: "s" | "m" | "l" | "xl" | "xxl" | undefined;
+} & {
+    children?: import("react").ReactNode;
+}> & {
+    name: string;
+    children?: import("react").ReactNode;
+}>>;
+export declare const WithInitials: ComponentStory<import("react").FC<Partial<{
+    src: string;
+    alt: string;
+    size?: "s" | "m" | "l" | "xl" | "xxl" | undefined;
+} & {
+    children?: import("react").ReactNode;
+}> & {
+    name: string;
+    children?: import("react").ReactNode;
+}>>;

package/lib/src/components/molecules/Profile/Profile.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/src/components/molecules/Profile/index.d.ts

@@ -0,0 +1 @@
+export { Profile } from './Profile';

package/lib/src/components/molecules/Radio/Radio.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export declare enum Size {
+    xl = "xl",
+    l = "l",
+    m = "m",
+    s = "s"
+}
+export declare type RadioProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> & {
+    size?: Size;
+    label?: string;
+};
+export declare const Radio: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+    size?: Size | undefined;
+    label?: string | undefined;
+} & React.RefAttributes<HTMLInputElement>>;

package/lib/src/components/molecules/Radio/Radio.stories.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Size } from './Radio';
+declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+    size?: Size | undefined;
+    label?: string | undefined;
+} & React.RefAttributes<HTMLInputElement>>>;
+export default _default;
+export declare const Basic: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+    size?: Size | undefined;
+    label?: string | undefined;
+} & React.RefAttributes<HTMLInputElement>>>;
+export declare const Controlled: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+    size?: Size | undefined;
+    label?: string | undefined;
+} & React.RefAttributes<HTMLInputElement>>>;
+export declare const WithLabel: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+    size?: Size | undefined;
+    label?: string | undefined;
+} & React.RefAttributes<HTMLInputElement>>>;

package/lib/src/components/molecules/Radio/Radio.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/src/components/molecules/Radio/index.d.ts

@@ -0,0 +1 @@
+export { Radio } from './Radio';

package/lib/src/components/molecules/TextArea/TextArea.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ValidationType } from '../../../types/validation';
+export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    validationType?: ValidationType;
+}
+export declare const TextArea: React.FC<TextAreaProps>;

package/lib/src/components/molecules/TextArea/TextArea.stories.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<React.FC<import("./TextArea").TextAreaProps>>;
+export default _default;
+export declare const Basic: ComponentStory<React.FC<import("./TextArea").TextAreaProps>>;
+export declare const Success: ComponentStory<React.FC<import("./TextArea").TextAreaProps>>;
+export declare const Error: ComponentStory<React.FC<import("./TextArea").TextAreaProps>>;
+export declare const Disabled: ComponentStory<React.FC<import("./TextArea").TextAreaProps>>;

package/lib/src/components/molecules/TextArea/index.d.ts

@@ -0,0 +1 @@
+export { TextArea } from './TextArea';

package/lib/src/components/molecules/index.d.ts

@@ -0,0 +1,8 @@
+export { InfoCard } from './InfoCard';
+export { Input } from './Input';
+export { TextArea } from './TextArea';
+export { Button } from './Button';
+export { Checkbox } from './Checkbox';
+export { Dropdown } from './Dropdown';
+export { Radio } from './Radio';
+export { Profile } from './Profile';

package/lib/src/components/organisms/Menu/Menu.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { MenuItem } from './MenuItem';
+export interface MenuStaticProps {
+    Item: typeof MenuItem;
+}
+export interface MenuProps {
+    children: React.ReactNode;
+}
+declare const MenuWithStatic: React.FC<MenuProps> & {
+    Item: React.FC<import("./MenuItem").MenuItemProps>;
+};
+export { MenuWithStatic as Menu };

package/lib/src/components/organisms/Menu/Menu.stories.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<React.FC<import("./Menu").MenuProps> & {
+    Item: React.FC<import("./MenuItem").MenuItemProps>;
+}>;
+export default _default;
+export declare const Basic: ComponentStory<React.FC<import("./Menu").MenuProps> & {
+    Item: React.FC<import("./MenuItem").MenuItemProps>;
+}>;

package/lib/src/components/organisms/Menu/MenuItem.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { IconType } from '../../atoms/Icon';
+export interface MenuItemProps {
+    active?: boolean;
+    label: string;
+    icon: IconType;
+}
+export declare const MenuItem: React.FC<MenuItemProps>;
+export declare const Root: import("styled-components").StyledComponent<"div", any, Pick<MenuItemProps, "active">, never>;

package/lib/src/components/organisms/Menu/index.d.ts

@@ -0,0 +1 @@
+export { Menu } from './Menu';

package/lib/src/components/organisms/Setting/Setting.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { IconType } from "../../atoms/Icon";
+export interface SettingProps {
+    icon?: IconType;
+    title: string;
+    subtitle?: string;
+    trigger: string;
+    children?: React.ReactNode;
+}
+export declare const Setting: React.FCS<SettingProps>;

package/lib/src/components/organisms/Setting/Setting.stories.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<React.FCS<import("./Setting").SettingProps>>;
+export default _default;
+export declare const Basic: ComponentStory<React.FCS<import("./Setting").SettingProps>>;

package/lib/src/components/organisms/Setting/index.d.ts

@@ -0,0 +1 @@
+export { Setting } from './Setting';

package/lib/src/components/organisms/index.d.ts

@@ -0,0 +1,2 @@
+export { Menu } from './Menu';
+export { Setting } from './Setting';

package/lib/src/helpers/validation.d.ts

@@ -0,0 +1,3 @@
+import { FlattenSimpleInterpolation } from 'styled-components';
+import { ValidationType } from '../types/validation';
+export declare const getValidationTypeProps: (type?: ValidationType) => FlattenSimpleInterpolation;

package/lib/src/index.d.ts

@@ -0,0 +1,4 @@
+export { Alert, Avatar, Card, Divider, Icon, Nav, Pill, Typography, Spinner, Chip, Dot, } from "./components/atoms";
+export { InfoCard, Input, TextArea, Button, Checkbox, Dropdown, Profile, Radio, } from "./components/molecules";
+export { Menu, Setting } from "./components/organisms";
+export { GlobalStyles as IntegrigoUI, Color } from "./styles";

package/lib/src/styles/colors.d.ts

@@ -0,0 +1,24 @@
+export declare enum Color {
+    White = "#FFF",
+    Ecru = "#F9F1E5",
+    Navy = "#172142",
+    Orange = "#E09A33",
+    Red = "#CF544B",
+    Green = "#6B8B4A",
+    Grey100 = "#1A1A1A",
+    Grey80 = "#595959",
+    Grey60 = "#8C8C8C",
+    Grey40 = "#CCCCCC",
+    Grey20 = "#F2F2F2",
+    Grey0 = "#fff",
+    Success100 = "#6B8B4A",
+    Success20 = "#DDE4D7",
+    Success10 = "#ECEFE8",
+    Error100 = "#CF544B",
+    Error20 = "#FFCCCC",
+    Error10 = "#FFF5F5"
+}
+export declare enum ShadesOfGrey {
+}
+export declare enum SuccessColors {
+}

package/lib/src/styles/global.d.ts

@@ -0,0 +1 @@
+export declare const GlobalStyles: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;

package/lib/src/styles/index.d.ts

@@ -0,0 +1,2 @@
+export { GlobalStyles } from './global';
+export { Color, ShadesOfGrey } from './colors';

package/lib/src/types/validation.d.ts

@@ -0,0 +1 @@
+export declare type ValidationType = 'success' | 'error';

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/integrigo"
   },
-  "version": "1.6.7c",
+  "version": "1.6.10a",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",

package/src/.storybook/main.js

@@ -0,0 +1,12 @@
+module.exports = {
+  "stories": [
+    "../components/**/*.stories.mdx",
+    "../components/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions"
+  ],
+  "framework": "@storybook/react"
+}

package/src/.storybook/preview.js

@@ -0,0 +1,20 @@
+import { GlobalStyles } from '../styles'
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  }, 
+}
+
+export const decorators = [
+  (Story) => (
+    <>
+      <GlobalStyles/>
+      <Story />
+    </>
+  ),
+];

package/src/components/atoms/Alert/Alert.stories.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Alert } from './Alert';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Atoms/Alert',
+  component: Alert,
+} as ComponentMeta<typeof Alert>;
+
+const Template: ComponentStory<typeof Alert> = (args) => (
+  <Alert {...args}>Content</Alert>
+);
+
+export const Basic = Template.bind({});
+Basic.args = {
+  type: 'info',
+};
+
+export const Controlled = Template.bind({});
+Controlled.args = {
+  type: 'info',
+  controlled: true,
+  open: true,
+};

package/src/components/atoms/Alert/Alert.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Color } from '../../../styles';
+import { fieldSizeVariants } from '../Field';
+import { Icon, IconType } from '../Icon';
+
+export interface AlertProps {
+  type: 'error' | 'success' | 'info' | 'warning';
+  open?: boolean;
+  controlled?: boolean;
+  size?: 'xl' | 'l' | 'm' | 's';
+  onClose?: () => void;
+  children: React.ReactNode;
+}
+
+const colorVariants = {
+  error: {
+    background: Color.Error10,
+    color: Color.Error100,
+  },
+  warning: {
+    background: Color.Grey0,
+    color: Color.Orange,
+  },
+  info: {
+    background: Color.Grey0,
+    color: Color.Navy,
+  },
+  success: {
+    background: Color.Grey0,
+    color: Color.Green,
+  },
+};
+
+const iconVariants: Record<AlertProps['type'], IconType> = {
+  error: 'exclamation-circle',
+  warning: 'exclamation-triangle',
+  info: 'exclamation-circle',
+  success: 'check-circle',
+};
+
+export const Alert: React.FC<AlertProps> = ({
+  type = 'info',
+  open = true,
+  size = 'm',
+  controlled = false,
+  onClose,
+  children,
+}) => {
+  if (!open && controlled) {
+    return null;
+  }
+
+  return (
+    <AlertWrapper type={type} sizeVariant={size}>
+      <Icon
+        fill={colorVariants[type].color}
+        size="ultra-small"
+        type={iconVariants[type]}
+      />{' '}
+      {children}
+      {controlled && (
+        <CloseIcon>
+          <Icon
+            size="ultra-small"
+            type="close"
+            fill={Color.Grey60}
+            onClick={onClose}
+          />
+        </CloseIcon>
+      )}
+    </AlertWrapper>
+  );
+};
+
+const AlertWrapper = styled.div<{
+  type: 'error' | 'success' | 'info' | 'warning';
+  sizeVariant: 'xl' | 'l' | 'm' | 's';
+}>`
+  width: 100%;
+  border-radius: 5px;
+  color: ${(p) => colorVariants[p.type].color};
+  background-color: ${(p) => colorVariants[p.type].background};
+  padding: var(--padding-s);
+  font-weight: var(--font-bold);
+  font-size: ${(p) => fieldSizeVariants[p.sizeVariant].font};
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: var(--padding-s);
+`;
+
+const CloseIcon = styled.div`
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+
+  & > svg {
+    transition: fill var(--transition-speed);
+  }
+
+  & > svg:hover {
+    cursor: pointer;
+    fill: var(--shades-of-grey-100);
+  }
+`;

package/src/components/atoms/Alert/index.ts

@@ -0,0 +1 @@
+export { Alert } from './Alert';

package/src/components/atoms/Avatar/Avatar.stories.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Avatar } from './Avatar';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Atoms/Avatar',
+  component: Avatar,
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['s', 'm', 'l', 'xl', 'xxl'],
+      defaultValue: 'm',
+    },
+  },
+} as ComponentMeta<typeof Avatar>;
+
+const Template: ComponentStory<typeof Avatar> = (args) => <Avatar {...args} />;
+
+export const Basic = Template.bind({});
+Basic.args = {
+  src: 'https://img.freepik.com/darmowe-zdjecie/dosc-usmiechnieta-radosnie-kobieta-o-jasnych-wlosach-ubrana-swobodnie-wygladajaca-z-zadowoleniem_176420-15187.jpg?w=1380&t=st=1660198496~exp=1660199096~hmac=7401572065d2cd7bb67d9f43dbde5c116b90aad419b179fffac1196df24869f2',
+  alt: 'Jane Doe',
+};