Refactored Tabs, Input folders and other relevant file updates

contributionsguide.md

@@ -101,6 +101,18 @@ We've provided a more extensive resource on building the best commit messages -
 
 <br/>
 
+### Folder Structures for import ###
+Folder structure for new components & how imports should work with setup
+```
+/src/packages/[Component]/src
+\- index.tsx
+\- Readme
+
+/src/packages/[Component]/src/[Sub-Component]/
+
+import { Component, SubComponent, SubComponentTwo } from '@sexui/component';
+```
+
 #### **Contributions Credit**
 
 Every approved contributor appears on the insights of the project and is allowed to use SexyUI for a portfolio or resume reference.

src/packages/Input/README.md

@@ -0,0 +1,46 @@
+# @sexy-ui/Input
+
+A custom input component
+
+The `Input` is a component that is used to get user input in a text field.
+
+## Installation
+
+```sh
+yarn add @sexy-ui/Input
+
+# or
+
+npm i @sexy-ui/Input
+```
+
+## Import components
+
+```jsx
+import { Input } from "@sexy-ui/react";
+```
+
+## Usage
+
+```jsx
+<Input type="text" sizeVariant="large" />
+```
+
+### Input Style variants and color schemes
+
+Input can be displayed with a few different variants for styling!
+
+```jsx
+...
+ <Input type="date" sizeVariant="medium" />
+...
+```
+
+### Input sizes
+
+You can change the size of the sliders by passing `sizeVariant` prop. We support 3 sizes
+`small`, `medium`, `large`
+
+### Input types
+
+We support all basic input types

src/packages/Input/index.ts

@@ -1,2 +1,2 @@
-export { Input } from "./Input";
-export type { InputProps } from "./Input.props";
+export { Input } from "./src/Input/Input";
+export type { InputProps } from "./src/Input/Input.props";

src/packages/Input/Input.props.tsx → src/packages/Input/src/Input/Input.props.tsx

