pixel-react 1.0.7 → 1.0.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pixel-react",
   "description": "Great for pixel-perfect, design-focused components in React",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",

package/src/components/GridLayout/GridLayout.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Container, Row, Col } from './GridLayout';
-import './GridLayoutStory.scss'
+import './GridLayoutStory.scss';
 
 const meta: Meta<typeof Container> = {
   title: 'Components/GridLayout',
@@ -27,31 +27,21 @@ export const Grid: ContainerStory = {
       <Container {...args}>
         <Row>
           <Col size={4}>
-            <div className='one'>
-              Column 1
-            </div>
+            <div className="one">Column 1</div>
           </Col>
           <Col size={4}>
-            <div className='two'>
-              Column 2
-            </div>
+            <div className="two">Column 2</div>
           </Col>
           <Col size={4}>
-            <div className='three'>
-              Column 3
-            </div>
+            <div className="three">Column 3</div>
           </Col>
         </Row>
         <Row>
           <Col size={6}>
-            <div className='four'>
-              Column 4
-            </div>
+            <div className="four">Column 4</div>
           </Col>
           <Col size={6}>
-            <div className='five'>
-              Column 5
-            </div>
+            <div className="five">Column 5</div>
           </Col>
         </Row>
       </Container>
@@ -67,57 +57,29 @@ export const Grid2: ContainerStory = {
       <Container {...args}>
         <Row gap="20px">
           <Col size={3}>
-            <div
-              className='one'
-            >
-              Column 1 (size 3)
-            </div>
+            <div className="one">Column 1 (size 3)</div>
           </Col>
           <Col size={6}>
-            <div
-              className='two'
-            >
-              Column 2 (size 6)
-            </div>
+            <div className="two">Column 2 (size 6)</div>
           </Col>
           <Col size={3}>
-            <div
-              className='three'
-            >
-              Column 3 (size 3)
-            </div>
+            <div className="three">Column 3 (size 3)</div>
           </Col>
         </Row>
         <Row gap="10px">
           <Col size={4}>
-            <div
-              className='four'
-            >
-              Column 4 (size 4)
-            </div>
+            <div className="four">Column 4 (size 4)</div>
           </Col>
           <Col size={4}>
-            <div
-              className='five'
-            >
-              Column 5 (size 4)
-            </div>
+            <div className="five">Column 5 (size 4)</div>
           </Col>
           <Col size={4}>
-            <div
-              className='one'
-            >
-              Column 6 (size 4)
-            </div>
+            <div className="one">Column 6 (size 4)</div>
           </Col>
         </Row>
         <Row gap="15px">
           <Col size={12}>
-            <div
-              className='two'
-            >
-              Full-width column (size 12)
-            </div>
+            <div className="two">Full-width column (size 12)</div>
           </Col>
         </Row>
       </Container>

package/src/components/GridLayout/GridLayout.tsx

@@ -2,29 +2,31 @@
 import React from 'react';
 import './GridLayout.scss';
 import { ContainerProps, RowProps, ColProps } from './types';
+import cx from 'classnames'
 
 export const Container: React.FC<ContainerProps> = ({
   children,
   fluid = false,
   gap = '0px',
+  className=''
 }) => {
-  const className = fluid ? 'ff-container-fluid' : 'ff-container';
+  const containerClassName = fluid ? 'ff-container-fluid' : 'ff-container';
   return (
-    <div className={className} style={{ gap }}>
+    <div className={cx(containerClassName,className)} style={{ gap }}>
       {children}
     </div>
   );
 };
 
-export const Row: React.FC<RowProps> = ({ children, gap = '0px' }) => {
+export const Row: React.FC<RowProps> = ({ children, gap = '0px',className='' }) => {
   return (
-    <div className="ff-row" style={{ gap }}>
+    <div className={cx("ff-row",className)} style={{ gap }}>
       {children}
     </div>
   );
 };
 
-export const Col: React.FC<ColProps> = ({ children, size = 12 }) => {
-  const className = `ff-col-${size}`;
-  return <div className={className}>{children}</div>;
+export const Col: React.FC<ColProps> = ({ children, size = 12,className='' }) => {
+  const colClassName = `ff-col-${size}`;
+  return <div className={cx(colClassName,className)}>{children}</div>;
 };

package/src/components/GridLayout/types.ts

@@ -25,6 +25,13 @@ export interface ContainerProps {
    * @type {string}
    */
   gap?: string;
+
+  /**
+   * Classname for Container
+   * @default ''
+   * @type {string}
+   */
+  className?:string
 }
 
 export interface RowProps {
@@ -43,6 +50,12 @@ export interface RowProps {
    * @type {string}
    */
   gap?: string;
+
+  /**
+   * @default ''
+   * @type string
+   */
+  className?:string
 }
 
 export interface ColProps {
@@ -61,4 +74,11 @@ export interface ColProps {
    * @type {number}
    */
   size?: number;
+
+  /**
+   * @default  ''
+   * @type string
+   * 
+   */
+  className?: string;
 }

package/lib/components/ThemeProvider/CustomThemeProvider.d.ts

@@ -1,8 +0,0 @@
-import React, { ReactNode } from 'react';
-import { ThemeContextType } from './types';
-declare const ThemeContext: React.Context<ThemeContextType | undefined>;
-declare const CustomThemeProvider: React.FC<{
-    children: ReactNode;
-}>;
-export { ThemeContext };
-export default CustomThemeProvider;

package/lib/hooks/useCustomThemeProvider.d.ts

@@ -1,11 +0,0 @@
-import React, { ReactNode } from 'react';
-interface ThemeContextType {
-    currentTheme: string;
-    setCurrentTheme: React.Dispatch<React.SetStateAction<string>>;
-    applyTheme: (newTheme: string) => void;
-}
-export declare const useCustomThemeProvider: React.FC<{
-    children: ReactNode;
-}>;
-export declare const useTheme: () => ThemeContextType;
-export {};