@keeper-security/keeper-js-ui 0.0.1 → 0.1.0

package/.github/workflows/npm-publish.yml

@@ -1,18 +0,0 @@
-name: Publish to NPM
-on:
-  workflow_dispatch:
-
-jobs:
-  publish-npm:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version-file: .nvmrc
-          registry-url: https://registry.npmjs.org/
-      - run: npm ci
-      - run: npm run build
-      - run: npm publish
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

package/.github/workflows/release-please.yml

@@ -1,19 +0,0 @@
-on:
-  push:
-    branches:
-      - main
-
-permissions:
-  contents: write # creates a release commit
-  pull-requests: write # creates a release PR
-
-name: release-please
-
-jobs:
-  release-please:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: googleapis/release-please-action@v4
-        with:
-          token: ${{ secrets.RELEASE_PLEASE_TOKEN }}
-          release-type: node

package/.husky/commit-msg

@@ -1 +0,0 @@
-npx --no -- commitlint --edit $1

package/.husky/pre-commit

@@ -1 +0,0 @@
-npx lint-staged

package/.lintstagedrc.cjs

@@ -1,4 +0,0 @@
-module.exports = {
-  '!(*.ts)': 'prettier --write --ignore-unknown',
-  '*.ts': ['eslint --fix', 'prettier --write'],
-}

package/.nvmrc

@@ -1 +0,0 @@
-v18

package/.prettierrc

@@ -1,4 +0,0 @@
-{
-  "semi": false,
-  "singleQuote": true
-}

package/.storybook/main.ts

@@ -1,23 +0,0 @@
-import type { StorybookConfig } from '@storybook/react-vite'
-
-const config: StorybookConfig = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [
-    '@storybook/addon-onboarding',
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@chromatic-com/storybook',
-    '@storybook/addon-interactions',
-    '@storybook/addon-a11y',
-    '@storybook/addon-themes',
-    'storybook-addon-rtl',
-  ],
-  framework: {
-    name: '@storybook/react-vite',
-    options: {},
-  },
-  typescript: {
-    reactDocgen: 'react-docgen-typescript',
-  },
-}
-export default config

package/.storybook/preview.ts

@@ -1,33 +0,0 @@
-import type { Preview } from '@storybook/react'
-import { withThemeByClassName } from '@storybook/addon-themes'
-import { withDirection } from './withDirection'
-import '../src/index.css'
-
-const preview: Preview = {
-  decorators: [
-    withDirection,
-    withThemeByClassName({
-      themes: {
-        light: '',
-        dark: 'dark',
-        'high contrast light': 'contrast-light',
-        'high contrast dark': 'contrast-dark',
-      },
-      // Set the theme based on user's browser pref.
-      defaultTheme: window.matchMedia?.('(prefers-color-scheme: dark)').matches
-        ? 'dark'
-        : 'light',
-    }),
-  ],
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
-  tags: ['autodocs'],
-}
-
-export default preview

package/.storybook/withDirection.tsx

@@ -1,22 +0,0 @@
-import React from 'react'
-import { RTL_UPDATE_EVENT, type RTLChangeEvent } from 'storybook-addon-rtl'
-import { useChannel } from 'storybook/internal/preview-api'
-import { DirectionProvider } from '@radix-ui/react-direction'
-
-type Direction = 'ltr' | 'rtl'
-
-export function withDirection(Story) {
-  const [direction, setDirection] = React.useState<Direction>('ltr')
-
-  useChannel({
-    [RTL_UPDATE_EVENT]: (rtlChangeEvent: RTLChangeEvent) => {
-      setDirection(rtlChangeEvent.direction)
-    },
-  })
-
-  return (
-    <DirectionProvider dir={direction}>
-      <Story />
-    </DirectionProvider>
-  )
-}

package/components.json

@@ -1,17 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "default",
-  "rsc": true,
-  "tsx": true,
-  "tailwind": {
-    "config": "tailwind.config.js",
-    "css": "src/index.css",
-    "baseColor": "neutral",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils"
-  }
-}

package/postcss.config.js

@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

package/src/components/ui/button.stories.tsx

@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { fn } from '@storybook/test'
-import { Mail } from 'lucide-react'
-import { Button } from '@/components/ui/button'
-
-type Story = StoryObj<typeof meta>
-
-const meta = {
-  component: Button,
-  args: {
-    children: 'Button',
-    disabled: false,
-    onClick: fn(),
-  },
-} satisfies Meta<typeof Button>
-
-export default meta
-
-export const Default: Story = {}
-
-export const WithIcon: Story = {
-  args: {
-    children: [<Mail className="me-2 size-4" />, 'Button with Icon'],
-  },
-}

package/src/components/ui/button.tsx

@@ -1,56 +0,0 @@
-import * as React from 'react'
-import { Slot } from '@radix-ui/react-slot'
-import { cva, type VariantProps } from 'class-variance-authority'
-
-import { cn } from '@/lib/utils'
-
-const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
-  {
-    variants: {
-      variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-        destructive:
-          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-        outline:
-          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-        secondary:
-          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline',
-      },
-      size: {
-        default: 'h-10 px-4 py-2',
-        sm: 'h-9 rounded-md px-3',
-        lg: 'h-11 rounded-md px-8',
-        icon: 'h-10 w-10',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  },
-)
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'button'
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    )
-  },
-)
-Button.displayName = 'Button'
-
-export { Button, buttonVariants }

