@integrigo/integrigo-ui 1.6.15-b → 1.6.16-a

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

@@ -5,11 +5,13 @@ export interface DropdwonStaticProps {
     Option: typeof Option;
 }
 export interface DropdownProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
-    validationType: ValidationType;
+    validationType?: ValidationType;
     label?: string;
-    size: 'xl' | 'l' | 'm' | 's';
+    size?: 'xl' | 'l' | 'm' | 's';
 }
-declare const DropdownWithStatic: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLSelectElement>> & {
-    Option: React.FC<{}>;
+declare const DropdownWithStatic: React.ForwardRefExoticComponent<DropdownProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLSelectElement>> & {
+    Option: React.FC<React.PropsWithChildren<import("./Option").OptionProps>>;
 };
 export { DropdownWithStatic as Dropdown };

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

@@ -1,12 +1,18 @@
 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<{}>;
+declare const _default: ComponentMeta<React.ForwardRefExoticComponent<import("./Dropdown").DropdownProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLSelectElement>> & {
+    Option: React.FC<React.PropsWithChildren<import("./Option").OptionProps>>;
 }>;
 export default _default;
-export declare const Basic: ComponentStory<React.ForwardRefExoticComponent<import("./Dropdown").DropdownProps & React.RefAttributes<HTMLSelectElement>> & {
-    Option: React.FC<{}>;
+export declare const Basic: ComponentStory<React.ForwardRefExoticComponent<import("./Dropdown").DropdownProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLSelectElement>> & {
+    Option: React.FC<React.PropsWithChildren<import("./Option").OptionProps>>;
 }>;
-export declare const WithLabel: ComponentStory<React.ForwardRefExoticComponent<import("./Dropdown").DropdownProps & React.RefAttributes<HTMLSelectElement>> & {
-    Option: React.FC<{}>;
+export declare const WithLabel: ComponentStory<React.ForwardRefExoticComponent<import("./Dropdown").DropdownProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLSelectElement>> & {
+    Option: React.FC<React.PropsWithChildren<import("./Option").OptionProps>>;
 }>;

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

@@ -1,2 +1,5 @@
-import React from 'react';
-export declare const Option: React.FC;
+import React, { PropsWithChildren } from "react";
+export interface OptionProps {
+    value?: string | number;
+}
+export declare const Option: React.FC<PropsWithChildren<OptionProps>>;

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

@@ -0,0 +1,6 @@
+import React, { PropsWithChildren } from "react";
+export interface ModalProps {
+    show: boolean;
+    onClose: () => void;
+}
+export declare const Modal: React.FCS<PropsWithChildren<ModalProps>>;

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+declare const _default: ComponentMeta<import("react").FCS<import("react").PropsWithChildren<import("./Modal").ModalProps>>>;
+export default _default;
+export declare const Basic: ComponentStory<import("react").FCS<import("react").PropsWithChildren<import("./Modal").ModalProps>>>;

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

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

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

@@ -0,0 +1,10 @@
+import React from "react";
+import { Dropdown } from "../../molecules";
+interface SelectProps extends React.ComponentProps<typeof Dropdown> {
+    options: {
+        value: string | number;
+        label: React.ReactNode;
+    }[];
+}
+export declare const Select: React.FC<SelectProps>;
+export {};

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

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

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

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

package/lib/src/index.d.ts

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

package/package.json

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

package/src/components/molecules/Dropdown/Dropdown.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import styled from 'styled-components';
 import { getValidationTypeProps } from '../../../helpers/validation';
 import { ValidationType } from '../../../types/validation';
@@ -13,12 +13,12 @@ export interface DropdwonStaticProps {
 
 export interface DropdownProps
   extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
-  validationType: ValidationType;
+  validationType?: ValidationType;
   label?: string;
-  size: 'xl' | 'l' | 'm' | 's';
+  size?: 'xl' | 'l' | 'm' | 's';
 }
 
-const Dropdown = React.forwardRef<HTMLSelectElement, DropdownProps>(
+const Dropdown = React.forwardRef<HTMLSelectElement, PropsWithChildren<DropdownProps>>(
   ({ children, label, size = 'm', ...props }, ref) => {
     return (
       <FieldWrapper withLabel={Boolean(label)} sizeVariant={size}>

package/src/components/molecules/Dropdown/Option.tsx

@@ -1,5 +1,12 @@
-import React from 'react';
+import React, { PropsWithChildren } from "react";
 
-export const Option: React.FC = ({ children }) => {
-  return <option>{children}</option>;
+export interface OptionProps {
+  value?: string | number;
+}
+
+export const Option: React.FC<PropsWithChildren<OptionProps>> = ({
+  value,
+  children,
+}) => {
+  return <option value={value}>{children}</option>;
 };

package/src/components/organisms/Modal/Modal.stories.tsx

@@ -0,0 +1,26 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { Modal } from "./Modal";
+
+export default {
+  title: "Organisms/Modal",
+  component: Modal,
+  argTypes: {
+    show: {
+      control: "boolean",
+      defaultValue: true,
+    },
+  },
+} as ComponentMeta<typeof Modal>;
+
+const Template: ComponentStory<typeof Modal> = (args) => (
+  <>
+    Some other content
+    <Modal show={args.show} onClose={() => null}>
+      hey
+    </Modal>
+  </>
+);
+
+export const Basic = Template.bind({});
+Basic.args = {};

package/src/components/organisms/Modal/Modal.tsx

@@ -0,0 +1,84 @@
+import React, { PropsWithChildren } from "react";
+import styled from "styled-components";
+import { Card, Icon } from "../../atoms";
+
+export interface ModalProps {
+  show: boolean;
+  onClose: () => void;
+}
+
+export const Modal: React.FCS<PropsWithChildren<ModalProps>> = ({
+  className,
+  children,
+  show,
+  onClose,
+}) => {
+  if (!show) {
+    return null;
+  }
+
+  return (
+    <Root>
+      <ModalCard size="s" flat className={className}>
+        <CloseModal>
+          <CloseIcon onClick={onClose}>
+            <Icon type="close" />
+          </CloseIcon>
+        </CloseModal>
+        {children}
+      </ModalCard>
+    </Root>
+  );
+};
+
+const Root = styled.div`
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+
+  &::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    backdrop-filter: blur(8px);
+    background-color: var(--color-shadow);
+  }
+`;
+
+const ModalCard = styled(Card)`
+  padding: var(--padding-s);
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  max-width: 320px;
+  width: calc(100vw - 2 * var(--padding-m));
+  transform: translate(-50%, -50%);
+  z-index: 101;
+`;
+
+const CloseModal = styled.div`
+  display: flex;
+  justify-content: flex-end;
+`;
+
+const CloseIcon = styled.button`
+  border: none;
+  background: transparent;
+  padding: 0;
+  cursor: pointer;
+
+  & > svg {
+    fill: var(--shades-of-grey-60);
+    transition: fill var(--transition-speed);
+
+    &:hover {
+      fill: var(--shades-of-grey-100);
+    }
+  }
+`;

package/src/components/organisms/Modal/index.ts

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

package/src/components/organisms/Select/Select.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Dropdown } from "../../molecules";
+
+interface SelectProps extends React.ComponentProps<typeof Dropdown> {
+  options: { value: string | number; label: React.ReactNode }[];
+}
+
+export const Select: React.FC<SelectProps> = ({ options, ...props }) => (
+  <Dropdown {...props}>
+    {options.map((option) => (
+      <Dropdown.Option key={option.value} value={option.value}>
+        {option.label}
+      </Dropdown.Option>
+    ))}
+  </Dropdown>
+);

package/src/components/organisms/Select/index.ts

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

package/src/components/organisms/index.ts

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

package/src/index.ts

@@ -25,6 +25,6 @@ export {
   Tile,
 } from "./components/molecules";
 
-export { Menu, Setting } from "./components/organisms";
+export { Menu, Setting, Modal, Select } from "./components/organisms";
 
 export { GlobalStyles as IntegrigoUI, Color } from "./styles";

package/src/styles/global.ts

@@ -29,6 +29,7 @@ export const GlobalStyles = createGlobalStyle`
 
     --color-orange-80: ${Color.Orange}80;
     --color-orange-65: ${Color.Orange}65;
+    --color-shadow: ${Color.Grey100}10;
 
     --gradient-natural-orange: linear-gradient(333.61deg, #E09A33 13.3%, #FFB241 90.98%);
     --gradient-orange-red: radial-gradient(106.28% 106.28% at 76.05% 89.07%, #E09A33 0%, #CF544B 100%);