pixel-react 1.0.0

package/src/utils/ffID/ffID.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ffid from './ffid'; // Adjust the import path if needed
+import { useState } from 'react';
+
+const meta: Meta<typeof ffid> = {
+  title: 'Utils/ffid',
+  component: ffid,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj;
+
+// Primary story to display a generated ID
+export const Primary: Story = {
+  render: () => {
+    const [generatedId, setGeneratedId] = useState(ffid());
+
+    const regenerateId = () => {
+      setGeneratedId(ffid());
+    };
+
+    return (
+      <div>
+        <h3>Generated Unique ID</h3>
+        <p>{generatedId}</p>
+        <button onClick={regenerateId}>Generate New ID</button>
+      </div>
+    );
+  },
+};
+
+export default meta;

package/src/utils/ffID/ffid.ts

@@ -0,0 +1,9 @@
+const ffid = (): string =>
+  'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (char) =>
+    (
+      (char === 'x' ? Math.random() * 16 : ((Math.random() * 16) & 0x3) | 0x8) |
+      0
+    ).toString(16)
+  );
+
+export default ffid;

package/src/utils/getExtension/getExtension.stories.tsx

@@ -0,0 +1,23 @@
+import { getExtension } from './getExtension';
+
+export default {
+  title: 'Utils/getExtension',
+  component: getExtension,
+};
+
+export const Default = () => {
+  const testCases = [
+    { value:  'test.txt', expected: 'txt' },
+  ];
+
+  return (
+    <div>
+      {testCases.map((test, index) => (
+        <div key={index}>
+          getExtension( {JSON.stringify(test.value)} ) -
+          {getExtension(test.value) ? 'True' : 'False'}
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/utils/getExtension/getExtension.ts

@@ -0,0 +1,28 @@
+type valueType = File | string;
+
+export const getExtension = (value: valueType) => {
+  if (typeof value === 'string' && value.includes('.')) {
+    const extension = value.split('.').pop();
+    return extension !== value ? extension : '';
+  }
+
+  if (value instanceof File) {
+    return value.name.split('.').pop();
+  }
+
+  return '';
+};
+
+export const getExtensionWithPeriod = (value: valueType) => {
+  if (typeof value === 'string' && value.includes('.')) {
+    const extension = value.slice(value.lastIndexOf('.'));
+    return extension !== value ? extension : '';
+  }
+
+  if (value instanceof File) {
+    const extensionIndex = value.name.lastIndexOf('.');
+    return extensionIndex !== -1 ? value.name.slice(extensionIndex) : '';
+  }
+
+  return '';
+};

package/src/utils/truncateText/truncateText.stories.tsx

@@ -0,0 +1,37 @@
+import { truncateText } from './truncateText';
+
+export default {
+  title: 'Utils/truncateText',
+  component: truncateText,
+};
+
+export const Default = () => {
+  const testCases = [
+    {
+      text: 'This is a placeholder text that might be too long',
+      maxLength: 25,
+      expected: 'This is a placeholder text...',
+    },
+    { text: 'Short text', maxLength: 25, expected: 'Short text' },
+    { text: 'Another example', maxLength: 10, expected: 'Another ex...' },
+    { text: 'Testing with a long text', maxLength: 5, expected: 'Testi...' },
+    { text: '', maxLength: 10, expected: '' },
+    {
+      text: 'Exactly twenty-five chars!',
+      maxLength: 25,
+      expected: 'Exactly twenty-five chars!',
+    }, 
+  ];
+
+  return (
+    <div>
+      {testCases.map((test, index) => (
+        <div key={index}>
+          truncateText({JSON.stringify(test.text)}, {test.maxLength}) -
+          Expected: {test.expected}, Result:{' '}
+          {truncateText(test.text, test.maxLength)}
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/utils/truncateText/truncateText.ts

@@ -0,0 +1,4 @@
+export const truncateText = (text: string, maxLength: number): string => {
+  if (!text || maxLength <= 0) return ''; 
+  return text.length > maxLength ? `${text.substring(0, maxLength)}...` : text;
+};

package/tsconfig.json

@@ -0,0 +1,55 @@
+{
+  "compilerOptions": {
+    /* Language and Environment */
+    "target": "esnext" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
+    "jsx": "react-jsx" /* Specify what JSX code is generated. */,
+
+    /* Modules */
+    "module": "ESNext" /* Specify what module code is generated. */,
+    "moduleResolution": "Node" /* Specify how TypeScript looks up a file from a given module specifier. */,
+
+    /* JavaScript Support */
+    "allowJs": false /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */,
+    "maxNodeModuleJsDepth": 1 /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */,
+
+    /* Emit */
+    "declaration": true /* Generate .d.ts files from TypeScript and JavaScript files in your project. */,
+    // "emitDeclarationOnly": true /* Only output d.ts files and not JavaScript files. */,
+    "sourceMap": true /* Create source map files for emitted JavaScript files. */,
+    "outDir": "lib" /* Specify an output folder for all emitted files. */,
+    "declarationDir": "lib" /* Specify the output directory for generated declaration files. */,
+
+    /* Interop Constraints */
+    "allowSyntheticDefaultImports": true /* Allow 'import x from y' when a module doesn't have a default export. */,
+    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
+    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
+
+    /* Type Checking */
+    "strict": true /* Enable all strict type-checking options. */,
+    "noUnusedLocals": true /* Enable error reporting when local variables aren't read. */,
+    "noUnusedParameters": true /* Raise an error when a function parameter isn't read. */,
+    "noImplicitReturns": true /* Enable error reporting for codepaths that do not explicitly return in a function. */,
+    "noFallthroughCasesInSwitch": true /* Enable error reporting for fallthrough cases in switch statements. */,
+    "noUncheckedIndexedAccess": true /* Add 'undefined' to a type when accessed using an index. */,
+    "allowUnreachableCode": false /* Disable error reporting for unreachable code. */,
+
+    /* Completeness */
+    "skipLibCheck": true /* Skip type checking all .d.ts files. */,
+    "types": ["vite-plugin-svgr/client"],
+    "noEmit": true,
+
+    //Able to import json file with alias name
+    "resolveJsonModule": true,
+
+    // Path alias
+    // "paths": {
+    //   "@components": ["./src/components/"],
+    //   "@styles": ["./src/assets/styles/"],
+    //   "@icons": ["./src/assets/icons/"],
+    //   "@/*": ["./src/*"]
+    // }
+  },
+
+  "include": ["src"],
+  "exclude": ["node_modules", "lib"]
+}

package/vite.config.js

@@ -0,0 +1,30 @@
+import react from '@vitejs/plugin-react';
+import path from 'path';
+import svgrPlugin from 'vite-plugin-svgr';
+
+export default {
+  plugins: [
+    react(),
+    svgrPlugin({
+      svgrOptions: {
+        icon: true,
+      },
+    }),
+  ],
+
+  // resolve: {
+  //   alias: {
+  //     '@components': path.resolve(__dirname, './src/components'),
+  //     '@styles': path.resolve(__dirname, './src/assets/styles'),
+  //     '@icons': path.resolve(__dirname, './src/assets/icons'),
+  //   },
+  // },
+
+  // css: {
+  //   preprocessorOptions: {
+  //     scss: {
+  //       additionalData: `@import "./src/assets/styles/_colors.scss";`,
+  //     },
+  //   },
+  // },
+};