workflow build test

.changeset/quiet-bobcats-build.md

@@ -0,0 +1,5 @@
+---
+'@crossed/ui': patch
+---
+
+tabs indicator wrong style type

.github/workflows/doc-build.yml

@@ -25,11 +25,7 @@ jobs:
       - name: Install dependencies
         run: pnpm install
       - name: Build
-        run: pnpm build
-      - name: Linter
-        run: pnpm lint
-      - name: Build
-        run: pnpm -F crossed-doc build-storybook
+        run: pnpm turbo run build --filter=crossed-doc
       # 👆 Build steps
       - name: Setup Pages
         uses: actions/configure-pages@v1

apps/doc/.storybook/main.ts

@@ -2,6 +2,7 @@ import type { StorybookConfig } from '@storybook/react-webpack5';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import StylePlugin from '@crossed/webpack';
 import webpack from 'webpack';
+import path from "path"
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
@@ -49,6 +50,7 @@ const config: StorybookConfig = {
       new StylePlugin({
         configPath: './src/style.config.ts',
         level: 'debug',
+        out: path.resolve(__dirname, '../storybook-static')
       }),
     ];
     config.module.rules.push({

apps/doc/.storybook/preview-head.html

@@ -0,0 +1 @@
+<link rel="stylesheet" href="crossed.css" />

apps/doc/.storybook/preview.tsx

@@ -1,9 +1,13 @@
 import '../src/style.config';
-import './style.css';
 import * as React from 'react';
 import type { Preview } from '@storybook/react';
 import { PortalProvider } from '@gorhom/portal';
 
+if (process.env.NODE_ENV === 'development') {
+  // @ts-expect-error
+  import('./style.css');
+}
+
 const preview: Preview = {
   parameters: {
     controls: {

apps/doc/package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "storybook dev -p 6006",
-    "build": "tsc -b && vite build",
+    "build": "storybook build",
     "lint": "eslint .",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",

apps/doc/src/@crossed-ui/Tabs.stories.tsx

@@ -0,0 +1,123 @@
+/**
+ * Copyright (c) Paymium.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root of this projects source tree.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+// import { fn } from '@storybook/test';
+
+import { Tabs } from '@crossed/ui/src/disclosure/Tabs';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta: Meta<typeof Tabs> = {
+  title: '@crossed⁄ui/Tabs',
+  component: Tabs,
+  subcomponents: {
+    'Tabs.List': Tabs.List,
+    'Tabs.Panels': Tabs.Panels,
+    'Tabs.Tab': Tabs.Tab,
+    'Tabs.Tab.Text': Tabs.Tab.Text,
+    'Tabs.Panel': Tabs.Panel,
+    'Tabs.Indicator': Tabs.Indicator,
+  },
+  // parameters: { layout: 'centered' },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['rounded', 'underline'],
+    },
+  },
+  render: (e) => {
+    return (
+      <Tabs defaultValue="tab1" {...e}>
+        <Tabs.List>
+          <Tabs.Indicator />
+          <Tabs.Tab value="tab1">
+            <Tabs.Tab.Text>Tab 1</Tabs.Tab.Text>
+          </Tabs.Tab>
+          <Tabs.Tab value="tab2">
+            <Tabs.Tab.Text>Tab 2</Tabs.Tab.Text>
+          </Tabs.Tab>
+          <Tabs.Tab value="tab3">
+            <Tabs.Tab.Text>Tab 3</Tabs.Tab.Text>
+          </Tabs.Tab>
+        </Tabs.List>
+        <Tabs.Panel value="tab1">Content tab 1</Tabs.Panel>
+        <Tabs.Panel value="tab2">Content tab 2</Tabs.Panel>
+        <Tabs.Panel value="tab3">Content tab 3</Tabs.Panel>
+      </Tabs>
+    );
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Tabs>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Rounded: Story = {
+  args: { variant: 'rounded' },
+};
+export const Underline: Story = {
+  args: { variant: 'rounded' },
+};
+
+export const RoundedArrow: Story = {
+  args: { variant: 'rounded' },
+  render: (e) => {
+    return (
+      <Tabs defaultValue="tab1" {...e}>
+        <Tabs.List>
+          <Tabs.Indicator />
+          <Tabs.Tab value="tab1">
+            <Tabs.Tab.Text>Lorem ipsum odor amet</Tabs.Tab.Text>
+          </Tabs.Tab>
+          <Tabs.Tab value="tab2">
+            <Tabs.Tab.Text>consectetuer adipiscing elit</Tabs.Tab.Text>
+          </Tabs.Tab>
+          <Tabs.Tab value="tab3">
+            <Tabs.Tab.Text>magna eleifend tortor</Tabs.Tab.Text>
+          </Tabs.Tab>
+          <Tabs.Tab value="tab4">
+            <Tabs.Tab.Text>Nec in ipsum</Tabs.Tab.Text>
+          </Tabs.Tab>
+          <Tabs.Tab value="tab5">
+            <Tabs.Tab.Text>sapien netus</Tabs.Tab.Text>
+          </Tabs.Tab>
+          <Tabs.Tab value="tab6">
+            <Tabs.Tab.Text>Tab 6</Tabs.Tab.Text>
+          </Tabs.Tab>
+          <Tabs.Tab value="tab7">
+            <Tabs.Tab.Text>Tab 7</Tabs.Tab.Text>
+          </Tabs.Tab>
+          <Tabs.Tab value="tab8">
+            <Tabs.Tab.Text>Tab 8</Tabs.Tab.Text>
+          </Tabs.Tab>
+          <Tabs.Tab value="tab9">
+            <Tabs.Tab.Text>Tab 9</Tabs.Tab.Text>
+          </Tabs.Tab>
+          <Tabs.Tab value="tab10">
+            <Tabs.Tab.Text>Tab 10</Tabs.Tab.Text>
+          </Tabs.Tab>
+        </Tabs.List>
+        <Tabs.Panel value="tab1">Content tab 1</Tabs.Panel>
+        <Tabs.Panel value="tab2">Content tab 2</Tabs.Panel>
+        <Tabs.Panel value="tab3">Content tab 3</Tabs.Panel>
+        <Tabs.Panel value="tab4">Content tab 4</Tabs.Panel>
+        <Tabs.Panel value="tab5">Content tab 5</Tabs.Panel>
+        <Tabs.Panel value="tab6">Content tab 6</Tabs.Panel>
+        <Tabs.Panel value="tab7">Content tab 7</Tabs.Panel>
+        <Tabs.Panel value="tab8">Content tab 8</Tabs.Panel>
+        <Tabs.Panel value="tab9">Content tab 9</Tabs.Panel>
+        <Tabs.Panel value="tab10">Content tab 10</Tabs.Panel>
+      </Tabs>
+    );
+  },
+};
+
+export const UnderlineArrow: Story = {
+  ...RoundedArrow,
+  args: { variant: 'underline' },
+};

packages/loader/src/index.ts

@@ -40,7 +40,7 @@
     format: 'cjs',
     target: 'node14',
   });
   // eslint-disable-next-line no-eval
   return codeBuild;
 };
 
@@ -165,7 +165,7 @@
       ...this.fileCache.values(),
       ...this.css.split(/\r?\n/),
     ]);
-    const { media, hover, focus, active, other } = values.reduce(
+    const { media, hover, focus, active, other, theme } = values.reduce(
       (acc, e) => {
         if (
           !acc.media.includes(e) &&
@@ -182,6 +182,8 @@
             acc.focus.push(e);
           } else if (e.startsWith('.hover')) {
             acc.hover.push(e);
+          } else if (e.startsWith('.dark') || e.startsWith('.light')) {
+            acc.theme.push(e);
           } else {
             acc.other.push(e);
           }
@@ -194,9 +196,11 @@
         focus: [],
         active: [],
         other: [],
+        theme: [],
       }
     );
     return [
+      theme,
       other,
       hover,
       focus,
@@ -211,6 +215,7 @@
       }),
     ]
       .flat(Infinity)
+      .filter((value, index, array) => array.indexOf(value) === index)
       .join('\n');
   }
 

packages/ui/src/disclosure/Tabs.tsx

@@ -603,7 +603,7 @@ export const createTabs = () => {
     ) : null;
   };
 
-  const Indicator = ({ style }: { style: CrossedMethods<any> }) => {
+  const Indicator = ({ style }: { style?: CrossedMethods<any> }) => {
     const { variant, indicator } = useTabsContext();
     const indicatorStyle =
       variant === 'rounded' ? indicatorRoundedStyles : indicatorUnderlineStyles;

packages/webpack/src/index.ts

@@ -19,6 +19,7 @@ export type StylePluginOptions = {
   level?: string;
   isServer?: boolean;
   isWatch?: boolean;
+  out?: string;
 };
 
 let parseAst: Loader;
@@ -40,7 +41,8 @@ export default class StylePlugin {
     if (css) {
       virtualModules.writeModule('node_modules/crossed.css', css);
 
-      const pathCss = path.resolve(process.cwd(), '.crossed');
+      const pathCss =
+        this.options.out ?? path.resolve(process.cwd(), '.crossed');
 
       try {
         statSync(pathCss);
@@ -71,7 +73,7 @@ export default class StylePlugin {
     const virtualModules = new VirtualModulesPlugin();
     virtualModules.apply(compiler);
 
-    const pathCss = path.resolve(process.cwd(), '.crossed');
+    const pathCss = this.options.out ?? path.resolve(process.cwd(), '.crossed');
 
     let css = '';
     try {
@@ -177,7 +179,6 @@ export default class StylePlugin {
       } else {
         compilation.hooks.normalModuleLoader.tap(pluginName, tapCallback);
       }
-      this.writeCss(virtualModules);
     });
 
     /**
@@ -186,5 +187,15 @@ export default class StylePlugin {
     compiler.hooks.afterCompile.tap(pluginName, () => {
       this.writeCss(virtualModules);
     });
+
+    /**
+     * Load at run css
+     */
+    compiler.hooks.beforeCompile.tap(pluginName, () => {
+      virtualModules.writeModule(
+        'node_modules/crossed.css',
+        parseAst.getCSS() || ''
+      );
+    });
   };
 }