@algorithm-shift/design-system 1.2.10 → 1.2.12

package/src/stories/header.css

@@ -0,0 +1,32 @@
+.storybook-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 15px 20px;
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+.storybook-header svg {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.storybook-header h1 {
+  display: inline-block;
+  vertical-align: top;
+  margin: 6px 0 6px 10px;
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 1;
+}
+
+.storybook-header button + button {
+  margin-left: 10px;
+}
+
+.storybook-header .welcome {
+  margin-right: 10px;
+  color: #333;
+  font-size: 14px;
+}

package/src/stories/page.css

@@ -0,0 +1,68 @@
+.storybook-page {
+  margin: 0 auto;
+  padding: 48px 20px;
+  max-width: 600px;
+  color: #333;
+  font-size: 14px;
+  line-height: 24px;
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+.storybook-page h2 {
+  display: inline-block;
+  vertical-align: top;
+  margin: 0 0 4px;
+  font-weight: 700;
+  font-size: 32px;
+  line-height: 1;
+}
+
+.storybook-page p {
+  margin: 1em 0;
+}
+
+.storybook-page a {
+  color: inherit;
+}
+
+.storybook-page ul {
+  margin: 1em 0;
+  padding-left: 30px;
+}
+
+.storybook-page li {
+  margin-bottom: 8px;
+}
+
+.storybook-page .tip {
+  display: inline-block;
+  vertical-align: top;
+  margin-right: 10px;
+  border-radius: 1em;
+  background: #e7fdd8;
+  padding: 4px 12px;
+  color: #357a14;
+  font-weight: 700;
+  font-size: 11px;
+  line-height: 12px;
+}
+
+.storybook-page .tip-wrapper {
+  margin-top: 40px;
+  margin-bottom: 40px;
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.storybook-page .tip-wrapper svg {
+  display: inline-block;
+  vertical-align: top;
+  margin-top: 3px;
+  margin-right: 4px;
+  width: 12px;
+  height: 12px;
+}
+
+.storybook-page .tip-wrapper svg path {
+  fill: #1ea7fd;
+}

package/src/types/global.d.ts

@@ -0,0 +1,85 @@
+export interface ElementProps {
+  children?: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export interface TypographyProps extends ElementProps {
+  tagName?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
+  textContent?: string;
+}
+
+export interface ImageProps extends ElementProps {
+  imageUrl?: string;
+  altText?: string;
+  imageUrlExternal?: string;
+}
+
+type InputProperties = {
+  placeholder?: string;
+  regexPattern?: string;
+  errorMessage?: string;
+  noOfCharacters?: number;
+  isRequired?: boolean;
+  isEditable?: boolean;
+  isDisabled?: boolean;
+  isReadonly?: boolean;
+  isAutocomplete?: boolean;
+  label?: string;
+  text?: string;
+};
+
+export interface TextInputProps extends ElementProps, InputProperties { }
+export interface EmailInputProps extends ElementProps, InputProperties { }
+export interface PasswordInputProps extends ElementProps, InputProperties { }
+export interface NumberInputProps extends ElementProps, InputProperties { }
+export interface TextAreaProps extends ElementProps, InputProperties { }
+export interface UrlInputProps extends ElementProps, InputProperties { }
+export interface SearchInputProps extends ElementProps, InputProperties { }
+export interface FileInputProps extends ElementProps, Pick<InputProperties, 'placeholder'> { }
+export interface CheckboxInputProps extends ElementProps, Pick<InputProperties, 'text'> { }
+export interface RadioInputProps extends ElementProps, Pick<InputProperties, 'text'> { }
+export interface MultiCheckboxInputProps extends ElementProps, Pick<InputProperties, 'text'> { }
+export interface RichTextInputProps extends ElementProps { }
+export interface SelectDropdownInputProps extends ElementProps, InputProperties { }
+export interface SwitchToggleInputProps extends ElementProps, Pick<InputProperties, 'text'> { }
+export interface PhoneInputProps extends ElementProps, InputProperties { }
+export interface DateRangeInputProps extends ElementProps { }
+export interface DatePickerInputProps extends ElementProps, InputProperties {
+  minimumDate?: string;
+  customMinimumDate?: string;
+  maximumDate?: string;
+  customMaximumDate?: string;
+}
+
+export interface TableProps extends ElementProps {
+  columns?: Record<string, any>;
+  rowActions?: Record<string, any>;
+  data?: Record<string, any>;
+}
+
+export interface TabsProps extends ElementProps {
+  tabs?: Record<string, any>;
+}
+
+export interface StagesProps extends ElementProps {
+  stages?: Record<string, any>;
+  isShowBtn?: boolean;
+  buttonText?: string;
+}
+
+export interface ProfileProps extends ElementProps {
+  profileType?: 'avatar' | 'initial';
+  showName?: boolean;
+  userName?: string;
+}
+
+export interface NotificationProps extends ElementProps {
+  badgeType?: 'number' | 'dot';
+  badgeCount?: number;
+  hideBadgeWhenZero?: boolean;
+}
+
+export interface LogoProps extends ElementProps {
+  imageUrl?: string;
+}