Feat components

.gitignore

@@ -14,4 +14,6 @@ codecov.*
 codecov.*.*
 lcov.info
 tarpaulin-report.html
-tarpaulin-report.json
+tarpaulin-report.json
+*storybook.log
+storybook-static

apps/landing/src/app/(detail)/components/form/button/page.tsx

@@ -0,0 +1,4 @@
+import { Button } from '@devup-ui/react'
+export default function Page() {
+  return <Button>Button</Button>
+}

packages/components/.storybook/main.ts

@@ -0,0 +1,19 @@
+import { DevupUI } from '@devup-ui/vite-plugin'
+import type { StorybookConfig } from '@storybook/react-vite'
+import { mergeConfig } from 'vite'
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-docs', '@storybook/addon-onboarding'],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+
+  viteFinal(config) {
+    return mergeConfig(config, {
+      plugins: [DevupUI()],
+    })
+  },
+}
+export default config

packages/components/.storybook/preview.tsx

@@ -0,0 +1,62 @@
+import { setTheme } from '@devup-ui/react'
+import { Decorator } from '@storybook/react-vite'
+import { useEffect } from 'react'
+const preview: import('@storybook/react-vite').Preview = {
+  parameters: {
+    layout: 'fullscreen',
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+}
+
+export default preview
+
+export const globalTypes = {
+  theme: {
+    name: 'Theme',
+    description: 'Global theme for components',
+    defaultValue: 'light',
+    toolbar: {
+      // The icon for the toolbar item
+      icon: 'circlehollow',
+      // Array of options
+      items: [
+        { value: 'default', icon: 'circlehollow', title: 'light' },
+        { value: 'dark', icon: 'circle', title: 'dark' },
+      ],
+      // Property that specifies if the name of the item will be displayed
+      showName: true,
+    },
+  },
+}
+
+export const withHead: Decorator = (StoryFn) => {
+  return (
+    <>
+      <StoryFn />
+    </>
+  )
+}
+export const withTheme: Decorator = (StoryFn, context) => {
+  // Get values from story parameter first, else fallback to globals
+  const theme = context.parameters.theme || context.globals.theme
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useEffect(() => {
+    setTheme(theme)
+  }, [theme])
+  return (
+    <>
+      <StoryFn />
+      <style
+        dangerouslySetInnerHTML={{
+          __html: `:root[data-theme=default]{color-scheme: light;}:root[data-theme=dark]{color-scheme: dark;}`,
+        }}
+      ></style>
+    </>
+  )
+}
+export const decorators = [withHead, withTheme]

packages/components/CHANGELOG.md

@@ -0,0 +1,242 @@
+# @devup-ui/react
+
+## 1.0.4
+
+### Patch Changes
+
+- 9d45acb: Update wasm
+
+## 1.0.3
+
+### Patch Changes
+
+- c5336c9: Add writingMode, textOrientation
+
+## 1.0.2
+
+### Patch Changes
+
+- bb2f49f: Add vendor properties (moz, webkit, ms)
+
+## 1.0.1
+
+### Patch Changes
+
+- 864c37b: Add info to package.json
+
+## 1.0.0
+
+### Major Changes
+
+- 18b1bd7: Optimize Zero value
+
+## 0.1.34
+
+### Patch Changes
+
+- c029a8d: Fix theme script
+
+## 0.1.33
+
+### Patch Changes
+
+- 57db495: Add initTheme, Fix typing issue of ThemeScript
+
+## 0.1.32
+
+### Patch Changes
+
+- 5f2ad1d: Add default theme
+
+## 0.1.31
+
+### Patch Changes
+
+- e7fd185: Add textDecoration type
+
+## 0.1.30
+
+### Patch Changes
+
+- 0e1ab6e: Support for conditional selector
+
+## 0.1.29
+
+### Patch Changes
+
+- 7535643: Change default generic type of VStack
+
+## 0.1.28
+
+### Patch Changes
+
+- 98c7b47: Add support conditional pattern
+
+## 0.1.27
+
+### Patch Changes
+
+- 68f79d0: Add lineClamp, willChange
+- 456cb42: Add visiblity
+
+## 0.1.26
+
+### Patch Changes
+
+- 27c414d: Implement style order
+
+## 0.1.25
+
+### Patch Changes
+
+- a3684c5: Add selectors
+
+## 0.1.24
+
+### Patch Changes
+
+- bf47284: Add borderTopRadius, borderBottomRadius, borderLeftRadius, borderRightRadius, \_print
+
+## 0.1.23
+
+### Patch Changes
+
+- 2102fd7: Support theme typing to css
+
+## 0.1.22
+
+### Patch Changes
+
+- e1d8d8b: Fix typing issue
+
+## 0.1.21
+
+### Patch Changes
+
+- 96cd069: Fix theme typing issue
+
+## 0.1.20
+
+### Patch Changes
+
+- 064476f: Fix TypographyKey type definition for better type checking
+
+## 0.1.19
+
+### Patch Changes
+
+- 7e54c1f: Fix type checking issue
+
+## 0.1.18
+
+### Patch Changes
+
+- 77afb9e: Support generic to as prop
+
+## 0.1.17
+
+### Patch Changes
+
+- ea622ed: Add svg props
+
+## 0.1.16
+
+### Patch Changes
+
+- e072762: convert css
+
+## 0.1.15
+
+### Patch Changes
+
+- b40d274: Add typograhpy to props
+
+## 0.1.14
+
+### Patch Changes
+
+- 7f19bd5: Implement ThemeScript, useTheme, getTheme, setTheme
+
+## 0.1.13
+
+### Patch Changes
+
+- 00b14ca: Support optional args in css
+
+## 0.1.12
+
+### Patch Changes
+
+- b84cbc1: Update css.ts
+
+## 0.1.11
+
+### Patch Changes
+
+- 76e8fa1: Add grid, Support for selector in css
+
+## 0.1.10
+
+### Patch Changes
+
+- 0da9456: Add content to style props
+
+## 0.1.9
+
+### Patch Changes
+
+- 6f7c55d: Add group selector
+
+## 0.1.8
+
+### Patch Changes
+
+- 8943bad: Add double selector
+
+## 0.1.7
+
+### Patch Changes
+
+- 0040445: Fix selector type
+
+## 0.1.6
+
+### Patch Changes
+
+- b25c769: Add placehoder to selector
+
+## 0.1.5
+
+### Patch Changes
+
+- e9d655f: Add shorthand
+
+## 0.1.4
+
+### Patch Changes
+
+- 7bde1f2: Add boxSizing prop
+
+## 0.1.3
+
+### Patch Changes
+
+- 30443ae: Update readme
+
+## 0.1.2
+
+### Patch Changes
+
+- 242a6c2: Update package
+
+## 0.1.1
+
+### Patch Changes
+
+- 6100644: Add Image component
+
+## 0.1.0
+
+### Minor Changes
+
+- c0ff96f: Deploy