@soul-refiner/design-system 0.1.28 → 0.1.30

package/dist/components/iconography/icon/icon.stories.js

@@ -0,0 +1,113 @@
+/* eslint-disable */
+import React from 'react';
+import { COLORS } from 'common';
+import { Box, H, P } from 'components';
+// does not recognize index file in subdirectories
+// @ts-ignore
+import * as AudioVideoIcons from 'icons/audio_video';
+// @ts-ignore
+import * as ArrowIcons from 'icons/arrow';
+// @ts-ignore
+import * as BasicIcons from 'icons/basic';
+// @ts-ignore
+import * as DataIcons from 'icons/data';
+// @ts-ignore
+import * as EmailIcons from 'icons/email';
+// @ts-ignore
+import * as FileIcons from 'icons/file';
+// @ts-ignore
+import * as FinanceIcons from 'icons/finance';
+// @ts-ignore
+import * as LayoutIcons from 'icons/layout';
+// @ts-ignore
+import * as MapIcons from 'icons/maps';
+// @ts-ignore
+import * as MessageIcons from 'icons/message';
+// @ts-ignore
+import * as MiscIcons from 'icons/misc';
+// @ts-ignore
+import * as NotificationIcons from 'icons/notifications';
+// @ts-ignore
+import * as PeopleIcons from 'icons/people';
+// @ts-ignore
+import * as PhoneIcons from 'icons/phone';
+// @ts-ignore
+import * as SecurityIcons from 'icons/security';
+// @ts-ignore
+import * as ShoppingIcons from 'icons/shopping';
+// @ts-ignore
+import * as SymbolIcons from 'icons/symbols';
+// @ts-ignore
+import * as TechnologyIcons from 'icons/technology';
+// @ts-ignore
+import * as TextIcons from 'icons/text';
+// @ts-ignore
+import * as TimeIcons from 'icons/time';
+const meta = {
+    title: 'Iconography/Icons',
+    argTypes: {
+        color: {
+            options: COLORS,
+            control: 'select',
+        },
+        size: {
+            options: [16, 20, 24],
+            control: 'select',
+        },
+    },
+    args: {
+        size: 20,
+        color: 'grey-4',
+    },
+    parameters: {
+        layout: 'centered',
+    },
+};
+const StoryComponent = (iconSet, title) => (args) => (React.createElement(React.Fragment, null,
+    React.createElement(H.One, { "$textAlign": "center", "$semiBold": true }, title),
+    React.createElement(Box, { "$align": "center", "$gap": 32, "$flow": "wrap", "$justify": "center", "$margin": "medium-large", sx: "max-width: 850px;" }, Object.entries(iconSet).map(([name, Item], index) => (React.createElement(Box, { key: index.toString(36), "$dir": "column", "$gap": 8, "$justify": "center", "$align": "center", "$flex": 1 },
+        React.createElement(Item, { ...args }),
+        React.createElement(P, { as: "h4", "$textClampLines": 3, "$fontSize": 16, "$textAlign": "center" }, name.replaceAll(/[A-Z]/g, (match) => {
+            return ` ${match}`;
+        }))))))));
+const BasicIconsStory = StoryComponent(BasicIcons, 'Basic Icons');
+export const Basic = BasicIconsStory.bind({});
+const EmailIconsStory = StoryComponent(EmailIcons, 'Email Icons');
+export const Email = EmailIconsStory.bind({});
+const PeopleIconsStory = StoryComponent(PeopleIcons, 'People Icons');
+export const People = PeopleIconsStory.bind({});
+const SecurityIconsStory = StoryComponent(SecurityIcons, 'Security Icons');
+export const Security = SecurityIconsStory.bind({});
+const NotificationsIconsStory = StoryComponent(NotificationIcons, 'Notification Icons');
+export const Notifications = NotificationsIconsStory.bind({});
+const TimeIconsStory = StoryComponent(TimeIcons, 'Time Icons');
+export const Time = TimeIconsStory.bind({});
+const MapIconsStory = StoryComponent(MapIcons, 'Map Icons');
+export const Maps = MapIconsStory.bind({});
+const SymbolIconsStory = StoryComponent(SymbolIcons, 'Symbol Icons');
+export const Symbols = SymbolIconsStory.bind({});
+const FinanceIconsStory = StoryComponent(FinanceIcons, 'Finance Icons');
+export const Finance = FinanceIconsStory.bind({});
+const MessageIconsStory = StoryComponent(MessageIcons, 'Message Icons');
+export const Message = MessageIconsStory.bind({});
+const LayoutStory = StoryComponent(LayoutIcons, 'Layout Icons');
+export const Layout = LayoutStory.bind({});
+const DataIconsStory = StoryComponent(DataIcons, 'Data Icons');
+export const Data = DataIconsStory.bind({});
+const FileIconsStory = StoryComponent(FileIcons, 'File Icons');
+export const File = FileIconsStory.bind({});
+const ArrowIconsStory = StoryComponent(ArrowIcons, 'Arrow Icons');
+export const Arrow = ArrowIconsStory.bind({});
+const MiscIconsStory = StoryComponent(MiscIcons, 'Misc Icons');
+export const Misc = MiscIconsStory.bind({});
+const TextIconsStory = StoryComponent(TextIcons, 'Text Icons');
+export const Text = TextIconsStory.bind({});
+const ShoppingIconsStory = StoryComponent(ShoppingIcons, 'Shopping Icons');
+export const Shopping = ShoppingIconsStory.bind({});
+const TechnologyIconsStory = StoryComponent(TechnologyIcons, 'Technology Icons');
+export const Technology = TechnologyIconsStory.bind({});
+const AudioVideoIconsStory = StoryComponent(AudioVideoIcons, 'Audio-Video Icons');
+export const VideoAudio = AudioVideoIconsStory.bind({});
+const PhoneIconsStory = StoryComponent(PhoneIcons, 'Phone Icons');
+export const Phone = PhoneIconsStory.bind({});
+export default meta;

