Setup library for publishing to npm

src/components/Alert/index.stories.ts

@@ -8,7 +8,7 @@ const meta = {
   parameters: {
     layout: 'centered',
   },
-  tags: ['autodocs'],
+  tags: ['!autodocs'],
   argTypes: {
     text: { control: 'text' },
     color: { options: ['client', 'productOwner', 'developer', 'admin'] },

src/components/Alert/index.tsx

@@ -1,6 +1,6 @@
 import { Wrapper } from './styles';
 
-type AlertProps = {
+export type AlertProps = {
   className?: string;
   color:
     | 'client'

src/components/Avatar/index.stories.ts

@@ -8,7 +8,6 @@ const meta = {
   parameters: {
     layout: 'centered',
   },
-  tags: ['autodocs'],
   argTypes: {
     text: { control: 'text' },
     color: { options: ['client', 'productOwner', 'developer', 'admin'] },

src/components/Avatar/index.tsx

@@ -1,6 +1,6 @@
 import { Wrapper } from './styles';
 
-type AvatarProps = {
+export type AvatarProps = {
   className?: string;
   color?: 'client' | 'productOwner' | 'developer' | 'admin' | string;
   size?: 'small' | 'big';

src/components/Box/index.stories.ts

@@ -8,7 +8,6 @@ const meta = {
   parameters: {
     layout: 'centered',
   },
-  tags: ['autodocs'],
   argTypes: {
     color: { control: 'text' },
     children: { control: 'text' },

src/components/Button/index.stories.ts

@@ -8,7 +8,6 @@ const meta = {
   parameters: {
     layout: 'centered',
   },
-  tags: ['autodocs'],
   argTypes: {
     color: { options: ['client', 'productOwner', 'developer', 'admin', 'error'] },
     text: { control: 'text' },

src/components/Button/index.tsx

@@ -2,7 +2,7 @@ import Spinner from '../Spinner';
 
 import { Wrapper } from './styles';
 
-type ButtonProps = {
+export type ButtonProps = {
   color: 'client' | 'productOwner' | 'developer' | 'admin' | 'error';
   size?: 'small' | 'big';
   variant?: 'primary-action' | 'secondary-action' | 'outlined' | 'text';

src/components/Card/index.stories.ts

@@ -8,7 +8,6 @@ const meta = {
   parameters: {
     layout: 'centered',
   },
-  tags: ['autodocs'],
   argTypes: {
     color: { options: ['client', 'productOwner', 'developer', 'admin', 'error'] },
   },

src/components/Card/index.tsx

@@ -1,9 +1,9 @@
 import Box from '../Box';
 import Text from '../Text';
 
-import { theme } from '../../themes';
+import { defaultTheme } from '../../themes';
 
-type CardProps = {
+export type CardProps = {
   title: string;
 	description: string;
   selectable?: boolean;
@@ -25,7 +25,7 @@ const Card = ({
       padding='10px'
       background='white'
       boxShadow='1px 1px 10px rgba(50, 59, 105, 0.25)'
-      border={selected ? `2px solid ${theme.colors[color].main}` : undefined}
+      border={selected ? `2px solid ${defaultTheme.colors[color].main}` : undefined}
       onClick={selectable ? toggleSelect : () => {}}
       display='grid'
       gridTemplateRows='auto'

src/components/CheckBox/index.stories.ts

@@ -8,7 +8,7 @@ const meta = {
   parameters: {
     layout: 'centered',
   },
-  tags: ['autodocs'],
+  tags: ['!autodocs'],
   argTypes: {
     color: { options: ['client', 'productOwner', 'developer', 'admin'] },
     label: { control: 'text' },

src/components/CheckBox/index.tsx

@@ -4,7 +4,7 @@ import Text from '../Text';
 
 import { Check } from '../../assets';
 
-type CheckBoxProps = {
+export type CheckBoxProps = {
   className?: string;
   color?: 'client' | 'productOwner' | 'developer' | 'admin';
   label: string;

src/components/Chip/index.stories.ts

@@ -8,7 +8,6 @@ const meta = {
   parameters: {
     layout: 'centered',
   },
-  tags: ['autodocs'],
   argTypes: {
     color: { options: ['client', 'productOwner', 'developer', 'admin'] },
     text: { control: 'text' },

src/components/Chip/index.tsx

@@ -2,7 +2,7 @@ import { Wrapper } from './styles';
 
 import Text from '../Text';
 
-type ChipProps = {
+export type ChipProps = {
   variant?: 'outlined' | 'filled';
   color:
     | 'client'

src/components/ContextMenu/index.stories.tsx

@@ -6,7 +6,9 @@ import Box from '../Box';
 const meta = {
 	title: 'ContextMenu',
   component: ContextMenu,
-	tags: ['autodocs'],
+	parameters: {
+    layout: 'centered',
+  },
 } satisfies Meta<typeof ContextMenu>;
 
 export default meta;
@@ -27,4 +29,4 @@ export const Example: Story = {
       </>
     )
   },
-}
+};

src/components/ContextMenu/index.tsx

@@ -4,7 +4,7 @@ import { Wrapper } from './styles';
 
 import Text from '../Text';
 
-type ContextMenuProps = {
+export type ContextMenuProps = {
   className?: string;
   items: Array<{ label: string; action?: () => void }>;
   component: string;

src/components/IconButton/index.stories.ts

@@ -1,28 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import IconButton from '.';
-
-const meta = {
-  title: 'IconButton',
-  component: IconButton,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    color: { options: ['client', 'productOwner', 'developer', 'admin'] },
-    size: { options: ['small', 'medium', 'big'] },
-  },
-} satisfies Meta<typeof IconButton>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Example: Story = {
-  args: {
-		color: 'admin',
-		size: 'medium',
-		onClick: () => window.alert('Hello, World!')
-  },
-};

src/components/IconButton/index.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import IconButton from '.';
+import Add from '../../assets/icons/add.svg?react';
+
+const meta = {
+  title: 'IconButton',
+  component: IconButton,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['!autodocs'],
+} satisfies Meta<typeof IconButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof IconButton>;
+
+export const Example: Story = {
+  render: () => {
+    return (
+      <IconButton
+        color='admin'
+        icon={<Add />}
+        size='medium'
+        onClick={() => window.alert('Hello, World!')}
+      />
+    )
+  }
+};

src/components/IconButton/index.tsx

@@ -1,6 +1,6 @@
 import { Wrapper } from './styles';
 
-type IconButtonProps = {
+export type IconButtonProps = {
   color?: 'client' | 'productOwner' | 'developer' | 'admin';
   size?: 'small' | 'medium' | 'big';
   icon?: React.ReactNode;

src/components/IconButton/styles.ts

@@ -22,6 +22,7 @@ export const Wrapper = styled.button<WrapperProps>`
   svg {
     display: flex;
     align-items: center;
+		justify-content: center;
 
     path {
       stroke: ${({ theme }) => theme.colors.white.main};

src/components/ImagePreview/index.stories.ts

@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import ImagePreview from '.';
-
-const meta = {
-  title: 'ImagePreview',
-  component: ImagePreview,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    color: { options: ['client', 'productOwner', 'developer', 'admin'] },
-  },
-} satisfies Meta<typeof ImagePreview>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Example: Story = {
-  args: {
-		color: 'developer',
-  },
-};

src/components/ImagePreview/index.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+
+import ImagePreview, {ImagePreviewProps} from '.';
+
+const meta = {
+  title: 'ImagePreview',
+  component: ImagePreview,
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof ImagePreview>;
+
+export default meta;
+
+type Story = StoryObj<typeof ImagePreview>;
+
+export const Example: Story = {
+  render: (args) => {
+    const [image, setImage] = useState<ImagePreviewProps['image']>(undefined);
+
+    return (
+      <>
+        <ImagePreview
+          image={image}
+          onChange={(event) => {
+						console.log(event)
+            setImage({
+              name: 'image',
+              src: event.target.value
+            })
+          }}
+          color={args.color}
+        />
+        <p>{image?.src}</p>
+      </>
+    );
+  }
+};

src/components/ImagePreview/index.tsx

@@ -1,7 +1,7 @@
 import { Wrapper } from './styles';
 import { Upload, Close } from '../../assets';
 
-type ImagePreviewProps = {
+export type ImagePreviewProps = {
   className?: string;
   color?:
     | 'client'

src/components/Input/index.stories.ts

@@ -8,7 +8,6 @@ const meta = {
   parameters: {
     layout: 'centered',
   },
-  tags: ['autodocs'],
   argTypes: {
     color: { options: ['client', 'productOwner', 'developer', 'admin'] },
   },

src/components/Input/index.tsx

@@ -3,7 +3,7 @@ import Text from '../Text';
 import { Upload } from '../../assets';
 import { Wrapper } from './styles';
 
-type InputProps = {
+export type InputProps = {
   className?: string;
   color?:
     | 'client'

src/components/Link/index.stories.ts

@@ -8,7 +8,7 @@ const meta = {
   parameters: {
     layout: 'centered',
   },
-  tags: ['autodocs'],
+  tags: ['!autodocs'],
   argTypes: {
     color: { options: ['success', 'error', 'warning', 'black'] },
   },

src/components/Link/index.tsx

@@ -1,7 +1,7 @@
 import { JSX } from 'react';
 import { Wrapper } from './styles';
 
-type LinkProps = {
+export type LinkProps = {
   href?: string;
   url?: boolean;
   children?: React.ReactNode | JSX.Element | string;

src/components/Menu/index.stories.ts

@@ -1,27 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import Menu from '.';
-
-const meta = {
-  title: 'Menu',
-  component: Menu,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof Menu>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Example: Story = {
-  args: {
-		items: [
-			{
-				label: 'Hello, World!',
-			}
-		],
-		component: 'component',
-  },
-};

src/components/Menu/index.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Menu from '.';
+import Box from '../Box';
+
+import Add from '../../assets/icons/add.svg?react';
+
+const meta = {
+  title: 'Menu',
+  component: Menu,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['!autodocs'],
+} satisfies Meta<typeof Menu>;
+
+export default meta;
+
+type Story = StoryObj<typeof Menu>;
+
+export const Example: Story = {
+  render: () => {
+    return (
+      <>
+        <Menu
+          component='box'
+          items={[
+            { icon: <Add />, label: 'Item', action: () => window.alert('Adding item!') }
+          ]}
+        />
+        <Box id='box'>Has a Menu!</Box>
+      </>
+    )
+  },
+};

src/components/Menu/index.tsx

@@ -3,7 +3,7 @@ import { Wrapper } from './styles';
 
 import Text from '../Text';
 
-type MenuProps = {
+export type MenuProps = {
   className?: string;
   items: Array<{
     icon?: React.ReactNode;

src/components/Modal/index.stories.ts

@@ -8,7 +8,6 @@ const meta = {
   parameters: {
     layout: 'centered',
   },
-  tags: ['autodocs'],
 	argTypes: {
     color: { options: ['client', 'productOwner', 'developer', 'admin', 'error'] },
     title: { control: 'text' },

src/components/Modal/index.tsx

@@ -1,5 +1,5 @@
 import { JSX } from 'react';
-import { theme } from '../../themes';
+import { defaultTheme } from '../../themes';
 
 import Box from '../Box';
 import Button from '../Button';
@@ -7,7 +7,7 @@ import Text from '../Text';
 
 import { Wrapper } from './styles';
 
-type ModalProps = {
+export type ModalProps = {
   color: 'client' | 'productOwner' | 'developer' | 'admin';
   title: string;
   description: string;
@@ -27,7 +27,7 @@ const Modal = ({
   return (
     <Wrapper>
       <Box
-        background={theme.colors.white.main}
+        background={defaultTheme.colors.white.main}
         borderRadius='10px'
         padding='20px'
         display='grid'
@@ -38,7 +38,7 @@ const Modal = ({
         <Text variant='headline' weight='bold' color={color}>
           {title}
         </Text>
-        <Text variant='body' color={theme.colors.black.main}>
+        <Text variant='body' color={defaultTheme.colors.black.main}>
           {description}
         </Text>
         {children}

src/components/Search/index.stories.ts

@@ -8,7 +8,6 @@ const meta = {
   parameters: {
     layout: 'centered',
   },
-  tags: ['autodocs'],
 	argTypes: {
     color: { options: ['client', 'productOwner', 'developer', 'admin', 'error'] },
     value: { control: 'text' },

src/components/Search/index.tsx

@@ -2,7 +2,7 @@ import { Wrapper } from './styles';
 
 import SearchIcon from '../../assets/icons/search.svg?react';
 
-type SearchProps = {
+export type SearchProps = {
   className?: string;
   color?:
     | 'client'

src/components/Select/index.stories.ts

@@ -8,7 +8,6 @@ const meta = {
   parameters: {
     layout: 'centered',
   },
-  tags: ['autodocs'],
   argTypes: {
     color: { options: ['client', 'productOwner', 'developer', 'admin', 'error'] },
     value: { control: 'text' },

src/components/Select/index.tsx

@@ -2,7 +2,7 @@ import { Wrapper } from './styles';
 
 import Text from '../Text';
 
-type SelectProps = {
+export type SelectProps = {
   className?: string;
   color?:
     | 'client'

src/components/Spinner/index.stories.ts

@@ -8,7 +8,7 @@ const meta = {
   parameters: {
     layout: 'centered',
   },
-  tags: ['autodocs'],
+  tags: ['!autodocs'],
   argTypes: {
     color: { options: ['client', 'productOwner', 'developer', 'admin', 'error'] },
   },

src/components/Spinner/index.tsx

@@ -1,6 +1,6 @@
 import { Wrapper } from './styles';
 
-type SpinnerProps = {
+export type SpinnerProps = {
   color?:
     | 'client'
     | 'productOwner'
@@ -9,12 +9,12 @@ type SpinnerProps = {
     | 'white'
     | 'black'
     | 'gray';
-  fullScreen?: boolean;
+  fullWidth?: boolean;
 };
 
-const Spinner = ({ fullScreen = false, color = 'client' }: SpinnerProps) => {
+const Spinner = ({ fullWidth = false, color = 'client' }: SpinnerProps) => {
   return (
-    <Wrapper fullScreen={fullScreen} color={color}>
+    <Wrapper fullWidth={fullWidth} color={color}>
       <div className='lds-dual-ring'></div>
     </Wrapper>
   );

src/components/Spinner/styles.ts

@@ -9,12 +9,12 @@ type WrapperProps = {
     | 'white'
     | 'black'
     | 'gray';
-  fullScreen?: boolean;
+  fullWidth?: boolean;
 };
 
 export const Wrapper = styled.div<WrapperProps>`
-  ${({ fullScreen }) =>
-    fullScreen &&
+  ${({ fullWidth }) =>
+    fullWidth &&
     css`
       position: fixed;
       top: 50%;
@@ -28,6 +28,7 @@ export const Wrapper = styled.div<WrapperProps>`
     width: 80px;
     height: 80px;
   }
+
   .lds-dual-ring:after {
     content: ' ';
     display: block;
@@ -46,6 +47,7 @@ export const Wrapper = styled.div<WrapperProps>`
       transparent;
     animation: lds-dual-ring 1.2s linear infinite;
   }
+
   @keyframes lds-dual-ring {
     0% {
       transform: rotate(0deg);

src/components/Text/index.stories.ts

@@ -8,7 +8,7 @@ const meta = {
   parameters: {
     layout: 'centered',
   },
-  tags: ['autodocs'],
+  tags: ['!autodocs'],
   argTypes: {
     color: { options: ['client', 'productOwner', 'developer', 'admin', 'error'] },
     variant: { options: ['display', 'headline', 'title', 'subheader', 'body', 'caption'] },

src/components/Text/index.tsx

@@ -1,6 +1,6 @@
 import { Wrapper } from './styles';
 
-type TextProps = {
+export type TextProps = {
   children?: string;
   className?: string;
   variant?: 'display' | 'headline' | 'title' | 'subheader' | 'body' | 'caption';

src/components/TextArea/index.stories.ts

@@ -8,7 +8,6 @@ const meta = {
   parameters: {
     layout: 'centered',
   },
-  tags: ['autodocs'],
   argTypes: {
     color: { options: ['client', 'productOwner', 'developer', 'admin', 'error'] },
   },

src/components/TextArea/index.tsx

@@ -2,7 +2,7 @@ import { Wrapper } from './styles';
 
 import Text from '../Text';
 
-type TextAreaProps = {
+export type TextAreaProps = {
   className?: string;
   color?:
     | 'client'

src/components/ThemeProvider/index.tsx

@@ -0,0 +1,19 @@
+import { ThemeProvider as StyledThemeProvider } from 'styled-components';
+import { DefaultTheme } from 'styled-components';
+
+import { defaultTheme } from '../../themes';
+
+export type ThemeProviderProps = {
+  children: React.ReactNode;
+	theme?: DefaultTheme;
+};
+
+function ThemeProvider({ children, theme = defaultTheme }: ThemeProviderProps) {
+  return (
+    <StyledThemeProvider theme={theme}>
+      {children}
+    </StyledThemeProvider>
+  );
+}
+
+export default ThemeProvider;

src/index.ts

@@ -0,0 +1,64 @@
+import Button, { ButtonProps } from './components/Button';
+import IconButton, { IconButtonProps } from './components/IconButton';
+import Box, { BoxProps } from './components/Box';
+import Text, { TextProps } from './components/Text';
+import Link, { LinkProps } from './components/Link';
+import Input, { InputProps } from './components/Input';
+import TextArea, { TextAreaProps } from './components/TextArea';
+import Select, { SelectProps } from './components/Select';
+import Search, { SearchProps } from './components/Search';
+import Avatar, { AvatarProps } from './components/Avatar';
+import ContextMenu, { ContextMenuProps } from './components/ContextMenu';
+import Spinner, { SpinnerProps } from './components/Spinner';
+import Alert, { AlertProps } from './components/Alert';
+import CheckBox, { CheckBoxProps } from './components/CheckBox';
+import Menu, { MenuProps } from './components/Menu';
+import Modal, { ModalProps } from './components/Modal';
+import ImagePreview, { ImagePreviewProps } from './components/ImagePreview';
+import Chip, { ChipProps } from './components/Chip';
+import ThemeProvider, { ThemeProviderProps } from './components/ThemeProvider';
+import GlobalStyles from './components/GlobalStyles';
+
+export {
+  Button,
+  IconButton,
+  Box,
+  Text,
+  Link,
+  Input,
+  TextArea,
+  Select,
+  Search,
+  Avatar,
+  ContextMenu,
+  Menu,
+  Spinner,
+  Alert,
+  CheckBox,
+  Modal,
+  ImagePreview,
+  Chip,
+  GlobalStyles,
+	ThemeProvider,
+};
+export type {
+  ButtonProps,
+  IconButtonProps,
+  BoxProps,
+  TextProps,
+  LinkProps,
+  InputProps,
+  TextAreaProps,
+  SelectProps,
+  SearchProps,
+  AvatarProps,
+  ContextMenuProps,
+  MenuProps,
+  SpinnerProps,
+  AlertProps,
+  CheckBoxProps,
+  ModalProps,
+  ImagePreviewProps,
+  ChipProps,
+	ThemeProviderProps,
+};

src/index.tsx

@@ -1,61 +0,0 @@
-import Button from './components/Button';
-import IconButton from './components/IconButton';
-import Box from './components/Box';
-import Text from './components/Text';
-import Link from './components/Link';
-import Input from './components/Input';
-import TextArea from './components/TextArea';
-import Select from './components/Select';
-import Search from './components/Search';
-import Avatar from './components/Avatar';
-import ContextMenu from './components/ContextMenu';
-import Spinner from './components/Spinner';
-import Alert from './components/Alert';
-import CheckBox from './components/CheckBox';
-import Menu from './components/Menu';
-import Navbar from './components/Navbar';
-import Sidebar from './components/Sidebar';
-import SectionSelector from './components/SectionSelector';
-import Modal from './components/Modal';
-import SidebarItem from './components/SidebarItem';
-import ImagePreview from './components/ImagePreview';
-import FeatureCard from './components/FeatureCard';
-import FrontendFeatureCard from './components/FrontendFeatureCard';
-import BackendFeatureCard from './components/BackendFeatureCard';
-import Chip from './components/Chip';
-import CategoryCard from './components/CategoryCard';
-import TemplateCard from './components/TemplateCard';
-import SupportSidebar from './components/SupportSidebar';
-import GlobalStyles from './components/GlobalStyles';
-
-export {
-  Button,
-  IconButton,
-  Box,
-  Text,
-  Link,
-  Input,
-  TextArea,
-  Select,
-  Search,
-  Avatar,
-  ContextMenu,
-  Menu,
-  Spinner,
-  Alert,
-  CheckBox,
-  Navbar,
-  Sidebar,
-  SectionSelector,
-  Modal,
-  SidebarItem,
-  ImagePreview,
-  FeatureCard,
-  FrontendFeatureCard,
-  BackendFeatureCard,
-  Chip,
-  CategoryCard,
-  TemplateCard,
-  SupportSidebar,
-	GlobalStyles,
-};

src/themes/index.ts

@@ -1,6 +1,6 @@
 import { DefaultTheme } from 'styled-components';
 
-export const theme: DefaultTheme = {
+export const defaultTheme: DefaultTheme = {
   colors: {
     black: {
       main: '#000000',