@ssa-ui-kit/core 0.0.16-alpha → 0.0.17-alpha

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

@@ -1,97 +1,97 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import Button from '@components/Button';
-import Icon from '@components/Icon';
-import mainTheme from '@themes/main';
-
-import Modal from '@components/Modal';
-import ModalContent from '@components/ModalContent';
-import ModalOpenButton from '@components/ModalOpenButton';
-import ModalDismissButton from '@components/ModalDismissButton';
-
-import Typography from '@components/Typography';
-
-export default {
-  title: 'Components/Modal',
-  component: Modal,
-  parameters: {
-    // https://storybook.js.org/docs/react/api/doc-block-story#height
-    docs: { story: { height: '400px' } },
-  },
-} as Meta<typeof Modal>;
-
-export const Default: StoryObj<typeof Modal> = () => (
-  <Modal>
-    <ModalOpenButton>
-      <Button size="small" text="Open modal" />
-    </ModalOpenButton>
-    <ModalContent aria-label="label">
-      <div css={{ display: 'flex', justifyContent: 'flex-end' }}>
-        <ModalDismissButton>
-          <Button
-            size="small"
-            startIcon={
-              <Icon name="cross" size={12} color={mainTheme.colors.white} />
-            }
-          />
-        </ModalDismissButton>
-      </div>
-
-      <Typography variant="body1">
-        lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor,
-        nisl eget
-      </Typography>
-    </ModalContent>
-  </Modal>
-);
-Default.args = {};
-
-export const Custom: StoryObj<typeof Modal> = () => (
-  <Modal>
-    <ModalOpenButton>
-      <Button size="small" text="Open modal" />
-    </ModalOpenButton>
-    <ModalContent noBackground={true} aria-label="label">
-      <div>
-        <Typography variant="h3" gutter={true}>
-          Hello
-        </Typography>
-
-        <Typography variant="body1" gutter={true}>
-          lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor,
-          nisl eget
-        </Typography>
-
-        <ModalDismissButton>
-          <Button size="small" text="close" />
-        </ModalDismissButton>
-      </div>
-    </ModalContent>
-  </Modal>
-);
-Custom.args = {};
-
-export const Opened: StoryObj<typeof Modal> = () => (
-  <Modal isOpen>
-    <ModalOpenButton>
-      <Button size="small" text="Open modal" />
-    </ModalOpenButton>
-    <ModalContent noBackground={true} aria-label="label">
-      <div>
-        <Typography variant="h3" gutter={true}>
-          Hello
-        </Typography>
-
-        <Typography variant="body1" gutter={true}>
-          lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor,
-          nisl eget
-        </Typography>
-
-        <ModalDismissButton>
-          <Button size="small" text="close" />
-        </ModalDismissButton>
-      </div>
-    </ModalContent>
-  </Modal>
-);
-Opened.args = {};
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Button from '@components/Button';
+import Icon from '@components/Icon';
+import mainTheme from '@themes/main';
+
+import Modal from '@components/Modal';
+import ModalContent from '@components/ModalContent';
+import ModalOpenButton from '@components/ModalOpenButton';
+import ModalDismissButton from '@components/ModalDismissButton';
+
+import Typography from '@components/Typography';
+
+export default {
+  title: 'Components/Modal',
+  component: Modal,
+  parameters: {
+    // https://storybook.js.org/docs/react/api/doc-block-story#height
+    docs: { story: { height: '400px' } },
+  },
+} as Meta<typeof Modal>;
+
+export const Default: StoryObj<typeof Modal> = () => (
+  <Modal>
+    <ModalOpenButton>
+      <Button size="small" text="Open modal" />
+    </ModalOpenButton>
+    <ModalContent aria-label="label">
+      <div css={{ display: 'flex', justifyContent: 'flex-end' }}>
+        <ModalDismissButton>
+          <Button
+            size="small"
+            startIcon={
+              <Icon name="cross" size={12} color={mainTheme.colors.white} />
+            }
+          />
+        </ModalDismissButton>
+      </div>
+
+      <Typography variant="body1">
+        lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor,
+        nisl eget
+      </Typography>
+    </ModalContent>
+  </Modal>
+);
+Default.args = {};
+
+export const Custom: StoryObj<typeof Modal> = () => (
+  <Modal>
+    <ModalOpenButton>
+      <Button size="small" text="Open modal" />
+    </ModalOpenButton>
+    <ModalContent noBackground={true} aria-label="label">
+      <div>
+        <Typography variant="h3" gutter={true}>
+          Hello
+        </Typography>
+
+        <Typography variant="body1" gutter={true}>
+          lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor,
+          nisl eget
+        </Typography>
+
+        <ModalDismissButton>
+          <Button size="small" text="close" />
+        </ModalDismissButton>
+      </div>
+    </ModalContent>
+  </Modal>
+);
+Custom.args = {};
+
+export const Opened: StoryObj<typeof Modal> = () => (
+  <Modal isOpen>
+    <ModalOpenButton>
+      <Button size="small" text="Open modal" />
+    </ModalOpenButton>
+    <ModalContent noBackground={true} aria-label="label">
+      <div>
+        <Typography variant="h3" gutter={true}>
+          Hello
+        </Typography>
+
+        <Typography variant="body1" gutter={true}>
+          lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor,
+          nisl eget
+        </Typography>
+
+        <ModalDismissButton>
+          <Button size="small" text="close" />
+        </ModalDismissButton>
+      </div>
+    </ModalContent>
+  </Modal>
+);
+Opened.args = {};