package/dist/components/iconography/icon/index.d.ts

@@ -0,0 +1,2 @@
+export { Icon } from './icon';
+export type { IconProps } from './icon';

package/dist/components/iconography/icon/index.js

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

package/dist/components/iconography/index.d.ts

@@ -0,0 +1,4 @@
+export { Avatar } from './avatar';
+export type { AvatarGroupProps, AvatarProps } from './avatar';
+export { Icon } from './icon';
+export type { IconProps } from './icon';

package/dist/components/iconography/index.js

@@ -0,0 +1,2 @@
+export { Avatar } from './avatar';
+export { Icon } from './icon';

package/dist/components/index.d.ts

@@ -0,0 +1,9 @@
+export * from './actions';
+export * from './atoms';
+export * from './card';
+export * from './editor';
+export * from './feedback';
+export * from './iconography';
+export * from './input';
+export * from './navigation';
+export * from './surfaces';

package/dist/components/index.js

@@ -0,0 +1,9 @@
+export * from './actions';
+export * from './atoms';
+export * from './card';
+export * from './editor';
+export * from './feedback';
+export * from './iconography';
+export * from './input';
+export * from './navigation';
+export * from './surfaces';

package/dist/components/input/checkbox/checkbox.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type NativeProps = Pick<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onChange' | 'onMouseDown' | 'onMouseDownCapture' | 'onMouseEnter' | 'onMouseLeave' | 'onMouseOut' | 'onMouseOver'>;
+export interface CheckboxProps extends NativeProps {
+    disabled?: boolean;
+    selected: boolean;
+}
+export declare const Checkbox: ({ disabled, selected, ...rest }: CheckboxProps) => React.JSX.Element;
+export {};

package/dist/components/input/checkbox/checkbox.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Styles } from 'common';
+import { Checkmark } from 'icons';
+export const Checkbox = ({ disabled, selected, ...rest }) => {
+    return (React.createElement(Box, { "$align": "center", "$disabled": !!disabled, "$display": "flex", "$justify": "center", "$selected": selected, ...rest }, selected && React.createElement(Checkmark, { color: "white" })));
+};
+const Box = styled.div `
+  display: flex;
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  cursor: pointer;
+  box-sizing: border-box;
+
+  ${({ $selected }) => $selected
+    ? `background-color: var(--color-primary-blue-2);
+    border: 1px solid var(--color-primary-blue-2);`
+    : 'border: 1px solid var(--color-grey-8);'}
+  ${Styles.flex}
+`;

package/dist/components/input/checkbox/checkbox.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { CheckboxProps } from './checkbox';
+declare const meta: Meta;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, CheckboxProps>;
+export default meta;

package/dist/components/input/checkbox/checkbox.stories.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Checkbox } from './checkbox';
+const meta = {
+    title: 'Input/Checkbox',
+    parameters: {
+        layout: 'centered',
+    },
+};
+// eslint-disable-next-line
+const Story = ({ selected: _, ...args }) => {
+    const [selected, setSelected] = React.useState(false);
+    const handleSelected = () => setSelected((prev) => !prev);
+    return React.createElement(Checkbox, { selected: selected, onClick: handleSelected, ...args });
+};
+export const Default = Story.bind({});
+Default.args = {
+    disabled: false,
+};
+export default meta;

package/dist/components/input/checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export { Checkbox } from './checkbox';
+export type { CheckboxProps } from './checkbox';

package/dist/components/input/checkbox/index.js

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

package/dist/components/input/date/date.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface DatePickerProps {
+    endDate?: Date;
+    label?: React.ReactNode;
+    onSelect: ({ type, value }: {
+        type: 'end' | 'start';
+        value: Date;
+    }) => void;
+    startDate: Date;
+}
+export declare const DatePicker: ({ endDate, label, onSelect: parentOnSelect, startDate, }: DatePickerProps) => React.JSX.Element;