mainstack-design-system 0.0.2 → 0.0.4

package/README.md

@@ -8,37 +8,47 @@ This is a component library for the Mainstack Design System. It is built with Re
 
 To view the design system documentation, visit this [link](https://mainstack-design-system.vercel.app/).
 
-## Husky
+# Usage
 
-Husky is a git hook manager that allows you to run scripts on git hooks. It is installed as a dev dependency in the project.
+## Components
 
-## Conventional Commits
+Components can be used by importing from the `src/components` directory. For example:
 
-Conventional Commits is a specification for adding human and machine readable meaning to commit messages. It provides an easy set of rules for creating an explicit commit history; which makes it easier to write automated tools on top of. This convention dovetails with [SemVer](https://semver.org), by describing the features, fixes, and breaking changes made in commit messages.
-[more info](https://www.conventionalcommits.org/en/v1.0.0/)
+`import { Button } from 'mainstack-design-system/src/components/Buttons';`
+
+## Icons
 
-## Commitlint
+Icons are imported from the `src/icons` directory. For example:
 
-Commitlint is a tool that checks if your commit messages meet the conventional commit format. It is installed as a dev dependency in the project.
+`import { ArrowRight } from 'mainstack-design-system/src/icons';`
 
-# Vite
+## Colors
 
-Vite is a build tool that serves your code via native ES Module imports during development. It offers instant server start up and fast hot module replacement for rapid feedback. It also bundles your code with Rollup for production.
+Colors are imported from the `mainstack-design-system/src/components/styleGuide` directory. For example:
 
-## Getting Started
+```
+	import Colors from "mainstack-design-system/components/styleGuide/Colors";
+
+	<Text color={Colors.black300}>Hello World</Text>
+```
+
+Conventional Commits is a specification for adding human and machine readable meaning to commit messages. It provides an easy set of rules for creating an explicit commit history; which makes it easier to write automated tools on top of. This convention dovetails with [SemVer](https://semver.org), by describing the features, fixes, and breaking changes made in commit messages.
+[more info](https://www.conventionalcommits.org/en/v1.0.0/)
+
+## Contributing
 
 Installing the application (as a developer) is simple in the following steps:
 
 - Access and Clone this repository
 
 ```git
-git clone git clone https://github.com/The-Mainstack/[repo-name].git && cd [repo-name]
+git clone git clone https://github.com/The-Mainstack/mainstack-design-system.git && cd [repo-name]
 ```
 
 - Make your forked repo the remote upstream (at origin)
 
 ```
-    git remote add origin https://github.com/The-Mainstack/[repo-name].git
+    git remote add origin https://github.com/The-Mainstack/mainstack-design-system.git
 ```
 
 - Navigate into the cloned directory and install dependencies with Yarn
@@ -60,80 +70,14 @@ cp .env.sample .env
 yarn run dev
 ```
 
-## Quick Developer Guide
-
-> It is important to note that we are using best practicees in this project and all rules set down must be followed
-
-- Linting and prettifying rules are already set in the project and they can be accessed in `.prettierrc` and `.eslintrc.json` files respectively
-
-- Make sure there are no linting errors before making your push and PRs
-
-  > Theses linting errors will be displayed in your files and the console accordingly
-
-- All react files must be suffixed with `.tsx` extension for effective import/export flow
-
-> Bonus: setup format:on save so as to effectively apply the prettier rules
-
-- Build the app for production to the `build` folder.
-
-```yarn
-yarn run build
-```
-
-## Contributing.
-
-- Before contributing, ensure you create a branch for a particular feature you'd want to work on, so we wouldn't be having issues of merge conflict
-- You can create a branch this way &mdash; always create a branch off staging;
-
-```git
-  git checkout staging
-  git checkout -b [branch-name]
-```
-
-- Make your changes, add them and make your commits
+To run storybook, run the following command:
 
-```git
-  git commit -m "your message"
 ```
-
-Write good commit messages as this is important to know the essence of your commit
-
-- When you're done with your fixes push to that current branch
-
-```git
-  git push origin [name-of-branch]
+yarn storybook
 ```
 
-- The command above pushes your your commits to the current branch you're in.
-- Then make your Pull Request to the `develop` branch
-
-## Commit Structure
-
-- type: subject e.g body, footer
-
-The title consists of the type of the message and subject.
-The type is contained within the title and can be one of these types:
-
-- feat: a new feature
-
-- fix: a bug fix
-
-- docs: changes to documentation
-
-- style: formatting, missing semi colons, etc; no code change
-
-- refactor: refactoring production code
-
-- test: adding tests, refactoring test; no production code change
-
-An example of a good commit message
+To Publish to NPM, run the following command:
 
 ```
-    feat: Made login check for email and password
+ npm publish --access public
 ```
-
-## notes
-
-- to use env variables in vite, you need to prefix them with `import.meta.env.`. For example, `process.env.REACT_APP_BASE_URL` becomes `import.meta.env.REACT_APP_BASE_URL`.
-
-> Happy Hacking !!!

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mainstack-design-system",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -9,7 +9,7 @@
     "format": "prettier src -c --write && pretty-quick --staged",
     "lint": "eslint src --ext .js,.jsx,.ts,.tsx --quiet --fix",
     "ts-error": "tsc",
-		"install:husky": "[ ! -d \"/node_modules/husky/\" ] || husky install",
+    "install:husky": "[ ! -d \"/node_modules/husky/\" ] || husky install",
     "postinstall": "yarn install:husky",
     "prepare": "yarn install:husky",
     "scriptname": "cmd",

package/src/components/InputFields/MarkdownEditor.tsx

@@ -133,7 +133,7 @@ const CustomToolbar = ({
   );
 };
 
-export const MarkdownEditor = ({
+const MarkdownEditor = ({
   defaultValue,
   onChange,
   border,
@@ -244,3 +244,5 @@ export const MarkdownEditor = ({
     </Box>
   );
 };
+
+export default MarkdownEditor;

package/src/components/index.ts

@@ -0,0 +1,33 @@
+/** @format */
+
+export { default as Button } from "./Button";
+export { default as IconButton } from "./Button/IconButton";
+export { default as Accordion } from "./Accordion";
+export { default as Avatars } from "./Avatars";
+export { default as Chip } from "./controls/Chip";
+export { default as DoubleTab } from "./controls/DoubleTab";
+export { default as Pagination } from "./controls/Pagination";
+export { default as RadioButton } from "./controls/RadioButton";
+export { default as RectangleCheckButton } from "./controls/RectangleCheckButton";
+export { default as RoundCheckButton } from "./controls/RoundCheckButton";
+export { default as Stepper } from "./controls/Stepper";
+export { default as TabMenu } from "./controls/TabMenu";
+export { default as ToggleButton } from "./controls/ToggleButton";
+export * from "./InputFields/SelectInput";
+export { default as Input } from "./InputFields/Input";
+export { default as MarkdownEditor } from "./InputFields/MarkdownEditor";
+export { default as SearchInput } from "./InputFields/SearchInput";
+export { default as TextArea } from "./InputFields/TextArea";
+export { default as UsernameInput } from "./InputFields/UsernameInput";
+export { default as Banner } from "./notifications/Banner";
+export { default as ClickTooltip } from "./notifications/ClickTooltip";
+export { default as HoverTooltip } from "./notifications/HoverTooltip";
+export { default as Snackbar } from "./notifications/Snackbar";
+export { default as Colors } from "./styleGuide/Colors";
+export { default as Tiles } from "./Tiles";
+export { default as Display } from "./Typography/Display";
+export { default as Heading } from "./Typography/Heading";
+export { default as Paragraph } from "./Typography/Paragraph";
+export { default as Subtitle } from "./Typography/Subtitle";
+export { default as FileUploader } from "./Uploader/FileUploader";
+export { default as ImageUploader } from "./Uploader/ImageUploader";

package/src/index.ts

@@ -0,0 +1,4 @@
+/** @format */
+
+export * from "./components";
+export * from "./icons";

package/src/pages/Home.tsx

@@ -1,7 +1,7 @@
 /** @format */
 
 import { Box, Text } from "@chakra-ui/react";
-import { MarkdownEditor } from "components/InputFields/MarkdownEditor";
+import { Button, MarkdownEditor } from "components";
 import CountrySelectWrapper from "stories/InputFields/Select/CountrySelectWrapper";
 import PhoneNumberInputWrapper from "stories/InputFields/Select/PhoneNumberInputWrapper";
 import SelectWrapper from "stories/InputFields/Select/SelectWrapper";

package/vite.config.ts

@@ -5,6 +5,7 @@ import react from "@vitejs/plugin-react";
 import viteTsconfigPaths from "vite-tsconfig-paths";
 import svgrPlugin from "vite-plugin-svgr";
 import envCompatible from "vite-plugin-env-compatible";
+import { resolve } from "path";
 
 export default defineConfig({
   envPrefix: "REACT_APP_",
@@ -20,6 +21,9 @@ export default defineConfig({
   },
   build: {
     outDir: "build",
+    lib: {
+      entry: resolve(__dirname, "./src/index.ts"),
+    },
     commonjsOptions: {
       transformMixedEsModules: true,
     },