package/src/components/Modal/Modal.tsx

@@ -1,12 +1,12 @@
-import { useState } from 'react';
-
-import { ModalContext } from './Modal.context';
-import { ModalProps } from './types';
-
-const Modal = ({ isOpen: isInitOpen, ...rest }: ModalProps) => {
-  const [isOpen, setIsOpen] = useState(isInitOpen || false);
-
-  return <ModalContext.Provider value={[isOpen, setIsOpen]} {...rest} />;
-};
-
-export default Modal;
+import { useState } from 'react';
+
+import { ModalContext } from './Modal.context';
+import { ModalProps } from './types';
+
+const Modal = ({ isOpen: isInitOpen, ...rest }: ModalProps) => {
+  const [isOpen, setIsOpen] = useState(isInitOpen || false);
+
+  return <ModalContext.Provider value={[isOpen, setIsOpen]} {...rest} />;
+};
+
+export default Modal;

package/src/components/Modal/index.ts

@@ -1,2 +1,2 @@
-export { default } from './Modal';
-export { ModalContext } from './Modal.context';
+export { default } from './Modal';
+export { ModalContext } from './Modal.context';

package/src/components/Modal/types.ts

@@ -1,4 +1,4 @@
-import type { ModalDialogProps } from '@components/ModalDialog';
-export type ModalContextProps = [boolean, (isOpen: boolean) => void];
-
-export type ModalProps = Partial<ModalDialogProps>;
+import type { ModalDialogProps } from '@components/ModalDialog';
+export type ModalContextProps = [boolean, (isOpen: boolean) => void];
+
+export type ModalProps = Partial<ModalDialogProps>;

package/src/components/ModalContent/ModalContent.tsx

@@ -1,21 +1,21 @@
-import { useContext } from 'react';
-
-import ModalDialog from '@components/ModalDialog';
-import { ModalProps } from '@components/Modal/types';
-import { ModalContext } from '../Modal/Modal.context';
-
-function ModalContent({
-  children,
-  'aria-label': ariaLabel,
-  ...props
-}: ModalProps) {
-  const [isOpen] = useContext(ModalContext);
-
-  return (
-    <ModalDialog aria-label={ariaLabel} isOpen={isOpen} {...props}>
-      {isOpen ? children : null}
-    </ModalDialog>
-  );
-}
-
-export default ModalContent;
+import { useContext } from 'react';
+
+import ModalDialog from '@components/ModalDialog';
+import { ModalProps } from '@components/Modal/types';
+import { ModalContext } from '../Modal/Modal.context';
+
+function ModalContent({
+  children,
+  'aria-label': ariaLabel,
+  ...props
+}: ModalProps) {
+  const [isOpen] = useContext(ModalContext);
+
+  return (
+    <ModalDialog aria-label={ariaLabel} isOpen={isOpen} {...props}>
+      {isOpen ? children : null}
+    </ModalDialog>
+  );
+}
+
+export default ModalContent;

