Migrate all existing component from old repo

.storybook/preview.js

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { ThemeProvider, defaultTheme } from '@retail-ui/theme'
+import { ThemeProvider } from '@retail-ui/theme'
 import '../styles/tailwind.css'
 
 export const parameters = {
@@ -8,7 +8,7 @@ export const parameters = {
 
 const ThemeWrapper = (Story) => {
   return (
-    <ThemeProvider value={{ theme: defaultTheme }}>
+    <ThemeProvider>
       <Story />
     </ThemeProvider>
   )

README.md

@@ -1,29 +1,58 @@
-# Retail UI
+# Retail UI 🛒 (Power by Tailwindcss)
 
-The collection of react component power by tailwindcss
+A collection of accessible and reusable components for React to rapid development of gorgeous interfaces with Tailwind CSS - utility-first CSS framework.
 
-## Check list [WIP]
+> I'm learning setup my own the modern project of development with `monorepo` `yarn workspace`, `convention commit` `continuous integration`, `multiple braches`, `testing library` publish to `npmjs.org` and many more ...
 
-[TODO](TODO.md)
+---
+
+## Why another UI library
+
+The awesome feelings when developing a `React` application with `Tailwindcss` can be leveraged to another level if we have a more primitive component used in web development.
+
+I'm lazy people, I'm wanna keep writting my Tailwindcss and React together without having to integrate other UI component, so I'm created this UI for people like me because it hard to use another UI library if we do'nt take out the fully documentation.
+
+## Feature
+
+With ability to easily build complex and customizable UI of tailwindcss. Retail UI built upon the following principles:
+
+- Dark theme compatible.
+- Highly customizable via `tailwindcss`.
+- Provide accessible out-of-the-box (Designed to listen to the real screen reader)
+- Easier to learn and access. Check our Storybook
+- `Typescript` by default for safety world
+
+---
 
 ## Installing
 
-`yarn add tailwindcss @retail-ui/core`
+Yarn
+
+```sh
+yarn add tailwindcss @retail-ui/core
+```
+
+Npm
+
+```sh
+npm i tailwindcss @retail-ui/core
+```
 
-`npm i tailwindcss @retail-ui/core`
+---
 
 ## Usage
 
-### Simple tailwindcss setup
+**Simple tailwindcss setup**
 
 `tailwind.config.js`
 
 ```javascript
 const defaultTheme = require("tailwindcss/defaultTheme")
+// Our default theme
 const { resolveConfig } = require("@retail-ui/core")
 
 module.exports = resolveConfig({
-  purge: ["{app,pages}/**/*.{js,jsx,ts,tsx}"], # your purge files
+  purge: ["src/**/*.{js,jsx,ts,tsx}"], # your purge files
   // experimental: "all", # experimental tailwindcss
   theme: {
     extend: {
@@ -58,7 +87,7 @@ module.exports = {
 @tailwind utilities;
 ```
 
-Wrapping our `Provider`
+**Wrapping our `Provider`**
 
 Here is a sample of `Next.js` setup
 
@@ -68,12 +97,11 @@ Your `_app.tsx` root file
 import { ThemeProvider, defaultTheme } from '@retail-ui/core'
 import { OtherProvider } from 'other-packages'
 
-const AppProvider: React.FC = ({ children }) => {
+const AppProvider: React.FC = (props) => {
+  const { children } = props
   return (
     <OtherProvider>
-      <RetailProvider value={{ theme: defaultTheme }}>
-        {children}
-      </RetailProvider>
+      <RetailProvider>{children}</RetailProvider>
     </OtherProvider>
   )
 }
@@ -86,3 +114,23 @@ export default function App({ Component, pageProps }: AppProps) {
   )
 }
 ```
+
+**Ready to use**
+
+```tsx
+import { Button } from '@retail-ui/core'
+
+const AwesomeComponent: React.FC = (props) => {
+  return (
+    <div className="flex items-center justify-center">
+      <Button variant="light" >Awesome Retail UI</Button>
+    </div>
+  )
+}
+
+---
+
+## Check list [WIP]
+
+[TODO](TODO.md)
+```

TODO.md

@@ -6,20 +6,6 @@ Project Description
 
 ### **Todo**
 
-- [ ] 🔎 core
-- [ ] Docs
-- [ ] Checkbox
-- [ ] Collapse
-- [ ] Dialog
-- [ ] Drawer
-- [ ] Dropdown
-- [ ] Image
-- [ ] Pagination
-- [ ] Status
-- [ ] Switch
-- [ ] Table
-- [ ] Transition
-
 ### In Progress
 
 ### Done ✓
@@ -40,3 +26,16 @@ Project Description
 - [x] heroicons
 - [x] hooks
 - [x] useCreateCtx
+- [x] 🔎 core
+- [x] Docs
+- [x] Checkbox
+- [x] Collapse
+- [x] Dialog
+- [x] Drawer
+- [x] Dropdown
+- [x] Image
+- [x] Pagination
+- [x] Status
+- [x] Switch
+- [x] Table
+- [x] Transition

_templates/component/with-prompt/index.ejs.t

@@ -2,3 +2,4 @@
 to: packages/<%= name %>/src/index.tsx
 ---
 export * from './<%= h.changeCase.pascal(name) %>'
+export * from './styles'

_templates/component/with-prompt/name.ejs.t

@@ -1,18 +1,22 @@
 ---
 to: packages/<%= name %>/src/<%= h.changeCase.pascal(name) %>.tsx
 ---
+import clsx from 'clsx'
 import * as React from 'react'
 
-export type <%= h.changeCase.pascal(name) %>Props = React.PropsWithChildren<{
-
-}>
+type ReactDivProps = React.HTMLAttributes<HTMLDivElement>
 type Ref = HTMLDivElement
 
-export const <%= h.changeCase.pascal(name) %> = React.forwardRef<Ref, <%= h.changeCase.pascal(name) %>Props>((props, ref) => {
-  const { children } = props
-  return <div ref={ref}>{children}</div>
+export type <%= h.changeCase.pascal(name) %>Props = {
+
+}
+
+export const <%= h.changeCase.pascal(name) %> = React.forwardRef<Ref, ReactDivProps & <%= h.changeCase.pascal(name) %>Props>((props, ref) => {
+  const { children, className, ...rest } = props
+
+  const cls = clsx(className)
+
+  return <div ref={ref} className={cls} {...rest}>{children}</div>
 })
 
 <%= h.changeCase.pascal(name) %>.displayName = '<%= h.changeCase.pascal(name) %>'
-
-export default <%= h.changeCase.pascal(name) %>

_templates/component/with-prompt/name.stories.ejs.t

@@ -1,22 +1,23 @@
 ---
 to: packages/<%= name %>/stories/<%= h.changeCase.pascal(name) %>.stories.tsx
 ---
-import * as React from 'react';
-import { <%= h.changeCase.pascal(name) %>, <%= h.changeCase.pascal(name) %>Props } from '../src';
+import { Meta, Story } from '@storybook/react/types-6-0'
+import * as React from 'react'
 
-const meta = {
+import { <%= h.changeCase.pascal(name) %>, <%= h.changeCase.pascal(name) %>Props } from '../src'
+
+const meta: Meta<<%= h.changeCase.pascal(name) %>Props> = {
   title: 'Retail-UI/<%= h.changeCase.pascal(name) %>',
   component: <%= h.changeCase.pascal(name) %>,
-};
+  args: {},
+}
 
-export default meta;
+export default meta
 
-const Template = (args: <%= h.changeCase.pascal(name) %>Props) => (
+const Template: Story<<%= h.changeCase.pascal(name) %>Props> = (args) => (
   <<%= h.changeCase.pascal(name) %> {...args} data-testid={meta.title} />
-);
+)
+
+export const Simple = Template.bind({})
+Simple.args = {}
 
-export const Simple = Template.bind({});
-// @ts-ignore
-Simple.args = {
-  children: '<%= h.changeCase.pascal(name) %>',
-};

_templates/component/with-prompt/name.test.ejs.t

@@ -1,14 +1,14 @@
 ---
 to: packages/<%= name %>/test/<%= h.changeCase.pascal(name) %>.test.tsx
 ---
-import * as React from 'react';
-import { render } from '@retail-ui/test-utils';
+import { render } from '@retail-ui/test-utils'
+import * as React from 'react'
 
-import * as <%= h.changeCase.pascal(name) %> from '../stories/<%= h.changeCase.pascal(name) %>.stories';
+import * as <%= h.changeCase.pascal(name) %> from '../stories/<%= h.changeCase.pascal(name) %>.stories'
 
 describe('<%= h.changeCase.pascal(name) %>', () => {
   it('renders correctly', () => {
-    const { asFragment } = render(<<%= h.changeCase.pascal(name) %>.Simple />)
+    const { asFragment } = render(<<%= h.changeCase.pascal(name) %>.Simple content="Test title" />)
     expect(asFragment()).toMatchSnapshot()
-  });
-});
+  })
+})

_templates/component/with-prompt/package.ejs.t

@@ -45,5 +45,5 @@ to: packages/<%= name %>/package.json
   "peerDependencies": {
     "react": ">=16"
   },
-  "devDependencies": {}
+  "dependencies": {}
 }

package.json

@@ -19,18 +19,17 @@
   },
   "scripts": {
     "bootstrap": "yarn install --frozen-lockfile && yarn build:packages",
+    "clean:packages": "rm -rf packages/**/node_modules packages/**/dist",
     "build:packages": "lerna run build",
     "build:storybook": "yarn build:tailwind && build-storybook",
-    "start": "lerna run start --stream --parallel",
     "format": "yarn prettier --write \"**/*\"",
     "lint": "yarn eslint \"**/*.{js,jsx,ts,tsx,mdx}\"",
     "prepublishOnly": "yarn bootstrap",
     "storybook": "start-storybook -p 6006",
     "test": "tsdx test",
     "test:changes": "tsdx test --changedSince master",
     "test:ci": "yarn test --ci --coverage --maxWorkers=2",
-    "test:watch": "tsdx test --watch",
-    "build:tailwind": "postcss styles/base.css -o styles/tailwind.css"
+    "test:watch": "tsdx test --watch"
   },
   "devDependencies": {
     "@babel/core": "^7.11.1",
@@ -47,12 +46,12 @@
     "@testing-library/jest-dom": "^5.11.3",
     "@testing-library/react": "^10.4.8",
     "@types/jest": "^26.0.10",
+    "@types/lodash": "^4.14.161",
     "@types/moment": "^2.13.0",
     "@types/node": "^14.0.27",
     "@types/react": "^16.9.46",
     "@types/react-dom": "^16.9.8",
     "@types/react-test-renderer": "^16.9.3",
-    "@types/styled-components": "^5.1.2",
     "@types/tinycolor2": "^1.4.2",
     "autoprefixer": "^9.8.6",
     "babel-jest": "^26.3.0",
@@ -67,13 +66,13 @@
     "lerna": "^3.22.1",
     "lerna-changelog": "^1.0.1",
     "lint-staged": "^10.2.11",
+    "lodash": "^4.17.20",
     "postcss-cli": "^7.1.1",
     "postcss-preset-env": "^6.7.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-is": "^16.13.1",
     "react-test-renderer": "^16.13.1",
-    "styled-components": "^5.1.1",
     "tailwindcss": "^1.7.6",
     "tailwindcss-multi-theme": "^1.0.3",
     "tinycolor2": "^1.4.1",
@@ -103,6 +102,5 @@
     "eslint-plugin-testing-library": "^3.6.0",
     "eslint-plugin-unicorn": "^21.0.0",
     "prettier": "^2.0.5"
-  },
-  "dependencies": {}
+  }
 }

packages/action-buttons/CHANGELOG.md

@@ -3,6 +3,40 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.6.0](https://github.com/sondh0127/retail-ui/compare/@retail-ui/action-buttons@0.5.0...@retail-ui/action-buttons@0.6.0) (2020-09-10)
+
+### Features
+
+- **all:** bump devdeps to deps ([429a82f](https://github.com/sondh0127/retail-ui/commit/429a82f613c307ff079f78fe15ab9e271620ecdf))
+
+# [0.5.0](https://github.com/sondh0127/retail-ui/compare/@retail-ui/action-buttons@0.4.1...@retail-ui/action-buttons@0.5.0) (2020-09-07)
+
+### Features
+
+- **all:** refactor all styles, theme ([ed31c21](https://github.com/sondh0127/retail-ui/commit/ed31c219cd925c3f8340066f504f2527a9e911bf))
+
+## [0.4.1](https://github.com/sondh0127/retail-ui/compare/@retail-ui/action-buttons@0.4.0...@retail-ui/action-buttons@0.4.1) (2020-09-06)
+
+**Note:** Version bump only for package @retail-ui/action-buttons
+
+# [0.4.0](https://github.com/sondh0127/retail-ui/compare/@retail-ui/action-buttons@0.3.2...@retail-ui/action-buttons@0.4.0) (2020-09-04)
+
+### Bug Fixes
+
+- **all:** fix all component props ([b84c029](https://github.com/sondh0127/retail-ui/commit/b84c0296dbb362d1467cb49544bc30493ea6f2c0)), closes [#10](https://github.com/sondh0127/retail-ui/issues/10)
+
+### Features
+
+- **all:** add and migrate all the other component from draft packages ([2401dcf](https://github.com/sondh0127/retail-ui/commit/2401dcffeed92aa322be2944d4cfa9b8002e6e53))
+
+### BREAKING CHANGES
+
+- **all:** use React.ReactNode for icon
+
+## [0.3.2](https://github.com/sondh0127/retail-ui/compare/@retail-ui/action-buttons@0.3.1...@retail-ui/action-buttons@0.3.2) (2020-09-03)
+
+**Note:** Version bump only for package @retail-ui/action-buttons
+
 ## [0.3.1](https://github.com/sondh0127/retail-ui/compare/@retail-ui/action-buttons@0.3.0...@retail-ui/action-buttons@0.3.1) (2020-09-02)
 
 **Note:** Version bump only for package @retail-ui/action-buttons

packages/action-buttons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retail-ui/action-buttons",
-  "version": "0.3.1",
+  "version": "0.6.0",
   "description": "The ActionButtons component of @retail-ui",
   "keywords": [
     "react",
@@ -42,8 +42,8 @@
   "peerDependencies": {
     "react": ">=16"
   },
-  "devDependencies": {
-    "@retail-ui/button": "^0.2.4",
-    "@retail-ui/theme": "^0.3.0"
+  "dependencies": {
+    "@retail-ui/button": "^0.5.0",
+    "clsx": "^1.1.1"
   }
 }