package/src/index.css

@@ -1,81 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
-    --radius: 0.5rem;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-  }
-
-  .dark {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-  }
-
-  .contrast-dark {
-    /* TODO: Finish list of high-contrast values */
-    --background: 0 0% 0%;
-    --foreground: 0 0% 98%;
-  }
-
-  .contrast-light {
-    /* TODO: Finish list of high-contrast values */
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}

package/src/index.ts

@@ -1,3 +0,0 @@
-import '@/index.css'
-
-export { Button } from '@/components/ui/button'

package/src/lib/utils.ts

@@ -1,6 +0,0 @@
-import { type ClassValue, clsx } from 'clsx'
-import { twMerge } from 'tailwind-merge'
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}

package/tailwind.config.js

@@ -1,111 +0,0 @@
-const plugin = require('tailwindcss/plugin')
-
-const isProductionBuild = process.env.NODE_ENV === 'production'
-
-// Configure which files Tailwind CSS (TW) scans to produce CSS classes.
-const content = [
-  // We want the ability to use TW anywhere in the project (like Storybook)...
-  './src/**/*.{ts,tsx}',
-  // But we only want to export the classes used by library components.
-  ...(isProductionBuild ? ['!./src/**/*.{spec,stories,test}.{ts,tsx}'] : []),
-]
-
-const safelist = [
-  'dark',
-  /**
-   * We only want these modifiers available to Storybook.
-   * To use them in Storybook, prepend them to any Tailwind CSS utility class.
-   * Example: add a white border while simulating a high contrast dark theme:
-   * `className="contrast-dark:border contrast-dark:border-white"`
-   */
-  ...(isProductionBuild ? [] : ['contrast-dark', 'contrast-light']),
-]
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  darkMode: ['class'],
-  content,
-  prefix: '',
-  safelist,
-  theme: {
-    container: {
-      center: true,
-      padding: '2rem',
-      screens: {
-        '2xl': '1400px',
-      },
-    },
-    extend: {
-      colors: {
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-        primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
-        },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
-        },
-        destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))',
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
-        },
-        popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))',
-        },
-        card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))',
-        },
-      },
-      borderRadius: {
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)',
-      },
-      keyframes: {
-        'accordion-down': {
-          from: { height: '0' },
-          to: { height: 'var(--radix-accordion-content-height)' },
-        },
-        'accordion-up': {
-          from: { height: 'var(--radix-accordion-content-height)' },
-          to: { height: '0' },
-        },
-      },
-      animation: {
-        'accordion-down': 'accordion-down 0.2s ease-out',
-        'accordion-up': 'accordion-up 0.2s ease-out',
-      },
-    },
-  },
-  plugins: [
-    require('tailwindcss-animate'),
-    ...(isProductionBuild
-      ? []
-      : [
-          plugin(({ addVariant }) => {
-            // Simulate high contrast dark themes.
-            addVariant('contrast-dark', ['.contrast-dark &', '&.contrast-dark'])
-            // Simulate high contrast light themes.
-            addVariant('contrast-light', [
-              '.contrast-light &',
-              '&.contrast-light',
-            ])
-          }),
-        ]),
-  ],
-}

package/tsconfig.app.json

@@ -1,33 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-
-    /* UI components config */
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "include": ["src"]
-}

package/tsconfig.json

@@ -1,17 +0,0 @@
-{
-  "files": [],
-  "references": [
-    {
-      "path": "./tsconfig.app.json"
-    },
-    {
-      "path": "./tsconfig.node.json"
-    }
-  ],
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  }
-}

package/tsconfig.node.json

@@ -1,13 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "noEmit": true
-  },
-  "include": ["vite.config.ts"]
-}

package/vite.config.ts

@@ -1,44 +0,0 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react-swc'
-import { resolve } from 'path'
-import dts from 'vite-plugin-dts'
-import { peerDependencies } from './package.json'
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [
-    react(),
-    dts({
-      tsconfigPath: resolve(__dirname, 'tsconfig.app.json'),
-      rollupTypes: true,
-      include: ['src/**/*'],
-    }),
-  ],
-  resolve: {
-    alias: {
-      '@': resolve(__dirname, './src'),
-    },
-  },
-  build: {
-    lib: {
-      entry: resolve(__dirname, 'src/index.ts'),
-      name: 'keeper-js-ui',
-      fileName: (format) => `index.${format}.js`,
-    },
-    rollupOptions: {
-      external: [
-        ...Object.keys(peerDependencies),
-        'react/jsx-runtime',
-        'react-dom/client',
-      ],
-      output: {
-        exports: 'named',
-        globals: {
-          react: 'React',
-          'react-dom': 'ReactDOM',
-          'react/jsx-runtime': 'react/jsx-runtime',
-        },
-      },
-    },
-  },
-})