@@ -1,4 +1,4 @@
-import { SizeType } from "../../utils/types.util";
+import { SizeType } from "../../../../utils/types.util";
 
 export interface InputProps
   extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {

src/packages/Input/Input.styled.tsx → src/packages/Input/src/Input/Input.styled.tsx

@@ -1,7 +1,7 @@
 import styled from "styled-components";
+import { setFontSize } from "../../../../utils/styles.util";
+import { darkTheme } from "../../../../utils/theme.util";
 import { InputProps } from "./Input.props";
-import { darkTheme } from "../../utils/theme.util";
-import { setFontSize } from "../../utils/styles.util";
 
 export const StyledInput = styled.input<InputProps>`
   ${(props: InputProps) => setFontSize(props.sizeVariant)}

src/packages/tabs/index.ts

@@ -1,4 +1,5 @@
-
-// @ts-ignore
-
-export * from "./src";
+export { Tab } from "./src/Tab/Tab";
+export { Tabs } from "./src/Tabs/Tabs";
+export { TabList } from "./src/TabList/TabList";
+export { TabPanels } from "./src/TabPanels/TabPanels";
+export { TabContent } from "./src/TabContent/TabContent";

src/packages/tabs/src/Tab/Tab.styled.tsx

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+
+export const StyledTab = styled.div`
+  display: flex;
+  flex-direction: column;
+  border: 1px solid blue;
+  height: 5vh;
+  width: 10vw;
+  border-radius: 20px;
+  background-color: blanchedalmond;
+  text-align: center;
+  font-size: 1rem;
+`;

src/packages/tabs/src/Tab.tsx → src/packages/tabs/src/Tab/Tab.tsx

@@ -1,19 +1,7 @@
 import { useContext } from "react";
-import styled from "styled-components";
-import { MyStore } from "../context/myStore";
+import { MyStore } from "../../context/myStore";
 import { useEffect } from "react";
-
-export const TabMain = styled.div`
-  display: flex;
-  flex-direction: column;
-  border: 1px solid blue;
-  height: 5vh;
-  width: 10vw;
-  border-radius: 20px;
-  background-color: blanchedalmond;
-  text-align: center;
-  font-size: 1rem;
-`;
+import { StyledTab } from "./Tab.styled";
 
 /*
   The Tab component accepts two elements into the 'children' array
@@ -39,8 +27,8 @@ export const Tab: any = ({ children }: any) => {
   };
 
   return (
-    <TabMain aria-label="inactive" onClick={handleContentSetting}>
+    <StyledTab aria-label="inactive" onClick={handleContentSetting}>
       {children[0]}
-    </TabMain>
+    </StyledTab>
   );
 };

src/packages/tabs/src/TabContent.tsx → src/packages/tabs/src/TabContent/TabContent.tsx

@@ -1,6 +1,5 @@
 import { useContext, useEffect } from "react";
-import { MyStore } from "../context/myStore";
-import { useStore } from "../context/useStore";
+import { MyStore } from "../../context/myStore";
 
 /*
   This component displays content received from the context store

src/packages/tabs/src/TabList/TabList.styled.tsx

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+
+export const StyledTabList = styled.div`
+  display: flex;
+  width: 100%;
+  height: 30%;
+  gap: 70px;
+`;

src/packages/tabs/src/TabList.tsx → src/packages/tabs/src/TabList/TabList.tsx

@@ -1,17 +1,10 @@
-import styled from "styled-components";
 import { useEffect, useContext } from "react";
-import { useStore, Store } from "../context/useStore";
-import { MyStore } from "../context/myStore";
+import { useStore, Store } from "../../context/useStore";
+import { MyStore } from "../../context/myStore";
+import { StyledTabList } from "./TabList.styled";
 
 // Wrapper for tab components inside Tabs**
 
-const ListedTabs = styled.div`
-  display: flex;
-  width: 100%;
-  height: 30%;
-  gap: 70px;
-`;
-
 /*
   We use this component to set the default starting value of the `TabContent` component 
   to be the content in the first instance
@@ -29,5 +22,5 @@ export const TabList: any = ({ children }: any) => {
     myStore.setContent(children[store.selectedTab].props.children[1].props);
   }, []);
 
-  return <ListedTabs>{children}</ListedTabs>;
+  return <StyledTabList>{children}</StyledTabList>;
 };

src/packages/tabs/src/TabPanels/TabPanels.styled.tsx

@@ -0,0 +1,6 @@
+import styled from "styled-components";
+
+export const StyledTabPanels = styled.div`
+  display: flex;
+  flex-direction: row;
+`;

src/packages/tabs/src/TabPanels/TabPanels.tsx

@@ -0,0 +1,6 @@
+import React from "react";
+import { StyledTabPanels } from "./TabPanels.styled";
+
+export const TabPanels: any = ({ children }: any) => {
+  return <StyledTabPanels>{children}</StyledTabPanels>;
+};

src/packages/tabs/src/Tabs/Tabs.props.tsx

@@ -0,0 +1,3 @@
+export interface TabsProps {
+  children?: any;
+}

src/packages/tabs/src/Tabs/Tabs.stories.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Tabs } from "./Tabs";
+import { TabList } from "../TabList/TabList";
+import { TitleWrapper } from "../wrappers/TitleWrapper";
+import { Tab } from "../Tab/Tab";
+import { ContentWrapper } from "../wrappers/ContentWrapper";
+import { TabPanels } from "../TabPanels/TabPanels";
+import { TabContent } from "../TabContent/TabContent";
+
+export default {
+  title: "Tabs",
+  component: Tabs,
+  parameters: {
+    docs: {
+      description: {
+        component: "Tabs Component",
+      },
+    },
+  },
+} as ComponentMeta<typeof Tabs>;
+
+const Template: ComponentStory<typeof Tabs> = (args) => (
+  <Tabs>
+    <TabList>
+      <Tab>
+        <TitleWrapper>One </TitleWrapper>
+        <ContentWrapper>
+          <p>Welcome to Tab 1</p>
+        </ContentWrapper>
+      </Tab>
+      <Tab>
+        <TitleWrapper>Two </TitleWrapper>
+        <ContentWrapper>
+          <p>Welcome to Tab 2</p>
+        </ContentWrapper>
+      </Tab>
+      <Tab>
+        <TitleWrapper>Three </TitleWrapper>
+        <ContentWrapper>
+          <p>Welcome to Tab 3</p>
+        </ContentWrapper>
+      </Tab>
+    </TabList>
+
+    <TabPanels>
+      <TabContent />
+    </TabPanels>
+  </Tabs>
+);
+
+export const ExampleTab = Template.bind({});

src/packages/tabs/src/Tabs/Tabs.styled.tsx

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+
+export const StyledTabs = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  height: 50vh;
+`;

src/packages/tabs/src/Tabs/Tabs.tsx

@@ -0,0 +1,18 @@
+import { MyStore } from "../../context/myStore";
+import { useStore } from "../../context/useStore";
+import { TabsProps } from "./Tabs.props";
+import { StyledTabs } from "./Tabs.styled";
+
+/*  Tabs is wrapper component that holds list of tab topics and 
+    contents for each tab in a different wrapper
+*/
+
+export const Tabs = ({ children }: TabsProps) => {
+  const myStore = useStore();
+  return (
+    // Store provider for hydrating tab content
+    <MyStore.Provider value={myStore}>
+      <StyledTabs>{children}</StyledTabs>;
+    </MyStore.Provider>
+  );
+};

src/packages/tabs/src/UseCaseTabs.tsx

@@ -1,8 +1,8 @@
-import { Tabs } from "./Tabs";
-import { TabList } from "./TabList";
-import { Tab } from "./Tab";
-import { TabPanels } from "./TabPanels";
-import { TabContent } from "./TabContent";
+import { Tabs } from "./Tabs/Tabs";
+import { TabList } from "./TabList/TabList";
+import { Tab } from "./Tab/Tab";
+import { TabPanels } from "./TabPanels/TabPanels";
+import { TabContent } from "./TabContent/TabContent";
 import { TitleWrapper } from "./wrappers/TitleWrapper";
 import { ContentWrapper } from "./wrappers/ContentWrapper";