Remove eval (#146)

* Revamp Storybook & Project

* Improvements to Storybook

* - Add stories
- Deploy Storybook to GH Pages on Push

* fix build storybook command

* fix build storybook command

* - Reorganize storybook
- Remove text prop from Accordion

* fixes

* fix package-lock.json

* refactor: remove use of eval and replace with direct implementation to improve CSP compliance

* Fix lint

---------

Co-authored-by: Ashwin Shenoy <aswinshenoy65@gmail.com>

.github/workflows/deploy_storybook.yaml

@@ -0,0 +1,34 @@
+name: 'Build & Deploy Storybook on GitHub Pages'
+
+on:
+  push:
+    branches:
+      - 'main'
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+      - name: Install modules
+        run: npm install --ignore-platform
+      - name: Build storybook
+        run: npm run build-storybook
+      - name: Upload Artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: storybook-static
+      - name: Deploy to GitHub Pages
+        uses: actions/deploy-pages@v4
+        with:
+          token: ${{ github.token }}

.gitignore

@@ -4,4 +4,5 @@ node_modules
 .cache
 dist
 .idea/
-storybook-static
+storybook-static
+*storybook.log

.storybook/ThemeProvider/index.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+import ChayaProvider from "../../src/components/ChayaProvider";
+
+import './styles.css';
+
+const ThemeProvider = ({ children, isDarkTheme }: { children: React.ReactNode, isDarkTheme: boolean }) => (
+  <React.Fragment>
+    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet"/>
+    <link rel="preconnect" href="https://fonts.googleapis.com"/>
+    <link
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&family=Poppins:wght@600&display=swap"
+      rel="stylesheet"
+    />
+    <ChayaProvider isDarkTheme={isDarkTheme}>
+      {children}
+    </ChayaProvider>
+  </React.Fragment>
+);
+
+export default ThemeProvider;

.storybook/ThemeProvider/styles.css

@@ -0,0 +1,8 @@
+.css-1ofkq6d {
+    height: 0!important;
+    width: 0!important;
+}
+
+.css-1wmxdc3>*>* {
+    width: 180px!important;
+}

.storybook/decorators.tsx

@@ -1,10 +1,25 @@
 import React from "react";
-import ThemeContextDecorator from "./utils/ThemeContextDecorator";
+import {nanoid} from "nanoid";
+import { useDarkMode } from 'storybook-dark-mode';
+
+import '../dist/style.css';
+
+import ThemeProvider from "./ThemeProvider";
+
+export const withTheme = () => {
+  return (story: any) => {
+    const isDarkMode = useDarkMode();
+
+    return (
+      <div key={nanoid()} className="p-6 dark:text-white">
+        <ThemeProvider isDarkTheme={isDarkMode}>
+          {story()}
+        </ThemeProvider>
+      </div>
+    );
+  };
+};
 
 export const decorators = [
-    (Story: any) => (
-        <ThemeContextDecorator>
-            <Story />
-        </ThemeContextDecorator>
-    ),
+  withTheme(),
 ];

.storybook/main.ts

@@ -0,0 +1,28 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: [
+    "../stories/introduction.mdx",
+    "../stories/getting-started/*.mdx",
+    "../stories/features/*.mdx",
+    "../stories/components/**/*.@(mdx|js|jsx|mjs|ts|tsx)",
+    "../src/components/**/**/stories/*.@(mdx|js|jsx|mjs|ts|tsx)",
+    "../stories/hooks/**/*.@(mdx|js|jsx|mjs|ts|tsx)",
+  ],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/addon-links",
+    '@storybook/addon-a11y',
+    "@storybook/addon-viewport",
+    "@storybook/addon-storysource",
+    "@storybook/addon-docs",
+    "storybook-dark-mode"
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+};
+export default config;

.storybook/manager-head.html

@@ -0,0 +1,2 @@
+<link rel="shortcut icon" href="/favicon.ico">
+<link rel="icon" type="image/png" href="/favicon.svg" sizes="192x192">

.storybook/manager.css

@@ -0,0 +1,8 @@
+.sidebar-item svg {
+    color: inherit;
+}
+
+#storybook-preview-iframe {
+    background: var(--background);
+    color: var(--color);
+}

.storybook/manager.js

@@ -1,4 +1,5 @@
 import { addons } from '@storybook/manager-api';
+import './manager.css';
 
 addons.setConfig({
     isFullscreen: false,
@@ -9,7 +10,7 @@ addons.setConfig({
     showToolbar: true,
     initialActive: 'sidebar',
     sidebar: {
-        showRoots: false,
+        showRoots: true,
         collapsedRoots: ['other'],
         filters: {
             patterns: (item) => {

.storybook/preview-head.html

@@ -0,0 +1,32 @@
+<style>
+    body,
+    .sbdocs p,
+    .sbdocs li,
+    .sbdocs {
+        -webkit-font-smoothing: initial !important;
+        font-family: 'IBM Plex Sans', sans-serif;
+    }
+
+    .sbdocs h1,
+    .sbdocs h2,
+    .sbdocs h3,
+    .sbdocs h4,
+    .sbdocs h5,
+    .sbdocs h6,
+    .sbdocs-title {
+        -webkit-font-smoothing: initial !important;
+        font-family: 'Poppins', sans-serif;
+    }
+    .sbdocs p {
+        text-align: justify;
+    }
+    .toc-list-item {
+        font-size: 12px!important;
+    }
+    .sbdocs p,
+    .sbdocs li,
+    .sbdocs .sbdocs-a {
+        font-size: 16px;
+        line-height: 1.5;
+    }
+</style>