package/src/components/ModalContent/index.ts

@@ -1 +1 @@
-export { default } from './ModalContent';
+export { default } from './ModalContent';

package/src/components/ModalDialog/ModalDialog.tsx

@@ -1,67 +1,67 @@
-import { css, Theme, useTheme } from '@emotion/react';
-
-import { ModalDialogProps } from './types';
-
-const modalDialogWrapper = (
-  theme: Theme,
-  isOpen: ModalDialogProps['isOpen'],
-  noBackground: ModalDialogProps['noBackground'],
-) => css`
-  display: ${isOpen ? 'flex' : 'none'};
-
-  position: fixed;
-  inset: 0;
-
-  justify-content: center;
-  align-items: center;
-
-  background-color: ${noBackground ? 'transparent' : theme.colors.grey20};
-
-  z-index: 1000;
-`;
-
-const modalDialogContent = (
-  theme: Theme,
-  isOpen: ModalDialogProps['isOpen'],
-) => css`
-  display: ${isOpen ? 'flex' : 'none'};
-
-  flex-direction: column;
-  position: relative;
-
-  width: 100%;
-  max-width: 400px;
-  padding: 20px;
-
-  background-color: white;
-  box-shadow: 0 5px 15px ${theme.colors.grey20};
-  border-radius: 20px;
-`;
-
-const ModalDialog = ({
-  isOpen,
-  noBackground,
-  children,
-  'aria-label': ariaLabel,
-  ...props
-}: ModalDialogProps) => {
-  const theme = useTheme();
-
-  return (
-    <div
-      role="button"
-      tabIndex={-1}
-      css={modalDialogWrapper(theme, isOpen, noBackground)}>
-      <div
-        aria-modal="true"
-        aria-labelledby={ariaLabel}
-        role="dialog"
-        css={modalDialogContent(theme, isOpen)}
-        {...props}>
-        {children}
-      </div>
-    </div>
-  );
-};
-
-export default ModalDialog;
+import { css, Theme, useTheme } from '@emotion/react';
+
+import { ModalDialogProps } from './types';
+
+const modalDialogWrapper = (
+  theme: Theme,
+  isOpen: ModalDialogProps['isOpen'],
+  noBackground: ModalDialogProps['noBackground'],
+) => css`
+  display: ${isOpen ? 'flex' : 'none'};
+
+  position: fixed;
+  inset: 0;
+
+  justify-content: center;
+  align-items: center;
+
+  background-color: ${noBackground ? 'transparent' : theme.colors.grey20};
+
+  z-index: 1000;
+`;
+
+const modalDialogContent = (
+  theme: Theme,
+  isOpen: ModalDialogProps['isOpen'],
+) => css`
+  display: ${isOpen ? 'flex' : 'none'};
+
+  flex-direction: column;
+  position: relative;
+
+  width: 100%;
+  max-width: 400px;
+  padding: 20px;
+
+  background-color: white;
+  box-shadow: 0 5px 15px ${theme.colors.grey20};
+  border-radius: 20px;
+`;
+
+const ModalDialog = ({
+  isOpen,
+  noBackground,
+  children,
+  'aria-label': ariaLabel,
+  ...props
+}: ModalDialogProps) => {
+  const theme = useTheme();
+
+  return (
+    <div
+      role="button"
+      tabIndex={-1}
+      css={modalDialogWrapper(theme, isOpen, noBackground)}>
+      <div
+        aria-modal="true"
+        aria-labelledby={ariaLabel}
+        role="dialog"
+        css={modalDialogContent(theme, isOpen)}
+        {...props}>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default ModalDialog;

package/src/components/ModalDialog/index.ts

@@ -1,2 +1,2 @@
-export { default } from './ModalDialog';
-export * from './types';
+export { default } from './ModalDialog';
+export * from './types';

package/src/components/ModalDialog/types.ts

@@ -1,7 +1,7 @@
-export interface ModalDialogProps {
-  isOpen: boolean;
-  noBackground?: boolean;
-  'aria-label'?: string;
-  children?: React.ReactNode;
-  className?: string;
-}
+export interface ModalDialogProps {
+  isOpen: boolean;
+  noBackground?: boolean;
+  'aria-label'?: string;
+  children?: React.ReactNode;
+  className?: string;
+}

package/src/components/ModalDismissButton/ModalDismissButton.tsx

@@ -1,15 +1,15 @@
-import { useContext, cloneElement } from 'react';
-
-import { callAll } from '@ssa-ui-kit/utils';
-
-import { ModalContext } from '../Modal/Modal.context';
-
-function ModalDismissButton({ children: child }: { children: JSX.Element }) {
-  const [, setIsOpen] = useContext(ModalContext);
-
-  return cloneElement(child, {
-    onClick: callAll(() => setIsOpen(false), child.props.onClick),
-  });
-}
-
-export default ModalDismissButton;
+import { useContext, cloneElement } from 'react';
+
+import { callAll } from '@ssa-ui-kit/utils';
+
+import { ModalContext } from '../Modal/Modal.context';
+
+function ModalDismissButton({ children: child }: { children: JSX.Element }) {
+  const [, setIsOpen] = useContext(ModalContext);
+
+  return cloneElement(child, {
+    onClick: callAll(() => setIsOpen(false), child.props.onClick),
+  });
+}
+
+export default ModalDismissButton;

package/src/components/ModalDismissButton/index.ts

@@ -1 +1 @@
-export { default } from './ModalDismissButton';
+export { default } from './ModalDismissButton';

package/src/components/ModalOpenButton/ModalOpenButton.tsx

@@ -1,15 +1,15 @@
-import { useContext, cloneElement } from 'react';
-
-import { ModalContext } from '@components/Modal';
-
-import { callAll } from '@ssa-ui-kit/utils';
-
-function ModalOpenButton({ children: child }: { children: JSX.Element }) {
-  const [, setIsOpen] = useContext(ModalContext);
-
-  return cloneElement(child, {
-    onClick: callAll(() => setIsOpen(true), child.props.onClick),
-  });
-}
-
-export default ModalOpenButton;
+import { useContext, cloneElement } from 'react';
+
+import { ModalContext } from '@components/Modal';
+
+import { callAll } from '@ssa-ui-kit/utils';
+
+function ModalOpenButton({ children: child }: { children: JSX.Element }) {
+  const [, setIsOpen] = useContext(ModalContext);
+
+  return cloneElement(child, {
+    onClick: callAll(() => setIsOpen(true), child.props.onClick),
+  });
+}
+
+export default ModalOpenButton;

package/src/components/ModalOpenButton/index.ts

@@ -1 +1 @@
-export { default } from './ModalOpenButton';
+export { default } from './ModalOpenButton';

package/src/components/MultipleDropdown/MultipleDropdown.context.ts

@@ -1,20 +1,20 @@
-import * as React from 'react';
-
-import { DropdownContextType } from './types';
-import { IDropdownOption } from '@components/MultipleDropdownOptions';
-
-const MultipleDropdownContext = React.createContext<
-  DropdownContextType<IDropdownOption>
->({
-  allItems: {},
-  isMultiple: false,
-  onChange: () => {
-    /* noop */
-  },
-});
-
-export function useMultipleDropdownContext(): DropdownContextType<IDropdownOption> {
-  return React.useContext(MultipleDropdownContext);
-}
-
-export default MultipleDropdownContext;
+import * as React from 'react';
+
+import { DropdownContextType } from './types';
+import { IDropdownOption } from '@components/MultipleDropdownOptions';
+
+const MultipleDropdownContext = React.createContext<
+  DropdownContextType<IDropdownOption>
+>({
+  allItems: {},
+  isMultiple: false,
+  onChange: () => {
+    /* noop */
+  },
+});
+
+export function useMultipleDropdownContext(): DropdownContextType<IDropdownOption> {
+  return React.useContext(MultipleDropdownContext);
+}
+
+export default MultipleDropdownContext;