diff --git a/contributionsguide.md b/contributionsguide.md index f9713d8..be55807 100644 --- a/contributionsguide.md +++ b/contributionsguide.md @@ -101,6 +101,18 @@ We've provided a more extensive resource on building the best commit messages -
+### 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. diff --git a/src/packages/Input/README.md b/src/packages/Input/README.md new file mode 100644 index 0000000..2306af4 --- /dev/null +++ b/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 Style variants and color schemes + +Input can be displayed with a few different variants for styling! + +```jsx +... + +... +``` + +### 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 diff --git a/src/packages/Input/index.ts b/src/packages/Input/index.ts index 9f8acab..c097bd8 100644 --- a/src/packages/Input/index.ts +++ b/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"; diff --git a/src/packages/Input/Input.props.tsx b/src/packages/Input/src/Input/Input.props.tsx similarity index 90% rename from src/packages/Input/Input.props.tsx rename to src/packages/Input/src/Input/Input.props.tsx index e7fd1cf..3ea67d1 100644 --- a/src/packages/Input/Input.props.tsx +++ b/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, "type"> { diff --git a/src/packages/Input/Input.stories.tsx b/src/packages/Input/src/Input/Input.stories.tsx similarity index 100% rename from src/packages/Input/Input.stories.tsx rename to src/packages/Input/src/Input/Input.stories.tsx diff --git a/src/packages/Input/Input.styled.tsx b/src/packages/Input/src/Input/Input.styled.tsx similarity index 78% rename from src/packages/Input/Input.styled.tsx rename to src/packages/Input/src/Input/Input.styled.tsx index 8ed6534..0385e89 100644 --- a/src/packages/Input/Input.styled.tsx +++ b/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` ${(props: InputProps) => setFontSize(props.sizeVariant)} diff --git a/src/packages/Input/Input.tsx b/src/packages/Input/src/Input/Input.tsx similarity index 100% rename from src/packages/Input/Input.tsx rename to src/packages/Input/src/Input/Input.tsx diff --git a/src/packages/tabs/index.ts b/src/packages/tabs/index.ts index 9074cfc..cd4c3f0 100644 --- a/src/packages/tabs/index.ts +++ b/src/packages/tabs/index.ts @@ -1,4 +1,5 @@ - -// @ts-ignore - -export * from "./src"; \ No newline at end of file +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"; diff --git a/src/packages/tabs/src/Tab/Tab.styled.tsx b/src/packages/tabs/src/Tab/Tab.styled.tsx new file mode 100644 index 0000000..b4f8186 --- /dev/null +++ b/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; +`; diff --git a/src/packages/tabs/src/Tab.tsx b/src/packages/tabs/src/Tab/Tab.tsx similarity index 68% rename from src/packages/tabs/src/Tab.tsx rename to src/packages/tabs/src/Tab/Tab.tsx index 2030a7b..913a1a5 100644 --- a/src/packages/tabs/src/Tab.tsx +++ b/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 ( - + {children[0]} - + ); }; diff --git a/src/packages/tabs/src/TabContent.tsx b/src/packages/tabs/src/TabContent/TabContent.tsx similarity index 86% rename from src/packages/tabs/src/TabContent.tsx rename to src/packages/tabs/src/TabContent/TabContent.tsx index 6d0580c..a646e18 100644 --- a/src/packages/tabs/src/TabContent.tsx +++ b/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 diff --git a/src/packages/tabs/src/TabList/TabList.styled.tsx b/src/packages/tabs/src/TabList/TabList.styled.tsx new file mode 100644 index 0000000..f2da832 --- /dev/null +++ b/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; +`; diff --git a/src/packages/tabs/src/TabList.tsx b/src/packages/tabs/src/TabList/TabList.tsx similarity index 64% rename from src/packages/tabs/src/TabList.tsx rename to src/packages/tabs/src/TabList/TabList.tsx index 910902b..4b6818c 100644 --- a/src/packages/tabs/src/TabList.tsx +++ b/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 {children}; + return {children}; }; diff --git a/src/packages/tabs/src/TabPanels.tsx b/src/packages/tabs/src/TabPanels.tsx deleted file mode 100644 index c453aa8..0000000 --- a/src/packages/tabs/src/TabPanels.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import styled from 'styled-components'; - - -const Panel = styled.div` - display: flex; - flex-direction: row; - -` - -export const TabPanels:any = ({children}:any) => { - return ( - - {children} - - ) -} diff --git a/src/packages/tabs/src/TabPanels/TabPanels.styled.tsx b/src/packages/tabs/src/TabPanels/TabPanels.styled.tsx new file mode 100644 index 0000000..7ea8dbc --- /dev/null +++ b/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; +`; diff --git a/src/packages/tabs/src/TabPanels/TabPanels.tsx b/src/packages/tabs/src/TabPanels/TabPanels.tsx new file mode 100644 index 0000000..1d1a325 --- /dev/null +++ b/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 {children}; +}; diff --git a/src/packages/tabs/src/Tabs.tsx b/src/packages/tabs/src/Tabs.tsx deleted file mode 100644 index cc9a1b0..0000000 --- a/src/packages/tabs/src/Tabs.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import styled from "styled-components"; -import { MyStore } from "../context/myStore"; -import { useStore } from "../context/useStore"; - -export const TabsComponent = styled.div` - display: flex; - flex-direction: column; - gap: 30px; - height: 50vh; -`; - -/* Tabs is wrapper component that holds list of tab topics and - contents for each tab in a different wrapper -*/ - -interface Props { - children?: any; -} - -export const Tabs = ({ children }: Props) => { - const myStore = useStore(); - return ( - // Store provider for hydrating tab content - - {children}; - - ); -}; diff --git a/src/packages/tabs/src/Tabs/Tabs.props.tsx b/src/packages/tabs/src/Tabs/Tabs.props.tsx new file mode 100644 index 0000000..f8d01c2 --- /dev/null +++ b/src/packages/tabs/src/Tabs/Tabs.props.tsx @@ -0,0 +1,3 @@ +export interface TabsProps { + children?: any; +} diff --git a/src/packages/tabs/src/Tabs/Tabs.stories.tsx b/src/packages/tabs/src/Tabs/Tabs.stories.tsx new file mode 100644 index 0000000..72dac40 --- /dev/null +++ b/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; + +const Template: ComponentStory = (args) => ( + + + + One + +

Welcome to Tab 1

+ + + + Two + +

Welcome to Tab 2

+ + + + Three + +

Welcome to Tab 3

+ + + + + + + + +); + +export const ExampleTab = Template.bind({}); diff --git a/src/packages/tabs/src/Tabs/Tabs.styled.tsx b/src/packages/tabs/src/Tabs/Tabs.styled.tsx new file mode 100644 index 0000000..5ae3fa9 --- /dev/null +++ b/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; +`; diff --git a/src/packages/tabs/src/Tabs/Tabs.tsx b/src/packages/tabs/src/Tabs/Tabs.tsx new file mode 100644 index 0000000..cea0733 --- /dev/null +++ b/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 + + {children}; + + ); +}; diff --git a/src/packages/tabs/src/UseCaseTabs.tsx b/src/packages/tabs/src/UseCaseTabs.tsx index d5a0b04..9bc403f 100644 --- a/src/packages/tabs/src/UseCaseTabs.tsx +++ b/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"; diff --git a/src/packages/tabs/stories/tab.stories.tsx b/src/packages/tabs/stories/tab.stories.tsx deleted file mode 100644 index 693da49..0000000 --- a/src/packages/tabs/stories/tab.stories.tsx +++ /dev/null @@ -1 +0,0 @@ -export {} \ No newline at end of file