@banyan_cloud/roots 1.0.0 → 1.0.2

package/styles/style-system/ComponentsFormat.stories.mdx

@@ -0,0 +1,30 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title='Style System/Component Format' parameters={{ options: { showToolbar: false } }} />
+
+# Component Format
+
+We are using below format for each components
+
+-   `componentName.stories.mdx` - Will have Story about the respective component with all possible use cases
+
+-   `ComponentName.module.scss` - Styles related to perticular components, detail Descriptions is available under <a href='?path=/story/style-system-styles--page'>Styles</a> folders in storybook
+
+-   `ComponentName.jsx` - JSX stands for JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React.
+    Need to import global config and utils if is common in .jsx file, else create a unique config and utils folders to specific components.
+
+-   `Config` - Folders has data of respective component, eg: used in charts
+
+-   `Utils` - Unique functions related to the components
+
+-   `index.js` - It simplifies the imports because `index.js` file which imports the actual component itself, Find the example below:
+
+    **with Index.js**
+
+    > import Component from '../Component';
+    >
+
+    **without index.js** If you did not have an index.js file you would have had to do this to acess the file:
+
+    > import Editable from '../ComponentFolder/ComponetJsx';
+    > 

package/styles/style-system/Design.stories.mdx

@@ -0,0 +1,19 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title='Style System/Designs' parameters={{ options: { showToolbar: false } }} />
+
+# Design Descriptions
+
+We are using [Figma](https://www.figma.com/) for our creating a Mock-ups/Prototype
+
+-   [Templates](https://www.designedbyalok.com/links/) - Use cases of all components
+
+-   [Typography](https://www.figma.com/file/kKEE3r3h9OcHuhs0vnwMG9/Colors-%26-Typography?node-id=4%3A3) - It has all information about typefaces fonts: italic, oblique, and small caps of fonts/styles
+
+-   [Theme/Color](https://www.figma.com/file/kKEE3r3h9OcHuhs0vnwMG9/Colors-%26-Typography?node-id=0%3A1) - Holds information about Colours of our Brand
+
+-   [Components List](https://www.figma.com/files/drafts?fuid=1103974723664924599) - Atomic components for building the page
+
+-   [Assets](https://www.figma.com/file/kKEE3r3h9OcHuhs0vnwMG9/Colors-%26-Typography?node-id=34%3A92) - It has all the icons we are using in entire projects
+
+-   [Features](https://www.designedbyalok.com/links/) - Prototype of a features

package/styles/style-system/Style.stories.mdx

@@ -0,0 +1,110 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title='Style System/Styles' parameters={{ options: { showToolbar: false } }} />
+
+# Style Guidelines
+
+We are using [CSS Modules](https://github.com/css-modules/css-modules) in which all class names and animation names are scoped locally by default.
+
+**Why we are using [CSS Modules](https://css-tricks.com/css-modules-part-1-need/)**
+
+-   ` No conflicts` as its Only apply to that component and nothing elsewhere, this approach is designed to fix the `problem of the global scope` in CSS and has `Explicit dependencies`
+
+-   React lets you split the UI into `independent` and `reusable components`, which allows you to update small parts of your UI without refreshing the page.
+
+As React applications grow, the amount of components and layers increases. Simple style changes can have unintended side effects on different parts of a complex page.
+
+CSS modules give you the ability to `control your element styles` in a more granular way. They allow you to build different layers of styles while building your application using a modular approach. CSS modules make it easy and fast to achieve tasks such as upgrading buttons, headings, grids, etc.
+
+## Naming
+
+For local class names `camelCase` naming is recommended, but not enforced. You can still work around `kebab-case` with bracket notation
+
+> eg. style['class-name']) or style.className
+
+## Steps for writing the styles
+
+1.  **Style File**
+
+    -   Create a Style file for any component in `componentName.module.scss` format
+    -   Inport global `style` eg. mixin etc
+
+        > @import '../../assets/styles/index';
+
+    -   Add Scss as per requirement
+
+    ```cli
+        @import '../../assets/styles/index';
+
+        .container {
+        @include flex(row, flex-start, center);
+        width: auto;
+        height: 3.5rem;
+            .breadcrumb-item-title {
+            @include flex(row, flex-start, center);
+            font-weight: 600;
+            font-size: 24px;
+            color: #001833;
+            }
+            .breadcrumb-item {
+            @include flex(row, flex-start, center);
+            font-weight: 500;
+            font-size: 20px;
+            color: #003ecb;
+            }
+        }
+    ```
+
+2.  **Jsx file**
+
+    -   Create a `.jsx` file for any component
+    -   Import styles from css modules
+
+        > import styles from './componentName.module.css';
+        >
+
+        Note we will write the styles in `.scss` file only but while importing we will import respective `.css` file,
+        because we will compile `.scss` file to `.css` file with the help of sass compiler
+
+    -   Import Global class function from `utils` file
+
+        > import { classes } from '../../utils';
+        >
+
+    -   In className, define style in any of these format
+        > _style['class-name'])_ or _style.className_.
+
+```cli
+import React from 'react';
+import { Breadcrumbs } from '@mui/material';
+import Link from '@mui/material/Link';
+import styles from './Breadcrumbs.module.css';
+import { BreadcrumbSeperatorIcon } from '../../assets/vectors/common';
+import { getSpacedDisplayName, classes } from '../../utils/utils';
+
+const BreadCrumbs = ({ crumbs }) => {
+	return (
+		<div className={classes(styles.container)}>
+			<Breadcrumbs
+				separator={<BreadcrumbSeperatorIcon width='7' height='9' color='#001833' />}
+				aria-label='breadcrumb'>
+				{crumbs.map((crumb, index) => {
+					return (
+						<Link href=' ' key={crumb} underline='none'>
+							<span
+								className={classes(
+									index === 0
+										? styles['breadcrumb-item-title']
+										: styles['breadcrumb-item']
+								)}>
+								{getSpacedDisplayName(crumb).replace(/-/g, ' ')}
+							</span>
+						</Link>
+					);
+				})}
+			</Breadcrumbs>
+		</div>
+	);
+};
+
+```